Drop the term calendar-grid, replace it with time-grid

This generalizes the CSS somewhat so that it applies to
the new timeline without too much boilerplate.

library/Notifications/Widget/Calendar.php

@@ -148,10 +148,13 @@ public function getGrid(): BaseGrid
         if ($this->grid === null) {
             if ($this->getControls()->getViewMode() === self::MODE_MONTH) {
                 $this->grid = new MonthGrid($this, $this->getStyle(), $this->getModeStart());
+                $this->getAttributes()->get('class')->addValue('month');
             } elseif ($this->getControls()->getViewMode() === self::MODE_WEEK) {
                 $this->grid = new WeekGrid($this, $this->getStyle(), $this->getModeStart());
+                $this->getAttributes()->get('class')->addValue('week');
             } else {
                 $this->grid = new DayGrid($this, $this->getStyle(), $this->getModeStart());
+                $this->getAttributes()->get('class')->addValue('day');
             }
         }
 

library/Notifications/Widget/Calendar/BaseGrid.php

@@ -31,6 +31,12 @@ abstract class BaseGrid extends BaseHtmlElement
 {
     use Translation;
 
+    /** @var string The chronological order of entries is oriented horizontally */
+    protected const HORIZONTAL_FLOW_OF_TIME = 'horizontal-flow';
+
+    /** @var string The chronological order of entries is oriented vertically */
+    protected const VERTICAL_FLOW_OF_TIME = 'vertical-flow';
+
     /** @var string Continuation of an entry that started on the previous grid */
     protected const FROM_PREV_GRID = 'from-prev-grid';
 
@@ -54,7 +60,10 @@ abstract class BaseGrid extends BaseHtmlElement
 
     protected $tag = 'div';
 
-    protected $defaultAttributes = ['class' => 'calendar-grid'];
+    protected $defaultAttributes = ['class' => ['time-grid']];
+
+    /** @var string The orientation of this grid's chronological order of entries */
+    protected $flowOfTime = self::HORIZONTAL_FLOW_OF_TIME;
 
     /** @var EntryProvider */
     protected $provider;
@@ -86,6 +95,9 @@ public function __construct(EntryProvider $provider, Style $style, DateTime $sta
         $this->provider = $provider;
         $this->style = $style;
         $this->setGridStart($start);
+
+        // It's done here as there's no real need for this being dynamic
+        $this->defaultAttributes['class'][] = $this->flowOfTime;
     }
 
     public function getGridStart(): DateTime

library/Notifications/Widget/Calendar/DayGrid.php

@@ -15,6 +15,8 @@
 
 class DayGrid extends BaseGrid
 {
+    protected $flowOfTime = BaseGrid::VERTICAL_FLOW_OF_TIME;
+
     public function setGridStart(DateTime $start): BaseGrid
     {
         if ($start->format('H:i:s') !== '00:00:00') {
@@ -114,8 +116,6 @@ protected function createSidebar(): BaseHtmlElement
 
     protected function assemble()
     {
-        $this->getAttributes()->add('class', 'day');
-
         $this->addHtml(
             $this->createHeader(),
             $this->createSidebar(),

library/Notifications/Widget/Calendar/DynamicGrid.php

@@ -160,8 +160,6 @@ protected function createGridSteps(): Traversable
 
     protected function assemble()
     {
-        $this->getAttributes()->add('class', 'dynamic');
-
         $this->style->addFor($this, [
             '--primaryColumns' => $this->days,
             '--columnsPerStep' => 48,

library/Notifications/Widget/Calendar/MonthGrid.php

@@ -119,8 +119,6 @@ protected function createSidebar(): BaseHtmlElement
 
     protected function assemble()
     {
-        $this->getAttributes()->add('class', 'month');
-
         $this->addHtml(
             $this->createHeader(),
             $this->createSidebar(),

library/Notifications/Widget/Calendar/WeekGrid.php

@@ -15,6 +15,8 @@
 
 class WeekGrid extends BaseGrid
 {
+    protected $flowOfTime = BaseGrid::VERTICAL_FLOW_OF_TIME;
+
     public function setGridStart(DateTime $start): BaseGrid
     {
         if ($start->format('w:H:i:s') !== '1:00:00:00') {
@@ -123,8 +125,6 @@ protected function createSidebar(): BaseHtmlElement
 
     protected function assemble()
     {
-        $this->getAttributes()->add('class', 'week');
-
         $this->addHtml(
             $this->createHeader(),
             $this->createSidebar(),

public/css/calendar.less

@@ -26,15 +26,15 @@
 }
 
 /**
- * Basic rules for a calendar grid
+ * Basic rules for a time grid
  *
  * Required variables:
  * - --primaryColumns: Number of primary columns
  * - --primaryRows: Number of primary rows
  * - --columnsPerStep: Number of columns per step
  * - --rowsPerStep: Number of rows per step
  */
-.calendar-grid {
+.time-grid {
   --sidebarWidth: 4em;
   --headerHeight: 1.5em;
   --minimumPrimaryColumnWidth: 2em;
@@ -175,7 +175,7 @@
   }
 }
 
-.calendar-grid.month {
+.calendar.month .time-grid {
   --primaryColumns: 7; // days
   --primaryRows: 6; // weeks
   --columnsPerStep: 48; // 24 hours
@@ -189,7 +189,7 @@
   }
 }
 
-.calendar-grid.week {
+.calendar.week .time-grid {
   --primaryColumns: 7; // days
   --primaryRows: 24; // hours
   --columnsPerStep: 4;
@@ -203,7 +203,7 @@
   }
 }
 
-.calendar-grid.day {
+.calendar.day .time-grid {
   --primaryColumns: 1; // days
   --primaryRows: 24; // hours
   --columnsPerStep: 28;
@@ -217,7 +217,7 @@
   }
 }
 
-.calendar-grid {
+.time-grid {
   display: grid;
   grid-template-columns: var(--sidebarWidth) minmax(0, 1fr);
   grid-template-rows: var(--headerHeight) minmax(0, 1fr);
@@ -258,9 +258,10 @@
     font-size: 1.5em;
     font-weight: normal;
   }
+}
 
-  .calendar-grid.month,
-  .calendar-grid.dynamic {
+.time-grid {
+  &.horizontal-flow {
     .entry {
       &.two-way-gradient {
         border-radius: 0;
@@ -283,8 +284,7 @@
     }
   }
 
-  .calendar-grid.week,
-  .calendar-grid.day {
+  &.vertical-flow {
     .entry {
       &.two-way-gradient {
         border-radius: 0;
@@ -373,7 +373,7 @@
 }
 
 @light-mode: {
-  .calendar .entry {
+  .time-grid .entry {
     mix-blend-mode: revert;
   }
 };

public/css/schedule.less

@@ -39,7 +39,7 @@
     display: flex;
     flex-direction: column;
 
-    .calendar-grid {
+    .time-grid {
       flex: 1 1 auto;
       height: 0;
     }