feat: Add tooltip, improve styling a lot

package-lock.json

@@ -1258,19 +1258,28 @@
       "license": "CC-BY-4.0"
     },
     "node_modules/chokidar": {
-      "version": "4.0.3",
+      "version": "3.6.0",
-      "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-4.0.3.tgz",
+      "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.6.0.tgz",
-      "integrity": "sha512-Qgzu8kfBvo+cA4962jnP1KkS6Dop5NS6g7R5LFYJr4b8Ub94PPQXUksCw9PvXoeXPRRddRNC5C1JQUR2SMGtnA==",
+      "integrity": "sha512-7VT13fmjotKpGipCW9JEQAusEPE+Ei8nl6/g4FBAmIm0GOOLMua9NDDo/DWp0ZAxCr3cPq5ZpBqmPAQgDda2Pw==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "readdirp": "^4.0.1"
+        "anymatch": "~3.1.2",
+        "braces": "~3.0.2",
+        "glob-parent": "~5.1.2",
+        "is-binary-path": "~2.1.0",
+        "is-glob": "~4.0.1",
+        "normalize-path": "~3.0.0",
+        "readdirp": "~3.6.0"
       },
       "engines": {
-        "node": ">= 14.16.0"
+        "node": ">= 8.10.0"
       },
       "funding": {
         "url": "https://paulmillr.com/funding/"
+      },
+      "optionalDependencies": {
+        "fsevents": "~2.3.2"
       }
     },
     "node_modules/chrome-trace-event": {
@@ -3258,17 +3267,16 @@
       }
     },
     "node_modules/readdirp": {
-      "version": "4.1.2",
+      "version": "3.6.0",
-      "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-4.1.2.tgz",
+      "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-3.6.0.tgz",
-      "integrity": "sha512-GDhwkLfywWL2s6vEjyhri+eXmfH6j1L7JE27WhqLeYzoh/A3DBaYGEj2H/HFZCn/kMfim73FXxEJTw06WtxQwg==",
+      "integrity": "sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==",
       "dev": true,
       "license": "MIT",
-      "engines": {
+      "dependencies": {
-        "node": ">= 14.18.0"
+        "picomatch": "^2.2.1"
       },
-      "funding": {
+      "engines": {
-        "type": "individual",
+        "node": ">=8.10.0"
-        "url": "https://paulmillr.com/funding/"
       }
     },
     "node_modules/rechoir": {
@@ -3476,6 +3484,36 @@
         "node": ">=10.12.0"
       }
     },
+    "node_modules/sass/node_modules/chokidar": {
+      "version": "4.0.3",
+      "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-4.0.3.tgz",
+      "integrity": "sha512-Qgzu8kfBvo+cA4962jnP1KkS6Dop5NS6g7R5LFYJr4b8Ub94PPQXUksCw9PvXoeXPRRddRNC5C1JQUR2SMGtnA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "readdirp": "^4.0.1"
+      },
+      "engines": {
+        "node": ">= 14.16.0"
+      },
+      "funding": {
+        "url": "https://paulmillr.com/funding/"
+      }
+    },
+    "node_modules/sass/node_modules/readdirp": {
+      "version": "4.1.2",
+      "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-4.1.2.tgz",
+      "integrity": "sha512-GDhwkLfywWL2s6vEjyhri+eXmfH6j1L7JE27WhqLeYzoh/A3DBaYGEj2H/HFZCn/kMfim73FXxEJTw06WtxQwg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 14.18.0"
+      },
+      "funding": {
+        "type": "individual",
+        "url": "https://paulmillr.com/funding/"
+      }
+    },
     "node_modules/schema-utils": {
       "version": "4.3.0",
       "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-4.3.0.tgz",
@@ -4447,44 +4485,6 @@
         }
       }
     },
