From e3974e64aff0527bf901562bbcdbedd24d004f63 Mon Sep 17 00:00:00 2001 From: Robbie Davis Date: Wed, 13 Jul 2022 17:50:15 -0400 Subject: [PATCH] Miscellaneous styling fixes (#1374) * Fixing up modal and cover selector * adding code for card image * fixing placeholder border * Fixing placeholder issue * Fixing drop down z-index * Updating reading list --- .../edit-series-modal.component.html | 2 +- .../edit-series-modal.component.scss | 4 +- .../card-detail-drawer.component.ts | 1 + .../cover-image-chooser.component.scss | 8 +- .../draggable-ordered-list.component.html | 4 +- .../draggable-ordered-list.component.scss | 82 ++++++++++--------- .../reading-list-detail.component.html | 2 +- .../reading-list-detail.component.scss | 3 + .../src/app/shared/image/image.component.html | 6 +- .../src/app/shared/image/image.component.scss | 4 + UI/Web/src/theme/components/_dropdown.scss | 2 +- UI/Web/src/theme/components/_navbar.scss | 2 +- 12 files changed, 70 insertions(+), 50 deletions(-) diff --git a/UI/Web/src/app/cards/_modals/edit-series-modal/edit-series-modal.component.html b/UI/Web/src/app/cards/_modals/edit-series-modal/edit-series-modal.component.html index d0ac116b5..12df1dd78 100644 --- a/UI/Web/src/app/cards/_modals/edit-series-modal/edit-series-modal.component.html +++ b/UI/Web/src/app/cards/_modals/edit-series-modal/edit-series-modal.component.html @@ -1,4 +1,4 @@ -
+

{{this.series.name}} Details

diff --git a/UI/Web/src/app/cards/_modals/edit-series-modal/edit-series-modal.component.scss b/UI/Web/src/app/cards/_modals/edit-series-modal/edit-series-modal.component.scss index 62a1c2f69..0ca7fc453 100644 --- a/UI/Web/src/app/cards/_modals/edit-series-modal/edit-series-modal.component.scss +++ b/UI/Web/src/app/cards/_modals/edit-series-modal/edit-series-modal.component.scss @@ -1,5 +1,5 @@ .scrollable-modal { - max-height: 90vh; // 600px + max-height: calc(var(--vh) * 100 - 198px); // 600px overflow: auto; } @@ -8,4 +8,4 @@ background-color: var(--primary-color); color: white; } -} \ No newline at end of file +} diff --git a/UI/Web/src/app/cards/card-detail-drawer/card-detail-drawer.component.ts b/UI/Web/src/app/cards/card-detail-drawer/card-detail-drawer.component.ts index 708f3c61b..edbe95aba 100644 --- a/UI/Web/src/app/cards/card-detail-drawer/card-detail-drawer.component.ts +++ b/UI/Web/src/app/cards/card-detail-drawer/card-detail-drawer.component.ts @@ -109,6 +109,7 @@ export class CardDetailDrawerComponent implements OnInit, OnDestroy { } ngOnInit(): void { + this.imageUrls = this.chapters.map(c => this.imageService.getChapterCoverImage(c.id)); this.isChapter = this.utilityService.isChapter(this.data); this.chapter = this.utilityService.isChapter(this.data) ? (this.data as Chapter) : (this.data as Volume).chapters[0]; diff --git a/UI/Web/src/app/cards/cover-image-chooser/cover-image-chooser.component.scss b/UI/Web/src/app/cards/cover-image-chooser/cover-image-chooser.component.scss index 7ee37380c..d631bbdf5 100644 --- a/UI/Web/src/app/cards/cover-image-chooser/cover-image-chooser.component.scss +++ b/UI/Web/src/app/cards/cover-image-chooser/cover-image-chooser.component.scss @@ -8,7 +8,6 @@ $image-width: 160px; } .image-card { - margin: 10px; cursor: pointer; } @@ -18,6 +17,13 @@ $image-width: 160px; outline-offset: -1px; } +.chooser { + display: grid; + grid-template-columns: repeat(auto-fill, 158px); + grid-gap: 0.5rem; + justify-content: space-around; +} + ngx-file-drop ::ng-deep > div { // styling for the outer drop box width: 100%; diff --git a/UI/Web/src/app/reading-list/draggable-ordered-list/draggable-ordered-list.component.html b/UI/Web/src/app/reading-list/draggable-ordered-list/draggable-ordered-list.component.html index c85299988..cfce2cd03 100644 --- a/UI/Web/src/app/reading-list/draggable-ordered-list/draggable-ordered-list.component.html +++ b/UI/Web/src/app/reading-list/draggable-ordered-list/draggable-ordered-list.component.html @@ -1,11 +1,11 @@
-
+
- +
diff --git a/UI/Web/src/app/reading-list/draggable-ordered-list/draggable-ordered-list.component.scss b/UI/Web/src/app/reading-list/draggable-ordered-list/draggable-ordered-list.component.scss index 061a57d97..7a1d96b9a 100644 --- a/UI/Web/src/app/reading-list/draggable-ordered-list/draggable-ordered-list.component.scss +++ b/UI/Web/src/app/reading-list/draggable-ordered-list/draggable-ordered-list.component.scss @@ -5,51 +5,57 @@ display: block; border-radius: 4px; overflow: hidden; - } +} - .example-box { - padding: 20px 10px; - border-bottom: solid 1px #ccc; - display: flex; - flex-direction: row; - box-sizing: border-box; - font-size: 14px; +.example-box { + margin: 5px 0; + //border-bottom: solid 1px #ccc; + display: flex; + flex-direction: row; + box-sizing: border-box; + font-size: 14px; - .drag-handle { - cursor: move; - font-size: 24px; - margin-top: 215%; - } + .drag-handle { + cursor: move; + font-size: 24px; + margin-top: 215%; } +} - .cdk-drag-preview { - box-sizing: border-box; - border-radius: 4px; - box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2), - 0 8px 10px 1px rgba(0, 0, 0, 0.14), - 0 3px 14px 2px rgba(0, 0, 0, 0.12); - } +.cdk-drag-preview { + box-sizing: border-box; + border-radius: 4px; + box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2), + 0 8px 10px 1px rgba(0, 0, 0, 0.14), + 0 3px 14px 2px rgba(0, 0, 0, 0.12); +} - .cdk-drag-placeholder { - opacity: 0; - } +.cdk-drag-placeholder { + opacity: 0; +} - .cdk-drag-animating { - transition: transform 250ms cubic-bezier(0, 0, 0.2, 1); - } +.cdk-drag-animating { + transition: transform 250ms cubic-bezier(0, 0, 0.2, 1); +} - .example-box:last-child { - border: none; - } +.example-box:last-child { + border: none; +} - .example-list.cdk-drop-list-dragging .example-box:not(.cdk-drag-placeholder) { - transition: transform 250ms cubic-bezier(0, 0, 0.2, 1); - } +.example-list.cdk-drop-list-dragging .example-box:not(.cdk-drag-placeholder) { + transition: transform 250ms cubic-bezier(0, 0, 0.2, 1); +} +.example-custom-placeholder { + background: #ccc; + border: dotted 3px #999; + min-height: 60px; + transition: transform 250ms cubic-bezier(0, 0, 0.2, 1); +} - .example-custom-placeholder { - background: #ccc; - border: dotted 3px #999; - min-height: 60px; - transition: transform 250ms cubic-bezier(0, 0, 0.2, 1); - } \ No newline at end of file +.list-container { + background: var(--card-bg-color); + padding: 10px; + border-radius: 5px; + width: 100%; +} diff --git a/UI/Web/src/app/reading-list/reading-list-detail/reading-list-detail.component.html b/UI/Web/src/app/reading-list/reading-list-detail/reading-list-detail.component.html index 90a756780..2651593f0 100644 --- a/UI/Web/src/app/reading-list/reading-list-detail/reading-list-detail.component.html +++ b/UI/Web/src/app/reading-list/reading-list-detail/reading-list-detail.component.html @@ -60,7 +60,7 @@ - diff --git a/UI/Web/src/app/reading-list/reading-list-detail/reading-list-detail.component.scss b/UI/Web/src/app/reading-list/reading-list-detail/reading-list-detail.component.scss index e69de29bb..9129ac012 100644 --- a/UI/Web/src/app/reading-list/reading-list-detail/reading-list-detail.component.scss +++ b/UI/Web/src/app/reading-list/reading-list-detail/reading-list-detail.component.scss @@ -0,0 +1,3 @@ +.content-container { + width: 100%; +} \ No newline at end of file diff --git a/UI/Web/src/app/shared/image/image.component.html b/UI/Web/src/app/shared/image/image.component.html index 5e89b6466..18e452247 100644 --- a/UI/Web/src/app/shared/image/image.component.html +++ b/UI/Web/src/app/shared/image/image.component.html @@ -1,3 +1,3 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/UI/Web/src/app/shared/image/image.component.scss b/UI/Web/src/app/shared/image/image.component.scss index 649a9c1de..1f2b81024 100644 --- a/UI/Web/src/app/shared/image/image.component.scss +++ b/UI/Web/src/app/shared/image/image.component.scss @@ -2,3 +2,7 @@ img { width: 100%; } +.img-placeholder { + background: rgb(44,47,51); + background: radial-gradient(circle, rgba(44,47,51,1) 0%, rgba(34,42,24,1) 37%, rgba(2,0,36,1) 100%); +} diff --git a/UI/Web/src/theme/components/_dropdown.scss b/UI/Web/src/theme/components/_dropdown.scss index 5057ff7f3..424267ae0 100644 --- a/UI/Web/src/theme/components/_dropdown.scss +++ b/UI/Web/src/theme/components/_dropdown.scss @@ -16,5 +16,5 @@ } .dropdown { - //z-index: 1055 !important; // ngb v12 bug: https://github.com/ng-bootstrap/ng-bootstrap/issues/2686 + z-index: 1055 !important; // ngb v12 bug: https://github.com/ng-bootstrap/ng-bootstrap/issues/2686 } \ No newline at end of file diff --git a/UI/Web/src/theme/components/_navbar.scss b/UI/Web/src/theme/components/_navbar.scss index 454155ba1..dd589c8fd 100644 --- a/UI/Web/src/theme/components/_navbar.scss +++ b/UI/Web/src/theme/components/_navbar.scss @@ -1,7 +1,7 @@ .navbar { background-color: var(--navbar-bg-color); color: var(--navbar-text-color); - z-index: 1056; + z-index: 1055; }