Question 301630 in Html Question posted in
Some basic documentation can be found here.

Html – Button style in Django

The button should be a small vertical rectangle and the top width should stick out a little. It should also be white before pressing and crimson after pressing.
And when the pointer goes over this button, the text "Add" and when deleting, "Remove" should be displayed.
However, it’s just a rectangle, and even its name doesn’t change from addition to deletion (the color and style don’t change either).

Thanks in advance for your ideas:)

product_detail.html:

<form method= "get" action = "{% url 'add' product.id %}">
    {% csrf_token %}
    <button clasa="bottonwatch" type = "submit" value = "{{ product.id }}"  name = "productid">
        <div class="addwatch">
            {% if product.watch_list %}
                addWatchlist
        </div>
        <div class="removewatch">
            {% else%}
                remove
        </div>
        {% endif %}
    </button>
    
</form>

Style:

.bottonwatch {
    border-radius: 50%;
    height: 2.5rem;
    min-width: auto;
    padding: 0;
    width: 2.5rem;
}

.addwatch {
    color: black;
    background-color: white;
}

.remove{
    color: white;
    background-color: rgb(100, 36, 36);
}

views.py:

@login_required(login_url="login")
def add(request, productid):
    product_id = request.GET.get('productid', False)
    watch = Watchlist.objects.filter(user = request.user.username)


    for items in watch:
        if (items.watch_list.all) == int(productid):  
            return watchlist(request, request.user.username)
        else:
            return remove(request, productid)
    

   new_watch = Watchlist(product_id, user=request.user.username)
   new_watch.save()
   messages.success(request, "The product has been added to your WatchList.")
   return product_detail(request, productid)


@login_required(login_url="login")
def remove(request, pid):
    list_ = get_object_or_404(Watchlist, pk = pid)
    messages.success(request, "The product was removed from your WatchList.")
    list_.delete()
    return redirect("index")
Tags:

2

Answers


  1. 0

    you need to structure your button text differently based on the conditions.

    <form method="get" action="{% url 'add' product.id %}">
    {% csrf_token %}
    <button class="buttonwatch{% if product.watch_list %} in-watchlist{% endif %}" type="submit" value="{{ product.id }}" name="productid">
        <span class="button-text">
            {% if product.watch_list %}
                Remove
            {% else %}
                Add
            {% endif %}
        </span>
    </button>
</form>

/* Button Style */
.buttonwatch {
    border: none;
    border-radius: 5px;
    padding: 5px 10px;
    cursor: pointer;
    outline: none;
    transition: background-color 0.3s ease;
}

/* Default Style */
.buttonwatch .button-text {
    color: black;
}

/* Styles for 'Add' State */
.buttonwatch:not(.in-watchlist) {
    background-color: white;
}

/* Styles for 'Remove' State */
.buttonwatch.in-watchlist {
    background-color: crimson;
    color: white;
}

/* Hover Style */
.buttonwatch:hover:not(.in-watchlist) {
    background-color: lightgray;
}

/* Pressed Style */
.buttonwatch:active {
    background-color: crimson;
    color: white;
}

    correct the CSS class names in both your HTML and CSS. The structure should be a span element within the button to allow the dynamic change of text based on conditions. Additionally, apply styles to the span with class addwatch to change background and text colors.

    Login or Signup to reply.
  2. 0

    I saw some problems in the problem you raised that might help:

    • you have remove class in style file, but you use removewatch in the template.
    • put div in condition

    {% if product.watch_list %} <div class="addwatch"> addWatchlist </div> <div class="remove"> {% else%} remove </div> {% endif %}

    I hope it is useful.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search