Skip to content

Instantly share code, notes, and snippets.

@LuceCarter

LuceCarter/application.css

Last active October 19, 2023 13:39
Show Gist options
  • Save LuceCarter/7e4d7c6ff2b4b5bd0958bdaeb01fc535 to your computer and use it in GitHub Desktop.
Save LuceCarter/7e4d7c6ff2b4b5bd0958bdaeb01fc535 to your computer and use it in GitHub Desktop.
Download ZIP
Companion code for Ruby on Rails and Atlas Application
Raw
application.css
footer { margin-top: 100px; }
table, td, th { vertical-align: middle; border: none; }
th { border-bottom: 1px solid #DDD; }
body { margin: 0; }
.navbar {
min-height: 38px;
background-color: #ECA72C;
}
.navbar-brand {
font-size: 24px;
color: #080357;
}
.navbar a.brand:hover {
color: #fff;
background-color: transparent;
text-decoration: none;
}
.container {
margin: auto ;
}
Raw
application.html.erb
<!DOCTYPE html>
<html>
<head>
<title>Inspiration</title>
<meta name="viewport" content="width=device-width,initial-scale=1">
<%= csrf_meta_tags %>
<%= csp_meta_tag %>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<%= stylesheet_link_tag "application", "data-turbo-track": "reload" %>
</head>
<nav class="navbar navbar-expand-lg navbar">
<div class="container">
<a class="navbar-brand" href="/ideas">The Idea App</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item">
<%= link_to 'New Idea', new_idea_path, class: "nav-link text-info" %>
</li>
</ul>
</div>
</div>
</nav>
<body>
<div class="container">
<%= yield %>
</div>
</body>
<footer>
<div class="container">
MongoDB Atlas and Ruby on Rails <%= Time.now.year %>
</div>
</footer>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
</html>
Raw
index.html.erb
<h1 class=>Listing ideas</h1>
<% @ideas.in_groups_of(3) do |group| %>
<div class="row text-center">
<% group.compact.each do |idea| %>
<div class="col-md-4 ">
<%= image_tag idea.picture, width: '50%' if idea.picture.present? %>
<h4><%= link_to idea.name, idea %></h4>
<%= idea.description %>
</div>
<% end %>
</div>
<% end %>
<%= link_to "New idea", new_idea_path %>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment