Some more layout and style adjustments

cgre-aachen · Jan 7, 2024 · 97c3ee6 · 97c3ee6
1 parent 1979100
commit 97c3ee6
Show file tree

Hide file tree

Showing 5 changed files with 100 additions and 29 deletions.
diff --git a/d3j/dist/modal.bundle.js b/d3j/dist/modal.bundle.js
@@ -15,7 +15,7 @@
   \******************/
 /***/ (() => {
 
-eval("// modal.js\ndocument.addEventListener('DOMContentLoaded', function() {\n    var modal = document.getElementById(\"infoModal\");\n    var btn = document.getElementById(\"infoBtn\");\n    var span = document.getElementsByClassName(\"close\")[0];\n\n    btn.onclick = function() {\n        modal.style.display = \"block\";\n    };\n\n    span.onclick = function() {\n        modal.style.display = \"none\";\n    };\n\n    window.onclick = function(event) {\n        if (event.target == modal) {\n            modal.style.display = \"none\";\n        }\n    };\n});\n\n\n//# sourceURL=webpack://sgm_interpolations/./modal.js?");
+eval("// modal.js\ndocument.addEventListener('DOMContentLoaded', function() {\n    var modal = document.getElementById(\"infoModal\");\n    var btn = document.getElementById(\"infoBtn\");\n    var span = document.getElementsByClassName(\"close\")[0];\n\n    btn.onclick = function() {\n        modal.style.display = \"block\";\n    };\n\n    span.onclick = function() {\n        modal.style.display = \"none\";\n    };\n\n    window.onclick = function(event) {\n        if (event.target == modal) {\n            modal.style.display = \"none\";\n        }\n    };\n});\n\n// for home button\ndocument.getElementById('homeBtn').addEventListener('click', function() {\n    window.location.href = '../index.html';  // Replace 'index.html' with the correct path if different\n});\n\n//# sourceURL=webpack://sgm_interpolations/./modal.js?");
 
 /***/ })
 

diff --git a/d3j/modal.js b/d3j/modal.js
@@ -18,3 +18,8 @@ document.addEventListener('DOMContentLoaded', function() {
         }
     };
 });
+
+// for home button
+document.getElementById('homeBtn').addEventListener('click', function() {
+    window.location.href = '../index.html';  // Replace 'index.html' with the correct path if different
+});
diff --git a/d3j/plot_interpolations.html b/d3j/plot_interpolations.html
@@ -10,30 +10,37 @@
 
 </head>
 <body>
+
     <div class="content">
         <h1>Polynomial Regression Visualization</h1>
         <p>This interactive plot allows you to visualize polynomial regression with adjustable degrees. Drag the points and adjust the slider to see how the regression curve changes.</p>
-
-        <div class="plot-container">
-            <svg id="plotArea" width="800" height="400" viewBox="0 0 1600 800"></svg>
-        </div>
-
-        <div class="slider-container">
-            <label for="degreeSlider">Degree of Polynomial: <span id="degreeValue">2</span></label>
-            <input type="range" id="degreeSlider" min="1" max="9" value="2">
+
+        <div class="flex-container">
+            <div class="buttons-container">
+                <button id="homeBtn">Home</button>
+                <button id="infoBtn">Info</button>
+            </div>
+
+            <div class="graph-slider-container"> <!-- New container for graph and slider -->
+                <div class="plot-container">
+                    <svg id="plotArea" width="800" height="400" viewBox="0 0 1600 800"></svg>
+                </div>
+
+                <div class="slider-container">
+                    <label for="degreeSlider">Degree of Polynomial: <span id="degreeValue">2</span></label>
+                    <input type="range" id="degreeSlider" min="1" max="9" value="2">
+                </div>
+            </div>
         </div>
     </div>
 
-    <script type="module" src="./dist/script_interpolations.bundle.js"></script>
 
-    <!-- Info Button -->
-    <button id="infoBtn">Info</button>
+    <script type="module" src="./dist/script_interpolations.bundle.js"></script>
 
     <!-- Info Modal -->
     <div id="infoModal" class="modal">
         <div class="modal-content">
             <span class="close">&times;</span>
