From 22b37a892e0cd12f5883c64af82bccfeb8565ce9 Mon Sep 17 00:00:00 2001 From: Akiva Gordon Date: Fri, 1 Jun 2018 12:15:37 -0400 Subject: [PATCH] Add a basic toolbar with a scrollable app section --- .gitignore | 1 + cypress/integration/app.cypress.test.js | 2 +- index.html | 69 ++++++++++++++++++++++++- 3 files changed, 69 insertions(+), 3 deletions(-) diff --git a/.gitignore b/.gitignore index 3c3629e6..c4a8e009 100644 --- a/.gitignore +++ b/.gitignore @@ -1 +1,2 @@ node_modules +cypress/screenshots diff --git a/cypress/integration/app.cypress.test.js b/cypress/integration/app.cypress.test.js index e821a543..8768271a 100644 --- a/cypress/integration/app.cypress.test.js +++ b/cypress/integration/app.cypress.test.js @@ -11,7 +11,7 @@ describe('app', () => { }) it('loads in the next page when scrolling down', () => { - cy.get('#js-app').scrollTo(0, 1000) + cy.get('#js-app').scrollTo(0, 3000) cy.contains('וְאֵ֛ת כָּל־רֶ֥מֶשׂ הָֽאֲדָמָ֖ה לְמִינֵ֑הוּ וַיַּ֥רְא אֱלֹהִ֖ים כִּי־טֽוֹב׃') }) diff --git a/index.html b/index.html index 6c177854..448717cd 100644 --- a/index.html +++ b/index.html @@ -15,6 +15,7 @@ display: flex; justify-content: center; font-family: Shlomosemistam; + margin-bottom: 10em; } @@ -80,14 +81,78 @@ max-width: 8ch; } - #js-app { + .app { height: 100vh; + display: flex; + flex-direction: column; + } + + .app-toolbar { + border-bottom: 1px solid transparent; + flex-shrink: 0; + box-shadow: 0 0 8px -4px black; + padding: 5px 0; + } + + .app-body { + padding-top: 1em; overflow: auto; + font-size: 1.5em; + } + + + + + .u-page-wrap { + max-width: 550px; + margin: 0 auto; + } + + .toolbar-content { + display: flex; + } + + .toolbar-wrapper { + align-items: center; + display: flex; + } + + .toolbar-wrapper.mod-left, .toolbar-wrapper.mod-right { + flex: 1; + } + + .toolbar-wrapper.mod-right { + justify-content: flex-end; } -
+
+
+
+
+
+
Toggle
+
+
+
+
+ Parsha-picker +
+
+
+
+ + GitHub + +
+
+
+ + +
+
+