add front responsiveness for phone

front/src/App.vue

@@ -85,7 +85,6 @@ body {
   display: flex;
   flex-direction: column;
   align-items: center;
-  margin-top: 5rem;
 }
 
 .router {

front/src/components/PaginationFooter.vue

@@ -26,7 +26,7 @@
 
 .page {
   border: none;
-  padding: 1rem;
+  padding: 0.5rem;
   margin: 0.2rem;
 }
 
@@ -34,6 +34,7 @@ footer {
   display: flex;
   padding: 0.2rem;
   align-items: center;
+  max-width: 100%;
 }
 
 

front/src/components/SearchHeader.vue

@@ -37,7 +37,7 @@ export default {
 
 .search {
   display: flex;
-  min-width: 95%;
+  width: 100vw;
   margin-top: 1rem;
   margin-bottom: 1rem;
 }

front/src/components/TableView.vue

@@ -1,7 +1,7 @@
 <template>
 <table>
   <tr>
-    <th v-bind:style="{ 'min-width': this.width }" v-for="head in headings" :key="head">{{ head }}</th>
+    <th v-for="head in headings" :key="head">{{ head }}</th>
   </tr>
   <slot></slot>
 </table>
@@ -19,5 +19,25 @@ export default {
 <style scoped>
 th {
   text-align: left;
+  width: 20%;
+
 }
+
+tr {
+  display: flex;
+  flex-direction: row;
+  justify-content: flex-start;
+}
+
+table {
+  display: flex;
+  flex-direction: column;
+}
+
+@media (max-width: 30em) {
+  tr {
+    width: 100vw;
+  }
+}
+
 </style>

front/src/views/TheBooks.vue

@@ -20,7 +20,7 @@
             </button>
           </form>
           <SearchHeader page="Books" @changeSearch="(s) => {editSearch(s)}"/>
-          <TableView ref="table" :headings="headings" width="15rem">
+          <TableView ref="table" :headings="headings">
             <tr v-for="book in this.$store.getters.getBooks" :key="book">
               <td v-if="editRow === book.biblio_Index">
                 <DropDown
@@ -28,7 +28,7 @@
                   field="Auteur"
                   :inputValue="book.Auteur"
                   @selected="(n) => {formEdit.author = n}"
-                  />
+                />
               </td>
               <td v-else>{{ book.Auteur }}</td>
               <td v-if="editRow === book.biblio_Index">
@@ -37,7 +37,7 @@
                   field="Titre"
                   :inputValue="book.Titre"
                   @selected="(n) => {formEdit.title = n}"
-                  />
+                />
               </td>
               <td v-else>{{ book.Titre }}</td>
               <td v-if="editRow === book.biblio_Index">
@@ -46,7 +46,7 @@
                   field="Editeur"
                   :inputValue="book.Editeur"
                   @selected="(n) => {formEdit.editor = n}"
-                  />
+                />
               </td>
               <td v-else>{{ book.Editeur }}</td>
               <td v-if="editRow === book.biblio_Index">
@@ -55,7 +55,7 @@
                   field="Type"
                   :inputValue="book.Type"
                   @selected="(n) => {formEdit.type = n}"
-                  />
+                />
               </td>
               <td v-else>{{ book.Type }}</td>
               <div class="button-panel">
@@ -87,7 +87,7 @@ export default {
   },
   data() {
     return {
-      headings: ['Author', 'Title', 'Editor', 'Type'],
+      headings: ['Author', 'Title', 'Editor', 'Type', 'Control'],
       editMode: false,
       editRow: undefined,
       addMode: false,
@@ -188,11 +188,45 @@ export default {
 </script>
 <style scoped>
 main {
-  max-width: 60.5vw;
+  width: 80vw
 }
 
-td input {
+header {
-  width: 14.5rem;
+  width: 80vw;
+}
+
+tr {
+  display: flex;
+  flex-direction: row;
+  justify-content: flex-start;
+  width: 80vw;
+  align-items: center;
+
+}
+
+td {
+  width: 20%;
+}
+
+.button-panel {
+  width: 20%;
+  display: flex;
+  flex-direction: flex-end;
+}
+
+@media (max-width: 30em) {
+  main {
+    width: 100vw;
+  }
+
+  tr {
+    width: 100vw;
+  }
+
+  td {
+    overflow-x: hidden;
+    white-space: nowrap
+  }
 }
 
 @keyframes lineInsertedIn {