SW/geovisio-website
2
0
Fork 0
forked from Ivasoft/geovisio-website
Code Pull Requests Packages Releases Activity

wip

Browse Source
This commit is contained in:
Andreani Jean
2023-04-18 14:58:16 +02:00
parent 4de519f8ee
commit 0824681d96
3 changed files with 90 additions and 37 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/Link.vue
View File

@@ -112,7 +112,7 @@ const titleImg = computed<string>(() =>
}
@media (max-width: 500px) {
.default {
font-size: 1.6rem;
font-size: 1.4rem;
}
}
</style>

5
src/locales/fr.json
View File

@@ -20,13 +20,12 @@
},
"upload": {
"title": "Partager mes photos sur l'instance",
"sub_title": "\uD83D\uDC69\u200D\uD83D\uDCBB Cette section nécessite d'avoir une compétence technique",
"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",
"footer_description": "Pour le moment, seul l'outil en ligne de commande est disponible pour verser des photos mais à terme d'autres moyens, comme une interface web, seront mis à disposition.",
"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": "\uD83D\uDC64 Un compte utilisateur est nécessaire pour utiliser l'outil",
"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.",
"user_account_title": "Vous n'avez pas de compte utilisateur ?",
"user_account_button": "Créer un compte",

120
src/views/UploadView.vue
View File

@@ -5,23 +5,31 @@
<div class="wrapper-upload">
<div class="wrapper-upload-text">
<h1 class="upload-title">{{ $t('pages.upload.title') }}</h1>
<div class="entry-image responsive">
<div class="image">
<img
src="@/assets/images/upload.png"
:alt="$t('pages.upload.alt_img_upload')"
/>
</div>
</div>
<h2 class="upload-subtitle">
{{ $t('pages.upload.sub_title') }}
</h2>
<p class="upload-text" v-html="$t('pages.upload.description')" />
<p class="upload-text grey">
{{ $t('pages.upload.footer_description') }}
</p>
<div class="upload-button">
<div class="wrapper-account">
<h4 class="account-subtitle">
{{ $t('pages.upload.user_account_title') }}
</h4>
<Link
:text="$t('pages.upload.button')"
:text="$t('pages.upload.user_account_button')"
type="external"
look="button"
path="https://gitlab.com/geovisio/cli"
look="button white"
:path="loginUrl"
/>
</div>
</div>
<div class="entry-image">
<div class="entry-image desktop">
<div class="image">
<img
src="@/assets/images/upload.png"
@@ -34,7 +42,17 @@
<section class="section-upload">
<div class="wrapper-upload">
<div class="entry-image entry-terminal">
<Terminal :text="terminalText" />
<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>
@@ -47,15 +65,12 @@
<p class="upload-text grey">
{{ $t('pages.upload.footer_description_terminal') }}
</p>
<div class="wrapper-account">
<h4 class="account-subtitle">
{{ $t('pages.upload.user_account_title') }}
</h4>
<div class="upload-button desktop">
<Link
:text="$t('pages.upload.user_account_button')"
:text="$t('pages.upload.button')"
type="external"
look="button white"
:path="loginUrl"
look="button"
path="https://gitlab.com/geovisio/cli"
/>
</div>
</div>
@@ -113,12 +128,12 @@ const terminalText = computed((): string =>
}
.wrapper-upload {
display: flex;
align-items: center;
align-items: initial;
justify-content: center;
}
.wrapper-upload-text {
margin-right: 4rem;
margin-left: 4rem;
padding-right: 4rem;
padding-left: 4rem;
width: 40%;
white-space: pre-wrap;
}
@@ -145,6 +160,7 @@ const terminalText = computed((): string =>
border-radius: 1rem;
padding: 1rem;
border: 1px solid black;
width: 85%;
}
.entry-image {
display: flex;
@@ -156,39 +172,74 @@ const terminalText = computed((): string =>
}
.entry-terminal {
width: 35%;
padding-right: 4rem;
padding-left: 4rem;
margin-right: 0;
}
.entry-image img {
width: 40rem;
width: 100%;
border-radius: 1rem;
}
@media (max-width: 768px) {
.entry-page {
padding-top: 6rem;
}
.responsive {
display: none;
}
@media (max-width: 1080px) {
.section-upload {
height: initial;
}
.entry-image {
width: 35rem;
}
.wrapper-upload {
flex-direction: column-reverse;
padding-top: 6rem;
padding-bottom: 6rem;
}
.wrapper-upload-text {
width: 100%;
margin-right: 0;
margin-top: 4rem;
}
.responsive {
display: block;
}
.desktop {
display: none;
}
.entry-image {
margin-left: 0;
margin-bottom: 4rem;
}
.entry-terminal {
width: 100%;
justify-content: initial;
}
.terminal {
width: 50%;
margin-right: 2rem;
margin-top: 2rem;
}
.responsive {
display: flex;
align-items: center;
}
}
@media (max-width: 768px) {
.entry-image {
width: 60%;
margin-right: 0;
margin-left: 0;
}
.wrapper-upload-text {
margin-left: 0;
margin-right: 0;
}
}
@media (max-width: 500px) {
.entry-page {
min-height: calc(100vh - 11rem);
padding-top: 15rem;
padding-top: 11rem;
}
.entry-image {
width: 25rem;
width: 100%;
}
.image {
width: 100%;
}
.upload-title {
font-size: 2.6rem;
@@ -197,6 +248,9 @@ const terminalText = computed((): string =>
.upload-subtitle {
font-size: 1.8rem;
}
.wrapper-upload-text {
margin-right: 0;
}
.upload-text {
font-size: 1.6rem;
margin-bottom: 3rem;