Merge pull request #30 from it-at-m/feature-1631

feat(ZMS-1631): add default tempaltes

zmscalldisplay/scss/block/aufrufanzeige.scss

@@ -1,23 +1,3 @@
-/* ----------------------------------------------
-    qr code
----------------------------------------------- */
-.qrCode--Headline {
-    text-align: center;
-    background: #fff;
-    font-family: Arial,sans-serif;
-    font-size: 32px;
-    font-weight: 700;
-    line-height: 45px;
-    margin-bottom: 3px;
-    margin-top: 0px;
-}
-.qrContainer {
-    background: #fff;
-}
-
-/* ----------------------------------------------
-    aufrufanzeige
----------------------------------------------- */
 .aufrufanzeige
 {
     background:transparent;
@@ -56,8 +36,8 @@
 
 .waitingColumn {
     position: absolute;
-    left: 50px; 
-    top: 450px; 
+    left: 40px; 
+    top: 420px; 
 }
 .aufrufanzeige .wartende_aktuell
 {
@@ -108,11 +88,14 @@
 .aufrufanzeige .uhr
 {
     position: absolute;
-    left:55px;
-    top:105px;
+    left:60px;
+    top:114px;
     width:275px;
-    height:275px;
   }
+.aufrufanzeige .uhr #clock_medium,
+.aufrufanzeige .uhr #clock_big {
+    display:none;
+}
 
 .aufrufanzeige .aufrufanzeige_Datum
 {
@@ -122,14 +105,14 @@
     position:absolute;
     text-align:center;
     font-size:24px;
-    left:50px;
-    top:390px;
+    left:40px;
+    top:370px;
     width:275px;
 }
 
 
 /* ----------------------------------------------
-    Text & Logo|QrCode
+    Text & Logo
 ---------------------------------------------- */
 .aufrufanzeige .aufrufanzeige_text
 {
@@ -142,11 +125,30 @@
     text-align:center;
     left: 1087px;
     top:89px;
-    width: 265px;
+    width: 234px;
 }
 
-.aufrufanzeige_text .qrContainer
+.aufrufanzeige .infotext-content {
+    margin-left: 30px;
+}
+
+.aufrufanzeige .infotext
 {
+    top: 77px;
+    position: absolute;
+    padding: 10px 40px;
+    font-size:2em;
+    font-weight:normal;
+    line-height:26px;
     width: 100%;
-    text-align: center;
+    background: #F2F6FA;
+}
+
+#infoicon {
+    background: url(img/info-icon.svg) top left no-repeat;
+    width: 21px;
+    height: 21px;
+    font-size: 36px;
+    position: absolute;
+    background-size: cover;
 }

zmscalldisplay/scss/block/footer.scss

@@ -0,0 +1,37 @@
+.footer {
+	position:absolute;
+	left:0px;
+	top:630px;
+	width:800px;
+}
+
+#animate-container {
+ background-color: $blue;
+ color: #ffffff;
+ font-size: 70px;
+ font-weight: 700;
+ white-space: nowrap;
+ overflow: hidden;
+ padding: 10px 0;
+ width: 200%;
+
+ animation-name: text-indent-animate;
+ animation-duration: 60s;
+ animation-timing-function: linear;
+ animation-direction: reverse;
+ animation-iteration-count: infinite;
+}
+
+#animate-container:hover {
+ animation-play-state: paused;
+}
+
+@keyframes text-indent-animate {
+ 0% {
+   text-indent: -200%;
+ }
+
+ 100% {
+  text-indent: 100%;
+ }
+}

zmscalldisplay/scss/block/tabellen.scss

@@ -5,6 +5,8 @@
 div.aufrufanzeige_anzeigebereich_einzeilig
 {
 	float:none;
+	margin: auto;
+    margin-left:80px;
     width: 200px;
 }
 div.aufrufanzeige_anzeigebereich_zweizeilig
