#74 (style) - Add switch list mode speaker list

voxxrin · Aug 27, 2024 · 16a1b67 · 16a1b67
1 parent 2356ae5
commit 16a1b67
Show file tree

Hide file tree

Showing 9 changed files with 61 additions and 22 deletions.
diff --git a/mobile/src/components/speaker-card/SpeakerCard.vue b/mobile/src/components/speaker-card/SpeakerCard.vue
@@ -163,11 +163,11 @@
   &._has-liked {
     &:before {
       width: 40%;
-      height: 70%;
+      height: 50%;
       right: 0;
       bottom: 0;
       transform: scale(1);
-      background: linear-gradient(331deg, rgba(var(--voxxrin-event-theme-colors-primary-rgb), 0.6) 30%, rgba(var(--voxxrin-event-theme-colors-primary-rgb), 0.6) 80%);
+      background: linear-gradient(331deg, rgba(var(--voxxrin-event-theme-colors-primary-rgb), 0.4) 30%, rgba(var(--voxxrin-event-theme-colors-primary-rgb), 0.4) 80%);
       opacity: 1;
       filter: blur(32px);
       animation: scale-in-center 0.1s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
@@ -183,7 +183,7 @@
       background-position: right;
       background-size: cover;
       transform: scale(1);
-      opacity: 0.5;
+      opacity: 1;
       mix-blend-mode: overlay;
       animation: scale-in-center 0.1s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
 

diff --git a/mobile/src/components/speaker-card/SpeakerCompactCard.vue b/mobile/src/components/speaker-card/SpeakerCompactCard.vue
@@ -257,6 +257,12 @@
   border: 1px solid var(--app-primary);
   background-color: var(--app-background);
 
+  @media (prefers-color-scheme: dark) {
+    color: var(--app-white);
+    border: 1px solid var(--app-white);
+    background-color: transparent;
+  }
+
   &-nb {
     display: flex;
     align-items: center;
@@ -267,6 +273,11 @@
     border-radius: 22px;
     background-color: var(--app-primary-shade);
     color: var(--app-white);
+
+    @media (prefers-color-scheme: dark) {
+      border-right: 1px solid var(--app-white);
+      background-color: var(--app-medium--contrast);
+    }
   }
 }
 </style>
diff --git a/mobile/src/i18n/i18n-types.ts b/mobile/src/i18n/i18n-types.ts
@@ -203,14 +203,6 @@ type RootTranslation = {
 	 * Speakers
 	 */
 	Speakers: string
-	/**
-	 * Like speaker
-	 */
-	Like_Speaker: string
-	/**
-	 * See the speaker's page
-	 */
-	View_Profil_Speaker: string
 	/**
 	 * Welcome to
 	 */
@@ -778,14 +770,6 @@ export type TranslationFunctions = {
 	 * Speakers
 	 */
 	Speakers: () => LocalizedString
-	/**
-	 * Like speaker
-	 */
-	Like_Speaker: () => LocalizedString
-	/**
-	 * See the speaker's page
-	 */
-	View_Profil_Speaker: () => LocalizedString
 	/**
 	 * Welcome to
 	 */

diff --git a/mobile/src/styles/components/_listModeSwitch.scss b/mobile/src/styles/components/_listModeSwitch.scss
@@ -0,0 +1,32 @@
+.listModesSwitch {
+  background-color: var(--app-background);
+  border-radius: 44px;
+  border: 1px solid var(--app-beige-line);
+
+  &-button {
+    height: 38px;
+    width: 38px;
+    margin: 0;
+    --background: transparent;
+    --color: var(--app-primary);
+    --padding-start: 0;
+    --padding-end: 0;
+
+    @media (prefers-color-scheme: dark) {
+      &.button-solid {
+        --background: transparent;
+        --color: var(--app-white);
+      }
+    }
+
+    &._active {
+      --background: var(--app-primary);
+      --color: var(--app-white);
+
+      @media (prefers-color-scheme: dark) {
+        --background: var(--app-white);
+        --color: var(--app-primary);
+      }
+    }
+  }
+}
diff --git a/mobile/src/styles/main.scss b/mobile/src/styles/main.scss
@@ -9,6 +9,7 @@
 /* ~ COMPONENTS*/
 @import "@/styles/components/avatar.scss";
 @import "@/styles/components/listCardsButtons.scss";
+@import "@/styles/components/listModeSwitch.scss";
 @import "@/styles/components/tabsSelection.scss";
 
 /* ~ BASE */

diff --git a/mobile/src/styles/utils/_animations.scss b/mobile/src/styles/utils/_animations.scss
@@ -5,7 +5,7 @@
   }
   100% {
     transform: scale(1);
-    opacity: 1;
+    opacity: 0.7;
   }
 }
 

diff --git a/mobile/src/styles/utils/_variables.scss b/mobile/src/styles/utils/_variables.scss
@@ -26,6 +26,8 @@
     --app-white-90: rgba(255, 255, 255, 0.9);
     --app-white-80: rgba(255, 255, 255, 0.8);
     --app-white-70: rgba(255, 255, 255, 0.7);
+    --app-white-60: rgba(255, 255, 255, 0.6);
+    --app-white-50: rgba(255, 255, 255, 0.5);
 
     --app-primary: #0F0F0F;
     --app-primary-rgb: 15, 15, 15;

diff --git a/mobile/src/styles/vendors/ionic/customs/_custom-ion-list.scss b/mobile/src/styles/vendors/ionic/customs/_custom-ion-list.scss
@@ -31,7 +31,7 @@
     }
 
     ion-toggle {
-      --track-background-checked: var(--voxxrin-event-theme-colors-primary-hex);
+      --track-background-checked: var(--voxxrin-event-theme-colors-secondary-hex);
     }
   }
-}
+}
diff --git a/mobile/src/views/event/SpeakersDirectoryPage.vue b/mobile/src/views/event/SpeakersDirectoryPage.vue
@@ -5,6 +5,14 @@
       <ion-header class="toolbarHeader">
         <ion-toolbar>
           <ion-title slot="start">{{ LL.Speakers() }}</ion-title>
+          <div slot="end" class="listModesSwitch">
+            <ion-button class="listModesSwitch-button _active">
+              <ion-icon :icon="albums"></ion-icon>
+            </ion-button>
+            <ion-button class="listModesSwitch-button">
+              <ion-icon :icon="list"></ion-icon>
+            </ion-button>
+          </div>
         </ion-toolbar>
       </ion-header>
 
@@ -26,6 +34,7 @@
   import PoweredVoxxrin from "@/components/ui/PoweredVoxxrin.vue";
   import SpeakerCard from "@/components/speaker-card/SpeakerCard.vue";
   import SpeakerCompactCard from "@/components/speaker-card/SpeakerCompactCard.vue";
+  import {albums, list} from "ionicons/icons";
 
   const { LL } = typesafeI18n()
-Original file line number
+Diff line change
@@ Expand Up / @@ -5,7 +5,7 @@ @@
       }
 % {
         transform: scale(1);
-        opacity: 1;
+        opacity: 0.7;
       }
     }
@@ Expand Down @@