Subscriptions: grid, font sizes, and more information

static/styles/main.css

@@ -722,6 +722,15 @@ article + article {
     gap: 1rem;
 }
 
+.product__figure img {
+    max-height: 400px;
+}
+
+.product__item button {
+    grid-column: span 2;
+    align-self: flex-end;
+}
+
 .product__item h3,
 .product__info h1 {
     /*text-decoration: underline;*/
@@ -753,6 +762,10 @@ article + article {
         grid-template-columns: 1fr;
     }
 
+    .product__item button {
+        grid-column: span 1;
+    }
+
     .product__figure {
         grid-row: 1;
         justify-self: center;
@@ -770,12 +783,10 @@ article + article {
 
 
 .subscription-coffee {
-    display: flex;
+    display: grid;
     gap: 2rem;
-    overflow-x: scroll;
+    grid-template-columns: repeat(4, 1fr);
     padding: 1rem;
-    border-right: var(--default-border);
-    border-left: var(--default-border);
 }
 
 .subscription-coffee div {
@@ -783,13 +794,16 @@ article + article {
     display: flex;
     flex-direction: column;
     align-items: center;
-    gap: 1rem;
 }
 
 .subscription-coffee img {
     max-height: 300px;
 }
 
+.subscription-coffee .product__desc {
+    flex-grow: 2;
+}
+
 .subscription-coffee input[type=number] {
     width: 100%;
 }
@@ -817,10 +831,19 @@ article + article {
     visibility: visible;
 }
 
+@media screen and (max-width: 900px) {
+    .subscription-coffee {
+        grid-template-columns: repeat(2, 1fr);
+    }
+}
+
 @media screen and (max-width: 600px) {
     .subscription-products {
         flex-direction: column;
     }
+    .subscription-coffee {
+        grid-template-columns: 1fr;
+    }
 }
 
 

storefront/templates/storefront/category_detail.html

@@ -24,8 +24,9 @@
                 <div>
                     <h3>{{ product.name }}</h3>
                     <h5>{{ product.subtitle }}</h5>
-                    <p>{{product.description|truncatewords:20}}</p>
+                    <p>{{product.description}}</p>
                 </div>
+                <button>Shop now</button>
             </a>
         {% endfor %}
     </section>

storefront/templates/storefront/product_list.html

@@ -25,8 +25,9 @@
                 <div>
                     <h3>{{ product.name }}</h3>
                     <h5>{{ product.subtitle }}</h5>
-                    <p>{{product.description|truncatewords:20}}</p>
+                    <p>{{product.description}}</p>
                 </div>
+                <button>Shop now</button>
             </a>
         {% endfor %}
     </section>

storefront/templates/storefront/subscription/create_form.html

@@ -30,16 +30,17 @@
     </section>
     <section class="cart__list">
         <h3>Items</h3>
-        <h4>Size: {{ sub_cart.size }}</h4>
-        <h4>Grind: {{ sub_cart.grind }}</h4>
+        <a href="{% url 'storefront:subscription-form' %}" class="btn">Edit items</a>
         {% for item in sub_cart.items %}
         <div class="cart__item">
         {% with product=item.product %}
-            <figure>
-                <img src="{{product.get_first_img.image.url}}" alt="{{product.get_first_img.image}}">
+            <figure class="item__figure">
+                <img class="item__image" src="{{product.get_first_img.image.url}}" alt="{{product.get_first_img.image}}">
             </figure>
-            <div>
-                <h2>{{ item.quantity }} &times; {{product.name}}</h2>
+            <div class="item__info">
+                <h4>{{ item.quantity }} &times; {{product.name}}</h4>
+                <h5>Size: {{ sub_cart.size }}</h5>
+                <h5>Grind: {{ sub_cart.grind }}</h5>
             </div>
         {% endwith %}
         </div>

storefront/templates/storefront/subscription/form.html

@@ -21,8 +21,18 @@
                     <figure class="product__figure">
                         <img class="product__image" src="{{ product.get_first_img.image.url }}">
                     </figure>
-                    <strong>{{ product }}</strong>
-                    <input type="number" min="0" max="20" pattern="[0-9]*" data-id="{{ product.pk }}" name="product_{{ product.name }}" placeholder="Quantity">
+                    <div class="product__desc">
+                        <h3>{{ product.name }}</h3>
+                        <p>{{product.description}}</p>
+                    </div>
+                    <input
+                        type="number"
+                        min="0" max="20"
+                        pattern="[0-9]*"
+                        data-id="{{ product.pk }}"
+                        name="product_{{ product.name }}"
+                        placeholder="Quantity"
+                    >
                 </div>
             {% endfor %}
             </section>