fixes position of arrow for different screen sizes, related #286

CYPIAPT-LNDSE · Apr 27, 2017 · bddb37b · bddb37b
1 parent e184602
commit bddb37b
Show file tree

Hide file tree

Showing 3 changed files with 27 additions and 14 deletions.
diff --git a/app/components/view-goal/view-goal.jsx b/app/components/view-goal/view-goal.jsx
@@ -27,12 +27,13 @@ const viewGoal = ({ currentGoal, rateGoal, stepLineChartDetail, }) => {
         { progressBars }
       </div>
       <div className="line-chart-container">
-        <div className="line-chart-title">
-          <p
-            id="line-chart-title-text"
-            onClick={ stepLineChartDetail }
-          >Your progress so far&nbsp;</p>
-        <div className="arrow-1" />
+        <div className="line-chart-title" onClick={ stepLineChartDetail }>
+          <div className="line-chart-title-text">
+            <p id="line-chart-title-text">Your progress so far&nbsp;</p>
+          </div>
+          <div className="line-chart-title-arrow">
+            <div className="arrow-1" />
+          </div>
         </div>
         <div className="line-chart-inner" onClick={ stepLineChartDetail }>
           <LineChart

diff --git a/app/scss/_arrow-animation.scss b/app/scss/_arrow-animation.scss
@@ -2,14 +2,14 @@
 $animation-speed: 2s;
 $animation-delay: 1s;
 $animation-repeat: 3;
+$animation-start-pos: 0px;
 
 $arrow-animation: arrow-movement $animation-speed ease-in-out $animation-repeat;
 
 .arrow {
   opacity: 1;
-  position: absolute;
-  left: 55%;
-  top: 56%;
+  position: relative;
+  margin-left: $animation-start-pos;
   animation: $arrow-animation;
 
   &:before, &:after {
@@ -30,7 +30,7 @@ $arrow-animation: arrow-movement $animation-speed ease-in-out $animation-repeat;
 @keyframes arrow-movement {
   0%   {
     opacity: 0;
-    left: 50%;
+    margin-left: $animation-start-pos - 10;
   }
   70% { opacity: 1; }
   100% {  opacity: 0; }

diff --git a/app/scss/_view-goal.scss b/app/scss/_view-goal.scss
@@ -84,6 +84,22 @@ $contentMaxWidth: 400px;
   width: 100%;
   background-color: $blue;
   cursor: pointer;
+  display: flex;
+  flex-direction: row;
+  align-content: stretch;
+}
+
+.line-chart-title-text {
+  width: 70%;
+}
+
+.line-chart-title-arrow {
+  width: 30%;
+  margin-top: 5px;
+}
+
+.arrow-1 {
+  @extend .arrow;
 }
 
 #line-chart-title-text {
@@ -96,7 +112,3 @@ $contentMaxWidth: 400px;
 .view-goal-buttonContainer {
   height: 80px;
 }
-
-.arrow-1 {
-  @extend .arrow;
-}