From 8785c79b83fd035ae4425ad1a4da01e79871bc95 Mon Sep 17 00:00:00 2001
From: KarolG <gitesiek@gmail.com>
Date: Sat, 3 Jun 2023 04:14:52 +0200
Subject: [PATCH 1/3] improved mobile views

---
 artel/artel/templates/base.html               |  4 +--
 .../templates/menu/custom_main_menu.html      | 10 +++---
 .../store/partials/product_card.html          | 32 +++++++++++--------
 .../templates/store/product_list_page.html    | 15 ++++-----
 4 files changed, 32 insertions(+), 29 deletions(-)

diff --git a/artel/artel/templates/base.html b/artel/artel/templates/base.html
index 4ad7ce8..744e33a 100644
--- a/artel/artel/templates/base.html
+++ b/artel/artel/templates/base.html
@@ -37,10 +37,10 @@
         {% wagtailuserbar %}
         <div class="container">
             <div class="row">
-                <div class="col-3">
+                <div class="col-md-3 mt-5 ml-2">
                     {% main_menu max_levels=3 template="menu/custom_main_menu.html" %}
                 </div>
-                <div class="col-9 mt-5 ml-2">
+                <div class="col-md-9 mt-5 ml-2">
                     {% block content %}{% endblock %}
                 </div>
             </div>
diff --git a/artel/artel/templates/menu/custom_main_menu.html b/artel/artel/templates/menu/custom_main_menu.html
index 3c10bd5..31fd6a8 100644
--- a/artel/artel/templates/menu/custom_main_menu.html
+++ b/artel/artel/templates/menu/custom_main_menu.html
@@ -1,9 +1,9 @@
-{% load static %} 
+{% load static %}
 {% load menu_tags %}
 
 
-<div class="d-flex flex-column flex-shrink-0 p-3 mr-5" style="width: 280px;">
-    <img src="{% static 'images/icons/las_ruinas_PL.png' %}" class="rounded mx-auto d-block mt-3"/>
+<div class="d-flex flex-column flex-shrink-0 p-3 mr-5">
+    <img src="{% static 'images/icons/las_ruinas_PL.png' %}" class="img-fluid rounded mx-auto d-block mt-3" style="width: 10rem; height: 10 rem;" alt="Portal Logo"/>
     <hr>
     <ul class="nav navbar-nav">
     {% for item in menu_items %}
@@ -11,12 +11,12 @@
             <a href="{{ item.href }}">{{ item.text }}</a>
             {% if item.has_children_in_menu %}
                 <button class="btn btn-toggle" data-bs-target="#ddtoggle_{{ item.link_page.pk }}" data-bs-toggle="collapse"
-                    aria-expanded={% if item.active_class %}"true" {% else %} "false" {% endif %} 
+                    aria-expanded={% if item.active_class %}"true" {% else %} "false" {% endif %}
                     aria-controls="#ddtoggle_{{ item.link_page.pk }}">
                     <img src = "{% static 'images/icons/caret-down.svg' %}" alt="&or;"/>                </button>
                 {% sub_menu item  template="menu/custom_submenu.html" %}
             {% endif %}
-        </li>       
+        </li>
     {% endfor %}
     </ul>
 
diff --git a/artel/store/templates/store/partials/product_card.html b/artel/store/templates/store/partials/product_card.html
index ad6acc0..f02e85a 100644
--- a/artel/store/templates/store/partials/product_card.html
+++ b/artel/store/templates/store/partials/product_card.html
@@ -1,18 +1,22 @@
-{% load static %} 
+{% load static %}
 
 
-  <div class="card h-100" style="width: 15rem;">
-    <div class="card-header">{{item.title}}</div>
-    <div class="card-body">
-      <img src="{{item.main_image.url}}" class="rounded mx-auto d-block" style="width: 10rem; height: 10 rem;">
+<div class="card h-100">
+  <div class="card-header">{{item.title}}</div>
+  <div class="card-body">
+      <img src="{{item.main_image.url}}" class="img-fluid rounded mx-auto d-block" style="width: 10rem; height: 15rem;" alt="{{item.title}}">
       <p class="card-text">{{item.description}}</p>
