Added a new _custom.scss file

Turns out if you configure it thus, you can customise the sass variables
in bootstrap.

https://bootstrap.themes.guide/how-to-customize-bootstrap.html

1 files changed, 142 insertions, 46 deletions

diff --git a/app/views/events/index.html.erb b/app/views/events/index.html.erb
index 2a8cc5f..573a67b 100644
--- a/app/views/events/index.html.erb
+++ b/app/views/events/index.html.erb
@@ -11,56 +11,152 @@
 <p>This is an example of some kind of table. There are lots of things wrong with it but who cares. It is a nice 
 table, isn't it? I'm hoping this text spans all the way across so I can see what it looks like when it renders.</p>
 
-<table>
-  <col style="width: 7%">
-  <col style="width: 15%">
-  <col style="width: 15%">
-  <col style="width: 15%">
-  <col style="width: 15%">
-  <col style="width: 48%">
-  <thead>
-    <tr>
-      <th>Date</th>
-      <th>Day</th>
-      <th>BAES Barrow</th>
-      <th>RRDL</th>
-      <th>Op. Berths</th>
-      <th>Comments</th>
-    </tr>
-  </thead>
-  <tbody>
-    <% @january_dates.each do |e| %>
-      <% if e.saturday? %>
-        <tr>
-          <td style="background: darkgreen; color: lightgray"><%= e.strftime("%d/%m") %></td>
-          <td style="background: darkgreen; color: lightgray"><%= e.strftime("%A") %></td>
-          <td style="background: darkgreen; color: lightgray">-</td>
-          <td style="background: darkgreen; color: lightgray">-</td>
-          <td style="background: darkgreen; color: lightgray">-</td>
-          <td style="background: darkgreen; color: lightgray">-</td>
-        </tr>
-      <% elsif e.sunday? %>
+<ul class="nav nav-tabs" id="myTab" role="tablist">
+  <li class="nav-item" role="presentation">
+    <button class="nav-link active" id="home-tab" data-bs-toggle="tab" data-bs-target="#home" type="button" role="tab" aria-controls="home" aria-selected="true">January</button>
+  </li>
+  <li class="nav-item" role="presentation">
+    <button class="nav-link" id="profile-tab" data-bs-toggle="tab" data-bs-target="#profile" type="button" role="tab" aria-controls="profile" aria-selected="false">February</button>
+  </li>
+  <li class="nav-item" role="presentation">
+    <button class="nav-link" id="contact-tab" data-bs-toggle="tab" data-bs-target="#contact" type="button" role="tab" aria-controls="contact" aria-selected="false">March</button>
+  </li>
+  <li class="nav-item" role="presentation">
+    <button class="nav-link" id="contact-tab" data-bs-toggle="tab" data-bs-target="#contact" type="button" role="tab" aria-controls="contact" aria-selected="false">April</button>
+  </li>
+  <li class="nav-item" role="presentation">
+    <button class="nav-link" id="contact-tab" data-bs-toggle="tab" data-bs-target="#contact" type="button" role="tab" aria-controls="contact" aria-selected="false">May</button>
+  </li>
+  <li class="nav-item" role="presentation">
+    <button class="nav-link" id="contact-tab" data-bs-toggle="tab" data-bs-target="#contact" type="button" role="tab" aria-controls="contact" aria-selected="false">June</button>
+  </li>
+  <li class="nav-item" role="presentation">
+    <button class="nav-link" id="contact-tab" data-bs-toggle="tab" data-bs-target="#contact" type="button" role="tab" aria-controls="contact" aria-selected="false">July</button>
+  </li>
+  <li class="nav-item" role="presentation">
+    <button class="nav-link" id="contact-tab" data-bs-toggle="tab" data-bs-target="#contact" type="button" role="tab" aria-controls="contact" aria-selected="false">August</button>
+  </li>
+  <li class="nav-item" role="presentation">
+    <button class="nav-link" id="contact-tab" data-bs-toggle="tab" data-bs-target="#contact" type="button" role="tab" aria-controls="contact" aria-selected="false">September</button>
+  </li>
+  <li class="nav-item" role="presentation">
+    <button class="nav-link" id="contact-tab" data-bs-toggle="tab" data-bs-target="#contact" type="button" role="tab" aria-controls="contact" aria-selected="false">October</button>
+  </li>
+  <li class="nav-item" role="presentation">
+    <button class="nav-link" id="contact-tab" data-bs-toggle="tab" data-bs-target="#contact" type="button" role="tab" aria-controls="contact" aria-selected="false">November</button>
+  </li>
+  <li class="nav-item" role="presentation">
+    <button class="nav-link" id="contact-tab" data-bs-toggle="tab" data-bs-target="#contact" type="button" role="tab" aria-controls="contact" aria-selected="false">December</button>
+  </li>
+</ul>
+<div class="tab-content" id="myTabContent">
+  <div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">
+    <table id="month-table">
+      <col style="width: 7%">
+      <col style="width: 15%">
+      <col style="width: 15%">
+      <col style="width: 15%">
+      <col style="width: 15%">
+      <col style="width: 48%">
+      <thead>
         <tr>
