update responsivnes (#1000) (#1001)

oacore · Sep 19, 2023 · a0c7d6c · a0c7d6c
1 parent 8683afb
commit a0c7d6c
Show file tree

Hide file tree

Showing 10 changed files with 129 additions and 6 deletions.
diff --git a/components/toggle-panel/styles.module.scss b/components/toggle-panel/styles.module.scss
@@ -9,7 +9,7 @@
   background: #b75400;
   border-radius: 2px;
   padding: 15px 10px;
-  height: 54px;
+  min-height: 54px;
   display: flex;
   align-items: center;
   width: 100%;

diff --git a/design-v2/_variables.scss b/design-v2/_variables.scss
@@ -1,4 +1,5 @@
 $breakpoint-sm: 46rem;
+$breakpoint-md: 48rem;
 $breakpoint-lg: 80rem;
 $status-icon-font-color: var(--white);
 $status-icon-background: #8bc34a;

diff --git a/design-v2/components/membership-table/styles.module.scss b/design-v2/components/membership-table/styles.module.scss
@@ -1,3 +1,4 @@
+@import 'design-v2/variables';
 $table-border: 1px solid var(--gray-400);
 $checkbox-success-color: #8bc34a;
 $checkbox-danger-color: rgba(255, 95, 82, 1);
@@ -66,10 +67,17 @@ $card-header-color: #fef5ef;
     padding: 0.5rem;
     font-weight: 600;
     background-color: var(--gray-100);
+    @media (max-width: $breakpoint-sm) {
+      font-size: 10px;
+    }
   }
   &-padding {
     padding: 1rem;
     font-weight: 400;
+    @media (max-width: $breakpoint-sm) {
+      padding: 6px;
+      width: 85px;
+    }
   }
   &-description {
     padding: 1.5rem;
@@ -85,7 +93,9 @@ $card-header-color: #fef5ef;
   font-weight: 400;
   text-align: center;
   background-color: var(--gray-100);
-
+  @media (max-width: $breakpoint-sm) {
+    padding: 2px;
+  }
   &-active {
     background-color: #fae2d2;
   }
@@ -96,6 +106,9 @@ $card-header-color: #fef5ef;
     color: var(--primary);
     font-weight: 400;
     font-size: 0.9rem;
+    @media (max-width: $breakpoint-sm) {
+      font-size: 10px;
+    }
   }
 
   &-status {
@@ -120,12 +133,18 @@ $card-header-color: #fef5ef;
   }
   &-title {
     font-size: 1.2rem;
+    @media (max-width: $breakpoint-sm) {
+      font-size: 10px;
+    }
     a {
       color: var(--black);
       text-decoration: underline;
     }
     &-details {
       margin-bottom: 1rem;
+      @media (max-width: $breakpoint-sm) {
+        margin-bottom: 5px;
+      }
     }
   }
 }
@@ -151,6 +170,16 @@ $card-header-color: #fef5ef;
     border: solid var(--white);
     border-width: 0 2px 2px 0;
     transform: rotate(45deg);
+    @media (max-width: $breakpoint-sm) {
+      width: 6px;
+      height: 10px;
+      left: 6px;
+      top: 2px;
+    }
+  }
+  @media (max-width: $breakpoint-sm) {
+    width: 1rem;
+    height: 1rem;
   }
 }
 
@@ -174,18 +203,33 @@ $card-header-color: #fef5ef;
     height: 2px;
     background-color: white;
     top: 11px;
+    @media (max-width: $breakpoint-sm) {
+      width: 10px;
+      height: 2px;
+      top: 7px;
+    }
   }
   &::before {
     -webkit-transform: rotate(45deg);
     -moz-transform: rotate(45deg);
     transform: rotate(45deg);
     left: 2px;
+    @media (max-width: $breakpoint-sm) {
+      left: 3px;
+    }
   }
   &::after {
     -webkit-transform: rotate(-45deg);
     -moz-transform: rotate(-45deg);
     transform: rotate(-45deg);
     right: 2px;
+    @media (max-width: $breakpoint-sm) {
+      left: 3px;
+    }
+  }
+  @media (max-width: $breakpoint-sm) {
+    width: 1rem;
+    height: 1rem;
   }
 }
 

diff --git a/pages/about/about.module.scss b/pages/about/about.module.scss
@@ -1,4 +1,5 @@
 @import '~components/bootstrap/core';
+@import 'design-v2/variables';
 
 .related {
   @include section-skew-left($gray-100);
@@ -18,8 +19,14 @@
     display: flex;
     justify-content: center;
     align-items: center;
+    @media (max-width: $breakpoint-sm) {
+      width: 320px;
+    }
     .governance-image {
       margin: 42px 0 32px 0;
+      @media (max-width: $breakpoint-sm) {
+        width: 100%;
+      }
     }
   }
 }
