update template and style

kritserv · Oct 5, 2023 · fa4881d · fa4881d
1 parent 9a83f1c
commit fa4881d
Show file tree

Hide file tree

Showing 7 changed files with 79 additions and 53 deletions.
diff --git a/code/static/css/main.css b/code/static/css/main.css
@@ -12,21 +12,34 @@ html {
      flex-direction: column;
 }
  #filter-btn {
-     margin-left: 3rem;
-     margin-top: 4rem;
+     margin-left: 0.9rem;
+     margin-top: 3rem;
+}
+.add-to-cart {
+  margin: 5px;
+}
+
+img.img-fluid.rounded-3 {
+  max-width: 90px;
 }
  #prod-container {
-     margin-top: 4rem;
+     margin-top: 3rem;
 }
  #prod-card {
-     width:100%;
+     width:98%;
 }
  #prod-card:hover {
      scale: 1.07;
      transition: .2s;
+}
+div.offcanvas.offcanvas-start.show {
+  min-width: 300px;
+  width: 27vw;
 }
  h5.mb-0 {
      font-weight: bold;
+     font-size: 100%;
+     color: #000000
 }
  #sale-tag {
      width: 55px;
@@ -55,14 +68,11 @@ html {
  div a p {
      color: black;
 }
-h5.mb-0 {
-  font-size: 0.9vw;
-  color: #000000
-}
 
 div.d-flex.justify-content-between.mb-2 {
-  font-size: 0.85vw;
+  width: 80%;
 }
+
  #prod-img {
      width: 37vw;
      min-width: 5rem;

diff --git a/code/templates/account/base.html b/code/templates/account/base.html
@@ -1,4 +1,4 @@
-{% load static %} 
+{% load static %}
 <!DOCTYPE html>
 <html>
    <head>
@@ -104,10 +104,10 @@
                            <li><a class="dropdown-item" href="/accounts/login">Login</a></li>
                            <li><a class="dropdown-item" href="/accounts/signup">Signup</a></li>
                            <li><a class="dropdown-item" href="/loginguest/">Guest Login (For test)</a></li>
-                           <li>
+                           <!--li>
                               <hr class="dropdown-divider">
                            </li>
-                           <li><a class="dropdown-item" href="/admin">Admin Login</a></li>
+                           <li><a class="dropdown-item" href="/admin">Admin Login</a></li-->
                            {% endif %}
                         </ul>
                      </li>
@@ -121,8 +121,8 @@
       <div class="bg-dark text-white text-center py-2">
          <p>This website is developed solely to showcase my developer skills. No products really exist.</p>
          <p>Check out my GitHub repository:</p>
-         <a href="https://github.com/kritserv/online_shop_docker_django_mysql/" target="_blank" class="btn btn-primary">
-            GitHub Repo 
+         <a href="https://github.com/Krittipoom/online_shop_docker_django_mysql/" target="_blank" class="btn btn-primary">
+            GitHub Repo
             <svg xmlns="http://www.w3.org/2000/svg" height="1em" viewBox="0 0 496 512">
                <!--! Font Awesome Free 6.4.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. -->
                <path d="M165.9 397.4c0 2-2.3 3.6-5.2 3.6-3.3.3-5.6-1.3-5.6-3.6 0-2 2.3-3.6 5.2-3.6 3-.3 5.6 1.3 5.6 3.6zm-31.1-4.5c-.7 2 1.3 4.3 4.3 4.9 2.6 1 5.6 0 6.2-2s-1.3-4.3-4.3-5.2c-2.6-.7-5.5.3-6.2 2.3zm44.2-1.7c-2.9.7-4.9 2.6-4.6 4.9.3 2 2.9 3.3 5.9 2.6 2.9-.7 4.9-2.6 4.6-4.6-.3-1.9-3-3.2-5.9-2.9zM244.8 8C106.1 8 0 113.3 0 252c0 110.9 69.8 205.8 169.5 239.2 12.8 2.3 17.3-5.6 17.3-12.1 0-6.2-.3-40.4-.3-61.4 0 0-70 15-84.7-29.8 0 0-11.4-29.1-27.8-36.6 0 0-22.9-15.7 1.6-15.4 0 0 24.9 2 38.6 25.8 21.9 38.6 58.6 27.5 72.9 20.9 2.3-16 8.8-27.1 16-33.7-55.9-6.2-112.3-14.3-112.3-110.5 0-27.5 7.6-41.3 23.6-58.9-2.6-6.5-11.1-33.3 2.6-67.9 20.9-6.5 69 27 69 27 20-5.6 41.5-8.5 62.8-8.5s42.8 2.9 62.8 8.5c0 0 48.1-33.6 69-27 13.7 34.7 5.2 61.4 2.6 67.9 16 17.7 25.8 31.5 25.8 58.9 0 96.5-58.9 104.2-114.8 110.5 9.2 7.9 17 22.9 17 46.4 0 33.7-.3 75.4-.3 83.6 0 6.5 4.6 14.4 17.3 12.1C428.2 457.8 496 362.9 496 252 496 113.3 383.5 8 244.8 8zM97.2 352.9c-1.3 1-1 3.3.7 5.2 1.6 1.6 3.9 2.3 5.2 1 1.3-1 1-3.3-.7-5.2-1.6-1.6-3.9-2.3-5.2-1zm-10.8-8.1c-.7 1.3.3 2.9 2.3 3.9 1.6 1 3.6.7 4.3-.7.7-1.3-.3-2.9-2.3-3.9-2-.6-3.6-.3-4.3.7zm32.4 35.6c-1.6 1.3-1 4.3 1.3 6.2 2.3 2.3 5.2 2.6 6.5 1 1.3-1.3.7-4.3-1.3-6.2-2.2-2.3-5.2-2.6-6.5-1zm-11.4-14.7c-1.6 1-1.6 3.6 0 5.9 1.6 2.3 4.3 3.3 5.6 2.3 1.6-1.3 1.6-3.9 0-6.2-1.4-2.3-4-3.3-5.6-2z"/>
@@ -138,8 +138,8 @@
       {% endfor %}
       {% endif %}
       <a id="top"></a>
-      <div class="container-fluid" style="margin-top: 2rem; margin-left: 4rem;">
-         {% block content %} 
+      <div class="container-fluid" style="margin-top: 2rem;">
+         {% block content %}
          {% endblock %}
       </div>
    </body>

diff --git a/code/templates/base.html b/code/templates/base.html
@@ -1,4 +1,4 @@
-{% load static %} 
+{% load static %}
 <!DOCTYPE html>
 <html>
    <head>
@@ -118,10 +118,10 @@
                            <li><a class="dropdown-item" href="/accounts/login">Login</a></li>
                            <li><a class="dropdown-item" href="/accounts/signup">Signup</a></li>
                            <li><a class="dropdown-item" href="/loginguest/">Guest Login (For test)</a></li>
-                           <li>
+                           <!--li>
                               <hr class="dropdown-divider">
                            </li>
-                           <li><a class="dropdown-item" href="/admin">Admin Login</a></li>
+                           <li><a class="dropdown-item" href="/admin">Admin Login</a></li-->
                            {% endif %}
                         </ul>
                      </li>
@@ -135,8 +135,8 @@
       <div class="bg-dark text-white text-center py-2">
          <p>This website is developed solely to showcase my developer skills. No products really exist.</p>
          <p>Check out my GitHub repository:</p>
-         <a href="https://github.com/kritserv/online_shop_docker_django_mysql/" target="_blank" class="btn btn-primary">
-            GitHub Repo 
+         <a href="https://github.com/Krittipoom/online_shop_docker_django_mysql/" target="_blank" class="btn btn-primary">
+            GitHub Repo
             <svg xmlns="http://www.w3.org/2000/svg" height="1em" viewBox="0 0 496 512">
                <!--! Font Awesome Free 6.4.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. -->
                <path d="M165.9 397.4c0 2-2.3 3.6-5.2 3.6-3.3.3-5.6-1.3-5.6-3.6 0-2 2.3-3.6 5.2-3.6 3-.3 5.6 1.3 5.6 3.6zm-31.1-4.5c-.7 2 1.3 4.3 4.3 4.9 2.6 1 5.6 0 6.2-2s-1.3-4.3-4.3-5.2c-2.6-.7-5.5.3-6.2 2.3zm44.2-1.7c-2.9.7-4.9 2.6-4.6 4.9.3 2 2.9 3.3 5.9 2.6 2.9-.7 4.9-2.6 4.6-4.6-.3-1.9-3-3.2-5.9-2.9zM244.8 8C106.1 8 0 113.3 0 252c0 110.9 69.8 205.8 169.5 239.2 12.8 2.3 17.3-5.6 17.3-12.1 0-6.2-.3-40.4-.3-61.4 0 0-70 15-84.7-29.8 0 0-11.4-29.1-27.8-36.6 0 0-22.9-15.7 1.6-15.4 0 0 24.9 2 38.6 25.8 21.9 38.6 58.6 27.5 72.9 20.9 2.3-16 8.8-27.1 16-33.7-55.9-6.2-112.3-14.3-112.3-110.5 0-27.5 7.6-41.3 23.6-58.9-2.6-6.5-11.1-33.3 2.6-67.9 20.9-6.5 69 27 69 27 20-5.6 41.5-8.5 62.8-8.5s42.8 2.9 62.8 8.5c0 0 48.1-33.6 69-27 13.7 34.7 5.2 61.4 2.6 67.9 16 17.7 25.8 31.5 25.8 58.9 0 96.5-58.9 104.2-114.8 110.5 9.2 7.9 17 22.9 17 46.4 0 33.7-.3 75.4-.3 83.6 0 6.5 4.6 14.4 17.3 12.1C428.2 457.8 496 362.9 496 252 496 113.3 383.5 8 244.8 8zM97.2 352.9c-1.3 1-1 3.3.7 5.2 1.6 1.6 3.9 2.3 5.2 1 1.3-1 1-3.3-.7-5.2-1.6-1.6-3.9-2.3-5.2-1zm-10.8-8.1c-.7 1.3.3 2.9 2.3 3.9 1.6 1 3.6.7 4.3-.7.7-1.3-.3-2.9-2.3-3.9-2-.6-3.6-.3-4.3.7zm32.4 35.6c-1.6 1.3-1 4.3 1.3 6.2 2.3 2.3 5.2 2.6 6.5 1 1.3-1.3.7-4.3-1.3-6.2-2.2-2.3-5.2-2.6-6.5-1zm-11.4-14.7c-1.6 1-1.6 3.6 0 5.9 1.6 2.3 4.3 3.3 5.6 2.3 1.6-1.3 1.6-3.9 0-6.2-1.4-2.3-4-3.3-5.6-2z"/>
@@ -153,7 +153,7 @@
       {% endif %}
       <a id="top"></a>
       <p style="height: 2rem;"></p>
-      {% block content %} 
+      {% block content %}
       {% endblock %}
    </body>
    <script type="text/javascript" src="{% static 'js/bootstrap.bundle.min.js' %}"></script>

diff --git a/code/templates/store/product/cloth.html b/code/templates/store/product/cloth.html
@@ -1,7 +1,7 @@
 {% extends "base.html" %}
 
 {% block content %}
-{% load static %} 
+{% load static %}
     <link rel="stylesheet" href="{% static 'css/aos.css' %}">
     <script src="{% static 'js/aos.js' %}"></script>
 
@@ -67,34 +67,38 @@ <h2>{{ data.price }}฿</h2>
         <h1 style="color: red;">Out of stock</h1>
         {% endif %}
         <p style="height:5rem;"></p>
-        <h3>Cloth information</h3>
-        <br>
-        <table id="detail-table">
-          <tbody>
-            <tr>
-              <td>Title</td>
-              <td>{{ data.title }}</td>
-            </tr>
-            <tr>
-              <td>Gender</td>
-              <td>{{ data.gender }}</td>
-            </tr>
-            <tr>
-              <td>Cloth type</td>
-              <td>{{ data.cloth_type }}</td>
-            </tr>
-            <tr>
-              <td>Size</td>
-              <td>{{ data.size }}</td>
-            </tr>
-            <tr>
-              <td>Color</td>
-              <td>{{ data.color }}</td>
-            </tr>
-          </tbody>
-        </table>
       </div>
     </div>
-  </div>
+
+    <div class="container-fluid">
+      <h3>Cloth information</h3>
+      <br>
+      <table id="detail-table">
+        <tbody>
+          <tr>
+            <td>Title</td>
+            <td>{{ data.title }}</td>
+          </tr>
+          <tr>
+            <td>Gender</td>
+            <td>{{ data.gender }}</td>
+          </tr>
+          <tr>
+            <td>Cloth type</td>
+            <td>{{ data.cloth_type }}</td>
+          </tr>
+          <tr>
+            <td>Size</td>
+            <td>{{ data.size }}</td>
+          </tr>
+          <tr>
+            <td>Color</td>
+            <td>{{ data.color }}</td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
+    </div>
+    </div>
 
 {% endblock %}
diff --git a/code/templates/store/product/computer.html b/code/templates/store/product/computer.html
@@ -1,7 +1,7 @@
 {% extends "base.html" %}
 
 {% block content %}
-{% load static %} 
+{% load static %}
     <link rel="stylesheet" href="{% static 'css/aos.css' %}">
     <script src="{% static 'js/aos.js' %}"></script>
 
@@ -67,6 +67,10 @@ <h2>{{ data.price }}฿</h2>
         <h1 style="color: red;">Out of stock</h1>
         {% endif %}
         <p style="height:5rem;"></p>
+      </div>
+    </div>
+
+    <div class="container-fluid">
         <h3>Computer information</h3>
         <br>
         <table id="detail-table">

diff --git a/code/templates/store/product/headphone.html b/code/templates/store/product/headphone.html
@@ -1,7 +1,7 @@
 {% extends "base.html" %}
 
 {% block content %}
-{% load static %} 
+{% load static %}
     <link rel="stylesheet" href="{% static 'css/aos.css' %}">
     <script src="{% static 'js/aos.js' %}"></script>
 
@@ -67,6 +67,10 @@ <h2>{{ data.price }}฿</h2>
         <h1 style="color: red;">Out of stock</h1>
         {% endif %}
         <p style="height:5rem;"></p>
+      </div>
+    </div>
+
+    <div class="container-fluid">
         <h3>Headphone information</h3>
         <br>
         <table id="detail-table">

diff --git a/code/templates/store/product/smartphone.html b/code/templates/store/product/smartphone.html
@@ -1,7 +1,7 @@
 {% extends "base.html" %}
 
 {% block content %}
-{% load static %} 
+{% load static %}
     <link rel="stylesheet" href="{% static 'css/aos.css' %}">
     <script src="{% static 'js/aos.js' %}"></script>
 
@@ -67,6 +67,10 @@ <h2>{{ data.price }}฿</h2>
         <h1 style="color: red;">Out of stock</h1>
         {% endif %}
         <p style="height:5rem;"></p>
+      </div>
+    </div>
+
+    <div class="container-fluid">
         <h3>Smartphone information</h3>
         <br>
         <table id="detail-table">