-              
-      <div class="text-end">
-        <a href="#" class="btn btn-outline-primary">Details</a>
-        <a href="#" class="btn btn-outline-success">
-            <img src = "{% static 'images/icons/cart.svg' %}" alt="Koszyk"/>
-        </a>
-      </div>
-    </div>
   </div>
-  
\ No newline at end of file
+  <div class="card-footer container">
+          <div class="row justify-content-end ">
+              <div class="col-md-9 p-0 text-end text-truncate">
+                  <a href="#" class="btn btn-outline-primary">Details</a>
+              </div>
+              <div class="col-md-3 p-0 text-end">
+                  <a href="#" class="btn btn-outline-success">
+                      <img src="{% static 'images/icons/cart.svg' %}" alt="Koszyk" />
+                  </a>
+              </div>
+      </div>
+  </div>
+</div>
diff --git a/artel/store/templates/store/product_list_page.html b/artel/store/templates/store/product_list_page.html
index 3238d59..a8af2da 100644
--- a/artel/store/templates/store/product_list_page.html
+++ b/artel/store/templates/store/product_list_page.html
@@ -4,14 +4,13 @@
 {% block content %}
 
 <div class="container mb-3">
-    <div class="row row-cols-1 row-cols-md-3 g-4">
-        {% for item in items %}
-            <div class="col">
-                {% include 'store/partials/product_card.html' %}
-            </div>
-        {% endfor %}
-    </div>
-
+  <div class="row row-cols-3 g-4">
+      {% for item in items %}
+          <div class="col-md-4">
+              {% include 'store/partials/product_card.html' %}
+          </div>
+      {% endfor %}
+  </div>
 </div>
 
 <nav aria-label="Page navigation example">

From 6d58e803072efb6934550c93388e536151a1b8d2 Mon Sep 17 00:00:00 2001
From: KarolG <gitesiek@gmail.com>
Date: Mon, 5 Jun 2023 03:46:49 +0200
Subject: [PATCH 2/3] fixed some issues

---
 artel/artel/templates/menu/custom_main_menu.html       | 5 +----
 artel/store/templates/store/partials/product_card.html | 8 ++++----
 2 files changed, 5 insertions(+), 8 deletions(-)

diff --git a/artel/artel/templates/menu/custom_main_menu.html b/artel/artel/templates/menu/custom_main_menu.html
index a5a6fb6..11f6bdc 100644
--- a/artel/artel/templates/menu/custom_main_menu.html
+++ b/artel/artel/templates/menu/custom_main_menu.html
@@ -20,10 +20,7 @@
     {% endfor %}
     </ul>
 </div>
-<div class="d-flex flex-column flex-shrink-0 p-3 mr-5" style="width: 280px;">
+<div class="d-flex flex-column flex-shrink-0 p-3 mr-5">
     <hr>
     <a href={% url 'cart' %} alt="Koszyk" > Koszyk </a>
 </div>
-
-    
-  
\ No newline at end of file
diff --git a/artel/store/templates/store/partials/product_card.html b/artel/store/templates/store/partials/product_card.html
index 72bc8ea..db404e7 100644
--- a/artel/store/templates/store/partials/product_card.html
+++ b/artel/store/templates/store/partials/product_card.html
@@ -1,7 +1,7 @@
 {% load static %}
 
-<div class="card h-100" style="width: 15rem;">
-    <div class="card-header">{{item.title}}</div>
+<div class="card h-100" >
+    <div class="card-header text-truncate">{{item.title}}</div>
     <div class="card-body">
       <img src="{{item.main_image.url}}" class="rounded mx-auto d-block" style="width: 10rem; height: 10 rem;">
 
@@ -10,8 +10,8 @@
           <input type="number" id="quantity{{item.id}}" name="quantity" min="1" value="1" class="form-control form-control-sm">
         </div>
         <div class="col text-end">
-          <button class="btn btn-outline-success add-to-cart-button" 
-            data-product-id="{{item.id}}"  
+          <button class="btn btn-outline-success add-to-cart-button"
+            data-product-id="{{item.id}}"
             data-csrf-token="{{csrf_token}}"
             data-add-to-cart-url={% url "cart-action-add-product" %}
             data-bs-toggle="modal" data-bs-target="#addToCartModal"

