Worked on mobile compatibility errors

himanshuNegi755 · Aug 6, 2020 · 0a15b88 · 0a15b88
1 parent e999acc
commit 0a15b88
Show file tree

Hide file tree

Showing 21 changed files with 79 additions and 134 deletions.
diff --git a/client/public/dineezy192.ico b/client/public/dineezy192.ico
diff --git a/client/public/dineezy512.png b/client/public/dineezy512.png
diff --git a/client/public/dineezyIcon.ico b/client/public/dineezyIcon.ico
diff --git a/client/public/index.html b/client/public/index.html
@@ -2,7 +2,7 @@
 <html lang="en">
   <head>
     <meta charset="utf-8" />
-    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
+    <link rel="icon" href="dineezyIcon.ico" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <meta name="theme-color" content="#000000" />
     <meta
@@ -33,7 +33,7 @@
       work correctly both with client-side routing and a non-root public URL.
       Learn how to configure a non-root public URL by running `npm run build`.
     -->
-    <title>Digi Menu</title>
+    <title>Dineezy | Digital Menu and Ordering Software</title>
   </head>
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>

diff --git a/client/public/manifest.json b/client/public/manifest.json
@@ -3,17 +3,17 @@
   "name": "Create React App Sample",
   "icons": [
     {
-      "src": "favicon.ico",
+      "src": "dineezyIcon.ico",
       "sizes": "64x64 32x32 24x24 16x16",
       "type": "image/x-icon"
     },
     {
-      "src": "logo192.png",
-      "type": "image/png",
+      "src": "dineezy192.ico",
+      "type": "image/x-icon",
       "sizes": "192x192"
     },
     {
-      "src": "logo512.png",
+      "src": "dineezy512.png",
       "type": "image/png",
       "sizes": "512x512"
     }

diff --git a/client/src/components/footer.css b/client/src/components/footer.css
@@ -33,22 +33,13 @@
     margin: 0 3% 1%;
 }
 
-.fa-facebook-square:hover{
-    color: #3b5998;
-}
-
-.fa-instagram:hover{
-    color: white;
-}
-
 .fa-envelope:hover{
     color: #D44638;
 }
 
-.fa-twitter:hover{
-    color: #00acee;
+.fa-whatsapp:hover{
+    color: #25d366;
 }
-
 .copyright{
     font-size: 0.7rem;
     line-height: 0;

diff --git a/client/src/components/footer.js b/client/src/components/footer.js
@@ -8,10 +8,8 @@ const Footer = () => {
                   <h4 className="contact-us">CONTACT US</h4>
                   <p className="contact-text">For any queries please mail us and we will reply as soon as possible with a solution.</p>
                   <br></br>
-                  <a className="contact-icons" href="https://www.facebook.com/"><i className="fab fa-facebook-square fa-2x" aria-hidden="true"></i> </a>
-                  <a className="contact-icons" href="https://www.instagram.com/"><i className="fab fa-instagram fa-2x" aria-hidden="true"></i> </a>
-                  <a className="contact-icons" href="mailto:[email protected]"><i className="fas fa-envelope fa-2x" aria-hidden="true"></i> </a>
-                  <i className="fab fa-twitter fa-2x contact-icons"></i>
+                  <a className="contact-icons" href="mailto:[email protected]"><i className="fas fa-envelope fa-2x" aria-hidden="true"></i></a>
+                  <a className="contact-icons" href="https://wa.me/message/MRZMBG4DLYZ2I1"><i class="fab fa-whatsapp fa-2x contact-icons"></i></a>
                   <hr className="contact-divider"></hr>
                   <p className="copyright">© COPYRIGHT 2020 VIRTUAL MENU.</p>
               </div>

diff --git a/client/src/components/frontPage.css b/client/src/components/frontPage.css
@@ -7,7 +7,6 @@
     overflow: hidden;
     margin: 0;
 }
-
 .front-parent-div {
     margin-top: 82px;
     background-color: #202020;
@@ -17,7 +16,6 @@
     color: #e0e0e0;
     margin: 0.5rem 1rem 0 0;
 }
-
 #front-carousel{
   box-shadow: 0 0 10px black;
 }
@@ -45,8 +43,6 @@
   font-family: 'Rajdhani', sans-serif;
   font-size: 1.5rem;
 }
-
-
 #pricing-section {
     box-shadow: -1px 0 5px black;
     background: #303030;
