Added fontawesome and fix issue with bootstrap

dalvarez2596 · Oct 1, 2024 · 69b7676 · 69b7676
1 parent 4b4831b
commit 69b7676
Show file tree

Hide file tree

Showing 5 changed files with 81 additions and 6 deletions.
diff --git a/Gemfile b/Gemfile
@@ -25,9 +25,11 @@ gem "jbuilder"
 # Use Active Model has_secure_password [https://guides.rubyonrails.org/active_model_basics.html#securepassword]
 # gem "bcrypt", "~> 3.1.7"
 
-gem "bootstrap", "~> 5.3.3"
+gem "bootstrap", "~> 5.3", ">= 5.3.3"
 
-gem "dartsass-sprockets"
+gem "dartsass-sprockets", "~> 3.1"
+
+gem "font-awesome-sass", "~> 6.5", ">= 6.5.2"
 
 # Windows does not include zoneinfo files, so bundle the tzinfo-data gem
 gem "tzinfo-data", platforms: %i[ windows jruby ]

diff --git a/Gemfile.lock b/Gemfile.lock
@@ -112,6 +112,18 @@ GEM
     drb (2.2.1)
     erubi (1.13.0)
     execjs (2.9.1)
+    ffi (1.17.0-aarch64-linux-gnu)
+    ffi (1.17.0-aarch64-linux-musl)
+    ffi (1.17.0-arm-linux-gnu)
+    ffi (1.17.0-arm-linux-musl)
+    ffi (1.17.0-arm64-darwin)
+    ffi (1.17.0-x86-linux-gnu)
+    ffi (1.17.0-x86-linux-musl)
+    ffi (1.17.0-x86_64-darwin)
+    ffi (1.17.0-x86_64-linux-gnu)
+    ffi (1.17.0-x86_64-linux-musl)
+    font-awesome-sass (6.5.2)
+      sassc (~> 2.0)
     globalid (1.2.1)
       activesupport (>= 6.1)
     google-protobuf (4.28.2)
@@ -272,16 +284,26 @@ GEM
     rubyzip (2.3.2)
     sass-embedded (1.79.4-aarch64-linux-gnu)
       google-protobuf (~> 4.27)
+    sass-embedded (1.79.4-aarch64-linux-musl)
+      google-protobuf (~> 4.27)
     sass-embedded (1.79.4-arm-linux-gnueabihf)
       google-protobuf (~> 4.27)
+    sass-embedded (1.79.4-arm-linux-musleabihf)
+      google-protobuf (~> 4.27)
     sass-embedded (1.79.4-arm64-darwin)
       google-protobuf (~> 4.27)
     sass-embedded (1.79.4-x86-linux-gnu)
       google-protobuf (~> 4.27)
+    sass-embedded (1.79.4-x86-linux-musl)
+      google-protobuf (~> 4.27)
     sass-embedded (1.79.4-x86_64-darwin)
       google-protobuf (~> 4.27)
     sass-embedded (1.79.4-x86_64-linux-gnu)
       google-protobuf (~> 4.27)
+    sass-embedded (1.79.4-x86_64-linux-musl)
+      google-protobuf (~> 4.27)
+    sassc (2.4.0)
+      ffi (~> 1.9)
     sassc-embedded (1.79.0)
       sass-embedded (~> 1.79)
     securerandom (0.3.1)
@@ -327,19 +349,30 @@ GEM
 
 PLATFORMS
   aarch64-linux
+  aarch64-linux-gnu
+  aarch64-linux-musl
   arm-linux
+  arm-linux-gnu
+  arm-linux-gnueabihf
+  arm-linux-musl
+  arm-linux-musleabihf
   arm64-darwin
   x86-linux
+  x86-linux-gnu
+  x86-linux-musl
   x86_64-darwin
   x86_64-linux
+  x86_64-linux-gnu
+  x86_64-linux-musl
 
 DEPENDENCIES
   bootsnap
-  bootstrap (~> 5.3.3)
+  bootstrap (~> 5.3, >= 5.3.3)
   brakeman
   capybara
-  dartsass-sprockets
+  dartsass-sprockets (~> 3.1)
   debug
+  font-awesome-sass (~> 6.5, >= 6.5.2)
   importmap-rails
   jbuilder
   pg (~> 1.1)

diff --git a/app/assets/stylesheets/application.scss b/app/assets/stylesheets/application.scss
@@ -12,3 +12,4 @@
  *
  */
  @import "bootstrap";
+ @import "font-awesome";
diff --git a/app/javascript/application.js b/app/javascript/application.js
@@ -1,5 +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-sprockets"
+import "@popperjs/core"
+import "bootstrap"
diff --git a/app/views/static_pages/landing_page.html.erb b/app/views/static_pages/landing_page.html.erb
@@ -1,2 +1,41 @@
+<nav class="navbar navbar-expand-lg bg-body-tertiary">
+  <div class="container-fluid">
+    <a class="navbar-brand" href="#">Navbar</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 active" aria-current="page" href="#">Home</a>
+        </li>
+        <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">
+            Dropdown
+          </a>
+          <ul class="dropdown-menu">
+            <li><a class="dropdown-item" href="#">Action</a></li>
+            <li><a class="dropdown-item" href="#">Another action</a></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>
 <h1>Hello World!</h1>
 <%= link_to "Privacy Policy", privacy_policy_path %>
+<i class="fa-brands fa-font-awesome"></i>
+<i class="fa-solid fa-user-secret"></i>
+<i class="fa-regular fa-bell"></i>
-Original file line number
+Diff line change
@@ Expand Up / @@ -12,3 +12,4 @@ @@
      *
      */
      @import "bootstrap";
+     @import "font-awesome";