[TECH-1858] Make DBAS responsiveness branch without RIPE removals (#23)

Same as #22, just without the ripe specific removals --------- Co-authored-by: Alexander Ibsen <[email protected]>
aion-dk · May 23, 2023 · 4180491 · 4180491
1 parent 253fe9e
commit 4180491
Show file tree

Hide file tree

Showing 21 changed files with 322 additions and 121 deletions.
diff --git a/client/e2e/locales.spec.ts b/client/e2e/locales.spec.ts
@@ -29,7 +29,7 @@ test("changing locale", async ({ page }) => {
 
   await page.goto("/en/us3");
   await page.locator(".Header__Locales").selectOption("es");
-  await page.getByRole("menuitem", { name: "Información" }).click();
+  await page.getByRole("menuitem", { name: "Registros" }).click();
   await page.locator(".Header__Locales").selectOption("en");
-  await page.getByRole("menuitem", { name: "About" }).click();
+  await page.getByRole("menuitem", { name: "Logs" }).click();
 });
diff --git a/client/e2e/logs.spec.ts b/client/e2e/logs.spec.ts
@@ -45,7 +45,7 @@ test("downloading logs", async ({ page }) => {
   await page.getByRole("menuitem", { name: "Logs" }).click();
   const downloadPromise = page.waitForEvent("download");
   await page
-    .getByRole("link", {
+    .getByRole("button", {
       name: "Download the full election activity log (json)",
     })
     .click();

diff --git a/client/package.json b/client/package.json
@@ -13,8 +13,8 @@
     "test:e2e:ci": "playwright test --output test-results/artifacts",
     "build-only": "vite build",
     "type-check": "vue-tsc --noEmit -p tsconfig.vitest.json --composite false",
-    "prettier:ci": "npx prettier -c  ./",
-    "prettier": " npx prettier -w  ./",
+    "prettier:ci": "npx prettier -c ./",
+    "prettier": "npx prettier -w ./",
     "lint": "eslint ./src/**/* --fix",
     "lint:ci": "eslint ./src/**/*"
   },

diff --git a/client/public/av-logo-blue.png b/client/public/av-logo-blue.png
diff --git a/client/public/av-logo-horizontal.png b/client/public/av-logo-horizontal.png
diff --git a/client/public/favicon.ico b/client/public/favicon.ico
diff --git a/client/public/favicon.svg b/client/public/favicon.svg
diff --git a/client/src/App.vue b/client/src/App.vue
@@ -148,20 +148,29 @@ const setTheme = async (conferenceClient: any) => {
 </template>
 
 <style type="text/css">
+:root {
+  --av-padding: 2.5rem;
+  --av-margin-bottom: 2.5rem;
+}
+
 body {
   padding: 0;
   margin: 0;
 }
 
+.AVCard--default {
+  padding: var(--av-padding) !important;
+}
+
 .DBAS {
   height: 100vh;
+  height: 100dvh;
   display: flex;
   flex-direction: column;
 }
 
 .DBAS__Content {
-  height: calc(100vh - 120px);
-  margin-top: 80px;
+  flex-grow: 1;
   overflow-y: scroll;
 }
 
@@ -172,7 +181,7 @@ body {
 }
 
 .popper-content-wrapper {
-  max-width: 400px;
+  max-width: calc(min(400px, 90vw));
   --vue-popper-bg: #000;
   --vue-popper-padding: 6px;
   --vue-popper-text-color: #fff;
@@ -191,4 +200,19 @@ body {
 .DBAS_SkipToContentLink:focus {
   margin-top: 100px;
 }
+
+@media (max-width: 992px) {
+  :root {
+    --av-padding: 1.5rem;
+    --av-margin-bottom: 1.5rem;
+  }
+
+  .DBAS__InnerContent {
+    width: 90vw;
+  }
+
+  .AVCard {
+    padding: var(--av-padding) !important;
+  }
+}
 </style>
diff --git a/client/src/components/BallotActivityList.vue b/client/src/components/BallotActivityList.vue
@@ -46,6 +46,11 @@ defineProps({
   display: flex;
   font-size: 14px;
 }
+@media (max-width: 992px) {
+  .BallotActivitiesList__ColumnDescriptions {
+    display: none;
+  }
+}
 
 .BallotActivitiesList__ColumnDescriptions--time {
   width: 150px;

diff --git a/client/src/components/CompactHeader.vue b/client/src/components/CompactHeader.vue
@@ -29,7 +29,7 @@ const area = computed(() =>
 
 <style type="text/css" scoped>
 .CompactHeader {
-  margin: 47px 0;
+  margin: var(--av-margin-bottom) 0;
   display: flex;
   align-items: center;
   font-family: "Open Sans";

diff --git a/client/src/components/ExpandableSection.vue b/client/src/components/ExpandableSection.vue
@@ -23,8 +23,9 @@ function toggle() {
 
 <template>
   <div
+    @click="toggle"
+    class="ExpandableSection"
     :class="{
-      ExpandableSection: true,
       ['ExpandableSection--expanded']: _expanded,
     }"
   >
@@ -36,11 +37,7 @@ function toggle() {
       <slot name="expanded"></slot>
     </div>
 
-    <button
-      class="ExpandableSection__Expander"
-      @click="toggle"
-      :aria-label="_label"
-    >
+    <button class="ExpandableSection__Expander" :aria-label="_label">
       <font-awesome-icon v-if="_expanded" icon="fa-solid fa-minus" />
 
       <font-awesome-icon v-else icon="fa-solid fa-plus" />
@@ -57,20 +54,34 @@ function toggle() {
   margin-bottom: 20px;
   flex-direction: column;
   position: relative;
+  cursor: pointer;
+}
+
+.ExpandableSection:hover,
+.ExpandableSection:focus-within {
+  background-color: rgba(0, 0, 0, 10%);
+}
+.ExpandableSection:focus-within {
+  outline: #317be7 2px solid;
 }
 
 .ExpandableSection__Line {
   display: flex;
 }
 
+@media (max-width: 992px) {
+  .ExpandableSection__Line {
+    flex-direction: column;
+  }
+}
+
 .ExpandableSection__Expander {
   background-color: #343a40;
   border-radius: 100%;
-  height: 25px;
-  width: 25px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
+  height: 24px;
+  width: 24px;
+  display: grid;
+  place-content: center;
   position: absolute;
   top: 16px;
   right: 16px;

diff --git a/client/src/components/Footer.vue b/client/src/components/Footer.vue
@@ -4,7 +4,7 @@
       <span class="Footer__Text">Technology by</span>
       <img
         class="Footer__Image"
-        src="https://s3-alpha-sig.figma.com/img/3286/65ed/aba97ebfe8b64e1207282fe003f1931f?Expires=1679875200&Signature=Xo9hK~xacO6wIPt-nnpcywi7cskam~S-jHxkemuQRicUndLmNuUAx0ZO-afnoaLq8KOaYZMSsZ16Aoc~vYJvu6NYeB~oVogr4Vv7hqiEieEjhjxpCFm6l~QGYPveJO8zXS3VDJWw7lg0eWP4mf5Ugci8eqd646EMy~l9j-l2W4eKF414DhvxKNKlD5daqMleAs~4PZAUxJCy0~nTo0nL3b4RCFoZ6AobjiXbCNMZZtPR01fei9A~ckeb4HhrN6GN7sAZltDf71v~aeOfvCvODlMxU1t8drd75pCm0hDDt~LmDkp-CTDeE5SCDNApHS~MQd0SQFBCc6getEuwXkqUIA__&Key-Pair-Id=APKAQ4GOSFWCVNEHN3O4"
+        src="/av-logo-horizontal.png"
         alt="Assembly Voting Logo"
       />
     </a>
@@ -13,6 +13,7 @@
 
 <style type="text/css" scoped>
 .Footer {
+  box-sizing: border-box;
   background-color: #fff;
   font-family: "Open Sans";
   display: flex;
@@ -22,7 +23,6 @@
   padding: 10px;
   font-weight: 400;
   box-shadow: 0 0 15px rgba(0, 0, 0, 0.15);
-  position: fixed;
   bottom: 0;
   left: 0;
   width: 100%;

diff --git a/client/src/components/HamburgerIcon.vue b/client/src/components/HamburgerIcon.vue
@@ -0,0 +1,51 @@
+<script lang="ts" setup>
+const lines = {
+  l1x1: 1,
+  l1y1: 1,
+  l1x2: 5,
+  l1y2: 1,
+  l2x1: 1,
+  l2y1: 3,
+  l2x2: 5,
+  l2y2: 3,
+  l3x1: 1,
+  l3y1: 5,
+  l3x2: 5,
+  l3y2: 5,
+};
+
+const props = defineProps({
+  stroke: {
+    type: String,
+    default: "black",
+  },
+});
+</script>
+
+<template>
+  <svg
+    viewBox="0,0,6,6"
+    height="1em"
+    :stroke="props.stroke"
+    stroke-linecap="square"
+  >
+    <line
+      :x1="lines.l1x1"
+      :y1="lines.l1y1"
+      :x2="lines.l1x2"
+      :y2="lines.l1y2"
+    ></line>
+    <line
+      :x1="lines.l2x1"
+      :y1="lines.l2y1"
+      :x2="lines.l2x2"
+      :y2="lines.l2y2"
+    ></line>
+    <line
+      :x1="lines.l3x1"
+      :y1="lines.l3y1"
+      :x2="lines.l3x2"
+      :y2="lines.l3y2"
+    ></line>
+  </svg>
+</template>