From 00510820a2794efcadbc83f7f8b54318fe198ecb Mon Sep 17 00:00:00 2001 From: Zéro~Informatique Date: Tue, 26 Jul 2022 08:44:34 +0200 Subject: viewer: migrate to vue 3, general refactoring and cleanup Non-exhaustive list of fixes and improvements done at the same time: - html default background to grey (avoids white flash during init) - unified links behavior - added more theme variables - removed the flex-expand transition (it wasn't working) and replaced it with a slide - fixed LdLoading not centered on the content - title on removable tags - fixed an issue with encoded URI from vue-router - unified Item resource URLs - removed the iframe for PlainTextViewer (it wasn't working properly) and replaced it with a pre - fixed clear and search buttons tabindex - fixed the information panel bumping up during the fade animation of tag's dropdown - fixed some focus outlines not appearing correctly - moved CSS variables to the :root context - Code cleaning GitHub: closes #217 GitHub: closes #300 GitHub: closes #297 GitHub: closes #105 GitHub: closes #267 GitHub: closes #275 GitHub: closes #228 GitHub: closes #215 GitHub: closes #112 --- viewer/src/assets/scss/_buefy_variables.scss | 171 --------------------------- viewer/src/assets/scss/buefy.scss | 47 -------- viewer/src/assets/scss/constants.scss | 53 +++++++++ viewer/src/assets/scss/global.scss | 53 +++++---- viewer/src/assets/scss/palette.scss | 31 ----- viewer/src/assets/scss/scrollbar.scss | 2 +- viewer/src/assets/scss/theme.scss | 42 ++----- viewer/src/assets/scss/transition.scss | 40 +++++-- 8 files changed, 128 insertions(+), 311 deletions(-) delete mode 100644 viewer/src/assets/scss/_buefy_variables.scss delete mode 100644 viewer/src/assets/scss/buefy.scss create mode 100644 viewer/src/assets/scss/constants.scss delete mode 100644 viewer/src/assets/scss/palette.scss (limited to 'viewer/src/assets') diff --git a/viewer/src/assets/scss/_buefy_variables.scss b/viewer/src/assets/scss/_buefy_variables.scss deleted file mode 100644 index e008269..0000000 --- a/viewer/src/assets/scss/_buefy_variables.scss +++ /dev/null @@ -1,171 +0,0 @@ -/* ldgallery - A static generator which turns a collection of tagged --- pictures into a searchable web gallery. --- --- Copyright (C) 2019-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 --- 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 . -*/ - -// Included below are all the defined variables from Bulma -// Modify as needed, removing the !default attribute. - -// Colors - -$black: hsl(0, 0%, 4%) !default; -$black-bis: hsl(0, 0%, 7%) !default; -$black-ter: hsl(0, 0%, 14%) !default; - -$grey-darker: hsl(0, 0%, 21%) !default; -$grey-dark: hsl(0, 0%, 29%) !default; -$grey: hsl(0, 0%, 48%) !default; -$grey-light: hsl(0, 0%, 71%) !default; -$grey-lighter: hsl(0, 0%, 86%) !default; - -$white-ter: hsl(0, 0%, 96%) !default; -$white-bis: hsl(0, 0%, 98%) !default; -$white: hsl(0, 0%, 100%) !default; - -$orange: hsl(14, 100%, 53%) !default; -$yellow: hsl(48, 100%, 67%) !default; -$green: hsl(141, 71%, 48%) !default; -$turquoise: hsl(171, 100%, 41%) !default; -$cyan: hsl(204, 86%, 53%) !default; -$blue: hsl(217, 71%, 53%) !default; -$purple: hsl(271, 100%, 71%) !default; -$red: hsl(348, 100%, 61%) !default; - -// Typography - -$family-sans-serif: BlinkMacSystemFont, -apple-system, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", - "Fira Sans", "Droid Sans", "Helvetica Neue", "Helvetica", "Arial", sans-serif !default; -$family-monospace: monospace !default; -$render-mode: optimizeLegibility !default; - -$size-1: 3rem !default; -$size-2: 2.5rem !default; -$size-3: 2rem !default; -$size-4: 1.5rem !default; -$size-5: 1.25rem !default; -$size-6: 1rem !default; -$size-7: 0.75rem !default; - -$weight-light: 300 !default; -$weight-normal: 400 !default; -$weight-medium: 500 !default; -$weight-semibold: 600 !default; -$weight-bold: 700 !default; - -// Responsiveness - -// The container horizontal gap, which acts as the offset for breakpoints -$gap: 32px !default; -// 960, 1152, and 1344 have been chosen because they are divisible by both 12 and 16 -$tablet: 769px !default; -// 960px container + 4rem -$desktop: 960px + (2 * $gap) !default; -// 1152px container + 4rem -$widescreen: 1152px + (2 * $gap) !default; -// 1344px container + 4rem; -$fullhd: 1344px + (2 * $gap) !default; - -// Miscellaneous - -$easing: ease-out !default; -$radius-small: 2px !default; -$radius: 3px !default; -$radius-large: 5px !default; -$radius-rounded: 290486px !default; -$speed: 86ms !default; - -// Flags - -$variable-columns: true !default; - -// The default Bulma derived variables are declared below - -$primary: $turquoise !default; - -$info: $cyan !default; -$success: $green !default; -$warning: $yellow !default; -$danger: $red !default; - -$light: $white-ter !default; -$dark: $grey-darker !default; - -// Invert colors - -$orange-invert: findColorInvert($orange) !default; -$yellow-invert: findColorInvert($yellow) !default; -$green-invert: findColorInvert($green) !default; -$turquoise-invert: findColorInvert($turquoise) !default; -$cyan-invert: findColorInvert($cyan) !default; -$blue-invert: findColorInvert($blue) !default; -$purple-invert: findColorInvert($purple) !default; -$red-invert: findColorInvert($red) !default; - -$primary-invert: $turquoise-invert !default; -$info-invert: $cyan-invert !default; -$success-invert: $green-invert !default; -$warning-invert: $yellow-invert !default; -$danger-invert: $red-invert !default; -$light-invert: $dark !default; -$dark-invert: $light !default; - -// General colors - -$background: $white-ter !default; - -$border: $grey-lighter !default; -$border-hover: $grey-light !default; - -// Text colors - -$text: $grey-dark !default; -$text-invert: findColorInvert($text) !default; -$text-light: $grey !default; -$text-strong: $grey-darker !default; - -// Code colors - -$code: $red !default; -$code-background: $background !default; - -$pre: $text !default; -$pre-background: $background !default; - -// Link colors - -$link: $blue !default; -$link-invert: $blue-invert !default; -$link-visited: $purple !default; - -$link-hover: $grey-darker !default; -$link-hover-border: $grey-light !default; - -$link-focus: $grey-darker !default; -$link-focus-border: $blue !default; - -$link-active: $grey-darker !default; -$link-active-border: $grey-dark !default; - -// Typography - -$family-primary: $family-sans-serif !default; -$family-code: $family-monospace !default; - -$size-small: $size-7 !default; -$size-normal: $size-6 !default; -$size-medium: $size-5 !default; -$size-large: $size-4 !default; diff --git a/viewer/src/assets/scss/buefy.scss b/viewer/src/assets/scss/buefy.scss deleted file mode 100644 index 2bc4985..0000000 --- a/viewer/src/assets/scss/buefy.scss +++ /dev/null @@ -1,47 +0,0 @@ -/* ldgallery - A static generator which turns a collection of tagged --- pictures into a searchable web gallery. --- --- Copyright (C) 2019-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 --- 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 "~bulma/sass/utilities/initial-variables"; -@import "~bulma/sass/utilities/functions"; -// 1. Set your own initial variables and derived -// variables in _variables.scss -@import "buefy_variables"; - -// 2. Setup your Custom Colors -@import "@/assets/scss/theme.scss"; - -@import "~bulma/sass/utilities/derived-variables"; - -// 3. Add new color variables to the color map. -$addColors: ( - "green": ( - $green, - $green-invert, - ), - "purple": ( - $purple, - $purple-invert, - ), -); -$colors: map-merge($colors, $addColors); - -@import "~bulma"; -@import "~buefy/src/scss/buefy"; - -// 4. Provide custom buefy overrides and site styles here diff --git a/viewer/src/assets/scss/constants.scss b/viewer/src/assets/scss/constants.scss new file mode 100644 index 0000000..0732534 --- /dev/null +++ b/viewer/src/assets/scss/constants.scss @@ -0,0 +1,53 @@ +/* ldgallery - A static generator which turns a collection of tagged +-- pictures into a searchable web gallery. +-- +-- Copyright (C) 2019-2022 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 +-- 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 . +*/ + +// Typography + +$family-sans-serif: BlinkMacSystemFont, -apple-system, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", + "Fira Sans", "Droid Sans", "Helvetica Neue", "Helvetica", "Arial", sans-serif !default; + +$size-1: 3rem !default; +$size-2: 2.5rem !default; +$size-3: 2rem !default; +$size-4: 1.5rem !default; +$size-5: 1.25rem !default; +$size-6: 1rem !default; +$size-7: 0.75rem !default; + +$weight-light: 300 !default; +$weight-normal: 400 !default; +$weight-medium: 500 !default; +$weight-semibold: 600 !default; +$weight-bold: 700 !default; + +// Responsiveness +$tablet: 769px !default; + +// Material Design Blue Gray colour palette +$palette-000: #ffffff; +$palette-050: #eceff1; +$palette-100: #cfd8dc; +$palette-200: #b0bec5; +$palette-300: #90a4ae; +$palette-400: #78909c; +$palette-500: #607d8b; +$palette-600: #546e7a; +$palette-700: #455a64; +$palette-800: #37474f; +$palette-900: #263238; diff --git a/viewer/src/assets/scss/global.scss b/viewer/src/assets/scss/global.scss index 06d975f..0a2f8f0 100644 --- a/viewer/src/assets/scss/global.scss +++ b/viewer/src/assets/scss/global.scss @@ -1,7 +1,7 @@ /* ldgallery - A static generator which turns a collection of tagged -- pictures into a searchable web gallery. -- --- Copyright (C) 2019-2020 Guillaume FOUET +-- Copyright (C) 2019-2022 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 @@ -18,24 +18,37 @@ */ // Global CSS -@import "~@/assets/scss/theme.scss"; +@import "theme"; -// === Forms - -.required label::after { - content: "*"; - color: red; +h1 { + font-size: $size-5; + font-weight: $weight-semibold; + line-height: 1.125; +} +h2 { + font-size: $size-6; + font-weight: $weight-normal; } -button svg + span { - margin-left: 7px; +// === Forms + +button { + cursor: pointer; + color: $button-color; + background-color: $button-background-color; + border: 1px solid $button-border-color; + padding: calc(0.375em - 1px) 0.75em; + font-family: inherit; + line-height: 1.5; + font-size: $size-6; + &:hover,&:focus { + border-color: $button-active-color; + outline: none; + } } // === Tools -.nowrap { - white-space: nowrap; -} .no-scroll { overflow: hidden; } @@ -53,16 +66,15 @@ button svg + span { .flex-center { align-items: center; } +.flex-grow-1 { + flex-grow: 1; +} .fill { width: 100%; 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. @@ -76,15 +88,6 @@ button svg + span { // === Links -.link { - color: $link; - cursor: pointer; - text-decoration: none; - &:hover, &:hover a { - color: $link-hover; - } -} - .disabled { color: $disabled-color !important; cursor: initial; diff --git a/viewer/src/assets/scss/palette.scss b/viewer/src/assets/scss/palette.scss deleted file mode 100644 index e70e8a1..0000000 --- a/viewer/src/assets/scss/palette.scss +++ /dev/null @@ -1,31 +0,0 @@ -/* 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 . -*/ - -// Material Design Blue Gray colour palette -$palette-000: #ffffff; -$palette-050: #eceff1; -$palette-100: #cfd8dc; -$palette-200: #b0bec5; -$palette-300: #90a4ae; -$palette-400: #78909c; -$palette-500: #607d8b; -$palette-600: #546e7a; -$palette-700: #455a64; -$palette-800: #37474f; -$palette-900: #263238; diff --git a/viewer/src/assets/scss/scrollbar.scss b/viewer/src/assets/scss/scrollbar.scss index 4ca0a2c..d40d1a1 100644 --- a/viewer/src/assets/scss/scrollbar.scss +++ b/viewer/src/assets/scss/scrollbar.scss @@ -17,7 +17,7 @@ -- along with this program. If not, see . */ -@import "~@/assets/scss/theme.scss"; +@import "theme"; // === Scrollbar styling diff --git a/viewer/src/assets/scss/theme.scss b/viewer/src/assets/scss/theme.scss index 19fe673..63febbf 100644 --- a/viewer/src/assets/scss/theme.scss +++ b/viewer/src/assets/scss/theme.scss @@ -1,7 +1,7 @@ /* ldgallery - A static generator which turns a collection of tagged -- pictures into a searchable web gallery. -- --- Copyright (C) 2019-2020 Guillaume FOUET +-- Copyright (C) 2019-2022 Guillaume FOUET -- 2020 Pacien TRAN-GIRARD -- -- This program is free software: you can redistribute it and/or modify @@ -18,47 +18,27 @@ -- along with this program. If not, see . */ -@import "_buefy_variables.scss"; -@import "palette.scss"; - -// Buefy components +@import "constants"; $primary: $palette-000; $text: $primary; $text-light: $palette-100; -$text-strong: $primary; $input-color: $text; $input-placeholder-color: $text-light; -$input-shadow: none; -$input-border-color: transparent; $input-background-color: $palette-500; $input-focus-box-border-color: $palette-200; -$input-focus-box-shadow-color: transparent; $link: $primary; -$link-visited: $link; $link-hover: $palette-100; $disabled-color: $palette-400; -$radius: 0; -$loading-background: $palette-800; $title-color: $palette-200; -$title-size: $size-5; -$subtitle-color: $palette-200; -$subtitle-size: $size-5; -$tag-background-color: $palette-800; +$tag-background-color: $palette-900; $button-color: $palette-100; $button-active-color: $palette-100; -$button-active-border-color: $palette-500; $button-background-color: $palette-700; $button-border-color: $palette-500; -$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 - +$dropdown-item-color: $palette-600; +$dropdown-item-hover-color: $palette-500; $panel-top-bgcolor: $palette-800; $panel-top-txtcolor: $primary; $panel-left-bgcolor: $palette-800; @@ -67,12 +47,14 @@ $command-buttons-bgcolor: $palette-700; $content-bgcolor: $palette-900; $scrollbar-color: $palette-300; $scrollbar-width: 10px; -$loader-color: $palette-800; -$input-tag-delete-background-color: $palette-700; -$breadcrumb-margins: 12px; +$loader-color: $palette-200; +$skeleton-color: $palette-800; +$breadcrumb-margins: 10px; $breadcrumb-overflow-mask-size: $breadcrumb-margins + 60px; $thumbnail-other-size: $body-line-height * 7em; $proposed-category-bgcolor: $palette-700; +$viewer-text: $palette-000; +$viewer-text-background: $palette-900; // Layout @@ -81,4 +63,6 @@ $layout-left: 250px; // Transitions -$transition-flex-expand: 0.1s; +$transition-slide: 0.1s; +$transition-fade: 0.1s; +$transition-move: 0.1s; diff --git a/viewer/src/assets/scss/transition.scss b/viewer/src/assets/scss/transition.scss index fb8d2af..49fd5ba 100644 --- a/viewer/src/assets/scss/transition.scss +++ b/viewer/src/assets/scss/transition.scss @@ -17,16 +17,42 @@ -- along with this program. If not, see . */ -@import "~@/assets/scss/theme.scss"; +@import "theme"; // === Transitions for Vue -.flex-expand-enter-active, .flex-expand-leave-active { - transition: max-height $transition-flex-expand linear; +// slide +.slide-enter-active, +.slide-leave-active { + transition: transform $transition-slide linear; } -.flex-expand-enter, .flex-expand-leave-to { - max-height: 0%; +.slide-enter-from, +.slide-leave-to { + transform: translateX(-100%); } -.flex-expand-enter-to, .flex-expand-leave { - max-height: 100%; + +// fade +.fade-enter-active, +.fade-leave-active { + transition: opacity $transition-fade ease; +} + +.fade-enter-from, +.fade-leave-to { + opacity: 0; +} + +// moving +.move-move, +.move-enter-active, +.move-leave-active { + transition: all $transition-move ease-in-out; +} +.move-enter-from, +.move-leave-to { + opacity: 0; + transform: translateX(15px); } +.move-leave-active { + position: absolute; +} \ No newline at end of file -- cgit v1.2.3