Merge pull request Hexlet#1611 from canekg/activityChart

[Hexlet#1610] Activity chart improved

resources/lang/en/activityChart.php

@@ -0,0 +1,27 @@
+<?php
+
+return [
+  'month' => [
+    'january' => 'Jan',
+    'february' => 'Feb',
+    'march' => 'Mar',
+    'april' => 'Apr',
+    'may' => 'May',
+    'june' => 'Jun',
+    'july' => 'Jul',
+    'august' => 'Aug',
+    'september' => 'Sep',
+    'october' => 'Oct',
+    'november' => 'Nov',
+    'december' => 'Dec',
+  ],
+  'days' => [
+    'monday' => 'Mon',
+    'tuesday' => 'Tue',
+    'wednesday' => 'Wed',
+    'thursday' => 'Thu',
+    'friday' => 'Fri',
+    'saturday' => 'Sat',
+    'sunday' => 'Sun',
+  ],
+];

resources/lang/ru/activityChart.php

@@ -0,0 +1,27 @@
+<?php
+
+return [
+  'month' => [
+    'january' => 'Янв',
+    'february' => 'Февр',
+    'march' => 'Март',
+    'april' => 'Апр',
+    'may' => 'Май',
+    'june' => 'Июнь',
+    'july' => 'Июль',
+    'august' => 'Авг',
+    'september' => 'Сент',
+    'october' => 'Окт',
+    'november' => 'Нояб',
+    'december' => 'Дек',
+  ],
+  'days' => [
+    'monday' => 'Пн',
+    'tuesday' => 'Вт',
+    'wednesday' => 'Ср',
+    'thursday' => 'Чт',
+    'friday' => 'Пт',
+    'saturday' => 'Сб',
+    'sunday' => 'Вс',
+  ],
+];

resources/sass/_activity_chart.scss

@@ -17,18 +17,67 @@
     --theme-background-color: var(--dark-background);
 }
 
-.squares {
-    display: grid;
-    grid-gap: var(--square-gap);
-    grid-template-rows: repeat(7, var(--square-size));
-    grid-auto-flow: column;
-    grid-auto-columns: var(--square-size);
-    padding: 0 0 5px 0;
-    overflow-x: auto;
+.months { grid-area: months; }
+.squares { grid-area: squares; }
+
+.activityChart {
+  display: inline-grid;
+  grid-template-areas: "empty months"
+                      "squares squares";
+  grid-template-columns: auto 4fr;
+  grid-gap: 5px;
+  overflow-x: auto;
 }
 
 .graph {
-    border: 1px #e1e4e8 solid;
+  border: 1px #e1e4e8 solid;
+  max-width: 1140px;
+  margin: 0 0 0 5px;
+}
+
+.squares {
+  display: grid;
+  grid-gap: var(--square-gap);
+  grid-template-rows: repeat(7, var(--square-size));
+  grid-auto-flow: column;
+  grid-auto-columns: var(--square-size);
+  padding: 0 0 5px 0;
+}
+
+.days {
+  display: grid;
+  grid-template-rows: repeat(7, var(--square-size));
+  grid-gap: var(--square-gap);
+  padding: 24px 2px 0 10px;
+  align-content: start;
+}
+
+.days li {
+  list-style-type: none;
+}
+
+.months li {
+  list-style-type: none;
+}
+
+.months {
+  display: grid;
+  height: 20px;
+  padding: 0;
+  margin: 0;
+  align-content: start;
+  grid-template-columns: calc(var(--week-width) * 4) /* Jan */
+                         calc(var(--week-width) * 4) /* Feb */
+                         calc(var(--week-width) * 4) /* Mar */
+                         calc(var(--week-width) * 5) /* Apr */
+                         calc(var(--week-width) * 4) /* May */
+                         calc(var(--week-width) * 4) /* Jun */
+                         calc(var(--week-width) * 5) /* Jul */
+                         calc(var(--week-width) * 4) /* Aug */
+                         calc(var(--week-width) * 5) /* Sep */
+                         calc(var(--week-width) * 4) /* Oct */
+                         calc(var(--week-width) * 5) /* Nov */
+                         calc(var(--week-width) * 4) /* Dec */;
 }
 
 .squares li {

resources/views/components/activity_chart.blade.php

@@ -1,5 +1,28 @@
-<div class="container graph mt-4">
-  <div class="d-flex justify-content-center overflow-hidden m-4">
+<div class="graph d-flex justify-content-center mx-auto mt-4">
+  <ul class="days m-0">
+    <li>{{ __('activityChart.days.monday') }}</li>
+    <li>{{ __('activityChart.days.tuesday') }}</li>
+    <li>{{ __('activityChart.days.wednesday') }}</li>
+    <li>{{ __('activityChart.days.thursday') }}</li>
+    <li>{{ __('activityChart.days.friday') }}</li>
+    <li>{{ __('activityChart.days.saturday') }}</li>
+    <li>{{ __('activityChart.days.sunday') }}</li>
+  </ul>
+  <div class="activityChart m-1">
+    <ul class="months">
+      <li>{{ __('activityChart.month.january') }}</li>
+      <li>{{ __('activityChart.month.february') }}</li>
+      <li>{{ __('activityChart.month.march') }}</li>
+      <li>{{ __('activityChart.month.april') }}</li>
+      <li>{{ __('activityChart.month.may') }}</li>
+      <li>{{ __('activityChart.month.june') }}</li>
+      <li>{{ __('activityChart.month.july') }}</li>
+      <li>{{ __('activityChart.month.august') }}</li>
+      <li>{{ __('activityChart.month.september') }}</li>
+      <li>{{ __('activityChart.month.october') }}</li>
+      <li>{{ __('activityChart.month.november') }}</li>
+      <li>{{ __('activityChart.month.december') }}</li>
+    </ul>
     <ul class="squares mb-0">
       @foreach ($chart as $square)
         <li data-level="{{ $square }}"></li>