feat: added browser reload and styling

config/settings/base.py

@@ -45,6 +45,10 @@ PROJECT_APPS = [
 
 INSTALLED_APPS = DJANGO_APPS + THIRD_PARTY_APPS + PROJECT_APPS
 
+
+if DEBUG:
+    INSTALLED_APPS += ["django_browser_reload"]
+
 PROJECT_MIDDLEWARE = []
 
 DJANGO_MIDDLEWARE = [
@@ -62,7 +66,7 @@ MIDDLEWARE = DJANGO_MIDDLEWARE + PROJECT_MIDDLEWARE
 
 if DEBUG:
     INSTALLED_APPS += ["silk"]
-    MIDDLEWARE += ["silk.middleware.SilkyMiddleware"]
+    MIDDLEWARE += ["silk.middleware.SilkyMiddleware", "django_browser_reload.middleware.BrowserReloadMiddleware",]
 
 ROOT_URLCONF = "config.urls"
 

config/urls.py

@@ -16,4 +16,4 @@ urlpatterns = [
 if settings.DEBUG:
     urlpatterns.append(path("__debug__/", include(debug_toolbar.urls)))
     urlpatterns += static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)
-    urlpatterns += [path("silk/", include("silk.urls"))]
+    urlpatterns += [path("silk/", include("silk.urls")), path("__reload__/", include("django_browser_reload.urls")),]

requirements.test.txt

@@ -3,3 +3,4 @@ pytest==7.3.0
 pytest-django==4.8.0
 coverage==7.2.3
 pytest-cov==4.0.0
+django-browser-reload==1.17.0

users/forms/login.py

@@ -8,9 +8,9 @@ class LoginForm(AuthenticationForm):
         widget=forms.TextInput(
             attrs={
                 "autofocus": True,
-                "class": "my-2 bg-gray-50 border border-gray-300 text-gray-900 sm:text-sm rounded-lg focus:ring-primary-600"
+                "class": "my-2 bg-gray-50 border border-gray-300 text-gray-900 sm:text-sm rounded-lg focus:ring-primary-600 "
                 "focus:border-primary-600 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600"
-                "dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500",
+                "dark:placeholder-gray-400 dark:text-white dark:focus:ring-primary-500 dark:focus:border-primary-500",
             }
         )
     )
@@ -22,7 +22,7 @@ class LoginForm(AuthenticationForm):
                 "autocomplete": "current-password",
                 "class": "my-2 bg-gray-50 border border-gray-300 text-gray-900 sm:text-sm rounded-lg focus:ring-primary-600 "
                 "focus:border-primary-600 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 "
-                "dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500",
+                "dark:placeholder-gray-400 dark:text-white dark:focus:ring-primary-500 dark:focus:border-primary-500",
             }
         ),
     )

web/templates/components/cart/add_to_cart.html

@@ -2,7 +2,12 @@
 <form action="" hx-post="{% url 'web:add_cart_item' %}" hx-swap="none">
   {% csrf_token %}
   <input type="hidden" name="product" value="{{ product.pk }}">
-  <input id="quantity" type="hidden" name="quantity" value="1">
+
+  <div class="flex">
+  <input class="bg-gray-50 border border-gray-300 text-gray-900 sm:text-sm rounded-lg focus:ring-primary-600
+                focus:border-primary-600 block p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400
+                dark:text-white dark:focus:ring-primary-500 dark:focus:border-primary-500 mr-4"
+         id="quantity" type="number" min="1" max="10" name="quantity" value="1">
   <button class="w-full flex justify-center rounded-lg bg-primary-700 px-5 py-2.5
                  text-sm font-medium text-white hover:bg-primary-800 focus:outline-none focus:ring-4
                  focus:ring-primary-300 dark:bg-primary-600 dark:hover:bg-primary-700 dark:focus:ring-primary-800
@@ -11,4 +16,6 @@
     {% include 'components/icons/add_cart.svg' %}
     {% translate 'Añadir al carrito' %}
   </button>
+  </div>
+
 </form>

web/templates/components/product_card.html

@@ -15,18 +15,18 @@
       <a href="{% url 'web:product_detail' pk=product.pk slug=product.slug %}"
          class="text-lg font-semibold leading-tight text-gray-900 hover:underline dark:text-white">{{ product.name }}</a>
 
-      <div class="mt-2 flex items-center gap-2">
+<!--      <div class="mt-2 flex items-center gap-2">-->
-        <div class="flex items-center">
+<!--        <div class="flex items-center">-->
-          {% include 'components/icons/star.svg' %}
+<!--          {% include 'components/icons/star.svg' %}-->
-          {% include 'components/icons/star.svg' %}
+<!--          {% include 'components/icons/star.svg' %}-->
-          {% include 'components/icons/star.svg' %}
+<!--          {% include 'components/icons/star.svg' %}-->
-          {% include 'components/icons/star.svg' %}
+<!--          {% include 'components/icons/star.svg' %}-->
-          {% include 'components/icons/star.svg' %}
+<!--          {% include 'components/icons/star.svg' %}-->
-        </div>
+<!--        </div>-->
 