@@ -95,62 +91,58 @@
     text-decoration: none !important;
 }
 @media (max-width: 1000px){
-
-
   .carousel-caption{
-    bottom: 15rem;
+    bottom: 12rem;
   }
   .carousel-caption h3{
     font-size: 2.5rem;
   }
   .carousel-caption p{
     font-size: 1.2rem;
   }
-
-
 }
 @media (max-width: 991px) {
-
   .carousel-item{
     height: 80vh;
   }
   .front-parent-div{
     padding: 0 0;
   }
-  .about-heading{
-    font-size: 2.5rem;
-    letter-spacing: 0.4rem;
-    padding: 2% 0 4%;
-  }
   .pricing-heading{
     font-size: 3rem;
     letter-spacing: 0.8rem;
   }
-
 }
-
 @media (max-width: 600px) {
-
   .carousel-item{
     height: 60vh;
   }
   .carousel-caption{
-    bottom: 12rem;
+    bottom: 8rem;
   }
   .carousel-caption h3{
-    font-size: 2rem;
+    font-size: 1.8rem;
   }
   .carousel-caption p{
     font-size: 1rem;
   }
-  .about-heading{
-    font-size: 2rem;
-    letter-spacing: 0.3rem;
-    padding: 2% 0 3%;
-  }
   .pricing-heading{
     font-size: 2.7rem;
     letter-spacing: 0.6rem;
   }
-
+}
+@media (max-width: 450px) {
+  .carousel-caption{
+    bottom: 6rem;
+  }
+  .carousel-caption h3{
+    font-size: 1.5rem;
+  }
+  .carousel-caption p{
+    font-size: 0.8rem;
+  }
+  .pricing-heading{
+    font-size: 2rem;
+    letter-spacing: 0.4rem;
+  }
 }