-            <p>Here you can add the theoretical background and explanation for spline interpolation...</p>
             <h2>Polynomial Regression - Theory</h2>
                 <p>
                     Polynomial regression is a form of regression analysis in which the relationship between the independent variable <i>x</i> and the dependent variable <i>y</i> is modeled as an <i>n</i>th degree polynomial.

diff --git a/d3j/spline_interpolation.html b/d3j/spline_interpolation.html
@@ -10,20 +10,25 @@
 
 </head>
 <body>
+
     <div class="content">
         <h1>Spline Interpolation Visualization</h1>
         <p>Drag the points and adjust the slider to see how the spline curve changes.</p>
-
-        <div class="plot-container">
-            <svg id="plotArea" width="800" height="400" viewBox="0 0 1600 800"></svg>
+
+        <div class="flex-container">
+            <div class="buttons-container">
+                <button id="homeBtn">Home</button>
+                <button id="infoBtn">Info</button>
+            </div>
+
+            <div class="plot-container">
+                <svg id="plotArea" width="800" height="400" viewBox="0 0 1600 800"></svg>
+            </div>
         </div>
     </div>
 
     <script type="module" src="./dist/spline_interpolation.bundle.js"></script>
 
-    <!-- Info Button -->
-    <button id="infoBtn">Info</button>
-
     <!-- Info Modal -->
     <div id="infoModal" class="modal">
         <div class="modal-content">

diff --git a/d3j/style_dark.css b/d3j/style_dark.css
@@ -23,12 +23,28 @@ p {
     font-size: 1.2em;
 }
 
-.plot-container {
-    margin: 20px 0;
+/* Containers */
+
+.plot-container, .slider-container {
+    width: 100%; /* Ensure these containers take full width of their parent */
+}
+
+.flex-container {
+    display: flex;
+    align-items: flex-start;
+}
+
+.buttons-container {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    margin-right: 20px; /* Spacing between buttons and graph */
 }
 
-.slider-container {
-    margin: 20px 0;
+.graph-slider-container {
+    display: flex;
+    flex-direction: column; /* Ensure vertical stacking */
+    width: 100%; /* Take up the remaining width */
 }
 
 
@@ -107,14 +123,28 @@ input[type="range"]::-moz-range-thumb {
     cursor: pointer;
 }
 
-/* Info Button Style */
-#infoBtn {
+/*  Buttons */
+
+.buttons-container {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    margin-right: 20px; /* Spacing between buttons and graph */
+    margin-top: 80px; /* Adjust this value to position the buttons lower */
+    margin-bottom: 20px;
+}
+
+
+/* Home and Info Button Styles */
+#homeBtn, #infoBtn {
     background-color: #4CAF50; /* Green background */
     color: white;
     padding: 10px 20px;
-    margin: 10px 0;
+    margin: 5px 0;
     border: none;
     cursor: pointer;
+    width: 100px; /* Standardize button width */
+    text-align: center; /* Center text in button */
 }
 
 /* Modal Style */
@@ -133,23 +163,47 @@ input[type="range"]::-moz-range-thumb {
 
 .modal-content {
     background-color: #fefefe;
-    margin: 15% auto; /* 15% from the top and centered */
+    margin: 5% auto 5% 25%; /* Aligns modal to the right */
     padding: 20px;
     border: 1px solid #888;
-    width: 80%; /* Could be more or less, depending on screen size */
+    width: 70%; /* Set modal width to 70% of the page width */
+    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2); /* Optional: Adds a shadow for better visibility */
+}
+
+/* Targeting all text within the modal content */
+.modal-content p,
+.modal-content h2,
+.modal-content li,
+.modal-content span {
+    color: #444444; /* Set your desired font color here */
+}
+
+/* If you have links inside the modal and want to style them as well */
+.modal-content a {
+    color: #add8e6; /* Light blue link color, for example */
+    text-decoration: underline;
 }
 
-/* The Close Button */
+/* Adjust the close button position if needed */
 .close {
     color: #aaa;
     float: right;
     font-size: 28px;
     font-weight: bold;
 }
 
+/* Responsive adjustments for smaller screens */
+@media (max-width: 600px) {
+    .modal-content {
+        width: 90%;
+        margin: 10% auto;
+    }
+}
+
 .close:hover,
 .close:focus {
     color: black;
     text-decoration: none;
     cursor: pointer;
 }
+