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

4 files changed, 165 insertions, 48 deletions

diff --git a/app/assets/stylesheets/_custom.scss b/app/assets/stylesheets/_custom.scss
new file mode 100644
index 0000000..4a18dd1
--- /dev/null
+++ b/app/assets/stylesheets/_custom.scss
@@ -0,0 +1,20 @@
+@import 'bootstrap/scss/bootstrap';
+
+$nav-link-color: green;
+$nav-link-hover-color: darkgreen;
+
+
+@import 'bootstrap/scss/bootstrap';
+
+table {
+  width: 100%;
+  border-collapse: collapse;
+  background: lightgreen;
+  margin-top: 30px;
+  table-layout: fixed;
+  border: 2px solid;
+}
+td {
+  border: 1px solid;
+  padding: 3px;
+}
diff --git a/app/assets/stylesheets/_styles.scss b/app/assets/stylesheets/_styles.scss
index 95ca513..4c8c5de 100644
--- a/app/assets/stylesheets/_styles.scss
+++ b/app/assets/stylesheets/_styles.scss
@@ -11,7 +11,7 @@ table {
   table-layout: fixed;
   border: 2px solid;
 }
-th, td {
-  border: 1px solid;
+td {
+  border-width: 2px;
   padding: 3px;
 }
diff --git a/app/assets/stylesheets/application.bootstrap.scss b/app/assets/stylesheets/application.bootstrap.scss
index add77b4..9c9fe1b 100644
--- a/app/assets/stylesheets/application.bootstrap.scss
+++ b/app/assets/stylesheets/application.bootstrap.scss
@@ -1,3 +1,4 @@
 @import 'bootstrap/scss/bootstrap';
 @import 'bootstrap-icons/font/bootstrap-icons';
 @import '_styles.scss';
+@import '_custom.scss';
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>