chvp/entrance-exam
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Basic styling of sections page

Browse source
This commit is contained in:
Charlotte Van Petegem 2025-05-23 16:25:25 +02:00
parent 156caecb21
commit 7656f2a277
Signed by: chvp
SSH key fingerprint: SHA256:s9rb8jBVfdahqWHuBAcHCBP1wmj4eYQXZfqgz4H3E9E
9 changed files with 134 additions and 25 deletions
Download patch file Download diff file Expand all files Collapse all files

2
Gemfile
View file

@ -4,6 +4,8 @@ source "https://rubygems.org"
gem "rails", "~> 8.0.0"
# The modern asset pipeline for Rails [https://github.com/rails/propshaft]
gem "propshaft"
# Inline SGVs
gem "inline_svg"
# Use sqlite3 as the database for Active Record
gem "sqlite3", ">= 2.1"
# Use the Puma web server [https://github.com/puma/puma]

4
Gemfile.lock
View file

@ -113,6 +113,9 @@ GEM
activesupport (>= 6.1)
i18n (1.14.7)
concurrent-ruby (~> 1.0)
inline_svg (1.10.0)
activesupport (>= 3.0)
nokogiri (>= 1.6)
io-console (0.8.0)
irb (1.15.2)
pp (>= 0.6.0)
@ -263,6 +266,7 @@ DEPENDENCIES
capybara
cssbundling-rails
debug
inline_svg
jbuilder
jsbundling-rails
propshaft

16
app/assets/images/gent-blue.svg Normal file
View file

@ -0,0 +1,16 @@
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="82" height="57" viewBox="0 0 82 57">
<defs>
<path id="a" d="M76.546 57H5.454C2.46 57 0 54.603 0 51.658V5.363C0 2.417 2.459 0 5.454 0h71.092C79.54 0 82 2.417 82 5.363v46.295C82 54.603 79.541 57 76.546 57z"/>
</defs>
<g fill="none" fill-rule="evenodd">
<mask id="b" fill="#fff">
<use xlink:href="#a"/>
</mask>
<g fill="#009DE0" mask="url(#b)">
<path d="M0 0h82v57H0z"/>
</g>
<g fill="#FEFEFE">
<path d="M73.751 25.409a2.673 2.673 0 0 0-2.154 3.076c.255 1.446 1.635 2.44 3.082 2.184a2.687 2.687 0 0 0 2.18-3.111c-.25-1.416-1.631-2.41-3.108-2.15zm1.377-8.96a2.686 2.686 0 0 1-2.18 3.112c-1.446.256-2.827-.738-3.082-2.184-.25-1.415.708-2.82 2.155-3.076 1.476-.26 2.858.733 3.107 2.148zm-9.326 16.313c-3.39.566-5.454-1.068-6.095-4.7l-1.432-8.123-2.43.43-.543-3.077 2.43-.429-.629-3.57L61.381 12l.721 4.093 3.753-.662.113 3.152-3.324.586 1.417 8.03c.282 1.6.913 2.124 2.021 1.929.584-.103 1.138-.392 1.743-.911l2.001 2.535c-1.053 1.042-2.577 1.755-4.024 2.01zM53.958 22.096l2.094 11.877-4.369.77-1.964-11.137c-.33-1.878-1.1-2.28-2.207-2.086-1.262.223-2.1 1.227-2.737 2.831l1.985 11.26-4.369.771-2.875-16.307 3.785-.667.701 2c1.036-1.864 2.442-3.062 4.534-3.431 2.862-.504 4.88 1.042 5.422 4.12zm-20.857 5.868c-.434-2.462-1.547-3.915-3.64-3.546-1.722.303-2.593 1.663-2.266 4.777l5.938-1.047-.032-.184zm4.76 2.174l-10.183 1.795c.86 3.085 2.5 3.748 4.593 3.38 1.384-.245 2.477-.882 3.719-2.117l2.25 2.142c-1.372 1.574-3.24 2.855-5.794 3.306-5.231.921-8.577-2.042-9.477-7.15-.868-4.922 1.105-9.203 5.874-10.044 4.615-.814 7.896 1.78 8.813 6.98.098.554.155 1.241.206 1.708zm-27.404.58c.33 1.878 1.573 2.801 3.234 2.508 1.754-.309 2.492-1.518 2.14-3.518-.342-1.938-1.397-2.704-3.212-2.384-1.662.293-2.476 1.61-2.162 3.395zm5.907-5.006c2.156.54 3.389 1.592 3.752 3.653.56 3.169-1.587 5.926-5.741 6.66-.708.123-1.334.17-1.946.12-.326.31-.502.755-.425 1.186.097.554.466 1.028 2.066.746l2.493-.44c3.692-.65 6.408.9 6.886 3.607.58 3.293-1.929 5.797-7.375 6.757-5.969 1.053-7.941-.597-8.516-3.86l3.907-.688c.272 1.539 1.068 2.096 4.175 1.548 3.016-.532 3.67-1.503 3.463-2.672-.195-1.107-1.145-1.638-2.868-1.335l-2.4.423c-3.415.602-5.092-.624-5.395-2.348-.207-1.169.331-2.437 1.37-3.382-2.225-.75-3.341-2.044-3.71-4.136-.635-3.6 1.82-6.412 5.91-7.133 3.77-.57 5.51-1.861 7.284-3.315l1.668 3.163c-1.118.673-2.63 1.099-4.598 1.446z"/>
</g>
</g>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 2.5 KiB

