From 330a7c56d01746c119f31bff926e9c5d8fbe1f75 Mon Sep 17 00:00:00 2001 From: Lachlan Kermode Date: Mon, 7 Mar 2022 09:11:30 -0500 Subject: [PATCH] Improved styles for timeline and card --- src/components/controls/Card.js | 2 +- src/components/controls/CardStack.js | 6 +----- src/components/controls/atoms/TelegramEmbed.js | 4 +--- src/components/time/Timeline.js | 8 +++++--- src/reducers/app.js | 2 -- src/scss/_variables.scss | 6 +++--- src/scss/card.scss | 2 +- src/scss/cardstack.scss | 11 +++++++---- src/scss/timeline.scss | 3 ++- 9 files changed, 21 insertions(+), 23 deletions(-) diff --git a/src/components/controls/Card.js b/src/components/controls/Card.js index 58d2b18..8bd3a07 100644 --- a/src/components/controls/Card.js +++ b/src/components/controls/Card.js @@ -57,7 +57,7 @@ export const generateCardLayout = { scaleFont: 1.1, }, ], - ...event.sources.flatMap((source, idx) => [ + ...event.sources.flatMap((source) => [ source.paths.map((p) => ({ kind: "media", title: "Media", diff --git a/src/components/controls/CardStack.js b/src/components/controls/CardStack.js index c5082af..7fafa40 100644 --- a/src/components/controls/CardStack.js +++ b/src/components/controls/CardStack.js @@ -146,15 +146,12 @@ class CardStack extends React.Component { render() { const { isCardstack, selected, narrative, timelineDims } = this.props; - // TODO: make '237px', which is the narrative header, less hard-coded - const height = `calc(100% - 237px - ${timelineDims.height}px)`; if (selected.length > 0) { if (!narrative) { return (
{this.renderCardStackHeader()} {this.renderCardStackContent()} @@ -167,7 +164,6 @@ class CardStack extends React.Component { ref={this.refCardStack} className={`card-stack narrative-mode ${isCardstack ? "" : " folded"}`} - style={{ height }} > {this.renderNarrativeContent()}
diff --git a/src/components/controls/atoms/TelegramEmbed.js b/src/components/controls/atoms/TelegramEmbed.js index deaca13..01d823b 100644 --- a/src/components/controls/atoms/TelegramEmbed.js +++ b/src/components/controls/atoms/TelegramEmbed.js @@ -11,9 +11,7 @@ const styles = { overflow: "hidden", }; -const containerStyles = { - marginLeft: -60, -}; +const containerStyles = {}; /** * Simple Component for Telegram embedding diff --git a/src/components/time/Timeline.js b/src/components/time/Timeline.js index a162b03..2ec6183 100644 --- a/src/components/time/Timeline.js +++ b/src/components/time/Timeline.js @@ -70,7 +70,6 @@ class Timeline extends React.Component { } // nextProps.domain.events.forEach(e => { - // console.log(e.datetime) // }); // this.props.methods.onSelect() } @@ -314,7 +313,7 @@ class Timeline extends React.Component { USE_CATEGORIES && activeCategories && activeCategories.length > 0; if (!categoriesExist) { - return this.state.dims.trackHeight / 2; + return this.state.dims.trackHeight / 1.5; } const { category } = event; @@ -363,7 +362,10 @@ class Timeline extends React.Component { let classes = `timeline-wrapper ${this.state.isFolded ? " folded" : ""}`; classes += app.narrative !== null ? " narrative-mode" : ""; const { dims } = this.state; - const foldedStyle = { bottom: this.state.isFolded ? -dims.height : 0 }; + const foldedStyle = { + bottom: this.state.isFolded ? -dims.height : 0, + left: 110, + }; const heightStyle = { height: dims.height }; const extraStyle = { ...heightStyle, ...foldedStyle }; const contentHeight = { height: dims.contentHeight }; diff --git a/src/reducers/app.js b/src/reducers/app.js index fffcd56..be85652 100644 --- a/src/reducers/app.js +++ b/src/reducers/app.js @@ -39,8 +39,6 @@ function updateHighlighted(appState, action) { } function updateTicks(appState, action) { - console.log(action); - console.log(appState); return { ...appState, timeline: { diff --git a/src/scss/_variables.scss b/src/scss/_variables.scss index 38ad42e..76e3221 100644 --- a/src/scss/_variables.scss +++ b/src/scss/_variables.scss @@ -57,14 +57,14 @@ $map-overlay: 2; $map: 1; $scene: 1; $hidden: -1; -$timeline: 3; +$timeline: 13; // platform-specific sizes $infopopup-width: 400px; $infopopup-left: 122px; $infopopup-bottom: 180px; -$card-width: 600px; -$card-right: 9px; +$card-width: 500px; +$card-right: 2px; $narrative-info-height: 205px; $narrative-info-desc-height: 153px; $timeline-height: 250px; diff --git a/src/scss/card.scss b/src/scss/card.scss index 8758dc0..4efe6f0 100644 --- a/src/scss/card.scss +++ b/src/scss/card.scss @@ -272,6 +272,6 @@ } .embedded { - width: calc(#{$card-width} - 2px) !important; + width: calc(#{$card-width} - 50px) !important; } } diff --git a/src/scss/cardstack.scss b/src/scss/cardstack.scss index f850775..e759596 100644 --- a/src/scss/cardstack.scss +++ b/src/scss/cardstack.scss @@ -1,11 +1,12 @@ // @import 'burger'; @import "card"; +$card-stack-header-height: 38px; .card-stack { position: absolute; - top: $card-right; + top: calc(#{$card-right} + #{$card-stack-header-height}); right: $card-right; - max-height: calc(100% - 260px); + max-height: calc(100% - 10px); height: auto; width: $card-width; overflow-y: scroll; @@ -27,8 +28,10 @@ } .card-stack-header { - min-height: 38px; - line-height: 38px; + position: fixed; + top: $card-right; + min-height: $card-stack-header-height; + line-height: $card-stack-header-height; width: $card-width; box-sizing: border-box; padding: 0 5px; diff --git a/src/scss/timeline.scss b/src/scss/timeline.scss index c42907c..91b1ad4 100644 --- a/src/scss/timeline.scss +++ b/src/scss/timeline.scss @@ -10,12 +10,13 @@ transition: left 0.2s ease, bottom 0.2s ease; bottom: 0px; z-index: $timeline; + border-top: 1px solid black; &.folded { transition: bottom 0.2s ease; .timeline-header .timeline-toggle p .arrow-down { - transform: translate(0, 5px) rotate(-135deg); + transform: translate(0, 0px) rotate(-135deg); -webkit-transform: translate(0, 5px) rotate(-135deg); } }