Make /pharmacy mobile friendly

newvicklee · May 16, 2018 · 1b590d6 · 1b590d6
1 parent 4e72c2e
commit 1b590d6
Show file tree

Hide file tree

Showing 2 changed files with 34 additions and 7 deletions.
diff --git a/frontend/components/Pharmacy.js b/frontend/components/Pharmacy.js
@@ -390,9 +390,11 @@ class DrugStock extends React.Component {
                 <div className="column-container width-full align-left">
                     <h2>What do you have in stock?</h2>
                 </div>
-                <div className="post">
-                    <div className="postCard width-full drug-checkboxes">
-                        {drugCheckboxes}
+                <div className="post-container">
+                    <div className="post">
+                        <div className="postCard width-full drug-checkboxes">
+                            {drugCheckboxes}
+                        </div>
                     </div>
                 </div>
                 <div className="column-container width-full">

diff --git a/frontend/style.scss b/frontend/style.scss
@@ -151,6 +151,10 @@ body {
 .postCard.fullWidthCard {
     width: 100%;
     padding: 2em;
+    @media (max-width: $tablet) {
+        width: 90%;
+        padding: 1em;
+    }
 }
 
 .postCard.miniCard {
@@ -247,7 +251,7 @@ body {
     flex-direction: column;
     align-items: center;
 
-    margin: 3em 0;
+    margin: 3em 0.5em;
 }
 
 
@@ -275,18 +279,21 @@ body {
     width: 35%;
     background-color: #3e70ff;
     color: #fff;
-    padding: 20px;
     font-weight: 700;
     border-radius: 0 6.4em 6.4em 0;
     overflow: hidden;
     border: none;
     cursor: pointer;
-    padding-left: 2em;
+    display: flex;
+    justify-content: center;
+    align-items: center;
 
     &:hover {
         background-color: #006dbf;
         border-color: #006dbf;
     }
+    @media (max-width: $tablet) {
+    }
 }
 
 .cta-text {
@@ -334,13 +341,23 @@ body {
 .welcome-container {
     margin: 2em 0;
     padding: 0 0.6em;
+    @media (max-width: $tablet) {
+        align-items: flex-start;
+        h1, p {
+            margin: 0.3em 0;
+        }
+    }
 }
 
 .control-checkbox {
     // flex child property
     flex: 0 1 40%;
     margin: 1em;
 
+    @media (max-width: $tablet) {
+        flex: 0 1 100%;
+    }
+
     .control {
         text-transform: uppercase;
         cursor: pointer;
@@ -401,13 +418,17 @@ body {
     margin-top: 1.5em;
     color: #657786;
     padding-left: 0.5em;
-
     width: 35%;
 
     &:focus {
         color: #14171a;
         border-color: rgba(0,132,180,0.5);
     }
+
+    @media (max-width: $tablet) {
+        width: 50%;
+    }
+
 }
 
 .submit-button {
@@ -426,6 +447,10 @@ body {
     position: relative;
     text-align: center;
     white-space: nowrap;
+
+    @media (max-width: $tablet) {
+        width: 50%;
+    }
 }
 
 .submit-button.btn-blue {