Рефакторинг, дебаг календаря, добавление кнопки назад, отображение выбранного дня

backend/assets/AppAsset.php

@@ -13,6 +13,7 @@ class AppAsset extends AssetBundle
     public $baseUrl = '@web';
     public $css = [
         'css/site.css',
+        'https://pro.fontawesome.com/releases/v5.10.0/css/all.css',
     ];
     public $js = [
         'js/site.js',

backend/modules/reports/controllers/AjaxController.php

@@ -12,35 +12,23 @@ use yii\web\Response;
 class AjaxController extends \yii\web\Controller
 {
 
-    public function actionGetReportsForMonthByIdYearMonth($id, $year=null, $month=null){
+    public function actionGetReportsForMonthByIdYearMonth($user_id, $year, $month){
-        if (!($year and $month)){
-            $searchModel->month = date('m');
-            $searchModel->year = date('Y');
-            Debug::prn('Неверный год или месяц');
-        }
-
         $searchModel = new ReportsSearch();
-        $searchModel->id = $id;
-
         $dataProvider = $searchModel->search(Yii::$app->request->queryParams);
 
         $reports = $dataProvider->getModels();
-        $reports_no_task = array_column($reports, 'attributes');
+        $reports_array = array_column($reports, 'attributes');
-        for ($i = 0; $i<count($reports); $i++){
+        foreach ($reports as $i => $report){
-            $reports_no_task[$i]['today'] = array_column( $reports[$i]->task, 'attributes');
+            $reports_array[$i]['today'] = array_column($report->task, 'attributes');
         }
-        $reports = $reports_no_task;
-
-        $month = new Month($year.'-'.$month.'-01');
-
 
         $response = Yii::$app->response;
-
         $response->format = Response::FORMAT_JSON;
-
-        $response->content = json_encode(array_merge(['reports' => $reports_no_task],
-            ['month'=>(array)$month]));
         $response->getHeaders()->set('Content-Type', 'application/json; charset=utf-8');
+        $response->content = json_encode(array_merge(
+                ['reports' => $reports_array],
+                ['month' => (array)new Month($year.'-'.$month.'-01')])
+        );
 
         return $response;
     }

backend/modules/reports/controllers/ReportsController.php

@@ -3,7 +3,6 @@
 namespace backend\modules\reports\controllers;
 
 use backend\modules\card\models\UserCardSearch;
-use backend\modules\reports\models\Month;
 use Yii;
 use common\models\Reports;
 use backend\modules\reports\models\ReportsSearch;
@@ -49,53 +48,29 @@ class ReportsController extends Controller
     public function actionIndex()
     {
         $searchModel = new ReportsSearch();
-        $reports = $searchModel->search([])->getModels();
-        $dataProvider = $searchModel->search(Yii::$app->request->queryParams);
-
         $user_id__fio = [];
-        for ($i=0; $i<count($reports);$i++){
+        foreach ($searchModel->search([])->getModels() as $model)
-            $user_id__fio[$reports[$i]->user_card_id] = \common\models\Reports::getFio($reports[$i]);
+            $user_id__fio[$model->user_card_id] = \common\models\Reports::getFio($model);
-        }
+        $dataProvider = $searchModel->search(Yii::$app->request->queryParams);
 
         return $this->render('index', [
             'searchModel' => $searchModel,
             'dataProvider' => $dataProvider,
             'user_id__fio' => $user_id__fio,
-
         ]);
     }
 
 
-    public function actionUser($id, $date = null)
+    public function actionUser($user_id)
     {
-        if (!(isset($date) and preg_match("/^\d{4}\-(0[1-9]|1[012])\-(0[1-9]|[12][0-9]|3[01])$/", $date))) {
-            $date = date('Y-m-01');
-        }
-        $date = date('Y-m-01', strtotime($date));
-
         $searchModel = new ReportsSearch();
-        $searchModel->id = $id;
         $dataProvider = $searchModel->search(Yii::$app->request->queryParams);
 
-        $reports = $dataProvider->getModels();
-
-        $ID = $reports[0]->user_card_id;
-
-        $reports_no_task = array_column($reports, 'attributes');
-        for ($i = 0; $i < count($reports); $i++) {
-            $reports_no_task[$i]['today'] = array_column($reports[$i]->task, 'attributes');
-        }
-        $month = new Month($date);
-
-        if (!Yii::$app->request->isAjax) {
         return $this->render('user', [
-                'ID' => $ID,
+            'searchModel' => $searchModel,
-                'reports' => $reports,
+            'dataProvider' => $dataProvider,
-                'reports_month' => json_encode(array_merge(['reports' => $reports_no_task],
-                    ['month' => (array)$month])),
-                'date' => $date
         ]);
-        }
+
     }
 
     public function actionGroup()
@@ -107,7 +82,6 @@ class ReportsController extends Controller
         return $this->render('group', [
             'searchModel' => $searchModel,
             'dataProvider' => $dataProvider,
-
         ]);
     }
 

backend/modules/reports/models/Month.php

@@ -2,10 +2,6 @@
 
 namespace backend\modules\reports\models;
 
-use common\classes\Debug;
-use yii\base\Model;
-use function GuzzleHttp\Psr7\str;
-
 class Month
 {
 
@@ -18,10 +14,9 @@ class Month
     {
         $this->inactive_begin = [];
         $this->inactive_end = [];
-        if (!$date and !self::is_date($date)) {
+        if ( !($date and self::is_date($date)) ){
             $date = date('Y-m-d');
         }
-
         $first_day_of_week = self::get_day_week(self::get_first_day($date));
         $quantity_days = self::get_days_month($date);
 

backend/modules/reports/models/ReportsSearch.php

@@ -59,7 +59,9 @@ class ReportsSearch extends Reports
 
         $this->load($params);
 
-
+        if (isset($params['user_id'])) {
+           $this->user_card_id = $params['user_id'];
+        }
         if (isset($params['year'])) {
             $query->andFilterWhere(['=', 'YEAR(reports.created_at)', $params['year']]);
         }
@@ -79,7 +81,7 @@ class ReportsSearch extends Reports
 
 
         $query->andFilterWhere([
-            'user_card.id' => $this->id,
+            'reports.id' => $this->id,
             'reports.created_at' => $this->created_at,
             'user_card_id' => $this->user_card_id,
         ]);

backend/modules/reports/views/reports/index.php

@@ -1,8 +1,10 @@
 <?php
 
 
+use common\models\Reports;
 use yii\helpers\Html;
 use yii\grid\GridView;
+use yii\widgets\ActiveForm;
 
 
 /* @var $this yii\web\View */
@@ -12,6 +14,14 @@ use yii\grid\GridView;
 
 $this->title = 'Отчеты';
 $this->params['breadcrumbs'][] = $this->title;
+$this->registerCss('
+.date_sort {
+display: inline-flex;
+}
+.row * {
+    margin-right: 10px;
+}
+');
 
 define('TODAY', date('Y-m-d'));
 define('WEEK_AGO', date('Y-m-d', time() - 3600 * 24 * 7));
@@ -19,81 +29,63 @@ function next_day($date, $number)
 {
     return date('Y-m-d', strtotime($date) + 3600 * 24 * $number);
 }
-
 ?>
-<div class="reports-index">
 
-    <p>
+<?= Html::beginTag('div', ['class' => 'reports-index'])?>
+    <?=Html::beginTag('p')?>
+
         <?= Html::a('Добавить', ['create'], ['class' => 'btn btn-success']) ?>
         <?= Html::a('Сгрупированный по пользователям вид', ['group'], ['class' => 'btn btn-success']) ?>
-    </p>
-    <p>
-        <?php
-        if (!$_GET) {
-            $url = '../..' . Yii::$app->request->url . '?ReportsSearch[created_at]=';
-        } else {
-            $url = '../..' . Yii::$app->request->url . '&ReportsSearch[created_at]=';
-        }
 
-        for ($date = TODAY;
+    <?=Html::endTag('p')?>
-        $date != WEEK_AGO;
-        $date = next_day($date, -1)): ?>
 
+    <?=Html::beginTag('p')?>
+
+        <?php for ($date = TODAY; $date != WEEK_AGO; $date = next_day($date, -1)): ?>
             <?= Html::a($date, ['index', 'ReportsSearch[created_at]' => $date], ['class' => 'btn btn-primary']) ?>
-    <?php endfor; ?></div>
-<div class="row">
-    <div class="col-xs-6">
-        <?php $form =  \yii\widgets\ActiveForm::begin() ?>
-        <?= $form->field($searchModel, 'today')->hiddenInput()->label(false) ?>
-        <?php \yii\widgets\ActiveForm::end() ?>
-        <form method="get" style="display: inline-flex;">
-            <?php if (isset($_GET['ReportsSearch'])): ?>
-                <input name="ReportsSearch[today]" type="hidden" value="<?= $searchModel->today ?>">
-                <input name="ReportsSearch[difficulties]" type="hidden" value="<?= $searchModel->difficulties ?>">
-                <input name="ReportsSearch[tomorrow]" type="hidden" value="<?= $searchModel->tomorrow ?>">
-                <input name="ReportsSearch[user_card_id]" type="hidden">
-                <?php if (isset($_GET['ReportsSearch']['user_card_id'])) {
-                    foreach ($_GET['ReportsSearch']['user_card_id'] as $res)
-                        echo
-                            '<input name="ReportsSearch[user_card_id][]" type="hidden" value="' . $res . '">';
-                }
-                ?>
-            <?php endif;
-            ?>
 
+        <?php endfor; ?>
+    <?=Html::endTag('p')?>
+<?= Html::endTag('div')?>
+
+<?= Html::beginTag('div', ['class' => 'row'])?>
+    <?= Html::beginTag('div', ['class' => 'col-xs-6'])?>
+        <?php $form = ActiveForm::begin(['method' => 'get', 'options' => ['class' => 'date_sort'] ])?>
+
+        <?php foreach (array_keys($searchModel->attributes )as $attribute): ?>
+            <?php if($attribute == 'user_card_id'):?>
+                <?php if($searchModel->user_card_id):?>
+                    <?php foreach ($searchModel->user_card_id as $i => $id):?>
+                        <?= $form->field($searchModel, 'user_card_id['.$i.']')->hiddenInput()->label(false)?>
+                    <?php endforeach;?>
+                <?php endif;?>
+            <?php continue?>
+            <?php endif;?>
+
+            <?php if($attribute == 'created_at'):?>
                 <?= Html::input('date', 'ReportsSearch[created_at]',
-                isset($_GET['ReportsSearch']['created_at']) ? $_GET['ReportsSearch']['created_at'] : date('Y-m-d'), [
+                    $searchModel->created_at ? $searchModel->created_at : date('Y-m-d'),
-                    'class' => 'form-control',
+                    ['class' => 'form-control']) ?>
-                    'style' => 'display:',
-                    'id' => 'date'
-
-                ]) ?>
-
-
-
-
-            <?= Html::button('Сортировка по дате', ['class' => 'btn btn-danger sort_by_date', 'type' => 'submit']) ?>
 
+                <?= Html::submitButton('Сортировка по дате', ['class' => 'btn btn-danger']) ?>
                 <?= Html::a('Все дни', ['index'], ['class' => 'btn btn-primary']) ?>
+                <?php continue?>
+            <?php endif?>
 
+        <?php endforeach; ?>
 
-        </form>
+        <?php ActiveForm::end() ?>
-    </div>
+    <?= Html::endTag('div')?>
-
+<?= Html::endTag('div')?>
-</div>
-</p>
 <?= GridView::widget([
     'dataProvider' => $dataProvider,
     'filterModel' => $searchModel,
-
     'columns' => [
         ['class' => 'yii\grid\SerialColumn'],
-
         [
             'format' => 'raw',
             'attribute' => 'created_at',
-            'filter' => Html::input('date', 'ReportsSearch[created_at]',
+            'filter' => Html::input('date', 'ReportsSearch[created_at]', null, [
-                null, [
                     'class' => 'form-control',
                     'style' => 'display:',
                     'id' => 'date'
@@ -127,28 +119,14 @@ function next_day($date, $number)
                 'attribute' => 'user_card_id',
                 'data' => $user_id__fio,
                 'options' => ['multiple' => true, 'class' => 'form-control'],
-                'pluginOptions' => [
-
-                    'multiple' => true,
-                ],
             ]),
-            'value' => function ($data) {
+            'value' => function ($model) {
-                return '<a href="' . Yii::getAlias('@web') . '/reports/reports/user?id=' . $data['user_card_id'] . '">' . \common\models\Reports::getFio($data) . '</a>';
+                return Html::a(Reports::getFio($model).' '.Html::tag('i', null, ['class' => 'far fa-calendar-alt']),
+                    ['user', 'user_id' => $model['user_card_id']]);
+
             },
         ],
 
         ['class' => 'yii\grid\ActionColumn'],
     ],
-]);
+]);?>
-$this->registerCssFile('../../css/site.css');
-?>
-
-
-</div>
-
-<style>
-    .row * {
-        margin-right: 10px;
-    }
-
-</style>

backend/modules/reports/views/reports/user.php

@@ -4,65 +4,47 @@ use yii\helpers\Html;
 use common\models\Reports;
 use backend\modules\reports\models\Month;
 
-
 /* @var $this yii\web\View */
 /* @var $searchModel backend\modules\reports\models\ReportsSearch */
 /* @var $dataProvider yii\data\ActiveDataProvider */
-/* @var $reports common\models\Reports */
-/* @var $ID */
-/* @var $reports_month */
-/* @var $date */
 
+$reports = $dataProvider->getModels();
+$USER_ID = $searchModel->user_card_id;
 
-
+$reports_array = array_column($reports, 'attributes');
-$month = new Month($date);
+foreach ($reports as $i => $report){
-$index_raw = 0;
+    $reports_array[$i]['today'] = array_column($report->task, 'attributes');
-
-function next_day($date, $number)
-{
-    return date('Y-m-d', strtotime($date) + 3600 * 24 * $number);
 }
+$reports_month = json_encode(array_merge(
+        ['reports' => $reports_array],
+        ['month' => (array)new Month()])
+);
 
-function get_dates_created_at(Reports $report)
+$this->registerCssFile('@web/css/calendar.css');
-{
+$this->title = 'Календарь пользователя - ' . Reports::getFio($searchModel);
-    return $report->created_at;
-}
-
-function get_color($date, $dates_created_at)
-{
-    if (in_array(Month::get_day_week($date), array(6, 7)))
-        return;
-    if (in_array($date, $dates_created_at)) {
-        return 'success';
-    } else
-        return 'danger';
-}
-
-$this->title = 'Календарь пользователя - ' . Reports::getFio($reports[0]);
-$dates_created_at = array_unique(array_map('get_dates_created_at', $reports));
 ?>
-<section class="calendar-contain">
-    <aside class="calendar__sidebar">
-        <section class="title-bar">
-            <?= Html::input('date', 'date', isset($_GET['date']) ? $_GET['date'] : date('Y-m-d'), [
-                'class' => 'form-control',
-                'style' => 'display:',
-                'id' => 'date',
-            ]) ?>
 
-        </section>
+<?=Html::beginTag('section', ['class' => 'calendar-contain'])?>
-        <h2 class="sidebar__heading"><?= date('l') ?><br><?= date('F d') ?></h2>
+    <?=Html::beginTag('aside', ['class' => 'calendar__sidebar'])?>
-        <ul class="sidebar__list">
+        <?=Html::beginTag('section', ['class' => 'title-bar'])?>
+            <?= Html::a('<i class="fas fa-long-arrow-alt-left"></i> Назад', Yii::$app->request->referrer, ['class' => 'btn btn-primary',]) ?>
+            <?= Html::input('date', null, date('Y-m-d'), ['class' => 'form-control', 'id' => 'date',]) ?>
+        <?=Html::endTag('section')?>
+
+        <?=Html::tag('h2', date('l').'<br>'.date('F d'), ['class' => 'sidebar__heading'])?>
+
+        <?=Html::beginTag('ul', ['class' => 'sidebar__list'])?>
+        <?=Html::endTag('ul')?>
+    <?=Html::endTag('aside')?>
+
+    <?=Html::beginTag('section', ['class' => 'calendar__days'])?>
+    <?=Html::endTag('section')?>
+
+<?=Html::endTag('section')?>
 
-        </ul>
-    </aside>
-    <section class="calendar__days">
-    </section>
 
-</section>
 <script>
-
+class HtmlCalendar {
-    class HtmlCalendar {
 
     constructor(month, reports, before = '') {
         this.month = month;
@@ -72,12 +54,11 @@ $dates_created_at = array_unique(array_map('get_dates_created_at', $reports));
 
         this.classDay = 'calendar__day';
 
-            this.nameDate = document.querySelector('.sidebar__heading');
-
         this.initBefore();
     }
 
     getHtml() {
+        console.log(reports)
         this.getInactiveBegin();
         this.getActive();
         this.getInactiveEnd();
@@ -132,7 +113,7 @@ $dates_created_at = array_unique(array_map('get_dates_created_at', $reports));
 
     getCalendarDay(type, className = '') {
         return `<div class="${this.classDay} ${className}">
-                <span class="calendar__date ${this.getColor(this.date + '-' + this.month[type][this.index])}">${this.month[type][this.index]}</span>
+                <span class="calendar__date ${this.getColor(this.date + '-' + IntToDate(this.month[type][this.index]) )}">${this.month[type][this.index]}</span>
             </div>`;
     }
 
@@ -140,24 +121,27 @@ $dates_created_at = array_unique(array_map('get_dates_created_at', $reports));
         let d = new Date(date)
         if ([6, 0].includes(d.getDay()))
             return;
-            for (let i in this.reports) {
+        for (let i = 0; i < Object.keys(this.reports).length; i++) {
+
             if (this.reports[i]['created_at'] == date) {
                 return 'success';
             }
         }
+
         return 'danger';
+
     }
 
     getLastKey(obj) {
         return Object.keys(obj)[Object.keys(obj).length - 1];
     }
-    }
+}
 
-    class HtmlReports {
+class HtmlReports {
-        constructor(reports) {
+constructor(reports) {
     //TODO выходные дни - праздники
-            this.reports = reports;
+this.reports = reports;
-        }
+}
 
     getHtmlByDate(date) {
 
@@ -231,7 +215,7 @@ ${report['today'][j]['task']}</p>`
                         </a></td>
 `;
     }
-            }
+}
         if (j == 0) {
             return "За этот день не было отчетов";
         }
@@ -239,9 +223,9 @@ ${report['today'][j]['task']}</p>`
 
         return html;
     }
-    };
+}
 
-    const CALENDAR_BAR = ` < section
+const CALENDAR_BAR = ` < section
 
                 class
 
@@ -260,28 +244,35 @@ ${report['today'][j]['task']}</p>`
             </section>
                 `;
 
-    let reports = (JSON.parse('<?=$reports_month?>'))['reports'];
+let reports = (JSON.parse('<?=$reports_month?>'))['reports'];
-    let month = (JSON.parse('<?=$reports_month?>'))['month'];
+let month = (JSON.parse('<?=$reports_month?>'))['month'];
-    let datePicker = document.querySelector('#date');
+let datePicker = document.querySelector('#date');
-    let oldDate = datePicker.value.substr(0, 7);
+let oldDate = datePicker.value.substr(0, 7);
-    let nameDate = document.querySelector('.sidebar__heading');
+let nameDateBoard = document.querySelector('.sidebar__heading');
 
-    let reportsBoard = document.querySelector('.sidebar__list');
+let reportsBoard = document.querySelector('.sidebar__list');
-    let htmlReports = new HtmlReports(reports);
+let htmlReports = new HtmlReports(reports);
 
-    let htmlCalendar = new HtmlCalendar(month, reports, CALENDAR_BAR);
+let htmlCalendar = new HtmlCalendar(month, reports, CALENDAR_BAR);
-    let calendar = document.querySelector('.calendar__days');
+let calendar = document.querySelector('.calendar__days');
 
 
-    calendar.load = async function () {
+calendar.load = async function (day) {
-
     htmlCalendar.update(month, reports)
     calendar.innerHTML = htmlCalendar.getHtml();
 
     htmlReports.reports = reports;
     htmlReports.getHtmlByDate('2021-08-31')
 
-        datePicker.onchange = function () {
+    datePicker.onchange = function (day=null) {
+        let days = document.querySelectorAll('.calendar__day ')
+
+        for (let i = 0; i < days.length; i++) {
+            if (days[i].classList.contains('active_day'))
+                days[i].classList.remove('active_day')
+
+        }
+
         if (!isOldDatePicker(datePicker, oldDate)) {
             oldDate = datePicker.value.substr(0, 7);
 
@@ -290,60 +281,71 @@ ${report['today'][j]['task']}</p>`
                 reports = reportsMonth['reports'];
                 month = reportsMonth['month'];
 
-                        calendar.load();
+                calendar.load(day);
+                let date = new Date(datePicker.value);
+                let monthName = date.toLocaleString('default', {month: 'long'});
+                let dayWeekName = date.toLocaleString('default', {weekday: 'long'});
+                nameDateBoard.innerHTML = `${dayWeekName} <br>${monthName} ${datePicker.value.substr(8, 2)}`;
+                reportsBoard.innerHTML = htmlReports.getHtmlByDate(datePicker.value)
             })
 
         }
         let date = new Date(datePicker.value);
         let monthName = date.toLocaleString('default', {month: 'long'});
         let dayWeekName = date.toLocaleString('default', {weekday: 'long'});
-            nameDate.innerHTML = `${dayWeekName} <br>${monthName} ${datePicker.value.substr(8, 2)}`;
+        nameDateBoard.innerHTML = `${dayWeekName} <br>${monthName} ${datePicker.value.substr(8, 2)}`;
         reportsBoard.innerHTML = htmlReports.getHtmlByDate(datePicker.value)
     }
 
     let days = document.querySelectorAll('.calendar__day');
     for (let i = 0; i < Object.keys(days).length; i++) {
         let dateDay = parseInt(days[i].textContent);
+        if (day) {
+            if (parseInt(day.textContent) == dateDay && !days[i].classList.contains('inactive')) {
+                days[i].classList.add('active_day')
+            }
+        }
 
         if (days[i].classList.contains('inactive')) {
             days[i].onclick = function () {
                 let date = getFutureDate(datePicker.value, parseInt(days[i].textContent))
                 datePicker.value = date;
-                    datePicker.onchange()
+                datePicker.onchange(this)
             }
         } else {
             days[i].onclick = function () {
+
                 datePicker.value = datePicker.value.substr(0, 8) + IntToDate(dateDay);
-                    datePicker.onchange()
+                datePicker.onchange(this)
-                }
+                days[i].classList.add('active_day')
             }
         }
     }
+}
 
-    calendar.load()
+calendar.load()
-    datePicker.onchange()
+datePicker.onchange()
 
-    function isOldDatePicker(datePicker, oldDate) {
+function isOldDatePicker(datePicker, oldDate) {
     if (datePicker.value.substr(0, 7) == oldDate)
         return true;
     return false
-    }
+}
 
-    async function updateMonthReports(date) {
+async function updateMonthReports(date) {
 
     let monthNumber = date.substr(5, 2);
     let yearNumber = date.substr(0, 4);
-
+    return fetch('../ajax/get-reports-for-month-by-id-year-month?user_id=<?=$USER_ID?>' +
-        return fetch('../ajax/get-reports-for-month-by-id-year-month?id=<?=$ID?>' +
             '&month=' + monthNumber +
             '&year=' + yearNumber)
         .then((res) => {
         return res.json()
         })
 
-    }
+}
 
-    function getFutureDate(dat, value) {
+function getFutureDate(dat, value) {
     let date = new Date(dat);
     if (value < 8) {
         if (date.getMonth() == 11) {
@@ -360,388 +362,13 @@ ${report['today'][j]['task']}</p>`
     }
     return date.getFullYear() + '-' + IntToDate(date.getMonth() + 1) + '-' + IntToDate(value);
 
-    }
+}
 
-    function IntToDate(number_date) {
+function IntToDate(number_date) {
     if (Math.floor(number_date / 10) === 0)
         number_date = '0' + number_date;
     return number_date
-    }
+}
-
 </script>
 
-<style>
-
-    .calendar-contain {
-        position: relative;
-        left: 0;
-        right: 0;
-        border-radius: 0;
-        width: 100%;
-        overflow: hidden;
-        max-width: 1920px;
-        min-width: 450px;
-        margin: 1rem auto;
-        background-color: #f5f7f6;
-        box-shadow: 5px 5px 72px rgba(30, 46, 50, 0.5);
-        color: #040605;
-    }
-
-    @media screen and (min-width: 55em) {
-        .calendar-contain {
-            margin: auto;
-            top: 5%;
-        }
-    }
-
-    .title-bar {
-        position: relative;
-        width: 100%;
-        display: table;
-        text-align: right;
-        background: #f5f7f6;
-        padding: 0.5rem;
-        margin-bottom: 0;
-    }
-
-    .title-bar:after {
-        display: table;
-        clear: both;
-    }
-
-    .title-bar__burger {
-        display: block;
-        position: relative;
-        float: left;
-        overflow: hidden;
-        margin: 0;
-        padding: 0;
-        width: 38px;
-        height: 30px;
-        font-size: 0;
-        text-indent: -9999px;
-        appearance: none;
-        box-shadow: none;
-        border: none;
-        cursor: pointer;
-        background: none;
-    }
-
-    .title-bar__burger:focus {
-        outline: none;
-    }
-
-    .burger__lines {
-        display: block;
-        position: absolute;
-        width: 18px;
-        top: 15px;
-        left: 0;
-        right: 0;
-        margin: auto;
-        height: 1px;
-        background: #040605;
-    }
-
-    .burger__lines:before, .burger__lines:after {
-        position: absolute;
-        display: block;
-        left: 0;
-        width: 100%;
-        height: 1px;
-        background-color: #040605;
-        content: "";
-    }
-
-    .burger__lines:before {
-        top: -5px;
-    }
-
-    .burger__lines:after {
-        bottom: -5px;
-    }
-
-    .title-bar__year {
-        display: block;
-        position: relative;
-        float: left;
-        font-size: 1rem;
-        line-height: 30px;
-        width: 43%;
-        padding: 0 0.5rem;
-        text-align: left;
-    }
-
-    @media screen and (min-width: 55em) {
-        .title-bar__year {
-            width: 27%;
-        }
-    }
-
-    .title-bar__month {
-        position: relative;
-        /*float: center;*/
-        font-size: 1rem;
-        line-height: 30px;
-        width: 22%;
-        padding: 0 0.5rem;
-        text-align: center;
-        margin-right: 67px;
-        word-spacing: 30px;
-    }
-
-    @media screen and (min-width: 55em) {
-        .title-bar__month {
-            width: 12%;
-        }
-    }
-
-    .title-bar__minimize, .title-bar__maximize, .title-bar__close {
-        position: relative;
-        float: left;
-        width: 34px;
-        height: 34px;
-    }
-
-    .title-bar__minimize:before, .title-bar__maximize:before, .title-bar__close:before, .title-bar__minimize:after, .title-bar__maximize:after, .title-bar__close:after {
-        top: 30%;
-        right: 30%;
-        bottom: 30%;
-        left: 30%;
-        content: " ";
-        position: absolute;
-        border-color: #8e8e8e;
-        border-style: solid;
-        border-width: 0 0 2px 0;
-    }
-
-    .title-bar .title-bar__controls {
-        display: inline-block;
-        vertical-align: top;
-        position: relative;
-        float: right;
-        width: auto;
-    }
-
-    .title-bar .title-bar__controls:before, .title-bar .title-bar__controls:after {
-        content: none;
-    }
-
-    .title-bar .title-bar__minimize:before {
-        border-bottom-width: 2px;
-    }
-
-    .title-bar .title-bar__maximize:before {
-        border-width: 1px 1px 2px 1px;
-    }
-
-    .title-bar .title-bar__close:before, .title-bar .title-bar__close:after {
-        bottom: 50%;
-        top: 49.9%;
-    }
-
-    .title-bar .title-bar__close:before {
-        transform: rotate(45deg);
-    }
-
-    .title-bar .title-bar__close:after {
-        transform: rotate(-45deg);
-    }
-
-    .calendar__sidebar {
-        width: 100%;
-        margin: 0 auto;
-        float: none;
-        background: linear-gradient(120deg, #eff3f3, #e1e7e8);
-        padding-bottom: 0.7rem;
-    }
-
-    @media screen and (min-width: 55em) {
-        .calendar__sidebar {
-            position: absolute;
-            height: 100%;
-            width: 50%;
-            float: left;
-            margin-bottom: 0;
-        }
-    }
-
-    .calendar__sidebar .content {
-        padding: 2rem 1.5rem 2rem 4rem;
-        color: #040605;
-    }
-
-    .sidebar__nav {
-        display: flex;
-        align-items: center;
-        justify-content: flex-start;
-        margin-bottom: 0.9rem;
-        padding: 0.7rem 1rem;
-        background-color: #f5f7f6;
-    }
-
-    .sidebar__nav-item {
-        display: inline-block;
-        width: 22px;
-        margin-right: 23px;
-        padding: 0;
-        opacity: 0.8;
-    }
-
-    .sidebar__list {
-        list-style: none;
-        margin: 0;
-        padding-left: 1rem;
-        padding-right: 1rem;
-    }
-
-    .sidebar__list-item {
-        margin: 1.2rem 0;
-        color: #2d4338;
-        font-weight: 100;
-        font-size: 1rem;
-    }
-
-    .list-item__time {
-        display: inline-block;
-        width: 60px;
-    }
-
-    @media screen and (min-width: 55em) {
-        .list-item__time {
-            margin-right: 2rem;
-        }
-    }
-
-    .sidebar__list-item--complete {
-        color: rgba(4, 6, 5, 0.3);
-    }
-
-    .sidebar__list-item--complete .list-item__time {
-        color: rgba(4, 6, 5, 0.3);
-    }
-
-    .sidebar__heading {
-        font-size: 2.2rem;
-        font-weight: bold;
-        padding-left: 1rem;
-        padding-right: 1rem;
-        margin-bottom: 3rem;
-        margin-top: 1rem;
-    }
-
-    .sidebar__heading span {
-        float: right;
-        font-weight: 300;
-    }
-
-    .calendar__heading-highlight {
-        color: #2d444a;
-        font-weight: 900;
-    }
-
-    .calendar__days {
-        display: flex;
-        flex-flow: column wrap;
-        align-items: stretch;
-        width: 100%;
-        float: none;
-        min-height: 580px;
-        height: 100%;
-        font-size: 12px;
-        /*padding: 0.8rem 0 1rem 1rem;*/
-        #b8cad6 background: #f5f7f6;
-    }
-
-    @media screen and (min-width: 55em) {
-        .calendar__days {
-            width: 50%;
-            float: right;
-        }
-    }
-
-    .calendar__top-bar {
-        background: #b8cad6;
-        text-align: center;
-        display: flex;
-        flex: 56px 0 0;
-    }
-
-    .top-bar__days {
-        width: 100%;
-        padding: 0 5px;
-        color: #2d4338;
-        font-weight: 100;
-        -webkit-font-smoothing: subpixel-antialiased;
-        font-size: 1rem;
-    }
-
-    .calendar__week {
-        display: flex;
-        flex: 1 1 0;
-    }
-
-    .calendar__day {
-        text-align: center;
-        display: flex;
-        flex-flow: column wrap;
-        justify-content: space-between;
-        width: 100%;
-        padding: 1.9rem 0.2rem 0.2rem;
-    }
-
-
-    .calendar__date {
-        color: #040605;
-        font-size: 1.7rem;
-        font-weight: 600;
-        line-height: 0.7;
-    }
-
-    @media screen and (min-width: 55em) {
-        .calendar__date {
-            font-size: 2.3rem;
-        }
-    }
-
-    .calendar__week .inactive .calendar__date, .calendar__week .inactive .task-count {
-        color: #c6c6c6;
-    }
-
-    .calendar__week .today .calendar__date {
-        color: #fd588a;
-    }
-
-    .calendar__task {
-        color: #040605;
-        display: flex;
-        font-size: 0.8rem;
-    }
-
-    @media screen and (min-width: 55em) {
-        .calendar__task {
-            font-size: 1rem;
-        }
-    }
-
-    .calendar__task.calendar__task--today {
-        color: #fd588a;
-    }
-
-
-    .danger {
-        color: red;
-    }
-
-    .success {
-        color: green;
-    }
-
-    .calendar__day:hover {
-        color: #0a0a0a;
-        background: #a6a6a6;
-        cursor: pointer;
-    }
-</style>
-
 

backend/web/css/calendar.css

@@ -0,0 +1,380 @@
+.calendar-contain {
+    position: relative;
+    left: 0;
+    right: 0;
+    border-radius: 0;
+    width: 100%;
+    overflow: hidden;
+    max-width: 1920px;
+    min-width: 450px;
+    margin: 1rem auto;
+    background-color: #f5f7f6;
+    box-shadow: 5px 5px 72px rgba(30, 46, 50, 0.5);
+    color: #040605;
+}
+
+@media screen and (min-width: 55em) {
+    .calendar-contain {
+        margin: auto;
+        top: 5%;
+    }
+}
+
+.title-bar {
+    position: relative;
+    width: 100%;
+    display: flex;
+    text-align: right;
+    background: #f5f7f6;
+    padding: 0.5rem;
+    margin-bottom: 0;
+}
+
+.title-bar:after {
+    display: table;
+    clear: both;
+}
+
+.title-bar__burger {
+    display: block;
+    position: relative;
+    float: left;
+    overflow: hidden;
+    margin: 0;
+    padding: 0;
+    width: 38px;
+    height: 30px;
+    font-size: 0;
+    text-indent: -9999px;
+    appearance: none;
+    box-shadow: none;
+    border: none;
+    cursor: pointer;
+    background: none;
+}
+
+.title-bar__burger:focus {
+    outline: none;
+}
+
+.burger__lines {
+    display: block;
+    position: absolute;
+    width: 18px;
+    top: 15px;
+    left: 0;
+    right: 0;
+    margin: auto;
+    height: 1px;
+    background: #040605;
+}
+
+.burger__lines:before, .burger__lines:after {
+    position: absolute;
+    display: block;
+    left: 0;
+    width: 100%;
+    height: 1px;
+    background-color: #040605;
+    content: "";
+}
+
+.burger__lines:before {
+    top: -5px;
+}
+
+.burger__lines:after {
+    bottom: -5px;
+}
+
+.title-bar__year {
+    display: block;
+    position: relative;
+    float: left;
+    font-size: 1rem;
+    line-height: 30px;
+    width: 43%;
+    padding: 0 0.5rem;
+    text-align: left;
+}
+
+@media screen and (min-width: 55em) {
+    .title-bar__year {
+        width: 27%;
+    }
+}
+
+.title-bar__month {
+    position: relative;
+    /*float: center;*/
+    font-size: 1rem;
+    line-height: 30px;
+    width: 22%;
+    padding: 0 0.5rem;
+    text-align: center;
+    margin-right: 67px;
+    word-spacing: 30px;
+}
+
+@media screen and (min-width: 55em) {
+    .title-bar__month {
+        width: 12%;
+    }
+}
+
+.title-bar__minimize, .title-bar__maximize, .title-bar__close {
+    position: relative;
+    float: left;
+    width: 34px;
+    height: 34px;
+}
+
+.title-bar__minimize:before, .title-bar__maximize:before, .title-bar__close:before, .title-bar__minimize:after, .title-bar__maximize:after, .title-bar__close:after {
+    top: 30%;
+    right: 30%;
+    bottom: 30%;
+    left: 30%;
+    content: " ";
+    position: absolute;
+    border-color: #8e8e8e;
+    border-style: solid;
+    border-width: 0 0 2px 0;
+}
+
+.title-bar .title-bar__controls {
+    display: inline-block;
+    vertical-align: top;
+    position: relative;
+    float: right;
+    width: auto;
+}
+
+.title-bar .title-bar__controls:before, .title-bar .title-bar__controls:after {
+    content: none;
+}
+
+.title-bar .title-bar__minimize:before {
+    border-bottom-width: 2px;
+}
+
+.title-bar .title-bar__maximize:before {
+    border-width: 1px 1px 2px 1px;
+}
+
+.title-bar .title-bar__close:before, .title-bar .title-bar__close:after {
+    bottom: 50%;
+    top: 49.9%;
+}
+
+.title-bar .title-bar__close:before {
+    transform: rotate(45deg);
+}
+
+.title-bar .title-bar__close:after {
+    transform: rotate(-45deg);
+}
+
+.calendar__sidebar {
+    width: 100%;
+    margin: 0 auto;
+    float: none;
+    background: linear-gradient(120deg, #eff3f3, #e1e7e8);
+    padding-bottom: 0.7rem;
+}
+
+@media screen and (min-width: 55em) {
+    .calendar__sidebar {
+        position: absolute;
+        height: 100%;
+        width: 50%;
+        float: left;
+        margin-bottom: 0;
+    }
+}
+
+.calendar__sidebar .content {
+    padding: 2rem 1.5rem 2rem 4rem;
+    color: #040605;
+}
+
+.sidebar__nav {
+    display: flex;
+    align-items: center;
+    justify-content: flex-start;
+    margin-bottom: 0.9rem;
+    padding: 0.7rem 1rem;
+    background-color: #f5f7f6;
+}
+
+.sidebar__nav-item {
+    display: inline-block;
+    width: 22px;
+    margin-right: 23px;
+    padding: 0;
+    opacity: 0.8;
+}
+
+.sidebar__list {
+    list-style: none;
+    margin: 0;
+    padding-left: 1rem;
+    padding-right: 1rem;
+}
+
+.sidebar__list-item {
+    margin: 1.2rem 0;
+    color: #2d4338;
+    font-weight: 100;
+    font-size: 1rem;
+}
+
+.list-item__time {
+    display: inline-block;
+    width: 60px;
+}
+
+@media screen and (min-width: 55em) {
+    .list-item__time {
+        margin-right: 2rem;
+    }
+}
+
+.sidebar__list-item--complete {
+    color: rgba(4, 6, 5, 0.3);
+}
+
+.sidebar__list-item--complete .list-item__time {
+    color: rgba(4, 6, 5, 0.3);
+}
+
+.sidebar__heading {
+    font-size: 2.2rem;
+    font-weight: bold;
+    padding-left: 1rem;
+    padding-right: 1rem;
+    margin-bottom: 3rem;
+    margin-top: 1rem;
+}
+
+.sidebar__heading span {
+    float: right;
+    font-weight: 300;
+}
+
+.calendar__heading-highlight {
+    color: #2d444a;
+    font-weight: 900;
+}
+
+.calendar__days {
+    display: flex;
+    flex-flow: column wrap;
+    align-items: stretch;
+    width: 100%;
+    float: none;
+    min-height: 580px;
+    height: 100%;
+    font-size: 12px;
+    /*padding: 0.8rem 0 1rem 1rem;*/
+    background: #f5f7f6;
+}
+
+@media screen and (min-width: 55em) {
+    .calendar__days {
+        width: 50%;
+        float: right;
+    }
+}
+
+.calendar__top-bar {
+    background: #b8cad6;
+    text-align: center;
+    display: flex;
+    flex: 56px 0 0;
+}
+
+.top-bar__days {
+    width: 100%;
+    padding: 0 5px;
+    color: #2d4338;
+    font-weight: 100;
+    -webkit-font-smoothing: subpixel-antialiased;
+    font-size: 1rem;
+}
+
+.calendar__week {
+    display: flex;
+    flex: 1 1 0;
+}
+
+.calendar__day {
+    text-align: center;
+    display: flex;
+    flex-flow: column wrap;
+
+    width: 100%;
+    justify-content: space-around;
+    /*padding: 1.9rem 0.2rem 0.2rem;*/
+}
+
+
+.calendar__date {
+    /*margin: 25px;*/
+    color: #040605;
+    font-size: 1.7rem;
+    font-weight: 600;
+    line-height: 0.7;
+}
+
+@media screen and (min-width: 55em) {
+    .calendar__date {
+        font-size: 2.3rem;
+    }
+}
+
+.calendar__week .inactive .calendar__date, .calendar__week .inactive .task-count {
+    color: #c6c6c6;
+}
+
+.calendar__week .today .calendar__date {
+    color: #fd588a;
+}
+
+.calendar__task {
+    color: #040605;
+    display: flex;
+    font-size: 0.8rem;
+}
+
+@media screen and (min-width: 55em) {
+    .calendar__task {
+        font-size: 1rem;
+    }
+}
+
+.calendar__task.calendar__task--today {
+    color: #fd588a;
+}
+
+
+.danger {
+    color: red;
+}
+
+.success {
+    color: green;
+}
+
+.calendar__day:hover {
+    color: #0a0a0a;
+    background: #c2c2c2;
+    cursor: pointer;
+}
+.calendar__day:active {
+    background: #727272;
+    cursor: pointer;
+}
+
+.active_day {
+    background: #cdcfce;
+}