ejs + webadmin + bugfixes

web/css/breadcrumbs.css

@@ -1,3 +1,15 @@
+h1 {
+    color: var(--color-4);
+    font-size: 52px;
+    font-weight: 300;
+    margin-top: 0;
+    margin-bottom: 0;
+}
+
+h1#tuner-name {
+    font-size: 32px;
+}
+
 h2 {
     color: var(--color-4);
     margin-bottom: 0;
@@ -8,9 +20,22 @@ h3 {
     font-size: 22px;
 }
 
+p#tuner-desc {
+    margin: 0;
+}
+
+label {
+    font-size: 12px;
+    font-weight: bold;
+    text-transform: uppercase;
+    display: block;
+    text-align: left;
+    color: var(--color-4);
+}
+
 .canvas-container {
     width: 100%;
-    height: 200px;
+    height: 175px;
 }
 
 #data-ant {
@@ -36,7 +61,7 @@ h3 {
     margin-right: 5px;
 }
 
-#color-settings, #settings {
+#settings, #back-btn {
     background: transparent;
     border: 0;
     color: white;
@@ -53,12 +78,13 @@ h3 {
     cursor: pointer;
 }
 
-#color-settings {
-    top: 96px;
+#settings:hover, #back-btn:hover {
+    background: var(--color-3);
 }
 
-#settings:hover, #color-settings:hover {
-    background: var(--color-3);
+#back-btn {
+    left: 15px;
+    right: auto;
 }
 
 #af-list ul {
@@ -79,6 +105,49 @@ h3 {
     display: none;
 }
 
+.checkbox input[type="checkbox"] {
+    padding: 0;
+    height: initial;
+    width: initial;
+    margin-bottom: 0;
+    display: none;
+    cursor: pointer;
+  }
+  
+  .checkbox label {
+    position: relative;
+    cursor: pointer;
+  }
+  
+  .checkbox label:before {
+    content:'';
+    appearance: none;
+    -webkit-appearance: none;
+    background-color: transparent;
+    border: 2px solid var(--color-4);
+    padding: 10px;
+    display: inline-block;
+    position: relative;
+    vertical-align: middle;
+    cursor: pointer;
+    margin-right: 5px;
+  }
+  
+  .form-group input:checked + label:after {
+    content: '✓';
+    display: block;
+    position: absolute;
+    top: 2px;
+    left: 6px;
+    width: 16px;
+    height: 16px;
+  }
+
+  .tuner-info {
+    margin-top: 0px !important;
+    margin-bottom: 0px !important;
+  }
+
 @media (max-width: 768px) {
     canvas, #flags-container {
         display: none;
@@ -153,6 +222,9 @@ h3 {
     .button-ims {
         order: 3;
     }
+    .tuner-info {
+        margin-bottom: -60px !important;
+    }
 }
 
 @media only screen and (min-width: 960px) and (max-height: 860px) {
@@ -165,4 +237,13 @@ h3 {
     .canvas-container {
         height: 120px;
     }
+    .tuner-info #tuner-name {
+        float: left;
+        font-size: 24px;
+    }
+
+    .tuner-info #tuner-desc {
+        float: right;
+        text-align: right;
+    }
 }

web/css/buttons.css

@@ -1,4 +1,4 @@
-button {
+button, input[type="submit"] {
     width: 100%;
     height: 100%;
     border: 0;
@@ -18,6 +18,18 @@ button:hover {
     opacity: 0.6;
 }
 
+input[type="text"], textarea, input[type="password"] {
+    width: 300px;
+    min-height: 46px;
+    padding-left: 20px;
+    box-sizing: border-box;
+    border: 2px solid transparent;
+    outline: 0;
+    color: white;
+    background-color: var(--color-1);
+    font-family: 'Titillium Web', sans-serif;
+}
+
 #tune-buttons input[type="text"] {
     width: 50%;
     height: 100%;

web/css/dropdown.css

@@ -53,8 +53,7 @@
     border: none;
     font-size: 16px;
     overflow: hidden;
-    opacity: 0;
-    visibility: hidden;
+    display: none;
     background: var(--color-main);
     color: var(--color-4);
     border: 1px solid var(--color-4);
@@ -70,9 +69,9 @@
     background: var(--color-4);
   }
   .dropdown.opened .options {
-    opacity: 1;
-    visibility: visible;
+    display:block;
     transform: translateY(0);
+    position:absolute;
   }
   .dropdown.opened::before {
     transform: rotate(-225deg);

web/css/entry.css

@@ -6,4 +6,5 @@
 @import url("dropdown.css"); /* Custom dropdown menus */
 @import url("panels.css"); /* Different panels and their sizes */
 @import url("modal.css"); /* Modal window */
+@import url("setup.css"); /* Web setup interface */
 @import url("helpers.css"); /* Stuff that is used often such as text changers etc */

web/css/helpers.css

@@ -30,6 +30,10 @@
     color: var(--color-4);
 }
 
+.br-0 {
+    border-radius: 0px;
+}
+
 .br-5 {
     border-radius: 5px;
 }
@@ -137,6 +141,14 @@
     padding: 10px;
 }
 
+.p-bottom-20 {
+    padding-bottom: 20px;
+}
+
+.input-text {
+    background-color: var(--color-2) !important;
+}
+
 @media only screen and (max-width: 960px) {
     .text-medium-big {
         font-size: 32px;

web/css/main.css

@@ -55,6 +55,11 @@ body {
     width: 1180px;
     max-width: 1180px;
 }
+#wrapper.setup-wrapper {
+    margin: auto;
+    position: static;
+    transform: none;
+}
 
 @media (max-width: 1180px) {
     #wrapper {

web/css/modal.css

@@ -68,13 +68,6 @@
     background: var(--color-5);
 }
 
-.modal label {
-    font-size: 12px;
-    font-weight: bold;
-    text-transform: uppercase;
-    display: block;
-}
-
 @media only screen and (max-width: 768px) {
     .modal-content {
         min-width: 90% !important;

web/css/panels.css

@@ -17,6 +17,10 @@
     width: 33%;
 }
 
+.panel-50 {
+    width: 50%;
+}
+
 .panel-75 {
     width: 68%;
 }

web/css/setup.css

@@ -0,0 +1,42 @@
+
+.setup-wrapper .form-group, .setup-wrapper textarea {
+    display: inline-block;
+    float: none;
+}
+
+.setup-wrapper .form-group {
+    margin-right: 5px;
+    margin-left: 5px;
+}
+
+
+.setup-wrapper textarea {
+    width: 100%;
+    max-width: 768px;
+    background-color: var(--color-2);
+    height: 100px;
+    font-size: 14px;
+    padding-top: 10px;
+}
+
+#map {
+    height:400px;
+    width:100%;
+    overflow: hidden;
+    max-width:800px;
+    margin: auto;
+    margin-bottom: 20px;
+}
+
+.setup-wrapper h3 {
+    font-weight: 300;
+    margin: 8px;
+}
+
+.w-150 {
+    width: 150px !important
+}
+
+.w-100 {
+    width: 100px !important;
+}