First, my setup:
- MX-linux os v.21
- Ruby V. 3.2.1
- Rails V.7.0.4
- Bootstrap V.5.2.3
Second, I am working on a clone for instagram, I’ve added gems for :
-
gem “devise”
-
gem “bootstrap”
-
gem “jquery-rails”
-
gem “sass-rails”
-
gem “turbolinks”
-
gem “erb-formatter”
-
gem “font-awesome-sass”, “~> 6.3.0”
-
gem “toastr-rails”
Third : code snippets 1- application.js
// Configure your import map in config/importmap.rb. Read more: https://github.com/rails/importmap-rails
import "@hotwired/turbo-rails"
import "controllers"
import "./add_jquery"
import "jquery"
import "jquery_ujs"
import "popper"
import "bootstrap"
//= require rails-ujs
//= require turbolinks
//= require jquery
//= require jquery_ujs
//= require popper
//= require bootstrap.min
//= require bootstrap-sprockets
//= require_tree
//= require toastr
2- application.css.scss
@import "bootstrap";
@import "font-awesome";
@import "toastr";
//= require jquery
//= require jquery_ujs
//= require bootstrap-sprockets
//= require turbolinks
//= require_tree .
3- _alerts.html.erb
<div class="container text-center">
<div class="row">
<div class="col-9">
</div>
<div class="col-3">
<p class="notice alert alert-success alert-dismissible fade show" role="alert"><%= notice %></p>
</div>
</div>
</div>
4- application.html.erb
<!DOCTYPE html>
<html lang="en">
<head>
<title>Instagram</title>
<meta name="viewport" content="width=device-width,initial-scale=1">
<%= csrf_meta_tags %>
<%= csp_meta_tag %>
<%= stylesheet_link_tag "application",
media: "all",
"data-turbolinks-track": "reload" %>
<%= javascript_include_tag "application", "data-turbolinks-track": "reload" %>
</head>
<body>
<%= render "/shared/header" if current_user %>
<%= render "/shared/alerts" %>
<%= yield %>
<%= render "/shared/footer" %>
<%# flash message instead of typical alerts by using toastr.js : %>
<% if flash.any? %>
<script type="text/javascript" >
<% flash.each do |k, v| %>
<% type = k.to_s.gsub("alert", "error").gsub("notice", "success") %>
toastr.<%= type %>("<%= v %>")
<% end %>
</script>
<%# end of flash message %>
<% end %>
</body>
</html>
5- dummy phone
<div class="dummy-phone">
<div class="screen-shot">
<div
class="carousel carousel-fade"
data-bs-ride="carousel"
id="carouselExampleSlidesOnly"
>
<div class="carousel-inner">
<div class="carousel-item active">
<%= image_tag "screenshot1.jpg", height: "427", width: "240", alt: "photo_no_1" %>
</div>
<div class="carousel-item">
<%= image_tag "screenshot2.jpg", height: "427", width: "240", alt: "photo_no_2" %>
</div>
<div class="carousel-item">
<%= image_tag "screenshot3.jpg", height: "427", width: "240", alt: "photo_no_3" %>
</div>
<div class="carousel-item">
<%= image_tag "screenshot4.jpg", height: "427", width: "240", alt: "photo_no_4" %>
</div>
<div class="carousel-item">
<%= image_tag "screenshot5.jpg", height: "427", width: "240", alt: "photo_no_5" %>
</div>
</div>
</div>
</div>
</div>
now, I have two problems, first with carousel is not working, just fixed image, second, I added toastr.js to replace the devise standard alerts, but it’s not working either.
6- devise/sessions/new.html.erb
<div class="container">
<div class="row">
<div class="col-lg-6 landing-left">
<%= render "devise/shared/dummy_phone" %>
</div>
<div class="col-lg-6 landing-right text-center d-flex align-items-center">
<div>
<div class="form-login box">
<h3 class="core-sprite brand-name-img"></h3>
<%= form_for(resource, as: resource_name, url: session_path(resource_name)) do |f| %>
<div class="form-group">
<%= f.email_field :email, autofocus: true, placeholder: "Email", class: "form-control" %>
</div>
<br/>
<div class="form-group">
<%= f.password_field :password, autocomplete: "off", placeholder: "Password", class: "form-control" %>
</div>
<br/>
<% if devise_mapping.rememberable? -%>
<div class="form-check">
<%= f.check_box :remember_me, class: "form-check-input", id: "check-box-one" %>
<%= f.label :remember_me, class: "form-check-label" %>
</div>
<% end -%>
<br/>
<div class="actions">
<%= f.submit "Log in", class: "btn btn-primary" %>
</div>
<br>
<% end %>
</div>
<div class="redirect-links box">
<%= render "devise/shared/links" %>
</div>
</div>
</div>
</div>
</div>
can you please help me? thanks in advance