Styled media modal items, image and video

huridocs · Mar 17, 2021 · 61268bd · 61268bd
1 parent 7bb1ad8
commit 61268bd
Show file tree

Hide file tree

Showing 2 changed files with 51 additions and 6 deletions.
diff --git 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
@@ -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>}