From ae5a0582a29cb51b615d1754c352cc9c679a15af Mon Sep 17 00:00:00 2001 From: LUCASTUCIOUS Date: Mon, 6 Mar 2023 14:13:04 +0100 Subject: [PATCH] fix spell.js --- css/style.css | 26 +++++++++++++ css/water.css | 4 +- data/spells/spells-grimoire-en.json | 4 +- data/spells/spells-grimoire-fr.json | 4 +- index.html | 2 +- js/language.js | 13 +++---- js/spells.js | 23 +++++++----- spells.html | 53 ++++++++++++++------------- test-w2ui.html | 57 +++++++++++++++++++++++++++++ 9 files changed, 137 insertions(+), 49 deletions(-) create mode 100644 css/style.css create mode 100644 test-w2ui.html diff --git a/css/style.css b/css/style.css new file mode 100644 index 0000000..20afad1 --- /dev/null +++ b/css/style.css @@ -0,0 +1,26 @@ +.container { + display: flex; + flex-wrap: wrap; + justify-content: space-between; + align-items: stretch; + } + + .list-col, .view-col { + flex-basis: 100%; + } + + @media screen and (min-width: 768px) { + .list-col, .view-col { + flex-basis: calc(50% - 10px); /* Réduire de 10px pour ajouter une marge entre les deux div */ + } + } + + .w2ui-grid-data { + color:black; + word-wrap: break-word; + } + + .w2ui-grid .w2ui-grid-body table td.w2ui-grid-data>div{ + overflow: visible; + white-space:break-spaces; + } \ No newline at end of file diff --git a/css/water.css b/css/water.css index a2090c1..1e29f3d 100644 --- a/css/water.css +++ b/css/water.css @@ -113,9 +113,9 @@ body { font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', 'Segoe UI Emoji', 'Apple Color Emoji', 'Noto Color Emoji', sans-serif; line-height: 1.4; - max-width: 800px; + /*max-width: 800px;*/ margin: 20px auto; - padding: 0 10px; + padding: 0 5%; word-wrap: break-word; color: #363636; color: var(--text-main); diff --git a/data/spells/spells-grimoire-en.json b/data/spells/spells-grimoire-en.json index 03c1ba8..ab6e67e 100644 --- a/data/spells/spells-grimoire-en.json +++ b/data/spells/spells-grimoire-en.json @@ -1,7 +1,7 @@ { "spell": [ { - "id": 0, + "recid": 0, "name": "Acid Arrow", "source": "GRI", "page": 110, @@ -40,7 +40,7 @@ "areaTags": ["", ""] }, { - "id": 1, + "recid": 1, "name": "Acid Blob", "source": "GRI", "page": 110, diff --git a/data/spells/spells-grimoire-fr.json b/data/spells/spells-grimoire-fr.json index 46062d3..039de9b 100644 --- a/data/spells/spells-grimoire-fr.json +++ b/data/spells/spells-grimoire-fr.json @@ -1,7 +1,7 @@ { "spell": [ { - "id": 0, + "recid": 0, "name": "Flèche Acide", "source": "GRI", "page": 188, @@ -40,7 +40,7 @@ "areaTags": ["", ""] }, { - "id": 1, + "recid": 1, "name": "Bille Acide", "source": "GRI", "page": 134, diff --git a/index.html b/index.html index 5ef5446..804a405 100644 --- a/index.html +++ b/index.html @@ -65,7 +65,7 @@ - + diff --git a/js/language.js b/js/language.js index 7baab8d..efcee53 100644 --- a/js/language.js +++ b/js/language.js @@ -2,14 +2,11 @@ $("[data-localize]").localize("main", { pathPrefix: "lang" }); // You can also override the language detection and specify a language code. This code defines a function that sets the language to French. -function changeLangFR() { $("[data-localize]").localize("main", { pathPrefix: "lang", language: "fr", }); } - - +function changeLangFR() { + $("[data-localize]").localize("main", { pathPrefix: "lang", language: "fr" }); +} // This code defines a function that sets the language to English. function changeLangEN() { - $("[data-localize]").localize("main", { - pathPrefix: "lang", - language: "en", - }); -} \ No newline at end of file + $("[data-localize]").localize("main", { pathPrefix: "lang", language: "en" }); +} diff --git a/js/spells.js b/js/spells.js index 4660d0b..21f5a70 100644 --- a/js/spells.js +++ b/js/spells.js @@ -5,14 +5,14 @@ var jsonsource = "".concat( $.defaultLanguage.slice(0, 2), ".json" ); -var test; +var alldata; // Fetch data from server fetch(jsonsource) .then((response) => response.json()) .then((data) => { // load fetched data into grid - test = data.spell; - console.log(test); + alldata = data.spell; + console.log(alldata); //document.getElementById("spell-list") $("#spell-list").w2grid({ @@ -28,19 +28,24 @@ fetch(jsonsource) liveSearch: true, multiSearch: true, fixedBody: false, - records: test, + records: alldata, columns: [ - { field: "name", text: "Name", size: "30%",sortable: true, attr: 'align=center' }, - { field: "id", text: "ID", size: "30%" }, - { field: "email", text: "Email", size: "40%" }, - { field: "sdate", text: "Start Date", size: "120px" }, + { field: "name", text: "Name",sortable: true, }, + { field: "desc", text: "Description",size:"500%",style:"test" }, + { field: "source", text: "Source",sortable: true, }, + { field: "page", text: "Page",sortable: true, }, + { field: "level", text: "Level",sortable: true, }, + { field: "school", text: "School",sortable: true, }, + { field: "components", text: "Components", }, + { field: "duration", text: "Duration", }, + ], async onSelect(event) { await event.complete console.log('select', event.detail, this.getSelection()) }, onClick(event) { - let record = this.get(event.detail.name) + let record = this.get(event.detail.recid) //grid2.clear() /*grid2.add([ { recid: 0, name: 'ID:', value: record.recid }, diff --git a/spells.html b/spells.html index fb1c839..6b1062c 100644 --- a/spells.html +++ b/spells.html @@ -8,7 +8,8 @@ - + + @@ -30,36 +31,38 @@ -
-
-
- -
- - - - - - - - - -
- - - - -
Select a spell from the list to view it here
-
- -
+
+
+
+ + + + + + + + + +
+ + + + +
Select a spell from the list to view it here
+
+ +
+ + + - + + diff --git a/test-w2ui.html b/test-w2ui.html new file mode 100644 index 0000000..8b13f5b --- /dev/null +++ b/test-w2ui.html @@ -0,0 +1,57 @@ + + + + W2UI Demo: grid/6 + + + + +
+
+ + + + + + \ No newline at end of file