aboutsummaryrefslogtreecommitdiff
path: root/src/site/components
diff options
context:
space:
mode:
Diffstat (limited to 'src/site/components')
-rw-r--r--src/site/components/footer/Footer.vue148
-rw-r--r--src/site/components/grid/Grid.vue1
-rw-r--r--src/site/components/home/links/Links.vue5
-rw-r--r--src/site/components/image-modal/ImageInfo.vue2
-rw-r--r--src/site/components/logo/Logo.vue42
-rw-r--r--src/site/components/navbar/Navbar.vue9
-rw-r--r--src/site/components/uploader/Uploader.vue2
7 files changed, 64 insertions, 145 deletions
diff --git a/src/site/components/footer/Footer.vue b/src/site/components/footer/Footer.vue
index aa54dce..3e7fda3 100644
--- a/src/site/components/footer/Footer.vue
+++ b/src/site/components/footer/Footer.vue
@@ -1,70 +1,26 @@
<template>
- <!-- eslint-disable max-len -->
<footer>
- <svg
- viewBox="0 0 1920 250"
- class="waves">
-
- <path
- d="M1920 250H0V0s126.707 78.536 349.975 80.05c177.852 1.203 362.805-63.874 553.803-63.874 290.517 0 383.458 57.712 603.992 61.408 220.527 3.696 278.059-61.408 412.23-17.239"
- class="wave-1" />
- <path
- d="M1920 144s-467.917 116.857-1027.243-17.294C369.986 1.322 0 45.578 0 45.578V250h1920V144z"
- class="wave-2" />
- <path
- d="M0 195.553s208.547-75.581 701.325-20.768c376.707 41.908 520.834-67.962 722.545-67.962 222.926 0 311.553 83.523 496.129 86.394V250H0v-54.447z"
- class="wave-3" />
- </svg>
- <div>
- <div class="container">
- <div class="columns">
- <div class="column is-narrow">
- <h4>lolisafe</h4>
- <span>© 2017-2020
- <a
- href="https://github.com/pitu"
- class="no-block">Pitu</a>
- </span><br>
- <span>v{{ version }}</span>
- </div>
- <div class="column">
- <div class="columns is-gapless">
- <div class="column" />
- <div class="column">
- <nuxt-link to="/">
- Home
- </nuxt-link>
- <nuxt-link to="/faq">
- FAQ
- </nuxt-link>
- </div>
- <div class="column">
- <nuxt-link to="/dashboard">
- Dashboard
- </nuxt-link>
- <nuxt-link to="/dashboard">
- Files
- </nuxt-link>
- <nuxt-link to="/dashboard/albums">
- Albums
- </nuxt-link>
- <nuxt-link to="/dashboard/account">
- Account
- </nuxt-link>
- </div>
- <div class="column">
- <a href="https://github.com/weebdev/lolisafe">GitHub</a>
- <a href="https://patreon.com/pitu">Patreon</a>
- <a href="https://discord.gg/5g6vgwn">Discord</a>
- </div>
- <div class="column">
- <a
- v-if="loggedIn"
- @click="createShareXThing">ShareX Config</a>
- <a href="https://chrome.google.com/webstore/detail/lolisafe-uploader/enkkmplljfjppcdaancckgilmgoiofnj">Chrome Extension</a>
- </div>
- </div>
- </div>
+ <div class="container">
+ <div class="columns">
+ <div class="column is-narrow">
+ <h4>lolisafe</h4>
+ <span>© 2017-{{ getYear }}
+ <a
+ href="https://github.com/pitu"
+ class="no-block">Pitu</a>
+ </span><br>
+ <span>v{{ version }}</span>
+ </div>
+ <div class="column is-narrow bottom-up">
+ <a href="https://github.com/weebdev/lolisafe">GitHub</a>
+ <a href="https://patreon.com/pitu">Patreon</a>
+ <a href="https://discord.gg/5g6vgwn">Discord</a>
+ </div>
+ <div class="column is-narrow bottom-up">
+ <a
+ v-if="loggedIn"
+ @click="createShareXThing">ShareX Config</a>
+ <a href="https://chrome.google.com/webstore/detail/lolisafe-uploader/enkkmplljfjppcdaancckgilmgoiofnj">Chrome Extension</a>
</div>
</div>
</div>
@@ -84,7 +40,10 @@ export default {
version: state => state.config.version,
serviceName: state => state.config.serviceName,
token: state => state.auth.token
- })
+ }),
+ getYear() {
+ return new Date().getFullYear();
+ }
},
methods: {
createShareXThing() {
@@ -112,39 +71,38 @@ export default {
<style lang="scss" scoped>
@import '~/assets/styles/_colors.scss';
footer {
- svg.waves {
- .wave-1 {
- fill: rgb(55, 61, 76);
- transition: fill 400ms ease-in-out 0s;
- }
-
- .wave-2 {
- fill: rgb(57, 64, 79);
- transition: fill 400ms ease-in-out 0s;
- }
-
- .wave-3 {
- fill: rgb(59, 66, 82);
- transition: fill 400ms ease-in-out 0s;
+ @media screen and (min-width: 1025px) {
+ position: fixed;
+ bottom: 0;
+ width: 100%;
+ > div {
+ padding: 1rem 1rem !important;
+ max-width: unset !important;
}
}
- > div {
- background: rgb(59, 66, 82);
- padding: 3em 0;
- @media screen and (max-width: 1024px) {
- padding: 3em 3em;
- }
- }
+ .container {
+ .column {
+ margin-right: 2rem;
+ &.bottom-up {
+ @media screen and (min-width: 1025px) {
+ display: flex;
+ flex-direction: column;
+ justify-content: flex-end;
+ margin-right: 0;
+ }
+ }
- .container .column a {
- display: block;
- color: $textColor;
- &:hover {
- color: white
- }
- &.no-block {
- display: inherit;
+ a {
+ display: block;
+ color: $textColor;
+ &:hover {
+ color: white
+ }
+ &.no-block {
+ display: inherit;
+ }
+ }
}
}
}
diff --git a/src/site/components/grid/Grid.vue b/src/site/components/grid/Grid.vue
index 0c0ac96..9e1ce6f 100644
--- a/src/site/components/grid/Grid.vue
+++ b/src/site/components/grid/Grid.vue
@@ -217,7 +217,6 @@ export default {
images: state => state.images
}),
blank() {
- // eslint-disable-next-line global-require, import/no-unresolved
return require('@/assets/images/blank.png');
},
gridFiles() {
diff --git a/src/site/components/home/links/Links.vue b/src/site/components/home/links/Links.vue
index 8f82d4b..7be76f2 100644
--- a/src/site/components/home/links/Links.vue
+++ b/src/site/components/home/links/Links.vue
@@ -51,7 +51,7 @@ import { saveAs } from 'file-saver';
export default {
computed: {
loggedIn() {
- return this.$store.state.loggedIn;
+ return this.$store.state.auth.loggedIn;
}
},
methods: {
@@ -86,7 +86,8 @@ export default {
div.link { cursor: pointer; }
.link {
- background: $backgroundAccent;
+ background: #0000002e;
+ border: 1px solid #00000061;
display: block;
width: calc(25% - 2rem);
border-radius: 6px;
diff --git a/src/site/components/image-modal/ImageInfo.vue b/src/site/components/image-modal/ImageInfo.vue
index 07c87b5..9c7d73b 100644
--- a/src/site/components/image-modal/ImageInfo.vue
+++ b/src/site/components/image-modal/ImageInfo.vue
@@ -197,7 +197,7 @@ export default {
}
.image-col {
- align-items: start;
+ align-items: center;
}
.data-col {
diff --git a/src/site/components/logo/Logo.vue b/src/site/components/logo/Logo.vue
index b083cb4..5c2546b 100644
--- a/src/site/components/logo/Logo.vue
+++ b/src/site/components/logo/Logo.vue
@@ -1,59 +1,27 @@
+<template>
+ <img src="~/assets/images/logo.png">
+</template>
<style lang="scss" scoped>
- @import '~/assets/styles/_colors.scss';
- #logo {
- -webkit-animation-delay: 0.5s;
+ img {
+ height: 376px;
animation-delay: 0.5s;
- -webkit-animation-duration: 1.5s;
animation-duration: 1.5s;
- -webkit-animation-fill-mode: both;
animation-fill-mode: both;
- -webkit-animation-name: floatUp;
animation-name: floatUp;
- -webkit-animation-timing-function: cubic-bezier(0, 0.71, 0.29, 1);
animation-timing-function: cubic-bezier(0, 0.71, 0.29, 1);
- border-radius: 24px;
- display: inline-block;
- height: 240px;
- position: relative;
- vertical-align: top;
- width: 240px;
- box-shadow: 0 20px 60px rgba(10, 10, 10, 0.05), 0 5px 10px rgba(10, 10, 10, 0.1), 0 1px 1px rgba(10, 10, 10, 0.2);
- background: $backgroundAccent;
- pointer-events: none;
- }
-
- #logo img {
- height: 200px;
- margin-top: 20px;
}
@keyframes floatUp {
0% {
opacity: 0;
- box-shadow: 0 0 0 rgba(10, 10, 10, 0), 0 0 0 rgba(10, 10, 10, 0), 0 0 0 rgba(10, 10, 10, 0);
- -webkit-transform: scale(0.86);
transform: scale(0.86);
}
25% { opacity: 100; }
67% {
- box-shadow: 0 0 0 rgba(10, 10, 10, 0), 0 5px 10px rgba(10, 10, 10, 0.1), 0 1px 1px rgba(10, 10, 10, 0.2);
- -webkit-transform: scale(1);
transform: scale(1);
}
100% {
- box-shadow: 0 20px 60px rgba(10, 10, 10, 0.05), 0 5px 10px rgba(10, 10, 10, 0.1), 0 1px 1px rgba(10, 10, 10, 0.2);
- -webkit-transform: scale(1);
transform: scale(1);
}
}
</style>
-
-<template>
- <p id="logo">
- <img src="~/assets/images/logo.png">
- </p>
-</template>
-
-<script>
-export default {};
-</script>
diff --git a/src/site/components/navbar/Navbar.vue b/src/site/components/navbar/Navbar.vue
index c0b8668..65db69f 100644
--- a/src/site/components/navbar/Navbar.vue
+++ b/src/site/components/navbar/Navbar.vue
@@ -11,14 +11,6 @@
Home
</router-link>
</b-navbar-item>
- <b-navbar-item tag="div">
- <router-link
- to="/faq"
- class="navbar-item no-active"
- exact>
- Docs
- </router-link>
- </b-navbar-item>
<template v-if="loggedIn">
<b-navbar-item tag="div">
<router-link
@@ -97,6 +89,7 @@ export default {
nav.navbar {
background: transparent;
box-shadow: none;
+ padding-right: 2rem;
.navbar-brand {
a.burger {
color: $defaultTextColor;
diff --git a/src/site/components/uploader/Uploader.vue b/src/site/components/uploader/Uploader.vue
index 94d4003..6d17e4a 100644
--- a/src/site/components/uploader/Uploader.vue
+++ b/src/site/components/uploader/Uploader.vue
@@ -241,7 +241,7 @@ export default {
margin-bottom: 5px;
span.select {
select {
- border: 2px solid #2c3340;
+ border: 1px solid #00000061;
background: rgba(0, 0, 0, 0.15);
border-radius: .3em;
color: $uploaderDropdownColor;
generated by cgit v1.2.3 (git 2.25.1) at 2026-05-16 14:59:07 +0000