Improved styles for timeline and card

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",

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 (
           <div
             id="card-stack"
-            className={`card-stack
-            ${isCardstack ? "" : " folded"}`}
+            className={`card-stack ${isCardstack ? "" : " folded"}`}
           >
             {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()}
           </div>

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

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 };

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: {

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;

src/scss/card.scss

@@ -272,6 +272,6 @@
   }
 
   .embedded {
-    width: calc(#{$card-width} - 2px) !important;
+    width: calc(#{$card-width} - 50px) !important;
   }
 }

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;

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);
     }
   }