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

Merge branch 'evol/redmine-ticket-11083-full-responsive-design' into 'develop' 

Evol/redmine ticket 11083 full responsive design

See merge request geocontrib/geocontrib-frontend!38
parents b901b8ed 33fabe99
No related branches found
No related tags found
1 merge request!38Evol/redmine ticket 11083 full responsive design
Hide whitespace changes
Inline Side-by-side
src/App.vue
+ 64
− 38
View file @ 0d299c0c
<template>
<div v-frag>
<header class="header-menu">
<div class="ui container">
<div class="menu container">
<div class="ui inverted icon menu">
<router-link to="/" class="header item">
<img
class="ui mini right spaced image"
src="@/assets/img/logo-neogeo-circle.png"
/>
<!-- :src="LOGO_PATH" -->
{{ getApplicationName() }}
<span class="desktop">
{{ APPLICATION_NAME }}
</span>
</router-link>
<div
id="menu-dropdown"
:class="['ui dropdown item', { 'active visible': menuIsOpen }]"
v-if="project"
:class="[
'ui dropdown item floated right',
{ 'active visible': menuIsOpen },
]"
@click="menuIsOpen = !menuIsOpen"
>
Projet : {{ project.title }}
<span v-if="project"> Projet : {{ project.title }} </span>
<i class="dropdown icon"></i>
<div
:class="['menu', { 'visible transition': menuIsOpen }]"
style="z-index: 401"
>
<router-link
v-if="project"
:to="{
name: 'project_detail',
params: { slug: project.slug },
......@@ -34,6 +38,7 @@
<i class="home icon"></i>Accueil
</router-link>
<router-link
v-if="project"
:to="{
name: 'liste-signalements',
params: { slug: project.slug },
......@@ -44,7 +49,7 @@
</router-link>
<router-link
v-if="user.is_administrator"
v-if="project && user.is_administrator"
:to="{
name: 'project_mapping',
params: { slug: project.slug },
......@@ -54,7 +59,7 @@
<i class="map icon"></i>Fonds cartographiques
</router-link>
<router-link
v-if="user.is_administrator"
v-if="project && user.is_administrator"
:to="{
name: 'project_members',
params: { slug: project.slug },
......@@ -63,30 +68,28 @@
>
<i class="users icon"></i>Membres
</router-link>
</div>
</div>
<div class="right menu">
<router-link v-if="user" to="/my_account/" class="item">
{{ userFullname || user.username || "Utilisateur inconnu" }}
</router-link>
<div
v-if="user && user.is_administrator"
class="item ui label vertical"
>
<span v-if="USER_LEVEL_PROJECTS && project">
{{ USER_LEVEL_PROJECTS[project.slug] }}</span
<router-link v-if="user" to="/my_account/" class="item">
{{ userFullname || user.username || "Utilisateur inconnu" }}
</router-link>
<div
v-if="user && user.is_administrator"
class="item ui label vertical no-hover"
>
<span v-if="USER_LEVEL_PROJECTS && project">
{{ USER_LEVEL_PROJECTS[project.slug] }}</span
>
<br />
<span v-if="user.is_administrator"> Gestionnaire métier </span>
</div>
<!-- // todo : find out SSO_SETTED in django -->
<a v-if="user && !SSO_SETTED" @click="logout" class="item"
><i class="ui logout icon"></i>
</a>
<router-link v-else-if="!user" to="/connexion/" class="item"
>Se Connecter</router-link
>
<br />
<span v-if="user.is_administrator"> Gestionnaire métier </span>
</div>
<!-- // todo : find out SSO_SETTED in django -->
<a v-if="user && !SSO_SETTED" @click="logout" class="item"
><i class="ui logout icon"></i>
</a>
<router-link v-else-if="!user" to="/connexion/" class="item"
>Se Connecter</router-link
>
</div>
</div>
</div>
......@@ -143,6 +146,7 @@ export default {
data() {
return {
menuIsOpen: false,
rightMenuIsOpen: true,
messages: null,
};
},
......@@ -156,8 +160,9 @@ export default {
"configuration",
]),
...mapGetters(["project"]),
//LOGO_PATH: () => require(`${configuration.VUE_APP_LOGO_PATH}`),
//APPLICATION_NAME: () => this.configuration.VUE_APP_APPLICATION_NAME,
APPLICATION_NAME: function () {
return this.configuration.VUE_APP_APPLICATION_NAME;
},
PACKAGE_VERSION: () => process.env.PACKAGE_VERSION || "0",
userFullname: function () {
if (this.user.first_name || this.user.last_name)
......@@ -165,17 +170,17 @@ export default {
return null;
},
},
methods: {
logout() {
this.$store.dispatch("LOGOUT");
},
getApplicationName() {
return this.configuration.VUE_APP_APPLICATION_NAME;
},
clickOutsideMenu(e) {
if (!e.target.closest("#menu-dropdown")) this.menuIsOpen = false;
},
},
created() {
window.addEventListener("mousedown", this.clickOutsideMenu);
},
......@@ -190,10 +195,6 @@ export default {
@import "./assets/styles/base.css";
@import "./assets/resources/semantic-ui-2.4.2/semantic.min.css";
.header-menu {
min-width: 560px;
}
body {
height: 100vh;
margin: 0;
......@@ -220,5 +221,30 @@ footer {
flex-direction: column;
justify-content: center;
}
@media screen and (min-width: 560px) {
.header-menu {
min-width: 560px;
}
.menu.container {
width: auto !important;
margin-left: 1em !important;
margin-right: 1em !important;
}
}
@media screen and (max-width: 560px) {
.desktop {
display: none !important;
}
div.menu {
width: 100vw;
}
}
.ui.menu .ui.dropdown .menu > .item.no-hover:hover {
cursor: auto !important;
background: white !important;
}
</style>
\ No newline at end of file
src/views/Index.vue
+ 30
− 23
View file @ 0d299c0c
......@@ -14,27 +14,29 @@
<h4 id="les_projets" class="ui horizontal divider header">PROJETS</h4>
<!-- //todo : v-if can_create_project -->
<router-link
v-if="user"
:to="{ name: 'project_create', params: { action: 'create' } }"
class="ui green basic button"
>
<i class="plus icon"></i> Créer un nouveau projet
</router-link>
<!-- //todo : v-if can_create_project -->
<router-link
v-if="user"
:to="{
name: 'project_type_list',
}"
class="ui blue basic button right floated"
>
<i class="copy icon"></i> Accéder à la liste des modèles de projets
</router-link>
<div class="flex">
<router-link
v-if="user"
:to="{ name: 'project_create', params: { action: 'create' } }"
class="ui green basic button"
>
<i class="plus icon"></i> Créer un nouveau projet
</router-link>
<!-- //todo : v-if can_create_project -->
<router-link
v-if="user"
:to="{
name: 'project_type_list',
}"
class="ui blue basic button"
>
<i class="copy icon"></i> Accéder à la liste des modèles de projets
</router-link>
</div>
<div v-if="projects" class="ui divided items">
<div v-for="project in projects" class="item" :key="project.slug">
<div class="ui tiny image">
<!-- // ? récupérer l'image sur serveur front (et non back) ? -->
<img
:src="
!project.thumbnail
......@@ -108,19 +110,17 @@
<script>
import { mapState } from "vuex";
export default {
name: "Index",
computed: {
...mapState(["projects", "user", "USER_LEVEL_PROJECTS"]),
//LOGO_PATH: () => require(configuration.VUE_APP_LOGO_PATH),
APPLICATION_NAME: function () {
return this.$store.state.configuration.VUE_APP_APPLICATION_NAME;
},
APPLICATION_ABSTRACT:function () {
APPLICATION_ABSTRACT: function () {
return this.$store.state.configuration.VUE_APP_APPLICATION_ABSTRACT;
},
DJANGO_BASE_URL:function () {
DJANGO_BASE_URL: function () {
return this.$store.state.configuration.VUE_APP_DJANGO_BASE;
},
},
......@@ -138,4 +138,11 @@ export default {
}
},
};
</script>
\ No newline at end of file
</script>
<style scoped>
.flex {
display: flex;
justify-content: space-between;
}
</style>
\ No newline at end of file
src/views/feature_type/Feature_type_detail.vue
+ 9
− 8
View file @ 0d299c0c
<template>
<!-- <div>
<h1>{{ feature_type_slug }}</h1>
{{ feature_type }}
</div> -->
<div v-if="structure" class="row">
<div class="five wide column">
<div class="ui attached secondary segment">
......@@ -166,7 +162,7 @@
<router-link
v-if="project"
:to="{ name: 'liste-signalements', params: { slug: project.slug } }"
class="ui right labeled icon button"
class="ui right labeled icon button margin-25"
>
<i class="right arrow icon"></i>
Voir tous les signalements
......@@ -177,7 +173,7 @@
name: 'ajouter-signalement',
params: { slug_type_signal: structure.slug },
}"
class="ui icon button button-hover-green"
class="ui icon button button-hover-green margin-25"
>
Ajouter un signalement
</router-link>
......@@ -211,7 +207,6 @@ export default {
...mapState("feature", ["features"]),
...mapState("feature_type", ["feature_types", "importFeatureTypeData"]),
structure: function () {
// * je ne sais pas pourquoi ça s'appelle structure
if (this.feature_types) {
return this.feature_types.find(
(el) => el.slug === this.$route.params.feature_type_slug
......@@ -269,4 +264,10 @@ export default {
);
},
};
</script>
\ No newline at end of file
</script>
<style scoped>
.margin-25 {
margin: 0 0.25em 0.25em 0 !important;
}
</style>
\ No newline at end of file
src/views/feature_type/Feature_type_edit.vue
+ 7
− 3
View file @ 0d299c0c
......@@ -78,7 +78,7 @@
v-model="form.title_optional.value"
type="checkbox"
/>
<label>{{form.title_optional.label}}</label>
<label>{{ form.title_optional.label }}</label>
</div>
</div>
......@@ -136,7 +136,7 @@
<div class="ui divider"></div>
<button
class="ui teal icon button"
class="ui teal icon button margin-25"
type="button"
@click="sendFeatureType"
>
......@@ -146,7 +146,7 @@
</button>
<button
v-if="geojson"
class="ui teal icon button"
class="ui teal icon button margin-25"
type="button"
@click="postFeatureTypeThenFeatures"
>
......@@ -564,6 +564,10 @@ export default {
margin-right: 0.5em;
}
.margin-25 {
margin: 0 0.25em 0.25em 0 !important;
}
/* // * probleme avec le style récupéré, n'est jamais identique !???? */
#formsets {
margin-top: 1em !important;
......
src/views/project/Project_detail.vue
+ 36
− 20
View file @ 0d299c0c
......@@ -181,7 +181,6 @@
>
<i class="inverted grey pencil alternate icon"></i>
</router-link>
<!-- {% endif %} -->
</div>
</div>
<div v-if="feature_types.length === 0">
......@@ -202,25 +201,33 @@
</router-link>
</div>
<div class="nouveau-type-signalement">
<div class="ui compact basic button button-hover-green">
<div>
<label class="ui" for="json_file">
<i class="ui plus icon"></i>
<span class="label"
>Créer un nouveau type de signalement à partir d'un
GeoJSON</span
>
</label>
<input
type="file"
accept="application/json, .json, .geojson"
style="display: none"
name="json_file"
id="json_file"
@change="onFileChange"
/>
</div>
</div>
<a
class="
ui
compact
basic
button button-hover-green
flex
align-center
text-left
"
>
<i class="ui plus icon"></i>
<label class="ui" for="json_file">
<span class="label"
>Créer un nouveau type de signalement à partir d'un
GeoJSON</span
>
</label>
<input
type="file"
accept="application/json, .json, .geojson"
style="display: none"
name="json_file"
id="json_file"
@change="onFileChange"
/>
</a>
<br />
<div id="button-import" v-if="fileToImport.size > 0">
<button
......@@ -611,4 +618,13 @@ export default {
.fullwidth {
width: 100%;
}
.flex {
display: flex !important;
}
.align-center {
align-items: center !important;
}
.text-left {
text-align: left !important;
}
</style>
\ No newline at end of file
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