Styling 👨‍💻

Gemfile

@@ -70,3 +70,6 @@ group :test do
   gem 'capybara'
   gem 'selenium-webdriver'
 end
+
+gem 'bootstrap'
+gem 'sassc-rails'

Gemfile.lock

@@ -78,11 +78,16 @@ GEM
     addressable (2.8.6)
       public_suffix (>= 2.0.2, < 6.0)
     ast (2.4.2)
+    autoprefixer-rails (10.4.16.0)
+      execjs (~> 2)
     base64 (0.2.0)
     bigdecimal (3.1.8)
     bindex (0.8.1)
     bootsnap (1.18.3)
       msgpack (~> 1.2)
+    bootstrap (5.3.3)
+      autoprefixer-rails (>= 9.1.0)
+      popper_js (>= 2.11.8, < 3)
     builder (3.2.4)
     capybara (3.40.0)
       addressable
@@ -106,6 +111,9 @@ GEM
       railties (>= 6.1)
     drb (2.2.1)
     erubi (1.12.0)
+    execjs (2.9.1)
+    ffi (1.16.3)
+    ffi (1.16.3-x64-mingw-ucrt)
     globalid (1.2.1)
       activesupport (>= 6.1)
     i18n (1.14.5)
@@ -157,6 +165,7 @@ GEM
       racc
     pg (1.5.6)
     pg (1.5.6-x64-mingw-ucrt)
+    popper_js (2.11.8)
     psych (5.1.2)
       stringio
     public_suffix (5.0.5)
@@ -223,6 +232,14 @@ GEM
       parser (>= 3.3.1.0)
     ruby-progressbar (1.13.0)
     rubyzip (2.3.2)
+    sassc (2.4.0)
+      ffi (~> 1.9)
+    sassc-rails (2.1.2)
+      railties (>= 4.0.0)
+      sassc (>= 2.0)
+      sprockets (> 3.0)
+      sprockets-rails
+      tilt
     selenium-webdriver (4.20.1)
       base64 (~> 0.2)
       rexml (~> 3.2, >= 3.2.5)
@@ -239,6 +256,7 @@ GEM
       railties (>= 6.0.0)
     stringio (3.1.0)
     thor (1.3.1)
+    tilt (2.3.0)
     timeout (0.4.1)
     turbo-rails (2.0.5)
       actionpack (>= 6.0.0)
@@ -269,6 +287,7 @@ PLATFORMS
 
 DEPENDENCIES
   bootsnap
+  bootstrap
   capybara
   debug
   dotenv-rails
@@ -278,6 +297,7 @@ DEPENDENCIES
   puma (>= 5.0)
   rails (~> 7.1.3, >= 7.1.3.2)
   rubocop (>= 1.0, < 2.0)
+  sassc-rails
   selenium-webdriver
   sprockets-rails
   stimulus-rails

app/assets/stylesheets/application.css → app/assets/stylesheets/application.scss

@@ -13,3 +13,55 @@
  *= require_tree .
  *= require_self
  */
+
+@import "bootstrap";
+
+.navbar {
+  background-color: black !important;
+}
+
+.nav-link {
+  color: white !important;
+}
+
+#logo {
+  float: left;
+  font-size: 1.7em;
+  color: #fff;
+  text-transform: uppercase;
+  letter-spacing: -1px;
+  font-weight: bold;
+}
+
+#home-container {
+  margin-top: 25px;
+}
+
+.jumbotron {
+  background-image: url('writing.jpg');
+  background-position: center center;
+  background-repeat: no-repeat;
+  background-size: cover;
+  height: 500px;
+}
+
+#text {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+}
+
+html,
+body {
+  height: 100%;
+}
+
+#page-content {
+  flex: 1 0 auto;
+  background-color: lightgrey;
+}
+
+// #sticky-footer {
+//   flex-shrink: none;
+// }

app/javascript/application.js

@@ -1,3 +1,5 @@
 // Configure your import map in config/importmap.rb. Read more: https://github.com/rails/importmap-rails
 import "@hotwired/turbo-rails"
 import "controllers"
+import "popper"
+import "bootstrap"

app/views/articles/_form.html.erb

