thepaperpilot/chromatic-lattice
1
0
Fork 0
Code Issues Pull requests Releases Activity Actions

Made nav more consistent

Browse source
This commit is contained in:
thepaperpilot 2021-06-24 00:57:20 -05:00
parent f1340b1b24
commit 2bea76fc61
3 changed files with 169 additions and 143 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
src/App.vue
View file

@ -1,6 +1,6 @@
<template> <template>
<div id="app" @mousemove="updateMouse" :style="theme" :class="{ useHeader }"> <div id="app" @mousemove="updateMouse" :style="theme" :class="{ useHeader }">
<Nav /> <Nav v-if="useHeader" />
<Tabs /> <Tabs />
<TPS v-if="showTPS" /> <TPS v-if="showTPS" />
<GameOverScreen /> <GameOverScreen />

187
src/components/system/Nav.vue
View file

@ -3,8 +3,10 @@
<div class="nav" v-if="useHeader"> <div class="nav" v-if="useHeader">
<img v-if="banner" :src="banner" height="100%" :alt="title" /> <img v-if="banner" :src="banner" height="100%" :alt="title" />
<div v-else class="title">{{ title }}</div> <div v-else class="title">{{ title }}</div>
<tooltip display="Changelog" bottom><div class="version" @click="openDialog('Changelog')">v{{ version }}</div></tooltip> <div @click="openDialog('Changelog')" class="version-container">
<div style="flex-grow: 1"></div> <tooltip display="Changelog" bottom class="version"><span>v{{ version }}</span></tooltip>
</div>
<div style="flex-grow: 1; cursor: unset;"></div>
<div class="discord"> <div class="discord">
<img src="images/discord.png" @click="window.open(discordLink, 'mywindow')" /> <img src="images/discord.png" @click="window.open(discordLink, 'mywindow')" />
<ul class="discord-links"> <ul class="discord-links">
@ -16,18 +18,34 @@
<li><a href="http://discord.gg/wwQfgPa" target="_blank">Jacorb's Games</a></li> <li><a href="http://discord.gg/wwQfgPa" target="_blank">Jacorb's Games</a></li>
</ul> </ul>
</div> </div>
<tooltip display="<span>Info</span>" bottom yoffset="4px"> <div @click="openDialog('Info')">
<div class="info" @click="openDialog('Info')"><br/>i</div> <tooltip display="<span>Info</span>" bottom class="info"><span>i</span></tooltip>
</tooltip> </div>
<tooltip display="Saves" bottom xoffset="-24px" style="margin-top: 6px"> <div @click="openDialog('Saves')">
<div class="material-icons saves" @click="openDialog('Saves')">library_books</div> <tooltip display="Saves" bottom class="saves" xoffset="-20px">
</tooltip> <span class="material-icons">library_books</span>
<tooltip display="<span>Options</span>" bottom xoffset="-64px" yoffset="-8px">
<img class="options" src="images/options_wheel.png" @click="openDialog('Options')" />
</tooltip> </tooltip>
</div> </div>
<div v-else> <div @click="openDialog('Options')">
<div class="discord overlay"> <tooltip display="<span>Options</span>" bottom class="options" xoffset="-70px">
<img src="images/options_wheel.png" />
</tooltip>
</div>
</div>
<div v-else class="overlay-nav">
<div @click="openDialog('Changelog')" class="version-container">
<tooltip display="Changelog" right xoffset="25%" class="version"><span>v{{ version }}</span></tooltip>
</div>
<div @click="openDialog('Saves')">
<tooltip display="Saves" right class="saves"><span class="material-icons">library_books</span></tooltip>
</div>
<div @click="openDialog('Options')">
<tooltip display="<span>Options</span>" right class="options"><img src="images/options_wheel.png" /></tooltip>
</div>
<div @click="openDialog('Info')">
<tooltip display="<span>Info</span>" right class="info"><span>i</span></tooltip>
</div>
<div class="discord">
<img src="images/discord.png" @click="openDiscord" /> <img src="images/discord.png" @click="openDiscord" />
<ul class="discord-links"> <ul class="discord-links">
<li v-if="discordLink !== 'https://discord.gg/WzejVAx'"> <li v-if="discordLink !== 'https://discord.gg/WzejVAx'">
@ -38,19 +56,6 @@
<li><a href="http://discord.gg/wwQfgPa" target="_blank">Jacorb's Games</a></li> <li><a href="http://discord.gg/wwQfgPa" target="_blank">Jacorb's Games</a></li>
</ul> </ul>
</div> </div>
<div class="info overlay" @click="openDialog('Info')"><br/>i</div>
<tooltip display="<span>Info</span>" right>
<img class="options overlay" src="images/options_wheel.png" @click="openDialog('Saves')" />
</tooltip>
<tooltip display="Saves" right>
<div class="material-icons saves overlay" @click="openDialog('Saves')">library_books</div>
</tooltip>
<tooltip display="<span>Options</span>" right>
<img class="options overlay" src="images/options_wheel.png" @click="openDialog('Options')" />
</tooltip>
<tooltip display="Changelog" right>
<div class="version overlay" @click="openDialog('Changelog')">v{{ version }}</div>
</tooltip>
</div> </div>
<Info :show="showInfo" @openDialog="openDialog" @closeDialog="closeDialog" /> <Info :show="showInfo" @openDialog="openDialog" @closeDialog="closeDialog" />
<SavesManager :show="showSaves" @closeDialog="closeDialog" /> <SavesManager :show="showSaves" @closeDialog="closeDialog" />
@ -103,26 +108,56 @@ export default {
border-bottom: 4px solid var(--separator); border-bottom: 4px solid var(--separator);
} }
.nav > * {
height: 46px;
width: 46px;
display: flex;
cursor: pointer;
}
.overlay-nav {
position: absolute;
top: 10px;
left: 10px;
display: flex;
flex-direction: column;
z-index: 1;
}
.overlay-nav > * {
height: 50px;
width: 50px;
display: flex;
cursor: pointer;
margin: 0;
align-items: center;
justify-content: center;
}
.title { .title {
font-size: 36px; font-size: 36px;
text-align: left; text-align: left;
margin-left: 12px; margin-left: 12px;
cursor: unset;
} }
.overlay { .nav > .title {
z-index: 100; width: unset;
} }
.discord { .nav .saves,
width: 40px; .nav .info {
height: 40px; display: flex;
cursor: pointer;
} }
.discord.overlay { .tooltip-container {
position: absolute; width: 100%;
top: 120px; height: 100%;
left: 4px; display: flex;
}
.overlay-nav .discord {
position: relative;
} }
.discord img { .discord img {
@ -141,93 +176,79 @@ export default {
z-index: 1; z-index: 1;
} }
.discord.overlay .discord-links { .overlay-nav .discord-links {
top: 160px; position: absolute;
right: unset;
left: -280px; left: -280px;
right: unset;
transition: left .25s ease; transition: left .25s ease;
} }
.overlay-nav .discord:hover .discord-links {
left: -10px;
}
.discord-links li { .discord-links li {
margin-bottom: 4px; margin-bottom: 4px;
} }
.discord:not(.overlay):hover .discord-links { .discord-links li:first-child {
font-size: 1.2em;
}
*:not(.overlay-nav) .discord:hover .discord-links {
right: 0; right: 0;
} }
.discord.overlay:hover .discord-links {
left: 0;
}
.info { .info {
font-size: 20px; font-size: 30px;
color: var(--link); color: var(--link);
line-height: 14px; line-height: 14px;
width: 40px;
height: 40px;
cursor: pointer;
} }
.info.overlay { .info:hover span {
position: absolute;
top: 60px;
left: 4px;
}
.info:hover {
transform: scale(1.2, 1.2); transform: scale(1.2, 1.2);
text-shadow: 5px 0 10px var(--link), text-shadow: 5px 0 10px var(--link),
-3px 0 12px var(--link); -3px 0 12px var(--link);
} }
.saves { .saves span {
font-size: 36px; font-size: 36px;
cursor: pointer;
} }
.saves:hover { .saves:hover span {
transform: scale(1.2, 1.2); transform: scale(1.2, 1.2);
text-shadow: 5px 0 10px var(--color), text-shadow: 5px 0 10px var(--color),
-3px 0 12px var(--color); -3px 0 12px var(--color);
} }
.options { .options img {
height: 50px; width: 100%;
width: 50px; height: 100%;
cursor: pointer;
transition-duration: .5s;
} }
.options.overlay { .options:hover img {
position: absolute;
top: 0;
left: 0;
}
.options:hover {
transform: rotate(360deg); transform: rotate(360deg);
} }
.nav .version-container {
display: flex;
height: 25px;
margin-bottom: 0;
margin-left: 10px;
}
.overlay-nav .version-container {
width: unset;
height: 25px;
}
.version { .version {
color: var(--points); color: var(--points);
cursor: pointer;
} }
.version.overlay { .version:hover span {
position: absolute; transform-origin: 0% 50%;
right: 4px;
top: 4px;
}
.version:hover {
transform: scale(1.2, 1.2); transform: scale(1.2, 1.2);
text-shadow: 5px 0 10px var(--points), -3px 0 12px var(--points); text-shadow: 5px 0 10px var(--points), -3px 0 12px var(--points);
} }
.nav > .title + .tooltip-container {
margin-left: 12px;
margin-right: 12px;
margin-bottom: 5px;
}
</style> </style>

5
src/components/system/Tabs.vue
View file

@ -1,6 +1,7 @@
<template> <template>
<simplebar class="tabs-container"> <simplebar class="tabs-container">
<div v-for="(tab, index) in tabs" :key="index" class="tab" :ref="`tab-${index}`"> <div v-for="(tab, index) in tabs" :key="index" class="tab" :ref="`tab-${index}`">
<Nav v-if="index === 0 && !useHeader" />
<simplebar> <simplebar>
<div class="inner-tab"> <div class="inner-tab">
<LayerProvider :layer="tab" :index="index" v-if="tab in components && components[tab]"> <LayerProvider :layer="tab" :index="index" v-if="tab in components && components[tab]">
@ -17,11 +18,15 @@
</template> </template>
<script> <script>
import modInfo from '../../data/modInfo.json';
import { mapState } from 'vuex'; import { mapState } from 'vuex';
import { layers } from '../../store/layers'; import { layers } from '../../store/layers';
export default { export default {
name: 'Tabs', name: 'Tabs',
data() {
return { useHeader: modInfo.useHeader };
},
computed: { computed: {
...mapState([ 'tabs' ]), ...mapState([ 'tabs' ]),
components() { components() {