fix table for mobile

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>