Update responsive design and bug fixes

thexerteproject · Dec 19, 2021 · b7e9d13 · b7e9d13
1 parent 39e9fb9
commit b7e9d13
Show file tree

Hide file tree

Showing 2 changed files with 31 additions and 4 deletions.
diff --git a/modules/xerte/parent_templates/Nottingham/models_html5/adaptiveContent.css b/modules/xerte/parent_templates/Nottingham/models_html5/adaptiveContent.css
@@ -101,7 +101,20 @@ li.select-interaction.selected {
 .graph-container {
   width: 45%;
   float: right;
-  display: block;
+  display: inline-flex;
+}
+
+@media (max-width: 900px) {
+  .graph-container {
+    width: 100%;
+  }
+  .summary-container {
+    display: inline-block;
+  }
+}
+
+.graph-container-wide {
+  width: 100%;
 }
 
 .graph-container fieldset.noStyle {

diff --git a/modules/xerte/parent_templates/Nottingham/models_html5/adaptiveContent.html b/modules/xerte/parent_templates/Nottingham/models_html5/adaptiveContent.html
@@ -1022,8 +1022,15 @@
         summaryText = `<h1><p>${summaryText}</p></h1>`;
       }
       let summaryDiv = ''
-      if (summaryText !== '' || specificationDiv !== '' || adviceHeader !== '') {
-        let summaryDiv = '<div class="summary">' +
+        debugger;
+      if (
+        summaryText !== '' ||
+          specificationDiv !== '' ||
+          adviceHeader !== '' ||
+          interaction.getAttribute("showNrOfParticipants") === "true" ||
+          interaction.getAttribute("showScore") === "true"
+        ) {
+        summaryDiv = '<div class="summary">' +
           summaryText +
           '<div class="score">' +
           '<div class="stats-div"><ul class="stats"></ul></div>' +
@@ -1032,15 +1039,21 @@
           adviceHeader +
           '<div class="message"></div>' +
           "</div>" +
+          "</div>" +
           "</div>";
       }
       //if (summaryText != "" || adviceHeader != "" || interactionType == 'grouping') {
+      let graphContainer = '<div class="graph-container"></div>';
+      if (summaryDiv == '') {
+          graphContainer = '<div class="graph-container graph-container-wide"></div>';
+        }
+
       div.html(
         `<h2><p>${name}</p></h2>` +
           `<div class='introduction'>${introductionText}</div>` +
           '<div class="summary-container">' +
           summaryDiv +
-          '<div class="graph-container"></div>' +
+          graphContainer +
           "</div>"
       );
       //}
@@ -1969,6 +1982,7 @@
             type: "polarArea",
             data: data,
             options: {
+              responsive: true,
               maintainAspectRatio: false,
               plugins: {
                 legend: {