Got basic tabbed layout working

1 files changed, 92 insertions, 32 deletions

diff --git a/app/views/events/_form.html.erb b/app/views/events/_form.html.erb
index e4ee1a0..2a41eec 100644
--- a/app/views/events/_form.html.erb
+++ b/app/views/events/_form.html.erb
@@ -1,46 +1,106 @@
 <hr>
 <h3>Create a new event</h3>
 
-<ul class="nav nav-tabs">
-  <li class="nav-item">
-    <a class="nav-link active" aria-current="page" href="#">Assessment/Inspection</a>
+<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">Inspection</button>
   </li>
-  <li class="nav-item">
-    <a class="nav-link" href="#">SyRIF</a>
+  <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">Meeting</button>
   </li>
-  <li class="nav-item">
-    <a class="nav-link" href="#">Exercise</a>
-  </li>
-  <li class="nav-item">
-    <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
+  <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">Other</button>
   </li>
 </ul>
+<div class="tab-content" id="myTabContent">
+  <div class="tab-pane active mt-2" id="home" role="tabpanel" aria-labelledby="home-tab">
+    <%= form_with(model: event) do |form| %>
+      <% if event.errors.any? %>
+        <div style="color: red">
+          <h2><%= pluralize(event.errors.count, "error") %> prohibited this event from being saved:</h2>
+
+          <ul>
+            <% event.errors.each do |error| %>
+              <li><%= error.full_message %></li>
+            <% end %>
+          </ul>
+        </div>
+      <% end %>
+
+      <div>
+        <%= form.label :date, style: "display: block" %>
+        <%= form.date_field :date %>
+      </div>
 
-<%= form_with(model: event) do |form| %>
-  <% if event.errors.any? %>
-    <div style="color: red">
-      <h2><%= pluralize(event.errors.count, "error") %> prohibited this event from being saved:</h2>
-
-      <ul>
-        <% event.errors.each do |error| %>
-          <li><%= error.full_message %></li>
-        <% end %>
-      </ul>
-    </div>
-  <% end %>
-
-  <div>
-    <%= form.label :date, style: "display: block" %>
-    <%= form.date_field :date %>
+      <div>
+        <%= form.label "Event name", style: "display: block" %>
+        <%= form.text_field :name %>
+      </div>
+
+      <div>
+        <%= form.submit style: "background: green; color: white; margin-top: 1.1em;"%>
+      </div>
+    <% end %>
   </div>
+  <div class="tab-pane mt-2" id="profile" role="tabpanel" aria-labelledby="profile-tab">
+    <%= form_with(model: event) do |form| %>
+      <% if event.errors.any? %>
+        <div style="color: red">
+          <h2><%= pluralize(event.errors.count, "error") %> prohibited this event from being saved:</h2>
+
+          <ul>
+            <% event.errors.each do |error| %>
+              <li><%= error.full_message %></li>
+            <% end %>
+          </ul>
+        </div>
+      <% end %>
+
+      <div>
+        <%= form.label :date, style: "display: block" %>
+        <%= form.date_field :date %>
+      </div>
+
+      <div>
+        <%= form.label "Event name", style: "display: block" %>
+        <%= form.text_field :name %>
+      </div>
+
+      <div>
+        <%= form.submit style: "background: green; color: white; margin-top: 1.1em;"%>
+      </div>
+    <% end %>
 
-  <div>
-    <%= form.label "Event name", style: "display: block" %>
-    <%= form.text_field :name %>
   </div>
+  <div class="tab-pane mt-2" id="contact" role="tabpanel" aria-labelledby="contact-tab">
+    <%= form_with(model: event) do |form| %>
+      <% if event.errors.any? %>
+        <div style="color: red">
+          <h2><%= pluralize(event.errors.count, "error") %> prohibited this event from being saved:</h2>
+
+          <ul>
+            <% event.errors.each do |error| %>
+              <li><%= error.full_message %></li>
+            <% end %>
+          </ul>
+        </div>
+      <% end %>
 
-  <div>
-    <%= form.submit style: "background: green; color: white; margin-top: 1.1em;"%>
+      <div>
+        <%= form.label :date, style: "display: block" %>
+        <%= form.date_field :date %>
+      </div>
+
+      <div>
+        <%= form.label "Event name", style: "display: block" %>
+        <%= form.text_field :name %>
+      </div>
+
+      <div>
+        <%= form.submit style: "background: green; color: white; margin-top: 1.1em;"%>
+      </div>
+    <% end %>
   </div>
-<% end %>
+</div>
+
 <hr>