From 13fcba2b85ec21b62cbbd5d1bc5162d3c9722a99 Mon Sep 17 00:00:00 2001 From: Alex <40072887+alexdcrane@users.noreply.github.com> Date: Thu, 7 Aug 2025 11:22:31 -0700 Subject: [PATCH] Dashboard - Fix child widget styling (#7452) * Dashboard - Fix child widget styles * Update parent.php * Update config.php --- .../resources/dashboard/config.php | 2 +- core/dashboard/index.php | 40 +++--- core/dashboard/resources/dashboard/parent.php | 122 +----------------- 3 files changed, 27 insertions(+), 137 deletions(-) diff --git a/app/active_calls/resources/dashboard/config.php b/app/active_calls/resources/dashboard/config.php index 17b6650ed0..13da26f724 100644 --- a/app/active_calls/resources/dashboard/config.php +++ b/app/active_calls/resources/dashboard/config.php @@ -13,7 +13,7 @@ $array['dashboard'][$x]['dashboard_height'] = ''; $array['dashboard'][$x]['dashboard_content'] = ''; $array['dashboard'][$x]['dashboard_content_text_align'] = ''; $array['dashboard'][$x]['dashboard_content_details'] = ''; -$array['dashboard'][$x]['dashboard_chart_type'] = 'number'; +$array['dashboard'][$x]['dashboard_chart_type'] = 'icon'; $array['dashboard'][$x]['dashboard_label_enabled'] = 'true'; $array['dashboard'][$x]['dashboard_label_text_color'] = '#444444'; $array['dashboard'][$x]['dashboard_label_text_color_hover'] = ''; diff --git a/core/dashboard/index.php b/core/dashboard/index.php index 88809d946f..d4b870b603 100644 --- a/core/dashboard/index.php +++ b/core/dashboard/index.php @@ -286,11 +286,11 @@ div.hud_chart { foreach ($dashboard as $row) { $dashboard_id = 'id_'.md5(preg_replace('/[^-A-Fa-f0-9]/', '', $row['dashboard_uuid'])); if (!empty($row['dashboard_icon_color'])) { - echo "#".$dashboard_id." .hud_stat:has(i) {\n"; + echo "#".$dashboard_id." .hud_stat .fas {\n"; echo " color: ".$row['dashboard_icon_color'].";\n"; echo "}\n"; } - if ($row['dashboard_label_enabled'] == 'false') { + if ($row['dashboard_label_enabled'] == 'false' && $row['dashboard_path'] != 'dashboard/parent') { echo "#".$dashboard_id." .hud_title:first-of-type {\n"; echo " display: none;\n"; echo "}\n"; @@ -302,30 +302,30 @@ foreach ($dashboard as $row) { echo "}\n"; } if (!empty($row['dashboard_label_text_color']) || !empty($row['dashboard_label_background_color'])) { - echo "#".$dashboard_id." .hud_title:first-of-type {\n"; + echo "#".$dashboard_id." > .hud_box > .hud_content > .hud_title:first-of-type {\n"; if (!empty($row['dashboard_label_text_color'])) { echo " color: ".$row['dashboard_label_text_color'].";\n"; } if (!empty($row['dashboard_label_background_color'])) { echo " background-color: ".$row['dashboard_label_background_color'].";\n"; } echo "}\n"; } if (!empty($row['dashboard_label_text_color_hover']) || !empty($row['dashboard_label_background_color_hover'])) { - echo "#".$dashboard_id.":hover .hud_title:first-of-type {\n"; + echo "#".$dashboard_id.":hover > .hud_box > .hud_content > .hud_title:first-of-type {\n"; if (!empty($row['dashboard_label_text_color_hover'])) { echo " color: ".$row['dashboard_label_text_color_hover'].";\n"; } if (!empty($row['dashboard_label_background_color_hover'])) { echo " background-color: ".$row['dashboard_label_background_color_hover'].";\n"; } echo "}\n"; } if (!empty($row['dashboard_number_text_color'])) { - echo "#".$dashboard_id." .hud_stat {\n"; + echo "#".$dashboard_id." > .hud_box > .hud_content > .hud_stat {\n"; echo " color: ".$row['dashboard_number_text_color'].";\n"; echo "}\n"; } if (!empty($row['dashboard_number_text_color_hover'])) { - echo "#".$dashboard_id.":hover .hud_stat {\n"; + echo "#".$dashboard_id.":hover > .hud_box > .hud_content > .hud_stat {\n"; echo " color: ".$row['dashboard_number_text_color_hover'].";\n"; echo "}\n"; } if (!empty($row['dashboard_background_color'])) { $background_color = json_decode($row['dashboard_background_color'], true); - echo "#".$dashboard_id." .hud_content {\n"; + echo "#".$dashboard_id." > .hud_box:first-of-type {\n"; echo " background: ".$background_color[0].";\n"; if (empty($row['dashboard_background_gradient_style']) || $row['dashboard_background_gradient_style'] == 'mirror') { echo " background-image: linear-gradient(".(empty($row['dashboard_background_gradient_angle']) ? '0deg' : $row['dashboard_background_gradient_angle'].'deg').", ".$background_color[1]." 0%, ".$background_color[0]." 30%, ".$background_color[0]." 70%, ".$background_color[1]." 100%);\n"; @@ -337,7 +337,7 @@ foreach ($dashboard as $row) { } if (!empty($row['dashboard_background_color_hover'])) { $background_color_hover = json_decode($row['dashboard_background_color_hover'], true); - echo "#".$dashboard_id.":hover .hud_content {\n"; + echo "#".$dashboard_id.":hover > .hud_box:first-of-type {\n"; echo " background: ".$background_color_hover[0].";\n"; if (empty($row['dashboard_background_gradient_style']) || $row['dashboard_background_gradient_style'] == 'mirror') { echo " background-image: linear-gradient(".(empty($row['dashboard_background_gradient_angle']) ? '0deg' : $row['dashboard_background_gradient_angle'].'deg').", ".$background_color_hover[1]." 0%, ".$background_color_hover[0]." 30%, ".$background_color_hover[0]." 70%, ".$background_color_hover[1]." 100%);\n"; @@ -349,7 +349,7 @@ foreach ($dashboard as $row) { } if (!empty($row['dashboard_detail_background_color'])) { $detail_background_color = json_decode($row['dashboard_detail_background_color'], true); - echo "#".$dashboard_id." .hud_details {\n"; + echo "#".$dashboard_id." > .hud_box > .hud_details {\n"; echo " background: ".$detail_background_color[0].";\n"; if (empty($row['dashboard_background_gradient_style']) || $row['dashboard_background_gradient_style'] == 'mirror') { echo " background-image: linear-gradient(".(empty($row['dashboard_background_gradient_angle']) ? '0deg' : $row['dashboard_background_gradient_angle'].'deg').", ".$detail_background_color[1]." 0%, ".$detail_background_color[0]." 30%, ".$detail_background_color[0]." 70%, ".$detail_background_color[1]." 100%);\n"; @@ -368,7 +368,7 @@ foreach ($dashboard as $row) { } switch ($row['dashboard_row_span']) { case 1: - echo "#".$dashboard_id." .hud_content {\n"; + echo "#".$dashboard_id." > .hud_box > .hud_content {\n"; echo " height: 89.5px;\n"; echo "}\n"; echo "#".$dashboard_id." .hud_stat {\n"; @@ -380,28 +380,28 @@ foreach ($dashboard as $row) { echo " width: 180px;\n"; echo " padding-top: 0;\n"; echo "}\n"; - echo "#".$dashboard_id." div.hud_content .fas {\n"; + echo "#".$dashboard_id." .hud_stat .fas {\n"; echo " line-height: 0;\n"; echo " font-size: 24pt;\n"; echo "}\n"; break; case 2: - echo "#".$dashboard_id." .hud_content {\n"; + echo "#".$dashboard_id." > .hud_box > .hud_content {\n"; echo " height: 195px;\n"; echo "}\n"; break; case 3: - echo "#".$dashboard_id." .hud_content {\n"; + echo "#".$dashboard_id." > .hud_box > .hud_content {\n"; echo " height: 300.5px;\n"; echo "}\n"; break; case 4: - echo "#".$dashboard_id." .hud_content {\n"; + echo "#".$dashboard_id." > .hud_box > .hud_content {\n"; echo " height: 406px;\n"; echo "}\n"; break; default: //if empty - echo "#".$dashboard_id." .hud_content {\n"; + echo "#".$dashboard_id." > .hud_box > .hud_content {\n"; echo " height: 195px;\n"; echo "}\n"; } @@ -506,6 +506,16 @@ foreach ($dashboard as $row) { @media (min-width: 1500px) { .widgets { grid-template-columns: repeat(4, minmax(100px, 1fr)); } .col-num { grid-column: span 2; } + } /* Screen larger than 2000px? 5 columns */ diff --git a/core/dashboard/resources/dashboard/parent.php b/core/dashboard/resources/dashboard/parent.php index b53a034040..16ab92345d 100644 --- a/core/dashboard/resources/dashboard/parent.php +++ b/core/dashboard/resources/dashboard/parent.php @@ -77,7 +77,6 @@ div.parent_widget { } div.child_widget div.hud_box:first-of-type { - /*min-width: 120px;*/ background: rgba(0,0,0,0); border: 0px dashed rgba(0,0,0,0); box-shadow: none; @@ -93,6 +92,7 @@ div.child_widget.editable div.hud_box:first-of-type { div.child_widget .hud_content { align-content: center; + border-radius: 5px; } div.child_widget div.hud_chart { @@ -103,126 +103,6 @@ div.child_widget div.hud_chart {