From e02b09f405c81fd3eb612b0bb1f78f5860b0a5e8 Mon Sep 17 00:00:00 2001 From: pacien Date: Fri, 8 May 2020 19:10:52 +0200 Subject: viewer/style/global: factorise flex centering container --- viewer/src/assets/scss/global.scss | 11 +++++++++++ 1 file changed, 11 insertions(+) (limited to 'viewer/src/assets') diff --git a/viewer/src/assets/scss/global.scss b/viewer/src/assets/scss/global.scss index 9444548..5d2e6dc 100644 --- a/viewer/src/assets/scss/global.scss +++ b/viewer/src/assets/scss/global.scss @@ -51,6 +51,17 @@ button svg + span { align-items: center; } +/** + * Class for containers that centers its content vertically and horizontally, + * preferably sticking to the container start if the container is smaller than the content. + */ +.container-vh-centering { + min-height: 100%; + display: flex; + align-items: center; + justify-content: center; +} + // === Links .link { -- cgit v1.2.3 From 037db071d42d4a7fdb8ed5cf88bc2c37fba4ae93 Mon Sep 17 00:00:00 2001 From: pacien Date: Tue, 19 May 2020 21:04:50 +0200 Subject: viewer/css/global: factorise util classes --- viewer/src/assets/scss/global.scss | 8 ++++++++ 1 file changed, 8 insertions(+) (limited to 'viewer/src/assets') diff --git a/viewer/src/assets/scss/global.scss b/viewer/src/assets/scss/global.scss index 5d2e6dc..f95a54d 100644 --- a/viewer/src/assets/scss/global.scss +++ b/viewer/src/assets/scss/global.scss @@ -36,6 +36,9 @@ button svg + span { .nowrap { white-space: nowrap; } +.no-scroll { + overflow: hidden; +} .no-scroll-x { overflow-x: hidden; } @@ -51,6 +54,11 @@ button svg + span { align-items: center; } +.fill { + width: 100%; + height: 100%; +} + /** * Class for containers that centers its content vertically and horizontally, * preferably sticking to the container start if the container is smaller than the content. -- cgit v1.2.3 From 74e74844abd5340d7fb502cc8ed18f488fb65b51 Mon Sep 17 00:00:00 2001 From: Zero~Informatique Date: Wed, 19 Aug 2020 21:36:14 +0200 Subject: viewer: unifying scrollbar style (for FireFox) --- viewer/src/assets/scss/global.scss | 25 ++++++++++++++----------- 1 file changed, 14 insertions(+), 11 deletions(-) (limited to 'viewer/src/assets') diff --git a/viewer/src/assets/scss/global.scss b/viewer/src/assets/scss/global.scss index f95a54d..1c1000c 100644 --- a/viewer/src/assets/scss/global.scss +++ b/viewer/src/assets/scss/global.scss @@ -102,18 +102,21 @@ button svg + span { .scrollbar { overflow: auto; + scrollbar-color: $scrollbar-color transparent; + scrollbar-width: thin; + &::-webkit-scrollbar { + width: $scrollbar-width; + height: $scrollbar-width; + } + &::-webkit-scrollbar-corner { + background-color: transparent; + } + &::-webkit-scrollbar-thumb { + box-shadow: inset 0 0 1px black; + background-color: $scrollbar-color; + } } -.scrollbar::-webkit-scrollbar { - width: $scrollbar-width; - height: $scrollbar-width; -} -.scrollbar::-webkit-scrollbar-corner { - background-color: transparent; -} -.scrollbar::-webkit-scrollbar-thumb { - box-shadow: inset 0 0 1px black; - background-color: $scrollbar-color; -} + // === Effect to apply on lazy-image loading -- cgit v1.2.3 From 7e0e108d1d5d9a86a33322432c3d7e8218961121 Mon Sep 17 00:00:00 2001 From: Zero~Informatique Date: Mon, 11 May 2020 22:42:20 +0200 Subject: viewer: item information (raw implementation) --- viewer/src/assets/scss/global.scss | 4 ++++ 1 file changed, 4 insertions(+) (limited to 'viewer/src/assets') diff --git a/viewer/src/assets/scss/global.scss b/viewer/src/assets/scss/global.scss index 1c1000c..4d6c707 100644 --- a/viewer/src/assets/scss/global.scss +++ b/viewer/src/assets/scss/global.scss @@ -59,6 +59,10 @@ button svg + span { height: 100%; } +.flex-grow-1 { + flex-grow: 1; +} + /** * Class for containers that centers its content vertically and horizontally, * preferably sticking to the container start if the container is smaller than the content. -- cgit v1.2.3 From b46f0c99bb6f73ddc2ecdc0e47655b7110251cc9 Mon Sep 17 00:00:00 2001 From: Zero~Informatique Date: Thu, 20 Aug 2020 00:14:07 +0200 Subject: viewer: moved scrollbar SCSS definition to its own file --- viewer/src/assets/scss/global.scss | 20 -------------------- viewer/src/assets/scss/scrollbar.scss | 20 ++++++++++++++++++++ 2 files changed, 20 insertions(+), 20 deletions(-) create mode 100644 viewer/src/assets/scss/scrollbar.scss (limited to 'viewer/src/assets') diff --git a/viewer/src/assets/scss/global.scss b/viewer/src/assets/scss/global.scss index 4d6c707..c82e1bc 100644 --- a/viewer/src/assets/scss/global.scss +++ b/viewer/src/assets/scss/global.scss @@ -102,26 +102,6 @@ button svg + span { } } -// === Scrollbar styling - -.scrollbar { - overflow: auto; - scrollbar-color: $scrollbar-color transparent; - scrollbar-width: thin; - &::-webkit-scrollbar { - width: $scrollbar-width; - height: $scrollbar-width; - } - &::-webkit-scrollbar-corner { - background-color: transparent; - } - &::-webkit-scrollbar-thumb { - box-shadow: inset 0 0 1px black; - background-color: $scrollbar-color; - } -} - - // === Effect to apply on lazy-image loading img { diff --git a/viewer/src/assets/scss/scrollbar.scss b/viewer/src/assets/scss/scrollbar.scss new file mode 100644 index 0000000..cfca929 --- /dev/null +++ b/viewer/src/assets/scss/scrollbar.scss @@ -0,0 +1,20 @@ +@import "~@/assets/scss/theme.scss"; + +// === Scrollbar styling + +.scrollbar { + overflow: auto; + scrollbar-color: $scrollbar-color transparent; + scrollbar-width: thin; + &::-webkit-scrollbar { + width: $scrollbar-width; + height: $scrollbar-width; + } + &::-webkit-scrollbar-corner { + background-color: transparent; + } + &::-webkit-scrollbar-thumb { + box-shadow: inset 0 0 1px black; + background-color: $scrollbar-color; + } +} -- cgit v1.2.3 From 6737bfd38a0568d61c691a507303a65550ae23fc Mon Sep 17 00:00:00 2001 From: Zero~Informatique Date: Thu, 10 Sep 2020 18:44:05 +0200 Subject: viewer: information panel scrollbar and collapse with animation github: resolves #78 --- viewer/src/assets/scss/theme.scss | 4 ++++ viewer/src/assets/scss/transition.scss | 13 +++++++++++++ 2 files changed, 17 insertions(+) create mode 100644 viewer/src/assets/scss/transition.scss (limited to 'viewer/src/assets') diff --git a/viewer/src/assets/scss/theme.scss b/viewer/src/assets/scss/theme.scss index 0c351e5..c59eba9 100644 --- a/viewer/src/assets/scss/theme.scss +++ b/viewer/src/assets/scss/theme.scss @@ -76,3 +76,7 @@ $proposed-category-bgcolor: $palette-700; $layout-top: 45px; $layout-left: 250px; + +// Transitions + +$transition-flex-expand: 0.1s; diff --git a/viewer/src/assets/scss/transition.scss b/viewer/src/assets/scss/transition.scss new file mode 100644 index 0000000..160f625 --- /dev/null +++ b/viewer/src/assets/scss/transition.scss @@ -0,0 +1,13 @@ +@import "~@/assets/scss/theme.scss"; + +// === Transitions for Vue + +.flex-expand-enter-active, .flex-expand-leave-active { + transition: max-height $transition-flex-expand linear; +} +.flex-expand-enter, .flex-expand-leave-to { + max-height: 0%; +} +.flex-expand-enter-to, .flex-expand-leave { + max-height: 100%; +} -- cgit v1.2.3 From e6c2a8d9653ffde924632ca2f260c3a8cddc14ed Mon Sep 17 00:00:00 2001 From: Zero~Informatique Date: Fri, 11 Sep 2020 00:15:04 +0200 Subject: viewer: item display order github: resolves #28 --- viewer/src/assets/scss/theme.scss | 2 ++ 1 file changed, 2 insertions(+) (limited to 'viewer/src/assets') diff --git a/viewer/src/assets/scss/theme.scss b/viewer/src/assets/scss/theme.scss index c59eba9..19fe673 100644 --- a/viewer/src/assets/scss/theme.scss +++ b/viewer/src/assets/scss/theme.scss @@ -54,6 +54,8 @@ $button-focus-color: $button-color; $button-focus-border-color: $link; $button-focus-box-shadow-size: 0; $body-line-height: 1.5; +$dropdown-item-color: $palette-900; +$dropdown-item-active-color: $palette-900; // Custom components -- cgit v1.2.3 From f89ed0bd94ea570d9e6533301783d13b13033db0 Mon Sep 17 00:00:00 2001 From: Zero~Informatique Date: Fri, 11 Sep 2020 20:10:56 +0200 Subject: viewer: PR #238 code review changes --- viewer/src/assets/scss/scrollbar.scss | 19 +++++++++++++++++++ viewer/src/assets/scss/transition.scss | 19 +++++++++++++++++++ 2 files changed, 38 insertions(+) (limited to 'viewer/src/assets') diff --git a/viewer/src/assets/scss/scrollbar.scss b/viewer/src/assets/scss/scrollbar.scss index cfca929..eb34d1e 100644 --- a/viewer/src/assets/scss/scrollbar.scss +++ b/viewer/src/assets/scss/scrollbar.scss @@ -1,3 +1,22 @@ +/* ldgallery - A static generator which turns a collection of tagged +-- pictures into a searchable web gallery. +-- +-- Copyright (C) 2020 Pacien TRAN-GIRARD +-- +-- This program is free software: you can redistribute it and/or modify +-- it under the terms of the GNU Affero General Public License as +-- published by the Free Software Foundation, either version 3 of the +-- License, or (at your option) any later version. +-- +-- This program is distributed in the hope that it will be useful, +-- but WITHOUT ANY WARRANTY; without even the implied warranty of +-- MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the +-- GNU Affero General Public License for more details. +-- +-- You should have received a copy of the GNU Affero General Public License +-- along with this program. If not, see . +*/ + @import "~@/assets/scss/theme.scss"; // === Scrollbar styling diff --git a/viewer/src/assets/scss/transition.scss b/viewer/src/assets/scss/transition.scss index 160f625..bb41f0d 100644 --- a/viewer/src/assets/scss/transition.scss +++ b/viewer/src/assets/scss/transition.scss @@ -1,3 +1,22 @@ +/* ldgallery - A static generator which turns a collection of tagged +-- pictures into a searchable web gallery. +-- +-- Copyright (C) 2020 Pacien TRAN-GIRARD +-- +-- This program is free software: you can redistribute it and/or modify +-- it under the terms of the GNU Affero General Public License as +-- published by the Free Software Foundation, either version 3 of the +-- License, or (at your option) any later version. +-- +-- This program is distributed in the hope that it will be useful, +-- but WITHOUT ANY WARRANTY; without even the implied warranty of +-- MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the +-- GNU Affero General Public License for more details. +-- +-- You should have received a copy of the GNU Affero General Public License +-- along with this program. If not, see . +*/ + @import "~@/assets/scss/theme.scss"; // === Transitions for Vue -- cgit v1.2.3 From 1e5a1a51d21d78a4a717e9434932be9da20d3115 Mon Sep 17 00:00:00 2001 From: Zero~Informatique Date: Fri, 11 Sep 2020 21:10:09 +0200 Subject: viewer: PR #238 code review changes (2nd) --- viewer/src/assets/scss/scrollbar.scss | 2 +- viewer/src/assets/scss/transition.scss | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) (limited to 'viewer/src/assets') diff --git a/viewer/src/assets/scss/scrollbar.scss b/viewer/src/assets/scss/scrollbar.scss index eb34d1e..a00b4c2 100644 --- a/viewer/src/assets/scss/scrollbar.scss +++ b/viewer/src/assets/scss/scrollbar.scss @@ -1,7 +1,7 @@ /* ldgallery - A static generator which turns a collection of tagged -- pictures into a searchable web gallery. -- --- Copyright (C) 2020 Pacien TRAN-GIRARD +-- Copyright (C) 2020 Guillaume FOUET -- -- This program is free software: you can redistribute it and/or modify -- it under the terms of the GNU Affero General Public License as diff --git a/viewer/src/assets/scss/transition.scss b/viewer/src/assets/scss/transition.scss index bb41f0d..fb8d2af 100644 --- a/viewer/src/assets/scss/transition.scss +++ b/viewer/src/assets/scss/transition.scss @@ -1,7 +1,7 @@ /* ldgallery - A static generator which turns a collection of tagged -- pictures into a searchable web gallery. -- --- Copyright (C) 2020 Pacien TRAN-GIRARD +-- Copyright (C) 2020 Guillaume FOUET -- -- This program is free software: you can redistribute it and/or modify -- it under the terms of the GNU Affero General Public License as -- cgit v1.2.3