From bef2045df1c62ca9b2622e924cd8757050acd96f Mon Sep 17 00:00:00 2001 From: Dan Brown Date: Thu, 12 May 2022 17:27:29 +0100 Subject: [PATCH 01/21] Embedded css sources for easier firefox dev work --- package.json | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/package.json b/package.json index b49a2a07f..7a85af47a 100644 --- a/package.json +++ b/package.json @@ -1,8 +1,8 @@ { "private": true, "scripts": { - "build:css:dev": "sass ./resources/sass:./public/dist", - "build:css:watch": "sass ./resources/sass:./public/dist --watch", + "build:css:dev": "sass ./resources/sass:./public/dist --embed-sources", + "build:css:watch": "sass ./resources/sass:./public/dist --watch --embed-sources", "build:css:production": "sass ./resources/sass:./public/dist -s compressed", "build:js:dev": "node dev/build/esbuild.js", "build:js:watch": "chokidar --initial \"./resources/**/*.js\" -c \"npm run build:js:dev\"", From 221d910ff299fec49f343d3d27f66fa03f3f60aa Mon Sep 17 00:00:00 2001 From: Dan Brown Date: Thu, 12 May 2022 17:27:57 +0100 Subject: [PATCH 02/21] Reduced excess margin in chapter contents lists --- resources/sass/_lists.scss | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/resources/sass/_lists.scss b/resources/sass/_lists.scss index 26d12a25d..dfde5a282 100644 --- a/resources/sass/_lists.scss +++ b/resources/sass/_lists.scss @@ -235,6 +235,7 @@ display: none; padding-inline-start: 0; position: relative; + margin-bottom: 0; } [chapter-toggle].open + .sub-menu { display: block; @@ -485,6 +486,9 @@ ul.pagination { display: block; white-space: nowrap; } + > .entity-list > .entity-list-item:last-child { + margin-bottom: -$-xs; + } } .entity-list-item-image { From a0fe6147d8a658c21271c54110aec2251f4ed08a Mon Sep 17 00:00:00 2001 From: Dan Brown Date: Fri, 13 May 2022 17:12:45 +0100 Subject: [PATCH 03/21] Improved the display of dropdown menus - Tweaked styling to add a little extra shadow and be more rounded to match other UI areas. - Added slight horizontal inset when in right sidebar to prevent shadow being cut-off in most cases. - Added logic to "drop upwards" if dropping down would take the menu offscreen. --- resources/js/components/dropdown.js | 30 ++++++++++++++----- resources/sass/_lists.scss | 10 +++++-- .../views/entities/export-menu.blade.php | 7 ++++- .../pages/parts/editor-toolbar.blade.php | 4 ++- 4 files changed, 40 insertions(+), 11 deletions(-) diff --git a/resources/js/components/dropdown.js b/resources/js/components/dropdown.js index f761ecf01..e84076502 100644 --- a/resources/js/components/dropdown.js +++ b/resources/js/components/dropdown.js @@ -28,18 +28,31 @@ class DropDown { this.menu.classList.add('anim', 'menuIn'); this.toggle.setAttribute('aria-expanded', 'true'); + const menuOriginalRect = this.menu.getBoundingClientRect(); + let heightOffset = 0; + const toggleHeight = this.toggle.getBoundingClientRect().height; + const dropUpwards = menuOriginalRect.bottom > window.innerHeight; + + // If enabled, Move to body to prevent being trapped within scrollable sections if (this.moveMenu) { - // Move to body to prevent being trapped within scrollable sections - this.rect = this.menu.getBoundingClientRect(); this.body.appendChild(this.menu); this.menu.style.position = 'fixed'; if (this.direction === 'right') { - this.menu.style.right = `${(this.rect.right - this.rect.width)}px`; + this.menu.style.right = `${(menuOriginalRect.right - menuOriginalRect.width)}px`; } else { - this.menu.style.left = `${this.rect.left}px`; + this.menu.style.left = `${menuOriginalRect.left}px`; } - this.menu.style.top = `${this.rect.top}px`; - this.menu.style.width = `${this.rect.width}px`; + this.menu.style.width = `${menuOriginalRect.width}px`; + heightOffset = dropUpwards ? (window.innerHeight - menuOriginalRect.top - toggleHeight / 2) : menuOriginalRect.top; + } + + // Adjust menu to display upwards if near the bottom of the screen + if (dropUpwards) { + this.menu.style.top = 'initial'; + this.menu.style.bottom = `${heightOffset}px`; + } else { + this.menu.style.top = `${heightOffset}px`; + this.menu.style.bottom = 'initial'; } // Set listener to hide on mouse leave or window click @@ -74,13 +87,16 @@ class DropDown { this.menu.style.display = 'none'; this.menu.classList.remove('anim', 'menuIn'); this.toggle.setAttribute('aria-expanded', 'false'); + this.menu.style.top = ''; + this.menu.style.bottom = ''; + if (this.moveMenu) { this.menu.style.position = ''; this.menu.style[this.direction] = ''; - this.menu.style.top = ''; this.menu.style.width = ''; this.container.appendChild(this.menu); } + this.showing = false; } diff --git a/resources/sass/_lists.scss b/resources/sass/_lists.scss index dfde5a282..3d36fd7bd 100644 --- a/resources/sass/_lists.scss +++ b/resources/sass/_lists.scss @@ -578,8 +578,8 @@ ul.pagination { right: 0; margin: $-m 0; @include lightDark(background-color, #fff, #333); - box-shadow: 0 2px 4px rgba(0, 0, 0, 0.18); - border-radius: 1px; + box-shadow: 0 1px 6px 0 rgba(0, 0, 0, 0.18); + border-radius: 3px; min-width: 180px; padding: $-xs 0; @include lightDark(color, #555, #eee); @@ -656,6 +656,12 @@ ul.pagination { } } +// Shift in right-sidebar dropdown menus to prevent shadows +// being cut by scrollable container. +.tri-layout-right .dropdown-menu { + right: $-xs; +} + // Books grid view .featured-image-container { position: relative; diff --git a/resources/views/entities/export-menu.blade.php b/resources/views/entities/export-menu.blade.php index dd7231095..bac240b1e 100644 --- a/resources/views/entities/export-menu.blade.php +++ b/resources/views/entities/export-menu.blade.php @@ -1,13 +1,18 @@ -
-
+
  • From 24b31b624c0f80bc9a9cd3f29fab97fa18f711d1 Mon Sep 17 00:00:00 2001 From: Dan Brown Date: Fri, 13 May 2022 18:03:43 +0100 Subject: [PATCH 04/21] Cleaned up entity details listing --- resources/sass/_lists.scss | 16 +++++++ resources/views/books/show.blade.php | 12 +++-- resources/views/chapters/show.blade.php | 22 +++++++-- resources/views/entities/meta.blade.php | 64 +++++++++++++++---------- resources/views/pages/show.blade.php | 37 ++++++++++---- resources/views/shelves/show.blade.php | 12 +++-- 6 files changed, 117 insertions(+), 46 deletions(-) diff --git a/resources/sass/_lists.scss b/resources/sass/_lists.scss index 3d36fd7bd..a829e891b 100644 --- a/resources/sass/_lists.scss +++ b/resources/sass/_lists.scss @@ -729,3 +729,19 @@ ul.pagination { } } } + +.entity-meta-item { + display: flex; + line-height: 1.2; + margin: 0.6em 0; + align-content: start; + gap: $-s; + a { + line-height: 1.2; + } + svg { + flex-shrink: 0; + width: 1em; + margin: 0; + } +} diff --git a/resources/views/books/show.blade.php b/resources/views/books/show.blade.php index 5263bc810..e0cb4b862 100644 --- a/resources/views/books/show.blade.php +++ b/resources/views/books/show.blade.php @@ -67,14 +67,20 @@ @section('right')
    {{ trans('common.details') }}
    -
    +
    @include('entities.meta', ['entity' => $book]) @if($book->restricted)
    @if(userCan('restrictions-manage', $book)) - @icon('lock'){{ trans('entities.books_permissions_active') }} + + @icon('lock') +
    {{ trans('entities.books_permissions_active') }}
    +     @else - @icon('lock'){{ trans('entities.books_permissions_active') }} +
    + @icon('lock') +
    {{ trans('entities.books_permissions_active') }}
    +
    @endif
    @endif diff --git a/resources/views/chapters/show.blade.php b/resources/views/chapters/show.blade.php index edd39edde..3e015616a 100644 --- a/resources/views/chapters/show.blade.php +++ b/resources/views/chapters/show.blade.php @@ -64,15 +64,21 @@
    {{ trans('common.details') }}
    -
    +
    @include('entities.meta', ['entity' => $chapter]) @if($book->restricted)
    @if(userCan('restrictions-manage', $book)) - @icon('lock'){{ trans('entities.books_permissions_active') }} + + @icon('lock') +
    {{ trans('entities.books_permissions_active') }}
    +     @else - @icon('lock'){{ trans('entities.books_permissions_active') }} +
    + @icon('lock') +
    {{ trans('entities.books_permissions_active') }}
    +
    @endif
    @endif @@ -80,9 +86,15 @@ @if($chapter->restricted)
    @if(userCan('restrictions-manage', $chapter)) - @icon('lock'){{ trans('entities.chapters_permissions_active') }} + + @icon('lock') +
    {{ trans('entities.chapters_permissions_active') }}
    +     @else - @icon('lock'){{ trans('entities.chapters_permissions_active') }} +
    + @icon('lock') +
    {{ trans('entities.chapters_permissions_active') }}
    +
    @endif
    @endif diff --git a/resources/views/entities/meta.blade.php b/resources/views/entities/meta.blade.php index 298cc7c3e..83ff23762 100644 --- a/resources/views/entities/meta.blade.php +++ b/resources/views/entities/meta.blade.php @@ -1,50 +1,62 @@
    @if($entity->isA('revision')) -
    - @icon('history'){{ trans('entities.pages_revision') }} - {{ trans('entities.pages_revisions_number') }}{{ $entity->revision_number == 0 ? '' : $entity->revision_number }} +
    + @icon('history') +
    + {{ trans('entities.pages_revision') }} + {{ trans('entities.pages_revisions_number') }}{{ $entity->revision_number == 0 ? '' : $entity->revision_number }} +
    @endif @if ($entity->isA('page')) - + @if (userCan('page-update', $entity)) @else
    @endif + @icon('history'){{ trans('entities.meta_revision', ['revisionCount' => $entity->revision_count]) }} + @if (userCan('page-update', $entity)) @else
    @endif @endif @if ($entity->ownedBy && $entity->owned_by !== $entity->created_by) -
    - @icon('user'){!! trans('entities.meta_owned_name', [ - 'user' => "".e($entity->ownedBy->name). "" - ]) !!} +
    + @icon('user') +
    + {!! trans('entities.meta_owned_name', [ + 'user' => "".e($entity->ownedBy->name). "" + ]) !!} +
    @endif @if ($entity->createdBy) -
    - @icon('star'){!! trans('entities.meta_created_name', [ - 'timeLength' => ''.$entity->created_at->diffForHumans() . '', - 'user' => "".e($entity->createdBy->name). "" - ]) !!} +
    + @icon('star') +
    + {!! trans('entities.meta_created_name', [ + 'timeLength' => ''.$entity->created_at->diffForHumans() . '', + 'user' => "".e($entity->createdBy->name). "" + ]) !!} +
    @else -
    - @icon('star'){{ trans('entities.meta_created', ['timeLength' => $entity->created_at->diffForHumans()]) }} +
    + @icon('star') + {{ trans('entities.meta_created', ['timeLength' => $entity->created_at->diffForHumans()]) }}
    @endif @if ($entity->updatedBy) -
    - @icon('edit'){!! trans('entities.meta_updated_name', [ - 'timeLength' => '' . $entity->updated_at->diffForHumans() .'', - 'user' => "".e($entity->updatedBy->name). "" - ]) !!} +
    + @icon('edit') +
    + {!! trans('entities.meta_updated_name', [ + 'timeLength' => '' . $entity->updated_at->diffForHumans() .'', + 'user' => "".e($entity->updatedBy->name). "" + ]) !!} +
    @elseif (!$entity->isA('revision')) -
    - @icon('edit'){{ trans('entities.meta_updated', ['timeLength' => $entity->updated_at->diffForHumans()]) }} +
    + @icon('edit') + {{ trans('entities.meta_updated', ['timeLength' => $entity->updated_at->diffForHumans()]) }}
    @endif
    \ No newline at end of file diff --git a/resources/views/pages/show.blade.php b/resources/views/pages/show.blade.php index 0111047c6..2a71c6021 100644 --- a/resources/views/pages/show.blade.php +++ b/resources/views/pages/show.blade.php @@ -76,15 +76,21 @@ @section('right')
    {{ trans('common.details') }}
    -
    +
    @include('entities.meta', ['entity' => $page]) @if($book->restricted)
    @if(userCan('restrictions-manage', $book)) - @icon('lock'){{ trans('entities.books_permissions_active') }} + + @icon('lock') +
    {{ trans('entities.books_permissions_active') }}
    +     @else - @icon('lock'){{ trans('entities.books_permissions_active') }} +
    + @icon('lock') +
    {{ trans('entities.books_permissions_active') }}
    +
    @endif
    @endif @@ -92,9 +98,15 @@ @if($page->chapter && $page->chapter->restricted)
    @if(userCan('restrictions-manage', $page->chapter)) - @icon('lock'){{ trans('entities.chapters_permissions_active') }} + + @icon('lock') +
    {{ trans('entities.chapters_permissions_active') }}
    +     @else - @icon('lock'){{ trans('entities.chapters_permissions_active') }} +
    + @icon('lock') +
    {{ trans('entities.chapters_permissions_active') }}
    +
    @endif
    @endif @@ -102,16 +114,23 @@ @if($page->restricted)
    @if(userCan('restrictions-manage', $page)) - @icon('lock'){{ trans('entities.pages_permissions_active') }} + + @icon('lock') +
    {{ trans('entities.pages_permissions_active') }}
    +     @else - @icon('lock'){{ trans('entities.pages_permissions_active') }} +
    + @icon('lock') +
    {{ trans('entities.pages_permissions_active') }}
    +
    @endif
    @endif @if($page->template) -
    - @icon('template'){{ trans('entities.pages_is_template') }} +
    + @icon('template') +
    {{ trans('entities.pages_is_template') }}
    @endif
    diff --git a/resources/views/shelves/show.blade.php b/resources/views/shelves/show.blade.php index 0d592468d..4d440b635 100644 --- a/resources/views/shelves/show.blade.php +++ b/resources/views/shelves/show.blade.php @@ -81,14 +81,20 @@
    {{ trans('common.details') }}
    -
    +
    @include('entities.meta', ['entity' => $shelf]) @if($shelf->restricted)
    @if(userCan('restrictions-manage', $shelf)) - @icon('lock'){{ trans('entities.shelves_permissions_active') }} + + @icon('lock') +
    {{ trans('entities.shelves_permissions_active') }}
    +     @else - @icon('lock'){{ trans('entities.shelves_permissions_active') }} +
    + @icon('lock') +
    {{ trans('entities.shelves_permissions_active') }}
    +
    @endif
    @endif From 60e319c4b444d84a51f8d914120b6fe4106d7fbe Mon Sep 17 00:00:00 2001 From: Dan Brown Date: Fri, 13 May 2022 18:34:47 +0100 Subject: [PATCH 05/21] Tidied up book navigation styles - Removed background track line since it would darken entity item bars. - Updated item spacing to be a bit tighter. - Updated action hover styles to be a bit lighter, and visible on dark mode, to fit rest of system. --- resources/sass/_lists.scss | 26 +++++--------------------- 1 file changed, 5 insertions(+), 21 deletions(-) diff --git a/resources/sass/_lists.scss b/resources/sass/_lists.scss index a829e891b..6204bcc78 100644 --- a/resources/sass/_lists.scss +++ b/resources/sass/_lists.scss @@ -157,22 +157,6 @@ @include margin($-xs, -$-s, 0, -$-s); padding-inline-start: 0; padding-inline-end: 0; - position: relative; - - &:after, .sub-menu:after { - content: ''; - display: block; - position: absolute; - left: $-m; - top: 1rem; - bottom: 1rem; - border-inline-start: 4px solid rgba(0, 0, 0, 0.1); - z-index: 0; - @include rtl { - left: auto; - right: $-m; - } - } ul { list-style: none; @@ -181,8 +165,8 @@ } .entity-list-item { - padding-top: $-xxs; - padding-bottom: $-xxs; + padding-top: 2px; + padding-bottom: 2px; background-clip: content-box; border-radius: 0 3px 3px 0; padding-inline-end: 0; @@ -193,7 +177,7 @@ } } .entity-list-item.selected { - @include lightDark(background-color, rgba(0, 0, 0, 0.08), rgba(255, 255, 255, 0.08)); + @include lightDark(background-color, rgba(0, 0, 0, 0.06), rgba(255, 255, 255, 0.06)); } .entity-list-item.no-hover { margin-top: -$-xs; @@ -220,7 +204,7 @@ align-self: stretch; flex-shrink: 0; border-radius: 1px; - opacity: 0.6; + opacity: 0.8; } .entity-list-item .icon:after { opacity: 1; @@ -440,8 +424,8 @@ ul.pagination { cursor: pointer; } &:not(.no-hover):hover { + @include lightDark(background-color, rgba(0, 0, 0, 0.06), rgba(255, 255, 255, 0.06)); text-decoration: none; - background-color: rgba(0, 0, 0, 0.1); border-radius: 4px; } &.outline-hover:hover { From e6864a9cff4bb5e6b16caf53720ac12229815422 Mon Sep 17 00:00:00 2001 From: Dan Brown Date: Sat, 14 May 2022 12:54:23 +0100 Subject: [PATCH 06/21] Improved card list design - Removed border and rounded list item styles to make hover states have less edge detail and to align with other UI elements. - In expanded-detail view, removed space used for entity description if there is not description content existing. --- resources/sass/_blocks.scss | 1 - resources/sass/_lists.scss | 8 ++++++-- 2 files changed, 6 insertions(+), 3 deletions(-) diff --git a/resources/sass/_blocks.scss b/resources/sass/_blocks.scss index 7d408cd1b..0398224ca 100644 --- a/resources/sass/_blocks.scss +++ b/resources/sass/_blocks.scss @@ -66,7 +66,6 @@ @include lightDark(background-color, #FFF, #222); box-shadow: $bs-card; border-radius: 3px; - border: 1px solid transparent; .body, p.empty-text { padding: $-m; } diff --git a/resources/sass/_lists.scss b/resources/sass/_lists.scss index 6204bcc78..7003ae88c 100644 --- a/resources/sass/_lists.scss +++ b/resources/sass/_lists.scss @@ -400,6 +400,7 @@ ul.pagination { padding: $-s $-m; display: flex; align-items: center; + gap: $-m; background-color: transparent; border: 0; width: 100%; @@ -409,7 +410,6 @@ ul.pagination { color: #666; } > span:first-child { - margin-inline-end: $-m; flex-basis: 1.88em; flex: none; } @@ -449,7 +449,8 @@ ul.pagination { } .card .entity-list-item:not(.no-hover):hover { - @include lightDark(background-color, #F2F2F2, #2d2d2d) + @include lightDark(background-color, #F2F2F2, #2d2d2d); + border-radius: 0; } .card .entity-list-item .entity-list-item:hover { background-color: #EEEEEE; @@ -519,6 +520,9 @@ ul.pagination { font-size: $fs-m * 0.8; padding-top: $-xs; } + .entity-list-item p:empty { + padding-top: 0; + } p { margin: 0; } From 2c74dfd1d4e7f030425221cfc8f7e1f6819c8992 Mon Sep 17 00:00:00 2001 From: Dan Brown Date: Sat, 14 May 2022 13:11:48 +0100 Subject: [PATCH 07/21] Updated breadcrumb dropdown styles, improved keyboard nav - Removed harsh theme color border between search and content. - Prevented intermediate focus on list container to align arrow & tab behaviour, and to get to content quicker. --- resources/js/components/dropdown.js | 2 +- resources/sass/_components.scss | 5 ++++- resources/views/entities/breadcrumb-listing.blade.php | 2 +- 3 files changed, 6 insertions(+), 3 deletions(-) diff --git a/resources/js/components/dropdown.js b/resources/js/components/dropdown.js index e84076502..473db37d4 100644 --- a/resources/js/components/dropdown.js +++ b/resources/js/components/dropdown.js @@ -101,7 +101,7 @@ class DropDown { } getFocusable() { - return Array.from(this.menu.querySelectorAll('[tabindex],[href],button,input:not([type=hidden])')); + return Array.from(this.menu.querySelectorAll('[tabindex]:not([tabindex="-1"]),[href],button,input:not([type=hidden])')); } focusNext() { diff --git a/resources/sass/_components.scss b/resources/sass/_components.scss index bce456cf2..adb2aabe0 100644 --- a/resources/sass/_components.scss +++ b/resources/sass/_components.scss @@ -767,12 +767,15 @@ body.flexbox-support #entity-selector-wrap .popup-body .form-group { text-decoration: none; } } - input { + input, input:focus { padding-inline-start: $-xl; border-radius: 0; border: 0; border-bottom: 1px solid #DDD; } + input:focus { + outline: 0; + } } @include smaller-than($m) { diff --git a/resources/views/entities/breadcrumb-listing.blade.php b/resources/views/entities/breadcrumb-listing.blade.php index 929f56ed3..d038de077 100644 --- a/resources/views/entities/breadcrumb-listing.blade.php +++ b/resources/views/entities/breadcrumb-listing.blade.php @@ -18,6 +18,6 @@
    @include('common.loading-icon')
    -
    +
    \ No newline at end of file From 89dfa43e73be80c571d1929e721d5ba1340a06ba Mon Sep 17 00:00:00 2001 From: Dan Brown Date: Sat, 14 May 2022 13:31:24 +0100 Subject: [PATCH 08/21] Fixed loading animation delay Loading animation would show in an unready state due to animation-delay on components. Updated to a negative delay to ensure elements were in correct positions right away upon show. --- resources/sass/styles.scss | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/resources/sass/styles.scss b/resources/sass/styles.scss index 582bf7c75..cd5ab6557 100644 --- a/resources/sass/styles.scss +++ b/resources/sass/styles.scss @@ -79,17 +79,17 @@ $loadingSize: 10px; animation-timing-function: cubic-bezier(.62, .28, .23, .99); margin-inline-end: 4px; background-color: var(--color-page); - animation-delay: 0.3s; + animation-delay: -300ms; } > div:first-child { left: -($loadingSize+$-xs); background-color: var(--color-book); - animation-delay: 0s; + animation-delay: -600ms; } > div:last-of-type { left: $loadingSize+$-xs; background-color: var(--color-chapter); - animation-delay: 0.6s; + animation-delay: 0ms; } > span { margin-inline-start: $-s; From 35a47a273b9364cdcb459eb835fcda355c91df52 Mon Sep 17 00:00:00 2001 From: Dan Brown Date: Sat, 14 May 2022 13:32:25 +0100 Subject: [PATCH 09/21] Added animation transition for breadcrumb dropdown load Animates the height on breadcrumb dropdown menus to transition to the loaded animations quicker. Includes a new animation helper for doing similar tasks in future. --- resources/js/components/dropdown-search.js | 3 ++ resources/js/services/animations.js | 32 ++++++++++++++++++++++ 2 files changed, 35 insertions(+) diff --git a/resources/js/components/dropdown-search.js b/resources/js/components/dropdown-search.js index e2d55f969..81fa940c2 100644 --- a/resources/js/components/dropdown-search.js +++ b/resources/js/components/dropdown-search.js @@ -1,4 +1,5 @@ import {debounce} from "../services/util"; +import {transitionHeight} from "../services/animations"; class DropdownSearch { @@ -51,7 +52,9 @@ class DropdownSearch { try { const resp = await window.$http.get(this.getAjaxUrl(searchTerm)); + const animate = transitionHeight(this.listContainerElem, 80); this.listContainerElem.innerHTML = resp.data; + animate(); } catch (err) { console.error(err); } diff --git a/resources/js/services/animations.js b/resources/js/services/animations.js index 278a765d5..9ccd5f442 100644 --- a/resources/js/services/animations.js +++ b/resources/js/services/animations.js @@ -82,6 +82,38 @@ export function slideDown(element, animTime = 400) { animateStyles(element, animStyles, animTime); } +/** + * Transition the height of the given element between two states. + * Call with first state, and you'll receive a function in return. + * Call the returned function in the second state to animate between those two states. + * If animating to/from 0-height use the slide-up/slide down as easier alternatives. + * @param {Element} element - Element to animate + * @param {Number} animTime - Animation time in ms + * @returns {function} - Function to run in second state to trigger animation. + */ +export function transitionHeight(element, animTime = 400) { + const startHeight = element.getBoundingClientRect().height; + const initialComputedStyles = getComputedStyle(element); + const startPaddingTop = initialComputedStyles.getPropertyValue('padding-top'); + const startPaddingBottom = initialComputedStyles.getPropertyValue('padding-bottom'); + + return () => { + cleanupExistingElementAnimation(element); + const targetHeight = element.getBoundingClientRect().height; + const computedStyles = getComputedStyle(element); + const targetPaddingTop = computedStyles.getPropertyValue('padding-top'); + const targetPaddingBottom = computedStyles.getPropertyValue('padding-bottom'); + const animStyles = { + height: [`${startHeight}px`, `${targetHeight}px`], + overflow: ['hidden', 'hidden'], + paddingTop: [startPaddingTop, targetPaddingTop], + paddingBottom: [startPaddingBottom, targetPaddingBottom], + }; + + animateStyles(element, animStyles, animTime); + }; +} + /** * Animate the css styles of an element using FLIP animation techniques. * Styles must be an object where the keys are style properties, camelcase, and the values From 78920d7d6555fbb1a06b83a9f72ecab64d1cae9d Mon Sep 17 00:00:00 2001 From: Dan Brown Date: Sat, 14 May 2022 13:55:03 +0100 Subject: [PATCH 10/21] Updated tri-layout sidebars to not be cut-off by padding Would cause effect where scroll area would be cut of by spacing which looked a bit strange. This retains the same padding sizes but cuts the content at the header or top of viewport. --- resources/sass/_layout.scss | 4 ++-- resources/views/layouts/tri.blade.php | 4 ++-- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/resources/sass/_layout.scss b/resources/sass/_layout.scss index b1c80cb53..375f36d0f 100644 --- a/resources/sass/_layout.scss +++ b/resources/sass/_layout.scss @@ -295,9 +295,9 @@ body.flexbox { } @include larger-than($xxl) { .tri-layout-left-contents, .tri-layout-right-contents { - padding: $-m; + padding: $-xl $-m; position: sticky; - top: $-m; + top: 0; max-height: 100vh; min-height: 50vh; overflow-y: scroll; diff --git a/resources/views/layouts/tri.blade.php b/resources/views/layouts/tri.blade.php index e95b21445..4571f4471 100644 --- a/resources/views/layouts/tri.blade.php +++ b/resources/views/layouts/tri.blade.php @@ -27,7 +27,7 @@
    - -
    +
    From 6fa699a83573aa7bdd49b8b4e346c23b12be83e7 Mon Sep 17 00:00:00 2001 From: Dan Brown Date: Sat, 14 May 2022 13:59:10 +0100 Subject: [PATCH 11/21] Fixed skip-to-content link shadow being slightly visible Would cause a slight dark area in top left of view while hidden. --- resources/sass/styles.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/resources/sass/styles.scss b/resources/sass/styles.scss index cd5ab6557..ee99d7668 100644 --- a/resources/sass/styles.scss +++ b/resources/sass/styles.scss @@ -138,7 +138,7 @@ $btt-size: 40px; .skip-to-content-link { position: fixed; - top: -$-xxl; + top: -52px; left: 0; background-color: #FFF; z-index: 15; From 9fda0df7981e8fe7e347b4bba5a1b471faaf4be6 Mon Sep 17 00:00:00 2001 From: Dan Brown Date: Sat, 14 May 2022 14:19:54 +0100 Subject: [PATCH 12/21] Updated dropdown search boxe positions to align with other dropdowns --- resources/sass/_components.scss | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/resources/sass/_components.scss b/resources/sass/_components.scss index adb2aabe0..0d21fbc0a 100644 --- a/resources/sass/_components.scss +++ b/resources/sass/_components.scss @@ -739,7 +739,9 @@ body.flexbox-support #entity-selector-wrap .popup-body .form-group { display: none; position: absolute; z-index: 80; - right: -$-m; + right: 0; + top: 0; + margin-top: $-m; @include rtl { right: auto; left: -$-m; From d20c74babf53f09597a1fcb23e7b9d3bc98666f8 Mon Sep 17 00:00:00 2001 From: Dan Brown Date: Sat, 14 May 2022 16:05:29 +0100 Subject: [PATCH 13/21] Improved input size consistency Specifically updates dropdown search and user-search implementation, although does affect all inputs. Decouples breadcrum and select-style dropdown search toggles. Addresses #2678 --- resources/sass/_components.scss | 55 ++++++++++++++++-- resources/sass/_forms.scss | 6 +- resources/sass/_header.scss | 25 +------- resources/sass/_layout.scss | 7 +++ .../entities/breadcrumb-listing.blade.php | 2 +- .../views/form/entity-permissions.blade.php | 2 +- resources/views/form/user-select.blade.php | 10 ++-- resources/views/settings/audit.blade.php | 57 +++++++++---------- resources/views/users/delete.blade.php | 2 +- 9 files changed, 99 insertions(+), 67 deletions(-) diff --git a/resources/sass/_components.scss b/resources/sass/_components.scss index 0d21fbc0a..e30492b6b 100644 --- a/resources/sass/_components.scss +++ b/resources/sass/_components.scss @@ -731,6 +731,55 @@ body.flexbox-support #entity-selector-wrap .popup-body .form-group { } } + +.dropdown-search { + position: relative; +} +.dropdown-search-toggle-breadcrumb { + border: 1px solid transparent; + border-radius: 4px; + line-height: normal; + padding: $-xs; + &:hover { + border-color: #DDD; + } + .svg-icon { + margin-inline-end: 0; + } +} +.dropdown-search-toggle-select { + display: flex; + gap: $-s; + line-height: normal; + .svg-icon { + height: 16px; + margin: 0; + } + .avatar { + height: 22px; + width: 22px; + } + .avatar + span { + max-width: 100%; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + } + .dropdown-search-toggle-caret { + font-size: 1.15rem; + } +} +.dropdown-search-toggle-select-label { + min-width: 0; + white-space: nowrap; +} +.dropdown-search-toggle-select-caret { + font-size: 1.5rem; + line-height: 0; + margin-left: auto; + margin-top: -2px; +} + .dropdown-search-dropdown { box-shadow: $bs-med; overflow: hidden; @@ -789,10 +838,4 @@ body.flexbox-support #entity-selector-wrap .popup-body .form-group { .dropdown-search-dropdown .dropdown-search-list { max-height: 240px; } -} - -.custom-select-input { - max-width: 280px; - border: 1px solid #D4D4D4; - border-radius: 3px; } \ No newline at end of file diff --git a/resources/sass/_forms.scss b/resources/sass/_forms.scss index 665b1213b..f639709fc 100644 --- a/resources/sass/_forms.scss +++ b/resources/sass/_forms.scss @@ -7,7 +7,8 @@ @include lightDark(color, #666, #AAA); display: inline-block; font-size: $fs-m; - padding: $-xs*1.5; + padding: $-xs*1.8; + height: 40px; width: 250px; max-width: 100%; @@ -373,6 +374,7 @@ input[type=color] { max-width: 840px; margin: 0 auto; border: none; + height: auto; } } @@ -413,9 +415,11 @@ div[editor-type="markdown"] .title-input.page-title input[type="text"] { } input { display: block; + padding: $-xs * 1.5; padding-inline-start: $-l + 4px; width: 300px; max-width: 100%; + height: auto; } &.flexible input { width: 100%; diff --git a/resources/sass/_header.scss b/resources/sass/_header.scss index f070f5a18..d5a24a0be 100644 --- a/resources/sass/_header.scss +++ b/resources/sass/_header.scss @@ -86,6 +86,8 @@ header .search-box { border-radius: 40px; color: #EEE; z-index: 2; + height: auto; + padding: $-xs*1.5; padding-inline-start: 40px; &:focus { outline: none; @@ -279,29 +281,6 @@ header .search-box { } } -.dropdown-search { - position: relative; - .dropdown-search-toggle { - padding: $-xs; - border: 1px solid transparent; - border-radius: 4px; - &:hover { - border-color: #DDD; - } - } - .svg-icon { - margin-inline-end: 0; - } -} - -.dropdown-search-toggle.compact { - padding: $-xxs $-xs; - .avatar { - height: 22px; - width: 22px; - } -} - .faded { a, button, span, span > div { color: #666; diff --git a/resources/sass/_layout.scss b/resources/sass/_layout.scss index 375f36d0f..14a37dd4a 100644 --- a/resources/sass/_layout.scss +++ b/resources/sass/_layout.scss @@ -155,6 +155,13 @@ body.flexbox { } } +.gap-m { + gap: $-m; +} + +.justify-flex-start { + justify-content: flex-start; +} .justify-flex-end { justify-content: flex-end; } diff --git a/resources/views/entities/breadcrumb-listing.blade.php b/resources/views/entities/breadcrumb-listing.blade.php index d038de077..1efe3ba34 100644 --- a/resources/views/entities/breadcrumb-listing.blade.php +++ b/resources/views/entities/breadcrumb-listing.blade.php @@ -2,7 +2,7 @@ option:dropdown-search:url="/search/entity/siblings?entity_type={{$entity->getType()}}&entity_id={{ $entity->id }}" option:dropdown-search:local-search-selector=".entity-list-item" > - diff --git a/resources/views/form/entity-permissions.blade.php b/resources/views/form/entity-permissions.blade.php index ed04bc041..206955fe9 100644 --- a/resources/views/form/entity-permissions.blade.php +++ b/resources/views/form/entity-permissions.blade.php @@ -15,7 +15,7 @@
    - @include('form.user-select', ['user' => $model->ownedBy, 'name' => 'owned_by', 'compact' => false]) + @include('form.user-select', ['user' => $model->ownedBy, 'name' => 'owned_by'])
    diff --git a/resources/views/form/user-select.blade.php b/resources/views/form/user-select.blade.php index 8823bb075..743795a6d 100644 --- a/resources/views/form/user-select.blade.php +++ b/resources/views/form/user-select.blade.php @@ -1,19 +1,19 @@ -
    -
    +
    @if (hasAppAccess())
    -
    -
    + @endif +
    From cb1c2db28271d5dafe02e671b1f0c98f4fadf107 Mon Sep 17 00:00:00 2001 From: Dan Brown Date: Tue, 17 May 2022 14:27:58 +0100 Subject: [PATCH 16/21] Aligned collapsed header dropdown item styles Previously the desktop-visible items would style different when collapsed into the expanded dropdown menu, compared to existing items. --- resources/sass/_header.scss | 16 +++++++++++----- 1 file changed, 11 insertions(+), 5 deletions(-) diff --git a/resources/sass/_header.scss b/resources/sass/_header.scss index 457b96b4b..923f026c2 100644 --- a/resources/sass/_header.scss +++ b/resources/sass/_header.scss @@ -194,23 +194,29 @@ header .search-box { overflow: hidden; position: absolute; box-shadow: $bs-hover; - margin-top: -$-xs; + margin-top: $-m; + padding: $-xs 0; &.show { display: block; } } header .links a, header .dropdown-container ul li a, header .dropdown-container ul li button { text-align: start; - display: block; - padding: $-s $-m; + display: grid; + align-items: center; + padding: 8px $-m; + gap: $-m; color: $text-dark; + grid-template-columns: 16px auto; + line-height: 1.4; @include lightDark(color, $text-dark, #eee); svg { margin-inline-end: $-s; + width: 16px; } &:hover { - @include lightDark(background-color, #eee, #333); - @include lightDark(color, #000, #fff); + background-color: var(--color-primary-light); + color: var(--color-primary); text-decoration: none; } &:focus { From 4759fa1e1fe5f144a7eadeea5b30f554595bbc34 Mon Sep 17 00:00:00 2001 From: Dan Brown Date: Tue, 17 May 2022 17:39:31 +0100 Subject: [PATCH 17/21] Made the "Custom HTML Head Content" setting a highlighted code editor --- resources/js/code.mjs | 15 +++++++++++++++ resources/js/components/code-textarea.js | 16 ++++++++++++++++ resources/js/components/index.js | 2 ++ resources/views/settings/customization.blade.php | 8 +++++++- 4 files changed, 40 insertions(+), 1 deletion(-) create mode 100644 resources/js/components/code-textarea.js diff --git a/resources/js/code.mjs b/resources/js/code.mjs index 8e2ed72c8..537b0d108 100644 --- a/resources/js/code.mjs +++ b/resources/js/code.mjs @@ -242,6 +242,21 @@ export function popupEditor(elem, modeSuggestion) { }); } +/** + * Create an inline editor to replace the given textarea. + * @param {HTMLTextAreaElement} textArea + * @param {String} mode + * @returns {CodeMirror3} + */ +export function inlineEditor(textArea, mode) { + return CodeMirror.fromTextArea(textArea, { + mode: getMode(mode, textArea.value), + lineNumbers: true, + lineWrapping: false, + theme: getTheme(), + }); +} + /** * Set the mode of a codemirror instance. * @param cmInstance diff --git a/resources/js/components/code-textarea.js b/resources/js/components/code-textarea.js new file mode 100644 index 000000000..988e51f19 --- /dev/null +++ b/resources/js/components/code-textarea.js @@ -0,0 +1,16 @@ +/** + * A simple component to render a code editor within the textarea + * this exists upon. + * @extends {Component} + */ +class CodeTextarea { + + async setup() { + const mode = this.$opts.mode; + const Code = await window.importVersioned('code'); + Code.inlineEditor(this.$el, mode); + } + +} + +export default CodeTextarea; \ No newline at end of file diff --git a/resources/js/components/index.js b/resources/js/components/index.js index 6a4a8c2b0..1bbca864c 100644 --- a/resources/js/components/index.js +++ b/resources/js/components/index.js @@ -9,6 +9,7 @@ import bookSort from "./book-sort.js" import chapterToggle from "./chapter-toggle.js" import codeEditor from "./code-editor.js" import codeHighlighter from "./code-highlighter.js" +import codeTextarea from "./code-textarea.js" import collapsible from "./collapsible.js" import confirmDialog from "./confirm-dialog" import customCheckbox from "./custom-checkbox.js" @@ -65,6 +66,7 @@ const componentMapping = { "chapter-toggle": chapterToggle, "code-editor": codeEditor, "code-highlighter": codeHighlighter, + "code-textarea": codeTextarea, "collapsible": collapsible, "confirm-dialog": confirmDialog, "custom-checkbox": customCheckbox, diff --git a/resources/views/settings/customization.blade.php b/resources/views/settings/customization.blade.php index b7be95b4a..a7392196b 100644 --- a/resources/views/settings/customization.blade.php +++ b/resources/views/settings/customization.blade.php @@ -119,7 +119,13 @@

    {{ trans('settings.app_custom_html_desc') }}

    - +
    + +

    {{ trans('settings.app_custom_html_disabled_notice') }}

    From b030c1398bc909ebceec092907134da99b439695 Mon Sep 17 00:00:00 2001 From: Dan Brown Date: Wed, 18 May 2022 13:18:21 +0100 Subject: [PATCH 18/21] Tweaked chapter list item styles - Improves animation smoothness - Changed animation slideup/down animations to use max-height instead of height to better avoid jutter at the end. - Cleaned spacing to match page items in books listing. --- resources/js/components/chapter-toggle.js | 4 ++-- resources/js/services/animations.js | 4 ++-- resources/sass/_lists.scss | 3 +-- resources/views/chapters/parts/list-item.blade.php | 2 +- 4 files changed, 6 insertions(+), 7 deletions(-) diff --git a/resources/js/components/chapter-toggle.js b/resources/js/components/chapter-toggle.js index bfd0ac729..2fb3f3f1e 100644 --- a/resources/js/components/chapter-toggle.js +++ b/resources/js/components/chapter-toggle.js @@ -12,14 +12,14 @@ class ChapterToggle { const list = this.elem.parentNode.querySelector('.inset-list'); this.elem.classList.add('open'); this.elem.setAttribute('aria-expanded', 'true'); - slideDown(list, 240); + slideDown(list, 180); } close() { const list = this.elem.parentNode.querySelector('.inset-list'); this.elem.classList.remove('open'); this.elem.setAttribute('aria-expanded', 'false'); - slideUp(list, 240); + slideUp(list, 180); } click(event) { diff --git a/resources/js/services/animations.js b/resources/js/services/animations.js index 9ccd5f442..12b8077cf 100644 --- a/resources/js/services/animations.js +++ b/resources/js/services/animations.js @@ -49,7 +49,7 @@ export function slideUp(element, animTime = 400) { const currentPaddingTop = computedStyles.getPropertyValue('padding-top'); const currentPaddingBottom = computedStyles.getPropertyValue('padding-bottom'); const animStyles = { - height: [`${currentHeight}px`, '0px'], + maxHeight: [`${currentHeight}px`, '0px'], overflow: ['hidden', 'hidden'], paddingTop: [currentPaddingTop, '0px'], paddingBottom: [currentPaddingBottom, '0px'], @@ -73,7 +73,7 @@ export function slideDown(element, animTime = 400) { const targetPaddingTop = computedStyles.getPropertyValue('padding-top'); const targetPaddingBottom = computedStyles.getPropertyValue('padding-bottom'); const animStyles = { - height: ['0px', `${targetHeight}px`], + maxHeight: ['0px', `${targetHeight}px`], overflow: ['hidden', 'hidden'], paddingTop: ['0px', targetPaddingTop], paddingBottom: ['0px', targetPaddingBottom], diff --git a/resources/sass/_lists.scss b/resources/sass/_lists.scss index 7003ae88c..3569ed3db 100644 --- a/resources/sass/_lists.scss +++ b/resources/sass/_lists.scss @@ -460,8 +460,7 @@ ul.pagination { padding: $-m; > div { overflow: hidden; - padding: $-xs 0; - margin-top: -$-xs; + padding: 0 0 $-xs 0; } .entity-chip { text-overflow: ellipsis; diff --git a/resources/views/chapters/parts/list-item.blade.php b/resources/views/chapters/parts/list-item.blade.php index 285e34893..5aa9864b2 100644 --- a/resources/views/chapters/parts/list-item.blade.php +++ b/resources/views/chapters/parts/list-item.blade.php @@ -5,7 +5,7 @@

    {{ $chapter->name }}

    -

    {{ $chapter->getExcerpt() }}

    +

    {{ $chapter->getExcerpt() }}

    From eeccc2ef1090d4e0bffa4fda901aede322b0b671 Mon Sep 17 00:00:00 2001 From: Dan Brown Date: Wed, 18 May 2022 13:28:34 +0100 Subject: [PATCH 19/21] Readjusted book child item styles after other changes Was extra space showing due to structure changes and flex gap. --- resources/sass/_lists.scss | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/resources/sass/_lists.scss b/resources/sass/_lists.scss index 3569ed3db..4521e7fd4 100644 --- a/resources/sass/_lists.scss +++ b/resources/sass/_lists.scss @@ -6,7 +6,7 @@ justify-self: stretch; align-self: stretch; height: auto; - margin-inline-end: $-l; + margin-inline-end: $-xs; } .icon:after { opacity: 0.5; @@ -58,7 +58,7 @@ } .chapter-expansion-toggle { border-radius: 0 4px 4px 0; - padding: $-xs $-m; + padding: $-xs ($-m + $-xxs); width: 100%; text-align: start; } @@ -448,7 +448,7 @@ ul.pagination { } } -.card .entity-list-item:not(.no-hover):hover { +.card .entity-list-item:not(.no-hover, .book-contents .entity-list-item):hover { @include lightDark(background-color, #F2F2F2, #2d2d2d); border-radius: 0; } From cb10ad804f046d652950dbafb3d549875b4f898f Mon Sep 17 00:00:00 2001 From: Dan Brown Date: Wed, 18 May 2022 14:06:40 +0100 Subject: [PATCH 20/21] Made chapter toggle in book sidebar nav more consistent - Now has a hover state to match other items. - Now spans the full sidebar with like other items. - Also updated chapter-toggle to a chapter-contents component, following the newer component system. --- resources/js/components/chapter-contents.js | 37 +++++++++++++++++++ resources/js/components/chapter-toggle.js | 33 ----------------- resources/js/components/index.js | 4 +- resources/sass/_components.scss | 4 +- resources/sass/_lists.scss | 37 +++++++++++-------- .../views/chapters/parts/child-menu.blade.php | 13 +++++-- .../views/chapters/parts/list-item.blade.php | 9 +++-- 7 files changed, 76 insertions(+), 61 deletions(-) create mode 100644 resources/js/components/chapter-contents.js delete mode 100644 resources/js/components/chapter-toggle.js diff --git a/resources/js/components/chapter-contents.js b/resources/js/components/chapter-contents.js new file mode 100644 index 000000000..c824d0f78 --- /dev/null +++ b/resources/js/components/chapter-contents.js @@ -0,0 +1,37 @@ +import {slideUp, slideDown} from "../services/animations"; + +/** + * @extends {Component} + */ +class ChapterContents { + + setup() { + this.list = this.$refs.list; + this.toggle = this.$refs.toggle; + + this.isOpen = this.toggle.classList.contains('open'); + this.toggle.addEventListener('click', this.click.bind(this)); + } + + open() { + this.toggle.classList.add('open'); + this.toggle.setAttribute('aria-expanded', 'true'); + slideDown(this.list, 180); + this.isOpen = true; + } + + close() { + this.toggle.classList.remove('open'); + this.toggle.setAttribute('aria-expanded', 'false'); + slideUp(this.list, 180); + this.isOpen = false; + } + + click(event) { + event.preventDefault(); + this.isOpen ? this.close() : this.open(); + } + +} + +export default ChapterContents; diff --git a/resources/js/components/chapter-toggle.js b/resources/js/components/chapter-toggle.js deleted file mode 100644 index 2fb3f3f1e..000000000 --- a/resources/js/components/chapter-toggle.js +++ /dev/null @@ -1,33 +0,0 @@ -import {slideUp, slideDown} from "../services/animations"; - -class ChapterToggle { - - constructor(elem) { - this.elem = elem; - this.isOpen = elem.classList.contains('open'); - elem.addEventListener('click', this.click.bind(this)); - } - - open() { - const list = this.elem.parentNode.querySelector('.inset-list'); - this.elem.classList.add('open'); - this.elem.setAttribute('aria-expanded', 'true'); - slideDown(list, 180); - } - - close() { - const list = this.elem.parentNode.querySelector('.inset-list'); - this.elem.classList.remove('open'); - this.elem.setAttribute('aria-expanded', 'false'); - slideUp(list, 180); - } - - click(event) { - event.preventDefault(); - this.isOpen ? this.close() : this.open(); - this.isOpen = !this.isOpen; - } - -} - -export default ChapterToggle; diff --git a/resources/js/components/index.js b/resources/js/components/index.js index 1bbca864c..f360e2b0c 100644 --- a/resources/js/components/index.js +++ b/resources/js/components/index.js @@ -6,7 +6,7 @@ import attachmentsList from "./attachments-list.js" import autoSuggest from "./auto-suggest.js" import backToTop from "./back-to-top.js" import bookSort from "./book-sort.js" -import chapterToggle from "./chapter-toggle.js" +import chapterContents from "./chapter-contents.js" import codeEditor from "./code-editor.js" import codeHighlighter from "./code-highlighter.js" import codeTextarea from "./code-textarea.js" @@ -63,7 +63,7 @@ const componentMapping = { "auto-suggest": autoSuggest, "back-to-top": backToTop, "book-sort": bookSort, - "chapter-toggle": chapterToggle, + "chapter-contents": chapterContents, "code-editor": codeEditor, "code-highlighter": codeHighlighter, "code-textarea": codeTextarea, diff --git a/resources/sass/_components.scss b/resources/sass/_components.scss index e30492b6b..e3c9d5eea 100644 --- a/resources/sass/_components.scss +++ b/resources/sass/_components.scss @@ -61,7 +61,7 @@ } } -[chapter-toggle] { +.chapter-contents-toggle { cursor: pointer; margin: 0; transition: all ease-in-out 180ms; @@ -77,7 +77,7 @@ transform: rotate(90deg); } svg[data-icon="caret-right"] + * { - margin-inline-start: $-xs; + margin-inline-start: $-xxs; } } diff --git a/resources/sass/_lists.scss b/resources/sass/_lists.scss index 4521e7fd4..8ca811c5c 100644 --- a/resources/sass/_lists.scss +++ b/resources/sass/_lists.scss @@ -56,13 +56,13 @@ > .content { flex: 1; } - .chapter-expansion-toggle { + .chapter-contents-toggle { border-radius: 0 4px 4px 0; padding: $-xs ($-m + $-xxs); width: 100%; text-align: start; } - .chapter-expansion-toggle:hover { + .chapter-contents-toggle:hover { background-color: rgba(0, 0, 0, 0.06); } } @@ -171,6 +171,7 @@ border-radius: 0 3px 3px 0; padding-inline-end: 0; .content { + width: 100%; padding-top: $-xs; padding-bottom: $-xs; max-width: calc(100% - 20px); @@ -193,9 +194,18 @@ margin-top: -.2rem; margin-inline-start: -1rem; } - [chapter-toggle] { - padding-inline-start: .7rem; - padding-bottom: .2rem; + .chapter-contents-toggle { + display: block; + width: 100%; + text-align: left; + padding: $-xxs $-s ($-xxs * 2) $-s; + border-radius: 0 3px 3px 0; + line-height: 1; + margin-top: -$-xxs; + margin-bottom: -$-xxs; + &:hover { + @include lightDark(background-color, rgba(0, 0, 0, 0.06), rgba(255, 255, 255, 0.06)); + } } .entity-list-item .icon { z-index: 2; @@ -214,16 +224,11 @@ } } -.chapter-child-menu { - ul.sub-menu { - display: none; - padding-inline-start: 0; - position: relative; - margin-bottom: 0; - } - [chapter-toggle].open + .sub-menu { - display: block; - } +.chapter-child-menu ul.sub-menu { + display: none; + padding-inline-start: 0; + position: relative; + margin-bottom: 0; } // Sortable Lists @@ -457,7 +462,7 @@ ul.pagination { } .entity-list-item-children { - padding: $-m; + padding: $-m $-l; > div { overflow: hidden; padding: 0 0 $-xs 0; diff --git a/resources/views/chapters/parts/child-menu.blade.php b/resources/views/chapters/parts/child-menu.blade.php index a00f0f7e1..8fdd09143 100644 --- a/resources/views/chapters/parts/child-menu.blade.php +++ b/resources/views/chapters/parts/child-menu.blade.php @@ -1,9 +1,14 @@ -
    - -