From 73fdc8c2851775baedf6d1bc3e87a08764eab0c2 Mon Sep 17 00:00:00 2001 From: Dennis Eichhorn Date: Tue, 8 Aug 2017 21:03:51 +0200 Subject: [PATCH] Improve calendar view a little bit --- Controller.php | 9 ++ Theme/Backend/Lang/en.lang.php | 7 ++ Theme/Backend/calendar-dashboard.tpl.php | 148 +++++++++++++---------- Theme/Backend/css/styles.css | 71 +++++++++++ Theme/Backend/css/styles.scss | 104 ++++++++++++++++ Theme/Backend/dashboard-calendar.tpl.php | 55 +++++---- 6 files changed, 305 insertions(+), 89 deletions(-) create mode 100644 Theme/Backend/css/styles.css create mode 100644 Theme/Backend/css/styles.scss diff --git a/Controller.php b/Controller.php index bdf46d1..9be979f 100644 --- a/Controller.php +++ b/Controller.php @@ -25,6 +25,7 @@ use phpOMS\Module\ModuleAbstract; use phpOMS\Module\WebInterface; use phpOMS\Views\View; use phpOMS\Views\ViewLayout; +use phpOMS\Asset\AssetType; /** * Calendar controller class. @@ -90,6 +91,10 @@ class Controller extends ModuleAbstract implements WebInterface */ public function viewCalendarDashboard(RequestAbstract $request, ResponseAbstract $response, $data = null) : \Serializable { + /** @var Head $head */ + $head = $response->get('Content')->getData('head'); + $head->addAsset(AssetType::CSS, $request->getUri()->getBase() . 'Modules/Calendar/Theme/Backend/css/styles.css'); + $view = new View($this->app, $request, $response); $view->setTemplate('/Modules/Calendar/Theme/Backend/calendar-dashboard'); $view->addData('nav', $this->app->moduleManager->get('Navigation')->createNavigationMid(1001201001, $request, $response)); @@ -115,6 +120,10 @@ class Controller extends ModuleAbstract implements WebInterface */ public function viewDashboard(RequestAbstract $request, ResponseAbstract $response, $data = null) : \Serializable { + /** @var Head $head */ + $head = $response->get('Content')->getData('head'); + $head->addAsset(AssetType::CSS, $request->getUri()->getBase() . 'Modules/Calendar/Theme/Backend/css/styles.css'); + $view = new View($this->app, $request, $response); $view->setTemplate('/Modules/Calendar/Theme/Backend/dashboard-calendar'); diff --git a/Theme/Backend/Lang/en.lang.php b/Theme/Backend/Lang/en.lang.php index 3854c49..11fd16c 100644 --- a/Theme/Backend/Lang/en.lang.php +++ b/Theme/Backend/Lang/en.lang.php @@ -25,4 +25,11 @@ return ['Calendar' => [ 'Timeline' => 'Timeline', 'Week' => 'Week', 'Year' => 'Year', + 'Sunday' => 'Sunday', + 'Monday' => 'Monday', + 'Tuesday' => 'Tuesday', + 'Wednesday' => 'Wednesday', + 'Thursday' => 'Thursday', + 'Friday' => 'Friday', + 'Saturday' => 'Saturday', ]]; diff --git a/Theme/Backend/calendar-dashboard.tpl.php b/Theme/Backend/calendar-dashboard.tpl.php index bcd7a65..89b0983 100644 --- a/Theme/Backend/calendar-dashboard.tpl.php +++ b/Theme/Backend/calendar-dashboard.tpl.php @@ -1,82 +1,96 @@ getData('calendar'); ?> -
-
-
    -
  • -
  • -
- -
-
-
- getDate()->format('Y') . '-' . $calendar->getDate()->format('m') . '-' . '01'); for($i = 0; $i < 6; $i++) : ?> -
- -
- getDate()->getFirstDayOfMonth() <= $i*7+$j+1 && $calendar->getDate()->getDaysOfMonth() >= $i*7+$j+1) { - echo ($i*7+$j+1) . ' ' . jddayofweek($j, 1); - } else { - echo $current->createModify(0, 0, -2)->format('d') . ' ' . jddayofweek($j, 1); - } ?> -
    +
    +
    +
    +
      +
    • +
    • +
    + +
    +
    +
    +
      +
    • getHtml('Sunday'); ?> +
    • getHtml('Monday'); ?> +
    • getHtml('Tuesday'); ?> +
    • getHtml('Wednesday'); ?> +
    • getHtml('Thursday'); ?> +
    • getHtml('Friday'); ?> +
    • getHtml('Saturday'); ?> +
    + getDate()->format('Y') . '-' . $calendar->getDate()->format('m') . '-' . '01'); + for($i = 0; $i < 6; $i++) : ?> +
      + + getDate()->getFirstDayOfMonth() <= $i*7+$j+1 && $calendar->getDate()->getDaysOfMonth() >= $i*7+$j+1) : ?> +
    • +
      + +
    • +
      createModify(0, 0, -2)->format('d'); ?>
      + getEventByDate($current); $current->smartModify(0, 0, 1); - foreach($events as $event) : ?> -
    • getName(), ENT_COMPAT, 'utf-8'); ?> - -
    -
    - -
    - + foreach($events as $event) : ?> +
    +
    getName(), ENT_COMPAT, 'utf-8'); ?>
    +
    2:00pm to 5:00pm
    +
    + + + +
