Browse Source

toc and article page layout

dependabot/npm_and_yarn/acorn-5.7.4
rdrew 6 years ago
parent
commit
e8e44142cf
  1. 64
      css/style.css
  2. 7
      js/js.js
  3. 7
      src/js/js.js
  4. 49
      src/scss/_article-pages.scss
  5. 50
      src/scss/_toc.scss

64
css/style.css

File diff suppressed because one or more lines are too long

7
js/js.js

@ -23,11 +23,10 @@
Drupal.behaviors.stickyTOC = { Drupal.behaviors.stickyTOC = {
attach: function attach(context, settings) { attach: function attach(context, settings) {
var height = $('.main-content__section .region').css("height"); var container_height = $('.node__main-content').css("height");
console.log(height); //console.log(height);
//$('.toc-container .toc-sticky-wrapper').css('height', container_height);
//$( ".toc-block--wide" ).wrap( "<div class='new' />"); //$( ".toc-block--wide" ).wrap( "<div class='new' />");
} }
}; };

7
src/js/js.js

@ -23,11 +23,10 @@
Drupal.behaviors.stickyTOC = { Drupal.behaviors.stickyTOC = {
attach: function attach(context, settings) { attach: function attach(context, settings) {
var height = $('.main-content__section .region').css("height"); var container_height = $('.node__main-content').css("height");
console.log(height); //console.log(height);
//$('.toc-container .toc-sticky-wrapper').css('height', container_height);
//$( ".toc-block--wide" ).wrap( "<div class='new' />"); //$( ".toc-block--wide" ).wrap( "<div class='new' />");
} }
}; };

49
src/scss/_article-pages.scss

@ -1,6 +1,14 @@
.page-node-type-journal-article .main-content__section {
padding-top: 0;
}
.article-title-banner { .article-title-banner {
//display:none; //display:none;
border: 1px solid #ccc; //border: 1px solid #ccc;
.bg-image {
height: 400px;
overflow:hidden;
}
} }
.field--name-field-journal-article-abstract .field__label { .field--name-field-journal-article-abstract .field__label {
font-size: 2rem; font-size: 2rem;
@ -35,7 +43,7 @@
header.article-header { header.article-header {
//background: #e6e6e6; //background: #e6e6e6;
//background: url(../img/DS2_2622.jpg); //background: url(../img/DS2_2622.jpg);
padding: 1rem; //padding: 1rem;
} }
.article-header--metadata { .article-header--metadata {
display:flex; display:flex;
@ -49,10 +57,20 @@ header.article-header {
text-align: right; text-align: right;
} }
} }
.article-title-banner {
position:relative;
}
//.article-info--wrapper {
//position: absolute;
//top: 0;
//margin: 8rem;
//}
.article-info--wrapper { .article-info--wrapper {
position: absolute; position: absolute;
top: 0; margin: 0;
margin: 8rem; top: 50%;
left: 50%;
transform: translate(-50%, -50%);
} }
.article { .article {
&--contributor { &--contributor {
@ -82,3 +100,26 @@ header.article-header {
margin-top:6px; margin-top:6px;
} }
} }
//layout
.node__main-content {
grid-area: main;
}
.toc-sticky-wrapper {
height:100%;
grid-area: toc;
}
.node__container {
@include breakpoint($desktop-up) {
display: grid;
column-gap: 2rem;
grid-template-columns: 70% 30%;
grid-template-rows: auto;
grid-template-areas:
'main toc'
}
}

50
src/scss/_toc.scss

@ -1,12 +1,14 @@
//@format //@format
$toc_breakpoint: 768px;
.toc { .toc {
position: -webkit-sticky; /* Safari */ position: -webkit-sticky; /* Safari */
position: sticky; position: sticky;
top: 0; top: 100px;
margin-top: 2rem;
} }
.toc-block--mobile { .toc-block--mobile {
@include breakpoint($desktop-up) { @include breakpoint($desktop-up) {
display: none; //display: none;
} }
} }
@ -50,12 +52,44 @@
.region-sidebar-second { .region-sidebar-second {
height: 1000px; height: 1000px;
} }
.toc-block--wide { .node__main-content .toc-block--wide {
position: -webkit-sticky; /* Safari */ @include breakpoint($desktop-up) {
position: sticky; //display: none;
top: 300px; }
display: none; }
.toc-container .toc-block--wide {
@include breakpoint($desktop-up) { @include breakpoint($desktop-up) {
display: block; 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';
//}
//}

Loading…
Cancel
Save