Add button "Back to menu"

sars · Apr 20, 2016 · 8b0ed55 · 8b0ed55
1 parent 21b11e1
commit 8b0ed55
Show file tree

Hide file tree

Showing 2 changed files with 48 additions and 2 deletions.
diff --git a/src/containers/LunchDetails/LunchDetails.js b/src/containers/LunchDetails/LunchDetails.js
@@ -16,6 +16,8 @@ import { getReviews } from 'redux/modules/common';
 import { getLunch } from 'helpers/lunches';
 import classNames from 'classnames';
 import ga from 'components/GaEvent/ga';
+import Button from 'components/Button/Button';
+import { Link } from 'react-router';
 
 function isReviews(location) {
   return /\/reviews$/.test(location.pathname);
@@ -90,7 +92,10 @@ export default class LunchDetails extends Component {
             </div>
             <div className={styles.lunchContainer}>
               <div className={styles.header}>
-                <h1>Обед от {cook.first_name} {cook.last_name}</h1>
+                <div className={styles.linkHeader}><Link className={styles.linkListLunch} to="/">
+                  <span>Назад к списку обедов</span></Link>
+                  <h1>Обед от {cook.first_name} {cook.last_name}</h1>
+                </div>
                 <DeliveryPeriod className={styles.deliveryPeriod} time={lunch.ready_by} />
               </div>
               <div className={styles.previewsContainer}>
@@ -116,6 +121,9 @@ export default class LunchDetails extends Component {
                   </div>
                 </div>
               </div>
+              <div className={styles.afterPreviewsContainer}>
+                <Link to="/"><Button flat outlined className={classNames(styles.button)} label="К списку обедов"/></Link>
+              </div>
             </div>
           </div>
         </div>

diff --git a/src/containers/LunchDetails/LunchDetails.scss b/src/containers/LunchDetails/LunchDetails.scss
@@ -36,7 +36,7 @@
 .header {
   display: flex;
   justify-content: space-between;
-  align-items: center;
+  align-items: flex-start;
   margin: 0.5rem 0;
   flex-wrap: wrap;
 }
@@ -116,6 +116,35 @@
   padding: 0 1rem;
 }
 
+.afterPreviewsContainer {
+  margin-top: 2.5rem;
+  display: flex;
+  justify-content: center;
+  align-items: flex-end;
+}
+
+.linkHeader {
+  display: none;
+  .linkListLunch {
+    color: #4a4a4a;
+    position: relative;
+    &:after {
+      position: absolute;
+      left: 0;
+      right: 0;
+      bottom: 0;
+      display: block;
+      height: 1px;
+      content: '';
+      background-color: #DDD;
+      transition: all 300ms ease;
+    }
+    &:hover:after {
+      background-color: #888;
+    }
+  }
+}
+
 @mixin collapsingContainer($opened, $inner) {
   position: absolute;
   visibility: hidden;
@@ -159,6 +188,9 @@
   .purchasePreview {
     display: none;
   }
+  .linkHeader {
+    display: block;
+  }
 }
 
 @media (min-width: $big-screen ) {
@@ -172,3 +204,9 @@
     max-width: $huge-screen !important;
   }
 }
+
+@media (min-width: 700px ) {
+  .afterPreviewsContainer {
+    display: none;
+  }
+}