adjust scss for demo homepage

empirical-org · Dec 10, 2024 · 3f76dd9 · 3f76dd9
1 parent c06bdb9
commit 3f76dd9
Show file tree

Hide file tree

Showing 4 changed files with 44 additions and 3 deletions.
diff --git a/services/QuillLMS/app/assets/stylesheets/pages/premium_hub/overview.scss b/services/QuillLMS/app/assets/stylesheets/pages/premium_hub/overview.scss
@@ -166,7 +166,7 @@
     display: flex;
     flex-direction: column;
     justify-content: space-between;
-    height: 184px;
+    min-height: 184px;
     &.new {
       border: 1px solid $quill-maroon-10;
       background: $quill-maroon-1;
@@ -221,4 +221,42 @@
       margin-bottom: 24px;
     }
   }
+
+  @media (max-width: 750px) {
+    .integrations, .premium-reports, .account-management {
+      .overview-section-content {
+        display: flex;
+        flex-wrap: wrap;
+        gap: 16px;
+      }
+    }
+    .tile {
+      width: 100%;
+    }
+    .professional-development {
+      .photos {
+        display: none;
+      }
+      .section-subheader {
+        align-items: flex-start;
+      }
+    }
+  }
+
+  @media (max-width: 500px) {
+    .overview-section-wrapper h2 {
+      align-items: flex-start;
+      img {
+        margin-top: 4px;
+      }
+    }
+    .snapshot-section.highlights .counts {
+      display: flex;
+      flex-direction: column;
+    }
+    .professional-development .buttons {
+      flex-direction: column;
+      gap: 8px;
+    }
+  }
 }
diff --git a/services/QuillLMS/app/assets/stylesheets/pages/premium_hub/premium-hub.scss b/services/QuillLMS/app/assets/stylesheets/pages/premium_hub/premium-hub.scss
@@ -2,6 +2,7 @@
 
   .banner-container {
     max-width: 1200px;
+    width: calc(100% - 32px);
     margin: 0 auto;
     margin-top: 32px;
     margin-bottom: 32px;

diff --git a/services/QuillLMS/app/assets/stylesheets/pages/premium_hub/snapshots.scss b/services/QuillLMS/app/assets/stylesheets/pages/premium_hub/snapshots.scss
@@ -67,15 +67,15 @@
       }
       &.small {
         padding: 16px;
-        height: 133px;
+        min-height: 133px;
         .snapshot-label {
           font-size: 14px;
           line-height: 18px;
         }
       }
       &.medium {
         padding: 32px;
-        height: 159px;
+        min-height: 159px;
         .snapshot-label {
           font-size: 16px;
           line-height: 21px;

diff --git a/services/QuillLMS/client/app/bundles/Shared/styles/banner.scss b/services/QuillLMS/client/app/bundles/Shared/styles/banner.scss
@@ -4,6 +4,8 @@
   padding: 20px;
   border-radius: 8px;
   position: relative;
+  gap: 16px;
+  text-align: left;
   .left-side-container {
     .upper-section {
       display: flex;