new version upload

2023-04-19 09:51:34 +02:00
parent 5b5aa844a2
commit 4d1ffe46bd
11 changed files with 180 additions and 85 deletions
--- a/package.json
+++ b/package.json
@@ -48,6 +48,7 @@
    "jsdom": "^20.0.3",
    "npm-run-all": "^4.1.5",
    "prettier": "2.8.1",
+    "sass": "^1.62.0",
    "typescript": "~4.7.4",
    "vite": "^3.2.4",
    "vite-plugin-eslint": "^1.8.1",
--- a/src/assets/font-size.scss
+++ b/src/assets/font-size.scss
@@ -0,0 +1,44 @@
+@mixin text($size) {
+  @if $size == h1 {
+    font-weight: normal;
+    font-size: 4rem;
+
+    @media (max-width: 500px) {
+      font-size: 2.6rem;
+    }
+  }
+  @if $size == h2 {
+    font-weight: normal;
+    font-size: 2rem;
+
+    @media (max-width: 500px) {
+      font-size: 1.8rem;
+    }
+  }
+  @if $size == h4 {
+    font-weight: normal;
+    font-size: 1.6rem;
+  }
+  @if $size == m-regular {
+    font-size: 1.6rem;
+    font-weight: normal;
+  }
+  @if $size == m-r-regular {
+    font-size: 1.6rem;
+    font-weight: normal;
+    @media (max-width: 500px) {
+      font-size: 1.2rem;
+    }
+  }
+  @if $size == s-regular {
+    font-size: 1.4rem;
+    font-weight: normal;
+  }
+  @if $size == xs-r-regular {
+    font-size: 1.2rem;
+    font-weight: normal;
+    @media (max-width: 500px) {
+      font-size: 1rem;
+    }
+  }
+}
--- a/src/components/BetaText.vue
+++ b/src/components/BetaText.vue
@@ -5,14 +5,14 @@
  </p>
 </template>

-<style scoped>
+<style lang="scss" scoped>
 .beta {
+  @include text(xs-r-regular);
  color: var(--red);
  border: 1px solid var(--red);
  border-radius: 0.5rem;
  padding: 0.2rem 0.3rem;
  margin-left: 0.5rem;
-  font-size: 1.2rem;
  position: absolute;
  top: -1rem;
  right: -9.5rem;
@@ -21,7 +21,7 @@
  justify-content: center;
 }