+ +
-
-
-
-

Title

+
+
+

Title

-
-
- - - -
-
-
-
-
-
+
+
+ + + +
+
+
+
+
+
-
-

Calendars

+
+

Calendars

-
-
    -
  • -
-
- -
-
-
+
+
    +
  • +
+
+ +
+
+ + diff --git a/Theme/Backend/css/styles.css b/Theme/Backend/css/styles.css new file mode 100644 index 0000000..1eb3e5a --- /dev/null +++ b/Theme/Backend/css/styles.css @@ -0,0 +1,71 @@ +.m-calendar { + width: 100%; } + .m-calendar ul { + list-style: none; + padding: 0; + margin: 0; + width: 100%; } + .m-calendar ul.weekdays { + height: 40px; } + .m-calendar ul.weekdays li { + text-align: center; + text-transform: uppercase; + line-height: 20px; + border: none; + color: #fff; + padding: 10px 6px; + font-size: 13px; } + .m-calendar li { + display: block; + float: left; + width: 14.285%; + padding: 5px; + box-sizing: border-box; + border-right: 1px solid #ccc; + border-bottom: 1px solid #ccc; } + .m-calendar li:first-child { + border-left: 1px solid #ccc; } + .m-calendar .days li { + height: 150px; + overflow-y: auto; } + .m-calendar .days li:hover { + background: #d3d3d3; } + .m-calendar .date { + text-align: center; + margin-bottom: 5px; + font-size: 0.7rem; + color: #333; + float: right; } + .m-calendar .event { + clear: both; + display: block; + font-size: 13px; + border-radius: 4px; + padding: 5px; + margin-top: 5px; + background: #e4f2f2; + border: 1px solid #b5dbdc; + color: #009aaf; + text-decoration: none; } + .m-calendar .event-desc { + color: #666; + margin: 3px 0 7px 0; + text-decoration: none; + overflow: hidden; } + .m-calendar .event-time { + font-size: 0.7rem; } + .m-calendar .other-month { + background: #f5f5f5; + color: #666; } + +@media (max-width: 768px) { + .m-calendar .weekdays, .m-calendar .other-month { + display: none; } + .m-calendar li { + height: auto !important; + border: 1px solid #ededed; + width: 100%; + padding: 10px; + margin-bottom: -1px; } + .m-calendar .date { + float: none; } } diff --git a/Theme/Backend/css/styles.scss b/Theme/Backend/css/styles.scss new file mode 100644 index 0000000..0adb471 --- /dev/null +++ b/Theme/Backend/css/styles.scss @@ -0,0 +1,104 @@ +.m-calendar { + width: 100%; + + ul { + list-style: none; + padding: 0; + margin: 0; + width: 100%; + + &.weekdays { + height: 40px; + + li { + text-align: center; + text-transform: uppercase; + line-height: 20px; + border: none; + color: #fff; + padding: 10px 6px; + font-size: 13px; + } + } + } + + li { + display: block; + float: left; + width:14.285%; + padding: 5px; + box-sizing: border-box; + border-right: 1px solid #ccc; + border-bottom: 1px solid #ccc; + + &:first-child { + border-left: 1px solid #ccc; + } + } + + .days li { + height: 150px; + overflow-y: auto; + + &:hover { + background: #d3d3d3; + } + } + + .date { + text-align: center; + margin-bottom: 5px; + font-size: 0.7rem; + color: #333; + float: right; + } + + .event { + clear: both; + display: block; + font-size: 13px; + border-radius: 4px; + padding: 5px; + margin-top: 5px; + background: #e4f2f2; + border: 1px solid #b5dbdc; + color: #009aaf; + text-decoration: none; + } + + .event-desc { + color: #666; + margin: 3px 0 7px 0; + text-decoration: none; + overflow: hidden; + } + + .event-time { + font-size: 0.7rem; + } + + .other-month { + background: #f5f5f5; + color: #666; + } +} + +@media(max-width: 768px) { + .m-calendar { + .weekdays, .other-month { + display: none; + } + + li { + height: auto !important; + border: 1px solid #ededed; + width: 100%; + padding: 10px; + margin-bottom: -1px; + } + + .date { + float: none; + } + } +} \ No newline at end of file diff --git a/Theme/Backend/dashboard-calendar.tpl.php b/Theme/Backend/dashboard-calendar.tpl.php index 793b2e5..4661265 100644 --- a/Theme/Backend/dashboard-calendar.tpl.php +++ b/Theme/Backend/dashboard-calendar.tpl.php @@ -1,33 +1,44 @@ getData('calendar'); ?> -
-getDate()->format('Y') . '-' . $calendar->getDate()->format('m') . '-' . '01'); -for($i = 0; $i < 6; $i++) : ?> -
- -
- getDate()->getFirstDayOfMonth() <= $i*7+$j+1 && $calendar->getDate()->getDaysOfMonth() >= $i*7+$j+1) { - echo ($i*7+$j+1) . ' ' . jddayofweek($j, 1); - } else { - echo $current->createModify(0, 0, -2)->format('d') . ' ' . jddayofweek($j, 1); - } ?> -
    - getEventByDate($current); - $current->smartModify(0, 0, 1); - foreach($events as $event) : ?> -
  • getName(), ENT_COMPAT, 'utf-8'); ?> +
      +
    • getHtml('Sunday'); ?> +
    • getHtml('Monday'); ?> +
    • getHtml('Tuesday'); ?> +
    • getHtml('Wednesday'); ?> +
    • getHtml('Thursday'); ?> +
    • getHtml('Friday'); ?> +
    • getHtml('Saturday'); ?> +
    + getDate()->format('Y') . '-' . $calendar->getDate()->format('m') . '-' . '01'); + for($i = 0; $i < 6; $i++) : ?> +
      + + getDate()->getFirstDayOfMonth() <= $i*7+$j+1 && $calendar->getDate()->getDaysOfMonth() >= $i*7+$j+1) : ?> +
    • +
      + +
    • +
      createModify(0, 0, -2)->format('d'); ?>
      + + getEventByDate($current); + $current->smartModify(0, 0, 1); + foreach($events as $event) : ?> +
      +
      getName(), ENT_COMPAT, 'utf-8'); ?>
      +
      2:00pm to 5:00pm
      +
      -
    -
- + + + +
- -
\ No newline at end of file