@@ -1,14 +1,27 @@
-<%= render 'errors' %>
-<%= form_with model: @article do |form| %>
-  <p>
-    <%= form.label :title %><br />
-    <%= form.text_field :title %>
-  </p>
-  <p>
-    <%= form.label :description %><br />
-    <%= form.text_area :description %>
-  </p>
-  <p>
-    <%= form.submit %>
-  </p>
-<% end %>
+<div class="container">
+  <div class="row justify-content-center">
+    <div class="col-10">
+      <%= render 'shared/errors' %>
+      <%= form_with model: @article, class: "shadow p-3 mb-3 bg-info rounded" do |form| %>
+        <div class="form-group row mb-4">
+          <%= form.label :title, class:"col-2 col-form-label text-light" %>
+          <div class="col-10">
+            <%= form.text_field :title, class: "form-control shadow rounded", placeholder: "Title of article" %>
+          </div>
+        </div>
+
+        <div class="form-group row">
+          <%= form.label :description, class: "col-2 col-form-label text-light" %>
+          <div class="col-10">
+            <%= form.text_area :description, rows: 10, class: "form-control shadow rounded", placeholder: "Description of article" %>
+          </div>
+        </div>
+
+          <div class="form-group justify-content-center text-center mt-4">
+            <%= form.submit class: "btn btn-outline-light btn-lg" %>
+          </div>
+      <% end %>
+  </div>
+    <%= link_to '[ Cancel and return to Articles Listing Page ]', articles_path, class: "text-center text-info" %>
+  </div>
+</div>

app/views/articles/edit.html.erb

@@ -1,3 +1,2 @@
-<h1>Edit Article</h1>
+<h1 class="text-center mt-4">Edit Article</h1>
 <%= render 'form' %>
-<%= link_to 'Return to Articles Listing Page', articles_path %>

app/views/articles/index.html.erb

@@ -1,30 +1,30 @@
-<h1>Articles Listing Page</h1>
+<h1 class="text-center mt-4">Listing all articles</h1>
 
-<table>
-  <thead>
-    <tr>
-      <th>Title</th>
-      <th>Description</th>
-      <th>Actions</th>
-    </tr>
-  </thead>
+<div class="container">
+  <% @articles.each do |article| %>
+    <div class="row justify-content-md-center">
+      <div class="col-8 mt-4">
+      <div class="card text-center shadow mb-5 bg-body rounded">
+          <div class="card-header fst-italic">
+            by Gladwin Ramantso
+          </div>
+          <div class="card-body">
+            <h5 class="card-title"><%= link_to article.title, article_path(article), class: "text-success" %></h5>
+            <p class="card-text fw-bold"><%= truncate(article.description, length: 100) %></p>
+              <%= link_to 'View', article_path(article), class: "btn btn-outline-primary" %>
+              <%= link_to 'Edit', edit_article_path(article) , class: "btn btn-outline-info" %>
+              <%= link_to 'Delete', article_path(article), class: "btn btn-outline-danger" , data: {
+                  turbo_method: :delete,
+                  turbo_confirm: "Are you sure?"
+                }  %>
+          </div>
+          <div class="card-footer text-muted">
+            <small> Created <%= time_ago_in_words(article.created_at) %> ago, Edited <%= time_ago_in_words(article.updated_at) %> ago</small>
+          </div>
+        </div>
+      </div>
+    </div>
+  <% end %>
+</div>
 
-  <tbody>
-    <% @articles.each do |article| %>
-      <tr>
-        <td><%= article.title %></td>
-        <td><%= article.description %></td>
-        <td><%= link_to 'Show', article_path(article) %></td>
-        <td><%= link_to 'Edit', edit_article_path(article) %></td>
-        <td><%= link_to 'Delete', article_path(article), data: {
-          turbo_method: :delete,
-          turbo_confirm: "Are you sure?"
-        }  %></td>
-      </tr>
-    <% end %>
-  </tbody>
-</table>
 
-<p>
-  <%= link_to 'Create New Article', new_article_path %>
-</p>

app/views/articles/new.html.erb

@@ -1,3 +1,2 @@
-<h1>Create new Article</h1>
- <%= render 'form' %>
- <%= link_to 'Return to Articles Listing Page', articles_path %>
+<h1 class="text-center mt-4">Create new Article</h1>
+ <%= render 'form' %>

app/views/articles/show.html.erb

@@ -1,10 +1,25 @@
-<h1>Article Details</h1>
+<h2 class="text-center mt-4"><%= @article.title %></h2>
 
-<p><strong>Title:</strong><%= @article.title %></p>
-<p><strong>Description:</strong><%= @article.description %></p>
-<%= link_to 'Edit', edit_article_path(@article) %> |
-<%= link_to 'Delete', article_path(@article), data: {
-  turbo_method: :delete,
-  turbo_confirm: "Are you sure?"
-} %> |
-<%= link_to 'Return to Articles Listing Page', articles_path %>
+<div class="container">
+    <div class="row justify-content-md-center">
+      <div class="col-8 mt-4">
+      <div class="card text-center shadow mb-5 bg-body rounded">
+          <div class="card-header fst-italic">
+            by Gladwin Ramantso
+          </div>
+          <div class="card-body">
+            <div class="card-text text-start fw-normal"><%= simple_format(@article.description) %></div>
+              <%= link_to 'Edit', edit_article_path(@article) , class: "btn btn-outline-info" %>
+              <%= link_to 'Delete', article_path(@article), class: "btn btn-outline-danger" , data: {
+                  turbo_method: :delete,
+                  turbo_confirm: "Are you sure?"
+                }  %>
+          </div>
+          <div class="card-footer text-muted">
+            <small> Created <%= time_ago_in_words(@article.created_at) %> ago, 
+            Edited <%= time_ago_in_words(@article.updated_at) %> ago</small>
+          </div>
+        </div>
+      </div>
+    </div>
+</div>

app/views/layouts/_footer.html.erb

@@ -0,0 +1,5 @@
+<footer id="sticky-footer" class="py-4 bg-dark text-white">
+  <div class="container text-center">
+    <small>Copyright &copy; <%= link_to "Gladwin Ramantso", "https://github.com/tsheporamantso", class: "text-light text-decoration-none" %></small>
+  </div>
+</footer>

app/views/layouts/_message.html.erb

@@ -0,0 +1,8 @@
+<div class="container">
+  <% flash.each do |name, msg| %>
+    <div class="alert alert-success alert-dismissible fade show " role="alert">
+      <%= msg %>
+      <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
+    </div>
+  <% end %>
+</div>

app/views/layouts/_navigation.html.erb

@@ -0,0 +1,33 @@
+<nav class="navbar navbar-expand-lg bg-body-tertiary">
+  <div class="container-fluid"> 
+    <%= link_to 'Alpha Chat', root_path, class: 'navbar-brand', id: 'logo' %>
+    <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" href="#">Link</a>
+        </li>
+        <li class="nav-item dropdown">
+          <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
+            Articles
+          </a>
+          <ul class="dropdown-menu">
+            <li><%= link_to 'Create new article', new_article_path, class: "dropdown-item" %></li>
+            <li><%= link_to 'View articles', articles_path, class: "dropdown-item" %></li>
+            <li><hr class="dropdown-divider"></li>
+            <li><a class="dropdown-item" href="#">Something else here</a></li>
+          </ul>
+        </li>
+        <li class="nav-item">
+          <a class="nav-link disabled" aria-disabled="true">Disabled</a>
+        </li>
+      </ul>
+      <form class="d-flex" role="search">
+        <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
+        <button class="btn btn-outline-success" type="submit">Search</button>
+      </form>
+    </div>
+  </div>
+</nav>

app/views/layouts/application.html.erb

@@ -10,10 +10,12 @@
     <%= javascript_importmap_tags %>
   </head>
 
-  <body>
-    <% flash.each do |name, msg| %>
-      <%= msg %>
-      <% end %>
-    <%= yield %>
+  <body class="d-flex flex-column">
+    <%= render 'layouts/navigation' %>
+    <div id="page-content">
+      <%= render 'layouts/message' %>
+      <%= yield %>
+    </div>
+    <%= render 'layouts/footer' %>
   </body>
 </html>

app/views/pages/about.html.erb

@@ -1,2 +1,3 @@
 <h1>Welcome to the About Page</h1>
-<%= link_to 'Home Page', root_path %> |
+<%= link_to 'Home Page', root_path %> |
+<%= link_to 'Articles Listing Page', articles_path %>

app/views/pages/home.html.erb

@@ -1,2 +1,9 @@
-<h1>Welcome to the Home Page</h1>
-<%= link_to "About Page", about_path %> |
+<div class="container" id="home-container" >
+  <div class="jumbotron rounded text-center text-white" id="text">
+    <h1 class="display-4">Alpha Chat</h1>
+    <p class="lead">This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.</p>
+    <hr class="my-4">
+    <p>It uses utility classes for typography and spacing to space content out within the larger container.</p>
+    <a class="btn btn-success btn-lg" href="#" role="button">#!</a>
+  </div>
+</div>