Assets 98996 (#88)

* initial grouping functionality * add sorting, label mappings * readd expand/collapse chevrons, add counts * add sort by date in groups * add important links dynamic generation * resolve bug with detailpage link * adjust width on links in deliverables tab * merge 12024 in and adjust width for links * update property name for revised completion date * implement graphql query for status mapping
hlxsites · May 21, 2024 · a439880 · a439880
1 parent e0cbf6f
commit a439880
Show file tree

Hide file tree

Showing 8 changed files with 283 additions and 101 deletions.
diff --git a/blocks/gmo-campaign-details/gmo-campaign-details.css b/blocks/gmo-campaign-details/gmo-campaign-details.css
@@ -33,6 +33,9 @@ body {
     & .h3 {
         font: normal normal bold 14px/21px Adobe Clean;
     }
+    & .subtitle {
+        font: normal normal normal 14px/21px Adobe Clean;
+    }
     & > .main-body-wrapper {
         display: flex;
         flex-direction: column;
@@ -51,6 +54,7 @@ body {
         margin-left: 20px;
         display: flex;
         flex-direction: column;
+        justify-content: space-evenly;
         & .icon-calendar {
             width: 17px;
         }
@@ -68,12 +72,15 @@ body {
     & .header-row2 {
         display: flex;
         align-items: center;
-        margin-top: 20px;
+    }
+    & .header-row3 {
+        display: flex;
+        align-items: center;
     }
     & .campaign-status {
-        background-color: #EEF8F5;
         border-radius: 4px;
-        color: #33AB84;
+        color: black;
+        filter: saturate(0.5);
         font: normal normal normal 12px/15px Adobe Clean;
         height: 24px;
         line-height: 24px;
@@ -265,21 +272,25 @@ body {
             }
         }
     }
-}
-.artifacts-wrapper {
-    display: flex;
-    flex-direction: column;
-    width: 400px;
-    margin-right: 100px;
-    & .links {
+    .links-wrapper {
         display: flex;
-        justify-content: space-between;
-        margin-top: 10px;
-    }
-    & .campaign-link {
-        font: normal normal normal 14px/21px Adobe Clean;
-        letter-spacing: 0px;
-        color: #0D66D0;
+        flex-direction: column;
+        max-width: 90%;
+        margin-right: 100px;
+        margin-top: unset;
+        & .links {
+            display: flex;
+            justify-content: space-between;
+            margin-top: 10px;
+        }
+        & .campaign-link {
+            font: normal normal normal 14px/21px Adobe Clean;
+            letter-spacing: 0px;
+            color: #0D66D0;
+            &:not(:last-child) {
+                margin-right: 30px;
+            }
+        }
     }
 }
 .table-wrapper {
@@ -321,6 +332,18 @@ body {
             text-overflow: ellipsis;
             line-height: 16px;
         }
+        & .date-wrapper {
+            display: flex;
+            flex-direction: column;
+            justify-content:center;
+            & > .completion-date, .revised-date {
+                line-height: 21px;
+            }
+            & > .revised-date {
+                color: #959595;
+                font: italic normal normal 11px/21px Adobe Clean;
+            }
+        }
     }
     &.collapsible.header {
         height: unset;
@@ -360,6 +383,7 @@ body {
         border-top: 2px solid #F4F4F4;
     }
 }
+
 .status-wrapper {
     height: 56px;
     display: flex;
@@ -397,6 +421,22 @@ body {
     }
 
 }
+.header-row3:hover .date-tooltip {
+    visibility: visible;
+    opacity: 1;
+}
+.date-tooltip {
+    background-color: #D3D3D3;
+    border-radius: 2px;
+    visibility: hidden;
+    z-index: 1;
+    position: absolute;
+    text-align: center;
+    width: 100px;
+    padding: 2px 0;
+    font: normal normal normal 12px/17px Adobe Clean;
+    margin-left: 100px;
+}
 .column1 {
     margin-left: 45px;
 }
@@ -416,7 +456,7 @@ body {
     width: 170px;
 }
 .column8 {
-    width: 100px;
+    width: 120px;
 }
 .column9 {
     width: 150px;