58
app/assets/stylesheets/application.postcss.css
View file

@ -1,4 +1,40 @@
/* Entry point for your PostCSS build */
body {
font-family: "Fira Sans", sans-serif;
font-weight: 400;
font-size: 16px;
}
h4 {
font-size: 20px;
font-weight: 600;
}
.body-container {
max-width: 1024px;
margin: 1rem auto;
}
.container {
background-color: #e6f8ff;
padding: 6rem 4rem;
}
.title-card-grid {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: 3rem;
}
.title-card-container {
text-decoration: none;
align-self: stretch;
color: black;
background-color: white;
padding: 1rem;
}
.politicians-listing {
display: flex;
flex-direction: row;
@ -30,7 +66,7 @@
.connections-grid {
display: grid;
grid-template-columns: 25% 25% 25% 25%;
grid-template-columns: 1fr 1fr 1fr 1fr;
}
.connections-element {
@ -38,3 +74,23 @@
margin: 0.5em;
padding: 1em;
}
@media (max-width: 1024px) {
.body-container {
max-width: 768px;
}
.title-card-grid {
grid-template-columns: 1fr 1fr;
}
}
@media (max-width: 768px) {
.body-container {
max-width: 512px;
}
.title-card-grid {
grid-template-columns: 1fr;
}
}

44
app/views/layouts/application.html.erb
View file

@ -1,23 +1,35 @@
<!DOCTYPE html>
<html>
<head>
<title><%= content_for(:title) || "Entrance Exam" %></title>
<meta name="viewport" content="width=device-width,initial-scale=1">
<%= csrf_meta_tags %>
<%= csp_meta_tag %>
<head>
<title><%= content_for(:title) || "Entrance Exam" %></title>
<meta name="viewport" content="width=device-width,initial-scale=1">
<%= csrf_meta_tags %>
<%= csp_meta_tag %>
<%= yield :head %>
<%= yield :head %>
<link rel="icon" href="/icon.png" type="image/png">
<link rel="icon" href="/icon.svg" type="image/svg+xml">
<link rel="apple-touch-icon" href="/icon.png">
<link rel="icon" href="/icon.png" type="image/png">
<link rel="icon" href="/icon.svg" type="image/svg+xml">
<link rel="apple-touch-icon" href="/icon.png">
<%# Includes all stylesheet files in app/assets/stylesheets %>
<%= stylesheet_link_tag :app %>
<%= javascript_include_tag "application" %>
</head>
<%# Includes all stylesheet files in app/assets/stylesheets %>
<%= stylesheet_link_tag :app %>
<%= javascript_include_tag "application" %>
</head>
<body>
<%= yield %>
</body>
<body>
<div class="body-container">
<header>
<a href="<%= sections_url %>">
<%= inline_svg_tag("gent-blue.svg") %>
</a>
<%= content_for(:header) %>
</header>
<main>
<div class="container">
<%= yield %>
</div>
</main>
</div>
</body>
</html>

13
app/views/sections/index.html.erb
View file

@ -1,5 +1,8 @@
<% @sections.each do |section| %>
<p>
<%= link_to section.title, section_url(section) %>
</p>
<% end %>
<div class="title-card-grid">
<% @sections.each do |section| %>
<%= link_to(section_url(section), html_options = { class: 'title-card-container' }) do %>
<h4><%= section.title %></h4>
<p><%= section.description %></p>
<% end %>
<% end %>
</div>

7
app/views/sections/show.html.erb
View file

@ -1,6 +1,7 @@
<%= link_to sections_url do %>Home<% end %>
<% @sections.each do |section| %>
<%= link_to section.title, section_url(section) %>
<% content_for(:header) do %>
<% @sections.each do |section| %>
<%= link_to section.title, section_url(section) %>
<% end %>
<% end %>
<h4><%= @section.title %></h4>

4
config/initializers/assets.rb
View file

@ -3,5 +3,9 @@
# Version of your assets, change this if you want to expire all your assets.
Rails.application.config.assets.version = "1.0"
InlineSvg.configure do |config|
config.raise_on_file_not_found = true
end
# Add additional assets to the asset load path.
# Rails.application.config.assets.paths << Emoji.images_path

11
gemset.nix
View file

@ -370,6 +370,17 @@
};
version = "1.14.7";
};
inline_svg = {
dependencies = ["activesupport" "nokogiri"];
groups = ["default"];
platforms = [];
source = {
remotes = ["https://rubygems.org"];
sha256 = "03x1z55sh7cpb63g46cbd6135jmp13idcgqzqsnzinbg4cs2jrav";
type = "gem";
};
version = "1.10.0";
};
io-console = {
groups = ["default" "development" "test"];
platforms = [{