Change css class of .header to .time-grid-header in .timeline

Icinga · Jul 2, 2024 · ac0a57c · ac0a57c
1 parent f9413e3
commit ac0a57c
Show file tree

Hide file tree

Showing 7 changed files with 25 additions and 30 deletions.
diff --git a/library/Notifications/Widget/Calendar/DayGrid.php b/library/Notifications/Widget/Calendar/DayGrid.php
@@ -63,7 +63,7 @@ protected function createGridSteps(): Traversable
 
     protected function createHeader(): BaseHtmlElement
     {
-        $header = new HtmlElement('div', Attributes::create(['class' => 'header']));
+        $header = new HtmlElement('div', Attributes::create(['class' => 'time-grid-header']));
         $dayNames = [
             'Mon' => t('Mon', 'monday'),
             'Tue' => t('Tue', 'tuesday'),

diff --git a/library/Notifications/Widget/Calendar/MonthGrid.php b/library/Notifications/Widget/Calendar/MonthGrid.php
@@ -80,7 +80,7 @@ protected function createHeader(): BaseHtmlElement
             $this->translate('Sun', 'sunday')
         ];
 
-        $header = new HtmlElement('div', Attributes::create(['class' => 'header']));
+        $header = new HtmlElement('div', Attributes::create(['class' => 'time-grid-header']));
         foreach ($dayNames as $dayName) {
             $header->addHtml(new HtmlElement(
                 'div',

diff --git a/library/Notifications/Widget/Calendar/WeekGrid.php b/library/Notifications/Widget/Calendar/WeekGrid.php
@@ -76,7 +76,7 @@ protected function createHeader(): BaseHtmlElement
             t('Sun', 'sunday')
         ];
 
-        $header = new HtmlElement('div', Attributes::create(['class' => 'header']));
+        $header = new HtmlElement('div', Attributes::create(['class' => 'time-grid-header']));
 
         $currentDay = clone $this->getGridStart();
         $interval = new DateInterval('P1D');

diff --git a/library/Notifications/Widget/TimeGrid/DaysHeader.php b/library/Notifications/Widget/TimeGrid/DaysHeader.php
@@ -23,7 +23,7 @@ class DaysHeader extends BaseHtmlElement
 
     protected $tag = 'div';
 
-    protected $defaultAttributes = ['class' => 'header'];
+    protected $defaultAttributes = ['class' => ['days-header', 'time-grid-header']];
 
     /** @var DateTime Starting day */
     protected $startDay;

diff --git a/public/css/calendar.less b/public/css/calendar.less
@@ -42,14 +42,12 @@
   --primaryRowHeight: 1fr;
   --stepRowHeight: 1fr;
 
-  .header {
-    display: grid;
+  .time-grid-header {
     align-items: flex-end;
     border-left: 1px solid transparent;
     grid-template-columns: repeat(var(--primaryColumns), minmax(var(--minimumPrimaryColumnWidth), 1fr));
 
     .column-title {
-      text-align: center;
       border-right: 1px solid transparent;
     }
   }
@@ -233,7 +231,7 @@
   grid-template-columns: var(--sidebarWidth) minmax(0, 1fr);
   grid-template-rows: var(--headerHeight) minmax(0, 1fr);
 
-  .header {
+  .time-grid-header {
     grid-area: ~"1 / 2 / 3 / 3";
   }
 
@@ -365,11 +363,6 @@
   }
 
   .column-title {
-    .day-name {
-      color: @text-color-light;
-      text-transform: uppercase;
-    }
-
     .day-number {
       font-weight: bold;
       font-size: 1.5em;

diff --git a/public/css/common.less b/public/css/common.less
@@ -12,25 +12,31 @@
   }
 }
 
+.days-header {
+  display: grid;
+
+  .column-title {
+    text-align: center;
+    .date {
+      font-size: 0.75em;
+    }
+
+    .day-name {
+      color: @text-color-light;
+      text-transform: uppercase;
+    }
+  }
+}
+
 .schedules-header {
   margin-left: 12em;
   width: ~"calc(100% - 12em)";
 
-  .header {
-    display: grid;
+  .days-header {
     grid-template-columns: repeat(7, minmax(2em, 1fr));
-    text-transform: uppercase;
 
     .column-title {
-      text-align: center;
       border-right: 1px solid @gray-lighter;
-      .date {
-        font-size: 0.75em;
-      }
-
-      .day-name {
-        color: @text-color-light;
-      }
     }
 
     .column-title:first-of-type {

diff --git a/public/css/timeline.less b/public/css/timeline.less
@@ -10,7 +10,7 @@
     --primaryRowHeight: 4em;
     position: relative;
 
-    .header {
+    .time-grid-header {
       box-sizing: border-box;
       position: sticky;
       z-index: 1;
@@ -73,14 +73,10 @@
 /* Design */
 
 .timeline {
-  .header {
+  .time-grid-header {
     background: @body-bg-color;
   }
 
-  .column-title .date {
-    font-size: .75em;
-  }
-
   .rotation-name {
     font-size: 1.25em;
     font-weight: bold;