From 42e9b74d736e2ba48d1ae435fee79de1c1332955 Mon Sep 17 00:00:00 2001 From: Andreani Jean Date: Fri, 28 Apr 2023 11:49:47 +0200 Subject: [PATCH] edit text + add button down + fix some css --- package.json | 3 +- src/components/Header.vue | 2 +- src/components/Link.vue | 16 ++++++ src/components/Terminal.vue | 69 ++++++++++++++++++-------- src/locales/fr.json | 13 ++--- src/router/index.ts | 2 +- src/views/UploadView.vue | 97 +++++++++++++++++++++++++------------ yarn.lock | 5 ++ 8 files changed, 143 insertions(+), 64 deletions(-) diff --git a/package.json b/package.json index e81e6b0..e784f7b 100644 --- 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", diff --git a/src/components/Header.vue b/src/components/Header.vue index eb9261f..31cf2b4 100644 --- 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" />
  • diff --git a/src/components/Link.vue b/src/components/Link.vue index 7c3145a..152e893 100644 --- 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')" > @@ -110,6 +111,21 @@ const titleImg = computed(() => .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; diff --git a/src/components/Terminal.vue b/src/components/Terminal.vue index 598a60c..2d3e8b2 100644 --- a/src/components/Terminal.vue +++ b/src/components/Terminal.vue @@ -7,20 +7,35 @@
    - {{ $t('pages.upload.terminal_install') }} - {{ $t('pages.upload.terminal_test') }} -
    - ~{{ text }} +
    +
    + ~{{ textInstall }} +
    +
    +
    +
    +
    +
    + ~{{ textUpload }} +
    +
    +
    -
    -
    @@ -30,13 +45,14 @@ import Button from '@/components/Button.vue' import { computed, ref } from 'vue' let isCopied = ref(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; } } diff --git a/src/locales/fr.json b/src/locales/fr.json index 8fd175d..6aa40ce 100644 --- 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 la license ouverte.", - "user_account_title": "Vous n'avez pas de compte utilisateur ?", + "footer_description_terminal": "La license utilisée pour les photos est la license ouverte.", "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 ", "terminal_text_not_logged": "geovisio upload --api-url https://panoramax.ign.fr --user \"user name\" ", "button_copy": "Copier" diff --git a/src/router/index.ts b/src/router/index.ts index bad3b1b..49ef648 100644 --- a/src/router/index.ts +++ b/src/router/index.ts @@ -16,7 +16,7 @@ const routes: Array = [ component: MyAccountView }, { - path: '/verser', + path: '/partager-des-photos', name: 'upload', component: UploadView } diff --git a/src/views/UploadView.vue b/src/views/UploadView.vue index 145d863..918345e 100644 --- a/src/views/UploadView.vue +++ b/src/views/UploadView.vue @@ -1,7 +1,7 @@