prototype implementation of narratives for mobile #857

jameshadfield · 2020-01-28T03:47:17Z

Current status: very early prototype.

Needs extensive testing and addition of features. Not tested with sidebar (theme) customisations.

jameshadfield · 2020-01-29T22:10:16Z

src/components/narrative/MobileNarrativeDisplay.js

+      return (
+        <>
+          <MobileContentContainer height={contentHeight}>
+            {this.pageNarrativeContent()}


block 0 is the title page & shouldn't display viz / main-markdown (see sketch file for more notes if needed). It'll probably need special styling too to correctly display the header / authors etc.

Is this still relevant? I don't know that I fully understand what you're saying here. Sorry I missed it earlier.

jameshadfield · 2020-01-29T22:19:55Z

src/components/narrative/MobileNarrativeDisplay.js

+    </MobileBannerBottom>
+  )
+
+  PreviousButton = (props) => (


This is cool - I didn't know fat-arrow functions would bind this when used inside classes.

Me neither!

jameshadfield · 2020-01-30T01:32:17Z

src/components/narrative/MobileNarrativeDisplay.js

@@ -89,9 +89,7 @@ class MobileNarrativeDisplay extends React.Component {
    }
    const block = this.props.blocks[this.props.currentInFocusBlockIdx];
    return (
-      <div
-        id={`MobileNarrativeBlock_${this.props.currentInFocusBlockIdx}`}


~~This is used for scrolling to a particular block via the URL query parameter. While this doesn't always work (bugs separate to this work) I'd like to preserve these id's here please.~~ Actually this isn't needed for mobile since we can just jump to the page. Disregard.

When using the previous and next buttons to navigate between pages on mobile narratives view, jump to the top of the progress bar rather than the top of the narrative content.

@emmahodcroft

This fixes navigation progress buttons to not align properly in flexbox container when browsing using Internet Explorer (any version). This is a browser bug, so called "flexbug-15" as described in: https://github.com/philipwalton/flexbugs#flexbug-15 I applied the workaround as described there. Originally reported by @emmahodcroft at: #655

When the user reaches the end of the narrative page, allow them to exit the page by clicking on the progress bar or clicking on the previous button.

Don't allow paragraphs on mobile narratives to go to the right edge of the screen.

Standardize font size across paragraphs on mobile narratives.

…g-15 fix(styles): navigation progress buttons to not align properly on IE

We can use array indexes as keys because the arrays are not modified.

Previous logic of an early return caused the `scrollToTop` to not fire when we were going to a main-markdown-page

jameshadfield · 2020-01-31T06:11:04Z

Thanks for this work @kairstenfay. I'm merging & releasing this now as it's a huge improvement over previous versions. Will make issues for the remaining bugs / work to do.

kairstenfay force-pushed the narrative-mobile branch from ef696a4 to a27d0ff Compare January 29, 2020 02:58

jameshadfield temporarily deployed to auspice-narrative-mobil-gafj5i January 29, 2020 03:35 Inactive

jameshadfield temporarily deployed to auspice-narrative-mobil-gafj5i January 29, 2020 20:34 Inactive

jameshadfield temporarily deployed to auspice-narrative-mobil-gafj5i January 29, 2020 21:26 Inactive

kairstenfay force-pushed the narrative-mobile branch from fcf0346 to 408c5d0 Compare January 29, 2020 21:43

jameshadfield temporarily deployed to auspice-narrative-mobil-gafj5i January 29, 2020 21:43 Inactive

kairstenfay force-pushed the narrative-mobile branch from 408c5d0 to b5623af Compare January 29, 2020 21:46

jameshadfield temporarily deployed to auspice-narrative-mobil-gafj5i January 29, 2020 21:46 Inactive

kairstenfay force-pushed the narrative-mobile branch from b5623af to 2db00b7 Compare January 29, 2020 21:51

jameshadfield temporarily deployed to auspice-narrative-mobil-gafj5i January 29, 2020 21:51 Inactive

kairstenfay force-pushed the narrative-mobile branch from 2db00b7 to 58903f6 Compare January 29, 2020 21:52

jameshadfield temporarily deployed to auspice-narrative-mobil-gafj5i January 29, 2020 21:52 Inactive

jameshadfield commented Jan 29, 2020

View reviewed changes

jameshadfield temporarily deployed to auspice-narrative-mobil-gafj5i January 29, 2020 22:12 Inactive

kairstenfay force-pushed the narrative-mobile branch from 01cc998 to 35f9975 Compare January 29, 2020 22:16

jameshadfield temporarily deployed to auspice-narrative-mobil-gafj5i January 29, 2020 22:17 Inactive

jameshadfield commented Jan 29, 2020

View reviewed changes

jameshadfield temporarily deployed to auspice-narrative-mobil-gafj5i January 29, 2020 22:37 Inactive

jameshadfield temporarily deployed to auspice-narrative-mobil-gafj5i January 30, 2020 01:16 Inactive

kairstenfay force-pushed the narrative-mobile branch from bb9e03d to 19e9387 Compare January 30, 2020 01:24

jameshadfield temporarily deployed to auspice-narrative-mobil-gafj5i January 30, 2020 01:25 Inactive

kairstenfay force-pushed the narrative-mobile branch from 19e9387 to 06b557e Compare January 30, 2020 01:27

jameshadfield temporarily deployed to auspice-narrative-mobil-gafj5i January 30, 2020 01:27 Inactive

kairstenfay force-pushed the narrative-mobile branch from 06b557e to 06e2297 Compare January 30, 2020 01:28

jameshadfield temporarily deployed to auspice-narrative-mobil-gafj5i January 30, 2020 01:28 Inactive

jameshadfield commented Jan 30, 2020

View reviewed changes

jameshadfield temporarily deployed to auspice-narrative-mobil-gafj5i January 30, 2020 01:59 Inactive

jameshadfield temporarily deployed to auspice-narrative-mobil-gafj5i January 30, 2020 02:02 Inactive

jameshadfield temporarily deployed to auspice-narrative-mobil-gafj5i January 30, 2020 02:15 Inactive

jameshadfield temporarily deployed to auspice-narrative-mobil-gafj5i January 30, 2020 02:30 Inactive

narratives: Jump to progress bar on nav click

c288c23

When using the previous and next buttons to navigate between pages on mobile narratives view, jump to the top of the progress bar rather than the top of the narrative content.

kairstenfay force-pushed the narrative-mobile branch from d0b5333 to c288c23 Compare January 30, 2020 22:38

jameshadfield temporarily deployed to auspice-narrative-mobil-gafj5i January 30, 2020 22:38 Inactive

ivan-aksamentov and others added 2 commits January 30, 2020 23:51

narratives: Fix mobile end of narrative bug

fee5a60

When the user reaches the end of the narrative page, allow them to exit the page by clicking on the progress bar or clicking on the previous button.

jameshadfield temporarily deployed to auspice-narrative-mobil-gafj5i January 31, 2020 02:33 Inactive

jameshadfield temporarily deployed to auspice-narrative-mobil-gafj5i January 31, 2020 03:01 Inactive

jameshadfield temporarily deployed to auspice-narrative-mobil-gafj5i January 31, 2020 03:36 Inactive

jameshadfield temporarily deployed to auspice-narrative-mobil-gafj5i January 31, 2020 03:39 Inactive

kairstenfay force-pushed the narrative-mobile branch from fc079a6 to 9760833 Compare January 31, 2020 03:43

jameshadfield temporarily deployed to auspice-narrative-mobil-gafj5i January 31, 2020 03:44 Inactive

kairstenfay added 2 commits January 30, 2020 19:45

narratives: Set p, li width at 90% on mobile

eca3fb3

Don't allow paragraphs on mobile narratives to go to the right edge of the screen.

narratives: Add font styling on mobile

b2b0015

Standardize font size across paragraphs on mobile narratives.

kairstenfay force-pushed the narrative-mobile branch from 9760833 to b2b0015 Compare January 31, 2020 03:45

jameshadfield temporarily deployed to auspice-narrative-mobil-gafj5i January 31, 2020 03:46 Inactive

Merge pull request #875 from ivan-aksamentov/fix/nav-button-ie-flexbu…

ef595c8

…g-15 fix(styles): navigation progress buttons to not align properly on IE

jameshadfield temporarily deployed to auspice-narrative-mobil-gafj5i January 31, 2020 03:56 Inactive

jameshadfield added 2 commits January 31, 2020 18:13

fix react key errors

bc8121d

We can use array indexes as keys because the arrays are not modified.

increase font size of main-display-markdown for mobile

ff54aa8

jameshadfield deployed to auspice-narrative-mobil-gafj5i January 31, 2020 05:47 View deployment

jameshadfield added 3 commits January 31, 2020 19:07

fix main-markdown-display margins (etc) for mobile view

aabb527

bugfix: scroll to top with main-markdown-pages

3e0533b

Previous logic of an early return caused the `scrollToTop` to not fire when we were going to a main-markdown-page

explanation paragraph for mobile is different from non-mobile

e0cbff4

jameshadfield force-pushed the narrative-mobile branch from 53ce834 to e0cbff4 Compare January 31, 2020 06:09

jameshadfield temporarily deployed to auspice-narrative-mobil-gafj5i January 31, 2020 06:09 Inactive

jameshadfield marked this pull request as ready for review January 31, 2020 06:10

jameshadfield merged commit 7f0cbc1 into master Jan 31, 2020

jameshadfield deleted the narrative-mobile branch January 31, 2020 06:11

jameshadfield mentioned this pull request Jan 31, 2020

Narratives on mobile #856

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

prototype implementation of narratives for mobile #857

prototype implementation of narratives for mobile #857

jameshadfield commented Jan 28, 2020

jameshadfield Jan 29, 2020

kairstenfay Jan 31, 2020

jameshadfield Jan 29, 2020

kairstenfay Jan 31, 2020

jameshadfield Jan 30, 2020 •

edited

Loading

jameshadfield commented Jan 31, 2020

prototype implementation of narratives for mobile #857

prototype implementation of narratives for mobile #857

Conversation

jameshadfield commented Jan 28, 2020

jameshadfield Jan 29, 2020

Choose a reason for hiding this comment

kairstenfay Jan 31, 2020

Choose a reason for hiding this comment

jameshadfield Jan 29, 2020

Choose a reason for hiding this comment

kairstenfay Jan 31, 2020

Choose a reason for hiding this comment

jameshadfield Jan 30, 2020 • edited Loading

Choose a reason for hiding this comment

jameshadfield commented Jan 31, 2020

jameshadfield Jan 30, 2020 •

edited

Loading