(styles) - #13 Add styles for view infos

voxxrin · Sep 29, 2023 · 346c5cf · 346c5cf
1 parent 7df1c3f
commit 346c5cf
Show file tree

Hide file tree

Showing 12 changed files with 297 additions and 22 deletions.
diff --git a/mobile/public/assets/icons/line/info-circle-line.svg b/mobile/public/assets/icons/line/info-circle-line.svg
diff --git a/mobile/public/assets/icons/solid/info-circle.svg b/mobile/public/assets/icons/solid/info-circle.svg
diff --git a/mobile/src/components/events/PinnedEvent.vue b/mobile/src/components/events/PinnedEvent.vue
@@ -61,7 +61,7 @@ const props = defineProps({
   width: 268px;
   height: 268px;
   margin: var(--app-gutters) 0;
-  border-radius: 16px;
+  border-radius: var(--app-bloc-radius);
   background-image: linear-gradient(to bottom, var(--voxxrin-event-theme-colors-primary-hex) 50%, transparent 200%),var(--voxxrin-event-background-url);
   contain: initial;
   overflow: visible;

diff --git a/mobile/src/components/schedule/ScheduleBreak.vue b/mobile/src/components/schedule/ScheduleBreak.vue
@@ -47,7 +47,7 @@ const props = defineProps({
   row-gap: 8px;
   padding: 8px;
   margin: 0;
-  border-radius: 8px 12px 12px 8px;
+  border-radius: var(--app-card-radius);
   border : {
     top: 1px solid var(--app-grey-line);
     right: 1px solid var(--app-grey-line);

diff --git a/mobile/src/components/talk-card/ScheduleTalk.vue b/mobile/src/components/talk-card/ScheduleTalk.vue
@@ -137,7 +137,7 @@ const theme = {
   flex: 1;
   margin: 8px;
   border-left: 6px solid v-bind('theme.track.color');
-  border-radius: 8px 12px 12px 8px;
+  border-radius: var(--app-card-radius);
   border : {
     top: 1px solid var(--app-grey-line);
     right: 1px solid var(--app-grey-line);

diff --git a/mobile/src/styles/base/_typography.scss b/mobile/src/styles/base/_typography.scss
@@ -9,3 +9,8 @@
     }
   }
 }
+
+
+ion-text {
+  line-height: 1.5;
+}
diff --git a/mobile/src/styles/layout/_content.scss b/mobile/src/styles/layout/_content.scss
@@ -0,0 +1,3 @@
+.contentView {
+  padding: 16px;
+}
diff --git a/mobile/src/styles/main.scss b/mobile/src/styles/main.scss
@@ -4,6 +4,7 @@
 /* ~ UTILS*/
 @import "@/styles/utils/variables.scss";
 @import "@/styles/utils/_helpers.scss";
+@import "@/styles/utils/_animations.scss";
 
 /* ~ COMPONENTS*/
 @import "@/styles/components/_listCardsButtons.scss";
@@ -28,6 +29,5 @@
 @import "@/styles/vendors/ionic/theme-ionic-variables.scss";
 @import "@/styles/vendors/font.scss";
 
-
-/* ~ UTILS*/
-@import "@/styles/utils/_animations.scss";
+/* ~ LAYOUT*/
+@import "@/styles/layout/_content.scss";
diff --git a/mobile/src/styles/utils/_variables.scss b/mobile/src/styles/utils/_variables.scss
@@ -42,6 +42,8 @@
     --app-gutters-medium: 12px;
 
     --app-radius-form: 8px;
+    --app-bloc-radius: 16px;
+    --app-card-radius: 8px 12px 12px 8px;
 }
 
 @media (prefers-color-scheme: dark) {

diff --git a/mobile/src/styles/vendors/ionic/customs/_custom-ion-buttons.scss b/mobile/src/styles/vendors/ionic/customs/_custom-ion-buttons.scss
@@ -31,6 +31,12 @@ ion-button {
         }
     }
 
+    &.ion-color-theming {
+        --ion-color-base: var(--voxxrin-event-theme-colors-primary-hex) !important;
+        --ion-color-contrast: var(--app-white) !important;
+        --background-activated: var(--voxxrin-event-theme-colors-primary-hex) !important;
+    }
+
     //* Adjust Ionic Btn Type
     &.button-solid {
         @media (prefers-color-scheme: dark) {

diff --git a/mobile/src/views/TalkDetailsPage.vue b/mobile/src/views/TalkDetailsPage.vue
@@ -276,10 +276,6 @@ const theme = computed(() => {
     &-description {
       padding: var(--app-gutters);
 
-      ion-text {
-        line-height: 1.6;
-      }
-
       /**
       Enforcing color for talk description, in case HTML coming from CFP overrides some colors, with
       bad contrast to our UI

diff --git a/mobile/src/views/event/InfosPage.vue b/mobile/src/views/event/InfosPage.vue
@@ -3,18 +3,115 @@
     <ion-content :fullscreen="true">
       <current-event-header v-if="confDescriptor" :conf-descriptor="confDescriptor" />
 
-      <ion-header class="stickyHeader">
-        <ion-toolbar>
-          <ion-title slot="start" >Infos</ion-title>
-          <ion-button slot="end" shape="round" size="small">
-            <ion-icon src="/assets/icons/line/search-line.svg"></ion-icon>
-          </ion-button>
-        </ion-toolbar>
-      </ion-header>
-
-      <p>
-        🚧 {{ LL.Info_page_still_under_construction() }}
-      </p>
+      <div class="contentInfoConf contentView">
+        <div class="headInfoConf">
+          <div class="headInfoConf-logo">
+            <img src="./">
+          </div>
+          <div class="headInfoConf-actions">
+            <ion-button slot="end" shape="round" size="small" fill="outline" v-if="true">
+              <ion-icon src="/assets/icons/solid/settings-cog.svg"></ion-icon>
+            </ion-button>
+          </div>
+        </div>
+
+        <div class="utilsInfoConf">
+          <div class="utilsInfoConf-item">
+            <ion-icon aria-hidden="true" :icon="location"></ion-icon>
+            <div class="utilsInfoConf-item-infos">
+              <span class="title">75017 Paris, FRANCE</span>
+              <span class="subTitle">2 Place de la porte maillot</span>
+            </div>
+          </div>
+          <div class="utilsInfoConf-item">
+            <ion-icon aria-hidden="true" :icon="calendar"></ion-icon>
+            <div class="utilsInfoConf-item-infos">
+              <span class="title">Du 12 au 14 Avril</span>
+            </div>
+          </div>
+        </div>
+
+        <ion-button size="default" expand="block">
+          Event plans
+          <ion-icon aria-hidden="true" :icon="map" slot="end"></ion-icon>
+        </ion-button>
+
+        <div class="linksInfoConf">
+          <vox-divider>Utils links</vox-divider>
+          <ul class="linksInfoConf-list">
+            <li v-if="true">
+              <ion-button color="theming" slot="end" shape="round" size="small">
+                <ion-icon :icon="link"></ion-icon>
+              </ion-button>
+            </li>
+            <li>
+              <ion-button color="theming" slot="end" shape="round" size="small">
+                <ion-icon :icon="logoYoutube"></ion-icon>
+              </ion-button>
+            </li>
+            <li>
+              <ion-button color="theming" slot="end" shape="round" size="small">
+                <ion-icon :icon="logoFacebook"></ion-icon>
+              </ion-button>
+            </li>
+            <li>
+              <ion-button color="theming" slot="end" shape="round" size="small">
+                <ion-icon :icon="logoLinkedin"></ion-icon>
+              </ion-button>
+            </li>
+            <li>
+              <ion-button color="theming" slot="end" shape="round" size="small">
+                <ion-icon :icon="logoFlickr"></ion-icon>
+              </ion-button>
+            </li>
+          </ul>
+        </div>
+
+        <div class="descriptionInfoConf">
+          <vox-divider>Event summary</vox-divider>
+          <ion-text>
+            Depuis plus de 10 ans, la conférence Devoxx France propose pendant 3 jours de venir partager et écouter plus de 200 présentations, par 240 orateurs.
+            La conférence est accompagnée d’un salon/hall d’exposition avec 70 exposants.
+            Avec plus de 3200 participants, orateurs et exposants en avril 2022 dernier, c’est l’un des événements les plus importants pour la communauté des développeurs, en France.Devoxx France est l’occasion de faire des rencontres, de venir découvrir les dernières technologies et de participer à un grand moment communautaire.
+          </ion-text>
+        </div>
+
+        <div class="sponsorsInfoConf">
+          <vox-divider>Sponsors</vox-divider>
+          <ul class="sponsorsInfoConf-list">
+            <li v-if="true">
+              <a class="sponsorItem" :class="'_type1'">
+                <ion-img :src="'https://www.devoxx.fr/wp-content/uploads/2019/09/logo_devoxx_france_2019_simple-1.png'"></ion-img>
+                <span class="sponsorItem-type">Diamond</span>
+              </a>
+            </li>
+            <li v-if="true">
+              <a class="sponsorItem" :class="'_type1'">
+                <ion-img :src="'https://www.devoxx.fr/wp-content/uploads/2019/09/logo_devoxx_france_2019_simple-1.png'"></ion-img>
+                <span class="sponsorItem-type">Diamond</span>
+              </a>
+            </li>
+            <li v-if="true">
+              <a class="sponsorItem" :class="'_type2'">
+                <ion-img :src="'https://www.devoxx.fr/wp-content/uploads/2019/09/logo_devoxx_france_2019_simple-1.png'"></ion-img>
+                <span class="sponsorItem-type">Platinium</span>
+              </a>
+            </li>
+            <li v-if="true">
+              <a class="sponsorItem" :class="'_type2'">
+                <ion-img :src="'https://www.devoxx.fr/wp-content/uploads/2019/09/logo_devoxx_france_2019_simple-1.png'"></ion-img>
+                <span class="sponsorItem-type">Platinium</span>
+              </a>
+            </li>
+            <li v-if="true">
+              <a class="sponsorItem" :class="'_type2'">
+                <ion-img :src="'https://www.devoxx.fr/wp-content/uploads/2019/09/logo_devoxx_france_2019_simple-1.png'"></ion-img>
+                <span class="sponsorItem-type">Platinium</span>
+              </a>
+            </li>
+          </ul>
+        </div>
+      </div>
     </ion-content>
   </ion-page>
 </template>
@@ -27,10 +124,146 @@
   import {useSharedConferenceDescriptor} from "@/state/useConferenceDescriptor";
   import {managedRef as ref} from "@/views/vue-utils";
   import {typesafeI18n} from "@/i18n/i18n-vue";
+  import {
+    location,
+    calendar,
+    map,
+    link,
+    logoYoutube,
+    logoFacebook,
+    logoLinkedin,
+    logoFlickr,
+    diamond
+  } from "ionicons/icons";
+  import VoxDivider from "@/components/ui/VoxDivider.vue";
 
   const { LL } = typesafeI18n()
 
   const route = useRoute();
   const eventId = ref(new EventId(getRouteParamsValue(route, 'eventId')));
   const {conferenceDescriptor: confDescriptor} = useSharedConferenceDescriptor(eventId);
 </script>
+
+<style lang="scss" scoped>
+
+  .contentInfoConf {
+    display: flex;
+    flex-direction: column;
+    row-gap: 16px;
+  }
+
+  .headInfoConf {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+  }
+
+  .utilsInfoConf {
+    background: var(--app-white);
+    border-radius: var(--app-bloc-radius);
+    border: 1px solid var(--app-beige-line);
+
+    &-item {
+      position: relative;
+      display: flex;
+      flex-direction: row;
+      column-gap: 16px;
+      padding: 16px;
+
+      &:last-child { &:after {display: none;}}
+
+      &:after {
+        position: absolute;
+        bottom: 0;
+        right: 0;
+        height: 1px;
+        width: calc(100% - 44px);
+        background: var(--app-beige-line);
+        content: '';
+      }
+
+      ion-icon {
+        font-size: 28px;
+        color: var(--app-beige-dark);
+      }
+
+      &-infos {
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        row-gap: 4px;
+
+
+        .title {
+          font-weight: bold;
+          color: var(--app-primary);
+        }
+
+        .subTitle {
+          font-size: 12px;
+          color: var(--app-grey-dark);
+        }
+      }
+    }
+  }
+
+  .linksInfoConf {
+    &-list {
+      display: flex;
+      flex-direction: row;
+      column-gap: 8px;
+      margin: 0;
+      padding: 0;
+
+      li {
+        list-style: none;
+      }
+    }
+  }
+
+  .sponsorsInfoConf {
+    &-list {
+      display: flex;
+      flex-direction: row;
+      flex-wrap: nowrap;
+      column-gap: 16px;
+      position: relative;
+      left: -16px;
+      width: calc(100% + 34px);
+      margin: 0;
+      padding: 16px;
+      overflow-y: auto;
+
+      li {list-style: none;}
+
+      .sponsorItem {
+        position: relative;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        height: 94px;
+        width: 94px;
+        padding: 0 8px;
+        border-radius: 74px;
+        background: var(--app-white);
+        border: 1px solid var(--app-beige-line);
+
+        &._type1 { .sponsorItem-type { background-color: #9CBFC7;}}
+        &._type2 { .sponsorItem-type { background-color: #A79CC7;}}
+
+
+        &-type {
+          position: absolute;
+          bottom: -8px;
+          left: 50%;
+          transform: translate(-50%, 0);
+          padding: 4px 8px;
+          font-size: 13px;
+          border-radius: 8px;
+          font-weight: 900;
+          color: var(--app-white);
+        }
+      }
+    }
+  }
+</style>
-Original file line number
+Diff line change
@@ Expand Up / @@ -9,3 +9,8 @@ @@
         }
       }
     }
+    ion-text {
+      line-height: 1.5;
+    }