added responsive design

calixo888 · Jan 15, 2020 · 9bee07a · 9bee07a
1 parent f9292b0
commit 9bee07a
Show file tree

Hide file tree

Showing 21 changed files with 331 additions and 71 deletions.
diff --git a/db.sqlite3 b/db.sqlite3
diff --git a/grocerymeals_app/__pycache__/views.cpython-37.pyc b/grocerymeals_app/__pycache__/views.cpython-37.pyc
diff --git a/grocerymeals_app/views.py b/grocerymeals_app/views.py
@@ -230,27 +230,27 @@ def product(request, product_id):
     item_id = search_data["hits"][0]["_id"]
 
     # Getting nutritional data with ID
-    nutrition_response = requests.get(f"https://api.nutritionix.com/v1_1/item?id={item_id}&appId=fdaac18d&appKey=fcb3a12ad912d0c76f9d1c703cd75d81")
-    nutrition_data = nutrition_response.json()
-
-    calories = nutrition_data["nf_calories"]
-    total_fat = nutrition_data["nf_total_fat"]
-    saturated_fat = nutrition_data["nf_saturated_fat"]
-    cholesterol = nutrition_data["nf_cholesterol"]
-    total_carbohydrate = nutrition_data["nf_total_carbohydrate"]
-    dietary_fiber = nutrition_data["nf_dietary_fiber"]
-    sugars = nutrition_data["nf_sugars"]
-    protein = nutrition_data["nf_protein"]
-
-    num_servings = nutrition_data["nf_serving_size_qty"]
-    serving_size = nutrition_data["nf_serving_weight_grams"]
-
-    allergens = []
-    potential_allergens = ["milk", "eggs", "fish", "shellfish", "tree_nuts", "peanuts", "wheat", "soybeans", "gluten"]
-    for allergen in potential_allergens:
-        contains = nutrition_data["allergen_contains_" + allergen]
-        if contains:
-            allergens.append(allergen)
+    # nutrition_response = requests.get(f"https://api.nutritionix.com/v1_1/item?id={item_id}&appId=fdaac18d&appKey=fcb3a12ad912d0c76f9d1c703cd75d81")
+    # nutrition_data = nutrition_response.json()
+    #
+    # calories = nutrition_data["nf_calories"]
+    # total_fat = nutrition_data["nf_total_fat"]
+    # saturated_fat = nutrition_data["nf_saturated_fat"]
+    # cholesterol = nutrition_data["nf_cholesterol"]
+    # total_carbohydrate = nutrition_data["nf_total_carbohydrate"]
+    # dietary_fiber = nutrition_data["nf_dietary_fiber"]
+    # sugars = nutrition_data["nf_sugars"]
+    # protein = nutrition_data["nf_protein"]
+    #
+    # num_servings = nutrition_data["nf_serving_size_qty"]
+    # serving_size = nutrition_data["nf_serving_weight_grams"]
+    #
+    # allergens = []
+    # potential_allergens = ["milk", "eggs", "fish", "shellfish", "tree_nuts", "peanuts", "wheat", "soybeans", "gluten"]
+    # for allergen in potential_allergens:
+    #     contains = nutrition_data["allergen_contains_" + allergen]
+    #     if contains:
+    #         allergens.append(allergen)
 
 
     # Grabbing recipes you can make with product
@@ -270,17 +270,17 @@ def product(request, product_id):
 
     return render(request, "grocerymeals_app/product.html", context={
         "product": product,
-        "calories": calories,
-        "total_fat": total_fat,
-        "saturated_fat": saturated_fat,
-        "cholesterol": cholesterol,
-        "total_carbohydrate": total_carbohydrate,
-        "dietary_fiber": dietary_fiber,
-        "sugars": sugars,
-        "protein": protein,
-        "num_servings": num_servings,
-        "serving_size": serving_size,
-        "allergens": allergens,
+        # "calories": calories,
+        # "total_fat": total_fat,
+        # "saturated_fat": saturated_fat,
+        # "cholesterol": cholesterol,
+        # "total_carbohydrate": total_carbohydrate,
+        # "dietary_fiber": dietary_fiber,
+        # "sugars": sugars,
+        # "protein": protein,
+        # "num_servings": num_servings,
+        # "serving_size": serving_size,
+        # "allergens": allergens,
         "recipes": recipes,
     })
 

diff --git a/grocerymeals_project/__pycache__/settings.cpython-37.pyc b/grocerymeals_project/__pycache__/settings.cpython-37.pyc
diff --git a/grocerymeals_project/settings.py b/grocerymeals_project/settings.py
@@ -24,8 +24,8 @@
 SECRET_KEY = '#gfs+g#-d*48r6mnolcojkn@s6tjfi=pvo%a06vs5*6)^(pil8'
 
 # SECURITY WARNING: don't run with debug turned on in production!
-DEBUG = True
-# DEBUG = False
+# DEBUG = True
+DEBUG = False
 
 ALLOWED_HOSTS = ["*"]
 

diff --git a/static/grocerymeals_app/base.css b/static/grocerymeals_app/base.css
@@ -18,6 +18,8 @@ body {
   background-repeat: no-repeat;
 
   min-height: 100vh;
+
+  overflow-x: hidden;
 }
 
 /* CONTAINER STYLES */