-    "node_modules/webpack-dev-server/node_modules/chokidar": {
-      "version": "3.6.0",
-      "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.6.0.tgz",
-      "integrity": "sha512-7VT13fmjotKpGipCW9JEQAusEPE+Ei8nl6/g4FBAmIm0GOOLMua9NDDo/DWp0ZAxCr3cPq5ZpBqmPAQgDda2Pw==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "anymatch": "~3.1.2",
-        "braces": "~3.0.2",
-        "glob-parent": "~5.1.2",
-        "is-binary-path": "~2.1.0",
-        "is-glob": "~4.0.1",
-        "normalize-path": "~3.0.0",
-        "readdirp": "~3.6.0"
-      },
-      "engines": {
-        "node": ">= 8.10.0"
-      },
-      "funding": {
-        "url": "https://paulmillr.com/funding/"
-      },
-      "optionalDependencies": {
-        "fsevents": "~2.3.2"
-      }
-    },
-    "node_modules/webpack-dev-server/node_modules/readdirp": {
-      "version": "3.6.0",
-      "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-3.6.0.tgz",
-      "integrity": "sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "picomatch": "^2.2.1"
-      },
-      "engines": {
-        "node": ">=8.10.0"
-      }
-    },
     "node_modules/webpack-merge": {
       "version": "5.10.0",
       "resolved": "https://registry.npmjs.org/webpack-merge/-/webpack-merge-5.10.0.tgz",

public/index.html

@@ -9,9 +9,6 @@
     <link rel="icon" type="image/png" sizes="16x16" href="assets/favicon/favicon-16x16.png">
 </head>
 <body>
-<button class="button has-tooltip-multiline has-tooltip-bottom has-text-link" data-tooltip="This is a tooltip!">
-    Hover me
-</button>
 
 <div class="navbar">
     <div class="navbar-brand">
@@ -40,13 +37,10 @@
                     </div>
                     <label for="height" class="label" data-i18n-key="height-cm">Höhe (cm)</label>
                     <input class="input" type="number" id="height">
-                </form>
-            </div>
-        </div>
-    </div>
 
-    <div class="container-inputs">
+
-        <div class="input-element">
+                    <div class="columns">
+                        <div class="column">
                             <label for="numFullFloors" class="label" data-i18n-key="full-floors">Vollebenen</label>
                             <span data-tooltip="Als Vollebenen zählen alle Ebenen die größer als 0.5m² sind, inklusive des Käfigbodens.">
                             <svg class="text-grey-dark" width="18" height="18" viewBox="0 0 18 18" fill="none"
@@ -60,26 +54,29 @@
                           stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                 </svg>
                         </span>
-        </div>
-        <div class="ncontainer">
-            <div class="input-group">
                             <button id="decreaseFloorNum">-</button>
                             <input type="text" id="numFullFloors" value="3" readonly>
                             <button id="increaseFloorNum">+</button>
                         </div>
-        </div>
-    </div>
 
-    <div class="input-element">
+                        <div class="column">
-        <div class="slidecontainer">
+                            <label for="numRats" id="labelNumRats" data-i18n-key="number-of-rats">Anzahl an
-            <label for="numRats" id="labelNumRats"></label>
+                                Ratten</label>
                             <input type="range" min="3" max="15" value="4" class="slider" id="numRats">
                         </div>
                     </div>
+                </form>
+            </div>
+        </div>
+    </div>
 </div>
 
-<div class="container output-element">
+
-    <strong data-i18n-key="result">Ergebnis</strong>
+<div class="card">
+    <div class="card-header">
+        <h2 class="title is-3" data-i18n-key="result">Ergebnis</h2>
+    </div>
+    <div class="card-content">
         <div id="resultsDiv"></div>
     </div>
 </div>

src/main.scss

@@ -18,3 +18,31 @@ $beige-lighter: #eff0eb;
 
 // Import the Google Font
 @import url("https://fonts.googleapis.com/css?family=Nunito:400,700");
+
+.tooltip {
+  position: relative;
+  cursor: help;
+
+  &::after {
+    content: attr(data-tooltip);
+    position: absolute;
+    bottom: 100%;
+    left: 50%;
+    transform: translateX(-50%);
+    background-color: rgba(0, 0, 0, 0.75);
+    color: white;
+    padding: 0.5em;
+    border-radius: 4px;
+    white-space: nowrap;
+    font-size: 0.75rem;
+    line-height: 1.2;
+    opacity: 0;
+    pointer-events: none;
+    transition: opacity 0.2s ease-in-out;
+    z-index: 1000;
+  }
+
+  &:hover::after {
+    opacity: 1;
+  }
+}

webpack.config.js

@@ -25,7 +25,7 @@ module.exports = {
     module: {
         rules: [
             {
-                test: /\.scss$/i,
+                test: /\.s[ac]ss$/i,
                 use: [
                     'style-loader',  // Injects styles into DOM
                     'css-loader',    // Resolves CSS imports