diff --git a/resources/lang/en/activityChart.php b/resources/lang/en/activityChart.php new file mode 100644 index 00000000..2165b3ab --- /dev/null +++ b/resources/lang/en/activityChart.php @@ -0,0 +1,27 @@ + [ + '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', + ], +]; diff --git a/resources/lang/ru/activityChart.php b/resources/lang/ru/activityChart.php new file mode 100644 index 00000000..7ac0ed24 --- /dev/null +++ b/resources/lang/ru/activityChart.php @@ -0,0 +1,27 @@ + [ + 'january' => 'Янв', + 'february' => 'Февр', + 'march' => 'Март', + 'april' => 'Апр', + 'may' => 'Май', + 'june' => 'Июнь', + 'july' => 'Июль', + 'august' => 'Авг', + 'september' => 'Сент', + 'october' => 'Окт', + 'november' => 'Нояб', + 'december' => 'Дек', + ], + 'days' => [ + 'monday' => 'Пн', + 'tuesday' => 'Вт', + 'wednesday' => 'Ср', + 'thursday' => 'Чт', + 'friday' => 'Пт', + 'saturday' => 'Сб', + 'sunday' => 'Вс', + ], +]; diff --git a/resources/sass/_activity_chart.scss b/resources/sass/_activity_chart.scss index d0bdfe95..d689f6d4 100644 --- a/resources/sass/_activity_chart.scss +++ b/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 { diff --git a/resources/views/components/activity_chart.blade.php b/resources/views/components/activity_chart.blade.php index 1a156b53..1318164d 100644 --- a/resources/views/components/activity_chart.blade.php +++ b/resources/views/components/activity_chart.blade.php @@ -1,5 +1,28 @@ -
-
+
+
    +
  • {{ __('activityChart.days.monday') }}
  • +
  • {{ __('activityChart.days.tuesday') }}
  • +
  • {{ __('activityChart.days.wednesday') }}
  • +
  • {{ __('activityChart.days.thursday') }}
  • +
  • {{ __('activityChart.days.friday') }}
  • +
  • {{ __('activityChart.days.saturday') }}
  • +
  • {{ __('activityChart.days.sunday') }}
  • +
+
+
    +
  • {{ __('activityChart.month.january') }}
  • +
  • {{ __('activityChart.month.february') }}
  • +
  • {{ __('activityChart.month.march') }}
  • +
  • {{ __('activityChart.month.april') }}
  • +
  • {{ __('activityChart.month.may') }}
  • +
  • {{ __('activityChart.month.june') }}
  • +
  • {{ __('activityChart.month.july') }}
  • +
  • {{ __('activityChart.month.august') }}
  • +
  • {{ __('activityChart.month.september') }}
  • +
  • {{ __('activityChart.month.october') }}
  • +
  • {{ __('activityChart.month.november') }}
  • +
  • {{ __('activityChart.month.december') }}
  • +
    @foreach ($chart as $square)