Add button and link "Back to menu"

sars · Apr 25, 2016 · 3bd1879 · 3bd1879
1 parent 7484479
commit 3bd1879
Show file tree

Hide file tree

Showing 2 changed files with 37 additions and 2 deletions.
diff --git a/src/containers/LunchDetails/LunchDetails.js b/src/containers/LunchDetails/LunchDetails.js
@@ -16,6 +16,9 @@ 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 as stylesLink } from 'components/HeaderMenu/HeaderMenu.scss';
+import { Link } from 'react-router';
 
 function isReviews(location) {
   return /\/reviews$/.test(location.pathname);
@@ -90,7 +93,12 @@ export default class LunchDetails extends Component {
             </div>
             <div className={styles.lunchContainer}>
               <div className={styles.header}>
-                <h1>Обед от {cook.full_name_genitive}</h1>
+                <div className={styles.headerBackLink}>
+                  <Link className={stylesLink} to="/">
+                    <span>Назад к списку обедов</span>
+                  </Link>
+                  <h1>Обед от {cook.full_name_genitive}</h1>
+                </div>
                 <DeliveryPeriod className={styles.deliveryPeriod} time={lunch.ready_by} />
               </div>
               <div className={styles.previewsContainer}>
@@ -116,6 +124,11 @@ export default class LunchDetails extends Component {
                   </div>
                 </div>
               </div>
+              <div className={styles.mobBackLink}>
+                <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,19 @@
   padding: 0 1rem;
 }
 
+.mobBackLink {
+  margin-top: 2.5rem;
+  display: flex;
+  justify-content: center;
+}
+
+.headerBackLink {
+  display: none;
+  a {
+    padding: 0;
+  }
+}
+
 @mixin collapsingContainer($opened, $inner) {
   position: absolute;
   visibility: hidden;
@@ -173,6 +186,15 @@
   }
 }
 
+@media (min-width: 700px ) {
+  .mobBackLink {
+    display: none;
+  }
+  .headerBackLink {
+    display: block;
+  }
+}
+
 @media (max-width: 500px) {
   .header h1 {
     line-height: 1.2;