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