From 5b235f0c12c822268da55247bbff678ac430e202 Mon Sep 17 00:00:00 2001 From: Jennifer Chen Date: Tue, 30 Mar 2021 07:34:56 -0700 Subject: [PATCH 1/2] Add demo to config --- src/config/shim.js | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) 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( From 8b3b669280eac2aa911baa2fa37764d97710db6c Mon Sep 17 00:00:00 2001 From: Jennifer Chen Date: Tue, 23 Mar 2021 16:01:15 -0700 Subject: [PATCH 2/2] Abstract page link to full text sources --- src/index.html | 2 +- src/js/apps/discovery/main.js | 9 +++ .../abstract-page-layout.html | 10 +-- .../abstract_page_manager.js | 65 +++++++++++++++++++ .../sass/ads-sass/abstract-page-widgets.scss | 29 +++++++++ .../sass/ads-sass/general-components.scss | 4 -- src/styles/sass/ads-sass/page-managers.scss | 4 ++ src/styles/sass/ads-sass/sidebar.scss | 12 ++++ src/styles/sass/ads-sass/widget.scss | 10 ++- 9 files changed, 133 insertions(+), 12 deletions(-) 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 @@ - + -
- -
+
@@ -34,9 +35,8 @@
- +
-
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 {