From 0824681d96e811dccbcc68c64dec983f8fa4fc27 Mon Sep 17 00:00:00 2001
From: Andreani Jean <ja.andreani@gmail.com>
Date: Tue, 18 Apr 2023 14:58:16 +0200
Subject: [PATCH] wip

---
 src/components/Link.vue  |   2 +-
 src/locales/fr.json      |   5 +-
 src/views/UploadView.vue | 120 ++++++++++++++++++++++++++++-----------
 3 files changed, 90 insertions(+), 37 deletions(-)

diff --git a/src/components/Link.vue b/src/components/Link.vue
index 2477863..4aa6bfa 100644
--- a/src/components/Link.vue
+++ b/src/components/Link.vue
@@ -112,7 +112,7 @@ const titleImg = computed<string>(() =>
 }
 @media (max-width: 500px) {
   .default {
-    font-size: 1.6rem;
+    font-size: 1.4rem;
   }
 }
 </style>
diff --git a/src/locales/fr.json b/src/locales/fr.json
index 798ac4c..789dd7c 100644
--- a/src/locales/fr.json
+++ b/src/locales/fr.json
@@ -20,13 +20,12 @@
     },
     "upload": {
       "title": "Partager mes photos sur l'instance",
-      "sub_title": "\uD83D\uDC69\u200D\uD83D\uDCBB Cette section nécessite d'avoir une compétence technique",
+      "sub_title": "\uD83D\uDC64 Un compte utilisateur est nécessaire pour utiliser l'outil",
       "description": "Un outil en ligne de commande pour verser de grands volumes de photos est mis à votre disposition.\n\n✔ Partager vos photos pour les rendre accessible à tous\n✔ Images automatiquement floutées pour le respect du cadre légal (RGPD)\n✔ Réutilisation des images",
-      "footer_description": "Pour le moment, seul l'outil en ligne de commande est disponible pour verser des photos mais à terme d'autres moyens, comme une interface web, seront mis à disposition.",
       "button": "Accéder à l'outil",
       "alt_img_upload": "Image qui représente plusieurs photos en cours de téléchargement",
       "title_terminal": "Utiliser la ligne de commande",
-      "sub_title_terminal": "\uD83D\uDC64 Un compte utilisateur est nécessaire pour utiliser l'outil",
+      "sub_title_terminal": "ℹ️ Nous mettrons à disposition à terme d'autres moyens pour télécharger des photos",
       "footer_description_terminal": "La license utilisée pour vos photos est la license creative common.",
       "user_account_title": "Vous n'avez pas de compte utilisateur ?",
       "user_account_button": "Créer un compte",
diff --git a/src/views/UploadView.vue b/src/views/UploadView.vue
index 9f04e7b..93fa4b5 100644
--- a/src/views/UploadView.vue
+++ b/src/views/UploadView.vue
@@ -5,23 +5,31 @@
       <div class="wrapper-upload">
         <div class="wrapper-upload-text">
           <h1 class="upload-title">{{ $t('pages.upload.title') }}</h1>
+          <div class="entry-image responsive">
+            <div class="image">
+              <img
+                src="@/assets/images/upload.png"
+                :alt="$t('pages.upload.alt_img_upload')"
+              />
+            </div>
+          </div>
           <h2 class="upload-subtitle">
             {{ $t('pages.upload.sub_title') }}
           </h2>
           <p class="upload-text" v-html="$t('pages.upload.description')" />
-          <p class="upload-text grey">
-            {{ $t('pages.upload.footer_description') }}
-          </p>
-          <div class="upload-button">
+          <div class="wrapper-account">
+            <h4 class="account-subtitle">
+              {{ $t('pages.upload.user_account_title') }}
+            </h4>
             <Link
-              :text="$t('pages.upload.button')"
+              :text="$t('pages.upload.user_account_button')"
               type="external"
-              look="button"
-              path="https://gitlab.com/geovisio/cli"
+              look="button white"
+              :path="loginUrl"
             />
           </div>
         </div>
-        <div class="entry-image">
+        <div class="entry-image desktop">
           <div class="image">
             <img
               src="@/assets/images/upload.png"
@@ -34,7 +42,17 @@
     <section class="section-upload">
       <div class="wrapper-upload">
         <div class="entry-image entry-terminal">
-          <Terminal :text="terminalText" />
+          <div class="terminal">
+            <Terminal :text="terminalText" />
+          </div>
+          <div class="upload-button responsive">
+            <Link
+              :text="$t('pages.upload.button')"
+              type="external"
+              look="button"
+              path="https://gitlab.com/geovisio/cli"
+            />
+          </div>
         </div>
         <div class="wrapper-upload-text">
           <h2 class="upload-title">{{ $t('pages.upload.title_terminal') }}</h2>
@@ -47,15 +65,12 @@
           <p class="upload-text grey">
             {{ $t('pages.upload.footer_description_terminal') }}
           </p>
-          <div class="wrapper-account">
-            <h4 class="account-subtitle">
-              {{ $t('pages.upload.user_account_title') }}
-            </h4>
+          <div class="upload-button desktop">
             <Link
-              :text="$t('pages.upload.user_account_button')"
+              :text="$t('pages.upload.button')"
               type="external"
-              look="button white"
-              :path="loginUrl"
+              look="button"
+              path="https://gitlab.com/geovisio/cli"
             />
           </div>
         </div>
@@ -113,12 +128,12 @@ const terminalText = computed((): string =>
 }
 .wrapper-upload {
   display: flex;
-  align-items: center;
+  align-items: initial;
   justify-content: center;
 }
 .wrapper-upload-text {
-  margin-right: 4rem;
-  margin-left: 4rem;
+  padding-right: 4rem;
+  padding-left: 4rem;
   width: 40%;
   white-space: pre-wrap;
 }
@@ -145,6 +160,7 @@ const terminalText = computed((): string =>
   border-radius: 1rem;
   padding: 1rem;
   border: 1px solid black;
+  width: 85%;
 }
 .entry-image {
   display: flex;
@@ -156,39 +172,74 @@ const terminalText = computed((): string =>
 }
 .entry-terminal {
   width: 35%;
+  padding-right: 4rem;
+  padding-left: 4rem;
+  margin-right: 0;
 }
 .entry-image img {
-  width: 40rem;
+  width: 100%;
   border-radius: 1rem;
 }
-
-@media (max-width: 768px) {
-  .entry-page {
-    padding-top: 6rem;
-  }
+.responsive {
+  display: none;
+}
+@media (max-width: 1080px) {
   .section-upload {
     height: initial;
   }
-  .entry-image {
-    width: 35rem;
-  }
   .wrapper-upload {
     flex-direction: column-reverse;
+    padding-top: 6rem;
+    padding-bottom: 6rem;
   }
   .wrapper-upload-text {
     width: 100%;
-    margin-right: 0;
-    margin-top: 4rem;
+  }
+  .responsive {
+    display: block;
+  }
+  .desktop {
+    display: none;
+  }
+  .entry-image {
+    margin-left: 0;
+    margin-bottom: 4rem;
+  }
+  .entry-terminal {
+    width: 100%;
+    justify-content: initial;
+  }
+  .terminal {
+    width: 50%;
+    margin-right: 2rem;
+    margin-top: 2rem;
+  }
+  .responsive {
+    display: flex;
+    align-items: center;
+  }
+}
+@media (max-width: 768px) {
+  .entry-image {
+    width: 60%;
+    margin-right: 0;
+    margin-left: 0;
+  }
+  .wrapper-upload-text {
+    margin-left: 0;
+    margin-right: 0;
   }
 }
-
 @media (max-width: 500px) {
   .entry-page {
     min-height: calc(100vh - 11rem);
-    padding-top: 15rem;
+    padding-top: 11rem;
   }
   .entry-image {
-    width: 25rem;
+    width: 100%;
+  }
+  .image {
+    width: 100%;
   }
   .upload-title {
     font-size: 2.6rem;
@@ -197,6 +248,9 @@ const terminalText = computed((): string =>
   .upload-subtitle {
     font-size: 1.8rem;
   }
+  .wrapper-upload-text {
+    margin-right: 0;
+  }
   .upload-text {
     font-size: 1.6rem;
     margin-bottom: 3rem;