@@ -99,7 +101,7 @@ body {
 }
 
 .separator-right-dark {
-  border-right: 2px solid rgba(0,0,0,.5) !important;
+  border-right: 2px solid rgba(0,0,0,.5);
 }
 
 .prompt-item {
@@ -174,6 +176,7 @@ body {
 
 .shopping-list-nav-item {
   position: relative;
+  display: inline-block;
 }
 
 .item-number-badge {

diff --git a/static/grocerymeals_app/product.css b/static/grocerymeals_app/product.css
@@ -1,6 +1,6 @@
 .product-container {
   display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(500px, 1fr)) !important;
+  grid-template-columns: repeat(auto-fill, minmax(500px, 1fr));
   grid-gap: 100px;
 }
 

diff --git a/static/grocerymeals_app/queries.css b/static/grocerymeals_app/queries.css
@@ -1,12 +1,136 @@
 /* RECIPES PAGE */
 @media (max-width: 1000px) {
+
+}
+
+/* BASE.HTML */
+@media (max-width: 500px) {
+  .f-65 {
+    font-size: 50px !important;
+  }
+
+  .f-50 {
+    font-size: 40px !important;
+  }
+
+  .separator-right {
+    border: none !important;
+  }
+
+  .separator-right-dark {
+    border: none !important;
+  }
+
+  .prompt-item {
+    padding-left: 0 !important;
+  }
+}
+
+/* INDEX.HTML */
+@media (max-width: 500px) {
+  /* HEADER */
+  .center-container {
+    width: 75% !important;
+  }
+
+  /* ABOUT */
+  .about {
+    padding: 50px 10px !important;
+  }
+
+  .about-cards {
+    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)) !important;
+  }
+
+  .about-main-description {
+    width: 100% !important;
+  }
+
+  /* STORES */
+  .stores-grid {
+    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)) !important;
+  }
+
+  /* SOCIAL MEDIA */
+  .social-media-container {
+    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)) !important;
+    grid-gap: 20px;
+  }
+
+  /* FOOTER */
+  .footer-grid {
+    justify-items: flex-start !important;
+    grid-gap: 50px !important;
+  }
+
+  .contact-link {
+    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)) !important;
+    grid-gap: 20px !important;
+  }
+}
+
+/* CONTACT_US.HTML */
+@media (max-width: 500px) {
+  .contact-us-form {
+    width: 100% !important;
+  }
+}
+
+/* PRODUCTS.HTML */
+@media (max-width: 500px) {
   .search-bar {
-    width: 90%;
-    margin: 50px auto !important;
+    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)) !important;
+    margin: 25px !important;
+  }
+
+  .search-bar-input {
+    border-bottom-left-radius: 0 !important;
+    border-top-right-radius: 4px !important;
   }
 
   .search-bar-submit {
-    font-size: 15px !important;
-    content: "Find";
+    border-bottom-left-radius: 4px !important;
+    border-top-right-radius: 0 !important;
+  }
+}
+
+/* LOGIN.HTML AND REGISTER.HTML */
+@media (max-width: 500px) {
+  .login-form {
+    width: 100% !important;
+  }
+
+  .register-form {
+    width: 100% !important;
+  }
+}
+
+/* RECIPE.HTML AND PRODUCT.HTML */
+@media (max-width: 500px) {
+  .recipe-image, .product-image {
+    width: 100%;
+  }
+
+  .recipe-container, .product-container {
+    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)) !important;
+    grid-gap: 0 !important;
+  }
+
+  .left {
+    text-align: center;
+  }
+}
+
+/* SHOPPING_LIST.HTML */
+@media (max-width: 500px) {
+  .product {
+    justify-items: center;
+  }
+
+  .x {
+    bottom: 0 !important;
+    right: 20px !important;
+    top: auto !important;
+    transform: none !important;
   }
 }
diff --git a/static/grocerymeals_app/recipe.css b/static/grocerymeals_app/recipe.css
@@ -1,7 +1,7 @@
 /* RECIPE STYLES */
 .recipe-container {
   display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(500px, 1fr)) !important;
+  grid-template-columns: repeat(auto-fill, minmax(500px, 1fr));
   grid-gap: 100px;
 }
 

diff --git a/static/grocerymeals_app/shopping_list.css b/static/grocerymeals_app/shopping_list.css
@@ -7,7 +7,6 @@ body {
   border: 3px solid white;
   padding: 20px;
   width: 100%;
-  height: 200px;
   margin-bottom: 20px;
 
   display: grid;

diff --git a/staticfiles/grocerymeals_app/base.css b/staticfiles/grocerymeals_app/base.css
@@ -18,6 +18,8 @@ body {
   background-repeat: no-repeat;
 
   min-height: 100vh;
+
+  overflow-x: hidden;
 }
 
 /* CONTAINER STYLES */
@@ -99,7 +101,7 @@ body {
 }
 
 .separator-right-dark {
-  border-right: 2px solid rgba(0,0,0,.5) !important;
+  border-right: 2px solid rgba(0,0,0,.5);
 }
 
 .prompt-item {
@@ -174,6 +176,7 @@ body {
 
 .shopping-list-nav-item {
   position: relative;
+  display: inline-block;
 }
 
 .item-number-badge {

diff --git a/staticfiles/grocerymeals_app/product.css b/staticfiles/grocerymeals_app/product.css
@@ -1,6 +1,6 @@
 .product-container {
   display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(500px, 1fr)) !important;
+  grid-template-columns: repeat(auto-fill, minmax(500px, 1fr));
   grid-gap: 100px;
 }