Report aesthetics

diff --git a/src/bootstrap.php b/src/bootstrap.php
index 332715d..097af20 100644 (file)
--- a/src/bootstrap.php
+++ b/src/bootstrap.php
@@ -2,7 +2,7 @@
 
 require_once('common.php');
 
-function tabs($id, $headings, $contents, $justify = false) {
+function tabs($id, $headings, $contents, $activeHeading = null, $justify = false) {
     $slug = function($string) {
         return str_replace(' ', '', $string);
     };
@@ -12,35 +12,35 @@ function tabs($id, $headings, $contents, $justify = false) {
     };
 
     $content = function($content, $id, $active = false) {
-        return '<div class="container-fluid drivers-main tab-pane' . ($active ? ' active' : '')  . '" id="tab' . $id  . '" role="tabpanel">' . $content . '</div>';
+        return '<div class="container-fluid drivers-main tab-pane fade' . ($active ? ' active show' : '')  . '" id="tab' . $id  . '" role="tabpanel">' . $content . '</div>';
     };
 
     $headingAndContent = zipWith(function($heading, $content) {
         return ['heading' => $heading, 'content' => $content];
     }, $headings, $contents);
 
-    $smushenated = array_reduce($headingAndContent, function($c, $v) use ($slug, $heading, $content, $id) {
+    $smushenated = array_reduce($headingAndContent, function($c, $v) use ($slug, $heading, $content, $id, $activeHeading) {
         return [
-            'headings' => $c['headings'] . $heading($v['heading'], $id . $slug($v['heading']), !$c['headings']),
-            'contents' => $c['contents'] . $content($v['content'], $id . $slug($v['heading']), !$c['contents'])
+            'headings' => $c['headings'] . $heading($v['heading'], $id . $slug($v['heading']), $v['heading'] == $activeHeading),
+            'contents' => $c['contents'] . $content($v['content'], $id . $slug($v['heading']), $v['heading'] == $activeHeading)
         ];
     }, ['headings' => '', 'contents' => '']);
 
     return '<ul class="nav nav-pills' . ($justify ? ' justify-content-center' : '')  . '">' . $smushenated['headings'] . '</ul><div class="tab-content">' . $smushenated['contents'] . '</div>';
 }
 
-function accordion($id, $headings, $contents) {
+function accordion($id, $headings, $contents, $activeHeading = null) {
     $slug = function($string) {
         return str_replace(' ', '', strtolower($string));
     };
 
-    $a = zipWith(function($heading, $content) use ($slug, $id) {
+    $a = zipWith(function($heading, $content) use ($slug, $id, $activeHeading) {
         return
             '<div class="card">' .
             '<div class="card-header">' .
             '<a class="collapsed card-link" data-toggle="collapse" href="#' . $slug($heading) . $id . '">' . $heading . '</a>' .
             '</div>' .
-            '<div id="' . $slug($heading) . $id . '" class="collapse" data-parent="#accordion-' . $id . '">'  .
+            '<div id="' . $slug($heading) . $id . '" class="collapse' . ($heading == $activeHeading ? ' show' : '') . '" data-parent="#accordion-' . $id . '">'  .
             '<div class="card-body">' .
             $content .
             '</div></div></div>';
@@ -66,14 +66,15 @@ function table($rows) {
 
 function doIt() {
     $years = array_reverse(range(2018, (int)(new DateTimeImmutable())->format('Y')));
+    $today = turnBackTime(new DateTimeImmutable);
     return tabs(
         'year',
         $years,
-        map(function($year) {
+        map(function($year) use ($today) {
             return accordion(
                 $year,
                 map(∘('strToUpper', getMonthName))(range(1,12)),
-                map(function($month) use ($year){
+                map(function($month) use ($year, $today){
                     $mondays = range(1, count(getMondaysForMonth($year, $month)));
                     return tabs(
                         $year . $month,
@@ -81,12 +82,15 @@ function doIt() {
                         map(function($num) use ($month, $year) {
                             $completedTasksFile = getFilePathForWeek($year, $month, $num, PATH_TO_TASKS_FILES);
                             $completedTasks = file_exists($completedTasksFile) ? lines(trim(file_get_contents($completedTasksFile))) : [];
-                            return table(map(function($task) use($completedTasks) { return [getString($task), in_array($task, $completedTasks) ? '👍😄' : '😱👎']; })(getTasksForTheWeek($year, $month, $num, require 'taskMatrix.php')));
-                        })($mondays)
+                            return table(map(function($task) use($completedTasks) { return [getString($task), in_array($task, $completedTasks) ? '👍😄' : '👎😱']; })(getTasksForTheWeek($year, $month, $num, require 'taskMatrix.php')));
+                        })($mondays),
+                        ($year == $today->year && $month == $today->month) ? 'Week ' . $today->weekNum : 'Week 1'
                     );
-                })(range(1,12))
+                })(range(1,12)),
+                ($year == $today->year) ? strToUpper(getMonthName($today->month)) : 'JANUARY'
             );
         })($years),
+        $today->year,
         true
     );
 }

diff --git a/src/report.php b/src/report.php
index fc1faa6..83c76c8 100644 (file)
--- a/src/report.php
+++ b/src/report.php
@@ -14,28 +14,46 @@
         <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
 
         <style>
-            .nav-pills {
+            h1 {
+                margin-top: 1rem;
+
+            }
+            .nav-pills, .saitama {
                 margin-bottom: 1rem;
             }
-img {
-    image-rendering: optimizeSpeed;             /* STOP SMOOTHING, GIVE ME SPEED  */
-    image-rendering: -moz-crisp-edges;          /* Firefox                        */
-    image-rendering: -o-crisp-edges;            /* Opera                          */
-    image-rendering: -webkit-optimize-contrast; /* Chrome (and eventually Safari) */
-    image-rendering: pixelated; /* Chrome */
-    image-rendering: optimize-contrast;         /* CSS3 Proposed                  */
-    -ms-interpolation-mode: nearest-neighbor;   /* IE8+                           */
-    width: 100%;
-}
+            .container {
+                padding-bottom: 1rem;
+            }
+            img {
+                image-rendering: optimizeSpeed;             /* STOP SMOOTHING, GIVE ME SPEED  */
+                image-rendering: -moz-crisp-edges;          /* Firefox                        */
+                image-rendering: -o-crisp-edges;            /* Opera                          */
+                image-rendering: -webkit-optimize-contrast; /* Chrome (and eventually Safari) */
+                image-rendering: pixelated; /* Chrome */
+                image-rendering: optimize-contrast;         /* CSS3 Proposed                  */
+                -ms-interpolation-mode: nearest-neighbor;   /* IE8+                           */
+                width: 100%;
+                margin-top: 3.5rem;
+                position: sticky;
+                top: 3.5rem;
+            }
+            @media only screen and (max-width: 1200px) {
+                img {
+                    height: 500px;
+                    width: auto;
+                }
+            }
         </style>
     </head>
     <body>
-        <div class="container">
-                  <h1>The Onion Report</h1>
-                  <div class="row">
-                            <div class="col-lg-4"><img src="saitama.png" /></div>
-                            <div class="col-lg-8"><?php echo doIt(); ?></div>
-                  </div>
+        <div class="container-fluid">
+            <h1>The Onion Report</h1>
+            <div class="container">
+                <div class="row">
+                    <div class="col-xl-4 saitama"><img src="saitama.png" class="mx-auto d-block" /></div>
+                    <div class="col-xl-8"><?php echo doIt(); ?></div>
+                </div>
+            </div>
         </div>
     </body>
 </html>