-        <p class="text-sm font-medium text-gray-900 dark:text-white">5.0</p>
+<!--        <p class="text-sm font-medium text-gray-900 dark:text-white">5.0</p>-->
-        <p class="text-sm font-medium text-gray-500 dark:text-gray-400">(455)</p>
+<!--        <p class="text-sm font-medium text-gray-500 dark:text-gray-400">(455)</p>-->
-      </div>
+<!--      </div>-->
       <div class="mt-4 flex gap-4">
         <p class="text-2xl font-extrabold leading-tight text-gray-900 dark:text-white">
           {{ product.price.price_with_tax }}€

web/templates/users/register.html

@@ -15,15 +15,15 @@
               <form class="space-y-4 md:space-y-6" action="#">
                   <div>
                       <label for="email" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">Your email</label>
-                      <input type="email" name="email" id="email" class="bg-gray-50 border border-gray-300 text-gray-900 sm:text-sm rounded-lg focus:ring-primary-600 focus:border-primary-600 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500" placeholder="name@company.com" required="">
+                      <input type="email" name="email" id="email" class="bg-gray-50 border border-gray-300 text-gray-900 sm:text-sm rounded-lg focus:ring-primary-600 focus:border-primary-600 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-primary-500 dark:focus:border-blue-500" placeholder="name@company.com" required="">
                   </div>
                   <div>
                       <label for="password" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">Password</label>
-                      <input type="password" name="password" id="password" placeholder="••••••••" class="bg-gray-50 border border-gray-300 text-gray-900 sm:text-sm rounded-lg focus:ring-primary-600 focus:border-primary-600 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500" required="">
+                      <input type="password" name="password" id="password" placeholder="••••••••" class="bg-gray-50 border border-gray-300 text-gray-900 sm:text-sm rounded-lg focus:ring-primary-600 focus:border-primary-600 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-primary-500 dark:focus:border-blue-500" required="">
                   </div>
                   <div>
                       <label for="confirm-password" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">Confirm password</label>
-                      <input type="confirm-password" name="confirm-password" id="confirm-password" placeholder="••••••••" class="bg-gray-50 border border-gray-300 text-gray-900 sm:text-sm rounded-lg focus:ring-primary-600 focus:border-primary-600 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500" required="">
+                      <input type="confirm-password" name="confirm-password" id="confirm-password" placeholder="••••••••" class="bg-gray-50 border border-gray-300 text-gray-900 sm:text-sm rounded-lg focus:ring-primary-600 focus:border-primary-600 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-primary-500 dark:focus:border-blue-500" required="">
                   </div>
                   <div class="flex items-start">
                       <div class="flex items-center h-5">

web/templates/users/reset_password.html

@@ -15,15 +15,15 @@
           <form class="mt-4 space-y-4 lg:mt-5 md:space-y-5" action="#">
               <div>
                   <label for="email" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">Your email</label>
-                  <input type="email" name="email" id="email" class="bg-gray-50 border border-gray-300 text-gray-900 sm:text-sm rounded-lg focus:ring-primary-600 focus:border-primary-600 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500" placeholder="name@company.com" required="">
+                  <input type="email" name="email" id="email" class="bg-gray-50 border border-gray-300 text-gray-900 sm:text-sm rounded-lg focus:ring-primary-600 focus:border-primary-600 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-primary-500 dark:focus:border-blue-500" placeholder="name@company.com" required="">
               </div>
               <div>
                   <label for="password" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">New Password</label>
-                  <input type="password" name="password" id="password" placeholder="••••••••" class="bg-gray-50 border border-gray-300 text-gray-900 sm:text-sm rounded-lg focus:ring-primary-600 focus:border-primary-600 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500" required="">
+                  <input type="password" name="password" id="password" placeholder="••••••••" class="bg-gray-50 border border-gray-300 text-gray-900 sm:text-sm rounded-lg focus:ring-primary-600 focus:border-primary-600 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-primary-500 dark:focus:border-blue-500" required="">
               </div>
               <div>
                   <label for="confirm-password" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">Confirm password</label>
-                  <input type="confirm-password" name="confirm-password" id="confirm-password" placeholder="••••••••" class="bg-gray-50 border border-gray-300 text-gray-900 sm:text-sm rounded-lg focus:ring-primary-600 focus:border-primary-600 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500" required="">
+                  <input type="confirm-password" name="confirm-password" id="confirm-password" placeholder="••••••••" class="bg-gray-50 border border-gray-300 text-gray-900 sm:text-sm rounded-lg focus:ring-primary-600 focus:border-primary-600 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-primary-500 dark:focus:border-blue-500" required="">
               </div>
               <div class="flex items-start">
                   <div class="flex items-center h-5">