diff --git a/bookmarks/frontend/components/SearchAutoComplete.svelte b/bookmarks/frontend/components/SearchAutoComplete.svelte index faeaf7a..e96a9e1 100644 --- a/bookmarks/frontend/components/SearchAutoComplete.svelte +++ b/bookmarks/frontend/components/SearchAutoComplete.svelte @@ -210,11 +210,7 @@ {#each suggestions.tags as suggestion}
  • completeSuggestion(suggestion)}> -
    -
    - {suggestion.label} -
    -
    + {suggestion.label}
    • {/each} @@ -225,11 +221,7 @@ {#each suggestions.search as suggestion}
  • completeSuggestion(suggestion)}> -
    -
    - {suggestion.label} -
    -
    + {suggestion.label}
    • {/each} @@ -240,11 +232,7 @@ {#each suggestions.bookmarks as suggestion}
  • completeSuggestion(suggestion)}> -
    -
    - {suggestion.label} -
    -
    + {suggestion.label}
    • {/each} diff --git a/bookmarks/frontend/components/TagAutocomplete.svelte b/bookmarks/frontend/components/TagAutocomplete.svelte index 9c7588d..52270ab 100644 --- a/bookmarks/frontend/components/TagAutocomplete.svelte +++ b/bookmarks/frontend/components/TagAutocomplete.svelte @@ -131,11 +131,7 @@ {#each suggestions as tag,i}
  • complete(tag)}> -
    -
    - {tag.name} -
    -
    + {tag.name}
    • {/each} diff --git a/bookmarks/styles/auth.scss b/bookmarks/styles/auth.scss deleted file mode 100644 index e2ff6b6..0000000 --- a/bookmarks/styles/auth.scss +++ /dev/null @@ -1,6 +0,0 @@ -.auth-page { - > .columns { - align-items: center; - justify-content: center; - } -} diff --git a/bookmarks/styles/base.scss b/bookmarks/styles/base.scss index 7c6e396..53830fa 100644 --- a/bookmarks/styles/base.scss +++ b/bookmarks/styles/base.scss @@ -1,14 +1,29 @@ +/* Main layout */ body { margin: 20px 10px; @media (min-width: $size-sm) { - // High horizontal padding accounts for checkboxes that show up in bulk edit mode - margin: 20px 24px; + // Horizontal padding accounts for checkboxes that show up in bulk edit mode + margin: 20px 32px; } } header { - margin-bottom: 40px; + margin-bottom: $unit-10; + + .logo { + width: 28px; + height: 28px; + } + + a:hover { + text-decoration: none; + } + + h1 { + margin: 0 0 0 $unit-3; + font-size: $font-size-lg; + } } header .toasts { @@ -23,97 +38,81 @@ header .toasts { } } -.navbar { +/* Shared components */ - .navbar-brand { +// Content area component +section.content-area { + h2 { + font-size: $font-size-lg; + } + .content-area-header { + border-bottom: solid 1px $border-color; display: flex; - align-items: center; + flex-wrap: wrap; + padding-bottom: $unit-2; + margin-bottom: $unit-4; - .logo { - width: 28px; - height: 28px; + h2 { + line-height: 1.8rem; + margin-right: auto; + margin-bottom: 0; } - - h1 { - text-transform: uppercase; - display: inline-block; - margin: 0 0 0 8px; - } - } - - .dropdown-toggle { } } -/* Overrides */ - -// Reduce heading sizes -h1 { - font-size: inherit; +// Confirm button component +span.confirmation { + display: flex; + align-items: baseline; } -h2 { - font-size: .85rem; +span.confirmation .btn.btn-link { + color: $error-color !important; + + &:hover { + text-decoration: underline; + } +} + +/* Additional utilities */ + +.truncate { + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; +} + +.text-sm { + font-size: 0.7rem; +} + +.text-gray-dark { color: $gray-color-dark; } -// Fix up visited styles -a:visited { - color: $link-color; -} -a:visited:hover { - color: $link-color-dark; -} -.btn-link:visited:not(.btn-primary) { - color: $link-color; -} -.btn-link:visited:not(.btn-primary):hover { - color: $link-color-dark; +.align-baseline { + align-items: baseline; } -code { - color: $gray-color-dark; - background-color: $code-bg-color; - box-shadow: 1px 1px 0 $code-shadow-color; +.align-center { + align-items: center; } -// Increase spacing between columns -.container > .columns > .column:not(:first-child) { - padding-left: 2rem; +.justify-between { + justify-content: space-between; } -// Remove left padding from first pagination link -.pagination .page-item:first-child a { - padding-left: 0; +.mb-4 { + margin-bottom: $unit-4; } -// Override border color for tab block -.tab-block { - border-bottom: solid 1px $border-color; +.mx-auto { + margin-left: auto; + margin-right: auto; } -// Form auto-complete menu -.form-autocomplete .menu { - .menu-item.selected > a, .menu-item > a:hover { - background: $secondary-color; - color: $primary-color; - } - - .group-item, .group-item:hover { - color: $gray-color; - text-transform: uppercase; - background: none; - font-size: 0.6rem; - font-weight: bold; - } -} - -// Increase input font size on small viewports to prevent zooming on focus the input -// on mobile devices. 430px relates to the "normalized" iPhone 14 Pro Max -// viewport size -@media screen and (max-width: 430px) { - .form-input { - font-size: 16px; - } +.btn.btn-wide { + padding-left: $unit-6; + padding-right: $unit-6; } diff --git a/bookmarks/styles/bookmark-form.scss b/bookmarks/styles/bookmark-form.scss new file mode 100644 index 0000000..e80af60 --- /dev/null +++ b/bookmarks/styles/bookmark-form.scss @@ -0,0 +1,50 @@ +.bookmarks-form { + + .btn.form-icon { + padding: 0; + width: 20px; + height: 20px; + visibility: hidden; + color: $gray-color; + + &:focus, + &:hover, + &:active, + &.active { + color: $gray-color-dark; + } + + > svg { + width: 20px; + height: 20px; + } + } + + .has-icon-right > input, .has-icon-right > textarea { + padding-right: 30px; + } + + .has-icon-right > input:placeholder-shown ~ .btn.form-icon, + .has-icon-right > textarea:placeholder-shown ~ .btn.form-icon { + visibility: visible; + } + + .form-icon.loading { + visibility: hidden; + } + + .form-input-hint.bookmark-exists { + display: none; + color: $warning-color; + + a { + color: $warning-color; + text-decoration: underline; + font-weight: bold; + } + } + + details.notes textarea { + box-sizing: border-box; + } +} \ No newline at end of file diff --git a/bookmarks/styles/bookmarks.scss b/bookmarks/styles/bookmark-page.scss similarity index 79% rename from bookmarks/styles/bookmarks.scss rename to bookmarks/styles/bookmark-page.scss index 1ed4925..dc8c811 100644 --- a/bookmarks/styles/bookmarks.scss +++ b/bookmarks/styles/bookmark-page.scss @@ -1,3 +1,7 @@ +.bookmarks-page.grid { + grid-gap: $unit-10; +} + /* Bookmark search box */ .bookmarks-page .search { $searchbox-width: 180px; @@ -65,6 +69,7 @@ li[ld-bookmark-item] { .title img { width: 16px; height: 16px; + margin-right: $unit-h; vertical-align: text-top; } @@ -84,7 +89,7 @@ li[ld-bookmark-item] { display: flex; align-items: baseline; flex-wrap: wrap; - gap: 0.4rem; + gap: $unit-2; } .actions { @@ -113,19 +118,19 @@ li[ld-bookmark-item] { align-self: center; display: flex; align-items: center; - gap: 0.1rem; + gap: $unit-h; } } } .bookmark-pagination { - margin-top: 1rem; + margin-top: $unit-4; } .tag-cloud { .selected-tags { - margin-bottom: 0.8rem; + margin-bottom: $unit-4; a, a:visited:hover { color: $error-color; @@ -139,7 +144,7 @@ li[ld-bookmark-item] { } .group { - margin-bottom: 0.4rem; + margin-bottom: $unit-2; } .highlight-char { @@ -149,63 +154,12 @@ li[ld-bookmark-item] { } } -.bookmarks-form { - - .btn.form-icon { - padding: 0; - width: 20px; - height: 20px; - visibility: hidden; - color: $gray-color; - - &:focus, - &:hover, - &:active, - &.active { - color: $gray-color-dark; - } - - > svg { - width: 20px; - height: 20px; - } - } - - .has-icon-right > input, .has-icon-right > textarea { - padding-right: 30px; - } - - .has-icon-right > input:placeholder-shown ~ .btn.form-icon, - .has-icon-right > textarea:placeholder-shown ~ .btn.form-icon { - visibility: visible; - } - - .form-icon.loading { - visibility: hidden; - } - - .form-input-hint.bookmark-exists { - display: none; - color: $warning-color; - - a { - color: $warning-color; - text-decoration: underline; - font-weight: bold; - } - } - - details.notes textarea { - box-sizing: border-box; - } -} - /* Bookmark notes */ ul.bookmark-list { .notes { display: none; max-height: 300px; - margin: 4px 0; + margin: $unit-1 0; overflow: auto; } @@ -218,11 +172,11 @@ ul.bookmark-list { /* Bookmark notes markdown styles */ ul.bookmark-list .notes-content { & { - padding: 0.4rem 0.6rem; + padding: $unit-2 $unit-3; } p, ul, ol, pre, blockquote { - margin: 0 0 0.4rem 0; + margin: 0 0 $unit-2 0; } > *:first-child { @@ -234,17 +188,17 @@ ul.bookmark-list .notes-content { } ul, ol { - margin-left: 0.8rem; + margin-left: $unit-4; } ul li, ol li { - margin-top: 0.2rem; + margin-top: $unit-1; } pre { - padding: 0.2rem 0.4rem; + padding: $unit-1 $unit-2; background-color: $code-bg-color; - border-radius: 0.2rem; + border-radius: $unit-1; } pre code { @@ -268,9 +222,9 @@ $bulk-edit-transition-duration: 400ms; [ld-bulk-edit] { .bulk-edit-bar { - margin-top: -17px; - margin-bottom: 16px; + margin-top: -1px; margin-left: -$bulk-edit-bar-offset; + margin-bottom: $unit-4; max-height: 0; overflow: hidden; transition: max-height $bulk-edit-transition-duration; @@ -309,7 +263,7 @@ $bulk-edit-transition-duration: 400ms; transition: all $bulk-edit-transition-duration; .form-icon { - top: 0.2rem; + top: $unit-1; } } @@ -322,9 +276,9 @@ $bulk-edit-transition-duration: 400ms; .bulk-edit-actions { display: flex; align-items: baseline; - padding: 4px 0; + padding: $unit-1 0; border-top: solid 1px $border-color; - gap: 8px; + gap: $unit-2; button { padding: 0 !important; diff --git a/bookmarks/styles/dark.scss b/bookmarks/styles/dark.scss deleted file mode 100644 index ac8b2a9..0000000 --- a/bookmarks/styles/dark.scss +++ /dev/null @@ -1,32 +0,0 @@ -/* Dark theme overrides */ - -/* Buttons */ -.btn.btn-primary { - background: $dt-primary-button-color; - border-color: darken($dt-primary-button-color, 5%); - - &:hover, &:active, &:focus { - background: darken($dt-primary-button-color, 5%); - border-color: darken($dt-primary-button-color, 10%); - } -} - -/* Focus ring*/ -a:focus, .btn:focus { - box-shadow: 0 0 0 .1rem rgba($primary-color, .5); -} - -/* Forms */ -.has-error .form-input, .form-input.is-error, .has-error .form-select, .form-select.is-error { - background: darken($error-color, 40%); -} - -.form-checkbox input:checked + .form-icon, .form-radio input:checked + .form-icon, .form-switch input:checked + .form-icon { - background: $dt-primary-button-color; - border-color: $dt-primary-button-color; -} - -/* Pagination */ -.pagination .page-item.active a { - background: $dt-primary-button-color; -} diff --git a/bookmarks/styles/responsive.scss b/bookmarks/styles/responsive.scss new file mode 100644 index 0000000..77e8d33 --- /dev/null +++ b/bookmarks/styles/responsive.scss @@ -0,0 +1,108 @@ +.container { + margin-left: auto; + margin-right: auto; + width: 100%; + max-width: $size-lg; +} + +.show-sm, +.show-md { + display: none !important; +} + +.width-25 { + width: 25%; +} + +.width-50 { + width: 50%; +} + +.width-75 { + width: 75%; +} + +.width-100 { + width: 100%; +} + +.grid { + --grid-columns: 3; + display: grid; + grid-template-columns: repeat(var(--grid-columns), 1fr); + grid-gap: $unit-4; +} + +.grid > * { + min-width: 0; +} + +.col-1 { + grid-column: unquote("span min(1, var(--grid-columns))"); +} + +.col-2 { + grid-column: unquote("span min(2, var(--grid-columns))"); +} + +.col-3 { + grid-column: unquote("span min(3, var(--grid-columns))"); +} + +@media (max-width: $size-md) { + .hide-md { + display: none !important; + } + .show-md { + display: block !important; + } + + .width-md-25 { + width: 25%; + } + .width-md-50 { + width: 50%; + } + .width-md-75 { + width: 75%; + } + .width-md-100 { + width: 100%; + } + + .columns-md-1 { + --grid-columns: 1; + } + .columns-md-2 { + --grid-columns: 2; + } +} + +@media (max-width: $size-sm) { + .hide-sm { + display: none !important; + } + .show-sm { + display: block !important; + } + + .width-sm-25 { + width: 25%; + } + .width-sm-50 { + width: 50%; + } + .width-sm-75 { + width: 75%; + } + .width-sm-100 { + width: 100%; + } + + .columns-sm-1 { + --grid-columns: 1; + } + .columns-sm-2 { + --grid-columns: 2; + } +} diff --git a/bookmarks/styles/settings.scss b/bookmarks/styles/settings.scss index 0940f0d..b533abb 100644 --- a/bookmarks/styles/settings.scss +++ b/bookmarks/styles/settings.scss @@ -1,10 +1,9 @@ .settings-page { section.content-area { - margin-bottom: 2rem; + margin-bottom: $unit-12; h2 { - font-size: 1.0rem; - margin-bottom: 0.8rem; + margin-bottom: $unit-4; } } diff --git a/bookmarks/styles/shared.scss b/bookmarks/styles/shared.scss deleted file mode 100644 index 11c0c69..0000000 --- a/bookmarks/styles/shared.scss +++ /dev/null @@ -1,28 +0,0 @@ -// Content area component -section.content-area { - - .content-area-header { - border-bottom: solid 1px $border-color; - display: flex; - flex-direction: row; - margin-bottom: 16px; - - h2 { - line-height: 1.8rem; - } - } -} - -// Confirm button component -span.confirmation { - display: flex; - align-items: baseline; -} - -span.confirmation .btn.btn-link { - color: $error-color !important; - - &:hover { - text-decoration: underline; - } -} diff --git a/bookmarks/styles/spectre.scss b/bookmarks/styles/spectre.scss new file mode 100644 index 0000000..b335f88 --- /dev/null +++ b/bookmarks/styles/spectre.scss @@ -0,0 +1,110 @@ +// Customized Spectre CSS imports, removing modules that are not used +// See node_modules/spectre.css/src/spectre.scss for the original version + +// Variables and mixins +@import "../../node_modules/spectre.css/src/variables"; +@import "../../node_modules/spectre.css/src/mixins"; + +/*! Spectre.css v#{$version} | MIT License | github.com/picturepan2/spectre */ +// Reset and dependencies +@import "../../node_modules/spectre.css/src/normalize"; +@import "../../node_modules/spectre.css/src/base"; + +// Elements +@import "../../node_modules/spectre.css/src/typography"; +@import "../../node_modules/spectre.css/src/asian"; +@import "../../node_modules/spectre.css/src/tables"; +@import "../../node_modules/spectre.css/src/buttons"; +@import "../../node_modules/spectre.css/src/forms"; +@import "../../node_modules/spectre.css/src/labels"; +@import "../../node_modules/spectre.css/src/codes"; +@import "../../node_modules/spectre.css/src/media"; + +// Components +@import "../../node_modules/spectre.css/src/dropdowns"; +@import "../../node_modules/spectre.css/src/empty"; +@import "../../node_modules/spectre.css/src/menus"; +@import "../../node_modules/spectre.css/src/pagination"; +@import "../../node_modules/spectre.css/src/tabs"; +@import "../../node_modules/spectre.css/src/toasts"; +@import "../../node_modules/spectre.css/src/tooltips"; + +// Utility classes +@import "../../node_modules/spectre.css/src/animations"; +@import "../../node_modules/spectre.css/src/utilities"; + +// Auto-complete component +@import "../../node_modules/spectre.css/src/autocomplete"; + + +/* Spectre overrides / fixes */ + +// Fix up visited styles +a:visited { + color: $link-color; +} + +a:visited:hover { + color: $link-color-dark; +} + +.btn-link:visited:not(.btn-primary) { + color: $link-color; +} + +.btn-link:visited:not(.btn-primary):hover { + color: $link-color-dark; +} + +// Disable transitions on buttons, which can otherwise flicker while loading CSS file +// something to do with .btn applying a transition for background, and then .btn-link setting a different background +.btn { + transition: none !important; +} + +// Make code work with light and dark theme +code { + color: $gray-color-dark; + background-color: $code-bg-color; + box-shadow: 1px 1px 0 $code-shadow-color; +} + +// Remove left padding from first pagination link +.pagination .page-item:first-child a { + padding-left: 0; +} + +// Override border color for tab block +.tab-block { + border-bottom: solid 1px $border-color; +} + +// Fix padding for first menu item +ul.menu li:first-child { + margin-top: 0; +} + +// Form auto-complete menu +.form-autocomplete .menu { + .menu-item.selected > a, .menu-item > a:hover { + background: $secondary-color; + color: $primary-color; + } + + .group-item, .group-item:hover { + color: $gray-color; + text-transform: uppercase; + background: none; + font-size: 0.6rem; + font-weight: bold; + } +} + +// Increase input font size on small viewports to prevent zooming on focus the input +// on mobile devices. 430px relates to the "normalized" iPhone 14 Pro Max +// viewport size +@media screen and (max-width: 430px) { + .form-input { + font-size: 16px; + } +} diff --git a/bookmarks/styles/theme-dark.scss b/bookmarks/styles/theme-dark.scss index 77ce779..202c461 100644 --- a/bookmarks/styles/theme-dark.scss +++ b/bookmarks/styles/theme-dark.scss @@ -2,16 +2,49 @@ @import "variables-dark"; // Import Spectre CSS lib -@import "../../node_modules/spectre.css/src/spectre"; -@import "../../node_modules/spectre.css/src/autocomplete"; +@import "spectre"; // Import style modules @import "base"; -@import "util"; -@import "shared"; -@import "bookmarks"; +@import "responsive"; +@import "bookmark-page"; +@import "bookmark-form"; @import "settings"; -@import "auth"; -// Dark theme overrides -@import "dark"; +/* Dark theme overrides */ + +// Buttons +.btn.btn-primary { + background: $dt-primary-button-color; + border-color: darken($dt-primary-button-color, 5%); + + &:hover, &:active, &:focus { + background: darken($dt-primary-button-color, 5%); + border-color: darken($dt-primary-button-color, 10%); + } +} + +// Focus ring +a:focus, .btn:focus { + box-shadow: 0 0 0 .1rem rgba($primary-color, .5); +} + +// Forms +.form-input:not(:placeholder-shown):invalid, +.form-input:not(:placeholder-shown):invalid:focus, +.has-error .form-input, +.form-input.is-error, +.has-error .form-select, +.form-select.is-error { + background: darken($error-color, 40%); +} + +.form-checkbox input:checked + .form-icon, .form-radio input:checked + .form-icon, .form-switch input:checked + .form-icon { + background: $dt-primary-button-color; + border-color: $dt-primary-button-color; +} + +// Pagination +.pagination .page-item.active a { + background: $dt-primary-button-color; +} diff --git a/bookmarks/styles/theme-light.scss b/bookmarks/styles/theme-light.scss index 7ba2a2b..fd4eb32 100644 --- a/bookmarks/styles/theme-light.scss +++ b/bookmarks/styles/theme-light.scss @@ -2,13 +2,11 @@ @import "variables-light"; // Import Spectre CSS lib -@import "../../node_modules/spectre.css/src/spectre"; -@import "../../node_modules/spectre.css/src/autocomplete"; +@import "spectre"; // Import style modules @import "base"; -@import "util"; -@import "shared"; -@import "bookmarks"; +@import "responsive"; +@import "bookmark-page"; +@import "bookmark-form"; @import "settings"; -@import "auth"; diff --git a/bookmarks/styles/util.scss b/bookmarks/styles/util.scss deleted file mode 100644 index 1108e5b..0000000 --- a/bookmarks/styles/util.scss +++ /dev/null @@ -1,21 +0,0 @@ -.spacer { - flex: 1 1 0; -} - -.truncate { - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; -} - -.text-sm { - font-size: 0.7rem; -} - -.text-gray-dark { - color: $gray-color-dark; -} - -.align-baseline { - align-items: baseline; -} \ No newline at end of file diff --git a/bookmarks/templates/bookmarks/archive.html b/bookmarks/templates/bookmarks/archive.html index b31c5f5..b3cc1fb 100644 --- a/bookmarks/templates/bookmarks/archive.html +++ b/bookmarks/templates/bookmarks/archive.html @@ -4,19 +4,20 @@ {% load bookmarks %} {% block content %} -
    {# Bookmark list #} -
    -
    +
    +

    Archived bookmarks

    -
    - {% bookmark_search bookmark_list.filters tag_cloud.tags mode='archived' %} - {% include 'bookmarks/bulk_edit/toggle.html' %} +
    + {% bookmark_search bookmark_list.filters tag_cloud.tags mode='archived' %} + {% include 'bookmarks/bulk_edit/toggle.html' %} +
    {# Tag cloud #} -
    +

    Tags

    diff --git a/bookmarks/templates/bookmarks/edit.html b/bookmarks/templates/bookmarks/edit.html index bedb77a..e8ad82c 100644 --- a/bookmarks/templates/bookmarks/edit.html +++ b/bookmarks/templates/bookmarks/edit.html @@ -2,15 +2,13 @@ {% load bookmarks %} {% block content %} -
    -
    -
    -

    Edit bookmark

    -
    - - {% bookmark_form form return_url bookmark_id %} - -
    -
    +
    +
    +

    Edit bookmark

    +
    +
    + {% bookmark_form form return_url bookmark_id %} +
    +
    {% endblock %} diff --git a/bookmarks/templates/bookmarks/index.html b/bookmarks/templates/bookmarks/index.html index d58720a..a1e0248 100644 --- a/bookmarks/templates/bookmarks/index.html +++ b/bookmarks/templates/bookmarks/index.html @@ -4,19 +4,20 @@ {% load bookmarks %} {% block content %} -
    {# Bookmark list #} -
    -
    +
    +

    Bookmarks

    -
    - {% bookmark_search bookmark_list.filters tag_cloud.tags %} - {% include 'bookmarks/bulk_edit/toggle.html' %} +
    + {% bookmark_search bookmark_list.filters tag_cloud.tags %} + {% include 'bookmarks/bulk_edit/toggle.html' %} +
    {# Tag cloud #} -
    -
    +
    +

    Tags

    diff --git a/bookmarks/templates/bookmarks/layout.html b/bookmarks/templates/bookmarks/layout.html index f978002..43196d6 100644 --- a/bookmarks/templates/bookmarks/layout.html +++ b/bookmarks/templates/bookmarks/layout.html @@ -30,9 +30,9 @@ {% endif %} -
    +
    {% if has_toasts %} -
    +
    {% csrf_token %} {% for toast in toast_messages %} @@ -44,27 +44,21 @@
    {% endif %} -
    -
    - - -

    linkding

    -     -
    +
    + + +

    LINKDING

    +     {% if request.user.is_authenticated %} {# Only show nav items menu when logged in #} -
    - {% include 'bookmarks/nav_menu.html' %} -
    + {% include 'bookmarks/nav_menu.html' %} {% elif has_public_shares %} {# Otherwise show link to shared bookmarks if there are publicly shared bookmarks #} -
    - Shared bookmarks -
    + Shared bookmarks {% endif %}
    -
    +
    {% block content %} {% endblock %}
    diff --git a/bookmarks/templates/bookmarks/new.html b/bookmarks/templates/bookmarks/new.html index 1166e1b..4e44c14 100644 --- a/bookmarks/templates/bookmarks/new.html +++ b/bookmarks/templates/bookmarks/new.html @@ -2,14 +2,12 @@ {% load bookmarks %} {% block content %} -
    -
    -
    -

    New bookmark

    -
    -
    - {% bookmark_form form return_url auto_close=auto_close %} -
    -
    -
    +
    +
    +

    New bookmark

    +
    +
    + {% bookmark_form form return_url auto_close=auto_close %} +
    +
    {% endblock %} diff --git a/bookmarks/templates/bookmarks/shared.html b/bookmarks/templates/bookmarks/shared.html index f4fa062..e9b1de3 100644 --- a/bookmarks/templates/bookmarks/shared.html +++ b/bookmarks/templates/bookmarks/shared.html @@ -4,16 +4,15 @@ {% load bookmarks %} {% block content %} -
    {# Bookmark list #} -
    +

    Shared bookmarks

    -
    {% bookmark_search bookmark_list.filters tag_cloud.tags mode='shared' %}
    @@ -28,7 +27,7 @@
    {# Filters #} -
    +

    User

    diff --git a/bookmarks/templates/django_registration/registration_complete.html b/bookmarks/templates/django_registration/registration_complete.html index dfedc89..fd727ed 100644 --- a/bookmarks/templates/django_registration/registration_complete.html +++ b/bookmarks/templates/django_registration/registration_complete.html @@ -4,13 +4,5 @@ {% block title %}Registration complete{% endblock %} {% block content %} - -
    -
    -
    -

    Registration complete. You can now use the application.

    -
    -
    -
    - +

    Registration complete. You can now use the application.

    {% endblock %} diff --git a/bookmarks/templates/django_registration/registration_form.html b/bookmarks/templates/django_registration/registration_form.html index d065bbf..dba0f54 100644 --- a/bookmarks/templates/django_registration/registration_form.html +++ b/bookmarks/templates/django_registration/registration_form.html @@ -4,41 +4,35 @@ {% block title %}Registration{% endblock %} {% block content %} - -
    -
    -
    -
    -

    Register

    -
    -
    - {% csrf_token %} -
    - - {{ form.username|add_class:'form-input' }} -
    {{ form.errors.username }}
    -
    -
    - - {{ form.email|add_class:'form-input' }} -
    {{ form.errors.email }}
    -
    -
    - - {{ form.password1|add_class:'form-input' }} -
    {{ form.errors.password1 }}
    -
    -
    - - {{ form.password2|add_class:'form-input' }} -
    {{ form.errors.password2 }}
    -
    -
    - - -
    -
    -
    +
    +
    +

    Register

    - +
    + {% csrf_token %} +
    + + {{ form.username|add_class:'form-input'|attr:"placeholder: " }} +
    {{ form.errors.username }}
    +
    +
    + + {{ form.email|add_class:'form-input'|attr:"placeholder: " }} +
    {{ form.errors.email }}
    +
    +
    + + {{ form.password1|add_class:'form-input'|attr:"placeholder: " }} +
    {{ form.errors.password1 }}
    +
    +
    + + {{ form.password2|add_class:'form-input'|attr:"placeholder: " }} +
    {{ form.errors.password2 }}
    +
    +
    + + +
    +
    {% endblock %} diff --git a/bookmarks/templates/registration/login.html b/bookmarks/templates/registration/login.html index cde3cff..5cce281 100644 --- a/bookmarks/templates/registration/login.html +++ b/bookmarks/templates/registration/login.html @@ -4,46 +4,35 @@ {% block title %}Login{% endblock %} {% block content %} - -
    -
    -
    -
    -

    Login

    -
    -
    - {% csrf_token %} - {% if form.errors %} -
    -

    Your username and password didn't match. Please try again.

    -
    - {% endif %} -
    - - {{ form.username|add_class:'form-input'|attr:"placeholder: " }} -
    -
    - - {{ form.password|add_class:'form-input'|attr:"placeholder: " }} -
    - -
    -
    -
    - - -
    - {% if allow_registration %} -
    - Register -
    - {% endif %} -
    - -
    -
    -
    +
    +
    +

    Login

    +
    + {% csrf_token %} + {% if form.errors %} +
    +

    Your username and password didn't match. Please try again.

    +
    + {% endif %} +
    + + {{ form.username|add_class:'form-input'|attr:"placeholder: " }} +
    +
    + + {{ form.password|add_class:'form-input'|attr:"placeholder: " }} +
    +
    +
    + + + {% if allow_registration %} + Register + {% endif %} +
    +
    +
    {% endblock %} diff --git a/bookmarks/templates/registration/password_change_done.html b/bookmarks/templates/registration/password_change_done.html index a49160b..15c1bd8 100644 --- a/bookmarks/templates/registration/password_change_done.html +++ b/bookmarks/templates/registration/password_change_done.html @@ -4,18 +4,12 @@ {% block title %}Password changed{% endblock %} {% block content %} - -
    -
    -
    -
    -

    Password Changed

    -
    -

    - Your password was changed successfully. -

    -
    -
    +
    +
    +

    Password Changed

    - +

    + Your password was changed successfully. +

    +
    {% endblock %} diff --git a/bookmarks/templates/registration/password_change_form.html b/bookmarks/templates/registration/password_change_form.html index fe4b52f..b4aedcd 100644 --- a/bookmarks/templates/registration/password_change_form.html +++ b/bookmarks/templates/registration/password_change_form.html @@ -4,52 +4,42 @@ {% block title %}Change Password{% endblock %} {% block content %} - -
    -
    -
    -
    -

    Change Password

    -
    -
    - {% csrf_token %} -
    - - {{ form.old_password|add_class:'form-input'|attr:"placeholder: " }} - {% if form.old_password.errors %} -
    - {{ form.old_password.errors }} -
    - {% endif %} -
    -
    - - {{ form.new_password1|add_class:'form-input'|attr:"placeholder: " }} - {% if form.new_password1.errors %} -
    - {{ form.new_password1.errors }} -
    - {% endif %} -
    -
    - - {{ form.new_password2|add_class:'form-input'|attr:"placeholder: " }} - {% if form.new_password2.errors %} -
    - {{ form.new_password2.errors }} -
    - {% endif %} -
    - -
    -
    -
    - -
    -
    -
    -
    -
    +
    +
    +

    Change Password

    +
    + {% csrf_token %} +
    + + {{ form.old_password|add_class:'form-input'|attr:"placeholder: " }} + {% if form.old_password.errors %} +
    + {{ form.old_password.errors }} +
    + {% endif %} +
    +
    + + {{ form.new_password1|add_class:'form-input'|attr:"placeholder: " }} + {% if form.new_password1.errors %} +
    + {{ form.new_password1.errors }} +
    + {% endif %} +
    +
    + + {{ form.new_password2|add_class:'form-input'|attr:"placeholder: " }} + {% if form.new_password2.errors %} +
    + {{ form.new_password2.errors }} +
    + {% endif %} +
    +
    + +
    +
    {% endblock %} diff --git a/bookmarks/templates/settings/general.html b/bookmarks/templates/settings/general.html index 1da58c6..a74a5a1 100644 --- a/bookmarks/templates/settings/general.html +++ b/bookmarks/templates/settings/general.html @@ -16,14 +16,14 @@ {% csrf_token %}
    - {{ form.theme|add_class:"form-select col-2 col-sm-12" }} + {{ form.theme|add_class:"form-select width-25 width-sm-100" }}
    Whether to use a light or dark theme, or automatically adjust the theme based on your system's settings.
    - {{ form.bookmark_date_display|add_class:"form-select col-2 col-sm-12" }} + {{ form.bookmark_date_display|add_class:"form-select width-25 width-sm-100" }}
    Whether to show bookmark dates as relative (how long ago), or as absolute dates. Alternatively the date can be hidden. @@ -50,14 +50,14 @@
    - {{ form.bookmark_link_target|add_class:"form-select col-2 col-sm-12" }} + {{ form.bookmark_link_target|add_class:"form-select width-25 width-sm-100" }}
    Whether to open bookmarks a new page or in the same page.
    - {{ form.tag_search|add_class:"form-select col-2 col-sm-12" }} + {{ form.tag_search|add_class:"form-select width-25 width-sm-100" }}
    In strict mode, tags must be prefixed with a hash character (#). In lax mode, tags can also be searched without the hash character. @@ -92,7 +92,7 @@
    - {{ form.web_archive_integration|add_class:"form-select col-2 col-sm-12" }} + {{ form.web_archive_integration|add_class:"form-select width-25 width-sm-100" }}
    Enabling this feature will automatically create snapshots of bookmarked websites on the Internet Archive Wayback @@ -155,9 +155,9 @@
    -
    +
    - +
    {% if import_success_message %}
    diff --git a/bookmarks/templates/settings/integrations.html b/bookmarks/templates/settings/integrations.html index 172feb2..70b9a61 100644 --- a/bookmarks/templates/settings/integrations.html +++ b/bookmarks/templates/settings/integrations.html @@ -33,7 +33,7 @@

    The following token can be used to authenticate 3rd-party applications against the REST API:

    -
    +
    diff --git a/bookmarks/tests/test_toasts_view.py b/bookmarks/tests/test_toasts_view.py index 48b4ae3..22d6b13 100644 --- a/bookmarks/tests/test_toasts_view.py +++ b/bookmarks/tests/test_toasts_view.py @@ -30,7 +30,7 @@ class ToastsViewTestCase(TestCase, BookmarkFactoryMixin): response = self.client.get(reverse('bookmarks:index')) # Should render toasts container - self.assertContains(response, '
    ') + self.assertContains(response, '
    ') # Should render two toasts self.assertContains(response, '
    ', count=2)