diff --git a/src/config/shim.js b/src/config/shim.js
index 407f51f5a..6eccef267 100644
--- a/src/config/shim.js
+++ b/src/config/shim.js
@@ -76,7 +76,7 @@
* Do that by checking for the presence of the canonical URL ([ui|dev|qa].adsabs.harvard.edu)
*/
(function checkIfProxied() {
- const canonicalUrlPattern = /^(ui|qa|dev|devui)\.adsabs\.harvard\.edu$/;
+ const canonicalUrlPattern = /^(ui|qa|dev|devui|demo)\.adsabs\.harvard\.edu$/;
// if test fails, it is proxied url, set a class on body element
if (!canonicalUrlPattern.test(window.location.hostname)) {
@@ -90,7 +90,7 @@
* changes, and return the correct canonical URL.
*/
window.getCanonicalUrl = () => {
- const canonicalUrlPattern = /^https:\/\/(ui|qa|dev|devui)\.adsabs\.harvard\.edu$/;
+ const canonicalUrlPattern = /^https:\/\/(ui|qa|dev|devui|demo)\.adsabs\.harvard\.edu$/;
// URLs that could be rewritten by the proxy server
const couldChangeUrls = [
@@ -98,6 +98,7 @@ window.getCanonicalUrl = () => {
{ env: 'qa', url: 'https://qa.adsabs.harvard.edu' },
{ env: 'dev', url: 'https://dev.adsabs.harvard.edu' },
{ env: 'devui', url: 'https://devui.adsabs.harvard.edu' },
+ { env: 'demo', url: 'https://demo.adsabs.harvard.edu' },
];
const [changedUrl] = couldChangeUrls.filter(
diff --git a/src/index.html b/src/index.html
index 4c5719765..109f27c5b 100644
--- a/src/index.html
+++ b/src/index.html
@@ -4,7 +4,7 @@
-
+
-
-
diff --git a/src/js/wraps/abstract_page_manager/abstract_page_manager.js b/src/js/wraps/abstract_page_manager/abstract_page_manager.js
index cd5a756f3..7c82f6de3 100644
--- a/src/js/wraps/abstract_page_manager/abstract_page_manager.js
+++ b/src/js/wraps/abstract_page_manager/abstract_page_manager.js
@@ -27,6 +27,57 @@ define([
initialize: function() {
PageManagerController.prototype.initialize.apply(this, arguments);
this.abstractTimer = new utils.TimingEvent('abstract-loaded', 'workflow');
+
+ // observe scrolling and apply sticky menu
+ this.observer = new IntersectionObserver(
+ () => {
+ this.adjustStickyElements();
+ },
+ { threshold: 0 }
+ );
+ this.observing = false;
+
+ // observe resizing and apply sticky menu
+ _.bindAll(this, 'adjustStickyElements');
+ $(window).on('resize', _.throttle(this.adjustStickyElements, 200));
+ },
+
+ // Make menu bar and menus sticky
+ adjustStickyElements: function() {
+ // if single column and nav buttons container reached top of viewport, float nav button container and menu
+ if (
+ window.matchMedia('(max-width: 788px)').matches &&
+ $('.s-search-bar-widget').get(0) &&
+ $('.s-search-bar-widget')
+ .get(0)
+ .getBoundingClientRect().bottom <= 0
+ ) {
+ var height = $('#nav-button-container').outerHeight(true);
+ this.stickElements(height);
+ // without this abstract content will disappear with above elements fixed
+ $('.s-abstract-content').attr('style', 'overflow: unset');
+ } else {
+ this.unStickElements();
+ $('.s-abstract-content').attr('style', 'overflow: hidden');
+ }
+ },
+
+ stickElements: function(top) {
+ // button container
+ $('#nav-button-container').addClass('sticky');
+ // menu
+ $('.s-nav-container').attr('style', `position:fixed;top:${top}px;left:0`);
+ // full text sources widget
+ $('#resources-container').attr(
+ 'style',
+ `position:fixed;top:${top}px;left:100%`
+ );
+ },
+
+ unStickElements: function() {
+ $('#nav-button-container').removeClass('sticky');
+ $('.s-nav-container').attr('style', '');
+ $('#resources-container').attr('style', '');
},
createView: function(options) {
@@ -87,6 +138,20 @@ define([
},
show: function(pageName) {
+ // hide drawers
+ $('#abs-full-txt-toggle').text('Full Text Sources');
+ $('#abs-nav-menu-toggle').html(
+ '
Show Menu'
+ );
+ $('.s-nav-container').removeClass('show');
+ $('#resources-container').removeClass('show');
+
+ // Observe search bar
+ if (!this.observing && document.querySelector('.s-search-bar-widget')) {
+ this.observer.observe(document.querySelector('.s-search-bar-widget'));
+ this.observing = true;
+ }
+
var ret = PageManagerController.prototype.show.apply(this, arguments);
var href = this.getCurrentQuery().url();
diff --git a/src/styles/sass/ads-sass/abstract-page-widgets.scss b/src/styles/sass/ads-sass/abstract-page-widgets.scss
index db06259eb..86dd153aa 100644
--- a/src/styles/sass/ads-sass/abstract-page-widgets.scss
+++ b/src/styles/sass/ads-sass/abstract-page-widgets.scss
@@ -3,6 +3,14 @@ $twitter-color: rgb(64, 153, 255);
$mendeley-color: rgb(60, 30, 33);
$sciencewise-color: rgb(179, 27, 27);
+.s-abs-full-txt-toggle-btn {
+ display: none;
+ margin: 10px 10px;
+ @media screen and (max-width: $screen-xs-max) {
+ display: unset;
+ }
+}
+
.facebook-icon {
@extend .fa;
@extend .fa-2x;
@@ -114,6 +122,7 @@ $sciencewise-color: rgb(179, 27, 27);
.s-abstract-content {
overflow: hidden;
+ position: relative;
}
.s-abstract-content {
@@ -285,3 +294,23 @@ $sciencewise-color: rgb(179, 27, 27);
flex: 0;
}
}
+
+#resources-container {
+ transition: transform 0.5s ease-in-out;
+ padding-left: 0;
+ padding-right: 0;
+
+ @media (max-width: $screen-xs-max) {
+ position: absolute;
+ width: 100%;
+ left: 100%;
+ top: 0;
+ z-index: $z-index-4;
+ border-right: 1px solid $gray-lighter;
+
+ &.show {
+ transform: translate(-100%);
+ }
+ }
+
+}
diff --git a/src/styles/sass/ads-sass/general-components.scss b/src/styles/sass/ads-sass/general-components.scss
index 8e2ea6c0e..7dbea792a 100644
--- a/src/styles/sass/ads-sass/general-components.scss
+++ b/src/styles/sass/ads-sass/general-components.scss
@@ -1,7 +1,3 @@
-#app-container {
- will-change: transform;
-}
-
#body-template-container {
height: 100%;
}
diff --git a/src/styles/sass/ads-sass/page-managers.scss b/src/styles/sass/ads-sass/page-managers.scss
index f9b2654bb..172f68f7a 100644
--- a/src/styles/sass/ads-sass/page-managers.scss
+++ b/src/styles/sass/ads-sass/page-managers.scss
@@ -237,6 +237,10 @@ Styles for Abstract Page
margin: 0px 20px 0px 20px;
}
+ @media only screen and (max-width: $screen-xs-max) {
+ font-size: large;
+ }
+
li {
margin: 0 0 1% 6%;
}
diff --git a/src/styles/sass/ads-sass/sidebar.scss b/src/styles/sass/ads-sass/sidebar.scss
index f188dd2ba..385835bbc 100644
--- a/src/styles/sass/ads-sass/sidebar.scss
+++ b/src/styles/sass/ads-sass/sidebar.scss
@@ -3,11 +3,23 @@ $sidenav-background: $body-bg;
.s-nav-button-container {
border-bottom: 1px solid darken($gray-lighter, 10%);
padding-left: 1rem;
+ padding-right: 1rem;
+ display: flex;
+ justify-content: space-between;
+
@media only screen and (min-width: $screen-md-min) {
display: none;
}
}
+#nav-button-container.sticky {
+ width: 100%;
+ position: fixed;
+ top: 0;
+ z-index: 20;
+ background-color: white;
+}
+
.s-toggle-menu {
display: block;
@media only screen and (min-width: $screen-md-min) {
diff --git a/src/styles/sass/ads-sass/widget.scss b/src/styles/sass/ads-sass/widget.scss
index 7fa5ae827..0f98a4e45 100644
--- a/src/styles/sass/ads-sass/widget.scss
+++ b/src/styles/sass/ads-sass/widget.scss
@@ -70,7 +70,7 @@ $base-loading-text-size: 1em;
color: #909090;
}
}
-div[data-widget="ShowPaperExport"] .close-circle {
+div[data-widget='ShowPaperExport'] .close-circle {
display: none;
}
@@ -89,7 +89,6 @@ div[data-widget="ShowPaperExport"] .close-circle {
padding-top: 26px;
}
-
// Resources Widget
.resources__container {
background-color: white;
@@ -128,6 +127,10 @@ div[data-widget="ShowPaperExport"] .close-circle {
& .resources__content__links {
font-size: 1em;
+
+ @media screen and (max-width: $screen-xs-max) {
+ font-size: x-large;
+ }
}
& .resources__content__link:hover {
@@ -142,6 +145,9 @@ div[data-widget="ShowPaperExport"] .close-circle {
& .resources__content__link {
position: relative;
+ @media screen and (max-width: $screen-xs-max) {
+ margin: 10px;
+ }
}
& .resources__content__link.unlock::after {