various fixes

assets/css/global.scss

@@ -85,3 +85,30 @@ h4 {
   font-size: 1.1rem;
   color: rgb(var(--v-theme-on-neutral));
 }
+
+// Encart informatif
+.explanation {
+  display: flex;
+  flex-direction: row;
+  margin: 32px;
+  padding: 8px 4px;
+  border-radius: 6px;
+  text-align: justify;
+  color: rgb(var(--v-theme-info));
+  border: solid 1px rgb(var(--v-theme-info));
+
+  .v-icon {
+    color: rgb(var(--v-theme-info));
+    font-size: 22px;
+    border-radius: 16px;
+    margin: 3px 1px;
+    padding: 3px;
+    height: 28px;
+    width: 28px;
+  }
+
+  @media (max-width: 600px) {
+    flex-direction: column;
+    justify-content: center;
+  }
+}

i18n/lang/fr.json

@@ -246,6 +246,7 @@
   "otherWebsite": "Autre site web",
   "newSubDomain": "Nouveau sous domaine",
   "yourSubdomains": "Vos sous-domaines",
+  "a_short_subdomains_definition": "Le sous-domaine est la première partie de l'adresse de votre site web Opentalent.",
   "timezone": "Fuseau horaire",
   "qrCode": "QrCode",
   "qrCodeForLicence": "QrCode pour la licence",

pages/parameters/super_admin.vue

@@ -60,32 +60,6 @@ const { data: adminAccess, pending } = fetch(AdminAccess, accessProfile.id)
 </script>
 
 <style scoped lang="scss">
-.explanation {
-  display: flex;
-  flex-direction: row;
-  margin: 32px;
-  padding: 8px 4px;
-  border-radius: 6px;
-  text-align: justify;
-  color: rgb(var(--v-theme-info));
-  border: solid 1px rgb(var(--v-theme-info));
-
-  .v-icon {
-    color: rgb(var(--v-theme-info));
-    font-size: 22px;
-    border-radius: 16px;
-    margin: 3px 1px;
-    padding: 3px;
-    height: 28px;
-    width: 28px;
-  }
-
-  @media (max-width: 600px) {
-    flex-direction: column;
-    justify-content: center;
-  }
-}
-
 .v-table td:first-child {
   width: 180px;
 }

pages/parameters/website.vue

@@ -56,10 +56,6 @@
         <h4 class="flex-grow-1">
           {{ $t('your_subdomains') }}
         </h4>
-        <v-img
-          src="/images/help/what_is_a_subdomain.png"
-          width="240px"
-        />
       </div>
 
       <UiLoadingPanel v-if="subdomainsPending" />
@@ -99,6 +95,23 @@
             }}
           </v-btn>
         </div>
+
+        <div class="explanation flex-column">
+          <div class="d-flex flex-row">
+            <div class="px-4 d-flex flex-row align-center justify-center py-2">
+              <v-icon class="theme-info">fa fa-info</v-icon>
+            </div>
+            <div class="px-2 d-flex flex-row align-center justify-left flex-grow-1">
+              {{ $t('a_short_subdomains_definition') }}
+            </div>
+            <v-img
+              src="/images/help/what_is_a_subdomain.png"
+              width="180px"
+              max-width="180px"
+              class="align-self-center mr-4"
+            />
+          </div>
+        </div>
       </div>
     </LayoutParametersSection>
   </LayoutContainer>