fix: Remove hero and hero body and use sections and containers instead
Hero is meant to be used as a full-width banner to showcare or present somethign, not to contain the entire content of the webpage
This commit is contained in:
Zephyrrus
parent
27b0fdafb2
commit
ac037c773e
|
|
@ -7,14 +7,13 @@ $base-5: #4C566A;
|
|||
|
||||
$background: #1e2430;
|
||||
$backgroundAccent: #20222b;
|
||||
$backgroundAccentLighter: #53555E;
|
||||
$backgroundLight1: #f5f6f8;
|
||||
|
||||
// customize navbar
|
||||
$navbar-background-color: $backgroundAccent;
|
||||
$navbar-item-color: #f5f6f8;
|
||||
|
||||
|
||||
|
||||
// $defaultTextColor: #4a4a4a;
|
||||
$defaultTextColor: rgb(236, 239, 244);
|
||||
$textColor: #c7ccd8;
|
||||
|
|
@ -31,3 +30,19 @@ $uploaderDropdownColor: #797979;
|
|||
|
||||
$boxShadow: 0 10px 15px rgba(4,39,107,0.2);
|
||||
$boxShadowLight: rgba(15, 17, 21, 0.35) 0px 6px 9px 0px;
|
||||
|
||||
// pagination
|
||||
|
||||
$pagination-color: $defaultTextColor;
|
||||
|
||||
$pagination-focus-color: $textColorHighlight;
|
||||
$pagination-focus-border-color: $textColorHighlight;
|
||||
|
||||
$pagination-active-color: $textColorHighlight;
|
||||
$pagination-active-border-color: $textColorHighlight;
|
||||
|
||||
$pagination-hover-color: $textColorHighlight;
|
||||
$pagination-hover-border-color: $textColorHighlight;
|
||||
|
||||
$pagination-current-background-color: $base-3;
|
||||
$pagination-current-border-color: $base-2;
|
||||
|
|
@ -249,6 +249,57 @@ table.table {
|
|||
}
|
||||
}
|
||||
|
||||
// vue-bar
|
||||
.vb > .vb-dragger {
|
||||
z-index: 5;
|
||||
width: 12px;
|
||||
right: 0;
|
||||
}
|
||||
|
||||
.vb > .vb-dragger > .vb-dragger-styler {
|
||||
-webkit-backface-visibility: hidden;
|
||||
backface-visibility: hidden;
|
||||
-webkit-transform: rotate3d(0,0,0,0);
|
||||
transform: rotate3d(0,0,0,0);
|
||||
-webkit-transition:
|
||||
background-color 100ms ease-out,
|
||||
margin 100ms ease-out,
|
||||
height 100ms ease-out;
|
||||
transition:
|
||||
background-color 100ms ease-out,
|
||||
margin 100ms ease-out,
|
||||
height 100ms ease-out;
|
||||
background-color: $backgroundAccent;
|
||||
margin: 5px 5px 5px 0;
|
||||
border-radius: 20px;
|
||||
height: calc(100% - 10px);
|
||||
display: block;
|
||||
}
|
||||
|
||||
.vb.vb-scrolling-phantom > .vb-dragger > .vb-dragger-styler {
|
||||
background-color: $backgroundAccentLighter;
|
||||
}
|
||||
|
||||
.vb > .vb-dragger:hover > .vb-dragger-styler {
|
||||
background-color: $backgroundAccentLighter;
|
||||
margin: 0px;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.vb.vb-dragging > .vb-dragger > .vb-dragger-styler {
|
||||
background-color: $backgroundAccentLighter;
|
||||
margin: 0px;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.vb.vb-dragging-phantom > .vb-dragger > .vb-dragger-styler {
|
||||
background-color: $backgroundAccentLighter;
|
||||
}
|
||||
|
||||
.vb-content{
|
||||
overflow: auto !important
|
||||
}
|
||||
|
||||
// helpers
|
||||
.has-text-default {
|
||||
color: $textColor;
|
||||
|
|
@ -256,4 +307,13 @@ table.table {
|
|||
|
||||
.has-text-default-highlight {
|
||||
color: $textColorHighlight;
|
||||
}
|
||||
}
|
||||
|
||||
.is-height-max-content {
|
||||
height: max-content;
|
||||
}
|
||||
|
||||
.pagination a, .pagination a:hover {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -167,7 +167,7 @@
|
|||
</div>
|
||||
</template>
|
||||
<template slot="footer">
|
||||
<div class="has-text-right">
|
||||
<div class="has-text-right has-text-default">
|
||||
{{ files.length }} files
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -197,6 +197,7 @@
|
|||
</b-modal>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Waterfall from './waterfall/Waterfall.vue';
|
||||
import WaterfallItem from './waterfall/WaterfallItem.vue';
|
||||
|
|
@ -328,6 +329,7 @@ export default {
|
|||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import '~/assets/styles/_colors.scss';
|
||||
.item-move {
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
<template>
|
||||
<b-navbar :class="{ isWhite }"
|
||||
<b-navbar :class="{ isWhite }"
|
||||
transparent>
|
||||
<template slot="end">
|
||||
<b-navbar-item tag="div">
|
||||
|
|
@ -12,7 +12,7 @@
|
|||
</b-navbar-item>
|
||||
<b-navbar-item tag="div">
|
||||
<router-link
|
||||
to="/"
|
||||
to="/faq"
|
||||
class="navbar-item no-active"
|
||||
exact>
|
||||
Docs
|
||||
|
|
|
|||
|
|
@ -1,15 +1,11 @@
|
|||
<template>
|
||||
<div v-bar>
|
||||
<div>
|
||||
<section class="hero is-fullheight has-text-centered">
|
||||
<Navbar :isWhite="true" />
|
||||
<div class="hero-body">
|
||||
<nuxt-child id="app" />
|
||||
</div>
|
||||
<div class="hero-foot">
|
||||
<Footer />
|
||||
</div>
|
||||
</section>
|
||||
<div v-bar
|
||||
class="scroll-area">
|
||||
<div class="default-body">
|
||||
<Navbar :isWhite="true" />
|
||||
<nuxt-child id="app"
|
||||
class="nuxt-app is-height-max-content" />
|
||||
<Footer />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -17,7 +13,10 @@
|
|||
import Navbar from '~/components/navbar/Navbar.vue';
|
||||
import Footer from '~/components/footer/Footer';
|
||||
export default {
|
||||
components: { Navbar, Footer },
|
||||
components: {
|
||||
Navbar,
|
||||
Footer
|
||||
},
|
||||
computed: {
|
||||
config() {
|
||||
return this.$store.state.config;
|
||||
|
|
@ -49,25 +48,19 @@ export default {
|
|||
</script>
|
||||
<style lang="scss">
|
||||
html { overflow: hidden !important; }
|
||||
.is-fullheight { height: 100vh; }
|
||||
.hero-body {
|
||||
padding: 3rem 0 !important;
|
||||
#app {
|
||||
width: 100%;
|
||||
& > .container {
|
||||
margin-top: 5rem;
|
||||
}
|
||||
}
|
||||
> .hero {
|
||||
min-height: auto !important;
|
||||
height: auto !important;
|
||||
}
|
||||
.is-fullheight { height: 100vh !important; }
|
||||
.nuxt-app > .section {
|
||||
min-height: auto !important;
|
||||
height: auto !important;
|
||||
}
|
||||
@import "~/assets/styles/style.scss";
|
||||
@import "~/assets/styles/icons.min.css";
|
||||
</style>
|
||||
<style lang="scss" scoped>
|
||||
.hero-body {
|
||||
.default-body {
|
||||
align-items: baseline !important;
|
||||
}
|
||||
.scroll-area {
|
||||
height: 100vh;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -16,9 +16,9 @@
|
|||
</style>
|
||||
|
||||
<template>
|
||||
<section class="hero is-fullheight">
|
||||
<section class="section is-fullheight">
|
||||
<template v-if="files && files.length">
|
||||
<div class="hero-body align-top">
|
||||
<div class="align-top">
|
||||
<div class="container">
|
||||
<h1 class="title">{{ name }}</h1>
|
||||
<h2 class="subtitle">Serving {{ files ? files.length : 0 }} files</h2>
|
||||
|
|
@ -27,23 +27,19 @@
|
|||
<hr>
|
||||
</div>
|
||||
</div>
|
||||
<div class="hero-body">
|
||||
<div class="container">
|
||||
<Grid v-if="files && files.length"
|
||||
:files="files"
|
||||
:isPublic="true"
|
||||
:width="200"
|
||||
:enableSearch="false"
|
||||
:enableToolbar="false" />
|
||||
</div>
|
||||
<div class="container">
|
||||
<Grid v-if="files && files.length"
|
||||
:files="files"
|
||||
:isPublic="true"
|
||||
:width="200"
|
||||
:enableSearch="false"
|
||||
:enableToolbar="false" />
|
||||
</div>
|
||||
</template>
|
||||
<template v-else>
|
||||
<div class="hero-body">
|
||||
<div class="container">
|
||||
<h1 class="title">:(</h1>
|
||||
<h2 class="subtitle">This album seems to be empty</h2>
|
||||
</div>
|
||||
<div class="container">
|
||||
<h1 class="title">:(</h1>
|
||||
<h2 class="subtitle">This album seems to be empty</h2>
|
||||
</div>
|
||||
</template>
|
||||
</section>
|
||||
|
|
|
|||
|
|
@ -1,64 +1,62 @@
|
|||
<template>
|
||||
<section class="hero is-fullheight dashboard">
|
||||
<div class="hero-body">
|
||||
<div class="container">
|
||||
<div class="columns">
|
||||
<div class="column is-narrow">
|
||||
<Sidebar />
|
||||
<section class="section is-fullheight dashboard">
|
||||
<div class="container">
|
||||
<div class="columns">
|
||||
<div class="column is-narrow">
|
||||
<Sidebar />
|
||||
</div>
|
||||
<div class="column">
|
||||
<h2 class="subtitle">Account settings</h2>
|
||||
<hr>
|
||||
|
||||
<b-field label="Username"
|
||||
message="Nothing to do here"
|
||||
horizontal>
|
||||
<b-input v-model="user.username"
|
||||
expanded
|
||||
disabled />
|
||||
</b-field>
|
||||
|
||||
<b-field label="Current password"
|
||||
message="If you want to change your password input the current one here"
|
||||
horizontal>
|
||||
<b-input v-model="user.password"
|
||||
type="password"
|
||||
expanded />
|
||||
</b-field>
|
||||
|
||||
<b-field label="New password"
|
||||
message="Your new password"
|
||||
horizontal>
|
||||
<b-input v-model="user.newPassword"
|
||||
type="password"
|
||||
expanded />
|
||||
</b-field>
|
||||
|
||||
<b-field label="New password again"
|
||||
message="Your new password once again"
|
||||
horizontal>
|
||||
<b-input v-model="user.reNewPassword"
|
||||
type="password"
|
||||
expanded />
|
||||
</b-field>
|
||||
|
||||
<div class="mb2 mt2 text-center">
|
||||
<button class="button is-primary"
|
||||
@click="changePassword">Change password</button>
|
||||
</div>
|
||||
<div class="column">
|
||||
<h2 class="subtitle">Account settings</h2>
|
||||
<hr>
|
||||
|
||||
<b-field label="Username"
|
||||
message="Nothing to do here"
|
||||
horizontal>
|
||||
<b-input v-model="user.username"
|
||||
expanded
|
||||
disabled />
|
||||
</b-field>
|
||||
<b-field label="Api key"
|
||||
message="This API key lets you use the service from other apps"
|
||||
horizontal>
|
||||
<b-input v-model="user.apiKey"
|
||||
expanded
|
||||
disabled />
|
||||
</b-field>
|
||||
|
||||
<b-field label="Current password"
|
||||
message="If you want to change your password input the current one here"
|
||||
horizontal>
|
||||
<b-input v-model="user.password"
|
||||
type="password"
|
||||
expanded />
|
||||
</b-field>
|
||||
|
||||
<b-field label="New password"
|
||||
message="Your new password"
|
||||
horizontal>
|
||||
<b-input v-model="user.newPassword"
|
||||
type="password"
|
||||
expanded />
|
||||
</b-field>
|
||||
|
||||
<b-field label="New password again"
|
||||
message="Your new password once again"
|
||||
horizontal>
|
||||
<b-input v-model="user.reNewPassword"
|
||||
type="password"
|
||||
expanded />
|
||||
</b-field>
|
||||
|
||||
<div class="mb2 mt2 text-center">
|
||||
<button class="button is-primary"
|
||||
@click="changePassword">Change password</button>
|
||||
</div>
|
||||
|
||||
<b-field label="Api key"
|
||||
message="This API key lets you use the service from other apps"
|
||||
horizontal>
|
||||
<b-input v-model="user.apiKey"
|
||||
expanded
|
||||
disabled />
|
||||
</b-field>
|
||||
|
||||
<div class="mb2 mt2 text-center">
|
||||
<button class="button is-primary"
|
||||
@click="promptNewAPIKey">Request new API key</button>
|
||||
</div>
|
||||
<div class="mb2 mt2 text-center">
|
||||
<button class="button is-primary"
|
||||
@click="promptNewAPIKey">Request new API key</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -2,96 +2,94 @@
|
|||
.underline { text-decoration: underline; }
|
||||
</style>
|
||||
<template>
|
||||
<section class="hero is-fullheight dashboard">
|
||||
<div class="hero-body">
|
||||
<div class="container">
|
||||
<div class="columns">
|
||||
<div class="column is-narrow">
|
||||
<Sidebar />
|
||||
<section class="section is-fullheight dashboard">
|
||||
<div class="container">
|
||||
<div class="columns">
|
||||
<div class="column is-narrow">
|
||||
<Sidebar />
|
||||
</div>
|
||||
<div class="column">
|
||||
<h2 class="subtitle">File details</h2>
|
||||
<hr>
|
||||
|
||||
<div class="columns">
|
||||
<div class="column is-6">
|
||||
<b-field label="ID"
|
||||
horizontal>
|
||||
<span>{{ file.id }}</span>
|
||||
</b-field>
|
||||
|
||||
<b-field label="Name"
|
||||
horizontal>
|
||||
<span>{{ file.name }}</span>
|
||||
</b-field>
|
||||
|
||||
<b-field label="Original Name"
|
||||
horizontal>
|
||||
<span>{{ file.original }}</span>
|
||||
</b-field>
|
||||
|
||||
<b-field label="IP"
|
||||
horizontal>
|
||||
<span class="underline">{{ file.ip }}</span>
|
||||
</b-field>
|
||||
|
||||
<b-field label="Link"
|
||||
horizontal>
|
||||
<a :href="file.url"
|
||||
target="_blank">{{ file.url }}</a>
|
||||
</b-field>
|
||||
|
||||
<b-field label="Size"
|
||||
horizontal>
|
||||
<span>{{ formatBytes(file.size) }}</span>
|
||||
</b-field>
|
||||
|
||||
<b-field label="Hash"
|
||||
horizontal>
|
||||
<span>{{ file.hash }}</span>
|
||||
</b-field>
|
||||
|
||||
<b-field label="Uploaded"
|
||||
horizontal>
|
||||
<span><timeago :since="file.createdAt" /></span>
|
||||
</b-field>
|
||||
</div>
|
||||
<div class="column is-6">
|
||||
<b-field label="User Id"
|
||||
horizontal>
|
||||
<span>{{ user.id }}</span>
|
||||
</b-field>
|
||||
|
||||
<b-field label="Username"
|
||||
horizontal>
|
||||
<span>{{ user.username }}</span>
|
||||
</b-field>
|
||||
|
||||
<b-field label="Enabled"
|
||||
horizontal>
|
||||
<span>{{ user.enabled }}</span>
|
||||
</b-field>
|
||||
|
||||
<b-field label="Registered"
|
||||
horizontal>
|
||||
<span><timeago :since="user.createdAt" /></span>
|
||||
</b-field>
|
||||
|
||||
<b-field label="Files"
|
||||
horizontal>
|
||||
<span>
|
||||
<nuxt-link :to="`/dashboard/admin/user/${user.id}`">{{ user.fileCount }}</nuxt-link>
|
||||
</span>
|
||||
</b-field>
|
||||
</div>
|
||||
</div>
|
||||
<div class="column">
|
||||
<h2 class="subtitle">File details</h2>
|
||||
<hr>
|
||||
|
||||
<div class="columns">
|
||||
<div class="column is-6">
|
||||
<b-field label="ID"
|
||||
horizontal>
|
||||
<span>{{ file.id }}</span>
|
||||
</b-field>
|
||||
|
||||
<b-field label="Name"
|
||||
horizontal>
|
||||
<span>{{ file.name }}</span>
|
||||
</b-field>
|
||||
|
||||
<b-field label="Original Name"
|
||||
horizontal>
|
||||
<span>{{ file.original }}</span>
|
||||
</b-field>
|
||||
|
||||
<b-field label="IP"
|
||||
horizontal>
|
||||
<span class="underline">{{ file.ip }}</span>
|
||||
</b-field>
|
||||
|
||||
<b-field label="Link"
|
||||
horizontal>
|
||||
<a :href="file.url"
|
||||
target="_blank">{{ file.url }}</a>
|
||||
</b-field>
|
||||
|
||||
<b-field label="Size"
|
||||
horizontal>
|
||||
<span>{{ formatBytes(file.size) }}</span>
|
||||
</b-field>
|
||||
|
||||
<b-field label="Hash"
|
||||
horizontal>
|
||||
<span>{{ file.hash }}</span>
|
||||
</b-field>
|
||||
|
||||
<b-field label="Uploaded"
|
||||
horizontal>
|
||||
<span><timeago :since="file.createdAt" /></span>
|
||||
</b-field>
|
||||
</div>
|
||||
<div class="column is-6">
|
||||
<b-field label="User Id"
|
||||
horizontal>
|
||||
<span>{{ user.id }}</span>
|
||||
</b-field>
|
||||
|
||||
<b-field label="Username"
|
||||
horizontal>
|
||||
<span>{{ user.username }}</span>
|
||||
</b-field>
|
||||
|
||||
<b-field label="Enabled"
|
||||
horizontal>
|
||||
<span>{{ user.enabled }}</span>
|
||||
</b-field>
|
||||
|
||||
<b-field label="Registered"
|
||||
horizontal>
|
||||
<span><timeago :since="user.createdAt" /></span>
|
||||
</b-field>
|
||||
|
||||
<b-field label="Files"
|
||||
horizontal>
|
||||
<span>
|
||||
<nuxt-link :to="`/dashboard/admin/user/${user.id}`">{{ user.fileCount }}</nuxt-link>
|
||||
</span>
|
||||
</b-field>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mb2 mt2 text-center">
|
||||
<button class="button is-danger"
|
||||
@click="promptBanIP">Ban IP</button>
|
||||
<button class="button is-danger"
|
||||
@click="promptDisableUser">Disable user</button>
|
||||
</div>
|
||||
<div class="mb2 mt2 text-center">
|
||||
<button class="button is-danger"
|
||||
@click="promptBanIP">Ban IP</button>
|
||||
<button class="button is-danger"
|
||||
@click="promptDisableUser">Disable user</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,94 +1,92 @@
|
|||
<template>
|
||||
<section class="hero is-fullheight dashboard">
|
||||
<div class="hero-body">
|
||||
<div class="container">
|
||||
<div class="columns">
|
||||
<div class="column is-narrow">
|
||||
<Sidebar />
|
||||
</div>
|
||||
<div class="column">
|
||||
<h2 class="subtitle">Service settings</h2>
|
||||
<hr>
|
||||
<section class="section is-fullheight dashboard">
|
||||
<div class="container">
|
||||
<div class="columns">
|
||||
<div class="column is-narrow">
|
||||
<Sidebar />
|
||||
</div>
|
||||
<div class="column">
|
||||
<h2 class="subtitle">Service settings</h2>
|
||||
<hr>
|
||||
|
||||
<b-field label="Service name"
|
||||
message="Please enter the name which this service is gonna be identified as"
|
||||
horizontal>
|
||||
<b-input v-model="options.serviceName"
|
||||
expanded />
|
||||
</b-field>
|
||||
<b-field label="Service name"
|
||||
message="Please enter the name which this service is gonna be identified as"
|
||||
horizontal>
|
||||
<b-input v-model="options.serviceName"
|
||||
expanded />
|
||||
</b-field>
|
||||
|
||||
<b-field label="Upload folder"
|
||||
message="Where to store the files relative to the working directory"
|
||||
horizontal>
|
||||
<b-input v-model="options.uploadFolder"
|
||||
expanded />
|
||||
</b-field>
|
||||
<b-field label="Upload folder"
|
||||
message="Where to store the files relative to the working directory"
|
||||
horizontal>
|
||||
<b-input v-model="options.uploadFolder"
|
||||
expanded />
|
||||
</b-field>
|
||||
|
||||
<b-field label="Links per album"
|
||||
message="Maximum links allowed per album"
|
||||
horizontal>
|
||||
<b-input v-model="options.linksPerAlbum"
|
||||
type="number"
|
||||
expanded />
|
||||
</b-field>
|
||||
<b-field label="Links per album"
|
||||
message="Maximum links allowed per album"
|
||||
horizontal>
|
||||
<b-input v-model="options.linksPerAlbum"
|
||||
type="number"
|
||||
expanded />
|
||||
</b-field>
|
||||
|
||||
<b-field label="Max upload size"
|
||||
message="Maximum allowed file size in MB"
|
||||
horizontal>
|
||||
<b-input v-model="options.maxUploadSize"
|
||||
expanded />
|
||||
</b-field>
|
||||
<b-field label="Max upload size"
|
||||
message="Maximum allowed file size in MB"
|
||||
horizontal>
|
||||
<b-input v-model="options.maxUploadSize"
|
||||
expanded />
|
||||
</b-field>
|
||||
|
||||
<b-field label="Filename length"
|
||||
message="How many characters long should the generated filenames be"
|
||||
horizontal>
|
||||
<b-input v-model="options.filenameLength"
|
||||
expanded />
|
||||
</b-field>
|
||||
<b-field label="Filename length"
|
||||
message="How many characters long should the generated filenames be"
|
||||
horizontal>
|
||||
<b-input v-model="options.filenameLength"
|
||||
expanded />
|
||||
</b-field>
|
||||
|
||||
<b-field label="Album link length"
|
||||
message="How many characters a link for an album should have"
|
||||
horizontal>
|
||||
<b-input v-model="options.albumLinkLength"
|
||||
expanded />
|
||||
</b-field>
|
||||
<b-field label="Album link length"
|
||||
message="How many characters a link for an album should have"
|
||||
horizontal>
|
||||
<b-input v-model="options.albumLinkLength"
|
||||
expanded />
|
||||
</b-field>
|
||||
|
||||
<b-field label="Generate thumbnails"
|
||||
message="Generate thumbnails when uploading a file if possible"
|
||||
horizontal>
|
||||
<b-switch v-model="options.generateThumbnails"
|
||||
:true-value="true"
|
||||
:false-value="false" />
|
||||
</b-field>
|
||||
<b-field label="Generate thumbnails"
|
||||
message="Generate thumbnails when uploading a file if possible"
|
||||
horizontal>
|
||||
<b-switch v-model="options.generateThumbnails"
|
||||
:true-value="true"
|
||||
:false-value="false" />
|
||||
</b-field>
|
||||
|
||||
<b-field label="Generate zips"
|
||||
message="Allow generating zips to download entire albums"
|
||||
horizontal>
|
||||
<b-switch v-model="options.generateZips"
|
||||
:true-value="true"
|
||||
:false-value="false" />
|
||||
</b-field>
|
||||
<b-field label="Generate zips"
|
||||
message="Allow generating zips to download entire albums"
|
||||
horizontal>
|
||||
<b-switch v-model="options.generateZips"
|
||||
:true-value="true"
|
||||
:false-value="false" />
|
||||
</b-field>
|
||||
|
||||
<b-field label="Public mode"
|
||||
message="Enable anonymous uploades"
|
||||
horizontal>
|
||||
<b-switch v-model="options.publicMode"
|
||||
:true-value="true"
|
||||
:false-value="false" />
|
||||
</b-field>
|
||||
<b-field label="Public mode"
|
||||
message="Enable anonymous uploades"
|
||||
horizontal>
|
||||
<b-switch v-model="options.publicMode"
|
||||
:true-value="true"
|
||||
:false-value="false" />
|
||||
</b-field>
|
||||
|
||||
<b-field label="Enable creating account"
|
||||
message="Enable creating new accounts in the platform"
|
||||
horizontal>
|
||||
<b-switch v-model="options.enableAccounts"
|
||||
:true-value="true"
|
||||
:false-value="false" />
|
||||
</b-field>
|
||||
<b-field label="Enable creating account"
|
||||
message="Enable creating new accounts in the platform"
|
||||
horizontal>
|
||||
<b-switch v-model="options.enableAccounts"
|
||||
:true-value="true"
|
||||
:false-value="false" />
|
||||
</b-field>
|
||||
|
||||
<div class="mb2 mt2 text-center">
|
||||
<button class="button is-primary"
|
||||
@click="promptRestartService">Save and restart service</button>
|
||||
</div>
|
||||
<div class="mb2 mt2 text-center">
|
||||
<button class="button is-primary"
|
||||
@click="promptRestartService">Save and restart service</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -2,50 +2,48 @@
|
|||
.underline { text-decoration: underline; }
|
||||
</style>
|
||||
<template>
|
||||
<section class="hero is-fullheight dashboard">
|
||||
<div class="hero-body">
|
||||
<div class="container">
|
||||
<div class="columns">
|
||||
<div class="column is-narrow">
|
||||
<Sidebar />
|
||||
<section class="section is-fullheight dashboard">
|
||||
<div class="container">
|
||||
<div class="columns">
|
||||
<div class="column is-narrow">
|
||||
<Sidebar />
|
||||
</div>
|
||||
<div class="column">
|
||||
<h2 class="subtitle">User details</h2>
|
||||
<hr>
|
||||
|
||||
<b-field label="User Id"
|
||||
horizontal>
|
||||
<span>{{ user.id }}</span>
|
||||
</b-field>
|
||||
|
||||
<b-field label="Username"
|
||||
horizontal>
|
||||
<span>{{ user.username }}</span>
|
||||
</b-field>
|
||||
|
||||
<b-field label="Enabled"
|
||||
horizontal>
|
||||
<span>{{ user.enabled }}</span>
|
||||
</b-field>
|
||||
|
||||
<b-field label="Registered"
|
||||
horizontal>
|
||||
<span><timeago :since="user.createdAt" /></span>
|
||||
</b-field>
|
||||
|
||||
<b-field label="Files"
|
||||
horizontal>
|
||||
<span>{{ files.length }}</span>
|
||||
</b-field>
|
||||
|
||||
<div class="mb2 mt2 text-center">
|
||||
<button class="button is-danger"
|
||||
@click="promptDisableUser">Disable user</button>
|
||||
</div>
|
||||
<div class="column">
|
||||
<h2 class="subtitle">User details</h2>
|
||||
<hr>
|
||||
|
||||
<b-field label="User Id"
|
||||
horizontal>
|
||||
<span>{{ user.id }}</span>
|
||||
</b-field>
|
||||
|
||||
<b-field label="Username"
|
||||
horizontal>
|
||||
<span>{{ user.username }}</span>
|
||||
</b-field>
|
||||
|
||||
<b-field label="Enabled"
|
||||
horizontal>
|
||||
<span>{{ user.enabled }}</span>
|
||||
</b-field>
|
||||
|
||||
<b-field label="Registered"
|
||||
horizontal>
|
||||
<span><timeago :since="user.createdAt" /></span>
|
||||
</b-field>
|
||||
|
||||
<b-field label="Files"
|
||||
horizontal>
|
||||
<span>{{ files.length }}</span>
|
||||
</b-field>
|
||||
|
||||
<div class="mb2 mt2 text-center">
|
||||
<button class="button is-danger"
|
||||
@click="promptDisableUser">Disable user</button>
|
||||
</div>
|
||||
|
||||
<Grid v-if="files.length"
|
||||
:files="files" />
|
||||
</div>
|
||||
<Grid v-if="files.length"
|
||||
:files="files" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -121,69 +121,67 @@
|
|||
|
||||
|
||||
<template>
|
||||
<section class="hero is-fullheight dashboard">
|
||||
<div class="hero-body">
|
||||
<div class="container">
|
||||
<div class="columns">
|
||||
<div class="column is-narrow">
|
||||
<Sidebar />
|
||||
</div>
|
||||
<div class="column">
|
||||
<h2 class="subtitle">Manage your users</h2>
|
||||
<hr>
|
||||
<section class="section is-fullheight dashboard">
|
||||
<div class="container">
|
||||
<div class="columns">
|
||||
<div class="column is-narrow">
|
||||
<Sidebar />
|
||||
</div>
|
||||
<div class="column">
|
||||
<h2 class="subtitle">Manage your users</h2>
|
||||
<hr>
|
||||
|
||||
<div class="view-container">
|
||||
<b-table
|
||||
:data="users || []"
|
||||
:mobile-cards="true">
|
||||
<template slot-scope="props">
|
||||
<b-table-column field="id"
|
||||
label="Id"
|
||||
centered>
|
||||
{{ props.row.id }}
|
||||
</b-table-column>
|
||||
<div class="view-container">
|
||||
<b-table
|
||||
:data="users || []"
|
||||
:mobile-cards="true">
|
||||
<template slot-scope="props">
|
||||
<b-table-column field="id"
|
||||
label="Id"
|
||||
centered>
|
||||
{{ props.row.id }}
|
||||
</b-table-column>
|
||||
|
||||
<b-table-column field="username"
|
||||
label="Username"
|
||||
centered>
|
||||
<nuxt-link :to="`/dashboard/admin/user/${props.row.id}`">{{ props.row.username }}</nuxt-link>
|
||||
</b-table-column>
|
||||
<b-table-column field="username"
|
||||
label="Username"
|
||||
centered>
|
||||
<nuxt-link :to="`/dashboard/admin/user/${props.row.id}`">{{ props.row.username }}</nuxt-link>
|
||||
</b-table-column>
|
||||
|
||||
<b-table-column field="enabled"
|
||||
label="Enabled"
|
||||
centered>
|
||||
<b-switch v-model="props.row.enabled"
|
||||
@input="changeEnabledStatus(props.row)" />
|
||||
</b-table-column>
|
||||
<b-table-column field="enabled"
|
||||
label="Enabled"
|
||||
centered>
|
||||
<b-switch v-model="props.row.enabled"
|
||||
@input="changeEnabledStatus(props.row)" />
|
||||
</b-table-column>
|
||||
|
||||
<b-table-column field="isAdmin"
|
||||
label="Admin"
|
||||
centered>
|
||||
<b-switch v-model="props.row.isAdmin"
|
||||
@input="changeIsAdmin(props.row)" />
|
||||
</b-table-column>
|
||||
<b-table-column field="isAdmin"
|
||||
label="Admin"
|
||||
centered>
|
||||
<b-switch v-model="props.row.isAdmin"
|
||||
@input="changeIsAdmin(props.row)" />
|
||||
</b-table-column>
|
||||
|
||||
<b-table-column field="purge"
|
||||
centered>
|
||||
<button class="button is-primary"
|
||||
@click="promptPurgeFiles(props.row)">Purge files</button>
|
||||
</b-table-column>
|
||||
</template>
|
||||
<template slot="empty">
|
||||
<div class="has-text-centered">
|
||||
<i class="icon-misc-mood-sad" />
|
||||
</div>
|
||||
<div class="has-text-centered">
|
||||
Nothing here
|
||||
</div>
|
||||
</template>
|
||||
<template slot="footer">
|
||||
<div class="has-text-right">
|
||||
{{ users.length }} users
|
||||
</div>
|
||||
</template>
|
||||
</b-table>
|
||||
</div>
|
||||
<b-table-column field="purge"
|
||||
centered>
|
||||
<button class="button is-primary"
|
||||
@click="promptPurgeFiles(props.row)">Purge files</button>
|
||||
</b-table-column>
|
||||
</template>
|
||||
<template slot="empty">
|
||||
<div class="has-text-centered">
|
||||
<i class="icon-misc-mood-sad" />
|
||||
</div>
|
||||
<div class="has-text-centered">
|
||||
Nothing here
|
||||
</div>
|
||||
</template>
|
||||
<template slot="footer">
|
||||
<div class="has-text-right">
|
||||
{{ users.length }} users
|
||||
</div>
|
||||
</template>
|
||||
</b-table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -3,20 +3,18 @@
|
|||
</style>
|
||||
|
||||
<template>
|
||||
<section class="hero is-fullheight dashboard">
|
||||
<div class="hero-body">
|
||||
<div class="container">
|
||||
<div class="columns">
|
||||
<div class="column is-narrow">
|
||||
<Sidebar />
|
||||
</div>
|
||||
<div class="column">
|
||||
<h2 class="subtitle">Files</h2>
|
||||
<hr>
|
||||
<!-- TODO: Add a list view so the user can see the files that don't have thumbnails, like text documents -->
|
||||
<Grid v-if="files.length"
|
||||
:files="files" />
|
||||
</div>
|
||||
<section class="section is-fullheight dashboard">
|
||||
<div class="container">
|
||||
<div class="columns">
|
||||
<div class="column is-narrow">
|
||||
<Sidebar />
|
||||
</div>
|
||||
<div class="column">
|
||||
<h2 class="subtitle">Files</h2>
|
||||
<hr>
|
||||
<!-- TODO: Add a list view so the user can see the files that don't have thumbnails, like text documents -->
|
||||
<Grid v-if="files.length"
|
||||
:files="files" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,19 +1,32 @@
|
|||
<template>
|
||||
<section class="hero is-fullheight dashboard">
|
||||
<div class="hero-body">
|
||||
<div class="container">
|
||||
<div class="columns">
|
||||
<div class="column is-narrow">
|
||||
<Sidebar />
|
||||
</div>
|
||||
<div class="column">
|
||||
<h2 class="subtitle">Your uploaded files</h2>
|
||||
<hr>
|
||||
<!-- TODO: Add a list view so the user can see the files that don't have thumbnails, like text documents -->
|
||||
<Grid v-if="files.length"
|
||||
:files="files"
|
||||
:enableSearch="false" />
|
||||
</div>
|
||||
<section class="section is-fullheight dashboard">
|
||||
<div class="container">
|
||||
<div class="columns is-variable is-0-mobile">
|
||||
<div class="column is-narrow">
|
||||
<Sidebar />
|
||||
</div>
|
||||
<div class="column">
|
||||
<h2 class="subtitle">Your uploaded files</h2>
|
||||
<hr>
|
||||
<!-- TODO: Add a list view so the user can see the files that don't have thumbnails, like text documents -->
|
||||
<Grid v-if="files.length"
|
||||
:files="paginatedFiles"
|
||||
:enableSearch="false"
|
||||
class="grid" />
|
||||
|
||||
<b-pagination
|
||||
v-if="files.length > perPage"
|
||||
:total="files.length"
|
||||
:per-page="perPage"
|
||||
:current.sync="current"
|
||||
class="pagination"
|
||||
icon-prev="icon-interface-arrow-left"
|
||||
icon-next="icon-interface-arrow-right"
|
||||
icon-pack="icon"
|
||||
aria-next-label="Next page"
|
||||
aria-previous-label="Previous page"
|
||||
aria-page-label="Page"
|
||||
aria-current-label="Current page" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -32,9 +45,16 @@ export default {
|
|||
middleware: 'auth',
|
||||
data() {
|
||||
return {
|
||||
files: []
|
||||
files: [],
|
||||
current: 1,
|
||||
perPage: 20
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
paginatedFiles() {
|
||||
return this.files.slice((this.current - 1) * this.perPage, this.current * this.perPage);
|
||||
}
|
||||
},
|
||||
metaInfo() {
|
||||
return { title: 'Uploads' };
|
||||
},
|
||||
|
|
@ -49,3 +69,9 @@ export default {
|
|||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
div.grid {
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -125,75 +125,73 @@
|
|||
|
||||
|
||||
<template>
|
||||
<section class="hero is-fullheight dashboard">
|
||||
<div class="hero-body">
|
||||
<div class="container">
|
||||
<div class="columns">
|
||||
<div class="column is-narrow">
|
||||
<Sidebar />
|
||||
<section class="section is-fullheight dashboard">
|
||||
<div class="container">
|
||||
<div class="columns">
|
||||
<div class="column is-narrow">
|
||||
<Sidebar />
|
||||
</div>
|
||||
<div class="column">
|
||||
<h2 class="subtitle">Manage your tags</h2>
|
||||
<hr>
|
||||
|
||||
<div class="search-container">
|
||||
<b-field>
|
||||
<b-input v-model="newTagName"
|
||||
placeholder="Tag name..."
|
||||
type="text"
|
||||
@keyup.enter.native="createTag" />
|
||||
<p class="control">
|
||||
<button class="button is-primary"
|
||||
@click="createTag">Create tags</button>
|
||||
</p>
|
||||
</b-field>
|
||||
</div>
|
||||
<div class="column">
|
||||
<h2 class="subtitle">Manage your tags</h2>
|
||||
<hr>
|
||||
|
||||
<div class="search-container">
|
||||
<b-field>
|
||||
<b-input v-model="newTagName"
|
||||
placeholder="Tag name..."
|
||||
type="text"
|
||||
@keyup.enter.native="createTag" />
|
||||
<p class="control">
|
||||
<button class="button is-primary"
|
||||
@click="createTag">Create tags</button>
|
||||
</p>
|
||||
</b-field>
|
||||
</div>
|
||||
|
||||
<div class="view-container">
|
||||
<div v-for="tag in tags"
|
||||
:key="tag.id"
|
||||
class="album">
|
||||
<div class="arrow-container"
|
||||
@click="promptDeleteTag">
|
||||
<i class="icon-arrow" />
|
||||
</div>
|
||||
<!--
|
||||
<div class="thumb">
|
||||
<figure class="image is-64x64 thumb">
|
||||
<img src="~/assets/images/blank.png">
|
||||
</figure>
|
||||
</div>
|
||||
-->
|
||||
<div class="info">
|
||||
<h4>
|
||||
<router-link :to="`/dashboard/tags/${tag.id}`">{{ tag.name }}</router-link>
|
||||
</h4>
|
||||
<span>{{ tag.count || 0 }} files</span>
|
||||
</div>
|
||||
<!--
|
||||
<div class="latest is-hidden-mobile">
|
||||
<template v-if="album.fileCount > 0">
|
||||
<div v-for="file of album.files"
|
||||
:key="file.id"
|
||||
class="thumb">
|
||||
<figure class="image is-64x64">
|
||||
<a :href="file.url"
|
||||
target="_blank">
|
||||
<img :src="file.thumbSquare">
|
||||
</a>
|
||||
</figure>
|
||||
</div>
|
||||
<div v-if="album.fileCount > 5"
|
||||
class="thumb more no-background">
|
||||
<router-link :to="`/dashboard/albums/${album.uuid}`">{{ album.fileCount - 5 }}+ more</router-link>
|
||||
</div>
|
||||
</template>
|
||||
<template v-else>
|
||||
<span class="no-files">Nothing to show here</span>
|
||||
</template>
|
||||
</div>
|
||||
-->
|
||||
<div class="view-container">
|
||||
<div v-for="tag in tags"
|
||||
:key="tag.id"
|
||||
class="album">
|
||||
<div class="arrow-container"
|
||||
@click="promptDeleteTag">
|
||||
<i class="icon-arrow" />
|
||||
</div>
|
||||
<!--
|
||||
<div class="thumb">
|
||||
<figure class="image is-64x64 thumb">
|
||||
<img src="~/assets/images/blank.png">
|
||||
</figure>
|
||||
</div>
|
||||
-->
|
||||
<div class="info">
|
||||
<h4>
|
||||
<router-link :to="`/dashboard/tags/${tag.id}`">{{ tag.name }}</router-link>
|
||||
</h4>
|
||||
<span>{{ tag.count || 0 }} files</span>
|
||||
</div>
|
||||
<!--
|
||||
<div class="latest is-hidden-mobile">
|
||||
<template v-if="album.fileCount > 0">
|
||||
<div v-for="file of album.files"
|
||||
:key="file.id"
|
||||
class="thumb">
|
||||
<figure class="image is-64x64">
|
||||
<a :href="file.url"
|
||||
target="_blank">
|
||||
<img :src="file.thumbSquare">
|
||||
</a>
|
||||
</figure>
|
||||
</div>
|
||||
<div v-if="album.fileCount > 5"
|
||||
class="thumb more no-background">
|
||||
<router-link :to="`/dashboard/albums/${album.uuid}`">{{ album.fileCount - 5 }}+ more</router-link>
|
||||
</div>
|
||||
</template>
|
||||
<template v-else>
|
||||
<span class="no-files">Nothing to show here</span>
|
||||
</template>
|
||||
</div>
|
||||
-->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -48,6 +48,7 @@ export default {
|
|||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import '~/assets/styles/_colors.scss';
|
||||
article.message { background-color: #ffffff; }
|
||||
|
|
|
|||
|
|
@ -17,7 +17,7 @@
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="container">
|
||||
<div class="container uploader">
|
||||
<Uploader v-if="config.publicMode || (!config.publicMode && loggedIn)" />
|
||||
<div v-else>
|
||||
This site has disabled public uploads. You need an account.
|
||||
|
|
@ -79,4 +79,8 @@ export default {
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
.uploader {
|
||||
margin-top: 2rem;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,38 +1,36 @@
|
|||
<template>
|
||||
<section class="hero is-fullheight is-login">
|
||||
<div class="hero-body">
|
||||
<div class="container">
|
||||
<h1 class="title">
|
||||
Dashboard Access
|
||||
</h1>
|
||||
<h2 class="subtitle mb5">
|
||||
Login to access your files and folders
|
||||
</h2>
|
||||
<div class="columns">
|
||||
<div class="column is-4 is-offset-4">
|
||||
<b-field>
|
||||
<b-input v-model="username"
|
||||
type="text"
|
||||
placeholder="Username"
|
||||
@keyup.enter.native="login" />
|
||||
</b-field>
|
||||
<b-field>
|
||||
<b-input v-model="password"
|
||||
type="password"
|
||||
placeholder="Password"
|
||||
password-reveal
|
||||
@keyup.enter.native="login" />
|
||||
</b-field>
|
||||
<section class="section is-fullheight is-login">
|
||||
<div class="container">
|
||||
<h1 class="title">
|
||||
Dashboard Access
|
||||
</h1>
|
||||
<h2 class="subtitle mb5">
|
||||
Login to access your files and folders
|
||||
</h2>
|
||||
<div class="columns">
|
||||
<div class="column is-4 is-offset-4">
|
||||
<b-field>
|
||||
<b-input v-model="username"
|
||||
type="text"
|
||||
placeholder="Username"
|
||||
@keyup.enter.native="login" />
|
||||
</b-field>
|
||||
<b-field>
|
||||
<b-input v-model="password"
|
||||
type="password"
|
||||
placeholder="Password"
|
||||
password-reveal
|
||||
@keyup.enter.native="login" />
|
||||
</b-field>
|
||||
|
||||
<p class="control has-addons is-pulled-right">
|
||||
<router-link v-if="config.userAccounts"
|
||||
to="/register"
|
||||
class="is-text">Don't have an account?</router-link>
|
||||
<span v-else>Registration is closed at the moment</span>
|
||||
<button class="button is-primary big ml1"
|
||||
@click="login">login</button>
|
||||
</p>
|
||||
</div>
|
||||
<p class="control has-addons is-pulled-right">
|
||||
<router-link v-if="config.userAccounts"
|
||||
to="/register"
|
||||
class="is-text">Don't have an account?</router-link>
|
||||
<span v-else>Registration is closed at the moment</span>
|
||||
<button class="button is-primary big ml1"
|
||||
@click="login">login</button>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,42 +1,40 @@
|
|||
<template>
|
||||
<section class="hero is-fullheight is-register">
|
||||
<div class="hero-body">
|
||||
<div class="container">
|
||||
<h1 class="title">
|
||||
Dashboard Access
|
||||
</h1>
|
||||
<h2 class="subtitle mb5">
|
||||
Register for a new account
|
||||
</h2>
|
||||
<div class="columns">
|
||||
<div class="column is-4 is-offset-4">
|
||||
<b-field>
|
||||
<b-input v-model="username"
|
||||
type="text"
|
||||
placeholder="Username" />
|
||||
</b-field>
|
||||
<b-field>
|
||||
<b-input v-model="password"
|
||||
type="password"
|
||||
placeholder="Password"
|
||||
password-reveal />
|
||||
</b-field>
|
||||
<b-field>
|
||||
<b-input v-model="rePassword"
|
||||
type="password"
|
||||
placeholder="Re-type Password"
|
||||
password-reveal
|
||||
@keyup.enter.native="register" />
|
||||
</b-field>
|
||||
<section class="section is-fullheight is-register">
|
||||
<div class="container">
|
||||
<h1 class="title">
|
||||
Dashboard Access
|
||||
</h1>
|
||||
<h2 class="subtitle mb5">
|
||||
Register for a new account
|
||||
</h2>
|
||||
<div class="columns">
|
||||
<div class="column is-4 is-offset-4">
|
||||
<b-field>
|
||||
<b-input v-model="username"
|
||||
type="text"
|
||||
placeholder="Username" />
|
||||
</b-field>
|
||||
<b-field>
|
||||
<b-input v-model="password"
|
||||
type="password"
|
||||
placeholder="Password"
|
||||
password-reveal />
|
||||
</b-field>
|
||||
<b-field>
|
||||
<b-input v-model="rePassword"
|
||||
type="password"
|
||||
placeholder="Re-type Password"
|
||||
password-reveal
|
||||
@keyup.enter.native="register" />
|
||||
</b-field>
|
||||
|
||||
<p class="control has-addons is-pulled-right">
|
||||
<router-link to="/login"
|
||||
class="is-text">Already have an account?</router-link>
|
||||
<button class="button is-primary big ml1"
|
||||
:disabled="isLoading"
|
||||
@click="register">Register</button>
|
||||
</p>
|
||||
</div>
|
||||
<p class="control has-addons is-pulled-right">
|
||||
<router-link to="/login"
|
||||
class="is-text">Already have an account?</router-link>
|
||||
<button class="button is-primary big ml1"
|
||||
:disabled="isLoading"
|
||||
@click="register">Register</button>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
Loading…
Reference in New Issue