feat: Move result to tab content

public/index.html

@@ -4,7 +4,8 @@
     <meta charset="UTF-8">
     <title>Käfigrechner</title>
     <meta content="width=device-width, initial-scale=1" name="viewport"/>
-    <meta name="description" content="Rechner für die Größe eines Rattenkäfigs basierend auf den Empfehlungen des VdRD e.V.">
+    <meta name="description"
+          content="Rechner für die Größe eines Rattenkäfigs basierend auf den Empfehlungen des VdRD e.V.">
     <meta name="keywords" content="Farbratten, Käfig, Ratten, Rechner, Rat, Calculator, Cage">
     <link rel="apple-touch-icon" sizes="180x180" href="assets/favicon/apple-touch-icon.png">
     <link rel="icon" type="image/png" sizes="32x32" href="assets/favicon/favicon-32x32.png">
@@ -61,8 +62,8 @@
         <p>Here is a list of cages you can get.</p>
     </div>
     <div class="" data-content-id="3">
-        <div class="card" id="container-cages">
-            <div class="card-content" id="card-ManualMeasurements">
+        <div class="card">
+            <div class="card-content">
                 <h2 class="title is-4"><label data-i18n-key="cage-measurements"
                                               for="form-cage-measurements">Käfigmaße</label></h2>
                 <form id="form-cage-measurements" class="form-measurements">
@@ -91,7 +92,6 @@
                             </span>
                     </p>
 
-
                     <div class="columns">
                         <div class="column">
                             <label for="numFullFloors" class="label"
@@ -120,17 +120,17 @@
                 </form>
             </div>
         </div>
-    </div>
-</div>
-
-
-<div class="card">
+        <div class="card-footer is-fullwidth">
+            <div class="card" id="result-card">
                 <div class="card-header">
-        <h2 class="title is-3" data-i18n-key="result">Ergebnis</h2>
+                    <h2 class="card-header-title is-3 is-centered" data-i18n-key="result">Ergebnis</h2>
                 </div>
                 <div class="card-content">
                     <div id="resultsDiv"></div>
                 </div>
+            </div>
+        </div>
+    </div>
 </div>
 
 <script src="./bundle.js"></script>

src/main.scss

@@ -28,6 +28,9 @@ body {
   padding: 5px;
 }
 
+#result-card {
+  width: 100%;
+}
 
 // Import the Google Font
 @import url("https://fonts.googleapis.com/css?family=Nunito:400,700");