🎨 Minor UI glitches fix
This commit is contained in:
Liyas Thomas
@@ -177,14 +177,14 @@ See the [CHANGELOG](CHANGELOG.md) file for details.
|
|||||||
* ([contributors](https://github.com/liyasthomas/postwoman/graphs/contributors))
|
* ([contributors](https://github.com/liyasthomas/postwoman/graphs/contributors))
|
||||||
|
|
||||||
### Contributors
|
### Contributors
|
||||||
* [NBTX](https://github.com/NBTX)
|
* [John Harker](https://github.com/NBTX)
|
||||||
* [Andrew Bastin](https://github.com/AndrewBastin)
|
* [Andrew Bastin](https://github.com/AndrewBastin)
|
||||||
* [Nick Palenchar](https://github.com/nickpalenchar)
|
* [Nick Palenchar](https://github.com/nickpalenchar)
|
||||||
* [Abraham Williams](https://github.com/abraham)
|
* [Abraham Williams](https://github.com/abraham)
|
||||||
* [Nicholas La Roux](https://github.com/larouxn)
|
* [Nicholas La Roux](https://github.com/larouxn)
|
||||||
* [RifqiAlAbqary](https://github.com/reefqi037)
|
* [RifqiAlAbqary](https://github.com/reefqi037)
|
||||||
* [izerozlu](https://github.com/izerozlu)
|
* [izerozlu](https://github.com/izerozlu)
|
||||||
* [Nilesh Patel](https://github.com/NileshSP)
|
* [Thomas Yuba](https://github.com/yubathom)
|
||||||
|
|
||||||
### Thanks
|
### Thanks
|
||||||
* [Dribbble](https://dribbble.com)
|
* [Dribbble](https://dribbble.com)
|
||||||
|
|||||||
@@ -51,13 +51,13 @@ h3.title {
|
|||||||
|
|
||||||
header,
|
header,
|
||||||
footer {
|
footer {
|
||||||
& > div {
|
& > div {
|
||||||
display: flex;
|
display: flex;
|
||||||
padding: 16px;
|
padding: 16px;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
nav {
|
nav {
|
||||||
@@ -87,7 +87,8 @@ button {
|
|||||||
font-size: 16px;
|
font-size: 16px;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
|
|
||||||
&[disabled], &.disabled {
|
&[disabled],
|
||||||
|
&.disabled {
|
||||||
opacity: 0.7;
|
opacity: 0.7;
|
||||||
cursor: default;
|
cursor: default;
|
||||||
}
|
}
|
||||||
@@ -227,7 +228,8 @@ input[type="checkbox"] {
|
|||||||
background-color: var(--err-color);
|
background-color: var(--err-color);
|
||||||
}
|
}
|
||||||
|
|
||||||
.disabled, input[disabled] {
|
.disabled,
|
||||||
|
input[disabled] {
|
||||||
background-color: var(--err-color);
|
background-color: var(--err-color);
|
||||||
color: #b2b2b2;
|
color: #b2b2b2;
|
||||||
}
|
}
|
||||||
@@ -258,9 +260,10 @@ ol li {
|
|||||||
}
|
}
|
||||||
|
|
||||||
@media (max-width: $responsiveWidth) {
|
@media (max-width: $responsiveWidth) {
|
||||||
header {
|
header div {
|
||||||
display: block;
|
display: flex;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
|
flex-direction: column;
|
||||||
|
|
||||||
nav {
|
nav {
|
||||||
display: inline-flex;
|
display: inline-flex;
|
||||||
@@ -333,7 +336,7 @@ fieldset#history {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.align-center {
|
.align-center {
|
||||||
text-align: center;
|
text-align: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
.align-right {
|
.align-right {
|
||||||
|
|||||||
@@ -1,178 +1,178 @@
|
|||||||
<template>
|
<template>
|
||||||
<div>
|
<div>
|
||||||
<header>
|
<header>
|
||||||
<div>
|
<div>
|
||||||
<div class="slide-in">
|
<div class="slide-in">
|
||||||
<nuxt-link to="/">
|
<nuxt-link to="/">
|
||||||
<h1 class="logo">
|
<h1 class="logo">
|
||||||
<logo alt="" style="height: 24px; margin-right: 16px" />Postwoman</h1>
|
<logo alt="" style="height: 24px; margin-right: 16px" />Postwoman</h1>
|
||||||
</nuxt-link>
|
</nuxt-link>
|
||||||
<h3>API request builder</h3>
|
<h3>API request builder</h3>
|
||||||
</div>
|
</div>
|
||||||
<nav>
|
<nav>
|
||||||
<nuxt-link to="/">HTTP</nuxt-link>
|
<nuxt-link to="/">HTTP</nuxt-link>
|
||||||
<nuxt-link to="/websocket">WebSocket</nuxt-link>
|
<nuxt-link to="/websocket">WebSocket</nuxt-link>
|
||||||
<nuxt-link to="/settings">
|
<nuxt-link to="/settings">
|
||||||
<!-- Settings cog -->
|
<!-- Settings cog -->
|
||||||
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24">
|
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24">
|
||||||
<path d="M24 14.187v-4.374c-2.148-.766-2.726-.802-3.027-1.529-.303-.729.083-1.169 1.059-3.223l-3.093-3.093c-2.026.963-2.488 1.364-3.224 1.059-.727-.302-.768-.889-1.527-3.027h-4.375c-.764 2.144-.8 2.725-1.529 3.027-.752.313-1.203-.1-3.223-1.059l-3.093 3.093c.977 2.055 1.362 2.493 1.059 3.224-.302.727-.881.764-3.027 1.528v4.375c2.139.76 2.725.8 3.027 1.528.304.734-.081 1.167-1.059 3.223l3.093 3.093c1.999-.95 2.47-1.373 3.223-1.059.728.302.764.88 1.529 3.027h4.374c.758-2.131.799-2.723 1.537-3.031.745-.308 1.186.099 3.215 1.062l3.093-3.093c-.975-2.05-1.362-2.492-1.059-3.223.3-.726.88-.763 3.027-1.528zm-4.875.764c-.577 1.394-.068 2.458.488 3.578l-1.084 1.084c-1.093-.543-2.161-1.076-3.573-.49-1.396.581-1.79 1.693-2.188 2.877h-1.534c-.398-1.185-.791-2.297-2.183-2.875-1.419-.588-2.507-.045-3.579.488l-1.083-1.084c.557-1.118 1.066-2.18.487-3.58-.579-1.391-1.691-1.784-2.876-2.182v-1.533c1.185-.398 2.297-.791 2.875-2.184.578-1.394.068-2.459-.488-3.579l1.084-1.084c1.082.538 2.162 1.077 3.58.488 1.392-.577 1.785-1.69 2.183-2.875h1.534c.398 1.185.792 2.297 2.184 2.875 1.419.588 2.506.045 3.579-.488l1.084 1.084c-.556 1.121-1.065 2.187-.488 3.58.577 1.391 1.689 1.784 2.875 2.183v1.534c-1.188.398-2.302.791-2.877 2.183zm-7.125-5.951c1.654 0 3 1.346 3 3s-1.346 3-3 3-3-1.346-3-3 1.346-3 3-3zm0-2c-2.762 0-5 2.238-5 5s2.238 5 5 5 5-2.238 5-5-2.238-5-5-5z" />
|
<path d="M24 14.187v-4.374c-2.148-.766-2.726-.802-3.027-1.529-.303-.729.083-1.169 1.059-3.223l-3.093-3.093c-2.026.963-2.488 1.364-3.224 1.059-.727-.302-.768-.889-1.527-3.027h-4.375c-.764 2.144-.8 2.725-1.529 3.027-.752.313-1.203-.1-3.223-1.059l-3.093 3.093c.977 2.055 1.362 2.493 1.059 3.224-.302.727-.881.764-3.027 1.528v4.375c2.139.76 2.725.8 3.027 1.528.304.734-.081 1.167-1.059 3.223l3.093 3.093c1.999-.95 2.47-1.373 3.223-1.059.728.302.764.88 1.529 3.027h4.374c.758-2.131.799-2.723 1.537-3.031.745-.308 1.186.099 3.215 1.062l3.093-3.093c-.975-2.05-1.362-2.492-1.059-3.223.3-.726.88-.763 3.027-1.528zm-4.875.764c-.577 1.394-.068 2.458.488 3.578l-1.084 1.084c-1.093-.543-2.161-1.076-3.573-.49-1.396.581-1.79 1.693-2.188 2.877h-1.534c-.398-1.185-.791-2.297-2.183-2.875-1.419-.588-2.507-.045-3.579.488l-1.083-1.084c.557-1.118 1.066-2.18.487-3.58-.579-1.391-1.691-1.784-2.876-2.182v-1.533c1.185-.398 2.297-.791 2.875-2.184.578-1.394.068-2.459-.488-3.579l1.084-1.084c1.082.538 2.162 1.077 3.58.488 1.392-.577 1.785-1.69 2.183-2.875h1.534c.398 1.185.792 2.297 2.184 2.875 1.419.588 2.506.045 3.579-.488l1.084 1.084c-.556 1.121-1.065 2.187-.488 3.58.577 1.391 1.689 1.784 2.875 2.183v1.534c-1.188.398-2.302.791-2.877 2.183zm-7.125-5.951c1.654 0 3 1.346 3 3s-1.346 3-3 3-3-1.346-3-3 1.346-3 3-3zm0-2c-2.762 0-5 2.238-5 5s2.238 5 5 5 5-2.238 5-5-2.238-5-5-5z" />
|
||||||
</svg>
|
</svg>
|
||||||
</nuxt-link>
|
</nuxt-link>
|
||||||
</nav>
|
</nav>
|
||||||
</div>
|
</div>
|
||||||
</header>
|
</header>
|
||||||
<nuxt id="main" />
|
<nuxt id="main" />
|
||||||
<footer>
|
<footer>
|
||||||
<!-- Top section of footer: GitHub/install links -->
|
<!-- Top section of footer: GitHub/install links -->
|
||||||
<div>
|
<div>
|
||||||
<div>
|
<div>
|
||||||
<a href="https://github.com/liyasthomas/postwoman" target="_blank"><img id="imgGitHub" src="~static/icons/github.svg" alt="" :style="logoStyle()">GitHub</a>
|
<a href="https://github.com/liyasthomas/postwoman" target="_blank"><img id="imgGitHub" src="~static/icons/github.svg" alt="" :style="logoStyle()">GitHub</a>
|
||||||
</div>
|
</div>
|
||||||
<button id="installPWA" @click.prevent="showInstallPrompt()">
|
<button id="installPWA" @click.prevent="showInstallPrompt()">
|
||||||
Install PWA
|
Install PWA
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- Bottom section of footer: version/author information -->
|
<!-- Bottom section of footer: version/author information -->
|
||||||
<p class="align-center">
|
<p class="align-center">
|
||||||
<span v-if="version.name">{{ version.name }}
|
<span v-if="version.name">{{ version.name }}
|
||||||
<span v-if="version.hash">- {{ version.hash }}</span>
|
<span v-if="version.hash">- {{ version.hash }}</span>
|
||||||
<span v-if="version.variant"> ({{ version.variant }})</span>
|
<span v-if="version.variant"> ({{ version.variant }})</span>
|
||||||
• </span>by <a href="https://liyasthomas.web.app" target="_blank">Liyas Thomas 🦄</a>
|
• </span>by <a href="https://liyasthomas.web.app" target="_blank">Liyas Thomas 🦄</a>
|
||||||
</p>
|
</p>
|
||||||
</footer>
|
</footer>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
<style lang="scss">
|
<style lang="scss">
|
||||||
.slide-in {
|
.slide-in {
|
||||||
position: relative;
|
position: relative;
|
||||||
animation: slideIn 0.2s forwards ease-in-out;
|
animation: slideIn 0.2s forwards ease-in-out;
|
||||||
}
|
}
|
||||||
|
|
||||||
@keyframes slideIn {
|
@keyframes slideIn {
|
||||||
0% {
|
0% {
|
||||||
opacity: 0;
|
opacity: 0;
|
||||||
left: -16px;
|
left: -16px;
|
||||||
}
|
}
|
||||||
|
|
||||||
100% {
|
100% {
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
left: 0px;
|
left: 0px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
header,
|
header,
|
||||||
#main,
|
#main,
|
||||||
footer {
|
footer {
|
||||||
margin: 0 auto;
|
margin: 0 auto;
|
||||||
max-width: 1200px;
|
max-width: 1200px;
|
||||||
}
|
}
|
||||||
|
|
||||||
footer {
|
footer {
|
||||||
margin: 40px auto;
|
margin: 40px auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
nav {
|
nav {
|
||||||
svg {
|
svg {
|
||||||
vertical-align: sub;
|
vertical-align: sub;
|
||||||
}
|
}
|
||||||
|
|
||||||
a {
|
a {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
position: relative;
|
position: relative;
|
||||||
padding: 8px 16px;
|
padding: 8px 16px;
|
||||||
fill: var(--fg-color);
|
fill: var(--fg-color);
|
||||||
color: var(--fg-color);
|
color: var(--fg-color);
|
||||||
|
|
||||||
&.nuxt-link-exact-active {
|
&.nuxt-link-exact-active {
|
||||||
color: var(--act-color);
|
color: var(--act-color);
|
||||||
fill: var(--act-color);
|
fill: var(--act-color);
|
||||||
|
|
||||||
&:before {
|
&:before {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%
|
height: 100%
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
&:before {
|
&:before {
|
||||||
content: "";
|
content: "";
|
||||||
position: absolute;
|
position: absolute;
|
||||||
bottom: 0;
|
bottom: 0;
|
||||||
left: 0;
|
left: 0;
|
||||||
right: 0;
|
right: 0;
|
||||||
z-index: -1;
|
z-index: -1;
|
||||||
background-color: var(--ac-color);
|
background-color: var(--ac-color);
|
||||||
border-radius: 4px;
|
border-radius: 4px;
|
||||||
margin: auto;
|
margin: auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
&:not(.nuxt-link-exact-active):hover:before {
|
&:not(.nuxt-link-exact-active):hover:before {
|
||||||
animation: linkHover 0.3s forwards ease-in-out;
|
animation: linkHover 0.3s forwards ease-in-out;
|
||||||
}
|
}
|
||||||
|
|
||||||
@keyframes linkHover {
|
@keyframes linkHover {
|
||||||
0% {
|
0% {
|
||||||
width: 0;
|
width: 0;
|
||||||
height: 2px;
|
height: 2px;
|
||||||
}
|
}
|
||||||
|
|
||||||
100% {
|
100% {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 2px;
|
height: 2px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
</style>
|
</style>
|
||||||
<script>
|
<script>
|
||||||
import intializePwa from '../assets/js/pwa';
|
import intializePwa from '../assets/js/pwa';
|
||||||
import logo from "../components/logo";
|
import logo from "../components/logo";
|
||||||
import * as version from '../.postwoman/version.json';
|
import * as version from '../.postwoman/version.json';
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
components: {
|
components: {
|
||||||
logo
|
logo
|
||||||
|
},
|
||||||
|
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
// Once the PWA code is initialized, this holds a method
|
||||||
|
// that can be called to show the user the installation
|
||||||
|
// prompt.
|
||||||
|
showInstallPrompt: null,
|
||||||
|
logoStyle() {
|
||||||
|
return "margin-right: 16px;" + (((this.$store.state.postwoman.settings.THEME_CLASS || '').includes("light")) ? " filter: invert(100%); -webkit-filter: invert(100%);" : '')
|
||||||
},
|
},
|
||||||
|
|
||||||
data() {
|
version: {}
|
||||||
return {
|
}
|
||||||
// Once the PWA code is initialized, this holds a method
|
},
|
||||||
// that can be called to show the user the installation
|
|
||||||
// prompt.
|
|
||||||
showInstallPrompt: null,
|
|
||||||
logoStyle() {
|
|
||||||
return "margin-right: 16px;" + (((this.$store.state.postwoman.settings.THEME_CLASS || '').includes("light")) ? " filter: invert(100%); -webkit-filter: invert(100%);" : '')
|
|
||||||
},
|
|
||||||
|
|
||||||
version: {}
|
beforeMount() {
|
||||||
}
|
// Set version data
|
||||||
},
|
this.version = version.default;
|
||||||
|
|
||||||
beforeMount() {
|
// Load theme settings
|
||||||
// Set version data
|
(() => {
|
||||||
this.version = version.default;
|
// Apply theme from settings.
|
||||||
|
document.documentElement.className = this.$store.state.postwoman.settings.THEME_CLASS || '';
|
||||||
|
// Load theme color data from settings, or use default color.
|
||||||
|
let color = this.$store.state.postwoman.settings.THEME_COLOR || '#51FF0D';
|
||||||
|
let vibrant = this.$store.state.postwoman.settings.THEME_COLOR_VIBRANT;
|
||||||
|
if (vibrant == null) vibrant = true;
|
||||||
|
document.documentElement.style.setProperty('--ac-color', color);
|
||||||
|
document.documentElement.style.setProperty('--act-color', vibrant ? '#121212' : '#fff');
|
||||||
|
})();
|
||||||
|
},
|
||||||
|
|
||||||
// Load theme settings
|
mounted() {
|
||||||
(() => {
|
// Initializes the PWA code - checks if the app is installed,
|
||||||
// Apply theme from settings.
|
// etc.
|
||||||
document.documentElement.className = this.$store.state.postwoman.settings.THEME_CLASS || '';
|
(async () => {
|
||||||
// Load theme color data from settings, or use default color.
|
this.showInstallPrompt = await intializePwa();
|
||||||
let color = this.$store.state.postwoman.settings.THEME_COLOR || '#51FF0D';
|
})();
|
||||||
let vibrant = this.$store.state.postwoman.settings.THEME_COLOR_VIBRANT;
|
|
||||||
if (vibrant == null) vibrant = true;
|
|
||||||
document.documentElement.style.setProperty('--ac-color', color);
|
|
||||||
document.documentElement.style.setProperty('--act-color', vibrant ? '#121212' : '#fff');
|
|
||||||
})();
|
|
||||||
},
|
|
||||||
|
|
||||||
mounted() {
|
|
||||||
// Initializes the PWA code - checks if the app is installed,
|
|
||||||
// etc.
|
|
||||||
(async () => {
|
|
||||||
this.showInstallPrompt = await intializePwa();
|
|
||||||
})();
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
|
||||||
</script>
|
</script>
|
||||||
|
|||||||
Reference in New Issue
Block a user