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 />

305
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"> </tooltip>
<img class="options" src="images/options_wheel.png" @click="openDialog('Options')" /> </div>
</tooltip> <div @click="openDialog('Options')">
<tooltip display="<span>Options</span>" bottom class="options" xoffset="-70px">
<img src="images/options_wheel.png" />
</tooltip>
</div>
</div> </div>
<div v-else> <div v-else class="overlay-nav">
<div class="discord overlay"> <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" />
@ -92,142 +97,158 @@ export default {
</script> </script>
<style scoped> <style scoped>
.nav { .nav {
background-color: var(--secondary-background); background-color: var(--secondary-background);
display: flex; display: flex;
left: 0; left: 0;
right: 0; right: 0;
top: 0; top: 0;
height: 46px; height: 46px;
width: 100%; width: 100%;
border-bottom: 4px solid var(--separator); border-bottom: 4px solid var(--separator);
} }
.title { .nav > * {
font-size: 36px; height: 46px;
text-align: left; width: 46px;
margin-left: 12px; display: flex;
} cursor: pointer;
}
.overlay { .overlay-nav {
z-index: 100; position: absolute;
} top: 10px;
left: 10px;
display: flex;
flex-direction: column;
z-index: 1;
}
.discord { .overlay-nav > * {
width: 40px; height: 50px;
height: 40px; width: 50px;
cursor: pointer; display: flex;
} cursor: pointer;
margin: 0;
align-items: center;
justify-content: center;
}
.discord.overlay { .title {
position: absolute; font-size: 36px;
top: 120px; text-align: left;
left: 4px; margin-left: 12px;
} cursor: unset;
}
.discord img { .nav > .title {
width: 100%; width: unset;
height: 100%; }
}
.discord-links { .nav .saves,
position: fixed; .nav .info {
top: 45px; display: flex;
padding: 20px; }
right: -280px;
width: 200px;
transition: right .25s ease;
background: var(--secondary-background);
z-index: 1;
}
.discord.overlay .discord-links { .tooltip-container {
top: 160px; width: 100%;
right: unset; height: 100%;
left: -280px; display: flex;
transition: left .25s ease; }
}
.discord-links li { .overlay-nav .discord {
margin-bottom: 4px; position: relative;
} }
.discord:not(.overlay):hover .discord-links { .discord img {
right: 0; width: 100%;
} height: 100%;
}
.discord.overlay:hover .discord-links { .discord-links {
left: 0; position: fixed;
} top: 45px;
padding: 20px;
right: -280px;
width: 200px;
transition: right .25s ease;
background: var(--secondary-background);
z-index: 1;
}
.info { .overlay-nav .discord-links {
font-size: 20px; position: absolute;
color: var(--link); left: -280px;
line-height: 14px; right: unset;
width: 40px; transition: left .25s ease;
height: 40px; }
cursor: pointer;
}
.info.overlay { .overlay-nav .discord:hover .discord-links {
position: absolute; left: -10px;
top: 60px; }
left: 4px;
}
.info:hover { .discord-links li {
transform: scale(1.2, 1.2); margin-bottom: 4px;
text-shadow: 5px 0 10px var(--link), }
-3px 0 12px var(--link);
}
.saves { .discord-links li:first-child {
font-size: 36px; font-size: 1.2em;
cursor: pointer; }
}
.saves:hover { *:not(.overlay-nav) .discord:hover .discord-links {
transform: scale(1.2, 1.2); right: 0;
text-shadow: 5px 0 10px var(--color), }
-3px 0 12px var(--color);
}
.options { .info {
height: 50px; font-size: 30px;
width: 50px; color: var(--link);
cursor: pointer; line-height: 14px;
transition-duration: .5s; }
}
.options.overlay { .info:hover span {
position: absolute; transform: scale(1.2, 1.2);
top: 0; text-shadow: 5px 0 10px var(--link),
left: 0; -3px 0 12px var(--link);
} }
.options:hover { .saves span {
transform: rotate(360deg); font-size: 36px;
} }
.version { .saves:hover span {
color: var(--points); transform: scale(1.2, 1.2);
cursor: pointer; text-shadow: 5px 0 10px var(--color),
} -3px 0 12px var(--color);
}
.version.overlay { .options img {
position: absolute; width: 100%;
right: 4px; height: 100%;
top: 4px; }
}
.version:hover { .options:hover img {
transform: scale(1.2, 1.2); transform: rotate(360deg);
text-shadow: 5px 0 10px var(--points), -3px 0 12px var(--points); }
}
.nav > .title + .tooltip-container { .nav .version-container {
margin-left: 12px; display: flex;
margin-right: 12px; height: 25px;
margin-bottom: 5px; margin-bottom: 0;
} margin-left: 10px;
}
.overlay-nav .version-container {
width: unset;
height: 25px;
}
.version {
color: var(--points);
}
.version:hover span {
transform-origin: 0% 50%;
transform: scale(1.2, 1.2);
text-shadow: 5px 0 10px var(--points), -3px 0 12px var(--points);
}
</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() {