DebaucheryLibrarian
/
traxxx
2
1
Fork 1
Code Issues 37 Pull Requests 1 Releases Wiki Activity

Added transition to theme switch.

This commit is contained in:
ThePendulum 2020-04-02 03:11:00 +02:00
parent c39bfb234d
commit 5d467622f4
14 changed files with 39 additions and 44 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
assets/components/container/container.vue
View File

@ -73,6 +73,7 @@ export default {
overflow: hidden; overflow: hidden;
background: var(--background-dim); background: var(--background-dim);
color: var(--text); color: var(--text);
transition: background var(--theme-transition);
} }
.content { .content {

2
assets/components/header/filter-bar.vue
View File

@ -175,6 +175,7 @@ export default {
z-index: 1; z-index: 1;
font-size: 0; font-size: 0;
box-shadow: 0 0 3px var(--darken); box-shadow: 0 0 3px var(--darken);
transition: background var(--theme-transition);
.icon { .icon {
fill: var(--shadow); fill: var(--shadow);
@ -205,6 +206,7 @@ export default {
box-shadow: 0 0 2px var(--shadow-weak); box-shadow: 0 0 2px var(--shadow-weak);
font-size: .8rem; font-size: .8rem;
font-weight: bold; font-weight: bold;
transition: background var(--theme-transition), color var(--theme-transition);
&:hover { &:hover {
color: var(--text); color: var(--text);

1
assets/components/header/filters.vue
View File

@ -124,6 +124,7 @@ export default {
font-size: .9rem; font-size: .9rem;
font-weight: bold; font-weight: bold;
cursor: pointer; cursor: pointer;
transition: color var(--theme-transition);
.check { .check {
display: none; display: none;

2
assets/components/header/header.vue
View File

@ -185,6 +185,7 @@ export default {
color: var(--primary); color: var(--primary);
box-shadow: 0 1px 0 var(--darken-hint); box-shadow: 0 1px 0 var(--darken-hint);
font-size: 0; font-size: 0;
transition: background var(--theme-transition);
} }
.header-nav { .header-nav {
@ -253,6 +254,7 @@ export default {
font-size: .9rem; font-size: .9rem;
font-weight: bold; font-weight: bold;
cursor: pointer; cursor: pointer;
transition: color var(--theme-transition);
&.active { &.active {
color: var(--primary); color: var(--primary);

2
assets/components/header/search.vue
View File

@ -93,9 +93,11 @@ export default {
outline: none; outline: none;
font-size: 1rem; font-size: 1rem;
outline: none; outline: none;
transition: background var(--theme-transition), color var(--theme-transition);
&::placeholder { &::placeholder {
color: var(--shadow); color: var(--shadow);
transition: color var(--theme-transition);
} }
&::-webkit-search-cancel-button { &::-webkit-search-cancel-button {

1
assets/components/icon/icon.vue
View File

@ -43,6 +43,7 @@ export default {
flex-shrink: 0; flex-shrink: 0;
width: 1rem; width: 1rem;
height: 1rem; height: 1rem;
transition: fill var(--theme-transition);
svg { svg {
width: 100%; width: 100%;

1
assets/components/networks/networks.vue
View File

@ -113,6 +113,7 @@ export default {
margin: 1rem 0; margin: 1rem 0;
font-size: 1rem; font-size: 1rem;
outline: none; outline: none;
transition: background var(--theme-transition);
&:focus { &:focus {
box-shadow: 0 0 3px var(--primary); box-shadow: 0 0 3px var(--primary);

36
assets/components/releases/release.vue
View File

@ -210,24 +210,11 @@
class="link added" class="link added"
>{{ formatDate(release.dateAdded, 'MMMM D, YYYY') }}</a> >{{ formatDate(release.dateAdded, 'MMMM D, YYYY') }}</a>
</span> </span>
<div class="row">
<Icon icon="paste2" />
<input
class="filename"
:value="filename"
@focus="copyFilename"
>
</div>
</div> </div>
</div> </div>
</template> </template>
<script> <script>
import config from 'config';
import format from 'template-format';
import Banner from './banner.vue'; import Banner from './banner.vue';
import Actor from '../tile/actor.vue'; import Actor from '../tile/actor.vue';
import Release from '../tile/release.vue'; import Release from '../tile/release.vue';
@ -237,20 +224,8 @@ function pageTitle() {
return this.release && this.release.title; return this.release && this.release.title;
} }
function copyFilename(event) {
event.target.setSelectionRange(0, event.target.value.length);
document.execCommand('copy');
}
async function mounted() { async function mounted() {
this.release = await this.$store.dispatch('fetchReleaseById', this.$route.params.releaseId); this.release = await this.$store.dispatch('fetchReleaseById', this.$route.params.releaseId);
this.filename = format(config.filename.pattern, {
...this.release,
shootId: this.release.shootId || '',
date: this.formatDate(this.release.date, config.filename.date),
}, {
spreadSeparator: config.filename.separator,
});
} }
export default { export default {
@ -270,9 +245,6 @@ export default {
pageTitle, pageTitle,
}, },
mounted, mounted,
methods: {
copyFilename,
},
}; };
</script> </script>
@ -313,7 +285,7 @@ export default {
.details { .details {
background: var(--profile); background: var(--profile);
color: var(--text-light); color: var(--text-light);
box-shadow: 0 0 3px var(--shadow-weak); box-shadow: 0 0 3px var(--darken-weak);
cursor: default; cursor: default;
.column { .column {
@ -324,6 +296,7 @@ export default {
.link { .link {
color: var(--text-light); color: var(--text-light);
transition: color var(--theme-transition);
} }
} }
@ -385,10 +358,12 @@ export default {
.title { .title {
margin: 0 0 1.5rem 0; margin: 0 0 1.5rem 0;
transition: color var(--theme-transition);
} }
.description { .description {
line-height: 1.5; line-height: 1.5;
transition: color var(--theme-transition);
} }
.duration { .duration {
@ -440,9 +415,10 @@ export default {
display: inline-block; display: inline-block;
padding: .5rem; padding: .5rem;
margin: 0 .25rem .25rem 0; margin: 0 .25rem .25rem 0;
box-shadow: 0 0 2px var(--shadow-weak); box-shadow: 0 0 2px var(--darken-weak);
text-decoration: none; text-decoration: none;
text-transform: capitalize; text-transform: capitalize;
transition: background var(--theme-transition);
&:hover { &:hover {
color: var(--primary); color: var(--primary);

1
assets/components/releases/releases.vue
View File

@ -83,6 +83,7 @@ export default {
.empty { .empty {
color: var(--shadow-strong); color: var(--shadow-strong);
font-weight: bold; font-weight: bold;
transition: color var(--theme-transition);
} }
@media(max-width: $breakpoint4) { @media(max-width: $breakpoint4) {

8
assets/components/tile/release.vue
View File

@ -184,13 +184,14 @@ export default {
.tile { .tile {
background: var(--background); background: var(--background);
height: 100%;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
box-sizing: border-box; box-sizing: border-box;
padding: 0 0 .5rem 0; padding: 0 0 .5rem 0;
overflow: hidden; overflow: hidden;
box-shadow: 0 0 3px var(--shadow-weak); box-shadow: 0 0 3px var(--darken-weak);
height: 100%; transition: background var(--theme-transition);
} }
.poster { .poster {
@ -299,6 +300,7 @@ export default {
line-height: 1.5; line-height: 1.5;
text-overflow: ellipsis; text-overflow: ellipsis;
overflow: hidden; overflow: hidden;
transition: color var(--theme-transition);
.icon { .icon {
margin: 0 .25rem 0 0; margin: 0 .25rem 0 0;
@ -316,6 +318,7 @@ export default {
overflow: hidden; overflow: hidden;
max-height: 2.75rem; max-height: 2.75rem;
line-height: 1.5rem; line-height: 1.5rem;
transition: color var(--theme-transition);
} }
.tags { .tags {
@ -358,6 +361,7 @@ export default {
text-decoration: none; text-decoration: none;
line-height: 1; line-height: 1;
border: solid 1px var(--shadow-hint); border: solid 1px var(--shadow-hint);
transition: color var(--theme-transition), border-color var(--theme-transition);
&:hover { &:hover {
color: var(--primary); color: var(--primary);

6
assets/components/tile/site.vue
View File

@ -47,18 +47,18 @@ export default {
.logo { .logo {
width: 100%; width: 100%;
height: 5rem; height: 5rem;
color: $text-contrast; color: var(--text-contrast);
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
object-fit: contain; object-fit: contain;
font-size: 1rem; font-size: 1rem;
font-weight: bold; font-weight: bold;
filter: $logo-highlight; filter: var(--logo-highlight);
} }
.title { .title {
color: $text; color: var(--text);
height: 100%; height: 100%;
display: flex; display: flex;
align-items: center; align-items: center;

7
assets/css/_states.scss
View File

@ -1,3 +1,9 @@
$breakpoint0: 540px;
$breakpoint: 720px;
$breakpoint2: 900px;
$breakpoint3: 1200px;
$breakpoint4: 1500px;
.noselect { .noselect {
user-select: none; user-select: none;
-webkit-user-select: none; -webkit-user-select: none;
@ -14,7 +20,6 @@
li { li {
display: inline-block; display: inline-block;
padding: 0; padding: 0;
margin: 0;
} }
} }

13
assets/css/_theme.scss
View File

@ -1,9 +1,6 @@
@import 'states';
/* $primary: #ff886c; */ /* $primary: #ff886c; */
$breakpoint0: 540px;
$breakpoint: 720px;
$breakpoint2: 900px;
$breakpoint3: 1200px;
$breakpoint4: 1500px;
$primary: #ff6c88; $primary: #ff6c88;
$background: #fff; $background: #fff;
@ -36,6 +33,8 @@ $male: #0af;
$female: #f0a; $female: #f0a;
:root { :root {
--theme-transition: .5s ease;
--primary: #ff6c88; --primary: #ff6c88;
--text-dark: #222; --text-dark: #222;
@ -53,8 +52,8 @@ $female: #f0a;
--lighten-weak: rgba(255, 255, 255, .2); --lighten-weak: rgba(255, 255, 255, .2);
--lighten-hint: rgba(255, 255, 255, .1); --lighten-hint: rgba(255, 255, 255, .1);
--logo-shadow: drop-shadow(1px 0 0 $shadow-weak) drop-shadow(-1px 0 0 $shadow-weak) drop-shadow(0 1px 0 $shadow-weak) drop-shadow(0 -1px 0 $shadow-weak); --logo-shadow: drop-darken(1px 0 0 $darken-weak) drop-darken(-1px 0 0 $darken-weak) drop-darken(0 1px 0 $darken-weak) drop-darken(0 -1px 0 $darken-weak);
--logo-highlight: drop-shadow(0 0 1px $highlight); --logo-highlight: drop-shadow(0 0 1px $lighten);
--alert: #f00; --alert: #f00;
--warn: #fa0; --warn: #fa0;

2
assets/css/style.scss
View File

@ -1,6 +1,5 @@
@import 'theme'; @import 'theme';
@import 'inputs'; @import 'inputs';
@import 'states';
@import 'tooltip'; @import 'tooltip';
html, html,
@ -28,6 +27,7 @@ body {
padding: 0; padding: 0;
margin: 0 0 1rem 0; margin: 0 0 1rem 0;
font-size: 1.5rem; font-size: 1.5rem;
transition: color var(--theme-transition);
} }
.icon.icon-href { .icon.icon-href {