improve global responsive behavior

components/Layout/MainMenu.vue

@@ -78,9 +78,9 @@ import {useMenu} from "~/composables/layout/useMenu";
 import {computed} from "@vue/reactivity";
 import { useDisplay } from 'vuetify'
 
-const { buildMenu, hasMenu, isInternalLink, openMenu, isMenuOpened } = useMenu()
+const { buildMenu, hasMenu, isInternalLink, setMenuState, isMenuOpened } = useMenu()
 
-const { mdAndUp } = useDisplay()
+const { mdAndUp, lgAndUp } = useDisplay()
 
 const menu = buildMenu('Main')
 if (menu.value === null) {
@@ -88,25 +88,29 @@ if (menu.value === null) {
 }
 
 const hasMainMenu = computed(() => hasMenu('Main'))
-
 const isOpened = computed(() => isMenuOpened('Main'))
 
-// En vue md+, on affiche toujours le menu
-const isRail = computed(() => menu.value !== null && mdAndUp.value && !isOpened.value)
-const displayMenu = computed(() => menu.value !== null && hasMainMenu && (mdAndUp.value || isOpened.value))
+// En vue lg+, on affiche toujours le menu
+const displayMenu = computed(() => {
+  return menu.value !== null && hasMainMenu && (lgAndUp.value || isOpened.value)
+})
+
+// En vue md+, fermer le menu le passe simplement en mode rail
+// Sinon, le fermer le masque complètement
+const isRail = computed(() => {
+  return menu.value !== null && mdAndUp.value && !isOpened.value
+})
 
-const unwatch = watch(mdAndUp, (newValue, oldValue) => {
+const unwatch = watch(lgAndUp, (newValue, oldValue) => {
 // Par défaut si l'écran est trop petit au chargement de la page, le menu doit rester fermé.
-  if (process.client && menu.value !== null && mdAndUp.value) {
-    openMenu('Main')
+  if (process.client && menu.value !== null) {
+    setMenuState('Main', lgAndUp.value)
   }
 })
 onUnmounted(() => {
   unwatch()
 })
 
-
-
 </script>
 
 <style scoped lang="scss">

components/Layout/Subheader.vue

@@ -9,7 +9,7 @@ Contient entre autres le breadcrumb, les commandes de changement d'année et les
       class="d-md-flex bg-ot-light-grey text-body-2 px-2"
       flat
     >
-      <LayoutSubHeaderBreadcrumbs v-show="mdAndUp" class="mr-auto d-sm-none d-md-flex d-none d-sm-flex" />
+      <LayoutSubHeaderBreadcrumbs v-if="mdAndUp" class="mr-auto d-flex" />
 
       <v-card
         class="d-md-flex pt-2 mr-6 align-baseline"

pages/subscription.vue

@@ -86,192 +86,184 @@ Page 'Mon abonnement'
         <UiExpansionPanel title="more_features" icon="fas fa-plus">
           <v-container id="products-section" fluid class="container">
             <v-row>
-              <div style="overflow-x:scroll;">
-                <v-table style="min-width: 600px;">
-                  <template #default>
-                    <thead>
-                      <tr>
-                        <th v-if="organizationProfile.isArtistProduct">
-                          {{ $t('PRODUCT_ARTIST_PREMIUM') }}
-                        </th>
-                        <th v-if="organizationProfile.isArtist">
-                          {{ $t('PRODUCT_SCHOOL') }}
-                        </th>
-                        <th>
-                          {{ $t('sms') }}
-                        </th>
-                        <th>
-                          {{ $t('website') }}
-                        </th>
-                      </tr>
-                    </thead>
+              <!-- Opentalent Artist Premium -->
+              <v-col v-if="1 || organizationProfile.isArtistProduct" cols="3">
+                <v-row>
+                  {{ $t('PRODUCT_ARTIST_PREMIUM') }}
+                </v-row>
+                <v-row>
+                  <nuxt-img src="/images/Artist-Square.jpg" />
+                </v-row>
+                <v-row>
+                  <p>
+                    {{ $t('get_more_functionalities_with_version') }} <b>{{ $t('PRODUCT_ARTIST_PREMIUM') }}</b>
+                  </p>
+
+                  <!-- Cmf member -->
+                  <div v-if="organizationProfile.isCmf" cols="3">
+                    <p>
+                      <b>{{ $t('for_only_x_eur_ttc_by_month', { price: formatCurrency(7.25, 'EUR') }) }}&nbsp*</b>
+                    </p>
+                    <div><i>*&nbsp{{ $t('yearly_paid_giving_x_eur_ttc_per_year', { price: formatCurrency(87.00, 'EUR') }) }}</i></div>
+                    <div><i>{{ $t('only_for_cmf_members') }} ({{ $t('public_price_x_ttc_a_year', { price: formatCurrency(168.00, 'EUR') }) }})</i></div>
+                  </div>
+
+                  <!-- Not a cmf member -->
+                  <div v-else>
+                    <p>
+                      <b>{{ $t('for_only_x_eur_ttc_by_month', { price: formatCurrency(14.00, 'EUR') }) }}&nbsp*</b>
+                    </p>
+                    <p>
+                      <i>
+                        *&nbsp{{ $t('yearly_paid_giving_x_eur_ttc_per_year', { price: formatCurrency(168.00, 'EUR') }) }}
+                      </i>
+                    </p>
+                  </div>
+
+                  <p class="mt-3">
+                    <a href="/resources/Fiche_produit_Opentalent_Artist.pdf" target="_blank">
+                      {{ $t('product_sheet') }} {{ $t('PRODUCT_ARTIST_PREMIUM') }}
+                    </a>
+                  </p>
+
+                  <p v-if="organizationProfile.isCmf" class="mt-3">
+                    <a href="/resources/BDC_Artist_Premium_CMF.pdf">
+                      <b>{{ $t('download_cmf_order_form') }}</b>
+                    </a>
+                  </p>
+                  <p v-else class="mt-3">
+                    <a href="/resources/BDC_Artist_Premium_Public.pdf">
+                      <b>{{ $t('download_order_form') }}</b>
+                    </a>
+                  </p>
+                </v-row>
+              </v-col>
+
+              <!-- Opentalent School Premium -->
+              <v-col v-if="1 || organizationProfile.isArtist" cols="3">
+                <v-row>
+                  {{ $t('PRODUCT_SCHOOL') }}
+                </v-row>
+                <v-row>
+                  <nuxt-img src="/images/School-Square.jpg" />
+                </v-row>
+                <v-row>
+                  <p>
+                    {{ $t('switch_to_version') }} <b>{{ $t('PRODUCT_SCHOOL_PREMIUM') }}</b> {{ $t('and_benefit') }} :
+                  </p>
+
+                  <ul class="mb-2">
+                    <li>{{ $t('of_accounts_for_teachers_and_students') }}</li>
+                    <li>{{ $t('of_a_complete_website') }}</li>
+                  </ul>
+
+                  <!-- Cmf member -->
+                  <div v-if="organizationProfile.isCmf">
+                    <p><b>{{ $t('starting_from_x_eur_ttc_per_month', { price: formatCurrency(26.50, 'EUR') }) }}&nbsp*</b></p>
+                    <div><i>* {{ $t('yearly_paid_giving_x_eur_ttc_per_year', { price: formatCurrency(318.00, 'EUR') }) }}</i></div>
+                    <div><i>{{ $t('version_x_up_to_x_students', { product: $t('PRODUCT_SCHOOL_PREMIUM'), max_students: '69' }) }}</i></div>
+                    <div><i>{{ $t('excluding_license_and_training_fees') }}.</i></div>
+                    <div><i>{{ $t('only_for_cmf_members') }} ({{ $t('public_price_x_ttc_a_year', { price: formatCurrency(529.20, 'EUR') }) }})</i></div>
+                  </div>
+                  <!-- Not cmf member -->
+                  <div v-else>
+                    <p>{{ $t('starting_from_x_eur_ttc_per_month', { price: formatCurrency(44.10, 'EUR') }) }}&nbsp*</p>
+                    <div><i>*&nbsp{{ $t('yearly_paid_giving_x_eur_ttc_per_year', { price: formatCurrency(529.20, 'EUR') }) }}</i></div>
+                    <div><i>{{ $t('version_x_up_to_x_students', { product: $t('PRODUCT_SCHOOL_PREMIUM'), max_students: '69' }) }}</i></div>
+                    <div><i>{{ $t('excluding_license_and_training_fees') }}.</i></div>
+                  </div>
+
+                  <p class="mt-4">
+                    <a href="/resources/Fiche_produit_Opentalent_School.pdf" target="_blank">
+                      {{ $t('product_sheet') }} {{ $t('PRODUCT_SCHOOL') }}
+                    </a>
+                  </p>
+
+                  <p>
+                    {{ $t('contact_us_at') }} <a href="tel:+33972126017">0 972 126 017</a>, {{ $t('or_by_mail_at') }}
+                    <a href="mailto:contact@opentalent.fr">contact@opentalent.fr</a>
+                  </p>
+                </v-row>
+              </v-col>
+
+              <!-- SMS -->
+              <v-col cols="3">
+                <v-row>
+                  {{ $t('sms') }}
+                </v-row>
+                <v-row>
+                  <nuxt-img src="/images/sms_big.png" :height="100" :width="100"/>
+                </v-row>
+                <v-row>
+                  <p><b>{{ $t('send_sms') }} {{ $t('to_your_members_from_app') }}</b></p>
+
+                  <!-- Cmf member -->
+                  <div v-if="organizationProfile.isCmf">
+                    <p><b>{{ $t('starting_from_x_eur_ttc_per_sms', { price: formatCurrency(0.10, 'EUR') }) }}&nbsp*</b></p>
+                    <p><i>*&nbsp{{ $t('for_x_sms', { amount: '5000' }) }}</i></p>
+
+                    <p>
+                      <b>
+                        <a href="/resources/BDC_SMS_CMF.pdf" target="_blank">
+                          {{ $t('download_cmf_order_form') }}
+                        </a>
+                      </b>
+                    </p>
+                  </div>
+                  <!-- Not cmf member -->
+                  <div v-else>
+                    <p><b>{{ $t('starting_from_x_eur_ttc_per_sms', { price: formatCurrency(0.12, 'EUR') }) }}&nbsp*</b></p>
+                    <p><i>*&nbsp{{ $t('for_x_sms', { amount: '5000' }) }}</i></p>
+
+                    <p>
+                      <a href="/resources/BDC_SMS_Public.pdf" target="_blank">
+                        <b>{{ $t('download_order_form') }}</b>
+                      </a>
+                    </p>
+                  </div>
+                </v-row>
+              </v-col>
+
+              <!-- Custom domain -->
+              <v-col cols="3">
+                <v-row>
+                  {{ $t('website') }}
+                </v-row>
+                <v-row>
+                  <nuxt-img src="/images/nom-de-domaine.jpg" />
+                </v-row>
+                <v-row>
+                  <p>
+                    <b>{{ $t('get_your_own_domain_and_up_to_five_emails_for_only_x_eur_ttc_per_month', { price: formatCurrency(34.80, 'EUR') }) }}</b>
+                  </p>
+
+                  <p>{{ $t('example') }} :</p>
+                  <table>
                     <tbody>
-                    <tr class="center-td-content">
-                      <td v-if="organizationProfile.isArtistProduct">
-                        <nuxt-img src="/images/Artist-Square.jpg" />
-                      </td>
-                      <td v-if="organizationProfile.isArtist">
-                        <nuxt-img src="/images/School-Square.jpg" />
-                      </td>
-                      <td>
-                        <nuxt-img src="/images/sms_big.png" />
+                    <tr>
+                      <td style="width: 190px;">
+                        {{ $t('domain_name') }} :
                       </td>
                       <td>
-                        <nuxt-img src="/images/nom-de-domaine.jpg" />
+                        <i>{{ $t('dummy_domain_name') }}</i>
                       </td>
                     </tr>
                     <tr>
-                      <!-- Opentalent Artist Premium -->
-                      <td v-if="organizationProfile.isArtistProduct">
-                        <p>
-                          {{ $t('get_more_functionalities_with_version') }} <b>{{ $t('PRODUCT_ARTIST_PREMIUM') }}</b>
-                        </p>
-
-                        <!-- Cmf member -->
-                        <div v-if="organizationProfile.isCmf">
-                          <p>
-                            <b>{{ $t('for_only_x_eur_ttc_by_month', { price: formatCurrency(7.25, 'EUR') }) }} *</b>
-                          </p>
-                          <div><i>* {{ $t('yearly_paid_giving_x_eur_ttc_per_year', { price: formatCurrency(87.00, 'EUR') }) }}</i></div>
-                          <div><i>{{ $t('only_for_cmf_members') }} ({{ $t('public_price_x_ttc_a_year', { price: formatCurrency(168.00, 'EUR') }) }})</i></div>
-                        </div>
-
-                        <!-- Not a cmf member -->
-                        <div v-else>
-                          <p>
-                            <b>{{ $t('for_only_x_eur_ttc_by_month', { price: formatCurrency(14.00, 'EUR') }) }} *</b>
-                          </p>
-                          <p>
-                            <i>
-                              * {{ $t('yearly_paid_giving_x_eur_ttc_per_year', { price: formatCurrency(168.00, 'EUR') }) }}
-                            </i>
-                          </p>
-                        </div>
-
-                        <p class="mt-3">
-                          <a href="/resources/Fiche_produit_Opentalent_Artist.pdf" target="_blank">
-                            {{ $t('product_sheet') }} {{ $t('PRODUCT_ARTIST_PREMIUM') }}
-                          </a>
-                        </p>
-
-                        <p v-if="organizationProfile.isCmf" class="mt-3">
-                          <a href="/resources/BDC_Artist_Premium_CMF.pdf">
-                            <b>{{ $t('download_cmf_order_form') }}</b>
-                          </a>
-                        </p>
-                        <p v-else class="mt-3">
-                          <a href="/resources/BDC_Artist_Premium_Public.pdf">
-                            <b>{{ $t('download_order_form') }}</b>
-                          </a>
-                        </p>
-                      </td>
-
-                      <!-- Opentalent School Premium -->
-                      <td v-if="organizationProfile.isArtist">
-                        <p>
-                          {{ $t('switch_to_version') }} <b>{{ $t('PRODUCT_SCHOOL_PREMIUM') }}</b> {{ $t('and_benefit') }} :
-                        </p>
-
-                        <ul class="mb-2">
-                          <li>{{ $t('of_accounts_for_teachers_and_students') }}</li>
-                          <li>{{ $t('of_a_complete_website') }}</li>
-                        </ul>
-
-                        <!-- Cmf member -->
-                        <div v-if="organizationProfile.isCmf">
-                          <p><b>{{ $t('starting_from_x_eur_ttc_per_month', { price: formatCurrency(26.50, 'EUR') }) }} *</b></p>
-                          <div><i>* {{ $t('yearly_paid_giving_x_eur_ttc_per_year', { price: formatCurrency(318.00, 'EUR') }) }}</i></div>
-                          <div><i>{{ $t('version_x_up_to_x_students', { product: $t('PRODUCT_SCHOOL_PREMIUM'), max_students: '69' }) }}</i></div>
-                          <div><i>{{ $t('excluding_license_and_training_fees') }}.</i></div>
-                          <div><i>{{ $t('only_for_cmf_members') }} ({{ $t('public_price_x_ttc_a_year', { price: formatCurrency(529.20, 'EUR') }) }})</i></div>
-                        </div>
-                        <!-- Not cmf member -->
-                        <div v-else>
-                          <p>{{ $t('starting_from_x_eur_ttc_per_month', { price: formatCurrency(44.10, 'EUR') }) }} *</p>
-                          <div><i>* {{ $t('yearly_paid_giving_x_eur_ttc_per_year', { price: formatCurrency(529.20, 'EUR') }) }}</i></div>
-                          <div><i>{{ $t('version_x_up_to_x_students', { product: $t('PRODUCT_SCHOOL_PREMIUM'), max_students: '69' }) }}</i></div>
-                          <div><i>{{ $t('excluding_license_and_training_fees') }}.</i></div>
-                        </div>
-
-                        <p class="mt-4">
-                          <a href="/resources/Fiche_produit_Opentalent_School.pdf" target="_blank">
-                            {{ $t('product_sheet') }} {{ $t('PRODUCT_SCHOOL') }}
-                          </a>
-                        </p>
-
-                        <p>
-                          {{ $t('contact_us_at') }} <a href="tel:+33972126017">0 972 126 017</a>, {{ $t('or_by_mail_at') }}
-                          <a href="mailto:contact@opentalent.fr">contact@opentalent.fr</a>
-                        </p>
-                      </td>
-
-                      <!-- SMS -->
-                      <td>
-                        <p><b>{{ $t('send_sms') }} {{ $t('to_your_members_from_app') }}</b></p>
-
-                        <!-- Cmf member -->
-                        <div v-if="organizationProfile.isCmf">
-                          <p><b>{{ $t('starting_from_x_eur_ttc_per_sms', { price: formatCurrency(0.10, 'EUR') }) }} *</b></p>
-                          <p><i>* {{ $t('for_x_sms', { amount: '5000' }) }}</i></p>
-
-                          <p>
-                            <b>
-                              <a href="/resources/BDC_SMS_CMF.pdf" target="_blank">
-                                {{ $t('download_cmf_order_form') }}
-                              </a>
-                            </b>
-                          </p>
-                        </div>
-                        <!-- Not cmf member -->
-                        <div v-else>
-                          <p><b>{{ $t('starting_from_x_eur_ttc_per_sms', { price: formatCurrency(0.12, 'EUR') }) }} *</b></p>
-                          <p><i>* {{ $t('for_x_sms', { amount: '5000' }) }}</i></p>
-
-                          <p>
-                            <a href="/resources/BDC_SMS_Public.pdf" target="_blank">
-                              <b>{{ $t('download_order_form') }}</b>
-                            </a>
-                          </p>
-                        </div>
-                      </td>
-
-                      <!-- Custom domain -->
+                      <td>{{ $t('associated_mail_address') }} : </td>
                       <td>
-                        <p>
-                          <b>{{ $t('get_your_own_domain_and_up_to_five_emails_for_only_x_eur_ttc_per_month', { price: formatCurrency(34.80, 'EUR') }) }}</b>
-                        </p>
-
-                        <p>{{ $t('example') }} :</p>
-                        <table>
-                          <tbody>
-                          <tr>
-                            <td style="width: 190px;">
-                              {{ $t('domain_name') }} :
-                            </td>
-                            <td>
-                              <i>{{ $t('dummy_domain_name') }}</i>
-                            </td>
-                          </tr>
-                          <tr>
-                            <td>{{ $t('associated_mail_address') }} : </td>
-                            <td>
-                              <i>{{ $t('dummy_email_address') }}</i>
-                            </td>
-                          </tr>
-                          </tbody>
-                        </table>
-
-                        <p>
-                          <a href="/resources/BDC_Nom_de_domaine.pdf" target="_blank">
-                            <b>{{ $t('download_order_form') }}</b>
-                          </a>
-                        </p>
+                        <i>{{ $t('dummy_email_address') }}</i>
                       </td>
                     </tr>
                     </tbody>
-                  </template>
-                </v-table>
-              </div>
+                  </table>
+
+                  <p>
+                    <a href="/resources/BDC_Nom_de_domaine.pdf" target="_blank">
+                      <b>{{ $t('download_order_form') }}</b>
+                    </a>
+                  </p>
+                </v-row>
+              </v-col>
             </v-row>
           </v-container>
         </UiExpansionPanel>
@@ -287,8 +279,6 @@ Page 'Mon abonnement'
   import {DolibarrAccount} from "~/models/Organization/DolibarrAccount";
   import {MobytUserStatus} from "~/models/Organization/MobytUserStatus";
   import {Ref} from "@vue/reactivity";
-  import {useAbilityUtils} from "~/composables/utils/useAbilityUtils";
-  import {useAccessProfileStore} from "~/stores/accessProfile";
   import {useDisplay} from "vuetify";
 
   const ability = useAbility()
@@ -331,39 +321,56 @@ Page 'Mon abonnement'
   }
 </script>
 
-<style>
-#products-section table {
-  table-layout: fixed;
-  width: 100%;
-}
-
-#products-section table img {
-  max-height: 250px;
-  max-width: 100%;
-}
-
-#products-section tr.center-td-content td {
-  text-align: center;
-}
-
-#products-section td {
-  padding: 12px 18px;
-  vertical-align: top;
-}
-
-#products-section p {
-  margin-bottom: 12px;
-}
-
-#products-section ul {
-  padding-left: 24px;
-}
-
-.theme--light.v-data-table > .v-data-table__wrapper > table > tbody > tr:hover:not(.v-data-table__expanded__content):not(.v-data-table__empty-wrapper) {
-  background:none;
-}
-
-.products-pictures img {
-  width: 70%;
-}
+<style scoped lang="scss">
+  #products-section {
+    width: 100%;
+
+    .v-col {
+      min-width: 260px;
+      border: solid 1px #e0e0e0;
+
+      .v-row:nth-child(1) {
+        background: rgb(var(--v-theme-ot-green));
+        height: 64px;
+        color: white;
+        font-size: 15px;
+        font-weight: bold;
+      }
+
+      .v-row:nth-child(2) {
+        height: 230px;
+        display: flex;
+        justify-content: center;
+      }
+
+      .v-row:nth-child(3) {
+      }
+    }
+
+    .v-col:not(:first-child) {
+      border-left: none;
+    }
+
+    img {
+      max-height: 90%;
+      max-width: 90%;
+    }
+
+    .v-row {
+      padding: 12px 18px;
+      vertical-align: top;
+      border-bottom: solid 1px #e0e0e0;
+    }
+    .v-row:last-child {
+      border: none;
+    }
+
+    p {
+      margin-bottom: 12px;
+    }
+
+    ul {
+      padding-left: 24px;
+    }
+  }
 </style>