diff --git a/src/main/angular/src/app/voltage-drop/voltage-drop.component.html b/src/main/angular/src/app/voltage-drop/voltage-drop.component.html index 9d7aebe..f39cf03 100644 --- a/src/main/angular/src/app/voltage-drop/voltage-drop.component.html +++ b/src/main/angular/src/app/voltage-drop/voltage-drop.component.html @@ -1,68 +1,103 @@ -
-
-
Spannung
-
-
V
-
- -
{{v}}
-
+
+ +
+
+ +
+ Vorgaben +
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpannungV
+ +
{{ v }}
+
+
LeistungkW
+ +
{{ c }}
+
+
Querschnittmm²
+ +
{{ c }}
+
+
Länge (1-fach)m
+ +
{{ l }}
+
+
Spezifischer WiderstandΩ*m
+ +
{{ r.name }}
+
+
+
+
-
-
Leistung
-
-
kW
-
- -
{{c}}
-
-
-
+
+
-
-
Querschnitt
-
-
mm²
-
- -
{{c}}
-
-
-
+
+ Ergebnisse +
-
-
Länge (1-fach)
-
-
m
-
- -
{{l}}
-
-
-
+
+ + + + + + + + +
-
-
Spezifischer Widerstand
-
-
Ω*m
-
- -
{{r.name}}
-
- -
- - - - - - - - -
diff --git a/src/main/angular/src/app/voltage-drop/voltage-drop.component.less b/src/main/angular/src/app/voltage-drop/voltage-drop.component.less index 14169e1..56be167 100644 --- a/src/main/angular/src/app/voltage-drop/voltage-drop.component.less +++ b/src/main/angular/src/app/voltage-drop/voltage-drop.component.less @@ -1,76 +1,28 @@ @import "../../tile.less"; -table { - width: 100%; +.label { + } -th { - text-align: left; +.input { + } -td { - text-align: right; +.unit { + } -.box { - border-top: 1px solid black; - margin-top: 1em; -} +.shortcuts { + padding-top: calc(@space / 2); + padding-bottom: calc(@space * 2); -.box:first-child { - border-top-width: 0; -} - -.value { - clear: both; - - .label { - padding: 1vmin 0 0.5vmin 0; - } - - .input { - clear: both; + .shortcut { float: left; - } - - input[type=number] { - float: left; - text-align: right; - } - - input.tooHigh { - background-color: red; - } - - .unit { - padding-left: 0.5vmin; - } - - .shortcuts { - clear: both; - - .shortcut { - float: left; - font-size: 90%; - padding: 0.2vmin 0.7vmin; - margin: 0.5vmin; - border-radius: 0.5vmin; - background-color: lightgray; - } - - .shortcutSelected { - background-color: lightgreen; - } - + font-size: 80%; + padding: calc(@space / 2) @space; + margin-right: calc(@space / 2); + background-color: lightskyblue; + border-radius: @space; } } - -@media (min-width: 800px) { - .box { - float: left; - width: 50%; - border-top-width: 0; - margin-top: 0; - } -}