thepaperpilot/Profectus
1
0
Fork 0
forked from profectus/Profectus
Code Pull requests 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'"
class="info-modal-discord-link"
>
<img src="images/discord.png" class="info-modal-discord" />
<span class="material-icons info-modal-discord">discord</span>
{{ discordName }}
</a>
</div>
<div>
<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
</a>
</div>
<div>
<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
</a>
</div>
<div>
<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
</a>
</div>
@ -138,7 +138,6 @@ export default defineComponent({
}
.info-modal-discord {
height: 2em;
margin: 0;
margin-right: 4px;
}

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

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