From 4f163062960e28c1445b5b476d2fe4177649c1ba Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Timoth=C3=A9e=20Poussard?= <tpoussard@neogeo.fr>
Date: Wed, 29 Sep 2021 12:12:02 +0200
Subject: [PATCH] fix table for mobile
---
src/views/feature/Feature_list.vue | 159 +++++++++++++++++++++++------
1 file changed, 127 insertions(+), 32 deletions(-)
diff --git a/src/views/feature/Feature_list.vue b/src/views/feature/Feature_list.vue
index 35c32d83..8398478b 100644
--- a/src/views/feature/Feature_list.vue
+++ b/src/views/feature/Feature_list.vue
@@ -7,25 +7,25 @@
'/resources/leaflet-control-geocoder-1.13.0/Control.Geocoder.js'
"
></script>
- <div class="feature-list-container ui grid">
- <div class="four wide column">
+ <div id="feature-list-container" class="ui grid mobile-column">
+ <div class="four wide column mobile-fullwidth">
<h1>Signalements</h1>
</div>
- <div class="twelve wide column">
+ <div class="twelve-wide column no-padding-mobile mobile-fullwidth">
<div class="ui dimmer" :class="[{ active: featureLoading }]">
<div class="ui large text loader">Chargement</div>
</div>
- <div class="ui secondary menu">
+ <div class="ui secondary menu no-margin">
<a
@click="showMap = true"
- :class="['item', { active: showMap }]"
+ :class="['item no-margin', { active: showMap }]"
data-tab="map"
data-tooltip="Carte"
><i class="map fitted icon"></i
></a>
<a
@click="showMap = false"
- :class="['item', { active: !showMap }]"
+ :class="['item no-margin', { active: !showMap }]"
data-tab="list"
data-tooltip="Liste"
><i class="list fitted icon"></i
@@ -44,15 +44,7 @@
>
<div
@click="showAddFeature = !showAddFeature"
- class="
- ui
- dropdown
- top
- right
- pointing
- compact
- button button-hover-green
- "
+ class="ui dropdown button compact button-hover-green"
data-tooltip="Ajouter un signalement"
data-position="bottom left"
>
@@ -79,16 +71,14 @@
</div>
</div>
- <div v-if="project && feature_types" class="item right">
- <div
- v-if="checkedFeatures.length"
- class="ui top center pointing compact button button-hover-red"
- data-tooltip="Effacer tous les types de signalements sélectionnés"
- data-position="left center"
- data-variation="mini"
- >
- <i class="grey trash icon" @click="modalAllDelete"></i>
- </div>
+ <div
+ v-if="checkedFeatures.length"
+ class="ui button compact button-hover-red margin-left-25"
+ data-tooltip="Effacer tous les types de signalements sélectionnés"
+ data-position="left center"
+ data-variation="mini"
+ >
+ <i class="grey trash fitted icon" @click="modalAllDelete"></i>
</div>
</div>
</div>
@@ -96,7 +86,7 @@
</div>
<form id="form-filters" class="ui form grid" action="" method="get">
- <div class="field wide four column">
+ <div class="field wide four column no-margin-mobile">
<label>Type</label>
<Dropdown
@update:selection="onFilterTypeChange($event)"
@@ -106,7 +96,7 @@
:search="true"
/>
</div>
- <div class="field wide four column">
+ <div class="field wide four column no-padding-mobile no-margin-mobile">
<label>Statut</label>
<!-- //* giving an object mapped on key name -->
<Dropdown
@@ -276,7 +266,7 @@
{{ feature.properties.updated_on }}
</td>
<td class="center" v-if="user">
- {{ feature.properties.creator.username }}
+ {{ feature.properties.creator.username || " ---- " }}
</td>
</tr>
<tr v-if="filteredFeatures.length === 0" class="odd">
@@ -719,7 +709,7 @@ export default {
</script>
-<style>
+<style scoped>
#map {
width: 100%;
min-height: 300px;
@@ -733,12 +723,11 @@ export default {
text-align: center !important;
}
-#form-filters,
-.ui.centered > .row.feature-list-container {
+#feature-list-container {
justify-content: flex-start;
}
-.feature-list-container .ui.menu:not(.vertical) .right.item {
+#feature-list-container .ui.menu:not(.vertical) .right.item {
padding-right: 0;
}
@@ -748,7 +737,39 @@ export default {
margin-left: 50%;
}
+.margin-left-25 {
+ margin-left: 0.25em !important;
+}
+
+.no-margin {
+ margin: 0 !important;
+}
+
+.no-padding {
+ padding: 0 !important;
+}
+
+@media screen and (min-width: 767px) {
+ .twelve-wide {
+ width: 75%;
+ }
+}
@media screen and (max-width: 767px) {
+ #feature-list-container > .mobile-fullwidth {
+ width: 100% !important;
+ }
+
+ .no-margin-mobile {
+ margin: 0 !important;
+ }
+
+ .no-padding-mobile {
+ padding-top: 0 !important;
+ padding-bottom: 0 !important;
+ }
+ .mobile-column {
+ flex-direction: column !important;
+ }
#form-filters > .field.column {
width: 100% !important;
}
@@ -818,5 +839,79 @@ export default {
background: transparent;
box-shadow: none;
}
+
+/*
+Max width before this PARTICULAR table gets nasty
+This query will take effect for any screen smaller than 760px
+and also iPads specifically.
+*/
+@media only screen and (max-width: 760px),
+ (min-device-width: 768px) and (max-device-width: 1024px) {
+ /* Force table to not be like tables anymore */
+ table,
+ thead,
+ tbody,
+ th,
+ td,
+ tr {
+ display: block;
+ }
+
+ /* Hide table headers (but not display: none;, for accessibility) */
+ thead tr {
+ position: absolute;
+ top: -9999px;
+ left: -9999px;
+ }
+
+ tr {
+ border: 1px solid #ccc;
+ }
+
+ td {
+ /* Behave like a "row" */
+ border: none;
+ border-bottom: 1px solid #eee;
+ position: relative;
+ padding-left: 50%;
+ }
+
+ td:before {
+ /* Now like a table header */
+ position: absolute;
+ /* Top/left values mimic padding */
+ /* top: 6px; */
+ left: 6px;
+ /* width: 45%; */
+ padding-right: 10px;
+ white-space: nowrap;
+ }
+
+ /*
+ Label the data
+ */
+ td:nth-of-type(1):before {
+ content: "";
+ }
+ td:nth-of-type(2):before {
+ content: "Statut";
+ }
+ td:nth-of-type(3):before {
+ content: "Type";
+ }
+ td:nth-of-type(4):before {
+ content: "Nom";
+ }
+ td:nth-of-type(5):before {
+ content: "Dernière modification";
+ }
+ td:nth-of-type(6):before {
+ content: "Auteur";
+ }
+
+ .center {
+ text-align: right !important;
+ }
+}
</style>
--
GitLab