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>
<div id="app" @mousemove="updateMouse" :style="theme" :class="{ useHeader }">
<Nav />
<Nav v-if="useHeader" />
<Tabs />
<TPS v-if="showTPS" />
<GameOverScreen />

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

@ -3,8 +3,10 @@
<div class="nav" v-if="useHeader">
<img v-if="banner" :src="banner" height="100%" :alt="title" />
<div v-else class="title">{{ title }}</div>
<tooltip display="Changelog" bottom><div class="version" @click="openDialog('Changelog')">v{{ version }}</div></tooltip>
<div style="flex-grow: 1"></div>
<div @click="openDialog('Changelog')" class="version-container">
<tooltip display="Changelog" bottom class="version"><span>v{{ version }}</span></tooltip>
</div>
<div style="flex-grow: 1; cursor: unset;"></div>
<div class="discord">
<img src="images/discord.png" @click="window.open(discordLink, 'mywindow')" />
<ul class="discord-links">
@ -16,18 +18,34 @@
<li><a href="http://discord.gg/wwQfgPa" target="_blank">Jacorb's Games</a></li>
</ul>
</div>
<tooltip display="<span>Info</span>" bottom yoffset="4px">
<div class="info" @click="openDialog('Info')"><br/>i</div>
</tooltip>
<tooltip display="Saves" bottom xoffset="-24px" style="margin-top: 6px">
<div class="material-icons saves" @click="openDialog('Saves')">library_books</div>
</tooltip>
<tooltip display="<span>Options</span>" bottom xoffset="-64px" yoffset="-8px">
<img class="options" src="images/options_wheel.png" @click="openDialog('Options')" />
<div @click="openDialog('Info')">
<tooltip display="<span>Info</span>" bottom class="info"><span>i</span></tooltip>
</div>
<div @click="openDialog('Saves')">
<tooltip display="Saves" bottom class="saves" xoffset="-20px">
<span class="material-icons">library_books</span>
</tooltip>
</div>
<div v-else>
<div class="discord overlay">
<div @click="openDialog('Options')">
<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" />
<ul class="discord-links">
<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>
</ul>
</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>
<Info :show="showInfo" @openDialog="openDialog" @closeDialog="closeDialog" />
<SavesManager :show="showSaves" @closeDialog="closeDialog" />
@ -92,7 +97,7 @@ export default {
</script>
<style scoped>
.nav {
.nav {
background-color: var(--secondary-background);
display: flex;
left: 0;
@ -101,36 +106,66 @@ export default {
height: 46px;
width: 100%;
border-bottom: 4px solid var(--separator);
}
}
.title {
.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 {
font-size: 36px;
text-align: left;
margin-left: 12px;
}
cursor: unset;
}
.overlay {
z-index: 100;
}
.nav > .title {
width: unset;
}
.discord {
width: 40px;
height: 40px;
cursor: pointer;
}
.nav .saves,
.nav .info {
display: flex;
}
.discord.overlay {
position: absolute;
top: 120px;
left: 4px;
}
.discord img {
.tooltip-container {
width: 100%;
height: 100%;
}
display: flex;
}
.discord-links {
.overlay-nav .discord {
position: relative;
}
.discord img {
width: 100%;
height: 100%;
}
.discord-links {
position: fixed;
top: 45px;
padding: 20px;
@ -139,95 +174,81 @@ export default {
transition: right .25s ease;
background: var(--secondary-background);
z-index: 1;
}
}
.discord.overlay .discord-links {
top: 160px;
right: unset;
.overlay-nav .discord-links {
position: absolute;
left: -280px;
right: unset;
transition: left .25s ease;
}
}
.discord-links li {
.overlay-nav .discord:hover .discord-links {
left: -10px;
}
.discord-links li {
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;
}
}
.discord.overlay:hover .discord-links {
left: 0;
}
.info {
font-size: 20px;
.info {
font-size: 30px;
color: var(--link);
line-height: 14px;
width: 40px;
height: 40px;
cursor: pointer;
}
}
.info.overlay {
position: absolute;
top: 60px;
left: 4px;
}
.info:hover {
.info:hover span {
transform: scale(1.2, 1.2);
text-shadow: 5px 0 10px var(--link),
-3px 0 12px var(--link);
}
}
.saves {
.saves span {
font-size: 36px;
cursor: pointer;
}
}
.saves:hover {
.saves:hover span {
transform: scale(1.2, 1.2);
text-shadow: 5px 0 10px var(--color),
-3px 0 12px var(--color);
}
}
.options {
height: 50px;
width: 50px;
cursor: pointer;
transition-duration: .5s;
}
.options img {
width: 100%;
height: 100%;
}
.options.overlay {
position: absolute;
top: 0;
left: 0;
}
.options:hover {
.options:hover img {
transform: rotate(360deg);
}
}
.version {
.nav .version-container {
display: flex;
height: 25px;
margin-bottom: 0;
margin-left: 10px;
}
.overlay-nav .version-container {
width: unset;
height: 25px;
}
.version {
color: var(--points);
cursor: pointer;
}
}
.version.overlay {
position: absolute;
right: 4px;
top: 4px;
}
.version:hover {
.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);
}
.nav > .title + .tooltip-container {
margin-left: 12px;
margin-right: 12px;
margin-bottom: 5px;
}
}
</style>

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

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