Feature/additional info scroll (#113)

* demo data extended * tooltip scroll changes * tooltip scrollbar hide but still scrolling
ingef · May 22, 2018 · ade2310 · ade2310
1 parent 5866084
commit ade2310
Show file tree

Hide file tree

Showing 3 changed files with 40 additions and 24 deletions.
diff --git a/frontend/app/api/concepts/movie_appearances.json b/frontend/app/api/concepts/movie_appearances.json
@@ -3,6 +3,7 @@
     "parent": "movie_appearances",
     "label": "Action Movies",
     "matchingEntries": 8234,
+    "dateRange":{"lowerEndpoint":"2009-12-07","lowerBoundType":"CLOSED","upperEndpoint":"2018-03-20","upperBoundType":"CLOSED"},
     "additionalInfos": [
       {
           "key": "Action film",

diff --git a/frontend/lib/js/tooltip/Tooltip.js b/frontend/lib/js/tooltip/Tooltip.js
@@ -31,28 +31,30 @@ const Tooltip = (props: PropsType) => {
   return (
     <div className="tooltip">
       <div className="tooltip__left">
-        {
-          !label && !description &&
-          <p className="tooltip__placeholder">
-            { T.translate('tooltip.placeholder') }
-          </p>
-        }
-        <h3 className="tooltip__headline">
+        <div>
           {
-            label
-          } {
-            description &&
-            <span> - {description}</span>
+            !label && !description &&
+            <p className="tooltip__placeholder">
+              { T.translate('tooltip.placeholder') }
+            </p>
           }
-        </h3>
-        {
-          infos && infos.map((info, i) => (
-            <div className="tooltip-info" key={i}>
-              <h3 className="tooltip-info__key" >{info.key}</h3>
-              <Markdown className="tooltip-info__value" source={info.value} />
-            </div>
-          ))
-        }
+          <h3 className="tooltip__headline">
+            {
+              label
+            } {
+              description &&
+              <span> - {description}</span>
+            }
+          </h3>
+          {
+            infos && infos.map((info, i) => (
+              <div className="tooltip-info" key={i}>
+                <h3 className="tooltip-info__key" >{info.key}</h3>
+                <Markdown className="tooltip-info__value" source={info.value} />
+              </div>
+            ))
+          }
+        </div>
       </div>
       <TooltipEntries
         className="tooltip__right"

diff --git a/frontend/lib/styles/components/tooltip.sass b/frontend/lib/styles/components/tooltip.sass
@@ -1,10 +1,11 @@
 .tooltip
   background-color: $col-bg
   padding: 10px 20px
-  display: table
   width: 100%
   height: 100%
   position: relative
+  overflow: hidden
+  display: flex
 
   &--activate
     padding: 0 20px
@@ -13,12 +14,24 @@
     font-size: $font-sm
     margin: 5px 0 5px
 
-  &__left, &__right
-    display: table-cell
-    vertical-align: middle
+  &__left
+    flex: 1
+    width: 100%
+    height: 100%
+    overflow: hidden
+    position: relative
+
+    & > div
+      position: absolute
+      top: 0
+      bottom: 0
+      left: 0
+      right: -17px
+      overflow-y: scroll
 
   &__right
     width: 35%
+    flex: 1
 
   &__placeholder
     color: $col-gray