Refactor more docs javascript and add css compilation with gulp.
Glen Cheney
8 years ago
parent
47556e0c15
commit
a044a201fa
@ -0,0 +1,69 @@
|
||||
.demo-list .figure-wrap {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.demo-list .figure-wrap,
|
||||
.demo-list .figure-wrap img {
|
||||
// Promote to its own layer. makes filters look ok on retina with images
|
||||
transform: translateZ(0);
|
||||
transition: .1s ease;
|
||||
}
|
||||
|
||||
.demo-list:hover .figure-wrap {
|
||||
transform: scale3d( 1, 1, 1 );
|
||||
|
||||
img {
|
||||
|
||||
filter: grayscale(1);
|
||||
}
|
||||
}
|
||||
|
||||
.demo-list:hover .figure-wrap:hover {
|
||||
z-index: 2;
|
||||
transform: scale3d( 1.05, 1.05, 1 );
|
||||
|
||||
img {
|
||||
filter: none;
|
||||
}
|
||||
}
|
||||
|
||||
.demo-list .figure-wrap:nth-child(4n + 1) {
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
.demo-list .figure-wrap > a {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.demo-list .figure-wrap figcaption {
|
||||
margin-top: .5em;
|
||||
margin-bottom: 1em;
|
||||
}
|
||||
|
||||
|
||||
.demo-link-container::before {
|
||||
content: '➜';
|
||||
color: $emerald;
|
||||
margin-right: 5px;
|
||||
}
|
||||
|
||||
|
||||
span.demo-link-container::before {
|
||||
margin-left: 5px;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 47.9375em) {
|
||||
|
||||
.demo-list + .demo-list {
|
||||
margin-top: 1em;
|
||||
}
|
||||
|
||||
.figure-wrap:nth-child(odd) {
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
.figure-wrap:nth-child(n + 3) {
|
||||
margin-top: 1em;
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,73 @@
|
||||
// FAQ
|
||||
|
||||
.search-section {
|
||||
margin-top: 1em;
|
||||
margin-bottom: 1em;
|
||||
}
|
||||
|
||||
input.faq-search {
|
||||
-webkit-appearance: searchfield;
|
||||
box-sizing: border-box;
|
||||
width: 100%;
|
||||
border: 2px solid $gray40;
|
||||
border-radius: 4px;
|
||||
padding: 0.5em;
|
||||
font-size: 1.125em;
|
||||
color: $gray40;
|
||||
transition: .15s;
|
||||
|
||||
&::placeholder {
|
||||
color: $gray40;
|
||||
transition: .15s;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
outline: 0;
|
||||
color: $gray30;
|
||||
border-color: $gray30;
|
||||
|
||||
&::placeholder {
|
||||
color: $gray30;
|
||||
}
|
||||
}
|
||||
|
||||
&:focus {
|
||||
outline: 0;
|
||||
color: $nephritis;
|
||||
border-color: $nephritis;
|
||||
|
||||
&::placeholder {
|
||||
color: $nephritis;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.question {
|
||||
margin: 2em 0;
|
||||
overflow: hidden;
|
||||
transition: .2s ease-out;
|
||||
}
|
||||
|
||||
.question--collapsed {
|
||||
height: 0 !important; // Needs to override inline style
|
||||
margin: 0;
|
||||
border-width: 0;
|
||||
}
|
||||
|
||||
.question--collapsed + .question {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.question--unanswered {
|
||||
padding-top: 1.25em;
|
||||
border-top: 2px solid $emerald;
|
||||
}
|
||||
|
||||
.question__title {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.question__answer {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
@ -0,0 +1,73 @@
|
||||
*,
|
||||
*::before,
|
||||
*::after {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
pre {
|
||||
max-height: 30em;
|
||||
}
|
||||
|
||||
picture {
|
||||
display: block;
|
||||
}
|
||||
|
||||
img {
|
||||
display: block;
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
figure {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
ul ul {
|
||||
padding-left: 1.25em;
|
||||
margin: 0;
|
||||
list-style-type: circle;
|
||||
}
|
||||
|
||||
li {
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
nav > a {
|
||||
display: block;
|
||||
margin: 5px 0;
|
||||
}
|
||||
|
||||
.container-fluid {
|
||||
width: 93%;
|
||||
max-width: 1200px;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
.row.row--full {
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
.breathable-list li {
|
||||
line-height: 1.7;
|
||||
}
|
||||
|
||||
// Filters
|
||||
.filter__label {
|
||||
margin: 0 0 3px;
|
||||
}
|
||||
|
||||
.filter__search {
|
||||
margin: 5px 0;
|
||||
}
|
||||
|
||||
|
||||
.sort-options {
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
#be-social {
|
||||
h2 {
|
||||
margin-bottom: 32px;
|
||||
}
|
||||
}
|
||||
@ -1,293 +0,0 @@
|
||||
@import "variables";
|
||||
|
||||
*,
|
||||
*::before,
|
||||
*::after {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
pre {
|
||||
max-height: 30em;
|
||||
}
|
||||
|
||||
picture {
|
||||
display: block;
|
||||
}
|
||||
|
||||
img {
|
||||
display: block;
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
/* lets have some constraints shall we */
|
||||
.container-fluid {
|
||||
width: 93%;
|
||||
max-width: 1200px;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
.row.row--full {
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
ul ul {
|
||||
padding-left: 1.25em;
|
||||
margin: 0;
|
||||
list-style-type: circle;
|
||||
}
|
||||
|
||||
li {
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
.breathable-list li {
|
||||
line-height: 1.7;
|
||||
}
|
||||
|
||||
|
||||
.site-nav {
|
||||
|
||||
.site-nav__title {
|
||||
color: $clouds;
|
||||
|
||||
&:first-child {
|
||||
margin-top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.btn {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.site-nav__tray {
|
||||
transition: .2s;
|
||||
overflow: hidden;
|
||||
height: 300px;
|
||||
background-color: $wetAsphalt;
|
||||
}
|
||||
|
||||
.site-nav__tray-inner {
|
||||
padding: 30px 0;
|
||||
}
|
||||
|
||||
&.collapsed .site-nav__tray {
|
||||
height: 0;
|
||||
|
||||
// IE7 wtf
|
||||
.lt-ie8 & {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.site-nav__band {
|
||||
position: relative;
|
||||
|
||||
&::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 4px;
|
||||
background: $wetAsphalt;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.site-footer {
|
||||
margin-top: 2em;
|
||||
padding: 1em 0;
|
||||
background-color: $wetAsphalt;
|
||||
}
|
||||
|
||||
.site-footer__credit {
|
||||
margin: 0;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
nav > a {
|
||||
display: block;
|
||||
margin: 5px 0;
|
||||
}
|
||||
|
||||
|
||||
.demo-list .figure-wrap {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.demo-list .figure-wrap,
|
||||
.demo-list .figure-wrap img {
|
||||
// Promote to its own layer. makes filters look ok on retina with images
|
||||
transform: translateZ(0);
|
||||
transition: .1s ease;
|
||||
}
|
||||
|
||||
.demo-list:hover .figure-wrap {
|
||||
transform: scale3d( 1, 1, 1 );
|
||||
|
||||
img {
|
||||
|
||||
filter: grayscale(1);
|
||||
}
|
||||
}
|
||||
|
||||
.demo-list:hover .figure-wrap:hover {
|
||||
z-index: 2;
|
||||
transform: scale3d( 1.05, 1.05, 1 );
|
||||
|
||||
img {
|
||||
filter: none;
|
||||
}
|
||||
}
|
||||
|
||||
.demo-list .figure-wrap:nth-child(4n + 1) {
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
.demo-list .figure-wrap > a {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.demo-list .figure-wrap figcaption {
|
||||
margin-top: .5em;
|
||||
margin-bottom: 1em;
|
||||
}
|
||||
|
||||
|
||||
.demo-link-container::before {
|
||||
content: '➜';
|
||||
color: $emerald;
|
||||
margin-right: 5px;
|
||||
}
|
||||
|
||||
|
||||
span.demo-link-container::before {
|
||||
margin-left: 5px;
|
||||
}
|
||||
|
||||
|
||||
|
||||
// Filters
|
||||
.filter__label {
|
||||
margin: 0 0 3px;
|
||||
}
|
||||
|
||||
.filter__search {
|
||||
margin: 5px 0;
|
||||
}
|
||||
|
||||
|
||||
.sort-options {
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
#be-social {
|
||||
h2 {
|
||||
margin-bottom: 32px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// FAQ
|
||||
|
||||
.search-section {
|
||||
margin-top: 1em;
|
||||
margin-bottom: 1em;
|
||||
}
|
||||
|
||||
input.faq-search {
|
||||
width: 100%;
|
||||
-webkit-appearance: none;
|
||||
appearance: none;
|
||||
border: 2px solid $gray40;
|
||||
border-radius: 4px;
|
||||
padding: 0.5em;
|
||||
font-size: 1.125em;
|
||||
color: $gray40;
|
||||
transition: .15s;
|
||||
|
||||
@include placeholder() {
|
||||
color: $gray40;
|
||||
transition: .15s;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
outline: 0;
|
||||
color: $gray30;
|
||||
border-color: $gray30;
|
||||
|
||||
@include placeholder() {
|
||||
color: $gray30;
|
||||
}
|
||||
}
|
||||
|
||||
&:focus {
|
||||
outline: 0;
|
||||
color: $nephritis;
|
||||
border-color: $nephritis;
|
||||
|
||||
@include placeholder() {
|
||||
color: $nephritis;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.question {
|
||||
margin: 2em 0;
|
||||
overflow: hidden;
|
||||
|
||||
// For transition
|
||||
transition: .2s ease-out;
|
||||
|
||||
&.collapsed {
|
||||
height: 0 !important; // Needs to override inline style
|
||||
margin: 0;
|
||||
border-width: 0;
|
||||
}
|
||||
|
||||
&.collapsed + .question {
|
||||
margin-top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.question--unanswered {
|
||||
padding-top: 1.25em;
|
||||
border-top: 2px solid $emerald;
|
||||
}
|
||||
|
||||
.question__title {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.question__answer {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
@media ( max-width: 47.9375em ) {
|
||||
|
||||
.demo-list + .demo-list {
|
||||
margin-top: 1em;
|
||||
}
|
||||
|
||||
.figure-wrap:nth-child(odd) {
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
.figure-wrap:nth-child(n + 3) {
|
||||
margin-top: 1em;
|
||||
}
|
||||
|
||||
.site-nav .btn {
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,68 @@
|
||||
.site-nav {
|
||||
|
||||
.site-nav__title {
|
||||
color: $clouds;
|
||||
|
||||
&:first-child {
|
||||
margin-top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.btn {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.site-nav__tray {
|
||||
transition: .2s;
|
||||
overflow: hidden;
|
||||
height: 300px;
|
||||
background-color: $wetAsphalt;
|
||||
}
|
||||
|
||||
.site-nav__tray-inner {
|
||||
padding: 30px 0;
|
||||
}
|
||||
|
||||
&.collapsed .site-nav__tray {
|
||||
height: 0;
|
||||
|
||||
// IE7 wtf
|
||||
.lt-ie8 & {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.site-nav__band {
|
||||
position: relative;
|
||||
|
||||
&::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 4px;
|
||||
background: $wetAsphalt;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.site-footer {
|
||||
margin-top: 2em;
|
||||
padding: 1em 0;
|
||||
background-color: $wetAsphalt;
|
||||
}
|
||||
|
||||
.site-footer__credit {
|
||||
margin: 0;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 47.9375em) {
|
||||
|
||||
.site-nav .btn {
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
}
|
||||
File diff suppressed because it is too large
Load Diff
@ -1,99 +1,77 @@
|
||||
var DEMO = (function( $, Viewport ) {
|
||||
'use strict';
|
||||
'use strict';
|
||||
|
||||
var $grid = $('#grid'),
|
||||
$gridItems = $grid.find('.picture-item'),
|
||||
$sizer = $grid.find('.shuffle__sizer'),
|
||||
shuffle,
|
||||
var Shuffle = window.shuffle;
|
||||
var Viewport = window.viewport;
|
||||
|
||||
init = function() {
|
||||
function toArray(arrayLike) {
|
||||
if ('from' in Array) {
|
||||
return Array.from(arrayLike);
|
||||
}
|
||||
|
||||
return Array.prototype.slice.call(arrayLike);
|
||||
}
|
||||
|
||||
// instantiate the plugin
|
||||
$grid.shuffle({
|
||||
itemSelector: '.picture-item',
|
||||
sizer: $sizer
|
||||
});
|
||||
|
||||
shuffle = $grid.data('shuffle');
|
||||
|
||||
addViewportItems();
|
||||
|
||||
setTimeout(function() {
|
||||
listen();
|
||||
addTransitionToItems();
|
||||
}, 100);
|
||||
},
|
||||
|
||||
addViewportItems = function() {
|
||||
$gridItems.each(function() {
|
||||
Viewport.add({
|
||||
element: this,
|
||||
threshold: 130,
|
||||
enter: showItemsInViewport
|
||||
});
|
||||
});
|
||||
},
|
||||
|
||||
// Only the items out of the viewport should transition. This way, the first visible ones
|
||||
// will snap into place.
|
||||
addTransitionToItems = function() {
|
||||
$gridItems.find('.picture-item__inner').addClass('picture-item__inner--transition');
|
||||
},
|
||||
|
||||
showItemsInViewport = function() {
|
||||
$(this).addClass('in');
|
||||
},
|
||||
var Demo = function () {
|
||||
this.element = document.getElementById('grid');
|
||||
this.gridItems = toArray(this.element.querySelectorAll('.picture-item'));
|
||||
this.sizer = this.element.querySelector('.shuffle__sizer');
|
||||
|
||||
// Re layout shuffle when images load. This is only needed
|
||||
// below 768 pixels because the .picture-item height is auto and therefore
|
||||
// the height of the picture-item is dependent on the image
|
||||
// I recommend using imagesloaded to determine when an image is loaded
|
||||
// but that doesn't support IE7
|
||||
listen = function() {
|
||||
this.shuffle = new Shuffle(this.element, {
|
||||
itemSelector: '.picture-item',
|
||||
sizer: this.sizer,
|
||||
});
|
||||
|
||||
var debouncedLayout = $.throttle( 300, function() {
|
||||
$grid.shuffle('update');
|
||||
Viewport.refresh();
|
||||
});
|
||||
|
||||
var $imgs = $grid.find('img');
|
||||
this.addViewportItems();
|
||||
|
||||
// Get all images inside shuffle
|
||||
$imgs.each(function() {
|
||||
var proxyImage;
|
||||
setTimeout(function () {
|
||||
this.addTransitionToItems();
|
||||
}.bind(this), 100);
|
||||
};
|
||||
|
||||
// Image already loaded
|
||||
if ( this.complete && this.naturalWidth !== undefined ) {
|
||||
return;
|
||||
}
|
||||
Demo.prototype.addViewportItems = function () {
|
||||
var handler = this.showItemsInViewport;
|
||||
|
||||
// If none of the checks above matched, simulate loading on detached element.
|
||||
proxyImage = new Image();
|
||||
$( proxyImage ).on('load', function() {
|
||||
$(this).off('load');
|
||||
debouncedLayout();
|
||||
});
|
||||
|
||||
proxyImage.src = this.src;
|
||||
this.gridItems.forEach(function () {
|
||||
Viewport.add({
|
||||
element: this,
|
||||
threshold: 130,
|
||||
enter: handler,
|
||||
});
|
||||
|
||||
// Because this method doesn't seem to be perfect.
|
||||
setTimeout(function() {
|
||||
debouncedLayout();
|
||||
}, 500);
|
||||
};
|
||||
|
||||
return {
|
||||
init: init,
|
||||
getShuffle: function() {
|
||||
return shuffle;
|
||||
}
|
||||
};
|
||||
}( jQuery, window.Viewport ));
|
||||
|
||||
|
||||
|
||||
$(document).ready(function() {
|
||||
DEMO.init();
|
||||
});
|
||||
};
|
||||
|
||||
Demo.prototype.showItemsInViewport = function () {
|
||||
this.classList.add('in');
|
||||
};
|
||||
|
||||
/**
|
||||
* Only the items out of the viewport should transition. This way, the first
|
||||
* visible ones will snap into place.
|
||||
*/
|
||||
Demo.prototype.addTransitionToItems = function () {
|
||||
this.gridItems.forEach(function (item) {
|
||||
item.querySelector('.picture-item__inner').classList.add('picture-item__inner--transition');
|
||||
});
|
||||
};
|
||||
|
||||
/**
|
||||
* Re-layout shuffle when images load. This is only needed below 768 pixels
|
||||
* because the .picture-item height is auto and therefore the height of the
|
||||
* picture-item is dependent on the image. I recommend using imagesloaded by
|
||||
* desandro to determine when all your images have loaded.
|
||||
*/
|
||||
Demo.prototype.listenForImageLoads = function () {
|
||||
var imgs = this.element.querySelectorAll('img');
|
||||
var handler = function () {
|
||||
this.shuffle.update();
|
||||
Viewport.refresh();
|
||||
}.bind(this);
|
||||
|
||||
for (var i = imgs.length - 1; i >= 0; i--) {
|
||||
imgs[i].addEventListener('load', handler, false);
|
||||
}
|
||||
};
|
||||
|
||||
document.addEventListener('DOMContentLoaded', function () {
|
||||
window.demo = new Demo();
|
||||
});
|
||||
|
||||
@ -1,22 +0,0 @@
|
||||
var DEMO = (function( $ ) {
|
||||
'use strict';
|
||||
|
||||
var init = function() {
|
||||
var $grid = $('#grid'),
|
||||
$sizer = $grid.find('.shuffle__sizer');
|
||||
|
||||
$grid.shuffle({
|
||||
itemSelector: '.grid__brick',
|
||||
sizer: $sizer
|
||||
});
|
||||
};
|
||||
|
||||
return {
|
||||
init: init
|
||||
};
|
||||
}( jQuery ));
|
||||
|
||||
|
||||
$(document).ready(function() {
|
||||
DEMO.init();
|
||||
});
|
||||
@ -0,0 +1,6 @@
|
||||
'use strict';
|
||||
|
||||
window.demo = new window.shuffle(document.getElementById('grid'), {
|
||||
itemSelector: '.grid__brick',
|
||||
sizer: document.querySelector('#grid .shuffle__sizer'),
|
||||
});
|
||||
@ -1,51 +1,45 @@
|
||||
requirejs.config({
|
||||
baseUrl: site_url + '/js',
|
||||
paths: {
|
||||
jquery: '//ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min',
|
||||
shuffle: '../dist/jquery.shuffle',
|
||||
modernizr: '../dist/modernizr.custom.min'
|
||||
shuffle: '../dist/shuffle',
|
||||
},
|
||||
|
||||
|
||||
// Shimming other page javascript.
|
||||
shim: {
|
||||
evenheights: {
|
||||
deps: ['jquery'],
|
||||
exports: 'jQuery.fn.evenHeights'
|
||||
},
|
||||
page: {
|
||||
deps: ['jquery', 'evenheights'],
|
||||
exports: 'Modules'
|
||||
}
|
||||
}
|
||||
deps: ['evenheights'],
|
||||
exports: 'Modules',
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
// A hack for Modernizr and AMD. This lets Modernizr be in the <head> and also
|
||||
// compatible with other modules.
|
||||
define('modernizr', [], window.Modernizr);
|
||||
|
||||
|
||||
define(function(require) {
|
||||
// Get jQuery.
|
||||
var $ = require('jquery');
|
||||
define(function (require) {
|
||||
'use strict';
|
||||
|
||||
// Get Shuffle.
|
||||
var Shuffle = require('shuffle');
|
||||
|
||||
// Page-level JavaScript used for the demo pages.
|
||||
var jqEvenHeights = require('evenheights');
|
||||
var Page = require('page');
|
||||
require('evenheights');
|
||||
require('page');
|
||||
|
||||
// Create a new shuffle instance.
|
||||
var shuffle = new Shuffle($('#grid').get(0), {
|
||||
var element = document.getElementById('grid');
|
||||
var shuffle = new Shuffle(element, {
|
||||
itemSelector: '.js-item',
|
||||
sizer: $('#js-sizer')
|
||||
sizer: document.getElementById('js-sizer'),
|
||||
});
|
||||
|
||||
// DO NOT use this for determining when images load.
|
||||
// See http://vestride.github.io/Shuffle/images/
|
||||
// Use something like imagesLoaded.
|
||||
$('#grid img').on('load', function() {
|
||||
shuffle.layout();
|
||||
});
|
||||
var imgs = this.element.querySelectorAll('img');
|
||||
|
||||
var handler = function () {
|
||||
shuffle.update();
|
||||
};
|
||||
|
||||
for (var i = imgs.length - 1; i >= 0; i--) {
|
||||
imgs[i].addEventListener('load', handler, false);
|
||||
}
|
||||
});
|
||||
|
||||
Loading…
Reference in New Issue