Skip to content
Snippets Groups Projects
Commit a52d7b7e authored by Sébastien DA ROCHA's avatar Sébastien DA ROCHA :bicyclist:
Browse files

Merge branch 'redmine-issues/14460' into 'develop' 

REDMINE_ISSUE-14460|Responsive - les grands titres débordent et en édition rapide champ très petit

See merge request geocontrib/geocontrib-frontend!457
parents 2cb414eb 5f615fc5
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
src/components/Feature/Detail/FeatureHeader.vue
+ 164
− 138
View file @ a52d7b7e
......@@ -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
src/components/Project/FeaturesListAndMap/FeatureListTable.vue
+ 7
− 0
View file @ a52d7b7e
......@@ -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 {
......
src/views/Project/FeaturesListAndMap.vue
+ 5
− 4
View file @ a52d7b7e
......@@ -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();
}
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment