Merge pull request #39 from JuzerShakir/semantic-html

Semantic HTML
JuzerShakir · Feb 8, 2024 · 98f5ed8 · 98f5ed8
2 parents 1a917f8 + f5a45e2
commit 98f5ed8
Show file tree

Hide file tree

Showing 72 changed files with 535 additions and 498 deletions.
diff --git a/app/assets/stylesheets/_components.scss b/app/assets/stylesheets/_components.scss
@@ -10,11 +10,15 @@
 
 	&:hover {
 		background-position: right center;
-		color: white; /* change the direction of the change here */
+		color: white;
 		text-decoration: none;
 	}
 }
 
+header > h2 {
+	margin: 7rem 0 3rem 0;
+}
+
 // styles defined here will take precedence over the in-line styles defined
 .default-btn {
 	@extend .col-7;
@@ -26,11 +30,11 @@
 }
 
 mark {
-	padding: 0 !important;
-	color: $success !important;
-	background-color: $lighter !important;
+	padding: 0;
+	color: $success;
+	background-color: $lighter;
 }
 
-#contact ul {
-	margin-left: -3.5rem !important;
+#contact menu {
+	margin-left: -3.5rem;
 }
diff --git a/app/assets/stylesheets/abstracts/_variables.scss b/app/assets/stylesheets/abstracts/_variables.scss
@@ -7,3 +7,6 @@ $input-focus-border-color: $secondary;
 $input-border-width: 2px;
 $form-check-input-checked-bg-color: $success;
 $form-check-input-checked-border-color: $success;
+
+// * Table defaults
+$table-bg: $secondary;
diff --git a/app/assets/stylesheets/application.bootstrap.scss b/app/assets/stylesheets/application.bootstrap.scss
@@ -11,7 +11,6 @@
 @import "bootstrap/scss/bootstrap";
 // base
 @import "base/base";
-@import "base/utilities";
 @import "base/animations";
 // layouts
 @import "layouts/flash";

diff --git a/app/assets/stylesheets/base/_base.scss b/app/assets/stylesheets/base/_base.scss
@@ -3,26 +3,3 @@ body {
 	background-size: cover;
 	background-attachment: fixed;
 }
-
-input[type="search"] {
-	&::-webkit-search-decoration,
-	&::-webkit-search-cancel-button,
-	&::-webkit-search-results-button,
-	&::-webkit-search-results-decoration {
-		display: none;
-	}
-}
-
-.form-control {
-	&::-moz-placeholder {
-		opacity: 0.85;
-	}
-
-	&:-ms-input-placeholder {
-		opacity: 0.85;
-	}
-
-	&::-webkit-input-placeholder {
-		opacity: 0.85;
-	}
-}
diff --git a/app/assets/stylesheets/base/_typography.scss b/app/assets/stylesheets/base/_typography.scss
@@ -14,5 +14,5 @@ $font-weight-base: 300;
 }
 
 .fs-bigger {
-	font-size: 15dvh !important;
+	font-size: 15dvh;
 }
diff --git a/app/assets/stylesheets/base/_utilities.scss b/app/assets/stylesheets/base/_utilities.scss
diff --git a/app/assets/stylesheets/layouts/_form.scss b/app/assets/stylesheets/layouts/_form.scss
@@ -1,3 +1,19 @@
+.form-control {
+	&::placeholder {
+		opacity: 0.8;
+	}
+
+	/* Fallback for older browsers (IE) */
+	&:-ms-input-placeholder {
+		opacity: 0.8;
+	}
+}
+
 #form-login {
-	height: 70dvh !important;
+	height: 70dvh;
+}
+
+input[type="date"]::-webkit-calendar-picker-indicator {
+	background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" height="1rem" viewBox="0 0 24 24"><path fill="%2353900f" d="M20 3h-1V1h-2v2H7V1H5v2H4c-1.1 0-2 .9-2 2v16c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 18H4V8h16v13z"/></svg>');
+	cursor: pointer;
 }
