Adding lazy-load version of feed component to load data using AJAX after page content has been rendered.
This commit is contained in:
Jason Williams
@@ -1,23 +1,7 @@
|
||||
h1.master {
|
||||
margin: 0;
|
||||
font-family: var(--title-font);
|
||||
font-size: 3.5rem;
|
||||
word-spacing: -0.15em;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
|
||||
h1 + h2, h2:first-child {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
h3 {
|
||||
font-size: 1rem;
|
||||
color: var(--dark-alt-accent-color);
|
||||
}
|
||||
|
||||
section h1:first-child {
|
||||
margin-top: 0;
|
||||
}
|
||||
@@ -26,14 +10,6 @@ section + section {
|
||||
margin-top: 3rem;
|
||||
}
|
||||
|
||||
.main {
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
|
||||
.card {
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
.card ul {
|
||||
margin: 0;
|
||||
padding-left: 1rem;
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
/* Variables */
|
||||
:root {
|
||||
--main-bg-color: #E7D9D1; /*#F0E4D1; #E8D5B5; #e7d9d1;*/
|
||||
--main-accent-color: #302b44;
|
||||
--main-bg-color: #F2EDEA;
|
||||
--main-accent-color: #302B44;
|
||||
--light-accent-color: #686283;
|
||||
--xlight-accent-color: #88839C;
|
||||
--xxlight-accent-color: #FFFFFF;
|
||||
@@ -87,6 +87,22 @@ footer {
|
||||
}
|
||||
|
||||
/* Standard element styles */
|
||||
h1.master {
|
||||
margin: 0;
|
||||
font-family: var(--title-font);
|
||||
font-size: 3.5rem;
|
||||
word-spacing: -0.15em;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
|
||||
h3 {
|
||||
font-size: 1rem;
|
||||
color: var(--dark-alt-accent-color);
|
||||
}
|
||||
|
||||
a {
|
||||
color: var(--alt-accent-color);
|
||||
text-decoration: underline;
|
||||
@@ -98,6 +114,10 @@ a.icon-link {
|
||||
color: var(--accent-color);
|
||||
}
|
||||
|
||||
a.btn {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
a:hover {
|
||||
color: var(--dark-alt-accent-color);
|
||||
text-decoration: none;
|
||||
@@ -142,6 +162,18 @@ html::-webkit-scrollbar-thumb {
|
||||
color: var(--xxlight-accent-color);
|
||||
}
|
||||
|
||||
.main, .card p.main, .card ul.main {
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
|
||||
.col-container {
|
||||
margin: 0 -15px;
|
||||
}
|
||||
|
||||
.card {
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
.social-icons {
|
||||
font-size: 0;
|
||||
}
|
||||
@@ -177,6 +209,57 @@ html::-webkit-scrollbar-thumb {
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
.card .feedcard-footer p, .card .feedcard-footer a {
|
||||
margin-bottom: 0;
|
||||
font-size: 0.75rem;
|
||||
color: rgba(0, 0, 0, 0.5);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.card .feedcard-footer img {
|
||||
height: 0.75rem;
|
||||
}
|
||||
|
||||
.card .feedcard-footer .feedcard-itemtype {
|
||||
width: 33%;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.card .feedcard-footer .feedcard-attribution {
|
||||
width: 67%;
|
||||
}
|
||||
|
||||
.altaccent {
|
||||
color: var(--alt-accent-color);
|
||||
}
|
||||
}
|
||||
|
||||
/* Tag cloud styles */
|
||||
div.jqcloud {
|
||||
font-size: 0.5rem;
|
||||
line-height: normal;
|
||||
}
|
||||
|
||||
div.jqcloud a {
|
||||
color: inherit;
|
||||
font-size: inherit;
|
||||
text-decoration: none
|
||||
}
|
||||
|
||||
div.jqcloud a:hover {
|
||||
color: var(--dark-alt-accent-color);
|
||||
}
|
||||
|
||||
div.jqcloud span.w10 {font-size:550%; color: rgba(176, 92, 113, 1);}
|
||||
div.jqcloud span.w9 {font-size:500%; color: rgba(176, 92, 113, 0.95);}
|
||||
div.jqcloud span.w8 {font-size:450%; color: rgba(176, 92, 113, 0.9);}
|
||||
div.jqcloud span.w7 {font-size:400%; color: rgba(176, 92, 113, 0.85);}
|
||||
div.jqcloud span.w6 {font-size:350%; color: rgba(176, 92, 113, 0.8);}
|
||||
div.jqcloud span.w5 {font-size:300%; color: rgba(176, 92, 113, 0.75);}
|
||||
div.jqcloud span.w4 {font-size:250%; color: rgba(176, 92, 113, 0.7);}
|
||||
div.jqcloud span.w3 {font-size:200%; color: rgba(176, 92, 113, 0.65);}
|
||||
div.jqcloud span.w2 {font-size:150%; color: rgba(176, 92, 113, 0.6);}
|
||||
div.jqcloud span.w1 {font-size:100%; color: rgba(176, 92, 113, 0.55);}
|
||||
|
||||
div.jqcloud{overflow:hidden;position:relative}
|
||||
|
||||
div.jqcloud span{padding:0}
|
||||
1
www/themes/jason-williamsca/assets/images/loading.svg
Normal file
1
www/themes/jason-williamsca/assets/images/loading.svg
Normal file
@@ -0,0 +1 @@
|
||||
<?xml version="1.0" encoding="UTF-8" standalone="no"?><svg xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.0" width="160px" height="20px" viewBox="0 0 128 16" xml:space="preserve"><path fill="#a8a6b1" fill-opacity="0.42" d="M6.4,4.8A3.2,3.2,0,1,1,3.2,8,3.2,3.2,0,0,1,6.4,4.8Zm12.8,0A3.2,3.2,0,1,1,16,8,3.2,3.2,0,0,1,19.2,4.8ZM32,4.8A3.2,3.2,0,1,1,28.8,8,3.2,3.2,0,0,1,32,4.8Zm12.8,0A3.2,3.2,0,1,1,41.6,8,3.2,3.2,0,0,1,44.8,4.8Zm12.8,0A3.2,3.2,0,1,1,54.4,8,3.2,3.2,0,0,1,57.6,4.8Zm12.8,0A3.2,3.2,0,1,1,67.2,8,3.2,3.2,0,0,1,70.4,4.8Zm12.8,0A3.2,3.2,0,1,1,80,8,3.2,3.2,0,0,1,83.2,4.8ZM96,4.8A3.2,3.2,0,1,1,92.8,8,3.2,3.2,0,0,1,96,4.8Zm12.8,0A3.2,3.2,0,1,1,105.6,8,3.2,3.2,0,0,1,108.8,4.8Zm12.8,0A3.2,3.2,0,1,1,118.4,8,3.2,3.2,0,0,1,121.6,4.8Z"/><g><path fill="#302b44" fill-opacity="1" d="M-42.7,3.84A4.16,4.16,0,0,1-38.54,8a4.16,4.16,0,0,1-4.16,4.16A4.16,4.16,0,0,1-46.86,8,4.16,4.16,0,0,1-42.7,3.84Zm12.8-.64A4.8,4.8,0,0,1-25.1,8a4.8,4.8,0,0,1-4.8,4.8A4.8,4.8,0,0,1-34.7,8,4.8,4.8,0,0,1-29.9,3.2Zm12.8-.64A5.44,5.44,0,0,1-11.66,8a5.44,5.44,0,0,1-5.44,5.44A5.44,5.44,0,0,1-22.54,8,5.44,5.44,0,0,1-17.1,2.56Z"/><animateTransform attributeName="transform" type="translate" values="23 0;36 0;49 0;62 0;74.5 0;87.5 0;100 0;113 0;125.5 0;138.5 0;151.5 0;164.5 0;178 0" calcMode="discrete" dur="1170ms" repeatCount="indefinite"/></g></svg>
|
||||
|
After Width: | Height: | Size: 1.4 KiB |
17
www/themes/jason-williamsca/assets/javascript/common.js
Normal file
17
www/themes/jason-williamsca/assets/javascript/common.js
Normal file
@@ -0,0 +1,17 @@
|
||||
$(() => {
|
||||
// Enable any tooltips on the page
|
||||
$('[data-toggle="tooltip"]').tooltip()
|
||||
|
||||
// Enable masonry layout
|
||||
$('.masonry').each(function() {
|
||||
var opts = { itemSelector: '.masonry-item' }
|
||||
if ($(this).hasClass('masonry-horizontal')) opts.horizontalOrder = true
|
||||
|
||||
$(this).masonry(opts)
|
||||
})
|
||||
|
||||
// Resize textareas to fit their content
|
||||
$('textarea').each(function() {
|
||||
$(this).height($(this)[0].scrollHeight)
|
||||
})
|
||||
});
|
||||
45
www/themes/jason-williamsca/assets/javascript/feedlayout.js
Normal file
45
www/themes/jason-williamsca/assets/javascript/feedlayout.js
Normal file
@@ -0,0 +1,45 @@
|
||||
(function($) {
|
||||
"use strict"; // Start of use strict
|
||||
|
||||
// If the feed is loaded immediadely on page load (i.e. we're not using ajax), reset the layout on each image load
|
||||
$('.masonry img').each(function() {
|
||||
$(this).one('load', () => {
|
||||
$('.masonry').masonry()
|
||||
})
|
||||
})
|
||||
|
||||
// Apply masonry layout to feed cards after content (including images) has been loaded
|
||||
$(window).on('feedLoaded', function() {
|
||||
if (!feedItemClass) feedItemClass = 'col-sm-12 col-md-6 col-xl-4'
|
||||
|
||||
$('.masonry-item').addClass(feedItemClass)
|
||||
$('.show-onfeedloaded').removeClass('d-none')
|
||||
|
||||
$('.masonry').masonry('reloadItems')
|
||||
$('.masonry').masonry()
|
||||
|
||||
// Every time an image loads, reset the layout
|
||||
$('.masonry img').each(function() {
|
||||
$(this).one('load', () => {
|
||||
$('.masonry').masonry()
|
||||
})
|
||||
})
|
||||
})
|
||||
|
||||
// If there's tag data set once the page is loaded, create a tag cloud
|
||||
$(function() {
|
||||
if(typeof tagData !== 'undefined') {
|
||||
var cloudWords = []
|
||||
|
||||
tagData.forEach((tag) => {
|
||||
cloudWords.push({text: tag.tag, weight: tag.count, link: '/feed/all/' + tag.tag})
|
||||
})
|
||||
|
||||
$('#tagcloud').jQCloud(cloudWords, {
|
||||
autoResize: true,
|
||||
removeOverflowing: true,
|
||||
delay: 2
|
||||
})
|
||||
}
|
||||
})
|
||||
})(jQuery); // End of use strict
|
||||
@@ -1,23 +1,22 @@
|
||||
(function($) {
|
||||
"use strict"; // Start of use strict
|
||||
|
||||
// Apply masonry layout to cards
|
||||
$('.masonry').each(function() {
|
||||
var opts = { itemSelector: '.masonry-wrapper' };
|
||||
if ($(this).children().length < 6) opts.horizontalOrder = true;
|
||||
$(this).masonry(opts);
|
||||
});
|
||||
|
||||
// Add reorder icon to .card-inline
|
||||
$('.card-inline').prepend('<div class="inline-icon" data-toggle="tooltip" title="Toggle bullet view"><i class="fas fa-stream"></i></div>');
|
||||
$('.card-inline').prepend('<div class="inline-icon" data-toggle="tooltip" title="Toggle bullet view"><i class="fas fa-stream"></i></div>')
|
||||
|
||||
$('.card-inline .inline-icon').click(function() {
|
||||
var that = $(this);
|
||||
that.closest('.card').toggleClass('inline').closest('.masonry').masonry();
|
||||
// Define a function to toggle the view
|
||||
const toggleBulletView = function() {
|
||||
var that = $(this)
|
||||
that.closest('.card').toggleClass('inline').closest('.masonry').masonry()
|
||||
setTimeout(() => {
|
||||
that.tooltip('hide');
|
||||
that.tooltip('hide')
|
||||
}, 2000);
|
||||
});
|
||||
return false
|
||||
}
|
||||
|
||||
// Add the function to clicks on the menu button, and/or taps anywhere on the card
|
||||
$('.card-inline .inline-icon').on('click', toggleBulletView)
|
||||
$('.card-inline').on('touchstart', toggleBulletView)
|
||||
|
||||
// Smooth scrolling using jQuery easing
|
||||
$('a.js-scroll-trigger[href*="#"]:not([href="#"])').click(function() {
|
||||
|
||||
@@ -1,3 +0,0 @@
|
||||
$(() => {
|
||||
$('[data-toggle="tooltip"]').tooltip()
|
||||
});
|
||||
Reference in New Issue
Block a user