From d630852fd0c4e43c069a55d89b0c32a251e496fb Mon Sep 17 00:00:00 2001
From: "marcusferl@weifer.de" <marcus>
Date: Thu, 1 Sep 2022 16:12:19 +0200
Subject: [PATCH] marcusferl.de/portfolio/ipv4-converter

---
 src/app/header/header.component.html |  2 +-
 src/app/input/input.component.scss   |  9 +++----
 src/app/output/output.component.html | 36 ++++++++++++++++++----------
 src/app/output/output.component.scss | 12 +++++++---
 src/styles.scss                      | 23 ++++++++++--------
 5 files changed, 52 insertions(+), 30 deletions(-)

diff --git a/src/app/header/header.component.html b/src/app/header/header.component.html
index 3ec137c..470e0d1 100644
--- a/src/app/header/header.component.html
+++ b/src/app/header/header.component.html
@@ -1,3 +1,3 @@
 <div class="header">
-    <img src="/assets/img/logo.png" class="logo">
+    <h1>Ipv4 Converter</h1>
 </div>
\ No newline at end of file
diff --git a/src/app/input/input.component.scss b/src/app/input/input.component.scss
index 2f3ec26..c4ce215 100644
--- a/src/app/input/input.component.scss
+++ b/src/app/input/input.component.scss
@@ -1,8 +1,9 @@
 .input_field {
-    min-width: 150px;
-    max-width: 500px;
+
     height: 58px;
-    width: 100%;
+    min-width: 300px;
+    max-width: 1000px;
+    width: auto;
     margin-top: 15px;
     margin-right: 12px;
     margin-left: 5px;
@@ -14,7 +15,7 @@
 .select {
     min-width: 50px;
     max-width: 100px;
-    width: 100%;
+    width: auto;
     margin-top: 15px;
     margin-right: 12px;
 }
diff --git a/src/app/output/output.component.html b/src/app/output/output.component.html
index 6db2ac2..9db47f4 100644
--- a/src/app/output/output.component.html
+++ b/src/app/output/output.component.html
@@ -1,42 +1,54 @@
 <div class="card">
     <label class="label">Ipv4</label>
     <div>
-        <p><label class="outlabel">Ip:</label><label>{{service.bin_dec_dict.Ipv4.dec}}</label></p>
-        <p><label class="outlabel">Binary:</label><label>{{service.bin_dec_dict.Ipv4.bin}}</label></p>
+        <p><label class="outlabel">Ip:</label></p>
+        <p><label class="output">{{service.bin_dec_dict.Ipv4.dec}}</label></p>
+        <p><label class="outlabel">Binary:</label></p>
+        <p><label class="output">{{service.bin_dec_dict.Ipv4.bin}}</label></p>
     </div>
 </div>
 <div class="card">
     <label class="label">Subnet Mask</label>
     <div>
-        <p><label class="outlabel">Ip:</label><label>{{service.bin_dec_dict.Subnet.dec}}</label></p>
-        <p><label class="outlabel">Binary:</label><label>{{service.bin_dec_dict.Subnet.bin}}</label></p>
+        <p><label class="outlabel">Ip:</label></p>
+        <p><label>{{service.bin_dec_dict.Subnet.dec}}</label></p>
+        <p><label class="outlabel">Binary:</label></p>
+        <p><label>{{service.bin_dec_dict.Subnet.bin}}</label></p>
     </div>
 </div>
 <div class="card">
     <label class="label">Broadcast</label>
     <div>
-        <p><label class="outlabel">Ip:</label><label>{{service.bin_dec_dict.Broadcast.dec}}</label></p>
-        <p><label class="outlabel">Binary:</label><label>{{service.bin_dec_dict.Broadcast.bin}}</label></p>
+        <p><label class="outlabel">Ip:</label></p>
+        <p><label>{{service.bin_dec_dict.Broadcast.dec}}</label></p>
+        <p><label class="outlabel">Binary:</label></p>
+        <p><label>{{service.bin_dec_dict.Broadcast.bin}}</label></p>
     </div>
 </div>
 <div class="card">
     <label class="label">NetID</label>
     <div>
-        <p><label class="outlabel">Ip:</label><label>{{service.bin_dec_dict.NetID.dec}}</label></p>
-        <p><label class="outlabel">Binary:</label><label>{{service.bin_dec_dict.NetID.bin}}</label></p>
+        <p><label class="outlabel">Ip:</label></p>
+        <p><label>{{service.bin_dec_dict.NetID.dec}}</label></p>
+        <p><label class="outlabel">Binary:</label></p>
+        <p><label>{{service.bin_dec_dict.NetID.bin}}</label></p>
     </div>
 </div>
 <div class="card">
     <label class="label">First Ip</label>
     <div>
-        <p><label class="outlabel">Ip:</label><label>{{service.bin_dec_dict.FirstIP.dec}}</label></p>
-        <p><label class="outlabel">Binary:</label><label>{{service.bin_dec_dict.FirstIP.bin}}</label></p>
+        <p><label class="outlabel">Ip:</label></p>
+        <p><label>{{service.bin_dec_dict.FirstIP.dec}}</label></p>
+        <p><label class="outlabel">Binary:</label></p>
+        <p><label>{{service.bin_dec_dict.FirstIP.bin}}</label></p>
     </div>
 </div>
 <div class="card">
     <label class="label">Last Ip</label>
     <div>
-        <p><label class="outlabel">Ip:</label><label>{{service.bin_dec_dict.LastIP.dec}}</label></p>
-        <p><label class="outlabel">Binary:</label><label>{{service.bin_dec_dict.LastIP.bin}}</label></p>
+        <p><label class="outlabel">Ip:</label></p>
+        <p><label>{{service.bin_dec_dict.LastIP.dec}}</label></p>
+        <p><label class="outlabel">Binary:</label></p>
+        <p><label>{{service.bin_dec_dict.LastIP.bin}}</label></p>
     </div>
 </div>
\ No newline at end of file
diff --git a/src/app/output/output.component.scss b/src/app/output/output.component.scss
index 43450e6..e30e598 100644
--- a/src/app/output/output.component.scss
+++ b/src/app/output/output.component.scss
@@ -1,22 +1,28 @@
 .card {
     min-height: 40px;
+    max-height: 250px;
     background-color: white;
-    width: 680px;
+    min-width: 300px;
+    max-width: auto;
+    width: auto;
     border: 3px solid rgba(0, 0, 0, 0.30);
     border-radius: 10px;
     overflow: hidden;
     position: relative;
     padding-left: 10px;
-    padding-top: 5px;
+    padding-top: 0px;
     margin-bottom: 10px;
     margin-left: 5px;
+
 }
 
 .label {
     font-size: 18px;
 
+
 }
 
 .outlabel {
-    margin-right: 30px;
+    width: 20px;
+    margin-right: 100px;
 }
\ No newline at end of file
diff --git a/src/styles.scss b/src/styles.scss
index 736e179..f7b3e20 100644
--- a/src/styles.scss
+++ b/src/styles.scss
@@ -1,4 +1,3 @@
-
 // Custom Theming for Angular Material
 // For more information: https://material.angular.io/guide/theming
 @use '@angular/material' as mat;
@@ -20,13 +19,10 @@ $Ipv4_Converter-warn: mat.define-palette(mat.$red-palette);
 
 // Create the theme object. A theme consists of configurations for individual
 // theming systems such as "color" or "typography".
-$Ipv4_Converter-theme: mat.define-light-theme((
-  color: (
-    primary: $Ipv4_Converter-primary,
-    accent: $Ipv4_Converter-accent,
-    warn: $Ipv4_Converter-warn,
-  )
-));
+$Ipv4_Converter-theme: mat.define-light-theme((color: (primary: $Ipv4_Converter-primary,
+        accent: $Ipv4_Converter-accent,
+        warn: $Ipv4_Converter-warn,
+      )));
 
 // Include theme styles for core and each component used in your app.
 // Alternatively, you can import and @include the theme mixins for each component
@@ -34,5 +30,12 @@ $Ipv4_Converter-theme: mat.define-light-theme((
 @include mat.all-component-themes($Ipv4_Converter-theme);
 
 
-html, body { height: 100%; }
-body { margin: 0; font-family: Roboto, "Helvetica Neue", sans-serif; }
+html,
+body {
+  height: 100%;
+}
+
+body {
+  margin: 0;
+  font-family: Roboto, "Helvetica Neue", sans-serif;
+}
\ No newline at end of file