feat(Home): add sort by name or random button
fix(Header): fix href div box for home link
This commit is contained in:
parent
ea1906618d
commit
975ed6ee5d
7 changed files with 159 additions and 36 deletions
|
|
@ -1,3 +1,14 @@
|
|||
/**
|
||||
* Utils
|
||||
*/
|
||||
function createEl(className = false, elName = "div") {
|
||||
let el = document.createElement(elName);
|
||||
if (className != false) {
|
||||
el.className = className;
|
||||
}
|
||||
return el;
|
||||
}
|
||||
|
||||
/**
|
||||
* Nav management
|
||||
*/
|
||||
|
|
@ -9,9 +20,10 @@ let navEnabler = document.getElementById('nav-enabler');
|
|||
let navEnablerText = document.getElementById('nav-enabler-text');
|
||||
let navEnablerIcon = document.getElementById('nav-enabler-icon');
|
||||
let navContent = document.getElementById('nav-content');
|
||||
let navAll = document.getElementById('nav-all')
|
||||
|
||||
let mosaic = document.getElementById('mosaic');
|
||||
let mosaicHeader = document.getElementById('mosaic-header');
|
||||
let mosaicCount = document.getElementById('mosaic-count');
|
||||
let tags = []
|
||||
|
||||
let navEnablerExists = false
|
||||
|
|
@ -36,17 +48,65 @@ navEnabler.onclick = async () => {
|
|||
navOpened = !navOpened
|
||||
}
|
||||
|
||||
function createEl(className = false, elName = "div") {
|
||||
let el = document.createElement(elName);
|
||||
if (className != false) {
|
||||
el.className = className;
|
||||
|
||||
/**
|
||||
* Content rendering
|
||||
*/
|
||||
|
||||
/**
|
||||
* Shuffle organization
|
||||
*/
|
||||
function shuffle(array) {
|
||||
var currentIndex = array.length, temporaryValue, randomIndex
|
||||
while (0 !== currentIndex) {
|
||||
randomIndex = Math.floor(Math.random() * currentIndex)
|
||||
currentIndex -= 1
|
||||
|
||||
temporaryValue = array[currentIndex]
|
||||
array[currentIndex] = array[randomIndex]
|
||||
array[randomIndex] = temporaryValue
|
||||
}
|
||||
return el;
|
||||
|
||||
return array
|
||||
}
|
||||
|
||||
/**
|
||||
* Render
|
||||
* Filter & Sort actions
|
||||
*/
|
||||
const randomBtn = document.getElementById('random-btn')
|
||||
const sortBtn = document.getElementById('sort-btn')
|
||||
|
||||
// by default we render the cards with the random behaviour
|
||||
let sort = false
|
||||
organizations = shuffle(organizations)
|
||||
|
||||
// the user want to sort randomly
|
||||
randomBtn.onclick = () => {
|
||||
if (sort) {
|
||||
organizations = shuffle(organizations)
|
||||
enableTag(currentTag)
|
||||
sort = false
|
||||
randomBtn.classList.add('enabled')
|
||||
sortBtn.classList.remove('enabled')
|
||||
}
|
||||
}
|
||||
|
||||
// the user want to sort by name
|
||||
sortBtn.onclick = () => {
|
||||
if (!sort) {
|
||||
// sort by name
|
||||
organizations = organizations.sort((a, b) => {
|
||||
var textA = a.name.toUpperCase()
|
||||
var textB = b.name.toUpperCase()
|
||||
return (textA < textB) ? -1 : (textA > textB) ? 1 : 0;
|
||||
})
|
||||
enableTag(currentTag)
|
||||
sort = true
|
||||
sortBtn.classList.add('enabled')
|
||||
randomBtn.classList.remove('enabled')
|
||||
}
|
||||
}
|
||||
|
||||
function renderNavItem(tag) {
|
||||
/*
|
||||
<div class="nav-item">
|
||||
|
|
@ -160,32 +220,33 @@ function renderCard(organization) {
|
|||
let currentTag = null
|
||||
let currentCardContainer = null
|
||||
|
||||
function enableTag(node) {
|
||||
function enableTag(node, sortOperation = false) {
|
||||
|
||||
let all = node.id === 'nav-all'
|
||||
let tagId = ""
|
||||
let tagId = ''
|
||||
|
||||
if (!all) {
|
||||
tagId = node.attributes['data-tag-id'].value
|
||||
}
|
||||
let data = organizations
|
||||
.filter(orga => orga.tags.filter(id => id === tagId).length > 0 || all)
|
||||
.sort((a, b) => {
|
||||
var textA = a.name.toUpperCase()
|
||||
var textB = b.name.toUpperCase()
|
||||
return (textA < textB) ? -1 : (textA > textB) ? 1 : 0;
|
||||
})
|
||||
|
||||
renderMosaic(data)
|
||||
|
||||
node.className += ' enabled'
|
||||
if (currentTag !== null) {
|
||||
currentTag.className = currentTag.className.replace('enabled', '')
|
||||
}
|
||||
currentTag = node
|
||||
|
||||
if (!sortOperation) {
|
||||
|
||||
if (data === undefined || data === null || data.length <= 0) {
|
||||
mosaicHeader.textContent = "Aucune association listée"
|
||||
mosaicCount.textContent = "Aucune association listée"
|
||||
} else if (data.length === 1) {
|
||||
mosaicHeader.textContent = "Une association listée"
|
||||
mosaicCount.textContent = "Une association listée"
|
||||
} else {
|
||||
mosaicHeader.textContent = data.length + " associations listées"
|
||||
mosaicCount.textContent = data.length + " associations listées"
|
||||
}
|
||||
|
||||
// close the menu if on mobile
|
||||
|
|
@ -198,6 +259,7 @@ function enableTag(node) {
|
|||
document.getElementsByClassName('content')[0].scrollIntoView(true)
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/***
|
||||
|
|
@ -306,5 +368,5 @@ window.addEventListener('DOMContentLoaded', () => {
|
|||
iconHTML: node.querySelector('.nav-icon').innerHTML
|
||||
})
|
||||
})
|
||||
enableTag(document.getElementById('nav-all'))
|
||||
enableTag(navAll)
|
||||
})
|
||||
|
|
|
|||
|
|
@ -40,6 +40,11 @@
|
|||
width: 7em;
|
||||
}
|
||||
|
||||
.header-home-link {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.header-content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
|
@ -174,11 +179,48 @@ Nav
|
|||
|
||||
.mosaic-header {
|
||||
width: 100%;
|
||||
opacity: 0.8;
|
||||
text-align: right;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 1.5em;
|
||||
}
|
||||
|
||||
.mosaic-actions {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.mosaic-action {
|
||||
cursor: pointer;
|
||||
border: 0;
|
||||
background-color: transparent;
|
||||
padding: .75em .75em;
|
||||
color: #2c3e50;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
border-radius: 2px;
|
||||
margin-right: .5em;
|
||||
border: 1px solid #7f8c8d;
|
||||
transition: all .2s;
|
||||
}
|
||||
|
||||
.mosaic-action:hover {
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
.mosaic-action .btn-icon {
|
||||
width: 1em;
|
||||
}
|
||||
|
||||
.mosaic-action.enabled {
|
||||
background-color: #ecf0f1;
|
||||
color:#d35400;
|
||||
}
|
||||
|
||||
.mosaic-count {
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
.card-container {
|
||||
margin: 0 auto;
|
||||
width: 85%;
|
||||
|
|
@ -316,6 +358,9 @@ Nav
|
|||
.header-content {
|
||||
padding: 0;
|
||||
}
|
||||
.header-home-link {
|
||||
margin-bottom: .25em;
|
||||
}
|
||||
.header-image {
|
||||
margin: 0;
|
||||
text-align: center;
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
|
|
@ -1 +1 @@
|
|||
.header{padding-bottom:1.5em;padding-top:1.5em;background-color:#d35400}.header-container{position:relative;display:flex;justify-content:space-between}.header-left{display:flex}.header-menu{position:absolute;right:0;bottom:0;display:flex;align-items:flex-end}.header-menu a{color:#fff;margin-right:1em}.header-menu a:last-of-type{margin-right:0}.header-image{margin-right:3em}.header-image img{width:7em}.header-content{display:flex;flex-direction:column;justify-content:space-between;padding-top:1em;padding-bottom:1em}.header-title{font-family:'Roboto Slab',serif;margin:0;color:#fff;font-weight:500;font-size:2.5em}.header-sub-title{margin:0;text-decoration:underline;font-weight:100;color:#ecf0f1;transition:opacity .2s}.header-sub-title:hover{opacity:.9;color:#ecf0f1}.header-description{color:#ecf0f1}.content{padding-top:1.5em;display:flex}.nav{margin-right:2em}.nav-item{width:15em;padding:1em;border-radius:4px;margin-bottom:.7em;border:3px solid rgba(255,111,10,.7);display:flex;cursor:pointer;transition:ease-in-out .1s;height:1.2em}.nav-item svg{width:.75em;height:.75em}.nav-icon{width:1em;display:flex;justify-content:center;align-items:center;color:#c28200;font-size:1.5em;margin-left:.25em;opacity:.7}.nav-item-content{margin-left:1em;display:flex;justify-content:space-between;width:100%}.nav-title{display:flex;align-items:center;opacity:.7}.nav-access{display:flex;align-items:center;color:#ff6f0a;opacity:.7}.nav-item.enabled{border-color:#ff6f0a}.nav-item.enabled .nav-access{opacity:1}.nav-item.enabled .nav-icon{opacity:1}.nav-item.enabled .nav-title{opacity:1}.nav-item:hover{transform:scale(1.05)}#nav-enabler{display:none}#nav-content{position:sticky;top:10px}.mosaic{background:#fff;width:100%;padding-bottom:.25em;flex-grow:1}.mosaic-header{width:100%;opacity:.8;text-align:right;margin-bottom:1.5em}.card-container{margin:0 auto;width:85%}.card{cursor:pointer;display:flex;border:1px solid #bdc3c7;border-radius:4px;margin-bottom:1em;box-shadow:0 0 8px 0 rgba(0,0,0,.1);overflow:hidden;text-decoration:none;transition:transform .2s ease-in-out}.card:hover{text-decoration:none}.card-image-container{border-right:1px solid #c4c4c4;display:flex;justify-content:center;align-items:center;padding:1em}.card-image{height:12em;width:12em;background-position:center;background-size:cover;transition:all .2s ease-in-out;border:0;outline:0;box-shadow:0}.card-image:hover{transform:scale(1.1)}.card-content{width:100%;padding:1.5em;display:flex;flex-direction:column;justify-content:space-between}.card-title-container{display:flex;justify-content:space-between}.card-icon{color:#c28200;opacity:.85;margin-top:-.5em;margin-right:-.5em;font-size:1.4em}.card-icon svg{width:1em;height:1em}.card-title{color:#b12008;margin:0;margin-bottom:.5em;padding-right:1em}.card-description{color:#34495e;margin:0;line-height:1.6em;overflow-wrap:break-word;word-wrap:break-word;-ms-word-break:break-word;word-break:break-word}.card-description::first-letter{text-transform:capitalize}@media (max-width:1350px){.card-container{width:100%}.header-left{padding-bottom:1em}}@media (max-width:1000px){.header{padding-top:1em;padding-bottom:1em}.header-container{display:block}.header-left{display:block}.header-menu{justify-content:center;position:relative;margin-top:0}.header-content{padding:0}.header-image{margin:0;text-align:center}.header-image img{width:6em}.header-sub-title{margin-top:1em;text-align:center}.header-title{text-align:center;margin-bottom:.25em}.header-description{text-align:center}.content{display:block;padding-top:1em}.nav{margin-right:0;user-select:none}#nav-enabler{display:flex}#nav-enabler-icon{transform:rotate(-90deg)}#nav-content{overflow:hidden;max-height:0;transition:max-height .1s ease-out}.nav-item{width:auto}.nav-item:hover{transform:scale(1)}.nav-mobile-enabler #nav-enabler-icon{transition:all .1s ease}.mosaic{position:relative;border-top:1px solid #c4c4c4;padding-top:1em;margin-top:.3em}.mosaic-header{text-align:center;margin-bottom:1em}.card{display:block}.card-image-container{padding:0;margin:0;border-right:0;border-bottom:1px solid #c4c4c4;overflow:hidden}.card-content{width:auto}}
|
||||
.header{padding-bottom:1.5em;padding-top:1.5em;background-color:#d35400}.header-container{position:relative;display:flex;justify-content:space-between}.header-left{display:flex}.header-menu{position:absolute;right:0;bottom:0;display:flex;align-items:flex-end}.header-menu a{color:#fff;margin-right:1em}.header-menu a:last-of-type{margin-right:0}.header-image{margin-right:3em}.header-image img{width:7em}.header-home-link{display:flex;justify-content:center}.header-content{display:flex;flex-direction:column;justify-content:space-between;padding-top:1em;padding-bottom:1em}.header-title{font-family:'Roboto Slab',serif;margin:0;color:#fff;font-weight:500;font-size:2.5em}.header-sub-title{margin:0;text-decoration:underline;font-weight:100;color:#ecf0f1;transition:opacity .2s}.header-sub-title:hover{opacity:.9;color:#ecf0f1}.header-description{color:#ecf0f1}.content{padding-top:1.5em;display:flex;padding-bottom:1em}.nav{margin-right:2em}.nav-item{width:15em;padding:1em;border-radius:4px;margin-bottom:.7em;border:3px solid rgba(255,111,10,.7);display:flex;cursor:pointer;transition:ease-in-out .1s;height:1.2em}.nav-item svg{width:.75em;height:.75em}.nav-icon{width:1em;display:flex;justify-content:center;align-items:center;color:#c28200;font-size:1.5em;margin-left:.25em;opacity:.7}.nav-item-content{margin-left:1em;display:flex;justify-content:space-between;width:100%}.nav-title{display:flex;align-items:center;opacity:.7}.nav-access{display:flex;align-items:center;color:#ff6f0a;opacity:.7}.nav-item.enabled{border-color:#ff6f0a}.nav-item.enabled .nav-access{opacity:1}.nav-item.enabled .nav-icon{opacity:1}.nav-item.enabled .nav-title{opacity:1}.nav-item:hover{transform:scale(1.05)}#nav-enabler{display:none}#nav-content{position:sticky;top:10px}.mosaic{background:#fff;width:100%;padding-bottom:.25em;flex-grow:1}.mosaic-header{width:100%;display:flex;justify-content:space-between;align-items:center;margin-bottom:1.5em}.mosaic-actions{display:flex}.mosaic-action{cursor:pointer;border:0;background-color:transparent;padding:.75em .75em;color:#2c3e50;display:flex;justify-content:center;align-items:center;border-radius:2px;margin-right:.5em;border:1px solid #7f8c8d;transition:all .2s}.mosaic-action:hover{opacity:.8}.mosaic-action .btn-icon{width:1em}.mosaic-action.enabled{background-color:#ecf0f1;color:#d35400}.mosaic-count{opacity:.8}.card-container{margin:0 auto;width:85%}.card{cursor:pointer;display:flex;border:1px solid #bdc3c7;border-radius:4px;margin-bottom:1em;box-shadow:0 0 8px 0 rgba(0,0,0,.1);overflow:hidden;text-decoration:none;transition:transform .2s ease-in-out}.card:hover{text-decoration:none}.card-image-container{border-right:1px solid #c4c4c4;display:flex;justify-content:center;align-items:center;padding:1em}.card-image{height:12em;width:12em;background-position:center;background-size:cover;transition:all .2s ease-in-out;border:0;outline:0;box-shadow:0}.card-image:hover{transform:scale(1.1)}.card-content{width:100%;padding:1.5em;display:flex;flex-direction:column;justify-content:space-between}.card-title-container{display:flex;justify-content:space-between}.card-icon{color:#c28200;opacity:.85;margin-top:-.5em;margin-right:-.5em;font-size:1.4em}.card-icon svg{width:1em;height:1em}.card-title{color:#b12008;margin:0;margin-bottom:.5em;padding-right:1em}.card-description{color:#34495e;margin:0;line-height:1.6em;overflow-wrap:break-word;word-wrap:break-word;-ms-word-break:break-word;word-break:break-word}.card-description::first-letter{text-transform:capitalize}@media (max-width:1350px){.card-container{width:100%}.header-left{padding-bottom:1em}}@media (max-width:1000px){.header{padding-top:1em;padding-bottom:1em}.header-container{display:block}.header-left{display:block}.header-menu{justify-content:center;position:relative;margin-top:0}.header-content{padding:0}.header-home-link{margin-bottom:.25em}.header-image{margin:0;text-align:center}.header-image img{width:6em}.header-sub-title{margin-top:1em;text-align:center}.header-title{text-align:center;margin-bottom:.25em}.header-description{text-align:center}.content{display:block;padding-top:1em}.nav{margin-right:0;user-select:none}#nav-enabler{display:flex}#nav-enabler-icon{transform:rotate(-90deg)}#nav-content{overflow:hidden;max-height:0;transition:max-height .1s ease-out}.nav-item{width:auto}.nav-item:hover{transform:scale(1)}.nav-mobile-enabler #nav-enabler-icon{transition:all .1s ease}.mosaic{position:relative;border-top:1px solid #c4c4c4;padding-top:1em;margin-top:.3em}.mosaic-header{text-align:center;margin-bottom:1em}.card{display:block}.card-image-container{padding:0;margin:0;border-right:0;border-bottom:1px solid #c4c4c4;overflow:hidden}.card-content{width:auto}}
|
||||
File diff suppressed because one or more lines are too long
|
|
@ -29,7 +29,7 @@ Github: https://github.com/lefuturiste
|
|||
<div class="container header-container">
|
||||
<div class="header-left">
|
||||
<div class="header-image">
|
||||
<a href="/">
|
||||
<a class="header-home-link" href="/">
|
||||
<img src="/static/imgs/espace_condorcet_logo.jpg" alt="Logo de l'Espace Condorcet Centre Social" />
|
||||
</a>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -73,7 +73,23 @@
|
|||
</div>
|
||||
</div>
|
||||
<div class="mosaic" id="mosaic">
|
||||
<div class="mosaic-header" id="mosaic-header"></div>
|
||||
<div class="mosaic-header">
|
||||
<div class="mosaic-actions">
|
||||
<button
|
||||
id="sort-btn"
|
||||
title="Trier par ordre alphabétique"
|
||||
class="mosaic-action sort-action">
|
||||
<svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="sort-alpha-down" class="btn-icon svg-inline--fa fa-sort-alpha-down fa-w-14" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path fill="currentColor" d="M176 352h-48V48a16 16 0 0 0-16-16H80a16 16 0 0 0-16 16v304H16c-14.19 0-21.36 17.24-11.29 27.31l80 96a16 16 0 0 0 22.62 0l80-96C197.35 369.26 190.22 352 176 352zm240-64H288a16 16 0 0 0-16 16v32a16 16 0 0 0 16 16h56l-61.26 70.45A32 32 0 0 0 272 446.37V464a16 16 0 0 0 16 16h128a16 16 0 0 0 16-16v-32a16 16 0 0 0-16-16h-56l61.26-70.45A32 32 0 0 0 432 321.63V304a16 16 0 0 0-16-16zm31.06-85.38l-59.27-160A16 16 0 0 0 372.72 32h-41.44a16 16 0 0 0-15.07 10.62l-59.27 160A16 16 0 0 0 272 224h24.83a16 16 0 0 0 15.23-11.08l4.42-12.92h71l4.41 12.92A16 16 0 0 0 407.16 224H432a16 16 0 0 0 15.06-21.38zM335.61 144L352 96l16.39 48z"></path></svg>
|
||||
</button>
|
||||
<button
|
||||
id="random-btn"
|
||||
title="Trier aléatoirement"
|
||||
class="mosaic-action random-action enabled">
|
||||
<svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="random" class="btn-icon svg-inline--fa fa-random fa-w-16" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="currentColor" d="M504.971 359.029c9.373 9.373 9.373 24.569 0 33.941l-80 79.984c-15.01 15.01-40.971 4.49-40.971-16.971V416h-58.785a12.004 12.004 0 0 1-8.773-3.812l-70.556-75.596 53.333-57.143L352 336h32v-39.981c0-21.438 25.943-31.998 40.971-16.971l80 79.981zM12 176h84l52.781 56.551 53.333-57.143-70.556-75.596A11.999 11.999 0 0 0 122.785 96H12c-6.627 0-12 5.373-12 12v56c0 6.627 5.373 12 12 12zm372 0v39.984c0 21.46 25.961 31.98 40.971 16.971l80-79.984c9.373-9.373 9.373-24.569 0-33.941l-80-79.981C409.943 24.021 384 34.582 384 56.019V96h-58.785a12.004 12.004 0 0 0-8.773 3.812L96 336H12c-6.627 0-12 5.373-12 12v56c0 6.627 5.373 12 12 12h110.785c3.326 0 6.503-1.381 8.773-3.812L352 176h32z"></path></svg>
|
||||
</button>
|
||||
</div>
|
||||
<div class="mosaic-count" id="mosaic-count"></div>
|
||||
</div>
|
||||
<div class="card-container"></div>
|
||||
</div>
|
||||
{% endblock %}
|
||||
|
|
|
|||
Loading…
Reference in a new issue