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.vue10
-rw-r--r--src/site/components/home/links/Links.vue130
-rw-r--r--src/site/components/navbar/Navbar.vue163
-rw-r--r--src/site/components/sidebar/Sidebar.vue59
-rw-r--r--src/site/components/uploader/Uploader.vue32
5 files changed, 192 insertions, 202 deletions
diff --git a/src/site/components/footer/Footer.vue b/src/site/components/footer/Footer.vue
index 5df8ac3..9f51fee 100644
--- a/src/site/components/footer/Footer.vue
+++ b/src/site/components/footer/Footer.vue
@@ -87,16 +87,6 @@ export default {
@import '~/assets/styles/_colors.scss';
footer {
svg.waves {
- display: block;
- bottom: -1px;
- left: 0px;
- right: 0px;
- width: 100%;
- background-color: transparent;
- pointer-events: none;
- user-select: none;
- overflow: hidden;
-
.wave-1 {
fill: rgb(55, 61, 76);
transition: fill 400ms ease-in-out 0s;
diff --git a/src/site/components/home/links/Links.vue b/src/site/components/home/links/Links.vue
index 1a1f077..41bd271 100644
--- a/src/site/components/home/links/Links.vue
+++ b/src/site/components/home/links/Links.vue
@@ -1,67 +1,3 @@
-<style lang="scss" scoped>
- @import '~/assets/styles/_colors.scss';
- .links {
- margin-bottom: 3em;
- align-items: stretch;
- display: flex;
- justify-content: space-between;
-
- div.link { cursor: pointer; }
- .link {
- background: $backgroundAccent;
- display: block;
- width: calc(25% - 2rem);
- border-radius: 6px;
- box-shadow: 0 1.5rem 1.5rem -1.25rem rgba(10,10,10,.05);
- transition-duration: 86ms;
- transition-property: box-shadow,-webkit-transform;
- transition-property: box-shadow,transform;
- transition-property: box-shadow,transform,-webkit-transform;
- will-change: box-shadow,transform;
-
- header.bd-footer-star-header {
- padding: 1.5rem;
-
- &:hover .bd-footer-subtitle { color: $textColorHighlight; }
-
- h4.bd-footer-title {
- color: $textColorHighlight;
- font-size: 1.5rem;
- line-height: 1.25;
- margin-bottom: .5rem;
- transition-duration: 86ms;
- transition-property: color;
- font-weight: 700;
- }
-
- p.bd-footer-subtitle {
- color: $textColor;
- margin-top: -.5rem;
- transition-duration: 86ms;
- transition-property: color;
- font-weight: 400;
- }
- }
-
- &:hover {
- box-shadow: 0 3rem 3rem -1.25rem rgba(10,10,10,.1);
- -webkit-transform: translateY(-.5rem);
- transform: translateY(-.5rem);
- }
- }
- }
-
- @media screen and (max-width: 768px) {
- .links {
- display: block;
- padding: 0px 2em;
- .link {
- width: 100%;
- margin-bottom: 1.5em;
- }
- }
- }
-</style>
<template>
<div class="links">
<a href="https://github.com/WeebDev/lolisafe"
@@ -92,7 +28,7 @@
class="link">
<header class="bd-footer-star-header">
<h4 class="bd-footer-title">FAQ</h4>
- <p class="bd-footer-subtitle">dunno</p>
+ <p class="bd-footer-subtitle">We got you covered</p>
</header>
</router-link>
</div>
@@ -127,3 +63,67 @@ export default {
}
};
</script>
+<style lang="scss" scoped>
+ @import '~/assets/styles/_colors.scss';
+ .links {
+ margin: 7rem 0 3rem 0;
+ align-items: stretch;
+ display: flex;
+ justify-content: space-between;
+
+ div.link { cursor: pointer; }
+ .link {
+ background: $backgroundAccent;
+ display: block;
+ width: calc(25% - 2rem);
+ border-radius: 6px;
+ box-shadow: 0 1.5rem 1.5rem -1.25rem rgba(10,10,10,.05);
+ transition-duration: 86ms;
+ transition-property: box-shadow,-webkit-transform;
+ transition-property: box-shadow,transform;
+ transition-property: box-shadow,transform,-webkit-transform;
+ will-change: box-shadow,transform;
+
+ header.bd-footer-star-header {
+ padding: 1.5rem;
+
+ &:hover .bd-footer-subtitle { color: $textColorHighlight; }
+
+ h4.bd-footer-title {
+ color: $textColorHighlight;
+ font-size: 1.5rem;
+ line-height: 1.25;
+ margin-bottom: .5rem;
+ transition-duration: 86ms;
+ transition-property: color;
+ font-weight: 700;
+ }
+
+ p.bd-footer-subtitle {
+ color: $textColor;
+ margin-top: -.5rem;
+ transition-duration: 86ms;
+ transition-property: color;
+ font-weight: 400;
+ }
+ }
+
+ &:hover {
+ box-shadow: 0 3rem 3rem -1.25rem rgba(10,10,10,.1);
+ -webkit-transform: translateY(-.5rem);
+ transform: translateY(-.5rem);
+ }
+ }
+ }
+
+ @media screen and (max-width: 768px) {
+ .links {
+ display: block;
+ padding: 0px 2em;
+ .link {
+ width: 100%;
+ margin-bottom: 1.5em;
+ }
+ }
+ }
+</style>
diff --git a/src/site/components/navbar/Navbar.vue b/src/site/components/navbar/Navbar.vue
index 78eb650..0b98af0 100644
--- a/src/site/components/navbar/Navbar.vue
+++ b/src/site/components/navbar/Navbar.vue
@@ -1,88 +1,59 @@
-<style lang="scss" scoped>
- @import '~/assets/styles/_colors.scss';
- nav.navbar {
- background: transparent;
- box-shadow: none;
-
- .navbar-brand {
- width: calc(100% - 2em);
- align-items: flex-start;
- padding: 1em;
-
- div.spacer { flex: 1 0 10px; }
- a.navbar-item {
- color: $defaultTextColor;
- font-size: 16px;
- font-weight: 700;
- text-decoration-style: solid;
- }
- a.navbar-item:hover, a.navbar-item.is-active, a.navbar-link:hover, a.navbar-link.is-active {
- text-decoration: underline;
- background: transparent;
- }
-
- i {
- font-size: 2em;
- &.hidden {
- width: 0px;
- height: 1.5em;
- pointer-events: none;
- }
- }
- }
-
- &.isWhite {
- .navbar-brand {
- a.navbar-item {
- color: white;
- }
- }
- }
- }
-</style>
-
<template>
<nav :class="{ isWhite }"
class="navbar is-transparent">
<div class="navbar-brand">
- <router-link to="/"
- class="navbar-item no-active">
- <i class="icon-ecommerce-safebox" /> {{ config.serviceName }}
- </router-link>
-
- <div class="spacer" />
-
- <template v-if="loggedIn">
- <router-link
- to="/dashboard"
- class="navbar-item no-active"
- exact>
- <i class="hidden" />
- Uploads
- </router-link>
+ <a role="button"
+ class="navbar-burger burger"
+ aria-label="menu"
+ aria-expanded="false"
+ data-target="navbarBasicExample">
+ <span aria-hidden="true" />
+ <span aria-hidden="true" />
+ <span aria-hidden="true" />
+ </a>
+ </div>
+ <div class="navbar-menu">
+ <div class="navbar-end">
<router-link
- to="/dashboard/albums"
+ to="/"
class="navbar-item no-active"
exact>
- <i class="hidden" />
- Albums
+ Home
</router-link>
<router-link
- to="/dashboard/account"
+ to="/"
class="navbar-item no-active"
exact>
- <i class="hidden" />
- Account
- </router-link>
- </template>
- <template v-else>
- <router-link
- class="navbar-item"
- to="/login">
- <i class="hidden" />
- Login
+ Docs
</router-link>
- </template>
+ <template v-if="loggedIn">
+ <router-link
+ to="/dashboard"
+ class="navbar-item no-active"
+ exact>
+ Uploads
+ </router-link>
+ <router-link
+ to="/dashboard/albums"
+ class="navbar-item no-active"
+ exact>
+ Albums
+ </router-link>
+ <router-link
+ to="/dashboard/account"
+ class="navbar-item no-active"
+ exact>
+ Account
+ </router-link>
+ </template>
+ <template v-else>
+ <router-link
+ class="navbar-item"
+ to="/login">
+ Login
+ </router-link>
+ </template>
+ </div>
</div>
</nav>
</template>
@@ -113,3 +84,49 @@ export default {
}
};
</script>
+<style lang="scss" scoped>
+ @import '~/assets/styles/_colors.scss';
+ nav.navbar {
+ background: transparent;
+ box-shadow: none;
+ .navbar-brand {
+ a.burger {
+ color: $defaultTextColor;
+ }
+ }
+ .navbar-menu {
+ height: 5rem;
+
+ .navbar-end {
+ padding-right: 2rem;
+ }
+ a.navbar-item {
+ color: $defaultTextColor;
+ font-size: 16px;
+ font-weight: 700;
+ text-decoration-style: solid;
+ }
+ a.navbar-item:hover, a.navbar-item.is-active, a.navbar-link:hover, a.navbar-link.is-active {
+ text-decoration: underline;
+ background: transparent;
+ }
+
+ i {
+ font-size: 2em;
+ &.hidden {
+ width: 0px;
+ height: 1.5em;
+ pointer-events: none;
+ }
+ }
+ }
+
+ &.isWhite {
+ .navbar-brand {
+ a.navbar-item {
+ color: white;
+ }
+ }
+ }
+ }
+</style>
diff --git a/src/site/components/sidebar/Sidebar.vue b/src/site/components/sidebar/Sidebar.vue
index 9fe1be5..a2ad3f4 100644
--- a/src/site/components/sidebar/Sidebar.vue
+++ b/src/site/components/sidebar/Sidebar.vue
@@ -1,34 +1,5 @@
-<style lang="scss" scoped>
- @import '~/assets/styles/_colors.scss';
- .dashboard-menu {
- a {
- display: block;
- font-weight: 700;
- color: #868686;
- position: relative;
- padding-left: 40px;
- height: 35px;
- &:hover, &:first-child {
- color: $defaultTextColor;
- }
-
- i {
- position: absolute;
- font-size: 1.5em;
- top: -4px;
- left: 5px;
- }
- }
-
- hr { margin-top: 0.6em; }
- }
-</style>
<template>
<div class="dashboard-menu">
- <router-link to="/">
- <i class="icon-ecommerce-safebox" />lolisafe
- </router-link>
- <hr>
<router-link to="/dashboard">
<i class="icon-com-pictures" />Files
</router-link>
@@ -40,12 +11,10 @@
<i class="icon-ecommerce-tag-c" />Tags
</router-link>
-->
- <hr>
<router-link to="/dashboard/account">
<i class="icon-ecommerce-tag-c" />Account
</router-link>
<template v-if="user && user.isAdmin">
- <hr>
<router-link to="/dashboard/admin/users">
<i class="icon-setting-gear-a" />Users
</router-link>
@@ -67,3 +36,31 @@ export default {
}
};
</script>
+<style lang="scss" scoped>
+ @import '~/assets/styles/_colors.scss';
+ .dashboard-menu {
+ padding: 2rem;
+ border-radius: 8px;
+
+ a {
+ display: block;
+ font-weight: 700;
+ color: $textColor;
+ position: relative;
+ padding-left: 40px;
+ height: 35px;
+ &:hover{
+ color: white;
+ }
+
+ i {
+ position: absolute;
+ font-size: 1.5em;
+ top: -4px;
+ left: 5px;
+ }
+ }
+
+ hr { margin-top: 0.6em; }
+ }
+</style>
diff --git a/src/site/components/uploader/Uploader.vue b/src/site/components/uploader/Uploader.vue
index 9974e1d..1b03ff8 100644
--- a/src/site/components/uploader/Uploader.vue
+++ b/src/site/components/uploader/Uploader.vue
@@ -22,7 +22,7 @@
@vdropzone-error="dropzoneError"
@vdropzone-files-added="dropzoneFilesAdded" />
<label class="add-more">
- Add more files
+ Add or drop more files
</label>
<div id="template"
@@ -33,18 +33,11 @@
<div class="dz-size"><span data-dz-size /></div>
</div>
<div class="result">
- <div class="copyLink">
- <b-tooltip label="Copy link">
- <i class="icon-web-code" />
- </b-tooltip>
- </div>
<div class="openLink">
- <b-tooltip label="Open file">
- <a class="link"
- target="_blank">
- <i class="icon-web-url" />
- </a>
- </b-tooltip>
+ <a class="link"
+ target="_blank">
+ Link
+ </a>
</div>
</div>
<div class="error">
@@ -193,12 +186,14 @@ export default {
processResult(file, response) {
if (!response.url) return;
file.previewTemplate.querySelector('.link').setAttribute('href', response.url);
+ /*
file.previewTemplate.querySelector('.copyLink').addEventListener('click', () => {
this.$store.dispatch('alert', {
text: 'Link copied!'
});
this.$clipboard(response.url);
});
+ */
}
}
};
@@ -210,17 +205,7 @@ export default {
width: 400px;
margin: 0 auto;
max-width: 100%;
- transition-duration: 86ms;
- transition-property: box-shadow,-webkit-transform;
- transition-property: box-shadow,transform;
- transition-property: box-shadow,transform,-webkit-transform;
- will-change: box-shadow,transform;
-
- &:hover, &.hasFiles {
- box-shadow: 0 1rem 3rem 0rem rgba(10, 10, 10, 0.25);
- -webkit-transform: translateY(-.5rem);
- transform: translateY(-.5rem);
- }
+ position: relative;
}
</style>
<style lang="scss">
@@ -249,6 +234,7 @@ export default {
background: rgba(0, 0, 0, 0.15);
border-radius: .3em;
color: $uploaderDropdownColor;
+ padding: 0 0 0 1rem;
}
}
}
generated by cgit v1.2.3 (git 2.25.1) at 2026-05-16 17:38:49 +0000