FE: more information density on device details

Signed-off-by: jokob-sk <jokob.sk@gmail.com>

front/css/app.css

@@ -508,6 +508,41 @@ body
     color: #a0a0a0;
 }
 
+.small-box {
+  margin-bottom: 15px !important;
+  float: left;
+  width: 100%;
+}
+#TopSmallBoxes .small-box {
+    height: 3em;
+}
+
+.small-box .icon
+{
+  font-size: 2.2em !important;
+  float: right;
+  top: 0;
+}
+.small-box .small-box-text
+{
+    float:left;
+    font-size: x-large;
+    margin-top: -0.3em;
+}
+
+.small-box .infobox_label
+{
+    font-size: larger;
+    float: right;
+    text-align: center;
+}
+
+hr
+{
+    margin-top: 5px;
+    margin-bottom: 10px;
+}
+
 /* -----------------------------------------------------------------------------
    Customized Box Borders
 ----------------------------------------------------------------------------- */
@@ -901,10 +936,6 @@ height: 50px;
     background-color: #b2b6be !important;
 }
 
-.infobox_label {
-    font-size: 16px !important;
-}
-
 .deviceSelector
 {
     display: block;
@@ -1667,6 +1698,10 @@ textarea[readonly],
     min-height: 42px;
 }
 
+.form-group {
+  margin-bottom: 5px !important;
+}
+
 /* Remove the default Select2 chevron (the down arrow) */
 .select2-container .select2-selection__arrow b {
     display: none !important;

front/deviceDetailsEdit.php

@@ -172,6 +172,15 @@ function getDeviceData() {
                 labelClasses: "col-sm-4 col-xs-12 control-label",
                 inputClasses: "col-sm-8 col-xs-12 input-group"
               },
+              // Group for Custom properties.
+              DevDetail_CustomProperties_Title: {
+                data: ["devCustomProps"],
+                docs: "https://docs.netalertx.com/CUSTOM_PROPERTIES",
+                iconClass: "fa fa-list",
+                inputGroupClasses: "field-group cutprop-group col-lg-6 col-sm-12 col-xs-12",
+                labelClasses: "col-sm-12 col-xs-12 control-label",
+                inputClasses: "col-sm-12 col-xs-12 input-group"
+              },
               // Group for Children.
               DevDetail_Children_Title: {
                 data: ["devChildrenDynamic"],
@@ -181,15 +190,6 @@ function getDeviceData() {
                 labelClasses: "col-sm-12 col-xs-12 control-label",
                 inputClasses: "col-sm-12 col-xs-12 input-group"
               },
-              // Group for Custom properties.
-              DevDetail_CustomProperties_Title: {
-                data: ["devCustomProps"],
-                docs: "https://docs.netalertx.com/CUSTOM_PROPERTIES",
-                iconClass: "fa fa-list",
-                inputGroupClasses: "field-group cutprop-group col-lg-6 col-sm-12 col-xs-12",
-                labelClasses: "col-sm-12 col-xs-12 control-label",
-                inputClasses: "col-sm-12 col-xs-12 input-group"
-              }
             };
 
             // Filter settings data to get relevant settings

front/php/components/device_cards.php

@@ -21,8 +21,10 @@ function renderSmallBox($params) {
             <a href="#" onclick="javascript: ' . htmlspecialchars($onclickEvent) . '">
                 <div class="small-box ' . htmlspecialchars($color) . '">
                     <div class="inner">
-                        <h3 id="' . htmlspecialchars($headerId) . '" style="' . htmlspecialchars($headerStyle) . '"> ' . htmlspecialchars($dataValue) . ' </h3>
+                        <div class="col-lg-6 col-sm-6 col-xs-6">
-                        <p class="infobox_label">' . lang(htmlspecialchars($labelLang)) . '</p>
+                            <div class="small-box-text col-lg-12 col-sm-12 col-xs-12" id="' . htmlspecialchars($headerId) . '" style="' . htmlspecialchars($headerStyle) . '"> <b>' . htmlspecialchars($dataValue) . '</b> </div>
+                        </div>
+                        <div class="infobox_label col-lg-6 col-sm-6 col-xs-6">' . lang(htmlspecialchars($labelLang)) . '</div>
                     </div>
                     <div class="icon">
                         <i id="' . htmlspecialchars($iconId) . '" class="' . htmlspecialchars($iconClass) . '"></i>