selectable images hover

Author: QuitoTactico

SoftServeAcademy/settings.py

@@ -53,7 +53,7 @@
     "django.middleware.security.SecurityMiddleware",
     "django.contrib.sessions.middleware.SessionMiddleware",
     "django.middleware.common.CommonMiddleware",
-    'django.middleware.locale.LocaleMiddleware',
+    "django.middleware.locale.LocaleMiddleware",
     "django.middleware.csrf.CsrfViewMiddleware",
     "django.contrib.auth.middleware.AuthenticationMiddleware",
     "django.contrib.messages.middleware.MessageMiddleware",

learning_resource/views.py

@@ -56,16 +56,18 @@ def create_review(request, id: int):
         if request.method == "POST":
             form = ReviewForm(request.POST)
             if form.is_valid():
-                previous_review = learning_resource.reviews.filter(user=request.user).first()
-                
+                previous_review = learning_resource.reviews.filter(
+                    user=request.user
+                ).first()
+
                 review = form.save(commit=False)
                 review.user = request.user
-                
+
                 if previous_review:
                     learning_resource.reviews.filter(user=request.user).delete()
                     if not review.comment.endswith(" (edited)"):
                         review.comment += " (edited)"
-                
+
                 review.save()
                 learning_resource.reviews.add(review)
                 return redirect("learning_resource_detail", id=id)

static/css/header.css

@@ -24,6 +24,11 @@ body {
     border-radius: 50%;
     margin-right: 10px;
     object-fit: cover;
+    transition: filter 0.3s;
+}
+
+.wrapper header .auth-buttons a .user-image:hover {
+    filter: brightness(0.8);
 }
 
 header {

static/css/learningresourcedetail.css

@@ -161,6 +161,7 @@ body {
     height: 50px;
     border-radius: 50%;
     margin-right: 10px;
+    object-fit: cover;
 }
 
 .star-rating {

static/css/user.css

@@ -36,13 +36,24 @@ body {
 
 
 /* Imagen de perfil */
+.profile-pic-container {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    padding: 10px;
+}
+
 .profile-pic {
-    width: 20rem;
-    height: 20rem;
+    width: 20rem; /* Mantén el tamaño existente */
+    height: 20rem; /* Mantén el tamaño existente */
     border-radius: 50%;
     object-fit: cover;
     display: flex;
+    transition: filter 0.3s;
+}
 
+.profile-pic:hover {
+    filter: brightness(0.8);
 }
 
 /* Información en la sección de la izquierda */

user/templates/user.html

@@ -43,13 +43,15 @@ <h2>Learning Preferences <i class="fa fa-pencil"></i></h2>
                 </button>
             </a>
         </div>
-        <a href="{% url 'update_profile' %}">
-            {% if user.image %}
-            <img class="profile-pic img-fluid" src="{{ user.image.url }}" alt="Profile Picture">
-            {% else %}
-            <img class="profile-pic img-fluid" src="{% static 'images/default-user.png' %}" alt="Profile Picture">
-            {% endif %}
-        </a>
+        <div class="profile-pic-container">
+            <a href="{% url 'update_profile' %}">
+                {% if user.image %}
+                <img class="profile-pic img-fluid" src="{{ user.image.url }}" alt="Profile Picture">
+                {% else %}
+                <img class="profile-pic img-fluid" src="{% static 'images/default-user.png' %}" alt="Profile Picture">
+                {% endif %}
+            </a>
+        </div>
     </div>
 
     <div class="skills">