@@ -199,12 +206,18 @@
 .researchSection {
   padding: 0 0 44px 0;
   grid-template-columns: 1fr 100% 1fr;
+  .research-item {
+    width: 100%;
+    max-width: unset;
+  }
   .always-open {
     margin-top: 24px;
     display: flex;
     justify-content: space-between;
-    flex-wrap: wrap;
     gap: 20px;
+    @media (max-width: $breakpoint-sm) {
+      flex-wrap: wrap;
+    }
   }
   .toggle-panel-title {
     font-style: normal;
@@ -290,6 +303,9 @@
 
 .toggle-item-small {
   width: 48%;
+  @media (max-width: $breakpoint-sm) {
+    width: 100%;
+  }
 }
 
 .footer-wrapper {
@@ -299,7 +315,15 @@
   background: #f5f5f5;
   padding: 24px;
   margin-top: 24px;
+  width: 100%;
+  max-width: unset;
+  @media (max-width: $breakpoint-sm) {
+    flex-wrap: wrap;
+  }
   .footer-text {
     margin-bottom: 0;
+    @media (max-width: $breakpoint-sm) {
+      margin-bottom: 0.5rem;
+    }
   }
 }
diff --git a/pages/about/research-outputs.jsx b/pages/about/research-outputs.jsx
@@ -118,7 +118,7 @@ const ResearchOutputsSection = ({
   ...restProps
 }) => (
   <Section id={id} {...restProps} className={styles.researchSection}>
-    <Content>
+    <Content className={styles.researchItem}>
       <TogglePanel
         id={title}
         title={title}

diff --git a/pages/governance/community.module.scss b/pages/governance/community.module.scss
@@ -18,6 +18,10 @@
   display: flex;
   align-items: center;
   justify-content: center;
+  @media (max-width: $breakpoint-sm) {
+    width: 100%;
+    flex: unset;
+  }
 }
 
 .header {
@@ -44,5 +48,8 @@
         margin-bottom: 5px;
       }
     }
+    @media (max-width: $breakpoint-lg) {
+      margin-left: 1.5rem;
+    }
   }
 }
diff --git a/templates/governance/advisory/advisory.module.scss b/templates/governance/advisory/advisory.module.scss
@@ -1,3 +1,4 @@
+@import 'design-v2/variables';
 .organisation-wrapper {
   display: flex;
   align-items: center;
@@ -11,3 +12,16 @@
     justify-content: center;
   }
 }
+
+.supporters {
+  @media (max-width: $breakpoint-sm) {
+    td {
+      font-size: 10px;
+    }
+    th {
+      button {
+        font-size: 10px;
+      }
+    }
+  }
+}
diff --git a/templates/governance/supporters/supporters.module.scss b/templates/governance/supporters/supporters.module.scss
@@ -1,3 +1,4 @@
+@import 'design-v2/variables';
 $grid-responsive-for-sections: repeat(auto-fit, minmax(300px, 1fr));
 $grid-responsive-for-items: repeat(auto-fit, minmax(500px, 1fr));
 
@@ -46,6 +47,9 @@ $grid-responsive-for-items: repeat(auto-fit, minmax(500px, 1fr));
   grid-gap: 3rem;
   grid-template-columns: $grid-responsive-for-items;
   margin-top: 48px;
+  @media (max-width: $breakpoint-sm) {
+    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
+  }
   .how-it-works-description {
     background: #f5f5f5;
     padding: 16px;
@@ -122,6 +126,20 @@ $grid-responsive-for-items: repeat(auto-fit, minmax(500px, 1fr));
           box-shadow: inset 0px 0px 2px rgba(0, 0, 0, 0.1),
             inset 0px 1px 2px rgba(0, 0, 0, 0.05);
         }
+        @media (max-width: $breakpoint-sm) {
+          width: 40px;
+          height: 40px;
+        }
+      }
+      td {
+        @media (max-width: $breakpoint-sm) {
+          padding: 8px;
+        }
+      }
+    }
+    td {
+      @media (max-width: $breakpoint-sm) {
+        padding: 8px;
       }
     }
     &:hover {

diff --git a/templates/sponsorships/index.jsx b/templates/sponsorships/index.jsx
@@ -46,7 +46,7 @@ const renderDiscountsRows = () =>
   ))
 
 const SponsorshipPageTemplate = ({ data }) => (
-  <Layout>
+  <Layout className={styles.sponsorshipMainWrapper}>
     <Section id="metadata" className={styles.header}>
       <div>
         <h2 className={styles.title}>{data.header.title}</h2>

diff --git a/templates/sponsorships/styles.module.scss b/templates/sponsorships/styles.module.scss
@@ -105,7 +105,6 @@ $grid-responsive-for-cards: repeat(auto-fit, minmax(200px, 1fr));
 
 .itemGroup {
   display: flex;
-  flex-wrap: wrap;
   gap: 0.5rem;
   .groupItem {
     flex: 1;
@@ -122,6 +121,10 @@ $grid-responsive-for-cards: repeat(auto-fit, minmax(200px, 1fr));
       flex: auto;
     }
   }
+  @media (max-width: $breakpoint-md) {
+    flex-wrap: wrap;
+    margin-top: 1rem;
+  }
 }
 
 .table {
@@ -140,3 +143,15 @@ $grid-responsive-for-cards: repeat(auto-fit, minmax(200px, 1fr));
 .discount-section {
   padding: 6px 0 54px 0;
 }
+
+.sponsorship-main-wrapper {
+  .logo-container,
+  .image-wrapper {
+    @media (max-width: $breakpoint-sm) {
+      width: 320px;
+      img {
+        width: 100%;
+      }
+    }
+  }
+}