From 0ab1326242d5cd423708818eb660250fb7c32ee7 Mon Sep 17 00:00:00 2001 From: raviks789 Date: Thu, 13 Jun 2024 13:58:49 +0200 Subject: [PATCH 1/4] Preview schedules in the overview --- .../controllers/ScheduleController.php | 5 + .../Widget/ItemList/ScheduleList.php | 20 ++++ .../Widget/ItemList/ScheduleListItem.php | 26 ++++- .../Widget/TimeGrid/DaysHeader.php | 96 +++++++++++++++ .../Widget/TimeGrid/DynamicGrid.php | 57 +-------- library/Notifications/Widget/Timeline.php | 109 ++++++++++++------ .../Widget/Timeline/MinimalGrid.php | 76 ++++++++++++ public/css/common.less | 27 +++++ public/css/list/schedule-list.less | 62 ++++++++++ public/css/timeline.less | 16 +++ 10 files changed, 401 insertions(+), 93 deletions(-) create mode 100644 library/Notifications/Widget/TimeGrid/DaysHeader.php create mode 100644 library/Notifications/Widget/Timeline/MinimalGrid.php create mode 100644 public/css/list/schedule-list.less diff --git a/application/controllers/ScheduleController.php b/application/controllers/ScheduleController.php index 8d16d7d6..79fc1969 100644 --- a/application/controllers/ScheduleController.php +++ b/application/controllers/ScheduleController.php @@ -129,6 +129,7 @@ public function addRotationAction(): void }); $form->on(RotationConfigForm::ON_SUCCESS, function (RotationConfigForm $form) use ($scheduleId) { $form->addRotation(); + $this->sendExtraUpdates(['#col1']); $this->closeModalAndRefreshRelatedView(Links::schedule($scheduleId)); }); @@ -154,14 +155,17 @@ public function editRotationAction(): void $form->setSuggestionUrl(Url::fromPath('notifications/schedule/suggest-recipient')); $form->on(RotationConfigForm::ON_SUCCESS, function (RotationConfigForm $form) use ($id, $scheduleId) { $form->editRotation($id); + $this->sendExtraUpdates(['#col1']); $this->closeModalAndRefreshRelatedView(Links::schedule($scheduleId)); }); $form->on(RotationConfigForm::ON_SENT, function (RotationConfigForm $form) use ($id, $scheduleId) { if ($form->hasBeenRemoved()) { $form->removeRotation($id); + $this->sendExtraUpdates(['#col1']); $this->closeModalAndRefreshRelatedView(Links::schedule($scheduleId)); } elseif ($form->hasBeenWiped()) { $form->wipeRotation(); + $this->sendExtraUpdates(['#col1']); $this->closeModalAndRefreshRelatedView(Links::schedule($scheduleId)); } elseif (! $form->hasBeenSubmitted()) { foreach ($form->getPartUpdates() as $update) { @@ -188,6 +192,7 @@ public function moveRotationAction(): void $form = new MoveRotationForm(Database::get()); $form->on(MoveRotationForm::ON_SUCCESS, function (MoveRotationForm $form) { + $this->sendExtraUpdates(['#col1']); $this->redirectNow(Links::schedule($form->getScheduleId())); }); diff --git a/library/Notifications/Widget/ItemList/ScheduleList.php b/library/Notifications/Widget/ItemList/ScheduleList.php index 983143c8..f7e9182b 100644 --- a/library/Notifications/Widget/ItemList/ScheduleList.php +++ b/library/Notifications/Widget/ItemList/ScheduleList.php @@ -4,6 +4,11 @@ namespace Icinga\Module\Notifications\Widget\ItemList; +use DateTime; +use Icinga\Module\Notifications\Widget\TimeGrid\DaysHeader; +use ipl\Html\Attributes; +use ipl\Html\HtmlDocument; +use ipl\Html\HtmlElement; use ipl\Web\Common\BaseItemList; class ScheduleList extends BaseItemList @@ -14,4 +19,19 @@ protected function getItemClass(): string { return ScheduleListItem::class; } + + protected function assemble(): void + { + parent::assemble(); + + $this->prependWrapper( + (new HtmlDocument())->add( + HtmlElement::create( + 'div', + Attributes::create(['class' => 'schedules-header']), + new DaysHeader((new DateTime())->setTime(0, 0), 7) + ) + ) + ); + } } diff --git a/library/Notifications/Widget/ItemList/ScheduleListItem.php b/library/Notifications/Widget/ItemList/ScheduleListItem.php index 24e9f9d8..5a6ffab6 100644 --- a/library/Notifications/Widget/ItemList/ScheduleListItem.php +++ b/library/Notifications/Widget/ItemList/ScheduleListItem.php @@ -4,10 +4,15 @@ namespace Icinga\Module\Notifications\Widget\ItemList; +use DateTime; use Icinga\Module\Notifications\Common\Links; use Icinga\Module\Notifications\Model\Schedule; +use Icinga\Module\Notifications\Widget\Timeline; +use Icinga\Module\Notifications\Widget\Timeline\Rotation; +use Icinga\Util\Csp; use ipl\Html\BaseHtmlElement; use ipl\Web\Common\BaseListItem; +use ipl\Web\Style; use ipl\Web\Widget\Link; /** @@ -41,8 +46,27 @@ protected function assembleHeader(BaseHtmlElement $header): void $header->addHtml($this->createTitle()); } + protected function assembleCaption(BaseHtmlElement $caption): void + { + // Number of days is set to 7, since default mode for schedule is week + // and the start day should be the current day + $timeline = (new Timeline((new DateTime())->setTime(0, 0), 7)) + ->minimalLayout() + ->setStyle( + (new Style()) + ->setNonce(Csp::getStyleNonce()) + ->setModule('notifications') + ); + + foreach ($this->item->rotation->with('timeperiod')->orderBy('first_handoff', SORT_DESC) as $rotation) { + $timeline->addRotation(new Rotation($rotation)); + } + + $caption->addHtml($timeline); + } + protected function assembleMain(BaseHtmlElement $main): void { - $main->addHtml($this->createHeader()); + $main->addHtml($this->createHeader(), $this->createCaption()); } } diff --git a/library/Notifications/Widget/TimeGrid/DaysHeader.php b/library/Notifications/Widget/TimeGrid/DaysHeader.php new file mode 100644 index 00000000..d2b371d2 --- /dev/null +++ b/library/Notifications/Widget/TimeGrid/DaysHeader.php @@ -0,0 +1,96 @@ + 'header']; + + /** @var DateTime Starting day */ + protected $startDay; + + /** + * Create a new DaysHeader + * + * @param DateTime $startDay + * @param int $days + */ + public function __construct(DateTime $startDay, int $days) + { + $this->startDay = $startDay; + $this->days = $days; + } + + public function assemble(): void + { + $dayNames = [ + $this->translate('Mon', 'monday'), + $this->translate('Tue', 'tuesday'), + $this->translate('Wed', 'wednesday'), + $this->translate('Thu', 'thursday'), + $this->translate('Fri', 'friday'), + $this->translate('Sat', 'saturday'), + $this->translate('Sun', 'sunday') + ]; + + $interval = new DateInterval('P1D'); + $today = (new DateTime())->setTime(0, 0); + $time = clone $this->startDay; + $dateFormatter = new IntlDateFormatter( + Locale::getDefault(), + IntlDateFormatter::MEDIUM, + IntlDateFormatter::NONE + ); + + for ($i = 0; $i < $this->days; $i++) { + if ($time == $today) { + $title = [new HtmlElement( + 'span', + Attributes::create(['class' => 'day-name']), + Text::create($this->translate('Today')) + )]; + } else { + $title = [ + new HtmlElement( + 'span', + Attributes::create(['class' => 'date']), + Text::create($time->format($this->translate('d/m', 'day-name, time'))) + ), + Text::create(' '), + new HtmlElement( + 'span', + Attributes::create(['class' => 'day-name']), + Text::create($dayNames[$time->format('N') - 1]) + ) + ]; + } + + $this->addHtml(new HtmlElement( + 'div', + Attributes::create(['class' => 'column-title', 'title' => $dateFormatter->format($time)]), + ...$title + )); + + $time->add($interval); + } + } +} diff --git a/library/Notifications/Widget/TimeGrid/DynamicGrid.php b/library/Notifications/Widget/TimeGrid/DynamicGrid.php index e42b7b13..7825e1a7 100644 --- a/library/Notifications/Widget/TimeGrid/DynamicGrid.php +++ b/library/Notifications/Widget/TimeGrid/DynamicGrid.php @@ -6,13 +6,10 @@ use DateInterval; use DateTime; -use IntlDateFormatter; use InvalidArgumentException; use ipl\Html\Attributes; use ipl\Html\BaseHtmlElement; use ipl\Html\HtmlElement; -use ipl\Html\Text; -use Locale; use LogicException; use Traversable; @@ -98,59 +95,7 @@ protected function sideBar(): BaseHtmlElement protected function createHeader(): BaseHtmlElement { - $dayNames = [ - $this->translate('Mon', 'monday'), - $this->translate('Tue', 'tuesday'), - $this->translate('Wed', 'wednesday'), - $this->translate('Thu', 'thursday'), - $this->translate('Fri', 'friday'), - $this->translate('Sat', 'saturday'), - $this->translate('Sun', 'sunday') - ]; - - $interval = new DateInterval('P1D'); - $today = (new DateTime())->setTime(0, 0); - $time = clone $this->getGridStart(); - $dateFormatter = new IntlDateFormatter( - Locale::getDefault(), - IntlDateFormatter::MEDIUM, - IntlDateFormatter::NONE - ); - - $header = new HtmlElement('div', Attributes::create(['class' => 'header'])); - for ($i = 0; $i < $this->days; $i++) { - if ($time == $today) { - $title = [new HtmlElement( - 'span', - Attributes::create(['class' => 'day-name']), - Text::create($this->translate('Today')) - )]; - } else { - $title = [ - new HtmlElement( - 'span', - Attributes::create(['class' => 'date']), - Text::create($time->format($this->translate('d/m', 'day-name, time'))) - ), - Text::create(' '), - new HtmlElement( - 'span', - Attributes::create(['class' => 'day-name']), - Text::create($dayNames[$time->format('N') - 1]) - ) - ]; - } - - $header->addHtml(new HtmlElement( - 'div', - Attributes::create(['class' => 'column-title', 'title' => $dateFormatter->format($time)]), - ...$title - )); - - $time->add($interval); - } - - return $header; + return new DaysHeader($this->getGridStart(), $this->days); } protected function createGridSteps(): Traversable diff --git a/library/Notifications/Widget/Timeline.php b/library/Notifications/Widget/Timeline.php index 6ca486df..b7048cdf 100644 --- a/library/Notifications/Widget/Timeline.php +++ b/library/Notifications/Widget/Timeline.php @@ -12,6 +12,7 @@ use Icinga\Module\Notifications\Widget\TimeGrid\EntryProvider; use Icinga\Module\Notifications\Widget\TimeGrid\GridStep; use Icinga\Module\Notifications\Widget\Timeline\Entry; +use Icinga\Module\Notifications\Widget\Timeline\MinimalGrid; use Icinga\Module\Notifications\Widget\Timeline\Rotation; use ipl\Html\Attributes; use ipl\Html\BaseHtmlElement; @@ -44,9 +45,12 @@ class Timeline extends BaseHtmlElement implements EntryProvider /** @var Style */ protected $style; - /** @var ?DynamicGrid */ + /** @var ?DynamicGrid|MinimalGrid */ protected $grid; + /** @var bool Whether to create the Timeline only with the Result using MinimalGrid */ + protected $minimalLayout = false; + /** * Set the style object to register inline styles in * @@ -87,6 +91,18 @@ public function __construct(DateTime $start, int $days) $this->days = $days; } + /** + * Set whether to create the Timeline only with the Result + * + * @return $this + */ + public function minimalLayout(): self + { + $this->minimalLayout = true; + + return $this; + } + /** * Add a rotation to the timeline * @@ -140,18 +156,24 @@ public function getEntries(): Traversable return array_fill((int) $cellStart, (int) $numberOfRequiredCells, $e); }; - $maxPriority = array_reduce($rotations, function (int $carry, Rotation $rotation) { - return max($carry, $rotation->getPriority()); - }, 0); + $resultPosition = 0; + $maxPriority = 0; + + if (! $this->minimalLayout) { + $maxPriority = array_reduce($rotations, function (int $carry, Rotation $rotation) { + return max($carry, $rotation->getPriority()); + }, 0); + $resultPosition = $maxPriority + 1; + } $occupiedCells = []; - $resultPosition = $maxPriority + 1; foreach ($rotations as $rotation) { - $rotationPosition = $maxPriority - $rotation->getPriority(); foreach ($rotation->fetchTimeperiodEntries($this->start, $this->getGrid()->getGridEnd()) as $entry) { - $entry->setPosition($rotationPosition); + if (! $this->minimalLayout) { + $entry->setPosition($maxPriority - $rotation->getPriority()); - yield $entry; + yield $entry; + } $occupiedCells += $getDesiredCells($entry); } @@ -194,11 +216,14 @@ public function getEntries(): Traversable $resultEntry = (new Entry($entry->getId())) ->setStart($start) ->setEnd($end) - ->setUrl($entry->getUrl()) - ->setPosition($resultPosition) ->setMember($entry->getMember()); - $resultEntry->getAttributes() - ->add('data-rotation-position', $entry->getPosition()); + + if (! $this->minimalLayout) { + $resultEntry->setPosition($resultPosition); + $resultEntry->setUrl($entry->getUrl()); + $resultEntry->getAttributes() + ->add('data-rotation-position', $entry->getPosition()); + } yield $resultEntry; @@ -213,23 +238,28 @@ public function getEntries(): Traversable /** * Get the grid for this timeline * - * @return DynamicGrid + * @return DynamicGrid|MinimalGrid */ - protected function getGrid(): DynamicGrid + protected function getGrid() { if ($this->grid === null) { - $this->grid = new DynamicGrid($this, $this->getStyle(), $this->start); - $this->grid->setDays($this->days); - - $rotations = $this->rotations; - usort($rotations, function (Rotation $a, Rotation $b) { - return $b->getPriority() <=> $a->getPriority(); - }); - $occupiedPriorities = []; - foreach ($rotations as $rotation) { - if (! isset($occupiedPriorities[$rotation->getPriority()])) { - $occupiedPriorities[$rotation->getPriority()] = true; - $this->grid->addToSideBar($this->assembleSidebarEntry($rotation)); + if ($this->minimalLayout) { + $this->grid = new MinimalGrid($this, $this->getStyle(), $this->start); + } else { + $this->grid = (new DynamicGrid($this, $this->getStyle(), $this->start))->setDays($this->days); + } + + if (! $this->minimalLayout) { + $rotations = $this->rotations; + usort($rotations, function (Rotation $a, Rotation $b) { + return $b->getPriority() <=> $a->getPriority(); + }); + $occupiedPriorities = []; + foreach ($rotations as $rotation) { + if (! isset($occupiedPriorities[$rotation->getPriority()])) { + $occupiedPriorities[$rotation->getPriority()] = true; + $this->grid->addToSideBar($this->assembleSidebarEntry($rotation)); + } } } } @@ -260,23 +290,30 @@ protected function assembleSidebarEntry(Rotation $rotation): BaseHtmlElement protected function assemble() { if (empty($this->rotations)) { + $emptyNotice = new HtmlElement( + 'div', + Attributes::create(['class' => 'empty-notice']), + Text::create($this->translate('No rotations configured')) + ); + + if ($this->minimalLayout) { + $this->getAttributes()->add(['class' => 'minimal-layout']); + $this->addHtml($emptyNotice); + } else { + $this->getGrid()->addToSideBar($emptyNotice); + } + } + + if (! $this->minimalLayout) { $this->getGrid()->addToSideBar( new HtmlElement( 'div', - Attributes::create(['class' => 'empty-notice']), - Text::create($this->translate('No rotations configured')) + null, + Text::create($this->translate('Result')) ) ); } - $this->getGrid()->addToSideBar( - new HtmlElement( - 'div', - null, - Text::create($this->translate('Result')) - ) - ); - $this->addHtml( $this->getGrid(), $this->getStyle() diff --git a/library/Notifications/Widget/Timeline/MinimalGrid.php b/library/Notifications/Widget/Timeline/MinimalGrid.php new file mode 100644 index 00000000..3acfaffe --- /dev/null +++ b/library/Notifications/Widget/Timeline/MinimalGrid.php @@ -0,0 +1,76 @@ +format('H:i:s') !== '00:00:00') { + throw new InvalidArgumentException('Start is not midnight'); + } + + return parent::setGridStart($start); + } + + protected function calculateGridEnd(): DateTime + { + return (clone $this->getGridStart())->add(new DateInterval(sprintf('P%dD', self::DAYS))); + } + + protected function getNoOfVisuallyConnectedHours(): int + { + return self::DAYS * 24; + } + + protected function getMaximumRowSpan(): int + { + return 1; + } + + protected function createGridSteps(): Traversable + { + $interval = new DateInterval('P1D'); + $dayStartsAt = clone $this->getGridStart(); + + for ($x = 0; $x < self::DAYS; $x++) { + $nextDay = (clone $dayStartsAt)->add($interval); + + yield new GridStep($dayStartsAt, $nextDay, $x, 0); + + $dayStartsAt = $nextDay; + } + } + + protected function assemble(): void + { + $this->style->addFor($this, [ + '--primaryRows' => 1, + '--primaryColumns' => self::DAYS, + '--columnsPerStep' => 48, + '--rowsPerStep' => 1, + '--stepRowHeight' => '1.5em' + ]); + + $overlay = $this->createGridOverlay(); + $this->addHtml( + $this->createGrid(), + $overlay + ); + } +} diff --git a/public/css/common.less b/public/css/common.less index 10d6302c..215bda33 100644 --- a/public/css/common.less +++ b/public/css/common.less @@ -12,6 +12,33 @@ } } +.schedules-header { + margin-left: 12em; + width: ~"calc(100% - 12em)"; + + .header { + display: grid; + 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 { + border-left: 2px solid @gray-lighter + } + } +} + .controls { &.contactgroup-detail, &.event-detail, diff --git a/public/css/list/schedule-list.less b/public/css/list/schedule-list.less new file mode 100644 index 00000000..b67d6383 --- /dev/null +++ b/public/css/list/schedule-list.less @@ -0,0 +1,62 @@ +// Layout +.item-list.schedule-list { + .list-item { + .main { + display: flex; + align-items: center; + header .title { + width: 10em; + display: inline-flex; + } + + .caption { + display: flex; + margin-left: 0.5em; + width: 100%; + height: 2em; + align-items: center; + + > .timeline { + flex-grow: 1; + } + } + } + + .time-grid { + grid-template-columns: minmax(0, 1fr); + grid-template-rows: minmax(0, 1fr); + + .grid { + border-width: 0 0 0 2px; + } + + .grid, + .overlay { + grid-area: ~"1 / 1 / 2 / 2"; + + .entry { + margin: 0; + + .title { + align-items: center; + } + } + } + } + } +} + +// Design +.schedule-list { + .time-grid { + .grid { + .step { + border-bottom: unset; + } + } + } + + .time-grid:after { + display: none; + } +} diff --git a/public/css/timeline.less b/public/css/timeline.less index f1c8e099..ce00a165 100644 --- a/public/css/timeline.less +++ b/public/css/timeline.less @@ -58,6 +58,18 @@ } } +.timeline.minimal-layout{ + position: relative; + + .empty-notice { + position: absolute; + width: 100%; + line-height: 1.2; + text-align: center; + z-index: 1 + } +} + /* Design */ .timeline { @@ -96,3 +108,7 @@ opacity: .8; } } + +.timeline.minimal-layout .empty-notice { + font-size: 1.25em; +} From 0d3614c0b62a334b36d00034dd53014ef3b85e84 Mon Sep 17 00:00:00 2001 From: raviks789 Date: Wed, 26 Jun 2024 13:53:27 +0200 Subject: [PATCH 2/4] Change css class of .header to .time-grid-header in .timeline --- .../Notifications/Widget/Calendar/DayGrid.php | 2 +- .../Widget/Calendar/MonthGrid.php | 2 +- .../Widget/Calendar/WeekGrid.php | 2 +- .../Widget/TimeGrid/DaysHeader.php | 2 +- public/css/calendar.less | 11 ++------ public/css/common.less | 28 +++++++++++-------- public/css/timeline.less | 8 ++---- 7 files changed, 25 insertions(+), 30 deletions(-) diff --git a/library/Notifications/Widget/Calendar/DayGrid.php b/library/Notifications/Widget/Calendar/DayGrid.php index 4323c942..94a9e149 100644 --- 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 index 3e395880..780930b5 100644 --- 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 index a059c041..1faab02b 100644 --- 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 index d2b371d2..0633fbfa 100644 --- 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 index 9d1dabb3..cf687dbf 100644 --- 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 index 215bda33..2896834c 100644 --- 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 index ce00a165..d390ade5 100644 --- 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; From 0330321626a1a6d31db77f02747ef1c2ca9facf1 Mon Sep 17 00:00:00 2001 From: raviks789 Date: Wed, 26 Jun 2024 14:42:58 +0200 Subject: [PATCH 3/4] Move `.schedules-header` to schedule-list.less --- public/css/common.less | 17 ----------------- public/css/list/schedule-list.less | 15 +++++++++++++++ 2 files changed, 15 insertions(+), 17 deletions(-) diff --git a/public/css/common.less b/public/css/common.less index 2896834c..f12bf60d 100644 --- a/public/css/common.less +++ b/public/css/common.less @@ -28,23 +28,6 @@ } } -.schedules-header { - margin-left: 12em; - width: ~"calc(100% - 12em)"; - - .days-header { - grid-template-columns: repeat(7, minmax(2em, 1fr)); - - .column-title { - border-right: 1px solid @gray-lighter; - } - - .column-title:first-of-type { - border-left: 2px solid @gray-lighter - } - } -} - .controls { &.contactgroup-detail, &.event-detail, diff --git a/public/css/list/schedule-list.less b/public/css/list/schedule-list.less index b67d6383..2983cb42 100644 --- a/public/css/list/schedule-list.less +++ b/public/css/list/schedule-list.less @@ -1,3 +1,18 @@ +// Header +.schedules-header { + margin-left: 12em; + width: ~"calc(100% - 12em)"; + + .days-header { + grid-template-columns: repeat(7, minmax(2em, 1fr)); + border-left: 2px solid @gray-lighter; + + .column-title { + border-right: 1px solid @gray-lighter; + } + } +} + // Layout .item-list.schedule-list { .list-item { From 91f2c05c6c2c3829e6f1216db258c238182796c2 Mon Sep 17 00:00:00 2001 From: raviks789 Date: Wed, 26 Jun 2024 14:47:35 +0200 Subject: [PATCH 4/4] Move the rules in the class `.days-header` to appropriate `.less` files --- public/css/calendar.less | 9 +++++++++ public/css/common.less | 16 ---------------- public/css/list/schedule-list.less | 1 + public/css/timeline.less | 4 ++++ 4 files changed, 14 insertions(+), 16 deletions(-) diff --git a/public/css/calendar.less b/public/css/calendar.less index cf687dbf..bcef33df 100644 --- a/public/css/calendar.less +++ b/public/css/calendar.less @@ -43,6 +43,7 @@ --stepRowHeight: 1fr; .time-grid-header { + display: grid; align-items: flex-end; border-left: 1px solid transparent; grid-template-columns: repeat(var(--primaryColumns), minmax(var(--minimumPrimaryColumnWidth), 1fr)); @@ -269,6 +270,14 @@ } } +.time-grid-header .column-title { + text-align: center; + .day-name { + color: @text-color-light; + text-transform: uppercase; + } +} + .time-grid { &.horizontal-flow { .entry { diff --git a/public/css/common.less b/public/css/common.less index f12bf60d..10d6302c 100644 --- a/public/css/common.less +++ b/public/css/common.less @@ -12,22 +12,6 @@ } } -.days-header { - display: grid; - - .column-title { - text-align: center; - .date { - font-size: 0.75em; - } - - .day-name { - color: @text-color-light; - text-transform: uppercase; - } - } -} - .controls { &.contactgroup-detail, &.event-detail, diff --git a/public/css/list/schedule-list.less b/public/css/list/schedule-list.less index 2983cb42..c1c123b7 100644 --- a/public/css/list/schedule-list.less +++ b/public/css/list/schedule-list.less @@ -4,6 +4,7 @@ width: ~"calc(100% - 12em)"; .days-header { + display: grid; grid-template-columns: repeat(7, minmax(2em, 1fr)); border-left: 2px solid @gray-lighter; diff --git a/public/css/timeline.less b/public/css/timeline.less index d390ade5..b8886084 100644 --- a/public/css/timeline.less +++ b/public/css/timeline.less @@ -108,3 +108,7 @@ .timeline.minimal-layout .empty-notice { font-size: 1.25em; } + +.days-header .column-title .date { + font-size: .75em; +}