diff --git a/app/assets/stylesheets/layouts/_search.scss b/app/assets/stylesheets/layouts/_search.scss
@@ -1,29 +1,35 @@
-#search {
-	input {
-		padding: 0.75rem 1.5rem;
+input[type="search"] {
+	&::-webkit-search-decoration,
+	&::-webkit-search-cancel-button,
+	&::-webkit-search-results-button,
+	&::-webkit-search-results-decoration {
+		display: none;
+	}
 
-		background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='1em' fill='%23a4a71e' viewBox='0 0 512 512'%3E%3Cpath d='M416 208c0 45.9-14.9 88.3-40 122.7L502.6 457.4c12.5 12.5 12.5 32.8 0 45.3s-32.8 12.5-45.3 0L330.7 376c-34.4 25.2-76.8 40-122.7 40C93.1 416 0 322.9 0 208S93.1 0 208 0S416 93.1 416 208zM208 352a144 144 0 1 0 0-288 144 144 0 1 0 0 288z'/%3E%3C/svg%3E");
-		background-repeat: no-repeat;
-		background-size: 18px 18px;
-		background-position: 94% center;
+	padding: 0.75rem 1.5rem;
 
-		background-color: transparent;
-		backface-visibility: hidden;
+	background-image: url('data:image/svg+xml;utf-8,<svg xmlns="http://www.w3.org/2000/svg" height="1em" viewBox="0 0 512 512"><path fill="%23a4a71e" d="M416 208c0 45.9-14.9 88.3-40 122.7L502.6 457.4c12.5 12.5 12.5 32.8 0 45.3s-32.8 12.5-45.3 0L330.7 376c-34.4 25.2-76.8 40-122.7 40C93.1 416 0 322.9 0 208S93.1 0 208 0S416 93.1 416 208zM208 352a144 144 0 1 0 0-288 144 144 0 1 0 0 288z"/></svg>');
+	background-repeat: no-repeat;
+	background-size: 18px 18px;
+	background-position: 94% center;
 
-		border-radius: 2rem;
-		transform-style: preserve-3d;
-		transition: all 300ms ease-in-out;
+	background-color: transparent;
+	backface-visibility: hidden;
 
-		&:hover,
-		&:focus {
-			background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='1em' fill='%2353900f' viewBox='0 0 512 512'%3E%3Cpath d='M416 208c0 45.9-14.9 88.3-40 122.7L502.6 457.4c12.5 12.5 12.5 32.8 0 45.3s-32.8 12.5-45.3 0L330.7 376c-34.4 25.2-76.8 40-122.7 40C93.1 416 0 322.9 0 208S93.1 0 208 0S416 93.1 416 208zM208 352a144 144 0 1 0 0-288 144 144 0 1 0 0 288z'/%3E%3C/svg%3E");
-			padding: 0.75rem 0.5rem;
-			outline: 0;
-			border: 2px solid transparent;
-			border-bottom: 2px solid $input-focus-border-color;
-			border-radius: 0;
-			box-shadow: none;
-			background-position: 98% center;
-		}
+	border-radius: 2rem;
+	transform-style: preserve-3d;
+	transition: all 300ms ease-in-out;
+
+	&:hover,
+	&:focus {
+		background-image: url('data:image/svg+xml;utf-8,<svg xmlns="http://www.w3.org/2000/svg" height="1em" viewBox="0 0 512 512"><path fill="%2353900f" d="M416 208c0 45.9-14.9 88.3-40 122.7L502.6 457.4c12.5 12.5 12.5 32.8 0 45.3s-32.8 12.5-45.3 0L330.7 376c-34.4 25.2-76.8 40-122.7 40C93.1 416 0 322.9 0 208S93.1 0 208 0S416 93.1 416 208zM208 352a144 144 0 1 0 0-288 144 144 0 1 0 0 288z"/></svg>');
+		padding: 0.75rem 0.5rem;
+		outline: 0;
+		border: 2px solid transparent;
+		border-bottom: 2px solid $input-focus-border-color;
+		border-radius: 0;
+		box-shadow: none;
+		background-position: 98% center;
+		background-color: transparent;
 	}
 }
diff --git a/app/assets/stylesheets/layouts/_show.scss b/app/assets/stylesheets/layouts/_show.scss
@@ -19,7 +19,7 @@
 		width: 5.5rem;
 		height: 9px;
 		margin: auto;
-		margin-top: 5rem !important;
+		margin-top: 4rem;
 		top: -25px;
 		position: relative;
 

diff --git a/app/views/errors/internal_server.html.erb b/app/views/errors/internal_server.html.erb
@@ -1,5 +1,5 @@
-<div class="m-0 position-absolute top-50 start-50 translate-middle">
-  <p class="heading fs-bigger text-danger">500</p>
+<section class="m-0 position-absolute top-50 start-50 translate-middle">
+  <h1 class="heading fs-bigger text-danger">500</h1>
 
-  <p class="fs-3 fst-italic text-danger-emphasis">The server encountered an unexpected error!</p>
-</div>
+  <em class="fs-3 text-danger-emphasis">The server encountered an unexpected error!</em>
+</section>
diff --git a/app/views/errors/not_found.html.erb b/app/views/errors/not_found.html.erb
@@ -1,5 +1,5 @@
-<div class="m-0 position-absolute top-50 start-50 translate-middle">
+<section class="m-0 position-absolute top-50 start-50 translate-middle">
   <h1 class="heading fs-bigger text-danger">404</h1>
 
-  <p class="fs-3 fst-italic text-danger-emphasis">The page you're looking for doesn't exist!</p>
-</div>
+  <em class="fs-3 text-danger-emphasis">The page you're looking for doesn't exist!</em>
+</section>
diff --git a/app/views/layouts/application.html.erb b/app/views/layouts/application.html.erb
@@ -1,7 +1,8 @@
 <!DOCTYPE html>
-<html>
+<html lang="en">
   <head>
-    <title><%= content_for(:title) || "FMB" %></title>
+    <title><%= content_for :title || "FMB" %></title>
+    <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width,initial-scale=1">
     <%= csrf_meta_tags %>
     <%= csp_meta_tag %>
@@ -12,9 +13,16 @@
   </head>
 
   <body onselectstart="return false">
-    <%= render "shared/navbar/navbar" if current_user.present? %>
     <%= render "shared/flash_messages" if flash.present? %>
 
+    <% if current_user.present? %>
+      <header class="heading">
+        <%= render "shared/navbar/navbar" %>
+
+        <%= content_for :heading %>
+      </header>
+    <% end %>
+
     <main class="<%= (action_name == "home") ? "" : "container mt-3" %>">
       <%= yield %>
     </main>

diff --git a/app/views/pages/home.html.erb b/app/views/pages/home.html.erb
@@ -1,12 +1,13 @@
-<div id="home">
-  <div id="home__header" class="text-center">
+<section id="home">
+  <header id="home__header" class="text-center">
     <%= image_tag("logos/fmb.png", alt: "FMB logo", id: "home__header-logo") %>
-  </div>
-
-  <div id="home__body">
-    <h5 id="home__body_primary-heading" class="heading text-start text-uppercase text-primary">Thaali tracking, simplified</h5>
-    <h2 id="home__body_secondary-heading" class="heading text-start text-secondary">Manage your thaalis & transactions effortlessly with real-time statistics</h2>
+  </header>
 
+  <section id="home__body">
+    <hgroup>
+      <h5 id="home__body_primary-heading" class="heading text-start text-uppercase text-primary">Thaali tracking, simplified</h5>
+      <h2 id="home__body_secondary-heading" class="heading text-start text-secondary">Manage your thaalis & transactions effortlessly with real-time statistics</h2>
+    </hgroup>
     <%= link_to "Free demo", login_path, id: "home__body_cta", class: "btn rounded-pill border border-0 fs-4 px-5 py-2" %>
-  </div>
-</div>
+  </section>
+</section>
diff --git a/app/views/sabeels/_form.html.erb b/app/views/sabeels/_form.html.erb
@@ -1,4 +1,4 @@
-<div class="container col-xxl-8 col-sm-10 pt-4 p-5 bg-white bg-opacity-50 shadow-lg border border-2 border-success-subtle rounded-4 mb-5">
+<article class="container col-xxl-8 col-sm-10 pt-4 p-5 bg-white bg-opacity-50 shadow-lg border border-2 border-success-subtle rounded-4 mb-5">
   <%= simple_form_for @sabeel do |f| %>
     <%= f.error_notification %>
     <%= f.input :its %>
@@ -9,4 +9,4 @@
     <%= f.input :email %>
     <%= f.button :submit, action_name: %>
   <% end %>
-</div>
+</article>
diff --git a/app/views/sabeels/_sabeel.html.erb b/app/views/sabeels/_sabeel.html.erb
@@ -1,36 +1,37 @@
-<div id="sabeel" class="position-relative col-xxl-4 col-xl-5 col-lg-6 col-md-8 col-sm-10 rounded-4 shadow mx-auto mt-3 py-3 px-4 text-warning">
-  <div id="sabeel-its-logo" class="z-0 position-absolute"></div>
-  <div class="row pb-3">
-    <div class="col heading fs-2 text-secondary">
+<section id="sabeel" class="position-relative col-xxl-4 col-xl-5 col-lg-6 col-md-8 col-sm-10 rounded-4 shadow mx-auto py-3 px-4 text-warning">
+  <aside id="sabeel-its-logo" class="z-0 position-absolute"></aside>
+
+  <header class="row pb-3">
+    <h1 class="col heading fs-2 text-secondary">
       <%= @sabeel.its %>
-    </div>
-  </div>
+    </h1>
+  </header>
 
   <div class="row pb-3">
-    <div class="z-1 col text-truncate">
+    <strong class="z-1 col text-truncate">
       <% fa_gen(@sabeel.name, "fa-user", space: true) %>
-    </div>
+    </strong>
   </div>
 
   <div class="row pb-3">
-    <div class="col">
+    <address class="col mb-0">
       <% fa_gen(@sabeel.address, "fa-location-pin", space: true) %>
-    </div>
+    </address>
   </div>
 
   <div class="row pb-3 fst-italic">
-    <div class="col">
+    <span class="col">
       <i class="fa-solid fa-phone"></i>
       <%= phone_to @sabeel.mobile, class: "link-warning link-offset-2 link-underline-opacity-50 link-underline-opacity-100-hover" %>
-    </div>
+    </span>
   </div>
 
   <div class="row fst-italic">
-    <div class="col text-truncate">
+    <span class="col text-truncate">
       <i class="fa-solid fa-envelope"></i>
       <%= link_to_if @sabeel.email.present?, @sabeel.email, "mailto:#{@sabeel.email}", class: "link-warning link-offset-2 link-underline-opacity-50 link-underline-opacity-100-hover" do %>
-        <p class="d-inline-block fw-bold">No email address provided</p>
+        <span class="d-inline-block fw-bold">No email address provided</span>
       <% end %>
     </div>
   </div>
-</div>
+</section>
diff --git a/app/views/sabeels/_sabeels.html.erb b/app/views/sabeels/_sabeels.html.erb
@@ -1,10 +1,10 @@
 <% @sabeels.each do |sabeel| %>
   <%= link_to(sabeel, id: dom_id(sabeel), class: "row py-2 link-underline link-underline-opacity-0") do %>
-    <div class="col-7 col-md-6 text-truncate fw-medium">
+    <span class="col-7 col-md-6 text-truncate fw-medium">
       <%= highlight(sabeel.name, params.dig(:q, :slug_or_name_cont)) %>
-    </div>
-    <div class="col text-info">
+    </span>
+    <address class="col text-info mb-0">
       <%= sabeel.apartment.titleize %>
-    </div>
+    </address>
   <% end %>
 <% end %>
diff --git a/app/views/sabeels/_thaalis.html.erb b/app/views/sabeels/_thaalis.html.erb
@@ -1,27 +1,31 @@
-<div class="row py-2 fs-5 fw-semibold border-bottom-0 bg-secondary heading">
-  <div class="col">
-    <th>Year</th>
-  </div>
-  <div class="col">
-    <th>Total</th>
-  </div>
-  <div class="col">
-    <th>Balance</th>
-  </div>
-</div>
+<section id="thaalis" class="mt-5">
+  <p class="fw-bold text-center text-info">Total number of Thaalis: <em class="fst-normal"><%= @thaalis.size %></em></p>
 
-<div id="thaalis">
-  <% @thaalis.each do |thaali| %>
-    <%= link_to(thaali, id: "thaali_#{thaali.year}", class: "row py-2 link-underline link-underline-opacity-0") do %>
-      <div class="col fw-medium">
-        <%= thaali.year %>
-      </div>
-      <div class="col text-info fw-medium">
-        <%= add_rupees_symbol_to thaali.total %>
-      </div>
-      <div class="col <%= thaali.dues_cleared? ? "fw-bold text-success" : "text-danger" %>">
-        <%= add_rupees_symbol_to thaali.balance %>
-      </div>
-    <% end %>
-  <% end %>
-</div>
+  <section class="bg-white bg-opacity-75 border border-4 border-secondary rounded-4 text-center  mt-3 mb-5">
+    <table class="table mb-0">
+      <thead class="rounded-top-3 heading fs-5 py-2">
+        <tr>
+          <th class="col-4">Year</th>
+          <th class="col-4">Total</th>
+          <th class="col-4">Balance</th>
+        </tr>
+      </thead>
+    </table>
+
+    <div class="container">
+      <% @thaalis.each do |thaali| %>
+        <%= link_to(thaali, id: "thaali_#{thaali.year}", class: "row py-2 link-underline link-underline-opacity-0") do %>
+          <strong class="col fw-medium">
+            <%= thaali.year %>
+          </strong>
+          <em class="col text-info fw-medium fst-normal">
+            <%= add_rupees_symbol_to thaali.total %>
+          </em>
+          <strong class="col fw-bold  <%= thaali.dues_cleared? ? "text-success" : "text-danger" %>">
+            <%= add_rupees_symbol_to thaali.balance %>
+          </strong>
+        <% end %>
+      <% end %>
+    </div>
+  </section>
+</section>