Chore/inprove resize styling part 1 (#71)

* Improve styling on window resize * 0.2.3 * remove unused components
digicatapult · Mar 7, 2024 · aa0578a · aa0578a
1 parent 9988303
commit aa0578a
Show file tree

Hide file tree

Showing 14 changed files with 147 additions and 160 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
     "name": "@digicatapult/sqnc-hyproof-client",
-    "version": "0.2.2",
+    "version": "0.2.3",
     "description": "User interface for HyProof",
     "homepage": "https://github.com/digicatapult/sqnc-hyproof-client",
     "main": "src/index.js",

diff --git a/src/App.js b/src/App.js
@@ -76,34 +76,61 @@ export default function App() {
 
   return (
     <QueryClientProvider client={new QueryClient()}>
+      <SidePanel
+        width={400}
+        variant="hyproof"
+        heading="Certificate View"
+        title={persona.name}
+        callback={(e) => setShowSelector(e.isOpen)}
+      >
+        {personas.map((el) => (
+          <SidePanel.Item
+            {...el}
+            key={el.id}
+            active={el.id === current}
+            update={(_, persona) => handlePersonaSwitch(persona)}
+            variant="hyproof"
+          />
+        ))}
+      </SidePanel>
       <FullScreenGrid
         color={persona.background}
         showSelector={showSelector}
         areas={[
-          ['home', 'nav', 'nav'],
-          ['header', 'header', 'sidebar'],
-          ['timeline', 'main', 'sidebar'],
+          ['home', 'nav'],
+          ['header', 'header'],
+          ['timeline', 'main'],
+          ['timeline', 'sidebar'],
+        ]}
+        columns={['minmax(min-content, 1fr)', '2fr']}
+        rows={['78px', '98px', '1fr', 'auto']}
+        byWidth={[
+          {
+            minWidth: 1000,
+            areas: [
+              ['home', 'nav', 'nav'],
+              ['header', 'header', 'sidebar'],
+              ['timeline', 'main', 'sidebar'],
+            ],
+            columns: [
+              'minmax(min-content, 1.5fr)',
+              '4fr',
+              'minmax(min-content, 1.5fr)',
+            ],
+            rows: ['78px', '98px', '1fr'],
+          },
+          {
+            minWidth: 1500,
+            areas: [
+              ['home', 'nav', 'nav'],
+              ['header', 'header', 'sidebar'],
+              ['timeline', 'main', 'sidebar'],
+            ],
+            columns: ['320px', '1fr', '320px'],
+            rows: ['78px', '98px', '1fr'],
+          },
         ]}
-        columns={['auto', '1fr', 'auto']}
-        rows={['78px', '98px', '1fr']}
       >
-        <SidePanel
-          width={400}
-          variant="hyproof"
-          heading="Certificate View"
-          title={persona.name}
-          callback={(e) => setShowSelector(e.isOpen)}
-        >
-          {personas.map((el) => (
-            <SidePanel.Item
-              {...el}
-              key={el.id}
-              active={el.id === current}
-              update={(_, persona) => handlePersonaSwitch(persona)}
-              variant="hyproof"
-            />
-          ))}
-        </SidePanel>
         <Routes />
       </FullScreenGrid>
     </QueryClientProvider>
@@ -117,12 +144,10 @@ const FullScreenGrid = styled(Grid)`
   margin-left: ${({ showSelector }) => (showSelector ? '450px' : '0px')};
   overflow: hidden;
   box-sizing: border-box;
-  background-color: ${({ showSelector, color }) =>
-    showSelector ? color : 'white'};
   transition:
-    background-color ease 0.1s,
     width ease-in-out 0.7s,
-    padding ease-in-out 0.7s,
+    border ease-in-out 0.7s,
     margin-left ease-in-out 0.7s;
-  padding: ${({ showSelector }) => (showSelector ? '20px' : '0px')};
+  border: ${({ showSelector, color }) =>
+    `${showSelector ? '20px' : '0px'} solid ${color}`};
 `
diff --git a/src/pages/CertificateViewer.js b/src/pages/CertificateViewer.js
@@ -217,12 +217,10 @@ export default function CertificateViewer() {
 }
 
 const LeftWrapper = styled(Grid.Panel)`
-  max-width: 400px;
   max-height: 100%;
   padding: 20px 0px;
   overflow: hidden;
   background: #0c3b38;
-  width: 400px;
 `
 
 const MainWrapper = styled.div`
@@ -236,19 +234,17 @@ const MainWrapper = styled.div`
 const Sidebar = styled(Grid.Panel)`
   align-items: center;
   justify-items: center;
-  min-width: 340px;
+
   color: white;
   background: #0c3b38;
 `
 
 const ContainerDiv = styled.div`
   display: grid;
-  height: 100%;
   grid-area: 1 / 1 / -1 / -1;
   background: #228077 url(${BgMoleculesImageSVG}) repeat;
   background-size: 100px;
   padding: 34px;
-  height: 100%;
   align-content: start;
 `
 

diff --git a/src/pages/Error404.js b/src/pages/Error404.js
@@ -36,7 +36,6 @@ const MainWrapper = styled.div`
 
 const Container = styled.div`
   display: grid;
-  height: 100%;
   grid-area: 1 / 1 / -1 / -1;
 `
 

diff --git a/src/pages/components/CertificateActionsButtons.js b/src/pages/components/CertificateActionsButtons.js
@@ -21,43 +21,20 @@ export default function CertificateActionsButtons({
   return (
     <Sidebar area="sidebar">
       <PaddedDiv>
-        <Grid
-          areas={[
-            ['div-left', 'div-right'],
-            ['div-double', 'div-double'],
-          ]}
-          rows={['40px', '60px']}
-          columns={['1fr', '1fr']}
-          gap="20px 10px"
-        >
-          <Grid.Panel area="div-left">
-            <SmallButton
-              variant="roundedPronounced"
-              onClick={handleClickSaveDraft}
-            >
-              Save draft
-            </SmallButton>
-          </Grid.Panel>
-          <Grid.Panel area="div-right">
-            <SmallButton
-              variant="roundedPronounced"
-              onClick={handleCancelDraft}
-            >
-              Cancel
-            </SmallButton>
-          </Grid.Panel>
-          <Grid.Panel area="div-double">
-            <LargeButton
-              disabled={loading || !valid}
-              variant="roundedPronounced"
-            >
-              {loading == false && data == null && <Span>Submit</Span>}
-              {loading == false && data != null && <Span>Submitted</Span>}
-              {loading && <AnimatedSpan>...</AnimatedSpan>}
-              {error && <Span>Error</Span>}
-            </LargeButton>
-          </Grid.Panel>
-        </Grid>
+        <SmallButton variant="roundedPronounced" onClick={handleClickSaveDraft}>
+          Save draft
+        </SmallButton>
+
+        <SmallButton variant="roundedPronounced" onClick={handleCancelDraft}>
+          Cancel
+        </SmallButton>
+
+        <LargeButton disabled={loading || !valid} variant="roundedPronounced">
+          {loading == false && data == null && <Span>Submit</Span>}
+          {loading == false && data != null && <Span>Submitted</Span>}
+          {loading && <AnimatedSpan>...</AnimatedSpan>}
+          {error && <Span>Error</Span>}
+        </LargeButton>
       </PaddedDiv>
     </Sidebar>
   )
@@ -66,41 +43,45 @@ export default function CertificateActionsButtons({
 const Sidebar = styled(Grid.Panel)`
   align-items: center;
   justify-items: center;
-  min-width: 340px;
   color: white;
   background: #0c3b38;
 `
 
 const PaddedDiv = styled.div`
-  padding: 34px 21px;
   width: 100%;
+  display: flex;
+  flex-wrap: wrap;
+  gap: 10px;
+  padding: 34px 21px;
 `
 
 const SmallButton = styled(Button)`
-  width: 100%;
-  min-width: 132px;
-  height: 100% !important;
+  flex: 1 0 110px;
+  min-height: 40px;
+  display: block;
   font-family: Roboto;
   font-style: normal;
   font-weight: 500;
   white-space: nowrap;
   font-size: 15.5px;
   color: #ffffff;
-  border: 1px solid #ffffff !important;
-  background: #124338 !important;
+  border: 1px solid #ffffff;
+  background: #124338;
   &:hover {
     opacity: 0.6;
   }
 `
 
 const LargeButton = styled(SmallButton)`
+  min-width: 100%;
+  min-height: 60px;
   font-size: 21px;
   color: #33e58c;
-  border: 1px solid #2fe181 !important;
-  background: #124338 !important;
+  border: 1px solid #2fe181;
+  background: #124338;
   &:disabled {
     color: #1c774a;
-    border: 1px solid #1c774a !important;
+    border: 1px solid #1c774a;
   }
 `
 

diff --git a/src/pages/components/CertificateCo2Post.js b/src/pages/components/CertificateCo2Post.js
@@ -196,7 +196,6 @@ export default function CertificateCo2Post() {
 }
 
 const LeftWrapper = styled(Grid.Panel)`
-  max-width: 400px;
   max-height: 100%;
   padding: 20px 0px;
   overflow: hidden;
@@ -214,7 +213,6 @@ const MainWrapper = styled.div`
 const Sidebar = styled(Grid.Panel)`
   align-items: center;
   justify-items: center;
-  min-width: 340px;
   color: white;
   background: #0c3b38;
 `

diff --git a/src/pages/components/CertificateForm.js b/src/pages/components/CertificateForm.js
@@ -206,7 +206,6 @@ const Form = styled.form`
 `
 
 const TimelineWrapper = styled(Grid.Panel)`
-  max-width: 400px;
   max-height: 100%;
   padding: 20px 0px;
   overflow: hidden;