Fix/hotfixes (#27)

* added live-vote visuals

* made signUp container on profile fit

* changed capacity to 50 for workshops

* made nav turn to burger sooner

Author: pavleerg

assets/images/page/live-vote/visual-left.png

@@ -72,7 +72,7 @@ export const getParticipantCapacityFor =
   (eventType: EventType) => {
     switch (eventType) {
       case EventType.workshop:
-        return 30;
+        return 50;
       case EventType.talk:
       case EventType.panel:
         return 50;

assets/images/page/live-vote/visual-right.png

@@ -39,7 +39,7 @@
       <div
         :class="$style.layoutTopbarRight"
       >
-        <ul class="hidden lg:flex">
+        <ul class="hidden xl:flex">
           <li
             v-for="page in pages"
             :key="`top-${page.name}`"
@@ -77,7 +77,7 @@
         </ul>
         <p-button
           :class="$style.sidebarBtn"
-          class="lg:hidden p-button-text"
+          class="xl:hidden p-button-text"
           type="button"
           @click="sidebarOpen = true"
         >

backend/app/graphql/helpers/event-status.ts

@@ -2,6 +2,7 @@
   <div class="relative">
     <div
       :class="$style.container"
+      class="relative"
       :style="{
         'grid-template-columns': `repeat(${totalVotes}, minmax(0, 1fr))`,
       }"
@@ -16,6 +17,21 @@
         }"
         v-text="`${Math.round(option.voteCount / totalVotes * 100)}%`"
       />
+
+      <div class="absolute" style="height: 50%; width: 50%; top: 0;">
+        <app-img
+          :src="VisualLeft"
+          alt="Contact"
+          contain
+        />
+      </div>
+      <div class="absolute" style="height: 35%; width: 25%; bottom: 0; right: 0;">
+        <app-img
+          :src="VisualRight"
+          alt="Contact"
+          contain
+        />
+      </div>
     </div>
     <div :class="$style.qrContainer">
       <div>
@@ -36,6 +52,9 @@
     useSeasonsStore,
   } from "~/store/seasons";
 
+  import VisualLeft from "~/assets/images/page/live-vote/visual-left.png";
+  import VisualRight from "~/assets/images/page/live-vote/visual-right.png";
+
   definePageMeta({
     layout: "empty",
   });
@@ -85,7 +104,8 @@
 
   .container {
     display: grid;
-    min-height: 100vh;
+    min-height: 70vh;
+    background-color: $fer-black;
   }
 
   .result {
@@ -95,6 +115,7 @@
     justify-content: center;
     font-size: max(4.5rem, 8vw);
     text-shadow: 1px 1px 4px $fer-black;
+    max-height: 70vh;
 
     &[data-option="for"] {
       background-color: $fer-yellow;
@@ -107,10 +128,10 @@
 
   .qrContainer {
     position: absolute;
-    bottom: 0;
+    top: 0;
     right: 0;
     left: 0;
-    height: 40vh;
+    height: 30vh;
     display: flex;
 
     > div {

components/nav/AppHeader.vue

@@ -72,7 +72,7 @@
 
         <template v-if="isSignUpPossible">
           <div :class="[$style.item, $style.signUp]">
-            <div :class="$style.itemContent">
+            <div :class="$style.itemContent" style="flex: 1;">
               <h2 :class="$style.itemHeader">
                 <translated-text trans-key="profile.events.sign-up" />
               </h2>
@@ -937,6 +937,8 @@
     &.signUp {
       min-height: fit-content;
       grid-column: span 1;
+      display: flex;
+      flex-direction: column;
 
       @media screen and (width <= 1500px) {
         grid-column: span var(--item-columns);