-          <td style="background: darkgreen; color: lightgray"><%= e.strftime("%d/%m") %></td>
-          <td style="background: darkgreen; color: lightgray"><%= e.strftime("%A") %></td>
-          <td style="background: darkgreen; color: lightgray">-</td>
-          <td style="background: darkgreen; color: lightgray">-</td>
-          <td style="background: darkgreen; color: lightgray">-</td>
-          <td style="background: darkgreen; color: lightgray">-</td>
+          <th>Date</th>
+          <th>Day</th>
+          <th>BAES Barrow</th>
+          <th>RRDL</th>
+          <th>Op. Berths</th>
+          <th>Comments</th>
         </tr>
-      <% else %>
+      </thead>
+      <tbody>
+        <% @january_dates.each do |e| %>
+          <% if e.saturday? %>
+            <tr>
+              <td style="background: darkgreen; color: lightgray"><%= e.strftime("%d/%m") %></td>
+              <td style="background: darkgreen; color: lightgray"><%= e.strftime("%A") %></td>
+              <td style="background: darkgreen; color: lightgray">-</td>
+              <td style="background: darkgreen; color: lightgray">-</td>
+              <td style="background: darkgreen; color: lightgray">-</td>
+              <td style="background: darkgreen; color: lightgray">-</td>
+            </tr>
+          <% elsif e.sunday? %>
+            <tr>
+              <td style="background: darkgreen; color: lightgray"><%= e.strftime("%d/%m") %></td>
+              <td style="background: darkgreen; color: lightgray"><%= e.strftime("%A") %></td>
+              <td style="background: darkgreen; color: lightgray">-</td>
+              <td style="background: darkgreen; color: lightgray">-</td>
+              <td style="background: darkgreen; color: lightgray">-</td>
+              <td style="background: darkgreen; color: lightgray">-</td>
+            </tr>
+          <% else %>
+            <tr>
+              <td><%= e.strftime("%d/%m") %></td>
+              <td><%= e.strftime("%A") %></td>
+              <td>DSC 2/A</td>
+              <td>-</td>
+              <td>-</td>
+              <td>-</td>
+            </tr>
+          <% end %>
+        <% end %>
+      </tbody>
+    </table>
+
+  </div>
+  <div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab">
+    <table>
+      <col style="width: 7%">
+      <col style="width: 15%">
+      <col style="width: 15%">
+      <col style="width: 15%">
+      <col style="width: 15%">
+      <col style="width: 48%">
+      <thead>
         <tr>
-          <td><%= e.strftime("%d/%m") %></td>
-          <td><%= e.strftime("%A") %></td>
-          <td>DSC 2/A</td>
-          <td>-</td>
-          <td>-</td>
-          <td>-</td>
+          <th>Date</th>
+          <th>Day</th>
+          <th>BAES Barrow</th>
+          <th>RRDL</th>
+          <th>Op. Berths</th>
+          <th>Comments</th>
         </tr>
-      <% end %>
-    <% end %>
-  </tbody>
-</table>
+      </thead>
+      <tbody>
+        <% @january_dates.each do |e| %>
+          <% if e.saturday? %>
+            <tr>
+              <td style="background: darkgreen; color: lightgray"><%= e.strftime("%d/%m") %></td>
+              <td style="background: darkgreen; color: lightgray"><%= e.strftime("%A") %></td>
+              <td style="background: darkgreen; color: lightgray">-</td>
+              <td style="background: darkgreen; color: lightgray">-</td>
+              <td style="background: darkgreen; color: lightgray">-</td>
+              <td style="background: darkgreen; color: lightgray">-</td>
+            </tr>
+          <% elsif e.sunday? %>
+            <tr>
+              <td style="background: darkgreen; color: lightgray"><%= e.strftime("%d/%m") %></td>
+              <td style="background: darkgreen; color: lightgray"><%= e.strftime("%A") %></td>
+              <td style="background: darkgreen; color: lightgray">-</td>
+              <td style="background: darkgreen; color: lightgray">-</td>
+              <td style="background: darkgreen; color: lightgray">-</td>
+              <td style="background: darkgreen; color: lightgray">-</td>
+            </tr>
+          <% else %>
+            <tr>
+              <td><%= e.strftime("%d/%m") %></td>
+              <td><%= e.strftime("%A") %></td>
+              <td>DSC 2/A</td>
+              <td>-</td>
+              <td>-</td>
+              <td>-</td>
+            </tr>
+          <% end %>
+        <% end %>
+      </tbody>
+    </table>
+  </div>
+  <div class="tab-pane fade" id="contact" role="tabpanel" aria-labelledby="contact-tab">...</div>
+</div>
 
 <table class="table table-success table-striped table-bordered mt-5">
   <tr>