Added dark-theme

This commit is contained in:
Joel Collins 2019-05-28 15:37:09 +01:00
parent d65329eafd
commit 17883e0567
8 changed files with 88 additions and 16 deletions

View file

@ -1,10 +1,10 @@
<template>
<div class="captureCard uk-card uk-card-default uk-card-hover uk-padding-remove uk-width-medium uk-margin-right">
<div class="captureCard uk-card uk-card-default uk-card-hover uk-padding-remove uk-width-medium uk-margin-right" v-bind:class="{ 'uk-card-secondary': $store.state.globalSettings.darkMode }">
<div class="uk-card-media-top">
<a class="lightbox-link" v-bind:href="imgURL" v-bind:data-caption="metadata.filename">
<img class="uk-width-1-1" v-bind:src="thumbURL" v-bind:alt="metadata.id" uk-img>
<img class="uk-width-1-1" v-bind:data-src="thumbURL" v-bind:alt="metadata.id" width="300" height="225" uk-img>
</a>
</div>
@ -39,7 +39,7 @@
<div v-bind:id="metadataModalID" uk-modal>
<div class="uk-modal-dialog uk-modal-body">
<div class="uk-modal-dialog uk-modal-body" v-bind:class="{ 'uk-light uk-background-secondary': $store.state.globalSettings.darkMode }" >
<button class="uk-modal-close-default" type="button" uk-close></button>
<h2 class="uk-modal-title">{{ metadata.filename }}</h2>
<p><b>Path: </b>{{ path }}</p>
@ -56,7 +56,7 @@
<div v-bind:id="tagModalID" uk-modal>
<form class="uk-modal-dialog uk-modal-body uk-margin-auto-vertical" @submit.prevent="handleTagSubmit">
<form class="uk-modal-dialog uk-modal-body uk-margin-auto-vertical" v-bind:class="{ 'uk-light uk-background-secondary': $store.state.globalSettings.darkMode }" @submit.prevent="handleTagSubmit">
<div class="uk-inline">
<span class="uk-form-icon" uk-icon="icon: tag"></span>

View file

@ -4,7 +4,7 @@
<div class="uk-card-media-top">
<a href="#" >
<img class="uk-width-1-1" v-bind:src="thumbnail" v-bind:alt="metadata.scan_id" v-on:click="$root.$emit('globalUpdateCaptureFolder', metadata.custom.scan_id)" uk-img>
<img class="uk-width-1-1" v-bind:data-src="thumbnail" v-bind:alt="metadata.scan_id" width="300" height="225" v-on:click="$root.$emit('globalUpdateCaptureFolder', metadata.custom.scan_id)" uk-img>
</a>
</div>

View file

@ -1,15 +1,14 @@
<template>
<div class="galleryDisplay uk-padding uk-padding-remove-top">
<nav class="uk-navbar-container navbar" uk-navbar="mode: click">
<nav class="uk-navbar-container uk-navbar-transparent navbar" uk-navbar="mode: click">
<div class="uk-navbar-left uk-padding-remove-top uk-padding-remove-bottom">
<ul class="uk-navbar-nav">
<li v-bind:class="[sortDescending ? 'uk-active' : '']"><a v-on:click="sortDescending=true;" class="uk-icon-link" href="#" uk-icon="icon: arrow-down"></a></li>
<li v-bind:class="[!sortDescending ? 'uk-active' : '']"><a v-on:click="sortDescending=false;" class="uk-icon-link" href="#" uk-icon="icon: arrow-up"></a></li>
<li>
<a href="#">Filter</a>
<div class="uk-navbar-dropdown">
<div class="uk-navbar-dropdown" v-bind:class="{ 'uk-light uk-background-secondary': $store.state.globalSettings.darkMode }">
<ul class="uk-nav uk-navbar-dropdown-nav">
<form class="uk-form-stacked">
<div v-for="tag in allTags" :key="tag" class="uk-margin-small">
@ -264,7 +263,8 @@ export default {
<style scoped lang="less">
.navbar {
background-color: #fff !important;
border-bottom: 1px solid #e5e5e5;
border-width: 0 0 1px 0;
border-style: solid;
border-color: rgba(180, 180, 180, 0.25)
}
</style>