Skip to content

Commit

Permalink
use simple flexbox layout for project cards
Browse files Browse the repository at this point in the history
  • Loading branch information
willnorris committed Oct 22, 2021
1 parent 252d24f commit f8ff3d4
Show file tree
Hide file tree
Showing 3 changed files with 10 additions and 88 deletions.
37 changes: 7 additions & 30 deletions assets/css/projects.scss
Original file line number Diff line number Diff line change
Expand Up @@ -7,10 +7,16 @@
--search-bar-width: 450px;
}

.all-projects {
display: flex;
flex-wrap: wrap;
}
.project-card {
position: relative;
flex: 1 1;
padding: var(--feather-grid-mega) calc(var(--feather-grid-mega) * 1.5);
min-width: var(--project-card-min-width);
max-width: var(--project-card-max-width);
}

.border {
Expand Down Expand Up @@ -101,33 +107,4 @@ input:focus {

.no-results {
padding-top: var(--feather-grid-mega);
}

/* Media queries */

/* 2 columns */
@media (max-width: 1236px) {
.all-projects {
max-width: calc(var(--project-card-max-width) * 2);
margin: 0 auto;
}
}

/* 1 column */
@media (max-width: 850px) {
.all-projects {
padding-top: var(--feather-grid-large);
padding-bottom: calc(var(--feather-grid-mega) * 1.5);
max-width: var(--project-card-max-width);
}

.project-card {
min-width: 250px;
padding-left: var(--feather-grid-mega);
padding-right: var(--feather-grid-mega);
}

.project-card .Button {
right: var(--feather-grid-mega);
}
}
}
2 changes: 1 addition & 1 deletion layouts/_default/projects.html
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@ <h1 class="large-title">Projects</h1>
<div class="Grid container no-results-container"></div>

<!-- Projects grid (See renderProjects() in projects.js) -->
<div class="Grid container all-projects"></div>
<div class="container all-projects"></div>
<!-- End of all-projects -->

<script type="text/javascript">
Expand Down
59 changes: 2 additions & 57 deletions static/js/projects.js
Original file line number Diff line number Diff line change
Expand Up @@ -32,7 +32,7 @@ var renderProjects = function(projectsList, searchString="") {
for (var project of projectsList) {
// Div for each project
var projectDiv = document.createElement('div')
projectDiv.className = "Grid-cell u-size1of3 project-card"
projectDiv.className = "project-card"

// Project Name
var nameDiv = document.createElement('h1')
Expand Down Expand Up @@ -109,15 +109,6 @@ var renderProjects = function(projectsList, searchString="") {
var noResultContainer = document.getElementsByClassName("no-results-container")[0]
noResultContainer.appendChild(noResultDiv)
}
// Apply functions that determine how many columns
if (matchMedia) {
var mq3 = window.matchMedia("(min-width: 1236px)")
var mq2 = window.matchMedia("(max-width: 1236px) and (min-width: 850px)")
var mq1 = window.matchMedia("(max-width: 850px)")
threeColumn(mq3)
twoColumn(mq2)
oneColumn(mq1)
}
}

// Sort the projects
Expand Down Expand Up @@ -186,50 +177,4 @@ document.addEventListener('keyup', function(event) {
newProjectsList.push(item)
}
renderProjects(newProjectsList, searchString=searchBox.value)
})

/* Search implementation ends */

// Media queries for projects grid
if (matchMedia) {
var mediaQueryThreeColumn = window.matchMedia("(min-width: 1236px)")
threeColumn(mediaQueryThreeColumn)
mediaQueryThreeColumn.addListener(threeColumn)

var mediaQueryTwoColumn = window.matchMedia("(max-width: 1236px) and (min-width: 850px)")
twoColumn(mediaQueryTwoColumn)
mediaQueryTwoColumn.addListener(twoColumn)

var mediaQueryOneColumn = window.matchMedia("(max-width: 850px)")
oneColumn(mediaQueryOneColumn)
mediaQueryOneColumn.addListener(oneColumn)
}

// 3 columns
function threeColumn(mediaQuery) {
if (mediaQuery.matches) {
addClassByClass("project-card", "u-size1of3")
removeClassByClass("project-card", "u-size1of2")
} else {
removeClassByClass("project-card", "u-size1of3")
}
}

// 2 columns
function twoColumn(mediaQuery) {
if (mediaQuery.matches) {
addClassByClass("project-card", "u-size1of2")
removeClassByClass("project-card", "u-size1of3")
} else {
removeClassByClass("project-card", "u-size1of2")
}
}

// 1 column
function oneColumn(mediaQuery) {
if (mediaQuery.matches) {
removeClassByClass("project-card", "u-size1of3")
removeClassByClass("project-card", "u-size1of2")
}
}

})

0 comments on commit f8ff3d4

Please sign in to comment.