-@media (max-width: 500px) {
+@media (max-width: 768px) {
  .instance-beta {
    display: flex;
    align-items: center;
@@ -31,7 +31,6 @@
    margin-bottom: 0;
  }
  .beta {
-    font-size: 1rem;
    position: relative;
    top: initial;
    right: initial;
--- a/src/components/Button.vue
+++ b/src/components/Button.vue
@@ -20,12 +20,12 @@ defineProps({
 })
 </script>

-<style scoped>
+<style lang="scss" scoped>
 .default {
+  @include text(s-regular);
  display: flex;
  align-items: center;
  border: none;
-  font-size: 1.4rem;
  background-color: transparent;
  padding: 1rem;
 }
@@ -51,9 +51,4 @@ defineProps({
  font-size: 2rem;
  color: var(--white);
 }
-@media (max-width: 500px) {
-  .default {
-    font-size: 1.6rem;
-  }
-}
 </style>
--- a/src/components/Header.vue
+++ b/src/components/Header.vue
@@ -1,6 +1,6 @@
 <template>
  <header class="header">
-    <div class="wrapper-beta-mobile">
+    <div class="responsive">
      <beta-text />
    </div>
    <nav class="nav">
@@ -12,13 +12,13 @@
          }"
          path="/"
        />
-        <div class="wrapper-beta-desktop">
+        <div class="desktop">
          <beta-text />
        </div>
      </div>
      <div class="wrapper-entries">
        <ul :class="['nav-list', { 'mobile-menu-open': !menuIsClosed }]">
-          <li class="nav-list-item">
+          <li class="nav-list-item desktop">
            <Link
              :text="$t('general.header.contribute_text')"
              icon="bi bi-upload"
@@ -31,6 +31,14 @@
          </li>
        </ul>
        <div class="wrapper-right-entries">
+          <div class="responsive">
+            <Link
+              :text="$t('general.header.contribute_text_responsive')"
+              icon="bi bi-upload"
+              look="button white"
+              path="/verser"
+            />
+          </div>
          <div class="item-with-sub">
            <Link
              type="external"
@@ -97,7 +105,7 @@ const userName = computed((): string =>
 )
 </script>

-<style scoped>
+<style lang="scss" scoped>
 .header {
  display: flex;
  align-items: center;
@@ -118,16 +126,16 @@ const userName = computed((): string =>
 .wrapper-entries {
  display: flex;
 }
-.wrapper-beta-mobile {
+.responsive {
  display: none;
 }
-.wrapper-beta-desktop {
+.desktop {
  display: block;
 }
 .wrapper-logo p {
+  @include text(m-r-regular);
  margin-bottom: 0;
  margin-left: 1rem;
-  font-size: 1.6rem;
  position: relative;
 }
 .nav-list {
@@ -141,6 +149,12 @@ const userName = computed((): string =>
  align-items: center;
  margin-left: 1rem;
 }
+.item-with-sub:hover .sub-nav-block {
+  display: block;
+}
+.item-with-sub:hover .chevron {
+  transform: rotate(180deg);
+}
 .chevron {
  margin-left: 0.5rem;
 }
@@ -167,12 +181,6 @@ const userName = computed((): string =>
  border-radius: 0.5rem;
  background-color: var(--grey);
 }
-.item-with-sub:hover .sub-nav-block {
-  display: block;
-}
-.item-with-sub:hover .chevron {
-  transform: rotate(180deg);
-}
 .nav-list-item {
  margin-right: 1.5rem;
 }
@@ -183,7 +191,7 @@ const userName = computed((): string =>
  display: flex;
  align-items: center;
 }
-@media (max-width: 500px) {
+@media (max-width: 768px) {
  .header {
    flex-direction: column;
    height: 11rem;
@@ -200,10 +208,10 @@ const userName = computed((): string =>
  .item-with-sub {
    margin-right: 1.5rem;
  }
-  .wrapper-beta-desktop {
+  .desktop {
    display: none;
  }
-  .wrapper-beta-mobile {
+  .responsive {
    width: 100%;
    display: block;
  }
@@ -225,9 +233,6 @@ const userName = computed((): string =>
    background-color: var(--white);
    box-shadow: 0 0.2rem 0.4rem rgb(0 0 0 / 10%);
  }
-  .wrapper-logo p {
-    font-size: 1.2rem;
-  }
  .menu-burger {
    display: block;
    background-color: transparent;
@@ -242,4 +247,9 @@ const userName = computed((): string =>
    margin-bottom: 2.5rem;
  }
 }
+@media (max-width: 500px) {
+  .item-with-sub {
+    margin-right: 1rem;
+  }
+}
 </style>
--- a/src/components/Link.vue
+++ b/src/components/Link.vue
@@ -52,18 +52,18 @@ const titleImg = computed<string>(() =>
 )
 </script>

-<style scoped>
+<style lang="scss" scoped>
 .icon {
  color: var(--black);
  font-size: 2.4rem;
  margin-right: 1rem;
 }
 .default {
+  @include text(s-regular);
  display: flex;
  align-items: center;
  color: var(--black);
  text-decoration: none;
-  font-size: 1.4rem;
 }
 .link:hover {
  background-color: transparent;
@@ -111,8 +111,12 @@ const titleImg = computed<string>(() =>
  text-decoration: none;
 }
@media (max-width: 500px) {
-  .default {
-    font-size: 1.4rem;
+  .icon {
+    margin-right: 0.5rem;
+  }
+  .button {
+    padding-right: 1rem;
+    padding-left: 1rem;
  }
 }
 </style>
--- a/src/components/Terminal.vue
+++ b/src/components/Terminal.vue
@@ -6,7 +6,13 @@
      <div class="round green"></div>
    </div>
    <div class="editor">
-      <code class="code"><span class="tilde">~</span>{{ text }}</code>
+      <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>
+      </code>
      <div class="entry-button">
        <Button
          :text="$t('pages.upload.button_copy')"
@@ -38,7 +44,7 @@ function copyText(): void {
 }
 </script>

-<style scoped>
+<style lang="scss" scoped>
 .header {
  display: flex;
  align-items: center;
@@ -50,7 +56,7 @@ function copyText(): void {
  width: 100%;
 }
 .editor {
-  padding: 4rem 2rem 2rem;
+  padding: 3rem 2rem 2rem;
  border-bottom-right-radius: 1.5rem;
  border-bottom-left-radius: 1.5rem;
  background-color: var(--black-pale);
@@ -58,14 +64,19 @@ function copyText(): void {
  width: 100%;
  position: relative;
 }
+.upload-command {
+  margin-top: 2rem;
+}
 .entry-button {
  position: absolute;
  bottom: 2rem;
  right: 2rem;
 }
 .code {
+  display: flex;
+  flex-direction: column;
  color: var(--white);
-  font-size: 1.4rem;
+  @include text(s-regular);
 }
 .tilde {
  color: var(--green);
@@ -86,4 +97,10 @@ function copyText(): void {
 .green {
  background-color: var(--green);
 }
+
+@media (max-width: 500px) {
+  .editor {
+    height: 27rem;
+  }
+}
 </style>
--- a/src/locales/fr.json
+++ b/src/locales/fr.json
@@ -2,7 +2,8 @@
  "general": {
    "header": {
      "help_text": "Aide",
-      "contribute_text": "Partager vos photos",
+      "contribute_text": "Partager des photos",
+      "contribute_text_responsive": "Verser",
      "alt_logo": "Logo de l'instance",
      "title": "Instance Panoramax IGN",
      "logout_text": "Déconnexion",
@@ -20,16 +21,19 @@
    },
    "upload": {
      "title": "Partager des photos",
-      "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",
+      "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",
      "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": "ℹ️ 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.",
+      "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 ?",
+      "cli_title": "Vous voulez accéder à la CLI complète ?",
      "user_account_button": "Créer un compte",
-      "description_terminal": "Vous pouvez utiliser directement cette ligne de commande pour télécharger des photos.",
+      "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",
      "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/views/UploadView.vue
+++ b/src/views/UploadView.vue
@@ -41,31 +41,27 @@
    </section>
    <section class="section-upload">
      <div class="wrapper-upload">
-        <div class="entry-image entry-terminal">
+        <div class="entry-terminal">
          <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>
          <h3 class="upload-subtitle">
            {{ $t('pages.upload.sub_title_terminal') }}
          </h3>
-          <p class="upload-text">
-            {{ $t('pages.upload.description_terminal') }}
-          </p>
+          <p
+            class="upload-text"
+            v-html="$t('pages.upload.description_terminal')"
+          ></p>
          <p class="upload-text grey">
            {{ $t('pages.upload.footer_description_terminal') }}
          </p>
-          <div class="upload-button desktop">
+          <div class="wrapper-account">
+            <h4 class="account-subtitle">
+              {{ $t('pages.upload.cli_title') }}
+            </h4>
            <Link
              :text="$t('pages.upload.button')"
              type="external"
@@ -100,19 +96,21 @@ const terminalText = computed((): string =>
 )
 </script>

-<style scoped>
+<style lang="scss" scoped>
 .upload-title {
+  @include text(h1);
  margin-bottom: 4rem;
-  font-weight: normal;
-  font-size: 4rem;
 }
 .upload-subtitle {
  margin-bottom: 2rem;
-  font-size: 2rem;
+  @include text(h2);
 }
 .account-subtitle {
  font-weight: normal;
-  font-size: 1.8rem;
+  @include text(h4);
+}
+.upload-text {
+  @include text(m-regular);
 }
 .section-upload {
  height: 100%;
@@ -132,17 +130,12 @@ const terminalText = computed((): string =>
  justify-content: center;
 }
 .wrapper-upload-text {
-  padding-right: 4rem;
-  padding-left: 4rem;
  width: 40%;
  white-space: pre-wrap;
 }
 .grey {
  color: var(--grey-dark);
 }
-.upload-text {
-  font-size: 1.6rem;
-}
 .wrapper-account {
  display: flex;
  align-items: center;
@@ -161,20 +154,17 @@ const terminalText = computed((): string =>
  padding: 1rem;
  border: 1px solid black;
  width: 85%;
+  height: fit-content;
 }
 .entry-image {
  display: flex;
-  justify-content: center;
-  margin-right: 4rem;
-  margin-left: 4rem;
  width: 35%;
  overflow: hidden;
+  margin-left: 6rem;
 }
 .entry-terminal {
-  width: 35%;
-  padding-right: 4rem;
-  padding-left: 4rem;
-  margin-right: 0;
+  margin-left: 0;
+  margin-right: 6rem;
 }
 .entry-image img {
  width: 100%;
@@ -183,7 +173,7 @@ const terminalText = computed((): string =>
 .responsive {
  display: none;
 }
-@media (max-width: 1080px) {
+@media (max-width: 1024px) {
  .section-upload {
    height: initial;
  }
@@ -210,17 +200,22 @@ const terminalText = computed((): string =>
    justify-content: initial;
  }
  .terminal {
-    width: 50%;
-    margin-right: 2rem;
-    margin-top: 2rem;
+    width: 100%;
+    margin-top: 4rem;
  }
 }
@media (max-width: 768px) {
+  .entry-page {
+    padding-top: 11rem;
+  }
  .entry-image {
    width: 60%;
    margin-right: 0;
    margin-left: 0;
  }
+  .entry-terminal {
+    width: 100%;
+  }
  .wrapper-upload-text {
    margin-left: 0;
    margin-right: 0;
@@ -233,23 +228,28 @@ const terminalText = computed((): string =>
  }
  .entry-image {
    width: 100%;
+    padding-right: 0;
+    padding-left: 0;
  }
  .image {
    width: 100%;
  }
  .upload-title {
-    font-size: 2.6rem;
    margin-bottom: 3rem;
  }
-  .upload-subtitle {
-    font-size: 1.8rem;
-  }
  .wrapper-upload-text {
    margin-right: 0;
+    padding-right: 0;
+    padding-left: 0;
  }
  .upload-text {
-    font-size: 1.6rem;
    margin-bottom: 3rem;
  }
+  .wrapper-account {
+    flex-direction: column;
+  }
+  .account-subtitle {
+    margin-bottom: 2rem;
+  }
 }
 </style>
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -15,6 +15,13 @@ export default defineConfig({
  },
  base: '/',
  plugins: [vue(), eslintPlugin()],
+  css: {
+    preprocessorOptions: {
+      scss: {
+        additionalData: '@import "@/assets/font-size.scss";'
+      }
+    }
+  },
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url)),
--- a/yarn.lock
+++ b/yarn.lock
@@ -1517,7 +1517,7 @@ check-error@^1.0.2:
  resolved "https://registry.npmjs.org/check-error/-/check-error-1.0.2.tgz"
  integrity sha512-BrgHpW9NURQgzoNyjfq0Wu6VFO6D7IZEmJNdtgNqpzGG8RuNFHt2jQxWlAs4HMe119chBnv+34syEZtc6IhLtA==

-chokidar@^3.4.2, chokidar@^3.5.3:
+"chokidar@>=3.0.0 <4.0.0", chokidar@^3.4.2, chokidar@^3.5.3:
  version "3.5.3"
  resolved "https://registry.npmjs.org/chokidar/-/chokidar-3.5.3.tgz"
  integrity sha512-Dr3sfKRP6oTcjf2JmUmFJfeVMvXBdegxB0iVQ5eb2V10uFJUCAS8OByZdVAyVb8xXNz3GjjTgj9kLWsZTqE6kw==
@@ -2939,6 +2939,11 @@ ignore@^5.2.0:
  resolved "https://registry.npmjs.org/ignore/-/ignore-5.2.4.tgz"
  integrity sha512-MAb38BcSbH0eHNBxn7ql2NH/kX33OkB3lZ1BNdh7ENeRChHTYsTvWrMubiIAMNS2llXEEgZ1MUOBtXChP3kaFQ==

+immutable@^4.0.0:
+  version "4.3.0"
+  resolved "https://registry.yarnpkg.com/immutable/-/immutable-4.3.0.tgz#eb1738f14ffb39fd068b1dbe1296117484dd34be"
+  integrity sha512-0AOCmOip+xgJwEVTQj1EfiDDOkPmuyllDuTuEX+DDXUgapLAsBIfkg3sxCYyCEA8mQqZrrxPUGjcOQ2JS3WLkg==
+
 import-fresh@^3.0.0, import-fresh@^3.1.0, import-fresh@^3.2.1:
  version "3.3.0"
  resolved "https://registry.npmjs.org/import-fresh/-/import-fresh-3.3.0.tgz"
@@ -4816,6 +4821,15 @@ safe-regex-test@^1.0.0:
  resolved "https://registry.npmjs.org/safer-buffer/-/safer-buffer-2.1.2.tgz"
  integrity sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==

+sass@^1.62.0:
+  version "1.62.0"
+  resolved "https://registry.yarnpkg.com/sass/-/sass-1.62.0.tgz#3686b2195b93295d20765135e562366b33ece37d"
+  integrity sha512-Q4USplo4pLYgCi+XlipZCWUQz5pkg/ruSSgJ0WRDSb/+3z9tXUOkQ7QPYn4XrhZKYAK4HlpaQecRwKLJX6+DBg==
+  dependencies:
+    chokidar ">=3.0.0 <4.0.0"
+    immutable "^4.0.0"
+    source-map-js ">=0.6.2 <2.0.0"
+
 saxes@^6.0.0:
  version "6.0.0"
  resolved "https://registry.npmjs.org/saxes/-/saxes-6.0.0.tgz"
@@ -4927,7 +4941,7 @@ slash@^3.0.0:
  resolved "https://registry.npmjs.org/slash/-/slash-3.0.0.tgz"
  integrity sha512-g9Q1haeby36OSStwb4ntCGGGaKsaVSjQ68fBxoQcutl5fS1vuY18H3wSt3jFyFtrkx+Kz0V1G85A4MyAdDMi2Q==

-source-map-js@^1.0.2:
+"source-map-js@>=0.6.2 <2.0.0", source-map-js@^1.0.2:
  version "1.0.2"
  resolved "https://registry.npmjs.org/source-map-js/-/source-map-js-1.0.2.tgz"
  integrity sha512-R0XvVJ9WusLiqTCEiGCmICCMplcCkIwwR11mOSD9CR5u+IXYdiseeEuXCVAjS54zqwkLcPNnmU4OeJ6tUrWhDw==