From 92f62d3dedbb08d147204a7f70ab5dd419c13a4b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Sascha=20I=C3=9Fbr=C3=BCcker?= Date: Fri, 29 Mar 2024 20:49:07 +0100 Subject: [PATCH] Fix CSS sub-pixel issues --- .../components/TagAutocomplete.svelte | 10 +- bookmarks/styles/base.scss | 20 +--- bookmarks/styles/bookmark-page.scss | 106 ++++++++++-------- bookmarks/styles/settings.scss | 4 +- bookmarks/styles/spectre.scss | 39 ++++--- bookmarks/styles/variables-dark.scss | 2 - bookmarks/styles/variables-light.scss | 2 - .../templates/bookmarks/bookmark_list.html | 22 ++-- bookmarks/templates/bookmarks/index.html | 2 +- bookmarks/templates/bookmarks/nav_menu.html | 4 +- bookmarks/templates/bookmarks/search.html | 2 +- .../tests/test_bookmarks_list_template.py | 8 +- 12 files changed, 120 insertions(+), 101 deletions(-) diff --git a/bookmarks/frontend/components/TagAutocomplete.svelte b/bookmarks/frontend/components/TagAutocomplete.svelte index 83d4750..5e2d736 100644 --- a/bookmarks/frontend/components/TagAutocomplete.svelte +++ b/bookmarks/frontend/components/TagAutocomplete.svelte @@ -151,18 +151,20 @@ } .form-autocomplete.small .form-autocomplete-input { - height: 1.4rem; - min-height: 1.4rem; + height: var(--control-size-sm); + min-height: var(--control-size-sm); padding: 0.05rem 0.3rem; } .form-autocomplete.small .form-autocomplete-input input { + width: 100%; + height: 100%; margin: 0; padding: 0; - font-size: 0.7rem; + font-size: var(--font-size-sm); } .form-autocomplete.small .menu .menu-item { - font-size: 0.7rem; + font-size: var(--font-size-sm); } diff --git a/bookmarks/styles/base.scss b/bookmarks/styles/base.scss index dd221fb..9caf728 100644 --- a/bookmarks/styles/base.scss +++ b/bookmarks/styles/base.scss @@ -9,7 +9,7 @@ body { } header { - margin-bottom: $unit-10; + margin-bottom: $unit-9; .logo { width: 28px; @@ -50,14 +50,14 @@ section.content-area { border-bottom: solid 1px $border-color; display: flex; flex-wrap: wrap; - column-gap: $unit-6; - padding-bottom: $unit-2; - margin-bottom: $unit-4; + column-gap: $unit-5; + padding-bottom: $unit-1; + margin-bottom: $unit-3; h2 { flex: 0 0 auto; - line-height: 1.8rem; - margin-bottom: 0; + line-height: $unit-9; + margin: 0; } .header-controls { @@ -95,10 +95,6 @@ span.confirmation { text-overflow: ellipsis; } -.text-sm { - font-size: 0.7rem; -} - .text-gray-dark { color: $gray-color-dark; } @@ -124,10 +120,6 @@ span.confirmation { margin-right: auto; } -.ml-auto { - margin-left: auto; -} - .btn.btn-wide { padding-left: $unit-6; padding-right: $unit-6; diff --git a/bookmarks/styles/bookmark-page.scss b/bookmarks/styles/bookmark-page.scss index ceb7afa..cc0e010 100644 --- a/bookmarks/styles/bookmark-page.scss +++ b/bookmarks/styles/bookmark-page.scss @@ -1,11 +1,10 @@ .bookmarks-page.grid { - grid-gap: $unit-10; + grid-gap: $unit-9; } /* Bookmark area header controls */ .bookmarks-page .content-area-header { --searchbox-max-width: 350px; - --searchbox-height: 1.8rem; @media (max-width: $size-sm) { --searchbox-max-width: initial; @@ -20,18 +19,18 @@ // Regular input input[type='search'] { - height: var(--searchbox-height); + height: $control-size; -webkit-appearance: none; } // Enhanced auto-complete input // This needs a bit more wrangling to make the CSS component align with the attached button .form-autocomplete { - height: var(--searchbox-height); + height: $control-size; .form-autocomplete-input { width: 100%; - height: var(--searchbox-height); + height: $control-size; input[type='search'] { width: 100%; @@ -72,6 +71,7 @@ .menu { padding: $unit-4; min-width: 250px; + font-size: $font-size-sm; } .menu .actions { @@ -108,6 +108,9 @@ ul.bookmark-list { list-style: none; margin: 0; padding: 0; + + /* Increase line-height for better separation within / between items */ + line-height: 1.1rem; } @keyframes appear { @@ -125,54 +128,66 @@ ul.bookmark-list { /* Bookmarks */ li[ld-bookmark-item] { position: relative; + margin-top: $unit-2; [ld-bulk-edit-checkbox].form-checkbox { display: none; } + .title { + position: relative; + } + + .title img { + position: absolute; + width: 16px; + height: 16px; + left: 0; + top: 50%; + transform: translateY(-50%); + pointer-events: none; + } + + .title img + a { + padding-left: 22px; + } + .title a { - display: inline-block; - vertical-align: top; + display: block; width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; + } - &[data-tooltip]:hover::after, &[data-tooltip]:focus::after { - content: attr(data-tooltip); - position: absolute; - z-index: 10; - top: 20px; - left: 50%; - transform: translateX(-50%); - width: max-content; - max-width: 100%; - height: fit-content; - background-color: #292f62; - color: #fff; - padding: $unit-1; - border-radius: $border-radius; - border: 1px solid #424a8c; - font-size: $font-size-sm; - font-style: normal; - white-space: normal; - pointer-events: none; - animation: 0.3s ease 0s appear; - } + .title a[data-tooltip]:hover::after, .title a[data-tooltip]:focus::after { + content: attr(data-tooltip); + position: absolute; + z-index: 10; + top: 100%; + left: 50%; + transform: translateX(-50%); + width: max-content; + max-width: 90%; + height: fit-content; + background-color: #292f62; + color: #fff; + padding: $unit-1; + border-radius: $border-radius; + border: 1px solid #424a8c; + font-size: $font-size-sm; + font-style: normal; + white-space: normal; + pointer-events: none; + animation: 0.3s ease 0s appear; } &.unread .title a { font-style: italic; } - .title img { - width: 16px; - height: 16px; - margin-right: $unit-h; - vertical-align: text-top; - } - - .url-display { + .url-path, .url-display { + font-size: $font-size-sm; color: $secondary-link-color; } @@ -208,6 +223,8 @@ li[ld-bookmark-item] { } .actions { + font-size: $font-size-sm; + a, button.btn-link { color: $gray-color; padding: 0; @@ -224,10 +241,6 @@ li[ld-bookmark-item] { color: $gray-color-dark; } } - - .separator { - align-self: flex-start; - } } } @@ -236,6 +249,8 @@ li[ld-bookmark-item] { } .tag-cloud { + /* Increase line-height for better separation within / between items */ + line-height: 1.1rem; .selected-tags { margin-bottom: $unit-4; @@ -291,7 +306,7 @@ $bulk-edit-transition-duration: 400ms; .bulk-edit-bar { margin-top: -1px; margin-left: -$bulk-edit-bar-offset; - margin-bottom: $unit-4; + margin-bottom: $unit-3; max-height: 0; overflow: hidden; transition: max-height $bulk-edit-transition-duration; @@ -313,7 +328,6 @@ $bulk-edit-transition-duration: 400ms; width: $bulk-edit-toggle-width; margin: 0 0 0 $bulk-edit-toggle-offset; padding: 0; - min-height: 1rem; } /* Bookmark checkboxes */ @@ -321,8 +335,10 @@ $bulk-edit-transition-duration: 400ms; display: block; position: absolute; width: $bulk-edit-toggle-width; + min-height: $bulk-edit-toggle-width; left: -$bulk-edit-toggle-width - $bulk-edit-toggle-offset; - top: 0; + top: 50%; + transform: translateY(-50%); padding: 0; margin: 0; visibility: hidden; @@ -330,7 +346,7 @@ $bulk-edit-transition-duration: 400ms; transition: all $bulk-edit-transition-duration; .form-icon { - top: $unit-1; + top: 0; } } @@ -342,7 +358,7 @@ $bulk-edit-transition-duration: 400ms; /* Actions */ .bulk-edit-actions { display: flex; - align-items: baseline; + align-items: center; padding: $unit-1 0; border-top: solid 1px $border-color; gap: $unit-2; diff --git a/bookmarks/styles/settings.scss b/bookmarks/styles/settings.scss index b62e76f..a22d5ef 100644 --- a/bookmarks/styles/settings.scss +++ b/bookmarks/styles/settings.scss @@ -1,9 +1,9 @@ .settings-page { section.content-area { - margin-bottom: $unit-12; + margin-bottom: $unit-10; h2 { - margin-bottom: $unit-4; + margin-bottom: $unit-3; } } diff --git a/bookmarks/styles/spectre.scss b/bookmarks/styles/spectre.scss index 54b6273..24c2a91 100644 --- a/bookmarks/styles/spectre.scss +++ b/bookmarks/styles/spectre.scss @@ -3,6 +3,32 @@ // Variables and mixins @import "../../node_modules/spectre.css/src/variables"; + +// Customize variables to reduce font and control sizes + +// Can use CSS variables for font sizes, as they are not used in SCSS calculations +$font-size: var(--font-size); +$font-size-sm: var(--font-size-sm); +$font-size-lg: var(--font-size-lg); + +// Can't use CSS variables for these, used in SCSS calculations +$line-height: 1rem; +$control-size: $unit-8; +$control-size-sm: $unit-6; +$control-size-lg: $unit-9; + +// Declare defaults for CSS variables, expose SCSS variables as CSS variables +html { + --font-size: 0.7rem; + --font-size-sm: 0.65rem; + --font-size-lg: 0.8rem; + + --control-size: #{$control-size}; + --control-size-sm: #{$control-size-sm}; + --control-size-lg: #{$control-size-lg}; +} + +// Mixins @import "../../node_modules/spectre.css/src/mixins"; /*! Spectre.css v#{$version} | MIT License | github.com/picturepan2/spectre */ @@ -64,19 +90,6 @@ a:visited:hover { transition: none !important; } -// Fix radio button sub-pixel size -.form-radio .form-icon { - width: 14px; - height: 14px; - border-width: 1px; -} - -.form-radio input:checked + .form-icon::before { - top: 3px; - left: 3px; - transform: unset; -} - // Make code work with light and dark theme code { color: $gray-color-dark; diff --git a/bookmarks/styles/variables-dark.scss b/bookmarks/styles/variables-dark.scss index bea59e8..17d0fed 100644 --- a/bookmarks/styles/variables-dark.scss +++ b/bookmarks/styles/variables-dark.scss @@ -1,5 +1,3 @@ -$html-font-size: 18px !default; - $body-bg: #161822 !default; $bg-color: lighten($body-bg, 5%) !default; $bg-color-light: lighten($body-bg, 5%) !default; diff --git a/bookmarks/styles/variables-light.scss b/bookmarks/styles/variables-light.scss index 38d8c34..c0b42cd 100644 --- a/bookmarks/styles/variables-light.scss +++ b/bookmarks/styles/variables-light.scss @@ -1,5 +1,3 @@ -$html-font-size: 18px !default; - $alternative-color: #05a6a3; $alternative-color-dark: darken($alternative-color, 5%); diff --git a/bookmarks/templates/bookmarks/bookmark_list.html b/bookmarks/templates/bookmarks/bookmark_list.html index e64e490..3c2c3c8 100644 --- a/bookmarks/templates/bookmarks/bookmark_list.html +++ b/bookmarks/templates/bookmarks/bookmark_list.html @@ -10,22 +10,22 @@ data-bookmarks-total="{{ bookmark_list.bookmarks_total }}"> {% for bookmark_item in bookmark_list.items %}
  • -
    + + {% if bookmark_item.favicon_file and bookmark_list.show_favicons %} + + {% endif %} - {% if bookmark_item.favicon_file and bookmark_list.show_favicons %} - - {% endif %} {{ bookmark_item.title }}
    {% if bookmark_list.show_url %}
    + class="url-display"> {{ bookmark_item.url }}
    @@ -65,7 +65,7 @@ {% endif %} -
    +
    {% if bookmark_item.display_date %} {% if bookmark_item.web_archive_snapshot_url %} {{ bookmark_item.display_date }} {% endif %} - | + | {% endif %} {# View link is always visible #} - | + | {% if bookmark_item.show_mark_as_read %} -
    +
    {% csrf_token %} {% if 'sort' in preferences_form.editable_fields %} diff --git a/bookmarks/tests/test_bookmarks_list_template.py b/bookmarks/tests/test_bookmarks_list_template.py index ed5fb37..e7e8311 100644 --- a/bookmarks/tests/test_bookmarks_list_template.py +++ b/bookmarks/tests/test_bookmarks_list_template.py @@ -26,10 +26,10 @@ class BookmarkListTemplateTest(TestCase, BookmarkFactoryMixin, HtmlTestMixin): ) self.assertInHTML( f""" + {favicon_img} - {favicon_img} {bookmark.resolved_title} """, @@ -40,7 +40,7 @@ class BookmarkListTemplateTest(TestCase, BookmarkFactoryMixin, HtmlTestMixin): self.assertInHTML( f""" {label_content} - | + | """, html, ) @@ -54,7 +54,7 @@ class BookmarkListTemplateTest(TestCase, BookmarkFactoryMixin, HtmlTestMixin): title="Show snapshot on the Internet Archive Wayback Machine" target="{link_target}" rel="noopener"> {label_content} ∞ - | + | """, html, ) @@ -147,7 +147,7 @@ class BookmarkListTemplateTest(TestCase, BookmarkFactoryMixin, HtmlTestMixin): f"""
    + class="url-display"> {bookmark.url}