make table responsive

css/style.css

@@ -123,32 +123,35 @@
 }
 .flickity-button {
   background: #588597;
-  }
+}
+
+/* Spells */
 .container {
   display: flex;
   flex-wrap: wrap;
   justify-content: space-between;
   align-items: stretch;
-
 }
-.list-col{
+.list-col {
-  flex-grow: 2;
+  width: 75%;
-  min-width: 600px;
+  float: left;
-} 
+}
 .view-col {
-  flex-grow: 1;
+  width: 25%;
+  float: left;
 }
-@media screen and (min-width: 768px) {
+ @media screen and (max-width: 768px) {
-    
+  .list-col,
-  .list-col {
-    margin-right: 1%;
-  }
   .view-col {
-    
+    width: 100%;
-    max-width: 600px;
+    float: none;
   }
-}
+
-  
+  .list-col{
+    zoom:70%
+  };
+} 
+
 .w2ui-grid-data {
   color: black;
   word-wrap: normal;
@@ -158,5 +161,4 @@
   white-space: break-spaces;
 }
 .w2ui-grid .w2ui-grid-body table {
-
+}
-}

data/spells/index.json

@@ -1,2 +1,3 @@
-{ "GRI-fr": "spells-grimoire-fr.json"
+{ "GRI1-fr": "spells-grimoire-fr.json",
+"GRI1-en":"spells-grimoire-en.json"
 }

data/spells/spells-grimoire.json

@@ -1,64 +0,0 @@
-{ "spell": [ {
-                           "name": "Acid Splash", 
-                         "source": "PHB", 
-                         "page": 211, 
-                         "srd": true, 
-                         "basicRules": true, 
-                         "level": 0, 
-                         "school": "C", 
-                         "time": [ 
-                                 { 
-                                         "number": 1, 
-                                         "unit": "action" 
-                                 } 
-                         ], 
-                         "range": { 
-                                 "type": "point", 
-                                 "distance": { 
-                                         "type": "feet", 
-                                         "amount": 60 
-                                 } 
-                         }, 
-                         "components": { 
-                                 "v": true, 
-                                 "s": true 
-                         }, 
-                         "duration": [ 
-                                 { 
-                                         "type": "instant" 
-                                 } 
-                         ], 
-                         "entries": [ 
-                                 "You hurl a bubble of acid. Choose one creature you can see within range, or choose two creatures you can see within range that are within 5 feet of each other. A target must succeed on a Dexterity saving throw or take {@damage 1d6} acid damage.", 
-                                 "This spell's damage increases by {@dice 1d6} when you reach 5th level ({@damage 2d6}), 11th level ({@damage 3d6}), and 17th level ({@damage 4d6})." 
-                         ], 
-                         "scalingLevelDice": { 
-                                 "label": "acid damage", 
-                                 "scaling": { 
-                                         "1": "1d6", 
-                                         "5": "2d6", 
-                                         "11": "3d6", 
-                                         "17": "4d6" 
-                                 } 
-                         }, 
-                         "damageInflict": [ 
-                                 "acid" 
-                         ], 
-                         "savingThrow": [ 
-                                 "dexterity" 
-                         ], 
-                         "miscTags": [ 
-                                 "SCL", 
-                                 "SGT" 
-                         ], 
-                         "areaTags": [ 
-                                 "ST", 
-                                 "MT" 
-                         ] 
-                 },
-}
-
-
-]
-
-}

js/spells.js

@@ -38,11 +38,10 @@ fetch(jsonsource)
           searchable: { operator: "contains" },
         },
         {
-          field: "desc",
+          field: "source",
-          text: "Description",
+          text: "Source",
-          size: "500%",
+          sortable: true,
-          style: "test",
+          tooltip: "Which book is this from ?",
-          resizable: true,
           searchable: { operator: "contains" },
           render(record, extra) {
             return (
@@ -52,13 +51,6 @@ fetch(jsonsource)
             );
           },
         },
-        {
-          field: "source",
-          text: "Source",
-          sortable: true,
-          tooltip: "Which book is this from ?",
-          searchable: { operator: "contains" },
-        },
         { field: "page", text: "Page", sortable: true },
         { field: "level", text: "Level", sortable: true, size: 65 },
         { field: "school", text: "School", sortable: true },