Start Bootstrapping

raghubetina · raghubetina · commit 9183e720a8b2 · 2023-01-10T22:30:28.000Z
diff --git a/app/views/layouts/application.html.erb b/app/views/layouts/application.html.erb
@@ -1,24 +1,28 @@
 <!DOCTYPE html>
 <html>
   <head>
-    <title>VanillaRails</title>
+    <meta charset="utf-8">
+
+    <title>Helper Methods Pt 3</title>
+
     <meta name="viewport" content="width=device-width,initial-scale=1">
+    
     <%= csrf_meta_tags %>
     <%= csp_meta_tag %>
 
+    <%= render "shared/cdn_assets" %>
+
     <%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
-    <%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %>
+    <%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %>    
   </head>
 
   <body>
-    <div style="color: green;">
-      <%= notice %>
-    </div>
+    <%= render "shared/navbar" %>
+
+    <div class="container mt-3">
+      <%= render "shared/flash_messages" %>
 
-    <div style="color: red;">
-      <%= alert %>
+      <%= yield %>
     </div>
-    
-    <%= yield %>
   </body>
 </html>
diff --git a/app/views/shared/_cdn_assets.html.erb b/app/views/shared/_cdn_assets.html.erb
@@ -0,0 +1,8 @@
+<!-- Connect Bootstrap CSS -->
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
+
+<!-- Connect Bootstrap JavaScript and its dependencies -->
+<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.min.js" integrity="sha384-QJHtvGhmr9XOIpI6YVutG+2QOK9T+ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13" crossorigin="anonymous"></script>
+
+<!-- Connect Font Awesome -->
+<script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/js/all.min.js"></script>
diff --git a/app/views/shared/_flash_messages.html.erb b/app/views/shared/_flash_messages.html.erb
@@ -0,0 +1,11 @@
+<% if notice.present? %>
+  <div class="alert alert-success" role="alert">
+    <%= notice %>
+  </div>
+<% end %>
+
+<% if alert.present? %>
+  <div class="alert alert-danger" role="alert">
+    <%= alert %>
+  </div>
+<% end %>
diff --git a/app/views/shared/_navbar.html.erb b/app/views/shared/_navbar.html.erb
@@ -0,0 +1,18 @@
+<nav class="navbar navbar-expand-lg navbar-light bg-light">
+  <div class="container-fluid">
+    <a class="navbar-brand" href="/">Helper Methods Pt 3</a>
+    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
+      <span class="navbar-toggler-icon"></span>
+    </button>
+    <div class="collapse navbar-collapse" id="navbarSupportedContent">
+      <ul class="navbar-nav me-auto mb-2 mb-lg-0">
+        <li class="nav-item">
+          <a class="nav-link" aria-current="page" href="/">Home</a>
+        </li>
+        <li class="nav-item">
+          <a class="nav-link" aria-current="page" href="/">Movies</a>
+        </li>
+      </ul>
+    </div>
+  </div>
+</nav>