@@ -17,25 +19,24 @@ div.aufrufanzeige_anzeigebereich_zweizeilig
 
 .aufrufanzeige .aufrufanzeige_main
 {
-    left: 370px;
+    left: 15%;
     position: absolute;
-    top: 105px;
-    width: 980px;
-    height: 880px;
-    overflow-y: auto;
+    top: 135px;
 }
 
 .aufrufanzeige table.aufrufanzeige_aufruf
 {
     border-spacing:0;
     table-layout:fixed;
-    width:700px;
+    width:570px;
 }
 .aufrufanzeige table.aufrufanzeige_aufruf th
 {
-    background: $white;
-    border-right: 20px solid $borderLight;
+    background: $blue;
+    border-right: 3px solid $borderLight;
+    border-left: 3px solid $borderLight;
     border-top: 3px solid $borderLight;
+    color: $white;
     font-size: 36px;
     font-family: Arial, sans-serif;
     font-weight: bold;
@@ -47,21 +48,43 @@ div.aufrufanzeige_anzeigebereich_zweizeilig
 }
 .aufrufanzeige table.aufrufanzeige_aufruf td
 {
-    background: $backgroundLight;
+    background: rgba(255,255,255,0.5);
     color: $black;
-    border-right: 20px solid $borderLight;
+    border-right: 3px solid $borderLight;
+    border-left: 3px solid $borderLight;
     border-top: 3px solid $borderLight;
     /*font-size: 70px;
     line-height: 108px;*/
     font-family: Arial, sans-serif;
     font-weight: bold;
-    text-align:center;
+    text-align: left;
     padding:8px 0px;
+    padding-left: 14px;
+}
+
+.aufrufanzeige table.aufrufanzeige_aufruf .odd td {
+    background: #F2F6FA;
+}
+
+.description_de {
+  font-size: 18px;
+  font-weight: bold;
+  text-align: left;
+  line-height: 18px;
+  padding: 8px 8px 4px 16px;
+}
+
+.description_eng {
+  font-size: 18px;
+  font-weight: normal;
+  text-align: left;
+  line-height: 18px;
+  padding: 4px 8px 8px 16px;
 }
 
 .aufrufanzeige table.aufrufanzeige_aufruf td div.highlight {
     &.called span {
-        color: $red;
+        color: $baseTextColor;
     }
 }
 
@@ -73,8 +96,8 @@ span.terminkundenanzeige
 }
 span.wartenummer
 {
-	font-size: 60px;
-  line-height: 60px;
+  font-size: 50px;
+  line-height: 72px;
 }
 span.terminkundennummer
 {
@@ -90,21 +113,6 @@ span.terminkundennummer.smallerFont8Chars {
 	font-size: 45px;
 	line-height:45px;
 }
-span.longrange {
-    font-size:70px;
-}
-.zweispaltig span.longrange {
-    font-size:30px;
-}
-span.standalone {
-    font-size:60px;
-}
-
-.zweispaltig span.terminkundennummer,
-.zweispaltig span.wartenummer, .zweispaltig span.standalone {
-    font-size: 50px;
-    line-height: 50px;
-}
 
 /* ----------------------------------------------
     Aufruf-Tabelle, zweispaltig
@@ -114,34 +122,30 @@ div.aber_zweispaltig {
     margin-left:0px;
 }
 .aufrufanzeige table.zweispaltig {
-    width:340px;
+    width:500px;
 }
 .aufrufanzeige table.zweispaltig th.wartenummer {
-    width:60%;
+    width:45%;
 }
 .aufrufanzeige table.zweispaltig th,
 .aufrufanzeige table.zweispaltig td {
     border-right:4px solid $borderLight;
 }
 .zweispaltig span.terminkundennummer {
-    font-size:50px;
-    line-height: 50px;
+  font-size: 50px;
+  line-height: 72px;
 }
 .zweispaltig span.terminkundennummer.abholeranzeige
 {
-    font-size: 30px;
-    line-height: 30px;
+  font-size: 50px;
+  line-height: 72px;
 }
 .zweispaltig span.terminkundennummer.smallerFont8Chars {
-    font-size: 40px;
-    line-height: 40px;
+  font-size: 50px;
+  line-height: 72px;
 }
 .puffer {padding-left:10px;}
 
-table.zweispaltig td.platznummer span.destination {
-    font-size:30px;
-}
-
 /* ----------------------------------------------
     Bei mehr als 2 Spalten
 ---------------------------------------------- */

zmscalldisplay/scss/calldisplay.scss

@@ -17,5 +17,5 @@
 @import "block/aufrufanzeige";
 @import "block/tabellen";
 @import "block/debug";
-@import "block/clock";
 @import "layout/media";
+@import "block/footer";

zmscalldisplay/scss/layout/main.scss

@@ -23,5 +23,5 @@ body {
     overflow: 		    hidden;
     margin:				0;
     padding:			0;
-    background: 		url(img/background_anzeige1.png) top left no-repeat #C8D5E6;
+    background: 		url(img/background_anzeige1.png) top left repeat-x $white;
 }