Fixing series card overlay

Kareadita · Aug 16, 2024 · 741fd9c · 741fd9c
1 parent 95d5626
commit 741fd9c
Show file tree

Hide file tree

Showing 3 changed files with 7 additions and 7 deletions.
diff --git a/UI/Web/src/_series-detail-common.scss b/UI/Web/src/_series-detail-common.scss
@@ -6,6 +6,8 @@
 
 .image-container {
   align-self: flex-start;
+  max-height: 400px;
+  max-width: 280px;
 }
 
 .subtitle {
@@ -39,11 +41,9 @@
 }
 
 .overlay-information {
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 350px;
+  position: relative;
+  top: -404px;
+  height: 364px;
   transition: all 0.2s;
   border-top-left-radius: 4px;
   border-top-right-radius: 4px;

diff --git a/UI/Web/src/app/chapter-detail/chapter-detail.component.html b/UI/Web/src/app/chapter-detail/chapter-detail.component.html
@@ -6,7 +6,7 @@
       <div class="row mb-0 mb-xl-3 info-container">
         <div class="image-container col-5 col-sm-6 col-md-5 col-lg-5 col-xl-2 col-xxl-2 col-xxxl-2 d-none d-sm-block mb-3 position-relative">
 
-          <app-image [styles]="{'object-fit': 'contain', 'background': 'none', 'height': '350px', 'max-height': '350px'}"  [imageUrl]="coverImage"></app-image>
+          <app-image [styles]="{'object-fit': 'contain', 'background': 'none', 'max-height': '400px'}"  [imageUrl]="coverImage"></app-image>
             @if (chapter.pagesRead < chapter.pages && hasReadingProgress) {
               <div class="progress-banner" ngbTooltip="{{(chapter.pagesRead / chapter.pages) * 100 | number:'1.0-1'}}%">
                 <ngb-progressbar type="primary" [value]="chapter.pagesRead" [max]="chapter.pages" [showValue]="true"></ngb-progressbar>

diff --git a/UI/Web/src/app/series-detail/_components/series-detail/series-detail.component.html b/UI/Web/src/app/series-detail/_components/series-detail/series-detail.component.html
@@ -6,7 +6,7 @@
       <div class="row mb-0 mb-xl-3 info-container">
         <div class="image-container col-5 col-sm-6 col-md-5 col-lg-5 col-xl-2 col-xxl-2 col-xxxl-2 d-none d-sm-block mb-3 position-relative">
 
-          <app-image [styles]="{'object-fit': 'contain', 'background': 'none', 'height': '350px', 'max-height': '350px'}"  [imageUrl]="seriesImage"></app-image>
+          <app-image [styles]="{'object-fit': 'contain', 'background': 'none', 'max-height': '400px'}"  [imageUrl]="seriesImage"></app-image>
           @if (series.pagesRead < series.pages && hasReadingProgress) {
             <div class="progress-banner" ngbTooltip="{{(series.pagesRead / series.pages) * 100 | number:'1.0-1'}}%">
               <ngb-progressbar type="primary" [value]="series.pagesRead" [max]="series.pages" [showValue]="true"></ngb-progressbar>