Aplica CSS Grid Layout a Promociones

achique-luisdan · Oct 2, 2022 · 710f928 · 710f928
1 parent 235b8bc
commit 710f928
Show file tree

Hide file tree

Showing 5 changed files with 158 additions and 9 deletions.
diff --git a/backend/promotions/views.py b/backend/promotions/views.py
@@ -16,7 +16,7 @@ def post_list(request):
           }
       },
       {
-          'name': 'Basic Vanilla Cake',
+          'name': 'Basic Vanilla Cake Basic Vanilla Cake Basic Vanilla Cake',
           'description': 'Pensando en los graves problemas de obesidad de la actualidad, el Basic Vanilla Cake reduce la cantidad de calorías para consumo.',
           'price': 190,
           'image': 'https://images.pexels.com/photos/5945565/pexels-photo-5945565.jpeg?auto=compress&cs=tinysrgb&w=1600',

diff --git a/css/style.css b/css/style.css
@@ -1,6 +1,7 @@
 :root {
   --surface: #ffffff;
   --surface-hover: #d3d3d3;
+  --on-surface: #636363;
   --primary: #ef6c58;
   --primary-hover: #eb5f4a;
   --primary-focused: #fb9383;
@@ -18,7 +19,7 @@ body {
   font-family: "Open Sans", sans-serif;
 }
 
-header{
+body > header{
   position: sticky;
   top: 0px;
 }
@@ -91,7 +92,6 @@ img.slide {
 }
 
 article.slider {
-  border-radius: 20px;
   width: 100%;
   box-shadow: 0 0 10px #00000033;
   overflow: hidden;
@@ -175,6 +175,7 @@ footer {
 
 footer div:nth-child(1) {
   display: flex;
+  flex-wrap: wrap;
 }
 
 footer div:nth-child(1) > img{
@@ -228,4 +229,102 @@ hr {
   border-top-left-radius: 5px;
   border-block-start-width: 0px;
   min-height: 1px;
+}
+
+div#promotions {
+  display: grid;
+  gap: 20px;
+  padding: 0% 5%;
+  margin: 2%;
+  grid-template-columns: 1fr 1fr 1fr;
+}
+
+article.promotion {
+  width: 100%;
+  display: grid;
+}
+
+article.promotion img {
+  width: 100%;
+  object-fit: cover;
+}
+
+article.promotion header {
+  color: var(--secondary);
+  display: grid;
+  padding: 2% 0px;
+  grid-template-columns: 3fr 2fr;
+}
+
+article.promotion header h3:nth-child(2){
+  justify-self: end;
+}
+
+article.promotion header h3:nth-child(1){
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  overflow: hidden;
+}
+
+article.promotion header + div{
+  padding: 2% 0px;
+  color: var(--on-surface);
+  line-height: 1.5;
+}
+
+
+article.promotion div {
+  align-self: end;
+}
+
+article.promotion div button {
+  width: 100%;
+  background-color: var(--primary);
+  border-radius: 30px;
+  border: none;
+  text-transform: uppercase;
+  padding: 2%;
+  font-weight: bold;
+  color: var(--surface);
+  font-size: large;
+  box-shadow: 1px 1px 1px 0px #06000033;
+}
+
+article.promotion div button:hover {
+  cursor: pointer;
+  background-color: var(--primary-hover);
+}
+
+section > h2.title {
+  font-size: xx-large;
+  font-weight:900;
+  color: var(--secondary);
+  text-align: center;
+  overflow: hidden;
+}
+
+section.container {
+  padding: 2%;
+}
+
+
+@media screen  and (max-width: 415px){
+  div#promotions {
+    grid-template-columns: repeat(1, 1fr);
+  }
+
+
+  nav img {
+    width: 100%;
+  }
+  nav ul {
+    width: 100%;
+  }
+
+  footer div:nth-child(1) > img{
+    width: 100%;
+  }
+  footer div:nth-child(1) > ul {
+    width: 100;
+  }
 }
diff --git a/dummy/promotions.json b/dummy/promotions.json
@@ -0,0 +1,52 @@
+{
+  "products":[
+    {
+        "name": "Naked Cake",
+        "description": "Pensando en los graves problemas de obesidad de la actualidad, el naked cake reduce la cantidad de calorías para consumo.",
+        "price": 300,
+        "image": "https://images.pexels.com/photos/5945565/pexels-photo-5945565.jpeg?auto=compress&cs=tinysrgb&w=1600",
+        "promotion": {
+          "name": "Promo 1",
+          "description": "",
+          "discount": 22,
+          "price": 288
+        }
+    },
+    {
+        "name": "Basic Vanilla Cake Basic Vanilla Cake Basic Vanilla Cake",
+        "description": "Pensando en los graves problemas de obesidad de la actualidad, el Basic Vanilla Cake reduce la cantidad de calorías para consumo.",
+        "price": 190,
+        "image": "https://images.pexels.com/photos/5945565/pexels-photo-5945565.jpeg?auto=compress&cs=tinysrgb&w=1600",
+        "promotion": {
+          "name": "Promo 2",
+          "description": "",
+          "discount": 40,
+          "price": 150
+        }
+    },
+    {
+        "name": "Clinkers Cake",
+        "description": "Pensando en los graves problemas de obesidad de la actualidad, el Clinkers Cake reduce la cantidad de calorías para consumo.",
+        "price": 320,
+        "image": "https://images.pexels.com/photos/5945565/pexels-photo-5945565.jpeg?auto=compress&cs=tinysrgb&w=1600",
+        "promotion": {
+          "name": "Promo 3",
+          "description": "",
+          "discount": 20,
+          "price": 300
+        }
+    },
+    {
+        "name": "Example Cake",
+        "description": "Pensando en los graves problemas de obesidad de la actualidad, el Example vanilla Cake reduce la cantidad de calorías para consumo.",
+        "price": 320,
+        "image": "https://images.pexels.com/photos/5945565/pexels-photo-5945565.jpeg?auto=compress&cs=tinysrgb&w=1600",
+        "promotion": {
+          "name": "Promo 4",
+          "description": "",
+          "discount": 20,
+          "price": 300
+        }
+    }
+  ]
+}
diff --git a/index.html b/index.html
@@ -51,10 +51,8 @@ <h3>Dulces y juntos siempre.</h3>
       </div>
     </section>
 
-    <section>
-      <div>
-        <h2 class="title">Promociones del mes</h2>
-      </div>
+    <section class="container">
+      <h2 class="title">Promociones del mes</h2>
       <div id="promotions" >
 
       </div>

diff --git a/js/script.js b/js/script.js
@@ -45,7 +45,8 @@ let $promotions = document.getElementById("promotions");
 
 
 function getPromotions() {
-  let url = 'http://127.0.0.1:8000/promotions';
+  // http://127.0.0.1:8000/promotions
+  let url = '/dummy/promotions.json';
   fetch(url)
       .then(response  => {
         if (response.status === 200){
@@ -56,7 +57,6 @@ function getPromotions() {
         }
       })
       .then(data => {
-          console.log (data);
             const promotions = data;
             $promotions.innerHTML = '';
             promotions.products.forEach(productElement => {