From 5f615fc5b532e1955cf7f016965ca9351bca8ef7 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Timoth=C3=A9e?= <tpoussard@neogeo.fr>
Date: Tue, 2 Aug 2022 18:15:04 +0200
Subject: [PATCH] fix responsive feature detail header, fix undefined project &
mobile table overflow
---
.../Feature/Detail/FeatureHeader.vue | 302 ++++++++++--------
.../FeaturesListAndMap/FeatureListTable.vue | 7 +
src/views/Project/FeaturesListAndMap.vue | 9 +-
3 files changed, 176 insertions(+), 142 deletions(-)
diff --git a/src/components/Feature/Detail/FeatureHeader.vue b/src/components/Feature/Detail/FeatureHeader.vue
index c90be13b..ea11e1c1 100644
--- a/src/components/Feature/Detail/FeatureHeader.vue
+++ b/src/components/Feature/Detail/FeatureHeader.vue
@@ -2,145 +2,160 @@
<div>
<h1 class="ui header">
<div class="content">
- <span
- v-if="fastEditionMode && form && canEditFeature"
- class="form ui half-block"
- >
- <input
- id="feature_detail_title_input"
- :value="form.title"
- type="text"
- required
- maxlength="128"
- name="title"
- @blur="updateTitle"
- >
- </span>
- <span v-else>
- {{ currentFeature.title || currentFeature.feature_id }}
- </span>
-
- <div class="ui icon right floated compact buttons">
- <router-link
- v-if="displayToListButton"
- id="feature-detail-to-features-list"
- :to="{
- name: 'liste-signalements',
- params: { slug: $route.params.slug },
- }"
- custom
- >
- <div class="ui button tiny-margin teal">
- <i class="ui icon arrow right" />
- Retour à la liste des signalements
- </div>
- </router-link>
- <span
- v-if="featuresCount"
- id="feature-count"
- class="ui button tiny-margin basic"
+ <div class="two-block">
+ <div
+ v-if="fastEditionMode && form && canEditFeature"
+ class="form ui half-block"
>
- {{ parseInt($route.query.offset) + 1 }} sur {{ featuresCount }}
- </span>
- <button
- v-if="queryparams"
- id="previous-feature"
- :class="['ui button button-hover-green tiny-margin', { disabled: queryparams.previous < 0 }]"
- data-tooltip="Voir le précédent signalement"
- data-position="bottom center"
- @click="toFeature('previous')"
+ <input
+ id="feature_detail_title_input"
+ :value="form.title"
+ type="text"
+ required
+ maxlength="128"
+ name="title"
+ @blur="updateTitle"
+ >
+ </div>
+ <div
+ v-else
+ class="ellipsis"
>
- <i
- class="angle left fitted icon"
- aria-hidden="true"
- />
- </button>
- <button
- v-if="queryparams"
- id="next-feature"
- :class="[
- 'ui button button-hover-green tiny-margin',
- { disabled: queryparams.next >= featuresCount }
- ]"
- data-tooltip="Voir le prochain signalement"
- data-position="bottom center"
- @click="toFeature('next')"
- >
- <i
- class="angle right fitted icon"
- aria-hidden="true"
- />
- </button>
+ {{ currentFeature.title || currentFeature.feature_id }}
+ </div>
- <button
- v-if="fastEditionMode && canEditFeature"
- id="save-fast-edit"
- :class="['ui button button-hover-orange tiny-margin', { disabled: false }]"
- data-tooltip="Enregistrer les modifications"
- data-position="bottom center"
- @click="$store.dispatch('feature/SEND_FEATURE', $route.name)"
+ <div
+ id="feature-actions"
+ class="ui icon compact buttons"
>
- <i
- class="save fitted icon"
- aria-hidden="true"
- />
- </button>
+ <div>
+ <router-link
+ v-if="displayToListButton"
+ id="feature-detail-to-features-list"
+ :to="{
+ name: 'liste-signalements',
+ params: { slug: $route.params.slug },
+ }"
+ custom
+ >
+ <div class="ui button tiny-margin teal">
+ <i class="ui icon arrow right" />
+ Retour à la liste des signalements
+ </div>
+ </router-link>
+ </div>
+ <div>
+ <span
+ v-if="featuresCount"
+ id="feature-count"
+ class="ui button tiny-margin basic"
+ >
+ {{ parseInt($route.query.offset) + 1 }} sur {{ featuresCount }}
+ </span>
+ <button
+ v-if="queryparams"
+ id="previous-feature"
+ :class="['ui button button-hover-green tiny-margin', { disabled: queryparams.previous < 0 }]"
+ data-tooltip="Voir le précédent signalement"
+ data-position="bottom center"
+ @click="toFeature('previous')"
+ >
+ <i
+ class="angle left fitted icon"
+ aria-hidden="true"
+ />
+ </button>
+ <button
+ v-if="queryparams"
+ id="next-feature"
+ :class="[
+ 'ui button button-hover-green tiny-margin',
+ { disabled: queryparams.next >= featuresCount }
+ ]"
+ data-tooltip="Voir le prochain signalement"
+ data-position="bottom center"
+ @click="toFeature('next')"
+ >
+ <i
+ class="angle right fitted icon"
+ aria-hidden="true"
+ />
+ </button>
+ </div>
+ <div>
+ <button
+ v-if="fastEditionMode && canEditFeature"
+ id="save-fast-edit"
+ :class="['ui button button-hover-orange tiny-margin', { disabled: false }]"
+ data-tooltip="Enregistrer les modifications"
+ data-position="bottom center"
+ @click="$store.dispatch('feature/SEND_FEATURE', $route.name)"
+ >
+ <i
+ class="save fitted icon"
+ aria-hidden="true"
+ />
+ </button>
- <router-link
- v-if="permissions && permissions.can_create_feature"
- id="add-feature"
- :to="{
- name: 'ajouter-signalement',
- params: {
- slug_type_signal: $route.params.slug_type_signal || featureType.slug,
- },
- }"
- class="ui button button-hover-green tiny-margin"
- data-tooltip="Ajouter un signalement"
- data-position="bottom center"
- >
- <i
- class="plus icon"
- aria-hidden="true"
- />
- </router-link>
+ <router-link
+ v-if="permissions && permissions.can_create_feature"
+ id="add-feature"
+ :to="{
+ name: 'ajouter-signalement',
+ params: {
+ slug_type_signal: $route.params.slug_type_signal || featureType.slug,
+ },
+ }"
+ class="ui button button-hover-green tiny-margin"
+ data-tooltip="Ajouter un signalement"
+ data-position="bottom center"
+ >
+ <i
+ class="plus icon"
+ aria-hidden="true"
+ />
+ </router-link>
- <router-link
- v-if="slugSignal && canEditFeature"
- id="edit-feature"
- :to="{
- name: 'editer-signalement',
- params: {
- slug_signal: slugSignal,
- slug_type_signal: $route.params.slug_type_signal || featureType.slug,
- },
- query: $route.query
- }"
- class="ui button button-hover-orange tiny-margin"
- data-tooltip="Éditer le signalement"
- data-position="bottom center"
- >
- <i
- class="inverted grey pencil alternate icon"
- aria-hidden="true"
- />
- </router-link>
+ <router-link
+ v-if="slugSignal && canEditFeature"
+ id="edit-feature"
+ :to="{
+ name: 'editer-signalement',
+ params: {
+ slug_signal: slugSignal,
+ slug_type_signal: $route.params.slug_type_signal || featureType.slug,
+ },
+ query: $route.query
+ }"
+ class="ui button button-hover-orange tiny-margin"
+ data-tooltip="Éditer le signalement"
+ data-position="bottom center"
+ >
+ <i
+ class="inverted grey pencil alternate icon"
+ aria-hidden="true"
+ />
+ </router-link>
- <a
- v-if="canDeleteFeature && isOnline"
- id="currentFeature-delete"
- class="ui button button-hover-red tiny-margin"
- data-tooltip="Supprimer le signalement"
- data-position="bottom right"
- @click="$emit('setIsDeleting')"
- >
- <i
- class="inverted grey trash alternate icon"
- aria-hidden="true"
- />
- </a>
+ <a
+ v-if="canDeleteFeature && isOnline"
+ id="currentFeature-delete"
+ class="ui button button-hover-red tiny-margin"
+ data-tooltip="Supprimer le signalement"
+ data-position="bottom right"
+ @click="$emit('setIsDeleting')"
+ >
+ <i
+ class="inverted grey trash alternate icon"
+ aria-hidden="true"
+ />
+ </a>
+ </div>
+ </div>
</div>
- <div class="ui hidden divider" />
+
+ <!-- <div class="ui hidden divider" /> -->
+
<div class="sub header prewrap">
<span
v-if="fastEditionMode && canEditFeature && form"
@@ -253,20 +268,31 @@ export default {
</script>
<style>
-#next-feature {
- margin-right: .5rem !important;
-}
#feature-detail-to-features-list {
line-height: 0;
margin-right: 5px;
}
-.half-block {
- display: inline-block;
- width: 50%;
-}
#feature_detail_title_input {
font-weight: bold;
font-size: 2em;
padding: .25em;
}
+.two-block {
+ display: flex;
+ justify-content: space-between;
+ margin-bottom: .5em;
+}
+#feature-actions > div {
+ margin-left: .5rem;
+}
+
+@media screen and (max-width: 700px) {
+ .two-block {
+ flex-direction: column-reverse;
+ }
+ #feature-actions.ui.buttons {
+ flex-direction: column;
+ align-items: flex-end;
+ }
+}
</style>
\ No newline at end of file
diff --git a/src/components/Project/FeaturesListAndMap/FeatureListTable.vue b/src/components/Project/FeaturesListAndMap/FeatureListTable.vue
index 775c08b1..69cd85d8 100644
--- a/src/components/Project/FeaturesListAndMap/FeatureListTable.vue
+++ b/src/components/Project/FeaturesListAndMap/FeatureListTable.vue
@@ -207,6 +207,7 @@
feature_type_slug: feature.feature_type.slug,
},
}"
+ class="ellipsis space-left"
>
{{ feature.feature_type.title }}
</router-link>
@@ -220,6 +221,7 @@
},
query: { ...queryparams, offset: queryparams.offset + index }
}"
+ class="ellipsis space-left"
>
{{ feature.title || feature.feature_id }}
</router-link>
@@ -727,6 +729,11 @@ and also iPads specifically.
text-align: center;
margin: .5em 0;
}
+ .space-left {
+ max-width: 100%;
+ display: inline-block;
+ padding-left: 3em;
+ }
}
@media only screen and (max-width: 410px) {
.ui.table tr td {
diff --git a/src/views/Project/FeaturesListAndMap.vue b/src/views/Project/FeaturesListAndMap.vue
index fecd4752..36dfa0b2 100644
--- a/src/views/Project/FeaturesListAndMap.vue
+++ b/src/views/Project/FeaturesListAndMap.vue
@@ -180,10 +180,11 @@ export default {
mounted() {
if (!this.project) {
// Chargements des features et infos projet en cas d'arrivée directe sur la page ou de refresh
- this.$store.dispatch('projects/GET_PROJECT', this.projectSlug);
- this.$store
- .dispatch('projects/GET_PROJECT_INFO', this.projectSlug)
- .then(() => this.initMap());
+ Promise.all([
+ this.$store.dispatch('projects/GET_PROJECT', this.projectSlug),
+ this.$store.dispatch('projects/GET_PROJECT_INFO', this.projectSlug)
+ ])
+ .then(()=> this.initMap());
} else {
this.initMap();
}
--
GitLab