edit text + add button down + fix some css

2023-04-28 11:49:47 +02:00
parent 65f6520acb
commit 42e9b74d73
8 changed files with 143 additions and 64 deletions
--- a/package.json
+++ b/package.json
@@ -28,7 +28,8 @@
    "vue-eslint-parser": "^9.1.0",
    "vue-i18n": "^9.2.2",
    "vue-router": "^4.1.6",
-    "vue3-cookies": "^1.0.6"
+    "vue3-cookies": "^1.0.6",
+    "vue3-smooth-scroll": "^0.8.1"
  },
  "devDependencies": {
    "@rushstack/eslint-patch": "^1.1.4",
--- a/src/components/Header.vue
+++ b/src/components/Header.vue
@@ -23,7 +23,7 @@
              :text="$t('general.header.contribute_text')"
              icon="bi bi-upload"
              look="button white"
-              path="/verser"
+              path="/partager-des-photos"
            />
          </li>
          <li class="nav-list-item">
--- a/src/components/Link.vue
+++ b/src/components/Link.vue
@@ -6,6 +6,7 @@
    :class="['default', look, { disabled }]"
    :title="titleImg"
    v-bind="$attrs"
+    @click="$emit('trigger')"
  >
    <i v-if="icon" :class="[icon, 'icon']"></i>
    <img v-if="image" :src="img(image.url)" :alt="image.alt" class="logo" />
@@ -110,6 +111,21 @@ const titleImg = computed<string>(() =>
 .disabled:hover {
  text-decoration: none;
 }
+.button--rounded {
+  background-color: var(--black);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  border-radius: 50%;
+  padding: 0;
+  height: 4.5rem;
+  width: 4.5rem;
+  .icon {
+    color: var(--white);
+    font-size: 2.8rem;
+    margin-right: 0;
+  }
+}
@media (max-width: 500px) {
  .icon {
    margin-right: 0.5rem;
--- a/src/components/Terminal.vue
+++ b/src/components/Terminal.vue
@@ -7,20 +7,35 @@
    </div>
    <div class="editor">
      <code class="code">
-        <span>{{ $t('pages.upload.terminal_install') }}</span>
-        <span>{{ $t('pages.upload.terminal_test') }}</span>
-        <div class="upload-command">
-          <span class="tilde">~</span><span>{{ text }}</span>
+        <div class="screen">
+          <div class="upload-command">
+            <span class="tilde">~</span><span>{{ textInstall }}</span>
+          </div>
+          <div class="entry-button">
+            <Button
+              look="button--white"
+              :text="$t('pages.upload.button_copy')"
+              :icon="clipboardIcon"
+              @trigger="copyText(textInstall)"
+              class="entry-button"
+            />
+          </div>
+        </div>
+        <div class="screen">
+          <div class="upload-command">
+            <span class="tilde">~</span><span>{{ textUpload }}</span>
+          </div>
+          <div class="entry-button">
+            <Button
+              look="button--white"
+              :text="$t('pages.upload.button_copy')"
+              :icon="clipboardIcon"
+              @trigger="copyText(textUpload)"
+              class="entry-button"
+            />
+          </div>
        </div>
      </code>
-      <div class="entry-button">
-        <Button
-          :text="$t('pages.upload.button_copy')"
-          look="button--white"
-          :icon="clipboardIcon"
-          @trigger="copyText"
-        />
-      </div>
    </div>
  </div>
 </template>
@@ -30,13 +45,14 @@ import Button from '@/components/Button.vue'
 import { computed, ref } from 'vue'
 let isCopied = ref<boolean>(false)
 const props = defineProps({
-  text: { type: String, default: '' }
+  textUpload: { type: String, default: '' },
+  textInstall: { type: String, default: '' }
 })
 const clipboardIcon = computed((): string =>
  isCopied.value ? 'bi bi-clipboard-check-fill' : 'bi bi-clipboard-plus'
 )
-function copyText(): void {
-  navigator.clipboard.writeText(props.text)
+function copyText(text: string): void {
+  navigator.clipboard.writeText(text)
  isCopied.value = true
  setTimeout(function () {
    isCopied.value = false
@@ -56,23 +72,31 @@ function copyText(): void {
  width: 100%;
 }
 .editor {
-  padding: 3rem 2rem 2rem;
  border-bottom-right-radius: 1.5rem;
  border-bottom-left-radius: 1.5rem;
  background-color: var(--black-pale);
-  height: 30rem;
+  height: 32rem;
  width: 100%;
  position: relative;
 }
+.screen {
+  padding: 3rem 2rem 2rem;
+  height: 100%;
+}
+.screen:nth-child(2n) {
+  border-top: 2px solid white;
+}
 .upload-command {
+  display: flex;
+  align-items: center;
  margin-top: 2rem;
 }
 .entry-button {
-  position: absolute;
-  bottom: 2rem;
-  right: 2rem;
+  margin-top: 2rem;
+  margin-left: auto;
 }
 .code {
+  height: 100%;
  display: flex;
  flex-direction: column;
  color: var(--white);
@@ -100,7 +124,10 @@ function copyText(): void {

@media (max-width: 500px) {
  .editor {
-    height: 27rem;
+    min-height: 27rem;
+  }
+  .upload-command {
+    margin-top: 0;
  }
 }
 </style>
--- a/src/locales/fr.json
+++ b/src/locales/fr.json
@@ -21,19 +21,16 @@
    },
    "upload": {
      "title": "Partager des photos",
-      "sub_title": "\uD83D\uDC64 Un compte utilisateur est obligatoire télécharger des photos",
-      "description": "Un outil en ligne de commande pour verser de grands volumes de photos est mis à votre disposition.\n\n✔ Partager des photos pour les rendre accessible à tous\n✔ Images automatiquement floutées pour le respect du cadre légal (RGPD)\n✔ Création de services divers et réutilisations variées",
+      "sub_title": "Un compte utilisateur est obligatoire pour partager des photos",
+      "description": "✔ Partager des photos pour les rendre accessible à tous\n✔ Images automatiquement floutées pour le respect du cadre légal (RGPD)\n✔ Création de services divers et réutilisations variées\n\n⚠️️️ Aujourd'hui, une ligne de commande permet de partager de grands volumes d'images et bientôt d'autres moyens seront disponibles.",
      "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": "⚠️️️ Bientôt d'autres moyens seront disponible pour télécharger des photos",
-      "footer_description_terminal": "La license utilisée pour les photos est <a href='https://www.etalab.gouv.fr/licence-ouverte-open-licence/'  style='color:#808080'>la license ouverte</a>.",
-      "user_account_title": "Vous n'avez pas de compte utilisateur ?",
+      "footer_description_terminal": "La license utilisée pour les photos est <a href='https://www.etalab.gouv.fr/licence-ouverte-open-licence/' target='_blank' style='color:#808080'>la license ouverte</a>.",
      "cli_title": "Vous voulez accéder à la CLI complète ?",
      "user_account_button": "Créer un compte",
-      "description_terminal": "Cette ligne de commande permet de télécharger des photos.\n\n1. Installer le CLI geovisio\n2. Tester que le CLI fonctionne\n3. Lancer la commande d'upload d'images\n\nAprès le paramètre '--api-url' vous devez renseigner l'url de lapi de l'instance où verser les photos et le chemin du dossier sur votre machine où se trouvent les photos.",
-      "terminal_install": "# Installer le CLI : pip install geovisio_cli",
-      "terminal_test": "# Tester le CLI geovisio : geovisio --help",
+      "description_terminal": "Cette ligne de commande permet de partager des photos.\n\n1. Installer le CLI geovisio\n2. Lancer la commande d'upload d'images\n\nAprès le paramètre '--api-url' vous devez renseigner l'url de lapi de l'instance où verser les photos et le chemin du dossier sur votre machine où se trouvent les photos.",
+      "terminal_install": "pip install geovisio_cli",
      "terminal_text_logged": "geovisio upload --api-url https://panoramax.ign.fr <DOSSIER_PHOTOS>",
      "terminal_text_not_logged": "geovisio upload --api-url https://panoramax.ign.fr --user \"user name\" <DOSSIER_PHOTOS>",
      "button_copy": "Copier"
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -16,7 +16,7 @@ const routes: Array<RouteRecordRaw> = [
    component: MyAccountView
  },
  {
-    path: '/verser',
+    path: '/partager-des-photos',
    name: 'upload',
    component: UploadView
  }
--- a/src/views/UploadView.vue
+++ b/src/views/UploadView.vue
@@ -1,7 +1,7 @@
 <template>
  <Header />
  <main class="entry-page">
-    <section class="section-upload section-color">
+    <section id="sec-1" class="section-upload section-color">
      <div class="wrapper-upload">
        <div class="wrapper-upload-text">
          <h1 class="upload-title">{{ $t('pages.upload.title') }}</h1>
@@ -13,20 +13,19 @@
              />
            </div>
          </div>
-          <h2 class="upload-subtitle">
-            {{ $t('pages.upload.sub_title') }}
-          </h2>
          <p class="upload-text" v-html="$t('pages.upload.description')" />
-          <div class="wrapper-account">
+          <div v-if="!isLogged" class="wrapper-account">
            <h4 class="account-subtitle">
-              {{ $t('pages.upload.user_account_title') }}
+              {{ $t('pages.upload.sub_title') }}
            </h4>
-            <Link
-              :text="$t('pages.upload.user_account_button')"
-              type="external"
-              look="button white"
-              :path="loginUrl"
-            />
+            <div class="entry-link">
+              <Link
+                :text="$t('pages.upload.user_account_button')"
+                type="external"
+                look="button white"
+                :path="loginUrl"
+              />
+            </div>
          </div>
        </div>
        <div class="entry-image desktop">
@@ -39,18 +38,27 @@
        </div>
      </div>
    </section>
-    <section class="section-upload">
+    <div class="entry-button-down">
+      <Link
+        :href="hrefSection"
+        type="external"
+        :icon="icon"
+        look="button--rounded"
+        @trigger="triggerHref"
+      />
+    </div>
+    <section id="sec-2" class="section-upload">
      <div class="wrapper-upload">
        <div class="entry-terminal">
          <div class="terminal">
-            <Terminal :text="terminalText" />
+            <Terminal
+              :text-upload="terminalTextUpload"
+              :text-install="terminalTextInstall"
+            />
          </div>
        </div>
        <div class="wrapper-upload-text">
          <h2 class="upload-title">{{ $t('pages.upload.title_terminal') }}</h2>
-          <h3 class="upload-subtitle">
-            {{ $t('pages.upload.sub_title_terminal') }}
-          </h3>
          <p
            class="upload-text"
            v-html="$t('pages.upload.description_terminal')"
@@ -63,12 +71,14 @@
            <h4 class="account-subtitle">
              {{ $t('pages.upload.cli_title') }}
            </h4>
-            <Link
-              :text="$t('pages.upload.button')"
-              type="external"
-              look="button"
-              path="https://gitlab.com/geovisio/cli"
-            />
+            <div class="entry-link">
+              <Link
+                :text="$t('pages.upload.button')"
+                type="external"
+                look="button"
+                path="https://gitlab.com/geovisio/cli"
+              />
+            </div>
          </div>
        </div>
      </div>
@@ -81,20 +91,33 @@ import Link from '@/components/Link.vue'
 import Header from '@/components/Header.vue'
 import Terminal from '@/components/Terminal.vue'
 import { useCookies } from 'vue3-cookies'
-import { computed } from 'vue'
+import { computed, ref } from 'vue'
 import { useI18n } from 'vue-i18n'
+import { useRoute } from 'vue-router'
 const { cookies } = useCookies()
 const { t } = useI18n()
+const route = useRoute()
+
+let hrefSection = ref<string>('#sec-2')
+let icon = ref<string>('bi bi-chevron-down')

 const loginUrl = computed<string>(
  () => `${import.meta.env.VITE_API_URL}api/auth/login`
 )
 const isLogged = computed((): boolean => !!cookies.get('user_id'))
-const terminalText = computed((): string =>
+const terminalTextInstall = computed((): string =>
+  t('pages.upload.terminal_install')
+)
+const terminalTextUpload = computed((): string =>
  isLogged
    ? t('pages.upload.terminal_text_logged')
    : t('pages.upload.terminal_text_not_logged')
 )
+function triggerHref(): void {
+  icon.value =
+    route.hash === '#sec-2' ? 'bi bi-chevron-down' : 'bi bi-chevron-up'
+  hrefSection.value = route.hash === '#sec-2' ? '#sec-1' : '#sec-2'
+}
 </script>

 <style lang="scss" scoped>
@@ -102,14 +125,12 @@ const terminalText = computed((): string =>
  @include text(h1);
  margin-bottom: 4rem;
 }
-.upload-subtitle {
-  margin-bottom: 2rem;
-  @include text(h2);
-}
 .account-subtitle {
-  font-weight: normal;
  @include text(h4);
 }
+.entry-link {
+  margin-top: 1rem;
+}
 .upload-text {
  @include text(m-regular);
 }
@@ -140,9 +161,10 @@ const terminalText = computed((): string =>
 .wrapper-account {
  display: flex;
  align-items: center;
+  flex-wrap: wrap;
  justify-content: space-between;
  margin-top: 3rem;
-  padding-top: 2rem;
+  padding-top: 1rem;
  border-top: 0.1rem solid #e6e6e6;
 }
 .upload-button {
@@ -154,11 +176,12 @@ const terminalText = computed((): string =>
  border-radius: 1rem;
  padding: 1rem;
  border: 1px solid black;
-  width: 85%;
+  width: 75%;
  height: fit-content;
 }
 .entry-image {
  display: flex;
+  justify-content: center;
  width: 35%;
  overflow: hidden;
  margin-left: 6rem;
@@ -174,6 +197,12 @@ const terminalText = computed((): string =>
 .responsive {
  display: none;
 }
+.entry-button-down {
+  z-index: 1;
+  position: fixed;
+  right: 2rem;
+  bottom: calc(20vh - 10.5rem);
+}
@media (max-width: 1024px) {
  .section-upload {
    height: initial;
@@ -247,10 +276,14 @@ const terminalText = computed((): string =>
    margin-bottom: 3rem;
  }
  .wrapper-account {
+    padding-top: 3rem;
    flex-direction: column;
  }
  .account-subtitle {
    margin-bottom: 2rem;
  }
+  .entry-button-down {
+    display: none;
+  }
 }
 </style>
--- a/yarn.lock
+++ b/yarn.lock
@@ -5648,6 +5648,11 @@ vue3-cookies@^1.0.6:
  dependencies:
    vue "^3.0.0"

+vue3-smooth-scroll@^0.8.1:
+  version "0.8.1"
+  resolved "https://registry.yarnpkg.com/vue3-smooth-scroll/-/vue3-smooth-scroll-0.8.1.tgz#c2de7dc33c0da8f195bbd70ac27b02c9cb1bd44c"
+  integrity sha512-9EN1aiBT2RtkIe1MoGiyGjUoLmqmlJ96R9/QVCylaiurHQ7oGu1SPzEoGJyxdhCa1q3qyMcX/pne1oTAn1UaoQ==
+
 vue@^3.0.0, vue@^3.2.45:
  version "3.2.47"
  resolved "https://registry.npmjs.org/vue/-/vue-3.2.47.tgz"