add nex version

2023-08-08 18:44:38 +02:00
parent db29dfdc4c
commit fd8d3168a8
9 changed files with 217 additions and 77 deletions
--- a/src/assets/font-size.scss
+++ b/src/assets/font-size.scss
@@ -15,6 +15,14 @@
      font-size: toRem(1.8);
    }
  }
+  @if $size == h3 {
+    font-weight: normal;
+    font-size: toRem(1.8);
+
+    @media (max-width: toRem(50)) {
+      font-size: toRem(1.6);
+    }
+  }
  @if $size == h4 {
    font-weight: normal;
    font-size: toRem(1.6);
--- a/src/assets/images/uploading.png
+++ b/src/assets/images/uploading.png
--- a/src/components/Button.vue
+++ b/src/components/Button.vue
@@ -69,14 +69,14 @@ defineProps({
 }

 .button--transparent {
-  border: 0toRem (1) solid var(--white);
+  border: toRem(0.1) solid var(--white);
  background-color: var(--black);
  color: var(--white);
 }
 .button--red {
  color: var(--red);
  background-color: var(--white);
-  border: 0toRem (1) solid var(--red);
+  border: toRem(0.1) solid var(--red);
  .icon {
    margin-right: 0;
    font-size: toRem(1.4);
@@ -89,7 +89,7 @@ defineProps({
 .button--white {
  color: var(--black);
  background-color: var(--white);
-  border: 0toRem (1) solid var(--black);
+  border: toRem(0.1) solid var(--black);
  .icon {
    font-size: toRem(1.4);
    color: var(--black);
--- a/src/components/upload/ImportedSection.vue
+++ b/src/components/upload/ImportedSection.vue
@@ -1,9 +1,6 @@
 <template>
-  <section :class="['information-section', { 'first-sequence': index === 0 }]">
+  <div :class="['imported', { 'first-sequence': index === 0 }]">
    <div class="uploaded-pictures">
-      <p v-if="index === 0" class="title-current-upload">
-        {{ $t('pages.upload.sequence_uploading_title') }}
-      </p>
      <p v-if="sequence.pictures" class="uploaded-title">
        <span
          >{{ $t('pages.upload.import') }} {{ sequence.title }} -
@@ -42,7 +39,7 @@
        />
      </ul>
    </div>
-  </section>
+  </div>
 </template>

 <script setup lang="ts">
@@ -66,16 +63,11 @@ defineProps({
 </script>

 <style scoped lang="scss">
-.information-section {
+.imported {
  display: flex;
-  margin-bottom: toRem(4);
-  padding-top: toRem(2);
  padding-bottom: toRem(2);
-  width: 80%;
-  box-shadow: 0px 6.45694px 8.60925px rgba(0, 0, 0, 0.05);
 }
 .first-sequence {
-  background-color: var(--blue-pale);
  border-radius: toRem(0.5);
 }
 .uploaded-pictures,
@@ -89,7 +81,6 @@ defineProps({
  margin-left: toRem(2);
 }
 .uploaded-title {
-  margin-left: toRem(2);
  margin-bottom: toRem(2);
  width: 100%;
  color: var(--grey-semi-dark);
@@ -101,9 +92,11 @@ defineProps({
 }
 .uploaded-picture-list,
 .uploaded-error-list {
-  padding: 0rem toRem(2) toRem(2);
+  padding-top: 0rem;
+  padding-right: toRem(2);
+  padding-bottom: toRem(2);
  overflow-y: auto;
-  max-height: toRem(35);
+  max-height: toRem(50);
 }
 .bi-check-circle {
  color: var(--green);
@@ -128,4 +121,13 @@ defineProps({
    padding: 0;
  }
 }
+
+@media (max-width: toRem(50)) {
+  .imported {
+    flex-direction: column;
+  }
+  .uploaded-error-list {
+    padding-left: 0;
+  }
+}
 </style>
--- a/src/components/upload/PictureItem.vue
+++ b/src/components/upload/PictureItem.vue
@@ -34,16 +34,17 @@ const itemUploadedText = computed<string | null>(
  margin-top: toRem(1);
  border-radius: toRem(0.5);
  width: 100%;
-  @include text(s-regular);
+  @include text(xs-r-regular);
 }
+
 .success {
  background-color: var(--white);
-  border: 0toRem (1) solid var(--grey);
+  border: toRem(0.1) solid var(--grey);
  color: var(--black);
 }
 .error {
  background-color: var(--white);
-  border: 0toRem (1) solid var(--red-pale);
+  border: toRem(0.1) solid var(--red-pale);
  color: var(--red);
 }
 .uploaded-information {
--- a/src/components/upload/TooltipBanner.vue
+++ b/src/components/upload/TooltipBanner.vue
@@ -0,0 +1,41 @@
+<template>
+  <div v-if="isDisplayed" class="tooltip-banner">
+    <div class="top-banner">
+      <span
+        ><i class="bi bi-info-circle"></i>
+        {{ $t('pages.upload.tooltip_banner_title') }}</span
+      >
+      <Button look="no-text" icon="bi bi-x-lg" @trigger="isDisplayed = false" />
+    </div>
+    <p class="text-banner">{{ $t('pages.upload.tooltip_banner_text') }}</p>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { ref } from 'vue'
+import Button from '@/components/Button.vue'
+
+let isDisplayed = ref<boolean>(true)
+</script>
+
+<style lang="scss" scoped>
+.tooltip-banner {
+  border-left: toRem(1) solid var(--blue);
+  border-radius: toRem(1);
+  padding: toRem(2);
+  background-color: var(--white);
+}
+.top-banner {
+  @include text(h2);
+  display: flex;
+  justify-content: space-between;
+  margin-bottom: toRem(0.5);
+  color: var(--blue-dark);
+}
+.text-banner {
+  @include text(s-regular);
+  margin-bottom: 0;
+  margin-right: 3rem;
+  color: var(--grey-semi-dark);
+}
+</style>
--- a/src/components/upload/UploadLoader.vue
+++ b/src/components/upload/UploadLoader.vue
@@ -57,7 +57,6 @@ const uploadPendingTitle = computed<string>(() => {
  flex-direction: column;
  justify-content: center;
  align-items: center;
-  margin-top: toRem(4);
 }
 .loader {
  position: relative;
--- a/src/locales/fr.json
+++ b/src/locales/fr.json
@@ -96,8 +96,13 @@
    },
    "upload": {
      "title": "Déposez vos photos",
-      "input_label": "Déposez des photos dans la zone ou ",
-      "import_word": "importez",
+      "title_uploading": "Traitement des images",
+      "text": "Déposez vos fichiers dans cet espace. Chaque photo ou groupe de photos envoyé constituera une 'séquence'. Vous pourrez retrouver ensuite toutes vos séquences dans la section 'Mes images'. Déposez vos fichiers dans cet espace. Chaque photo ou groupe de photos envoyé",
+      "no_picture_uploading_text": "Aucune photo en cours de téléchargement actuellement",
+      "tooltip_banner_title": "Contribuez à la base de photos de Panoramax",
+      "tooltip_banner_text": "Déposez vos fichiers dans cet espace. Chaque photo ou groupe de photos envoyé constituera une 'séquence'. Vous pourrez retrouver ensuite toutes vos séquences dans la section 'Mes images'.",
+      "input_label": "Glissez vos images ici ou cliquez sur ",
+      "import_word": "importer",
      "import_type": "Format JPEG uniquement",
      "sequence_title": "Séquence du ",
      "button_text": "Télécharger",
--- a/src/views/UploadPicturesView.vue
+++ b/src/views/UploadPicturesView.vue
@@ -1,49 +1,77 @@
 <template>
  <main class="entry-page">
+    <div class="entry-banner">
+      <TooltipBanner />
+    </div>
    <section class="upload-section">
-      <h1 class="settings-title">{{ $t('pages.upload.title') }}</h1>
-      <form v-if="!isLoading" @submit.prevent="uploadPicture">
-        <InputUpload
-          :text="$t('pages.upload.input_label')"
-          :text-second-part="$t('pages.upload.import_word')"
-          :text-picture-type="$t('pages.upload.import_type')"
-          accept="image/jpeg"
-          data-test="input-add-pictures"
-          @trigger="addPictures"
-        />
-        <div class="footer-form">
-          <span v-if="fileUploaded" class="number-file-text">{{
-            fileUploaded
-          }}</span>
-          <span v-else class="number-file-text">{{
-            t('pages.upload.no_uploaded_files')
-          }}</span>
-          <Button
-            :text="$t('pages.upload.button_text')"
-            :disabled="!pictures || pictures.length < 1"
-            type="submit"
-            look="button button--blue"
+      <div class="form-upload">
+        <h1 class="settings-title">{{ $t('pages.upload.title') }}</h1>
+        <p class="settings-text">{{ $t('pages.upload.text') }}</p>
+        <form v-if="!isLoading" @submit.prevent="uploadPicture">
+          <InputUpload
+            :text="$t('pages.upload.input_label')"
+            :text-second-part="$t('pages.upload.import_word')"
+            :text-picture-type="$t('pages.upload.import_type')"
+            accept="image/jpeg"
+            data-test="input-add-pictures"
+            @trigger="addPictures"
          />
+          <div class="footer-form">
+            <span v-if="fileUploaded" class="number-file-text">{{
+              fileUploaded
+            }}</span>
+            <span v-else class="number-file-text">{{
+              t('pages.upload.no_uploaded_files')
+            }}</span>
+            <Button
+              :text="$t('pages.upload.button_text')"
+              :disabled="!pictures || pictures.length < 1"
+              type="submit"
+              look="button button--blue"
+            />
+          </div>
+        </form>
+        <UploadLoader
+          v-else
+          :load-percentage="loadPercentage"
+          :load-text-size="loadTextSize"
+          :is-loaded="isLoaded"
+          :uploaded-sequences="uploadedSequences"
+          :pictures-count="picturesCount"
+          @triggerNewUpload="triggerNewUpload"
+        />
+      </div>
+      <div class="form-upload">
+        <h1 class="settings-title">{{ $t('pages.upload.title_uploading') }}</h1>
+        <div v-if="!uploadedSequences.length" class="uploading-information">
+          <img src="@/assets/images/uploading.png" class="uploading-img" />
+          <p class="settings-text">
+            {{ $t('pages.upload.no_picture_uploading_text') }}
+          </p>
        </div>
-      </form>
-      <UploadLoader
-        v-else
-        :load-percentage="loadPercentage"
-        :load-text-size="loadTextSize"
-        :is-loaded="isLoaded"
-        :uploaded-sequences="uploadedSequences"
-        :pictures-count="picturesCount"
-        @triggerNewUpload="triggerNewUpload"
-      />
+        <template v-for="(sequence, i) in uploadedSequences">
+          <ImportedSection
+            v-if="i === 0"
+            :index="i"
+            :sequence="sequence"
+            :pictures-count="picturesCount"
+            :upload-errors="sequence.picturesOnError"
+            :upload-pictures="sequence.pictures"
+          />
+        </template>
+      </div>
    </section>
-    <ImportedSection
-      v-for="(sequence, i) in uploadedSequences"
-      :index="i"
-      :sequence="sequence"
-      :pictures-count="picturesCount"
-      :upload-errors="sequence.picturesOnError"
-      :upload-pictures="sequence.pictures"
-    />
+    <template v-for="(sequence, i) in uploadedSequences">
+      <section v-if="i !== 0" class="information-section">
+        <ImportedSection
+          :index="i"
+          :sequence="sequence"
+          :pictures-count="picturesCount"
+          :upload-errors="sequence.picturesOnError"
+          :upload-pictures="sequence.pictures"
+        />
+      </section>
+    </template>
  </main>
 </template>

@@ -54,6 +82,7 @@ import { useI18n } from 'vue-i18n'
 import InputUpload from '@/components/InputUpload.vue'
 import Button from '@/components/Button.vue'
 import ImportedSection from '@/components/upload/ImportedSection.vue'
+import TooltipBanner from '@/components/upload/TooltipBanner.vue'
 import UploadLoader from '@/components/upload/UploadLoader.vue'
 import type { sequenceInterface } from './interfaces/UploadPicturesView'
 import { formatDate } from '@/utils/dates'
@@ -203,18 +232,59 @@ ul {
  flex-direction: column;
  justify-content: center;
  align-items: center;
+  background-color: var(--grey);
+  min-height: calc(100vh - #{toRem(8)});
+  padding-top: toRem(2);
+  padding-bottom: toRem(2);
+}
+.entry-banner {
+  width: 90%;
+  margin-bottom: toRem(2);
 }
 .upload-section {
-  width: 80%;
-  padding: toRem(4);
-  margin-top: toRem(6);
-  margin-bottom: toRem(4);
-  box-shadow: 0px 6.45694px 8.60925px rgba(0, 0, 0, 0.05);
+  display: flex;
+  width: 90%;
+}
+.information-section {
+  width: 90%;
+  background-color: var(--white);
+  border-radius: toRem(1);
+  margin-top: toRem(2);
+  padding: toRem(2);
+}
+.uploading-information {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  height: 100%;
+}
+.uploading-img {
+  height: toRem(20);
+  margin-bottom: toRem(2);
+}
+.form-upload {
+  height: toRem(70);
+  padding: toRem(2);
+  width: 50%;
+  background-color: var(--white);
+  border-radius: toRem(1);
+  &:first-child {
+    margin-right: toRem(1);
+  }
+  &:last-child {
+    margin-left: toRem(1);
+  }
 }
 .settings-title {
-  text-align: center;
-  @include text(h1);
-  margin-bottom: toRem(4);
+  color: var(--blue-dark);
+  @include text(h3);
+  margin-bottom: toRem(2);
+}
+.settings-text {
+  color: var(--grey-semi-dark);
+  margin-bottom: toRem(2);
+  @include text(s-regular);
 }
 .footer-form {
  display: flex;
@@ -228,9 +298,6 @@ ul {
  color: var(--blue-dark);
  @include text(s-regular);
 }
-::-webkit-scrollbar {
-  width: 0toRem (2);
-}
 ::-webkit-scrollbar-track {
  background: var(--grey-pale);
 }
@@ -242,19 +309,36 @@ ul {
  .entry-page {
    overflow-x: hidden;
  }
+  .upload-section {
+    flex-direction: column;
+  }
+  .form-upload {
+    width: 100%;
+    &:first-child,
+    &:last-child {
+      margin: toRem(0);
+    }
+    &:first-child {
+      margin-bottom: toRem(2);
+    }
+  }
  .information-section {
    flex-direction: column;
  }
 }
@media (max-width: toRem(50)) {
-  .upload-section {
-    margin-top: toRem(15);
+  .entry-page {
+    margin-top: toRem(11);
+    overflow-y: hidden;
+  }
+  .upload-section,
+  .information-section {
    width: 100%;
    padding-right: toRem(2);
    padding-left: toRem(2);
  }
  .information-section {
-    width: 100%;
+    width: 90%;
  }
 }
 </style>