From bd048616826d0ab16415a5292a91b92a08ef7032 Mon Sep 17 00:00:00 2001
From: KarolG <gitesiek@gmail.com>
Date: Tue, 6 Jun 2023 14:57:38 +0200
Subject: [PATCH 3/3] Fixed image view, contact info on smaller screen

---
 artel/store/templates/store/order.html        | 20 ++++++-------------
 .../store/partials/product_card.html          |  8 ++++----
 2 files changed, 10 insertions(+), 18 deletions(-)

diff --git a/artel/store/templates/store/order.html b/artel/store/templates/store/order.html
index ee14e34..4def81a 100644
--- a/artel/store/templates/store/order.html
+++ b/artel/store/templates/store/order.html
@@ -17,16 +17,12 @@
                     <div class="row mx-4">
                         <div class="col-sm-6">
                             <label class="order-form-label">{{form.name.label}}</label>
-                        </div>
-                        <div class="col-sm-6">
-                            <label class="order-form-label">{{form.surname.label}}</label>
-                        </div>
-                        <div class="col-sm-6">
                             <div class="form-outline">
                                 {{form.name}}
                             </div>
                         </div>
-                        <div class="col-sm-6 mt-2 mt-sm-0">
+                        <div class="col-sm-6">
+                            <label class="order-form-label">{{form.surname.label}}</label>
                             <div class="form-outline">
                                 {{form.surname}}
                             </div>
@@ -35,16 +31,12 @@
                     <div class="row mx-4">
                         <div class="col-sm-6">
                             <label class="order-form-label">{{form.email.label}}</label>
-                        </div>
-                        <div class="col-sm-6">
-                            <label class="order-form-label">{{form.phone.label}}</label>
-                        </div>
-                        <div class="col-sm-6">
                             <div class="form-outline">
                                 {{form.email}}
                             </div>
                         </div>
-                        <div class="col-sm-6 mt-2 mt-sm-0">
+                        <div class="col-sm-6">
+                            <label class="order-form-label">{{form.phone.label}}</label>
                             <div class="form-outline">
                                 {{form.phone}}
                             </div>
@@ -52,7 +44,7 @@
                     </div>
                 </div>
                 <div class="row mt-3 mx-4">
-                    
+
                     <div class="col-12">
                         <label class="order-form-label">Dane Kontaktowe</label>
                     </div>
@@ -81,7 +73,7 @@
                             {{form.zip_code}}
                         </div>
                     </div>
-        
+
                     <div class="col-12 text-end mt-3">
                         <div class="form-outline">
                             <input type="submit" value="Confirm" class="btn btn-success btn-lg">
diff --git a/artel/store/templates/store/partials/product_card.html b/artel/store/templates/store/partials/product_card.html
index db404e7..a360d1c 100644
--- a/artel/store/templates/store/partials/product_card.html
+++ b/artel/store/templates/store/partials/product_card.html
@@ -2,10 +2,10 @@
 
 <div class="card h-100" >
     <div class="card-header text-truncate">{{item.title}}</div>
-    <div class="card-body">
-      <img src="{{item.main_image.url}}" class="rounded mx-auto d-block" style="width: 10rem; height: 10 rem;">
+    <div class="card-body p-0">
+      <img src="{{item.main_image.url}}" class="img-fluid rounded mx-auto d-block" style="width: 10rem; height: 15rem;" alt="{{item.title}}">
 
-      <div class="row d-flex mt-3">
+      <div class="card-footer row d-flex mt-3">
         <div class="col">
           <input type="number" id="quantity{{item.id}}" name="quantity" min="1" value="1" class="form-control form-control-sm">
         </div>
@@ -16,7 +16,7 @@
             data-add-to-cart-url={% url "cart-action-add-product" %}
             data-bs-toggle="modal" data-bs-target="#addToCartModal"
           >
-              <img src="{% static 'images/icons/cart.svg' %}" alt="Koszyk"/>
+              <img src="{% static 'images/icons/cart.svg' %}" style="width: 1rem; height: 1rem;" alt="Koszyk"/>
           </button>
         </div>
       </div>