DBAS usable on mobile through responsive UI (Only with RIPE removals now)

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/**/*"
   },

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>

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";

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,12 +54,27 @@ 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%;

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%;

client/src/components/HamburgerIcon.vue

@@ -0,0 +1,53 @@
+<template>
+  <svg viewBox="0,0,6,6" height="1em" :stroke="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>
+<script>
+export default {
+  name: "HamburgerIcon",
+  props: {
+    expanded: {
+      type: Boolean,
+      default: false,
+    },
+    stroke: {
+      type: String,
+      default: "black",
+    },
+  },
+  data: () => ({
+    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,
+    },
+  }),
+};
+</script>