From 61268bd7b501f86459bfb94ba72eef2e9e48120d Mon Sep 17 00:00:00 2001
From: vkozinec142 <vkozinec3@gmail.com>
Date: Wed, 17 Mar 2021 11:16:21 +0100
Subject: [PATCH] Styled media modal items, image and video

---
 .../App/scss/modules/_attachments-modal.scss  | 46 +++++++++++++++++--
 app/react/Metadata/components/MediaModal.tsx  | 11 ++++-
 2 files changed, 51 insertions(+), 6 deletions(-)

diff --git a/app/react/App/scss/modules/_attachments-modal.scss b/app/react/App/scss/modules/_attachments-modal.scss
index b434489093..9e604005e8 100644
--- a/app/react/App/scss/modules/_attachments-modal.scss
+++ b/app/react/App/scss/modules/_attachments-modal.scss
@@ -60,6 +60,7 @@
 
   &__content {
     flex: 1;
+    overflow: hidden;
 
     > div {
       display: flex;
@@ -90,9 +91,11 @@
 
   &__tabs-content {
     flex: 1;
+    overflow: auto;
+    overflow-x: hidden;
 
     .tab-content {
-      padding: 24px 0;
+      padding: 24px 0 0 0;
       height: 100%;
 
       &.centered {
@@ -136,11 +139,22 @@
         }
 
         &-item {
-          width: 25%;
-          flex-basis: 25%;
+          width: 100%;
+          flex-basis: 100%;
           margin-bottom: 15px;
           padding-left: 10px;
           padding-right: 10px;
+          cursor: pointer;
+
+          @media (min-width: 768px) {
+            width: 33.3333%;
+            flex-basis: 33.3333%;
+          }
+
+          @media (min-width: 1024px) {
+            width: 25%;
+            flex-basis: 25%;
+          }
         }
 
         &-card {
@@ -149,6 +163,11 @@
           box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.15);
           padding: 6px;
 
+          &.active {
+            border-color: $c-type-9;
+            border-width: 2px;
+          }
+
           &-header {
             h5 {
               margin: 0;
@@ -166,7 +185,7 @@
           }
 
           &-content {
-            padding-top: 100%;
+            padding-top: 85%;
             position: relative;
             overflow: hidden;
 
@@ -182,6 +201,25 @@
                 object-fit: contain;
                 object-position: center;
                 width: 100%;
+                height: 100%;
+                background-color: #fafafa;
+              }
+
+              .video-container {
+                height: 100%;
+
+                > div:first-child {
+                  padding-bottom: initial;
+                  overflow: initial;
+                  height: 100%;
+                  display: flex;
+                  margin-top: 0 !important;
+                  margin-bottom: 0 !important;
+
+                  .react-player {
+                    height: auto !important;
+                  }
+                }
               }
             }
           }
diff --git a/app/react/Metadata/components/MediaModal.tsx b/app/react/Metadata/components/MediaModal.tsx
index a0fbdb5751..3a03bfb139 100644
--- a/app/react/Metadata/components/MediaModal.tsx
+++ b/app/react/Metadata/components/MediaModal.tsx
@@ -56,7 +56,10 @@ export const MediaModalCmp = ({
           </div>
 
           <div className="attachments-modal__tabs-content">
-            <TabContent for="selectFromFiles" className="tab-content">
+            <TabContent
+              for="selectFromFiles"
+              className="tab-content attachments-modal__tabs-content"
+            >
               <div className="media-grid container">
                 <div className="row">
                   {attachments.map((attachment, key) => (
@@ -65,7 +68,11 @@ export const MediaModalCmp = ({
                       key={`attachment_${key}`}
                       onClick={handleAttachmentClick(attachment._id!)}
                     >
-                      <div className="media-grid-card">
+                      <div
+                        className={`${'media-grid-card'} ${
+                          attachment._id === selectedId ? 'active' : ''
+                        }`}
+                      >
                         <div className="media-grid-card-header">
                           <h5>{attachment.originalname}</h5>
                           {!!attachment.size && <span>{filesize(attachment.size)}</span>}