thepaperpilot/Planar-Pioneers
1
0
Fork 0
mirror of https://github.com/thepaperpilot/Planar-Pioneers.git synced 2024-11-22 08:31:31 +00:00
Code Issues Releases Activity Actions

Made nav bar icons more consistent

Browse source
This commit is contained in:
thepaperpilot 2021-09-19 16:59:43 -05:00
parent 21dbcc0d66
commit c414fdf451
4 changed files with 20 additions and 38 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

BIN
public/images/discord.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 1.9 KiB

BIN
public/images/options_wheel.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 4.3 KiB

9
src/components/system/Info.vue
View file

@ -27,25 +27,25 @@
v-if="discordLink !== 'https://discord.gg/WzejVAx'" v-if="discordLink !== 'https://discord.gg/WzejVAx'"
class="info-modal-discord-link" class="info-modal-discord-link"
> >
<img src="images/discord.png" class="info-modal-discord" /> <span class="material-icons info-modal-discord">discord</span>
{{ discordName }} {{ discordName }}
</a> </a>
</div> </div>
<div> <div>
<a href="https://discord.gg/WzejVAx" class="info-modal-discord-link"> <a href="https://discord.gg/WzejVAx" class="info-modal-discord-link">
<img src="images/discord.png" class="info-modal-discord" /> <span class="material-icons info-modal-discord">discord</span>
The Paper Pilot Community The Paper Pilot Community
</a> </a>
</div> </div>
<div> <div>
<a href="https://discord.gg/F3xveHV" class="info-modal-discord-link"> <a href="https://discord.gg/F3xveHV" class="info-modal-discord-link">
<img src="images/discord.png" class="info-modal-discord" /> <span class="material-icons info-modal-discord">discord</span>
The Modding Tree The Modding Tree
</a> </a>
</div> </div>
<div> <div>
<a href="https://discord.gg/wwQfgPa" class="info-modal-discord-link"> <a href="https://discord.gg/wwQfgPa" class="info-modal-discord-link">
<img src="images/discord.png" class="info-modal-discord" /> <span class="material-icons info-modal-discord">discord</span>
Jacorb's Games Jacorb's Games
</a> </a>
</div> </div>
@ -138,7 +138,6 @@ export default defineComponent({
} }
.info-modal-discord { .info-modal-discord {
height: 2em;
margin: 0; margin: 0;
margin-right: 4px; margin-right: 4px;
} }

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

@ -9,7 +9,7 @@
</div> </div>
<div style="flex-grow: 1; cursor: unset;"></div> <div style="flex-grow: 1; cursor: unset;"></div>
<div class="discord"> <div class="discord">
<img src="images/discord.png" @click="openDiscord" /> <span @click="openDialog('Info')" class="material-icons">discord</span>
<ul class="discord-links"> <ul class="discord-links">
<li v-if="discordLink !== 'https://discord.gg/WzejVAx'"> <li v-if="discordLink !== 'https://discord.gg/WzejVAx'">
<a :href="discordLink" target="_blank">{{ discordName }}</a> <a :href="discordLink" target="_blank">{{ discordName }}</a>
@ -28,7 +28,9 @@
</ul> </ul>
</div> </div>
<div @click="openDialog('Info')"> <div @click="openDialog('Info')">
<tooltip display="<span>Info</span>" bottom class="info"><span>i</span></tooltip> <tooltip display="<span>Info</span>" bottom class="info">
<span class="material-icons">info</span>
</tooltip>
</div> </div>
<div @click="openDialog('Saves')"> <div @click="openDialog('Saves')">
<tooltip display="Saves" bottom class="saves" xoffset="-20px"> <tooltip display="Saves" bottom class="saves" xoffset="-20px">
@ -37,13 +39,13 @@
</div> </div>
<div @click="openDialog('Options')"> <div @click="openDialog('Options')">
<tooltip display="<span>Options</span>" bottom class="options" xoffset="-70px"> <tooltip display="<span>Options</span>" bottom class="options" xoffset="-70px">
<img src="images/options_wheel.png" /> <span class="material-icons">settings</span>
</tooltip> </tooltip>
</div> </div>
</div> </div>
<div v-else class="overlay-nav" v-bind="$attrs"> <div v-else class="overlay-nav" v-bind="$attrs">
<div @click="openDialog('Changelog')" class="version-container"> <div @click="openDialog('Changelog')" class="version-container">
<tooltip display="Changelog" right xoffset="25%" class="version" <tooltip display="<span>Changelog</span>" right xoffset="25%" class="version"
><span>v{{ version }}</span></tooltip ><span>v{{ version }}</span></tooltip
> >
</div> </div>
@ -53,15 +55,17 @@
> >
</div> </div>
<div @click="openDialog('Options')"> <div @click="openDialog('Options')">
<tooltip display="<span>Options</span>" right class="options" <tooltip display="<span>Options</span>" right class="options">
><img src="images/options_wheel.png" <span class="material-icons">settings</span>
/></tooltip> </tooltip>
</div> </div>
<div @click="openDialog('Info')"> <div @click="openDialog('Info')">
<tooltip display="<span>Info</span>" right class="info"><span>i</span></tooltip> <tooltip display="<span>Info</span>" right class="info">
<span class="material-icons">info</span>
</tooltip>
</div> </div>
<div class="discord"> <div class="discord">
<img src="images/discord.png" @click="openDiscord" /> <span @click="openDialog('Info')" class="material-icons">discord</span>
<ul class="discord-links"> <ul class="discord-links">
<li v-if="discordLink !== 'https://discord.gg/WzejVAx'"> <li v-if="discordLink !== 'https://discord.gg/WzejVAx'">
<a :href="discordLink" target="_blank">{{ discordName }}</a> <a :href="discordLink" target="_blank">{{ discordName }}</a>
@ -230,33 +234,12 @@ export default defineComponent({
right: 0; right: 0;
} }
.info { .material-icons {
font-size: 30px;
color: var(--link);
line-height: 14px;
}
.info:hover span {
transform: scale(1.2, 1.2);
text-shadow: 5px 0 10px var(--link), -3px 0 12px var(--link);
}
.saves span {
font-size: 36px; font-size: 36px;
} }
.saves:hover span { .material-icons:hover {
transform: scale(1.2, 1.2); text-shadow: 5px 0 10px var(--link), -3px 0 12px var(--foreground);
text-shadow: 5px 0 10px var(--foreground), -3px 0 12px var(--foreground);
}
.options img {
width: 100%;
height: 100%;
}
.options:hover img {
transform: rotate(360deg);
} }
.nav .version-container { .nav .version-container {