Fix issue with style in screenshots view (#1598)

Signed-off-by: Cintia Sanchez Garcia <[email protected]>
artifacthub · Oct 6, 2021 · 80eec09 · 80eec09
1 parent 4ae09dd
commit 80eec09
Show file tree

Hide file tree

Showing 2 changed files with 31 additions and 17 deletions.
diff --git a/web/src/layout/package/screenshots/Modal.module.css b/web/src/layout/package/screenshots/Modal.module.css
@@ -15,8 +15,11 @@
 }
 
 .image {
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  position: relative;
   border: 3px solid var(--color-black-90);
-  object-fit: contain; /* Avoid shrink */
 }
 
 .externalLink {
@@ -25,8 +28,13 @@
   top: -1px;
 }
 
-.dotBtn:not(.disabled) {
+.disabledDotBtn {
   color: #fcfcfc !important;
+  opacity: 1 !important;
+}
+
+.dotBtn {
+  color: #6c757d !important;
 }
 
 .disabled {

diff --git a/web/src/layout/package/screenshots/Modal.tsx b/web/src/layout/package/screenshots/Modal.tsx
@@ -127,18 +127,20 @@ const ScreenshotsModal = (props: Props) => {
                           { 'pb-3': isUndefined(props.screenshots[activeScreenshot].title) }
                         )}
                       >
-                        <img
-                          ref={img}
-                          src={props.screenshots[activeScreenshot].url}
-                          alt={`Screenshot: ${props.screenshots[activeScreenshot].title}`}
-                          className={classnames('mh-100 mw-100', styles.image)}
-                          onLoad={() => setOnLoadedImage(true)}
-                          onError={() => {
-                            setOnLoadedImage(true);
-                            setError(true);
-                          }}
-                          aria-hidden="true"
-                        />
+                        <div className="h-100 w-100 position-relative">
+                          <img
+                            ref={img}
+                            src={props.screenshots[activeScreenshot].url}
+                            alt={`Screenshot: ${props.screenshots[activeScreenshot].title}`}
+                            className={classnames('mh-100 mw-100', styles.image)}
+                            onLoad={() => setOnLoadedImage(true)}
+                            onError={() => {
+                              setOnLoadedImage(true);
+                              setError(true);
+                            }}
+                            aria-hidden="true"
+                          />
+                        </div>
                       </div>
 
                       {!isUndefined(props.screenshots[activeScreenshot].title) && (
@@ -169,9 +171,13 @@ const ScreenshotsModal = (props: Props) => {
             {Array.from(Array(props.screenshots.length).keys()).map((idx: number) => (
               <button
                 key={`botBtn_${idx}`}
-                className={classnames('btn btn-link px-1', styles.dotBtn, {
-                  [`disabled ${styles.disabled}`]: idx === activeScreenshot,
-                })}
+                className={classnames(
+                  'btn btn-link px-1',
+                  { [styles.dotBtn]: idx !== activeScreenshot },
+                  {
+                    [`disabled ${styles.disabledDotBtn}`]: idx === activeScreenshot,
+                  }
+                )}
                 onClick={() => onChangeActiveScreenshot(idx)}
                 disabled={idx === activeScreenshot}
               >