Scroll shrinking + minor improvements

This commit is contained in:
Tony Air 2018-07-29 17:58:28 +07:00
parent 6d77bbc065
commit cd935551f9
6 changed files with 59 additions and 7 deletions

View File

@ -0,0 +1,22 @@
"use strict";
import $ from 'jquery';
const ShrinkUI = (($) => {
// Constants
const G = window;
const D = document;
// shrink bar
$(G).scroll(function() {
if ($(D).scrollTop() > 100) {
$('body').addClass('shrink');
} else {
$('body').removeClass('shrink');
}
});
return ShrinkUI;
})($);
export default ShrinkUI;

View File

@ -12,6 +12,7 @@ import './_components/routes/index';
import Events from './_events'; import Events from './_events';
import Spinner from './_components/_ui.spinner'; import Spinner from './_components/_ui.spinner';
import './_components/_ui.shrink';
import './_components/_ui.carousel'; import './_components/_ui.carousel';
import './_components/_ui.menu'; import './_components/_ui.menu';
import './_components/_ui.form.storage'; import './_components/_ui.form.storage';

View File

@ -1,3 +1,29 @@
/** /**
* Your custom style * Your custom style
*/ */
// shrink elements on scroll
body.shrink {}
// sticky footer
html, body {
height: 100%;
min-height: 100%;
}
.wrapper {
min-height: 100%;
padding-top: 7.4rem;
padding-bottom: 2rem;
}
.site-footer {
height: 2rem;
margin-top: -2rem;
line-height: 2rem;
}
// element col paddings
.col-block {
padding: $grid-gutter-height / 4;
}

View File

@ -8,7 +8,6 @@
namespace Site\Extensions; namespace Site\Extensions;
use DNADesign\Elemental\Models\BaseElement;
use DNADesign\Elemental\Models\ElementContent; use DNADesign\Elemental\Models\ElementContent;
use SilverStripe\ORM\DataExtension; use SilverStripe\ORM\DataExtension;
@ -21,17 +20,16 @@ class BlogPostExtension extends DataExtension
public function Summary($wordsToDisplay = 30) public function Summary($wordsToDisplay = 30)
{ {
$summary = $this->owner->getField('Summary'); $summary = $this->owner->getField('Summary');
if($summary){ if ($summary) {
return $summary; return $summary;
} }
BaseElement::
$element = ElementContent::get()->filter([ $element = ElementContent::get()->filter([
'ParentID' => $this->owner->ElementalArea()->ID, 'ParentID' => $this->owner->ElementalArea()->ID,
'HTML:not' => [null], 'HTML:not' => [null],
])->first(); ])->first();
if($element){ if ($element) {
return $element->dbObject('HTML')->Summary($wordsToDisplay); return $element->dbObject('HTML')->Summary($wordsToDisplay);
} }

View File

@ -17,7 +17,7 @@ use SilverStripe\Forms\FieldList;
class ElementRows extends DataExtension class ElementRows extends DataExtension
{ {
private static $container_max_width = 1140; private static $container_max_width = 1140;
private static $column_class = 'col-md-'; private static $column_class = 'col-block col-md-';
private static $container_styles = [ private static $container_styles = [
'container' => 'Fixed container', 'container' => 'Fixed container',

View File

@ -1,5 +1,9 @@
<% if $ShowTitle %>
<h2 class="slider-element__title text-center">$Title</h2>
<% end_if %>
<% if $SlideShow %> <% if $SlideShow %>
<div id="Carousel{$ID}" class="carousel slide js-carousel d-none d-sm-block" data-indicators="true" data-arrows="true"> <div id="Carousel{$ID}" class="carousel slide js-carousel d-none d-sm-block"<% if $SlideShow.count > 1 %> data-indicators="true" data-arrows="true"<% end_if %>>
<div class="carousel-inner"> <div class="carousel-inner">
<% loop $SlideShow %> <% loop $SlideShow %>
<div class="carousel-item<% if $First %> active<% end_if %>"> <div class="carousel-item<% if $First %> active<% end_if %>">
@ -16,6 +20,7 @@
<% if $PageLinkID %> <% if $PageLinkID %>
<p> <p>
<a href="$PageLink.Link" title="$PageLink.MenuTitle.XML" class="btn btn-default"> <a href="$PageLink.Link" title="$PageLink.MenuTitle.XML" class="btn btn-default">
<i class="fas fa-bars"></i>
<%t Dynamic\FlexSlider\ORM\FlexSlider.LEARN_MORE "Learn more" %> <%t Dynamic\FlexSlider\ORM\FlexSlider.LEARN_MORE "Learn more" %>
</a> </a>
</p> </p>