Edit metadata + add Title header beta + disable buttons + link logo to Panoramax

2023-02-13 11:31:05 +01:00
parent e3aef14285
commit 4c7638ebd4
7 changed files with 97 additions and 9319 deletions
--- a/index.html
+++ b/index.html
@@ -9,20 +9,20 @@
      content="upgrade-insecure-requests"
    />

-    <title>Geovisio, la cartographie du monde</title>
+    <title>Instance Panoramax IGN Version Beta</title>
    <meta
      name="description"
-      content="Panoramax fédère les initiatives (des collectivités, des contributeurs OSM, de l’IGN...) pour favoriser l'émergence d'un géocommun de bases de vues immersives."
+      content="Panoramax, l’alternative libre pour photo-cartographier les territoires"
    />
-    <meta name="twitter:title" content="Panoramax" />
-    <meta name="og:title" content="Panoramax" />
+    <meta name="twitter:title" content="Instance Panoramax IGN Version Beta" />
+    <meta name="og:title" content="Instance Panoramax IGN Version Beta" />
    <meta
      name="twitter:description"
-      content="Panoramax fédère les initiatives (des collectivités, des contributeurs OSM, de l’IGN...) pour favoriser l'émergence d'un géocommun de bases de vues immersives."
+      content="Panoramax, l’alternative libre pour photo-cartographier les territoires"
    />
    <meta
      name="og:description"
-      content="Panoramax fédère les initiatives (des collectivités, des contributeurs OSM, de l’IGN...) pour favoriser l'émergence d'un géocommun de bases de vues immersives."
+      content="Panoramax, l’alternative libre pour photo-cartographier les territoires"
    />
  </head>
  <body>
--- a/src/assets/main.css
+++ b/src/assets/main.css
@@ -10,6 +10,7 @@ body {

 ul,
 ol,
+p,
 h1,
 h2,
 h3,
@@ -23,6 +24,7 @@ h5 {
 :root {
  --white: #ffffff;
  --black: #181818;
+  --red: #f70000;
 }
@media (hover: hover) {
  a:hover {
--- a/src/components/Header.vue
+++ b/src/components/Header.vue
@@ -1,18 +1,34 @@
 <template>
  <header class="header">
    <nav class="nav">
-      <router-link to="/">
-        <img src="@/assets/images/logo-panoramax.jpeg" alt="" class="logo" />
-      </router-link>
+      <div class="wrapper-logo">
+        <Link
+          type="external"
+          :image="{
+            url: 'logo-panoramax.jpeg',
+            alt: 'Logo Panoramax'
+          }"
+          path="https://panoramax.fr/"
+        />
+        <p>Instance Panoramax IGN <span class="beta">Version Beta</span></p>
+      </div>
      <ul class="nav-list">
        <li class="nav-list-item">
-          <Link :text="$t('general.header.contribute_text')" path="/" />
+          <Link
+            :text="$t('general.header.contribute_text')"
+            :disabled="true"
+            path="/"
+          />
        </li>
        <li class="nav-list-item">
-          <Link :text="$t('general.header.help_text')" path="/" />
+          <Link
+            :text="$t('general.header.help_text')"
+            :disabled="true"
+            path="/"
+          />
        </li>
        <li>
-          <Link icon="bi bi-person-circle" path="/" />
+          <Link icon="bi bi-person-circle" :disabled="true" path="/" />
        </li>
      </ul>
    </nav>
@@ -28,19 +44,32 @@ import Link from '@/components/Link.vue'
  height: 8rem;
  padding: 2rem;
 }
-.logo {
-  height: 4rem;
-  border-radius: 0.5rem;
-}
 .nav {
  display: flex;
  justify-content: space-between;
 }
+.wrapper-logo {
+  display: flex;
+  align-items: center;
+}
+.wrapper-logo p {
+  margin-bottom: 0;
+  margin-left: 1rem;
+  font-size: 1.6rem;
+}
 .nav-list {
  display: flex;
  align-items: center;
  margin-bottom: 0;
 }
+.beta {
+  color: var(--red);
+  border: 1px solid var(--red);
+  border-radius: 0.5rem;
+  padding: 0.3rem 0.5rem;
+  margin-left: 0.5rem;
+  font-size: 1.2rem;
+}
 .nav-list-item {
  margin-right: 2rem;
 }
--- a/src/components/Link.vue
+++ b/src/components/Link.vue
@@ -1,28 +1,52 @@
 <template>
  <a
-    v-if="props.look === 'external'"
+    v-if="props.type === 'external'"
    :href="props.path"
    target="_blank"
-    class="link"
+    :class="['link', disabled]"
+    :title="titleImg"
  >
    <i v-if="props.icon" :class="props.icon" class="icon"></i>
+    <img
+      v-if="props.image"
+      :src="img(props.image.url)"
+      :alt="props.image.alt"
+      class="logo"
+    />
    <span v-if="props.text">{{ props.text }}</span>
  </a>
-  <router-link v-else :to="props.path" class="link">
+  <router-link
+    v-else
+    :to="props.path"
+    :class="['link', { disabled }]"
+    :title="titleImg"
+  >
    <i v-if="props.icon" :class="props.icon" class="icon"></i>
    <span v-if="props.text">{{ props.text }}</span>
  </router-link>
 </template>

 <script lang="ts" setup>
+import { useI18n } from 'vue-i18n'
+import { computed } from 'vue'
+import { img } from '../utils/image'
+
+const { t } = useI18n()
+
 const props = defineProps({
  text: { type: String, default: null },
  path: { type: String, default: '' },
  look: { type: String, default: '' },
  type: { type: String, default: null },
  alt: { type: String, default: '' },
-  icon: { type: String, default: null }
+  icon: { type: String, default: null },
+  image: { type: Object, default: null },
+  disabled: { type: Boolean, default: false }
 })
+
+const titleImg = computed<string>(() =>
+  props.disabled ? t('general.header.contribute_text') : ''
+)
 </script>

 <style scoped>
@@ -33,9 +57,25 @@ const props = defineProps({
 .link {
  color: var(--black);
  text-decoration: none;
+  font-size: 1.4rem;
 }
 .link:hover {
  background-color: transparent;
  text-decoration: underline;
 }
+.logo {
+  height: 4rem;
+  border-radius: 0.5rem;
+}
+.disabled {
+  color: grey;
+  cursor: not-allowed;
+}
+.disabled .icon {
+  color: grey;
+  cursor: not-allowed;
+}
+.disabled:hover {
+  text-decoration: none;
+}
 </style>
--- a/src/locales/fr.json
+++ b/src/locales/fr.json
@@ -2,8 +2,9 @@
  "general": {
    "header": {
      "help_text": "Aide",
-      "contribute_text": "Verser des photos"
-    }
+      "contribute_text": "Partager vos photos"
+    },
+    "feature_not_available": "Fonctionnalité en cours de développement"
  },
  "pages": {}
 }
--- a/src/utils/image.ts
+++ b/src/utils/image.ts
@@ -0,0 +1,3 @@
+export function img(name: string) {
+  return new URL(`../assets/images/${name}`, import.meta.url)
+}
--- a/yarn.lock
+++ b/yarn.lock