diff --git a/src/assets/styles/base.css b/src/assets/styles/base.css
index a38205b5f8de0dcfe82221e7cad6cf89b75c8444..df8db274df67aef7a68df5b5ffe993dbfb79aa85 100644
--- a/src/assets/styles/base.css
+++ b/src/assets/styles/base.css
@@ -71,13 +71,15 @@ body {
.no-margin {
margin: 0 !important;
}
-
.margin-top {
margin-top: 1rem;
}
-/* ---------------------------------- */
- /* UTILS */
-/* ---------------------------------- */
+.margin-bottom {
+ margin-bottom: 1rem;
+}
+.tiny-margin {
+ margin: 0.1rem 0 0.1rem 0.1rem !important;
+}
.ellipsis {
text-overflow: ellipsis;
overflow: hidden;
diff --git a/src/components/Project/Detail/ProjectFeatureTypes.vue b/src/components/Project/Detail/ProjectFeatureTypes.vue
index 05b6b3e703c13dc671d3b32526c8a3d98ed6fd9d..5cce295500d533837581acdbc0c18327de1355a8 100644
--- a/src/components/Project/Detail/ProjectFeatureTypes.vue
+++ b/src/components/Project/Detail/ProjectFeatureTypes.vue
@@ -43,7 +43,9 @@
icon
right
floated
- button button-hover-green
+ button
+ button-hover-green
+ tiny-margin
"
data-tooltip="Ajouter un signalement"
data-position="top right"
@@ -59,7 +61,7 @@
project &&
permissions &&
permissions.can_create_feature_type &&
- isOffline() !== true
+ isOnline
"
:to="{
name: 'dupliquer-type-signalement',
@@ -72,7 +74,9 @@
icon
right
floated
- button button-hover-green
+ button
+ button-hover-green
+ tiny-margin
"
data-tooltip="Dupliquer un type de signalement"
data-position="top right"
@@ -97,7 +101,7 @@
v-else
>
<a
- v-if="isProjectAdmin && isOffline() !== true"
+ v-if="isProjectAdmin && isOnline"
class="
ui
compact
@@ -105,7 +109,9 @@
icon
right
floated
- button button-hover-red
+ button
+ button-hover-red
+ tiny-margin
"
data-tooltip="Supprimer le type de signalement"
data-position="top center"
@@ -122,7 +128,7 @@
project &&
permissions &&
permissions.can_create_feature_type &&
- isOffline() !== true
+ isOnline
"
:to="{
name: 'editer-symbologie-signalement',
@@ -135,7 +141,9 @@
icon
right
floated
- button button-hover-orange
+ button
+ button-hover-orange
+ tiny-margin
"
data-tooltip="Éditer la symbologie du type de signalement"
data-position="top center"
@@ -152,7 +160,7 @@
type.is_editable &&
permissions &&
permissions.can_create_feature_type &&
- isOffline() !== true
+ isOnline
"
:to="{
name: 'editer-type-signalement',
@@ -165,7 +173,9 @@
icon
right
floated
- button button-hover-orange
+ button
+ button-hover-orange
+ tiny-margin
"
data-tooltip="Éditer le type de signalement"
data-position="top center"
@@ -213,7 +223,7 @@
v-if="
permissions &&
permissions.can_update_project &&
- isOffline() !== true
+ isOnline
"
:to="{
name: 'ajouter-type-signalement',
@@ -234,7 +244,7 @@
v-if="
permissions &&
permissions.can_update_project &&
- isOffline() !== true
+ isOnline
"
class="
ui
@@ -314,7 +324,7 @@
IDGO &&
permissions &&
permissions.can_update_project &&
- isOffline() !== true
+ isOnline
"
:to="{
name: 'catalog-import',
@@ -457,7 +467,8 @@ export default {
...mapState([
'configuration',
'isOnline',
- 'user_permissions'
+ 'user_permissions',
+ 'isOnline',
]),
...mapState('feature-type', [
'feature_types',
@@ -546,10 +557,6 @@ export default {
return false;
},
- isOffline() {
- return navigator.onLine === false;
- },
-
goToDocumentation() {
window.open('https://geocontrib.readthedocs.io/fr/latest/documentation_fonctionnelle/import_export/');
},
@@ -751,5 +758,4 @@ export default {
line-height: 2em;
color: teal;
}
-
</style>
diff --git a/src/components/Project/Detail/ProjectHeader.vue b/src/components/Project/Detail/ProjectHeader.vue
index dd049e9e255c99d5faccd98884884782bec758e1..c56cb750c0414bee19ffb6b72641c8d9a73d1862 100644
--- a/src/components/Project/Detail/ProjectHeader.vue
+++ b/src/components/Project/Detail/ProjectHeader.vue
@@ -2,52 +2,54 @@
<div class="project-header ui grid stackable">
<div class="row">
<div class="three wide middle aligned column">
- <img
- class="ui small spaced image"
- alt="Thumbnail du projet"
- :src="
- project.thumbnail.includes('default')
- ? require('@/assets/img/default.png')
- : DJANGO_BASE_URL + project.thumbnail + refreshId()
- "
- >
- <div class="ui hidden divider" />
- <div
- class="ui basic teal label"
- data-tooltip="Membres"
- >
- <i
- class="user icon"
- aria-hidden="true"
- />{{ project.nb_contributors }}
- </div>
- <div
- class="ui basic teal label"
- data-tooltip="Signalements publiés"
- >
- <i
- class="map marker icon"
- aria-hidden="true"
- />{{ project.nb_published_features }}
+ <div class="margin-bottom">
+ <img
+ class="ui small centered image"
+ alt="Thumbnail du projet"
+ :src="
+ project.thumbnail.includes('default')
+ ? require('@/assets/img/default.png')
+ : DJANGO_BASE_URL + project.thumbnail + refreshId()
+ "
+ >
</div>
- <div
- class="ui basic teal label"
- data-tooltip="Commentaires"
- >
- <i
- class="comment icon"
- aria-hidden="true"
- />{{
- project.nb_published_features_comments
- }}
+ <div class="centered">
+ <div
+ class="ui basic teal label tiny-margin"
+ data-tooltip="Membres"
+ >
+ <i
+ class="user icon"
+ aria-hidden="true"
+ />{{ project.nb_contributors }}
+ </div>
+ <div
+ class="ui basic teal label tiny-margin"
+ data-tooltip="Signalements publiés"
+ >
+ <i
+ class="map marker icon"
+ aria-hidden="true"
+ />{{ project.nb_published_features }}
+ </div>
+ <div
+ class="ui basic teal label tiny-margin"
+ data-tooltip="Commentaires"
+ >
+ <i
+ class="comment icon"
+ aria-hidden="true"
+ />{{
+ project.nb_published_features_comments
+ }}
+ </div>
</div>
</div>
<div class="nine wide column">
- <h1 class="ui header">
+ <h1 class="ui header margin-bottom">
{{ project.title }}
</h1>
- <div class="ui hidden divider" />
<div class="sub header">
{{ project.description }}
</div>
@@ -60,10 +62,10 @@
user &&
permissions &&
permissions.can_view_project &&
- isOffline() !== true
+ isOnline
"
id="subscribe-button"
- class="ui button button-hover-green"
+ class="ui button button-hover-green tiny-margin"
data-tooltip="S'abonner au projet"
data-position="top center"
data-variation="mini"
@@ -78,10 +80,10 @@
v-if="
permissions &&
permissions.can_update_project &&
- isOffline() !== true
+ isOnline
"
:to="{ name: 'project_edit', params: { slug } }"
- class="ui button button-hover-orange"
+ class="ui button button-hover-orange tiny-margin"
data-tooltip="Modifier le projet"
data-position="top center"
data-variation="mini"
@@ -92,9 +94,9 @@
/>
</router-link>
<a
- v-if="isProjectAdmin && isOffline() !== true"
+ v-if="isProjectAdmin && isOnline"
id="delete-button"
- class="ui button button-hover-red"
+ class="ui button button-hover-red tiny-margin"
data-tooltip="Supprimer le projet"
data-position="top center"
data-variation="mini"
@@ -109,7 +111,7 @@
<button
v-if="isProjectAdmin && !isSharedProject && project.generate_share_link"
- class="ui teal left labeled icon button share-button"
+ class="ui teal left labeled icon button share-button tiny-margin"
@click="copyLink"
>
<i
@@ -134,10 +136,13 @@
</div>
</div>
- <div v-if="arraysOffline.length > 0">
- {{ arraysOffline.length }} modification<span v-if="arraysOffline.length>1">s</span> en attente
+ <div
+ v-if="arraysOffline.length > 0"
+ class="centered"
+ >
+ {{ arraysOffline.length }} modification<span v-if="arraysOffline.length > 1">s</span> en attente
<button
- :disabled="isOffline"
+ :disabled="!isOnline"
class="ui fluid labeled teal icon button"
@click="sendOfflineFeatures"
>
@@ -188,7 +193,8 @@ export default {
]),
...mapState([
'user',
- 'user_permissions'
+ 'user_permissions',
+ 'isOnline',
]),
...mapGetters([
'permissions'
@@ -208,9 +214,6 @@ export default {
},
methods: {
- ...mapState([
- 'isOnline'
- ]),
...mapMutations('modals', [
'OPEN_PROJECT_MODAL'
]),
@@ -221,10 +224,6 @@ export default {
return '?ver=' + crypto.getRandomValues(array); // Compliant for security-sensitive use cases
},
- isOffline() {
- return navigator.onLine === false;
- },
-
copyLink() {
const sharedLink = window.location.href.replace('projet', 'projet-partage');
navigator.clipboard.writeText(sharedLink).then(()=> {
@@ -280,14 +279,17 @@ export default {
display: flex;
flex-direction: column;
- .ui.button, .ui.button .button, .tiny-margin {
- margin: 0.1rem 0 0.1rem 0.1rem !important;
- }
-
- .share-button {
- margin: 1em 0 0 0;
+ .ui.buttons {
+ justify-content: flex-end;
+ a.ui.button {
+ flex-grow: 0; /* avoid stretching buttons */
+ }
}
}
+ .centered {
+ margin: auto;
+ text-align: center;
+ }
}
}