diff --git a/client/src/components/frontPage.js b/client/src/components/frontPage.js
@@ -125,7 +125,7 @@ const FrontPage = (props) => {
 
                 </section>
 
-                
+
 
                 <section id="pricing-section">
                     <div>
@@ -136,7 +136,7 @@ const FrontPage = (props) => {
                       <div className="pricing-col col-lg-4 col-md-6">
                         <div className="card pricing-card">
                           <div className="card-header">
-                            <h3>14 Days trial</h3>
+                            <h3>21 Days trial</h3>
                           </div>
                           <div className="card-body">
                             <h2 className="price-text">Free</h2>
@@ -152,7 +152,7 @@ const FrontPage = (props) => {
                             <h3>Monthly Pack</h3>
                           </div>
                           <div className="card-body">
-                            <h2 className="price-text">₹ 149 / mo</h2>
+                            <h2 className="price-text">N/A</h2>
                             <p>Payment at the beginning of the month</p>
                             <p>Validity : 30 Days from the day of payment.</p>
                             {renderPricingContent()}
@@ -165,7 +165,7 @@ const FrontPage = (props) => {
                             <h3>Yearly Pack</h3>
                           </div>
                           <div className="card-body">
-                            <h2 className="price-text">₹ 1199 / yr</h2>
+                            <h2 className="price-text">N/A</h2>
                             <p>Payment at the beginning of the year</p>
                             <p>Validity : 365 days from the day of payment</p>
                             {renderPricingContent()}

diff --git a/client/src/components/itemCard.css b/client/src/components/itemCard.css
@@ -2,6 +2,7 @@
     margin: 1% 0.5%;
     float: left;
     border: 0;
+    width: 49%;
     border-radius: 6px;
 }
 
@@ -83,5 +84,12 @@
   .show-menu-cards .card-body{
     height: 12rem;
   }
+  .show-menu-cards {
+      margin: 1% 0.5%;
+      float: left;
+      border: 0;
+      width: 98%;
+      border-radius: 6px;
+  }
 
 }
diff --git a/client/src/components/itemCard.js b/client/src/components/itemCard.js
@@ -24,7 +24,7 @@ const ItemCard = (props) => {
     }
 
         return (
-            <Card style={{ width: '49%' }} className="show-menu-cards" bg="light">
+            <Card className="show-menu-cards" bg="light">
                 <Card.Body>
                     <Card.Title>
                         <div className="item-name">{props.itemName}</div>

diff --git a/client/src/components/kitchen/frontPage.js b/client/src/components/kitchen/frontPage.js
@@ -45,7 +45,7 @@ const FrontPage = (props) => {
             </div>
             <div className="kitchen-signIn">
               <div className="kitchen-text">
-                <img src={Deco}/><br/>
+                <img src={Deco} alt="Spoon and salt Img"/><br/>
                 {renderContentForGoogleButton()}
               </div>
             </div>

diff --git a/client/src/components/kitchen/navforkitchen.css b/client/src/components/kitchen/navforkitchen.css
@@ -1,11 +1,3 @@
-.navbar{
-  box-shadow: 0 2px 3px rgba(0, 0, 0, 0.2);
-  background-color: #000;
-  position: relative;
-  z-index: 4;
-  padding: 0 1rem;
-}
-
 #navbar-brand{
   height: 4rem;
   position: relative;
@@ -23,7 +15,7 @@
 .navbar-dark .navbar-nav .nav-link{
   color: #b0b0b0;
 }
-.navbar-nav{
+.kitchen-part .navbar-nav{
   float: right;
 }
 .nav-item{
@@ -52,16 +44,13 @@
   }
 }
 @media screen and (max-width: 991px) {
-    .nav-item{
-        align-items: center;
-    }
+  #brand-logo{
+    height: 3.5rem;
+  }
 }
 @media screen and (max-width: 600px) {
   .restaurant-name{
     font-size: 1rem;
   }
-  #brand-logo{
-    width: 3.5rem;
-    height: 3.5rem;
-  }
+
 }
diff --git a/client/src/components/kitchen/navforkitchen.js b/client/src/components/kitchen/navforkitchen.js
@@ -51,14 +51,14 @@ const NavbarForSite = (props) => {
 
     return (
         <nav className="navbar navbar-expand-lg navbar-dark row">
-            <div className="col-3"><a id="navbar-brand" href="/">
+            <div className="col-lg-3 col-md-3 col-sm-3"><a id="navbar-brand" href="/">
                 <span>
                     <img id="brand-logo" src={DMLogo} alt="Company Logo"/>
                 </span>
             </a></div>
-            <div className="restaurant-name col-6">{shopName} Kitchen</div>
+            <div className="restaurant-name col-lg-6 col-md-5 col-sm-5">{shopName} Kitchen</div>
 
-            <div className="col-3"><ul className="navbar-nav ml-auto">
+            <div className="col-lg-3 col-md-4 col-sm-4 kitchen-part"><ul className="navbar-nav ml-auto">
 
                 {renderContent()}
 

diff --git a/client/src/components/menuItems.css b/client/src/components/menuItems.css
@@ -2,6 +2,7 @@
     margin: 1% 0.5% 2rem;
     float: left;
     border: 0;
+    width: 48%;
     box-shadow: 0 0 5px #202020;
 }
 .card-body{
@@ -73,6 +74,9 @@
 }
 
 @media (max-width: 600px){
+  .card-for-item {
+      width: 96%;
+  }
   .item-price{
       font-family: 'Ubuntu', sans-serif;
       font-size: 0.9rem;

diff --git a/client/src/components/menuItems.js b/client/src/components/menuItems.js
@@ -27,7 +27,7 @@ const MenuItems = (props) => {
 
         return (
 
-                <Card style={{ width: '48%' }} className="card-for-item" bg="light">
+                <Card className="card-for-item" bg="light">
                     <Card.Body>
                         <Card.Title>
                             <div className="item-name">{props.itemName}</div>

diff --git a/client/src/components/navbar.css b/client/src/components/navbar.css
@@ -1,13 +1,9 @@
-/*.bg-light {
-    background-color: #f2f2ea !important;
-}*/
-
 .navbar{
   box-shadow: 0 2px 3px rgba(0, 0, 0, 0.2);
   background-color: #000;
   position: relative;
   z-index: 4;
-  padding: 0;
+  padding: 0 1rem;
 }
 #brand-logo{
   width: auto;
@@ -18,7 +14,7 @@
   z-index: 5;
   width: auto;
   padding: 0;
-  margin: 0.3rem auto 0.3rem 3%;
+  margin: 0.3rem 3%;
 }
 .navbar-dark .navbar-nav .nav-link{
   color: #b0b0b0;
@@ -40,13 +36,12 @@
   position: relative;
   z-index: 5;
 }
-
-
-
 /*############### Mobile ################*/
-
 @media screen and (max-width: 991px) {
-    .navbar-collapse{
-        text-align: center;
-    }
+  #navbar-brand{
+    margin: 0.1rem 3%;
+  }
+    .navbar-nav{
+        float: none;
+  }
 }
diff --git a/client/src/components/navbar.js b/client/src/components/navbar.js
@@ -88,9 +88,7 @@ const NavbarForSite = (props) => {
                     {renderMidContent()}
                 </li>
                     {renderContent()}
-
               </ul>
-
             </div>
           </nav>
-Original file line number
+Diff line change
@@ Expand Up / @@ -88,9 +88,7 @@ const NavbarForSite = (props) => { @@
                         {renderMidContent()}
                     </li>
                         {renderContent()}
                   </ul>
                 </div>
               </nav>
@@ Expand Down @@