gabehf/ecp.org
1
0
Fork 0
mirror of https://github.com/edcommonwealth/ecp.org.git synced 2026-03-07 21:48:13 -08:00
Code Issues Projects Releases Packages Wiki Activity Actions

Switch to grid so the items lay out next to each other.

Browse source
This commit is contained in:
rebuilt 2023-03-14 14:15:47 -07:00
parent 9b45b88a79
commit aeb619b84e
3 changed files with 24 additions and 23 deletions
Download patch file Download diff file Expand all files Collapse all files

6
app/assets/images/guage.svg
View file

@ -1,6 +1,6 @@
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="200"
height="200"
zoomAndPan="magnify" viewBox="0 0 700 576" preserveAspectRatio="xMidYMid meet"
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100"
height="100"
zoomAndPan="magnify" viewBox="0 0 760 600" preserveAspectRatio="xMidYMid meet"
version="1.0">
<defs>
<clipPath id="a17a27a323">

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 6.2 KiB

After

Width:  |  Height:  |  Size: 6.2 KiB

Before After
Before After

11
app/assets/stylesheets/partials/_layout.scss
View file

@ -1,8 +1,15 @@
.grid-container {
display: grid;
}
.grid-container-400 {
grid-template-columns: repeat(auto-fit, minmax(min(400px, 100%), 1fr));
}
.grid-container-200 {
grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr));
}
.grid-item {
padding: 20px;
grid-auto-flow: column;
@ -50,7 +57,3 @@
@extend .col-lg-7;
@extend .col-xl-5;
}
.grid-container {
display: grid;
}

22
app/views/home/index.html.erb
View file

@ -18,24 +18,22 @@
<section class="bg-image children" ></section>
<section class="row bg-primary text-white py-7 justify-content-center ">
<div class="col col-sm-10 col-md-8 col-lg-7 col-xl-5">
<div class="row justify-content-center align-items-center">
<div class="dynamic-content py-5">
<%= link_to sqm_index_path, class: "row text-white text-decoration-none" do %>
<div class="grid-container grid-container-200 dynamic-content">
<%= link_to sqm_index_path, class: "grid-item text-white text-decoration-none" do %>
<div class="row justify-content-center">
<%= image_tag "guage.svg", size: "100x100" %>
<h2 class="fs-5 mt-4 mb-3 text-decoration-underline">School Quality Measures</h2>
<h2 class="fs-5 mt-5 mb-3 text-decoration-underline">School Quality Measures</h2>
<p>Stakeholders identify what is most important to know about school quality. Multiple measures provide a robust picture of school strengths and areas for improvement.</p>
<% end %>
</div>
<div class="dynamic-content py-5">
<%= link_to sqm_index_path, class: "row text-white text-decoration-none" do %>
<% end %>
<%= link_to sqm_index_path, class: "grid-item text-white text-decoration-none" do %>
<div class="row justify-content-center">
<%= image_tag "portfolio.svg", size: "100x100" %>
<h2 class="fs-5 mt-4 mb-3 text-decoration-underline">Performance Assessments</h2>
<h2 class="fs-5 mt-5 mb-3 text-decoration-underline">Performance Assessments</h2>
<p>Teachers lead the design of curriculum-embedded performance assessments and the scoring of student work. Students demonstrate what they know and can do through real-world application.</p>
</div>
<% end %>
</div>
</div>
</div>
</section>
</div>