From 7ea67142489b8a32df921ddd25932d7383930159 Mon Sep 17 00:00:00 2001 From: Aidan Feldman Date: Tue, 3 Jul 2018 12:51:47 -0400 Subject: [PATCH] remove column stickiness The stickiness behavior is buggy, and I don't actually think it improves the user experience. --- src/components/Main/App.jsx | 16 +- src/components/Sticky/Sticky.jsx | 37 --- src/components/Sticky/Sticky.scss | 117 --------- src/components/Sticky/Sticky.test.jsx | 28 -- src/components/Sticky/index.js | 2 - src/components/Sticky/sidebar.js | 352 -------------------------- src/components/Sticky/sidebar.test.js | 240 ------------------ src/components/index.js | 2 - src/eqip.scss | 1 - src/sass/phone.scss | 4 - src/sass/print.scss | 4 - src/sass/tablet.scss | 24 -- src/views/Form/Form.jsx | 3 - 13 files changed, 5 insertions(+), 825 deletions(-) delete mode 100644 src/components/Sticky/Sticky.jsx delete mode 100644 src/components/Sticky/Sticky.scss delete mode 100644 src/components/Sticky/Sticky.test.jsx delete mode 100644 src/components/Sticky/index.js delete mode 100644 src/components/Sticky/sidebar.js delete mode 100644 src/components/Sticky/sidebar.test.js diff --git a/src/components/Main/App.jsx b/src/components/Main/App.jsx index f6a561be2..2c1beba81 100644 --- a/src/components/Main/App.jsx +++ b/src/components/Main/App.jsx @@ -1,6 +1,6 @@ import React from 'react' import { i18n } from '../../config' -import { SectionTitle, ProgressBar, Sticky, ScoreCard, Navigation, NavigationToggle } from '..' +import { SectionTitle, ProgressBar, ScoreCard, Navigation, NavigationToggle } from '..' import { Introduction, Show } from '../Form' import Logout from '../Navigation/Logout' import StickyHeader from '../Sticky/StickyHeader' @@ -141,20 +141,14 @@ class App extends React.Component {
- - - - - + + +  
- - {this.props.children} - + {this.props.children}  
diff --git a/src/components/Sticky/Sticky.jsx b/src/components/Sticky/Sticky.jsx deleted file mode 100644 index 7d3872a78..000000000 --- a/src/components/Sticky/Sticky.jsx +++ /dev/null @@ -1,37 +0,0 @@ -import React from 'react' -import { sidebar } from './sidebar' - -export default class Sticky extends React.Component { - componentDidMount () { - this.sidebar = new sidebar(this.props.container, this.props.content, this.props.options) - this.sidebar.on() - } - - componentWillUnmount () { - if (this.sidebar) { - this.sidebar.off() - } - } - - render () { - const log = this.props.options.log - ?
- : null - return ( -
-
-
- {this.props.children} -
-
- {log} -
- ) - } -} - -Sticky.defaultProps = { - container: '.eapp-core .sticky > .contents', - content: '.sticky > .contents', - options: {} -} diff --git a/src/components/Sticky/Sticky.scss b/src/components/Sticky/Sticky.scss deleted file mode 100644 index 38c6ebc57..000000000 --- a/src/components/Sticky/Sticky.scss +++ /dev/null @@ -1,117 +0,0 @@ -.sticky { - position: relative; - - .contents { - position: absolute; - } -} - -.sidebar-top-fixed { - position: fixed !important; -} - -.sidebar-bottom-fixed { - position: fixed !important; - bottom: 0; -} - -.sidebar-log { - position: fixed; - bottom: 30rem; - right: 1rem; - min-height: 23rem; - min-width: 45rem; - background-color: #000; - color: #39e617; - opacity: 0.8; - padding: 1rem; - border-radius: 4px; - font-size: smaller; - z-index: 3; -} - -@keyframes navigation-top-fix { - 0% { - margin-top: -5.4rem; - } - - 100% { - margin-top: 0; - } -} - -@keyframes navigation-bottom-fix { - 0% { - margin-bottom: -2rem; - } - - 100% { - margin-bottom: 0; - } -} - -.eapp-navigation { - .sticky .contents { - width: 31.25rem; - - &.sidebar-top-fixed { - top: 5.4rem; - // animation-name: navigation-top-fix; - // animation-duration: 0.5s; - // animation-fill-mode: forwards; - // animation-iteration-count: 1; - } - - &.sidebar-bottom-fixed { - // animation-name: navigation-bottom-fix; - // animation-duration: 0.5s; - // animation-fill-mode: forwards; - // animation-iteration-count: 1; - } - } -} - -@keyframes core-top-fix { - 0% { - margin-top: -10rem; - } - - 100% { - margin-top: 0; - } -} - -@keyframes core-bottom-fix { - 0% { - margin-bottom: -2rem; - } - - 100% { - margin-bottom: 0; - } -} - -.eapp-core { - .sticky .contents { - // &.sidebar-scrolling-up, - // &.sidebar-scrolling-down, - &.sidebar-top-fixed, - &.sidebar-bottom-fixed { - position: fixed !important; - width: 44%; - transition: top 100ms ease-in; - transition: bottom 100ms ease-in; - } - - &.sidebar-top-fixed { - position: fixed !important; - top: 10.5rem; - bottom: unset; - } - - &.sidebar-bottom-fixed { - top: unset; - bottom: 0; - } - } -} diff --git a/src/components/Sticky/Sticky.test.jsx b/src/components/Sticky/Sticky.test.jsx deleted file mode 100644 index 687a5a19e..000000000 --- a/src/components/Sticky/Sticky.test.jsx +++ /dev/null @@ -1,28 +0,0 @@ -import React from 'react' -import { mount } from 'enzyme' -import Sticky from './Sticky' - -describe('The sticky component', () => { - it('can mount', () => { - const component = mount(
) - expect(component.find('.sticky .contents').length).toBe(1) - }) - - it('can display debug stats', () => { - const props = { - options: { - log: '.test' - } - } - const component = mount(
) - expect(component.find('.sidebar-log').length).toBe(1) - }) - - it('can unmount', () => { - const component = mount(
) - // As far as I can tell there is no good way to check if an event listener - // is registered. Chrome has `getEventListeners()` but is specific only to - // DevTools. - component.unmount() - }) -}) diff --git a/src/components/Sticky/index.js b/src/components/Sticky/index.js deleted file mode 100644 index d6849879f..000000000 --- a/src/components/Sticky/index.js +++ /dev/null @@ -1,2 +0,0 @@ -import Sticky from './Sticky' -export default Sticky diff --git a/src/components/Sticky/sidebar.js b/src/components/Sticky/sidebar.js deleted file mode 100644 index 968691f58..000000000 --- a/src/components/Sticky/sidebar.js +++ /dev/null @@ -1,352 +0,0 @@ -/** - * Create a sidebar which is always in view no matter the positioning within - * the viewport nor the height of the content. - */ -export class sidebar { - constructor (containerSelector, contentSelector, options = {}) { - this.self = this - this.containerSelector = containerSelector - this.contentSelector = contentSelector - this.options = options - this.last = 0 - this.ticking = false - this.world = { - forced: options.forced || true, - tearing: options.tearing || false, - tolerance: options.tolerance || 110, - lastScrollTop: 0, - direction: 'DOWN', - boundaries: {} - } - } - - init () { - if (!this.workspace) { - this.workspace = this.options.workspace ? document.querySelector(this.options.workspace) : window - } - if (!this.container) { - this.container = document.querySelector(this.containerSelector) - } - if (!this.content) { - this.content = document.querySelector(this.contentSelector) - } - } - - on () { - this.init() - this.workspace.addEventListener('scroll', this.onScroll.bind(this)) - } - - off () { - this.init() - this.workspace.removeEventListener('scroll', this.onScroll.bind(this)) - } - - onScroll () { - this.init() - if (canBeSticky(this.container, this.content, this.options)) { - this.last = window.scrollY - if (!this.ticking) { - this.ticking = true - - // Direction - let sd = scrollDirection(this.workspace, this.world.lastScrollTop) - this.world.lastScrollTop = sd.scrollTop - this.world.direction = sd.direction - - // Boundaries - this.world.boundaries = boundaries(this.container, this.content) - - // Positioning - applyPositioning(this.container, this.content, this.world, this.options) - this.ticking = false - } - } else { - unstick(this.content) - } - - if (this.options.callback) { - this.options.callback(this.content, this.world) - } - - debug( - this.options.log, - 'world lastScrollTop: ' + this.world.lastScrollTop + '
' + - 'world direction: ' + this.world.direction + '
' + - 'world boundaries containerTop: ' + this.world.boundaries.containerTop + '
' + - 'world boundaries containerHeight: ' + this.world.boundaries.containerHeight + '
' + - 'world boundaries containerBottom: ' + this.world.boundaries.containerBottom + '
' + - 'world boundaries contentHeight: ' + this.world.boundaries.contentHeight + '
' + - 'world boundaries windowHeight: ' + this.world.boundaries.windowHeight + '
' + - 'positioning applied' + '
' + - 'content position: ' + this.content.style.position + '
' + - 'content top: ' + this.content.style.top + '
' + - 'content class: ' + this.content.className) - } -} - -/** - * Simple debugging function. - */ -const debug = (selector, str) => { - let c = document.querySelector(selector) - if (c) { - c.innerHTML = str - } -} - -/** - * Basic test to see if the content qualifies for - * sticky application. - */ -export const canBeSticky = (container, content, options) => { - const outer = height(container) - const inner = height(content) - const win = window.innerHeight - if (options.ignoreWindowComparison) { - return inner < outer - } - return inner < outer && inner >= win -} - -/** - * Determine scroll direction and current top. - */ -export const scrollDirection = (workspace, previous) => { - const workspaceScrollTop = scrollTop(workspace) - const direction = workspaceScrollTop > previous ? 'DOWN' : 'UP' - return { - scrollTop: workspaceScrollTop, - direction: direction - } -} - -/** - * Computes world boundaries. - */ -export const boundaries = (container, content) => { - const containerTop = top(container) - const containerHeight = container.offsetHeight - const contentHeight = content.offsetHeight - const windowHeight = window.innerHeight - return { - containerTop: containerTop, - containerBottom: containerTop + containerHeight, - containerHeight: containerHeight, - contentHeight: contentHeight, - windowHeight: windowHeight - } -} - -/** - * Apply positioning to the content based on - * the current world view. - */ -export const applyPositioning = (container, content, world, options) => { - if (world.lastScrollTop > world.boundaries.containerTop && - world.lastScrollTop < world.boundaries.containerBottom) { - if (world.direction === 'DOWN') { - scrollDown(container, content, world, options) - } else { - scrollUp(container, content, world, options) - } - } else if (world.lastScrollTop < world.boundaries.containerTop) { - content.style.top = '' - removeClass(content, 'sidebar-top-fixed') - } -} - -/** - * Handles when scrolling down - */ -export const scrollDown = (container, content, world, options) => { - const windowScroll = world.lastScrollTop + world.boundaries.windowHeight - let contentOffsetTop = 0 - - if (hasClass(content, 'sidebar-scrolling-up')) { - removeClass(content, 'sidebar-scrolling-up') - addClass(content, 'sidebar-scrolling-down') - } else if (hasClass(content, 'sidebar-top-fixed')) { - contentOffsetTop = top(content) + world.boundaries.containerTop - removeClass(content, 'sidebar-top-fixed') - if (world.tearing) { - content.style.position = 'absolute' - content.style.top = '' + contentOffsetTop + 'px' - } - addClass(content, 'sidebar-scrolling-down') - } - - if (hasClass(content, 'sidebar-scrolling-down')) { - if (windowScroll > world.tolerance + top(content) + world.boundaries.contentHeight) { - content.style.position = '' - content.style.top = '' - - if (options.ignoreWindowComparison && world.boundaries.contentHeight < world.boundaries.windowHeight) { - addClass(content, 'sidebar-top-fixed') - } else { - addClass(content, 'sidebar-bottom-fixed') - } - - removeClass(content, 'sidebar-scrolling-down') - } - } else { - if (world.tearing && windowScroll > world.boundaries.containerBottom) { - removeClass(content, 'sidebar-bottom-fixed') - if (world.tearing) { - content.style.position = 'absolute' - contentOffsetTop = world.boundaries.containerHeight - world.boundaries.contentHeight - content.style.top = '' + contentOffsetTop + 'px' - } - } else if (windowScroll > world.tolerance + world.boundaries.contentHeight + world.boundaries.containerTop) { - content.style.position = '' - content.style.top = '' - if (options.ignoreWindowComparison && world.boundaries.contentHeight < world.boundaries.windowHeight) { - if (!hasClass(content, 'sidebar-top-fixed')) { - addClass(content, 'sidebar-top-fixed') - removeClass(content, 'sidebar-bottom-fixed') - } - } else { - removeClass(content, 'sidebar-top-fixed') - addClass(content, 'sidebar-bottom-fixed') - } - } - } -} - -/** - * Handles when scrolling up - */ -export const scrollUp = (container, content, world) => { - if (hasClass(content, 'sidebar-scrolling-down')) { - removeClass(content, 'sidebar-scrolling-down') - addClass(content, 'sidebar-scrolling-up') - } else if (hasClass(content, 'sidebar-bottom-fixed')) { - var contentOffsetTop = top(content) - world.boundaries.containerTop - content.style.position = 'absolute' - content.style.top = '' + contentOffsetTop + 'px' - removeClass(content, 'sidebar-bottom-fixed') - addClass(content, 'sidebar-scrolling-up') - } - - if (hasClass(content, 'sidebar-scrolling-up')) { - if (top(content) > 0) { - content.style.position = '' - content.style.top = '' - addClass(content, 'sidebar-top-fixed') - removeClass(content, 'sidebar-scrolling-up') - } - } else { - if (world.tearing && world.lastScrollTop > world.boundaries.containerTop) { - content.style.position = '' - removeClass(content, 'sidebar-top-fixed') - } else if (world.lastScrollTop - world.tolerance < world.boundaries.containerBottom - world.boundaries.contentHeight) { - content.style.position = '' - content.style.top = '' - addClass(content, 'sidebar-top-fixed') - removeClass(content, 'sidebar-scrolling-up') - } - } -} - -/** - * Return element offset. - */ -export const offset = (element) => { - if (element) { - const rect = element.getBoundingClientRect() - return { - top: rect.top + document.body.scrollTop, - left: rect.left + document.body.scrollLeft - } - } - return { top: 0, bottom: 0 } -} - -/** - * Return element computed height. - */ -export const height = (element) => { - let h = 0 - if (element) { - const style = window.getComputedStyle(element, null) - h = parseInt(style.height) - if (isNaN(h)) { - h = parseInt(style['min-height']) - } - } - return isNaN(h) ? 0 : h -} - -/** - * Return element top position. - */ -export const top = (element) => { - return offset(element).top -} - -/** - * Return the scroll top position. - */ -export const scrollTop = (element) => { - if (element.scrollTop) { - return element.scrollTop - } - - if (window.pageYOffset !== undefined) { - return window.pageYOffset - } - - return (document.documentElement || document.body.parentNode || document.body).scrollTop -} - -/** - * Add a class to the element. - */ -export const addClass = (element, className) => { - if (element.classList) { - element.classList.add(className) - } else { - element.className += ' ' + className - } -} - -/** - * Remove a class from the element. - */ -export const removeClass = (element, className) => { - if (element.classList) { - element.classList.remove(className) - } else { - element.className = element.className.replace(new RegExp('(^|\\b)' + className.split(' ').join('|') + '(\\b|$)', 'gi'), ' ') - } -} - -/** - * Determine if element has a class name applied. - */ -export const hasClass = (element, className) => { - if (element.classList) { - return element.classList.contains(className) - } - return new RegExp('(^| )' + className + '( |$)', 'gi').test(element.className) -} - -export const unstick = (element) => { - if (!element) { - return - } - element.style.position = '' - element.style.top = '' - removeClass(element, 'sidebar-scrolling-down') - removeClass(element, 'sidebar-bottom-fixed') - removeClass(element, 'sidebar-scrolling-up') - removeClass(element, 'sidebar-top-fixed') - removeClass(element, 'sidebar-scrolling-up') -} - -export const unstickAll = () => { - const elements = document.querySelectorAll('.sticky > .contents') - for (const el of elements) { - unstick(el) - } -} diff --git a/src/components/Sticky/sidebar.test.js b/src/components/Sticky/sidebar.test.js deleted file mode 100644 index f88eb2919..000000000 --- a/src/components/Sticky/sidebar.test.js +++ /dev/null @@ -1,240 +0,0 @@ -import { canBeSticky, - scrollDirection, - boundaries, - applyPositioning, - scrollUp, - offset, - height, - top, - scrollTop, - addClass, - removeClass, - hasClass } from './sidebar' - -describe('The sidebar stickiness', () => { - it('can be sticky', () => { - let container = document.createElement('div') - let content = document.createElement('div') - let options = {} - expect(canBeSticky(container, content, options)).toBe(false) - - container.style.height = '64px' - content.style.height = '32px' - window.innerHeight = 10 - expect(canBeSticky(container, content, options)).toBe(true) - - container.style.height = '64px' - content.style.height = '32px' - window.innerHeight = 200 - expect(canBeSticky(container, content, { ignoreWindowComparison: true })).toBe(true) - }) - - it('can determine scrolling direction', () => { - let workspace = {scrollTop: 100} - expect(scrollDirection(workspace, 0).direction).toBe('DOWN') - expect(scrollDirection(workspace, 200).direction).toBe('UP') - }) - - it('can get boundaries', () => { - window.innerHeight = 200 - let container = document.createElement('div') - let content = { offsetHeight: 30 } - const b = boundaries(container, content) - expect(b.windowHeight).toBe(200) - expect(b.containerTop).toBe(0) - expect(b.containerBottom).toBe(0) - expect(b.containerHeight).toBe(0) - expect(b.contentHeight).toBe(30) - }) - - it('can apply positioning', () => { - let container = document.createElement('div') - let content = document.createElement('div') - let options = {} - let world = { - direction: 'DOWN', - lastScrollTop: 1, - tolerance: 0, - boundaries: { - containerTop: 0, - containerBottom: 2, - contentHeight: 0 - } - } - - content.classList.add('sidebar-scrolling-down') - applyPositioning(container, content, world, options) - expect(hasClass(content, 'sidebar-scrolling-down')).toBe(true) - - content.classList.remove('sidebar-scrolling-down') - world.direction = 'UP' - applyPositioning(container, content, world, options) - expect(hasClass(content, 'sidebar-top-fixed')).toBe(true) - - world.lastScrollTop = 0 - world.boundaries.containerTop = 1 - applyPositioning(container, content, world, options) - expect(hasClass(content, 'sidebar-top-fixed')).toBe(false) - }) - - it('can scroll down with nothing', () => { - let container = document.createElement('div') - let content = document.createElement('div') - const world = { - tolerance: 100, - lastScrollTop: 0, - boundaries: { - containerTop: 0, - containerBottom: 0, - containerHeight: 0 - } - } - scrollUp(container, content, world) - expect(hasClass(content, 'sidebar-top-fixed')).toBe(false) - expect(hasClass(content, 'sidebar-scrolling-up')).toBe(false) - }) - - it('can scroll down with after scrolling down', () => { - let container = document.createElement('div') - let content = document.createElement('div') - content.classList.add('sidebar-scrolling-down') - const world = { - tolerance: 100, - lastScrollTop: 0, - boundaries: { - containerTop: 0, - containerBottom: 0, - containerHeight: 0 - } - } - scrollUp(container, content, world) - expect(hasClass(content, 'sidebar-top-fixed')).toBe(false) - expect(hasClass(content, 'sidebar-scrolling-down')).toBe(false) - expect(hasClass(content, 'sidebar-scrolling-up')).toBe(true) - }) - - it('can scroll down with after bottomed out', () => { - let container = document.createElement('div') - let content = document.createElement('div') - content.classList.add('sidebar-bottom-fixed') - const world = { - tolerance: 100, - lastScrollTop: 0, - boundaries: { - containerTop: 0, - containerBottom: 0, - containerHeight: 0 - } - } - scrollUp(container, content, world) - expect(hasClass(content, 'sidebar-bottom-fixed')).toBe(false) - expect(hasClass(content, 'sidebar-top-fixed')).toBe(false) - expect(hasClass(content, 'sidebar-scrolling-down')).toBe(false) - expect(hasClass(content, 'sidebar-scrolling-up')).toBe(true) - }) - - it('can scroll up with nothing', () => { - let container = document.createElement('div') - let content = document.createElement('div') - const world = { - tolerance: 100, - lastScrollTop: 0, - boundaries: { - containerTop: 0, - containerBottom: 0, - containerHeight: 0 - } - } - scrollUp(container, content, world) - expect(hasClass(content, 'sidebar-top-fixed')).toBe(false) - expect(hasClass(content, 'sidebar-scrolling-up')).toBe(false) - }) - - it('can scroll up with after scrolling down', () => { - let container = document.createElement('div') - let content = document.createElement('div') - content.classList.add('sidebar-scrolling-down') - const world = { - tolerance: 100, - lastScrollTop: 0, - boundaries: { - containerTop: 0, - containerBottom: 0, - containerHeight: 0 - } - } - scrollUp(container, content, world) - expect(hasClass(content, 'sidebar-top-fixed')).toBe(false) - expect(hasClass(content, 'sidebar-scrolling-down')).toBe(false) - expect(hasClass(content, 'sidebar-scrolling-up')).toBe(true) - }) - - it('can scroll up with after bottomed out', () => { - let container = document.createElement('div') - let content = document.createElement('div') - content.classList.add('sidebar-bottom-fixed') - const world = { - tolerance: 100, - lastScrollTop: 0, - boundaries: { - containerTop: 0, - containerBottom: 0, - containerHeight: 0 - } - } - scrollUp(container, content, world) - expect(hasClass(content, 'sidebar-bottom-fixed')).toBe(false) - expect(hasClass(content, 'sidebar-top-fixed')).toBe(false) - expect(hasClass(content, 'sidebar-scrolling-down')).toBe(false) - expect(hasClass(content, 'sidebar-scrolling-up')).toBe(true) - }) - - it('can return the offset of the element', () => { - let el = document.createElement('div') - expect(offset(el).top).toBe(0) - expect(offset(null).top).toBe(0) - }) - - it('can return the height of the element', () => { - let el = document.createElement('div') - expect(height(el)).toBe(0) - }) - - it('can return the top of the element', () => { - let el = document.createElement('div') - expect(top(el)).toBe(0) - }) - - it('can return the scroll top position', () => { - let withScrollTop = { - scrollTop: 42 - } - expect(scrollTop(withScrollTop)).toBe(42) - - window.pageYOffset = 100 - expect(scrollTop({})).toBe(100) - window.pageYOffset = null - }) - - it('can add a class', () => { - let el = document.createElement('div') - el.classList.add('existing-class') - addClass(el, 'nonexisting-class') - expect(hasClass(el, 'existing-class')).toBe(true) - expect(hasClass(el, 'nonexisting-class')).toBe(true) - }) - - it('can remove a class', () => { - let el = document.createElement('div') - el.classList.add('existing-class') - removeClass(el, 'existing-class') - expect(hasClass(el, 'existing-class')).toBe(false) - }) - - it('can tell if class name exists on element', () => { - let el = document.createElement('div') - el.classList.add('existing-class') - expect(hasClass(el, 'existing-class')).toBe(true) - expect(hasClass(el, 'nonexisting-class')).toBe(false) - }) -}) diff --git a/src/components/index.js b/src/components/index.js index c3300d672..6a663f476 100644 --- a/src/components/index.js +++ b/src/components/index.js @@ -5,7 +5,6 @@ import { SectionTitle } from './SectionTitle' import Section from './Section' import { SavedIndicator } from './SavedIndicator' import { ProgressBar } from './ProgressBar' -import Sticky from './Sticky' import { TimeoutWarning } from './Form' export { @@ -17,6 +16,5 @@ export { Section, SavedIndicator, ProgressBar, - Sticky, TimeoutWarning } diff --git a/src/eqip.scss b/src/eqip.scss index adb279363..75cc2cf7d 100644 --- a/src/eqip.scss +++ b/src/eqip.scss @@ -139,7 +139,6 @@ @import 'components/Section/SubstanceUse/Drugs/OrderedTreatment'; @import 'components/Section/SubstanceUse/SubstanceUse'; @import 'components/SectionTitle/SectionTitle'; -@import 'components/Sticky/Sticky'; @import 'components/TwoFactor/TwoFactor'; // VIEWS @import 'views/Form/Form'; diff --git a/src/sass/phone.scss b/src/sass/phone.scss index 8d2f27ada..288239560 100644 --- a/src/sass/phone.scss +++ b/src/sass/phone.scss @@ -206,10 +206,6 @@ .eapp-structure-wrap > .eapp-structure-row > .eapp-navigation { width: 100%; - .sticky .contents { - width: 100%; - } - .form-navigation { transform: translateX(-100%); -webkit-transform: translateX(-100%); diff --git a/src/sass/print.scss b/src/sass/print.scss index e4cc713ae..758f9088c 100644 --- a/src/sass/print.scss +++ b/src/sass/print.scss @@ -140,10 +140,6 @@ page-break-after: always; } - .sticky .contents { - position: static !important; - } - h1, h2, h3, diff --git a/src/sass/tablet.scss b/src/sass/tablet.scss index cbeb4deb9..7226d59e9 100644 --- a/src/sass/tablet.scss +++ b/src/sass/tablet.scss @@ -17,12 +17,6 @@ .eapp-structure-wrap .eapp-structure-row .eapp-structure-right { padding: 0; - .sticky { - .contents { - width: 100%; - } - } - > .title, .eapp-form { width: 62%; @@ -72,23 +66,5 @@ padding-left: 1rem; padding-right: 1rem; } - - .sidebar-top-fixed, - .sidebar-bottom-fixed { - .eapp-form { - width: 73%; - min-width: unset; - max-width: unset; - } - } - - .sidebar-top-fixed { - bottom: unset; - } - - .sidebar-bottom-fixed { - top: unset; - bottom: 0; - } } } diff --git a/src/views/Form/Form.jsx b/src/views/Form/Form.jsx index 4b560d06b..6b272d03a 100644 --- a/src/views/Form/Form.jsx +++ b/src/views/Form/Form.jsx @@ -8,7 +8,6 @@ import { Section, SavedIndicator, TimeoutWarning } from '../../components' import { env } from '../../config' import { findPosition, parseFormUrl } from '../../components/Navigation/navigation-helpers' import { tokenError } from '../../actions/AuthActions' -import { unstickAll } from '../../components/Sticky/sidebar' import { updateSection } from '../../actions/SectionActions' // The concept is that we have three different inputs: @@ -62,8 +61,6 @@ class Form extends React.Component { save (section, subsection) { window.scroll(0, findPosition(document.getElementById('scrollTo'))) - unstickAll() - saveSection(this.props.application, section, subsection, this.props.dispatch) }