Browse Source

added smooth scroll

dependabot/npm_and_yarn/acorn-5.7.4
rdrew 6 years ago
parent
commit
53df5177bf
  1. 29
      css/style.css
  2. 21
      js/js.js
  3. 21
      src/js/js.js
  4. 118
      src/scss/;';w
  5. 13
      src/scss/_article-pages.scss
  6. 3
      src/scss/_static-pages.scss
  7. 9
      src/scss/_toc.scss
  8. 12
      src/scss/_tooltips.scss
  9. 1
      src/scss/style.scss
  10. 2
      templates/article_pages/article--hero.html.twig

29
css/style.css

File diff suppressed because one or more lines are too long

21
js/js.js

@ -40,8 +40,8 @@
attach: function attach(context, settings) { attach: function attach(context, settings) {
$('.lp-slideshow').slick({ $('.lp-slideshow').slick({
fade: true, fade: true,
cssEase: 'linear', cssEase: 'linear',
pauseOnHover: false, pauseOnHover: false,
autoplay: true, autoplay: true,
autoplaySpeed: 5000 autoplaySpeed: 5000
@ -49,6 +49,23 @@
} }
}; };
Drupal.behaviors.tocScroll = {
attach: function attach(context, settings) {
$('.toc a').on('click',function(e) {
e.preventDefault();
var offset = 100;
var target = this.hash;
if ($(this).data('offset') != undefined) offset = $(this).data('offset');
$('html, body').stop().animate({
'scrollTop': $(target).offset().top - offset
}, 500, 'swing', function() {
// window.location.hash = target;
});
});
}
};
Drupal.behaviors.footnoteScroll = { Drupal.behaviors.footnoteScroll = {
attach: function attach(context, settings) { attach: function attach(context, settings) {

21
src/js/js.js

@ -40,8 +40,8 @@
attach: function attach(context, settings) { attach: function attach(context, settings) {
$('.lp-slideshow').slick({ $('.lp-slideshow').slick({
fade: true, fade: true,
cssEase: 'linear', cssEase: 'linear',
pauseOnHover: false, pauseOnHover: false,
autoplay: true, autoplay: true,
autoplaySpeed: 5000 autoplaySpeed: 5000
@ -49,6 +49,23 @@
} }
}; };
Drupal.behaviors.tocScroll = {
attach: function attach(context, settings) {
$('.toc a').on('click',function(e) {
e.preventDefault();
var offset = 100;
var target = this.hash;
if ($(this).data('offset') != undefined) offset = $(this).data('offset');
$('html, body').stop().animate({
'scrollTop': $(target).offset().top - offset
}, 500, 'swing', function() {
// window.location.hash = target;
});
});
}
};
Drupal.behaviors.footnoteScroll = { Drupal.behaviors.footnoteScroll = {
attach: function attach(context, settings) { attach: function attach(context, settings) {

118
src/scss/;';w

@ -1,118 +0,0 @@
//@format
$toc_breakpoint: 768px;
.toc {
position: -webkit-sticky; /* Safari */
position: sticky;
top: 100px;
margin-top: 0 !important;
margin-bottom: 0 !important;
}
.node .toc-tree {
border: none;
padding: 0;
}
.toc-block--mobile {
@include breakpoint($desktop-up) {
//display: none;
}
}
.toc-block--wide {
position: -webkit-sticky; /* Safari */
position: sticky;
top: 100px;
margin-top: 2rem;
.toc--title {
&[aria-expanded='true'] h2::after {
//content: "\f146";//square
content: '\f068';
}
&[aria-expanded='false'] h2::after {
//content: "\f0fe";
content: '\f067';
}
h2::after {
font-family: 'FontAwesome';
position: absolute;
//top: 6px;
right: 0;
font-weight: 400;
line-height: 20px;
font-size: 2rem;
background: #ccc;
padding: 10px;
//text-align: right;
}
h2 {
text-align: left;
border: 1px dotted #ccc;
padding: 0px;
padding-left: 10px;
line-height: 40px;
margin-bottom: 0px;
background: #f5f3f3;
}
}
.toc--list {
border: 1px dotted #ccc;
border-top: 0px;
padding-top: 1rem;
ol {
list-style-type: none;
padding-left: 0;
font-family: $serif;
font-size: 1.8rem;
line-height: 1.8;
}
a {
&:hover {
background: #ccc;
}
}
}
}
.region-sidebar-second {
height: 1000px;
}
.node__main-content .toc-block--wide {
@include breakpoint($desktop-up) {
//display: none;
}
}
.toc-container .toc-block--wide {
@include breakpoint($desktop-up) {
position: -webkit-sticky; /* Safari */
position: sticky;
top: 300px;
}
}
.toc-desktop {
display: block !important;
}
.toc-mobile {
display: none !important;
}
//.article-title-banner {
//grid-area: header;
//}
//.node__main-content {
//grid-area: main;
//}
//.toc-container {
//grid-area: toc;
//}
//.node__container {
//display: grid;
//grid-template-columns: 70% 30%;
//grid-template-rows: auto;
//grid-template-areas:
//'header header'
//'toc toc'
//'main main';
//@include breakpoint($desktop-up) {
//grid-template-areas:
//'header header'
//'main toc';
//}
//}

13
src/scss/_article-pages.scss

@ -68,7 +68,14 @@ header.article-header {
text-align: right; text-align: right;
} }
} }
.article-title-banner { .article-title-banner {
.field--name-title {
color: #fff;
&:hover {
text-decoration: underline;
}
}
} }
//.article-info--wrapper { //.article-info--wrapper {
//position: absolute; //position: absolute;
@ -77,7 +84,13 @@ header.article-header {
//} //}
.article-info--wrapper { .article-info--wrapper {
} }
.article-title {
color: #fff;
}
.article-header--metadata { .article-header--metadata {
a {
color: #fff;
}
.article--contributor { .article--contributor {
font-size: 27px; font-size: 27px;
//line-height:36px; //line-height:36px;

3
src/scss/_static-pages.scss

@ -0,0 +1,3 @@
.header-top {
border-bottom: 1px solid #d4d3d3;
}

9
src/scss/_toc.scss

@ -16,6 +16,11 @@ $toc_breakpoint: 768px;
//display: none; //display: none;
} }
} }
div#toc-sections {
@include breakpoint($desktop-up) {
display: block;
}
}
.toc-block--wide { .toc-block--wide {
position: -webkit-sticky; /* Safari */ position: -webkit-sticky; /* Safari */
position: sticky; position: sticky;
@ -57,8 +62,8 @@ $toc_breakpoint: 768px;
border-top: 0px; border-top: 0px;
padding-top: 1rem; padding-top: 1rem;
ol { ol {
list-style-type: none; //list-style-type: none;
padding-left: 0; //padding-left: 0;
font-family: $serif; font-family: $serif;
font-size: 1.8rem; font-size: 1.8rem;

12
src/scss/_tooltips.scss

@ -25,9 +25,9 @@
visibility: visible; visibility: visible;
} }
//footnote offset //footnote offset
:target { //:target {
display: block; //display: block;
position: relative; //position: relative;
top: -100px; //top: -100px;
visibility: hidden; //visibility: hidden;
} //}

1
src/scss/style.scss

@ -7,6 +7,7 @@
@import 'tooltips'; @import 'tooltips';
@import 'menus'; @import 'menus';
@import 'toc'; @import 'toc';
@import 'static-pages';
/*on-scroll menu */ /*on-scroll menu */
.fixed-header-enabled.onscroll .header-container ul.menu { .fixed-header-enabled.onscroll .header-container ul.menu {

2
templates/article_pages/article--hero.html.twig

@ -3,7 +3,7 @@
{% set pubDate = content.field_publication_date_electroni|field_value %} {% set pubDate = content.field_publication_date_electroni|field_value %}
<header style="background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('{{ imagePath }}')" class="article-title-banner node__header paragraph-responsive-typography-enabled article-header"> <header style="background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('{{ imagePath }}')" class="article-title-banner node__header paragraph-responsive-typography-enabled article-header">
<div class="container article-info--wrapper"> <div class="container article-info--wrapper">
{% block title_area %} {% block title_area %}
{{ title_prefix }} {{ title_prefix }}
<h1{{ title_attributes.addClass('article--title title') }}> <h1{{ title_attributes.addClass('article--title title') }}>

Loading…
Cancel
Save