Commit 76a319b3 authored by Benthe Kuijpers's avatar Benthe Kuijpers
Browse files

news archive + resources archive

parent afed6773
{
"key": "group_6040ee146e02d",
"title": "Resources",
"fields": [
{
"key": "field_6040ee627df83",
"label": "Label",
"name": "label",
"type": "text",
"instructions": "",
"required": 0,
"conditional_logic": 0,
"wrapper": {
"width": "",
"class": "",
"id": ""
},
"default_value": "",
"placeholder": "D1.1",
"prepend": "",
"append": "",
"maxlength": ""
},
{
"key": "field_6040ee1b7df80",
"label": "Type",
"name": "type",
"type": "radio",
"instructions": "",
"required": 0,
"conditional_logic": 0,
"wrapper": {
"width": "",
"class": "",
"id": ""
},
"choices": {
"url": "URL",
"file": "File"
},
"allow_null": 0,
"other_choice": 0,
"default_value": "",
"layout": "vertical",
"return_format": "value",
"save_other_choice": 0
},
{
"key": "field_6040ee307df81",
"label": "Upload file",
"name": "file",
"type": "file",
"instructions": "",
"required": 0,
"conditional_logic": [
[
{
"field": "field_6040ee1b7df80",
"operator": "==",
"value": "file"
}
]
],
"wrapper": {
"width": "",
"class": "",
"id": ""
},
"return_format": "url",
"library": "all",
"min_size": "",
"max_size": 64,
"mime_types": ""
},
{
"key": "field_6040ee5a7df82",
"label": "URL",
"name": "url",
"type": "url",
"instructions": "",
"required": 0,
"conditional_logic": [
[
{
"field": "field_6040ee1b7df80",
"operator": "==",
"value": "url"
}
]
],
"wrapper": {
"width": "",
"class": "",
"id": ""
},
"default_value": "",
"placeholder": ""
}
],
"location": [
[
{
"param": "post_type",
"operator": "==",
"value": "resources"
}
]
],
"menu_order": 0,
"position": "normal",
"style": "default",
"label_placement": "top",
"instruction_placement": "label",
"hide_on_screen": "",
"active": true,
"description": "",
"modified": 1614868081
}
\ No newline at end of file
<?php get_header();
$post_type_obj = get_post_type_object( $post_type ); ?>
<main id="primary" class="site-main">
<div class="container container--small">
<div class="page-header">
<h1>
<?php echo lcfirst($post_type_obj->labels->name); ?>
</h1>
</div>
<?php
$filters = get_terms( array(
'taxonomy' => 'resource-types',
'hide_empty' => false,
) );
$filter_colours = array(
'#06C770',
'#F2E1B6',
'#B383FF',
'#65C4EA',
'#FF6C8F'
);
if (!empty($filters)) { ?>
<div class="archive__filters">
<span><?php _e('filter', 'makeitopen'); ?></span>
<div class="filter-button" data-filter="*"><?php _e('all', 'makeitopen'); ?></div>
<?php
$filter_array = array();
foreach ($filters as $key=>$filter) {
$colour = $filter_colours[$key];
$filter_array[$key] = array($filter->name, $filter->slug, $colour);
}
foreach ($filter_array as $filter) { ?>
<div class="filter-button" data-filter=".<?php echo $filter[1]; ?>" style="background:<?php echo $filter[2]; ?>">
<?php echo lcfirst($filter[0]); ?>
</div>
<?php } ?>
</div>
<?php } ?>
<div class="archive__no-results">
<h4><?php _e('No results found', 'makeitopen'); ?></h4>
<a href="javascript:window.location.reload();" class="text-link"><?php _e('Reset filters', 'makeitopen'); ?></a>
</div>
<div class="list">
<?php
$query = new WP_query(array(
'post_type' => $post_type_obj->name,
'posts_per_page' => -1
));
if( $query->have_posts() ) :
while( $query->have_posts() ) : $query->the_post();
$filterclass = '';
$filters = get_the_terms( get_the_ID(), 'resource-types' );
if (!empty($filters)) {
foreach ($filters as $filter) {
$filterclass .= ' ' . $filter->slug;
}
} ?>
<div class="list__item <?php echo $filterclass; ?>">
<a href="<?php the_permalink(); ?>">
<?php
if (!empty($filters)) {
foreach($filters as $filter) {
$filter_key = array_search($filter->slug, array_column($filter_array, 1));
$colour = $filter_array[$filter_key][2];
echo '<span class="label" style="background:' . $colour . '">' . lcfirst($filter->name) . '</span>';
}
} ?>
<h2><?php the_title(); ?></h2>
<p><?php echo excerpt(get_the_excerpt(), 100); ?></p>
</a>
</div>
<?php endwhile;
endif; ?>
</div>
</div>
</main><!-- #main -->
<?php get_footer(); ?>
......@@ -38,7 +38,7 @@ function browserSyncReload(done) {
function javascript() {
return (
gulp.src(['./js/*.js', '!./js/*.min.js'])
gulp.src(['./js/global.js'])
.pipe(plumber())
.pipe(jshint())
.pipe(jshint())
......
(function($) {
$(document).ready(function () {
/* Header functions
--------------------------------------------------------- */
// header scrolling class
// 1. Header scrolling class
$(window).scroll(function (event) {
var scroll = $(window).scrollTop();
if (scroll > 200) {
......@@ -11,14 +14,14 @@
}
});
// hamburger menu
// 2. Hamburger menu
$('.js-toggle-hamburger').click(function() {
$(this).toggleClass('hamburger--active');
$('.site-header').toggleClass('site-header--nav-active');
$('.navigation').toggleClass('navigation--shown');
});
// add white spans to letters below the baseline (to avoid overlapping the coloured bars)
// 3. Add white spans to letters below the baseline (to avoid overlapping the coloured bars)
function descenderSpan(elem) {
var descenders = {"g": true, "j": true, "p": true, "q": true, "y": true};
var textNodes = elem.html().split('');
......@@ -36,8 +39,29 @@
descenderSpan($(this));
});
// add little arrow behind Open Schooling Navigator link
// 4. Add little arrow behind Open Schooling Navigator link
$('.menu-item.osn a').append('<span class="arrow">↗</span>');
/* Archive functions
--------------------------------------------------------- */
// 1. Filter button
$('.archive__filters').on( 'click', '.filter-button', function() {
var button = $(this);
var filter = button.attr('data-filter');
button.parent().addClass('archive__filters--active');
$('.filter-button').removeClass('filter-button--active');
button.addClass('filter-button--active');
$('.archive__no-results').hide();
$('.list').isotope({ filter: filter });
if (!$('.list').data('isotope').filteredItems.length ) {
$('.archive__no-results').show();
}
});
});
})(jQuery);
\ No newline at end of file
jQuery(function($){
$('.js-load-more').click(function(){
var button = $(this);
var data = {
'action': 'loadmore',
'query': mio_loadmore_params.posts,
'page' : mio_loadmore_params.current_page
};
$.ajax({
url : mio_loadmore_params.ajaxurl,
data : data,
type : 'POST',
beforeSend : function ( xhr ) {
button.addClass('btn--loading').text('loading..');
},
success : function( data ){
if( data ) {
button.parent().prev().append(data);
button.removeClass('btn--loading').text('load more news');
mio_loadmore_params.current_page++;
if ( mio_loadmore_params.current_page == mio_loadmore_params.max_page ) {
button.remove();
}
} else {
button.remove();
}
}
});
});
});
\ No newline at end of file
!function(e){e(document).ready(function(){function s(e){var s={g:!0,j:!0,p:!0,q:!0,y:!0},n=e.html().split("");for(i=0,i=0;i<n.length;i+=1)s[n[i]]&&(n[i]='<span class="descender descender--'+n[i]+'">'+n[i]+"</span>");e.html(n.join(""))}e(window).scroll(function(i){e(window).scrollTop()>200?e(".site-header").addClass("site-header--scrolling"):e(".site-header").removeClass("site-header--scrolling")}),e(".js-toggle-hamburger").click(function(){e(this).toggleClass("hamburger--active"),e(".site-header").toggleClass("site-header--nav-active"),e(".navigation").toggleClass("navigation--shown")}),e(".menu-item a").each(function(){s(e(this))}),e(".menu-item.osn a").append('<span class="arrow">↗</span>')})}(jQuery);
\ No newline at end of file
!function(e){e(document).ready(function(){function t(e){var t={g:!0,j:!0,p:!0,q:!0,y:!0},s=e.html().split("");for(i=0,i=0;i<s.length;i+=1)t[s[i]]&&(s[i]='<span class="descender descender--'+s[i]+'">'+s[i]+"</span>");e.html(s.join(""))}e(window).scroll(function(t){e(window).scrollTop()>200?e(".site-header").addClass("site-header--scrolling"):e(".site-header").removeClass("site-header--scrolling")}),e(".js-toggle-hamburger").click(function(){e(this).toggleClass("hamburger--active"),e(".site-header").toggleClass("site-header--nav-active"),e(".navigation").toggleClass("navigation--shown")}),e(".menu-item a").each(function(){t(e(this))}),e(".menu-item.osn a").append('<span class="arrow">↗</span>'),e(".archive__filters").on("click",".filter-button",function(){var t=e(this),i=t.attr("data-filter");t.parent().addClass("archive__filters--active"),e(".filter-button").removeClass("filter-button--active"),t.addClass("filter-button--active"),e(".archive__no-results").hide(),e(".list").isotope({filter:i}),e(".list").data("isotope").filteredItems.length||e(".archive__no-results").show()})})}(jQuery);
\ No newline at end of file
......@@ -9,8 +9,8 @@
z-index: -1;
content: "";
position: absolute;
top: 0;
left: 0;
top: 2px;
left: 2px;
width: 100%;
height: 100%;
mix-blend-mode: multiply;
......@@ -20,7 +20,6 @@
}
@mixin colouredBar($color1, $color2) {
margin-bottom: 50px;
position: relative;
display: inline-block;
......
......@@ -3,6 +3,11 @@ h1, h2, h3, h4, h5, h6 {
font-weight: bold;
}
h1 {
font-size: 44px;
line-height: 38px;
}
h2 {
font-size: 36px;
line-height: 36px;
......
......@@ -16,14 +16,14 @@ $purple: #6217C5;
$bg-purple: #B383FF;
// Breakpoints
$xsmall: 320px;
$small: 360px;
$medium: 768px;
$large: 1024px;
$xlarge: 1200px;
$smallmedium: 640px;
$medium: 960px;
$mediumlarge: 1024px;
$large: 1400px;
// Sizes
$container-width: 1200px;
$container-width: 1100px;
$container-width-small: 800px;
$mobile-header-height: 80px;
$desktop-header-height: 80px;
......
a.btn {
a.btn, .btn, .text-link {
color: white;
font-weight: bold;
font-family: $font-header;
......@@ -6,11 +6,13 @@ a.btn {
background: $blue;
padding: 10px 20px;
position: relative;
cursor: pointer;
margin: 0;
display: inline-block;
mix-blend-mode: multiply;
font-size: 18px;
@include colourBg($bg-red, 2deg);
transition: all 0.25s ease-out;
&:after {
margin-left: 5px;
......@@ -24,4 +26,36 @@ a.btn {
transform: translateX(2px);
}
}
&--down {
&:after {
content: "\2193";
}
&:hover:after {
transform: translateY(2px);
}
}
&--red {
background: $red;
@include colourBg($bg-yellow, 2deg);
}
&--loading {
background: $bg-yellow;
}
}
.text-link {
background: none;
padding: 10px 0;
color: black;
&:before {
display: none;
}
}
.load-more {
margin: 50px 0 100px;
}
\ No newline at end of file
.label {
background: $red;
box-shadow: 2px 2px 0 $bg-yellow;
color: white;
font-family: $font-header;
padding: 0 10px;
display: inline-block;
font-weight: bold;
font-size: 16px;
line-height: 26px;
}
\ No newline at end of file
.news-teaser {
.img-wrapper {
line-height: 0;
display: block;
@include colourBg($green, 2deg);
}
&:nth-child(odd) .img-wrapper {
@include colourBg($green, -1deg);
box-shadow: 3px 3px 0 $bg-yellow;
}
a {
text-decoration: none;
.label {
margin: 15px 0;
}
h2 {
margin: 10px 0;
font-size: 20px;
margin: 0 0 10px;
font-size: 28px;
line-height: 30px;
@media only screen and (min-width: $large) {
font-size: 32px;
line-height: 36px;
}
}
.category {
font-style: italic;
font-weight: 300;
}
.excerpt {
display: none;
@media only screen and (min-width: $medium) {
display: block;
margin: 20px 0;
font-size: 20px;
line-height: 32px;
}
}
}
}
\ No newline at end of file
@import "buttons";
@import "events-teaser";
@import "news-teaser";
\ No newline at end of file
@import "news-teaser";
@import "label";
\ No newline at end of file
......@@ -15,6 +15,7 @@ body {
max-width: $container-width;
margin: auto;
padding: 0 20px;
overflow: hidden;
@media only screen and (min-width: $large) {
padding: 0 40px;
......@@ -30,6 +31,16 @@ body {
}
}
.page-header {
text-align: center;
padding: 100px 0;
h1 {
margin: 0;
@include colouredBar($red, $bg-yellow);
}
}
.flex-wrapper {
display: flex;
flex-wrap: wrap;
......
......@@ -14,7 +14,7 @@
flex: 0 0 100%;
&:first-child {
// margin: 0 0 50px;
margin: 0 0 50px;
@include colouredBar($yellow, $bg-yellow);
}
......@@ -68,6 +68,7 @@
}
&__europe {
justify-content: center;
align-items: flex-start;
}
......
......@@ -12,17 +12,13 @@
box-shadow: 0px 0px 10px rgba(0,0,0,0.1);
transition: all 0.25s ease;
@media only screen and (min-width: $large) {
@media only screen and (min-width: $medium) {
padding: 9px;
}
body.admin-bar & {
top: 45px;
&--scrolling {
top: 0;
}
@media only screen and (min-width: $medium) {
top: 32px;
}
......@@ -31,12 +27,12 @@
&--scrolling {
padding: 0 10px;