how to fix the size of the comment section? - html

I'm working on a comments section for a blog in Flask. Having a very poor understanding of html, I decided to go with a public domain template. The script below works great, just one problem! After each submission, the comment window shrinks. Does anyone know how to make the size of the comment window constant?
{% for comment in post.comments %}
<div class="container my-2 py-2">
<div class="row d-flex justify-content-center">
<div class="col-md-12 col-lg-10">
<div class="card text-dark">
<div class="card-body p-4">
<p class="fw-light mb-4 pb-2"> Recent Comment By: </p>
<div class="d-flex flex-start">
<img class="rounded-circle shadow-2-strong me-2"
src="{{url_for('static', filename='uploads/' + comment.user.image_file)}}" alt="avatar" width="60"
height="60" />
<div>
<h6 class="fw-bold mb-2">{{comment.user.username}}</h6>
<div class="d-flex align-items-center mb-2">
<p class="mb-0">
<i> {{comment.datetime.strftime('%B %d, %Y')}} </i>
{% if user.id == comment.author or user.id == post.author %}
<a href="/delete_comment/{{comment.id}}">
<span class="badge bg-danger">remove?</span>
</a>
{% endif %}
</p>
</div>
<p class="mb-0"> {{comment.text|safe}} </p>
</div>
</div>
</div>
</div>
</div>
</div>
{% endfor %}

Related

How to make each product have functioning plus minus button on my product page and add its price to the total amount?

enter image description hereI'm working on Ecommerce Website that sells Coffee and my problem is that the only working plus and minus button is the first coffee. The plus and minus buttons on the others are not functioning. Is it about the for statement where I'm wrong? or the structure of the html isn't right.
I've copied some of the code on cart.html file to make the product page had the option of adding products to the cart and also has a proceed button to the checkout page. The before structure of the site was you click on the image of a product and directed to the addtocart page then to the checkout page.`{% extends 'app/base.html' %}
{% load static %}
{% block title %}Category{% endblock title %}
{% block main-content %}
<div class="container my-5">
<div class="row">
<div class="col-sm-8">
<div class="card">
<div class="card-body">
{% for prod in product %}
<div class="row">
<div class="col-sm-3 text-center align-self-center"><img src="{{prod.product_image.url}}" alt="" srcset="" class="img-fluid img-thumbnail shadow-sm" height="150" width="150"></div>
<div class="col-sm-9">
<div>
<h5>{{prod.title}}</h5>
<p class="mb-2 text-muted small">{{prod.description}}</p>
<div class="my-3">
<label for="quantity">Quantity:</label>
<a class="minus-cart btn" pid={{product.id}}><i class="fas fa-minus-square fa-lg"></i></a>
<span id="quantity">{{quantity}}</span>
<a class="plus-cart btn" pid={{product.id}}><i class="fas fa-plus-square fa-lg"></i></a>
</div>
<div class="d-flex justify-content-between">
<a href="#" class="remove-cart btn btn-sm btn-secondary mr-3" pid={{prod.id}}>Remove item </a>
<p class="mb-0"><span><strong>₱ {{prod.discounted_price}}</strong></span></p>
</div>
</div>
</div>
</div>
<hr class="text-muted">
{% endfor %}
</div>
</div>
</div>
<div class="col-sm-4">
<div class="card">
<div class="card-body">
<h3>The Total Amount </h3>
<ul class="list-group">
<li class="list-group-item d-flex justify-content-between align-items-center border-0 px-0 pb-0" >Amount<span id="amount">₱ {{amount}}</span></li>
<li class="list-group-item d-flex justify-content-between align-items-center px-0">Shipping<span>₱ 144</span></li>
<li class="list-group-item d-flex justify-content-between align-items-center border-0 px-0 mb-3">
<div>
<strong>Total</strong>
</div>
<span id="totalamount"><strong>₱ {{totalamount}}</strong></span>
</li>
</ul>
<div class="d-grid">Place Order</div>
</div>
</div>
</div>
</div>
</div>
{% endblock main-content%}
`

4 products on the same line in the template

I'm developing an e-commerce with Django. My backend is fine, my problem is with the template. Currently, I want to display 4 products per row, and if there are 7 products, the other 3 must be aligned with the top one. I'm using bootstrap to do this, however, for some reason I don't know, it doesn't have 4 products on the same line, even with space. I'm using a container with 1200px.
home.html
<div class="container">
<div class="row">
<div class="col-lg-8">
<div class="row">
{% for product in products %}
<div class="card mb-4 border rounded" style="width: 13.5rem;">
<a href="{{ product.get_absolute_url }}">
{%if product.image %}
<img class="img-produto" src='/media/{{product.image}}' class="card-img-top hover_img ">
{% else%}
<img class="img-produto" src="{% static '/img/not-found-product.jpg' %}" class="card-img-top hover_img">
{%endif%}
</a>
<div class="card-body">
<p class="card-title">{{product.name}}</p>
<p class="card-text"><i class='fas fa-dollar-sign' style="margin-right:2px"></i>{{product.price}}</p>
</div>
</div>
{% endfor %}
</div>
</div>
</div>
</div>
Just remove width: 13.5rem; and add class col-4 in the div. Like,
<div class="col-4 card mb-4 border rounded">
<!-- your content goes here -->
</div>

<a> element appearing inside even though I put it outside

I have django template file called card.html
In this file the anchor tag is on the outside.
<a class="url d-block" href="{% if content_type == 'book' %} {% url 'book' content.id|default:1 %} {% else %} {% url 'article' content.id|default:1 %} {% endif %}">
<div class="card d-flex flex-column border border-1 rounded">
<div class="p-5 bg-light">
<img src="{{ content.thumbnail }}" class="thumbnail img-fluid rounded">
</div>
<div class="flex-grow-1 p-4 border-top border-1">
<h3 class="category fs-5 text-secondary">{{ content.category.first }}</h3>
<h2 class="title fs-4 mb-2 text-dark">{{ content.title }}</h2>
{% if content_type == "book" %}
<a class="book-author fs-5 fw-bold" href="https://www.google.com/search?q={{content.book_author|default:''}}">By {{ content.book_author }}</a>
<h3 class="author fs-5 text-dark">Summarized by {{ content.author }}</h3>
{% else %}
<h3 class="author fs-5 text-dark">Created by {{ content.author }}</h3>
{% endif %}
</div>
<div class="flex-shrink-1 pt-3 d-flex justify-content-evenly border border-1">
<p class="date-created d-inline">{{ content.date_created }}</p>
<i class="fa-solid fa-star mt-1"></i>
<i class="fa-solid fa-ellipsis-vertical mt-1"></i>
</div>
</div>
</a>
card.html is included in this template (the div is inside a body).
<div id="list-container" class="d-flex flex-wrap justify-content-center gap-4 pb-5 px-5">
{% for content in content_list %}
{% include "app/card.html" with visibility="visible" %}
{% empty %}
<h2>No {{ content_type }} for now..</h2>
{% endfor %}
</div>
When rendered, it looks like this.
The anchor tag somehow close by itself and got inside the div.
<a class="url" href=" /books/1 "></a>
<div class="card d-flex flex-column border border-1 rounded">
<a class="url" href=" /books/1 ">
<div class="p-5 bg-light">
<img src="img.jpg" class="thumbnail img-fluid rounded">
</div>
</a>
<div class="flex-grow-1 p-4 border-top border-1">
<a class="url" href=" /books/1 ">
<h3 class="category fs-5 text-secondary">Example Category</h3>
<h2 class="title fs-4 mb-2 text-dark">Title</h2>
</a>
<a class="book-author fs-5 fw-bold" href="https://www.google.com/search?q=Name">By Name</a>
<h3 class="author fs-5 text-dark">Summarized by Archer</h3>
</div>
<div class="flex-shrink-1 pt-3 d-flex justify-content-evenly border border-1">
<p class="date-created d-inline">May 3, 2022, 9 a.m.</p>
<i class="fa-solid fa-star mt-1"></i>
<i class="fa-solid fa-ellipsis-vertical mt-1"></i>
</div>
</div>
You cannot use <a> tag inside <a> tag. HTML don't allow nested tag.
You can use onclick event but you have to check with javascript which element clicked because parent element is a wrapper.

How do I add an image in a bootstrap card?

I am trying to attach an image in a specific area in a card, but I don't know how to. I am sorry if it's a very silly question, I am a total beginner in terms of html. So can anyone please show me how to do it? It would have been really useful.
I am using Django. For example, If I want to add an image in that specific blue outlined area, what should I do?
My code
{% for fixture in fixtures %}
<div class="card bg-light">
<div class="card-header" style="color:red;" >
Featured
</div>
<div class="card-body">
<h5 class="card-title" style="color:black;">{{ fixture.home_team }} vs {{ fixture.away_team }}</h5>
<p class="card-text" style="color:black;">{{ fixture.description }}</p>
<form style="color:black;">
<h5><label for="watching">Watching?</label>
<input type="checkbox" id="watching" name="watching" value="watching">
</h5>
</form>
</div>
</div>
{% endfor %}
Give this a try
<div class="card bg-light">
<div class="card-header" style="color:red;" >
Featured
</div>
<div class="card-body">
<div class="row">
<div class="col col-md-6">
<h5 class="card-title" style="color:black;">{{ fixture.home_team }} vs {{ fixture.away_team }}</h5>
<p class="card-text" style="color:black;">{{ fixture.description }}</p>
<form style="color:black;">
<h5><label for="watching">Watching?</label>
<input type="checkbox" id="watching" name="watching" value="watching">
</h5>
</form>
</div>
<div class="col col-md-6">
<img src="https://lab.oliveiraweb.com.br/images-for-samples/owl.jpg" class="img-fluid">
</div>
</div>
</div>
</div>

Have liquid syntax include an additional liquid syntax?

I am trying to refactor my site using the D.R.Y. method, part of that is using liquid syntax to help.
Currently everything works with what I have here:
page-internal.html
---
layout: default
<div>
<div class="d-flex" style="background-color: #e9ecef;">
<div class="jumbotron mx-auto mb-0 py-3 px-5" style="max-width: 1200px">
<div class="col-lg-12 p-3 mx-auto">
<img width="50" height="50"
class="rounded-circle float-left mr-2"
src="/assets/img/internal/{{ page.image }}" />
<h1 class="display-4">{{ page.title | escape }}</h1>
<p class="lead">{{ content }}</p>
</div>
</div>
</div>
<div>
<div class="d-flex justify-content-center">
{% include card-post-{{ page.passname }}.html %}
</div>
</div>
</div>
The {{ page.passname }} pulls from a .md file like so:
---
layout: page-internal
title: User Interface
permalink: /pages/design-ui
image: ui.svg
passname: ui
---
That works just fine, too. But then I have to create several pages to pull from instead of just referencing passname to grab the right .md page (I hope I'm making sense here, apologies if I'm not). That page looks like this
card-post.ui.html
And the html on that page is:
<div class="container-fluid">
<div class="col-lg-12 mx-auto row d-flex justify-content-center mt-3" style="max-width: 1400px">
{% for post in site.categories.ui %}
<div class="card col-sm-12 col-lg-3 m-2">
<div class="card-body d-flex flex-column">
<div class="media">
<div class="d-flex mr-3">
<a href="{{ post.url }}">
<img width="40" height="40"
class="rounded-circle"
src="/assets/img/{{ post.image }} " alt="{{ post.title }}" />
</a>
</div>
<div class="media-body">
<h6 class="mb-1">{{ post.title }}</h6>
</div>
</div>
<div class="d-flex flex-column" style="height: 105px;">
<div class="p-2">
<p class="text-muted">{{ post.excerpt }}</p>
</div>
</div>
<div class=" flex-column align-items-end">
<button type="button" class="btn btn-secondary btn-sm btn-block" onclick="location.href = '{{ post.url }}';">View project</button>
</div>
</div>
</div>
{% endfor %}
</div>
</div>
What I'd like to do is take the two html sites and have it like this:
---
layout: default
---
<div>
<div class="d-flex" style="background-color: #e9ecef;">
<div class="jumbotron mx-auto mb-0 py-3 px-5" style="max-width: 1200px">
<div class="col-lg-12 p-3 mx-auto">
<img width="50" height="50"
class="rounded-circle float-left mr-2"
src="/assets/img/internal/{{ page.image }}" />
<h1 class="display-4">{{ page.title | escape }}</h1>
<p class="lead">{{ content }}</p>
</div>
</div>
</div>
<div>
<div class="d-flex justify-content-center">
{% include card-post-{{ page.passname }}.html %}
<div class="container-fluid">
<div class="col-lg-12 mx-auto row d-flex justify-content-center mt-3" style="max-width: 1400px">
{% for post in site.categories.ui %}
<div class="card col-sm-12 col-lg-3 m-2">
<div class="card-body d-flex flex-column">
<div class="media">
<div class="d-flex mr-3">
<a href="{{ post.url }}">
<img width="40" height="40"
class="rounded-circle"
src="/assets/img/{{ post.image }} " alt="{{ post.title }}" />
</a>
</div>
<div class="media-body">
<h6 class="mb-1">{{ post.title }}</h6>
</div>
</div>
<div class="d-flex flex-column" style="height: 105px;">
<div class="p-2">
<p class="text-muted">{{ post.excerpt }}</p>
</div>
</div>
<div class=" flex-column align-items-end">
<button type="button" class="btn btn-secondary btn-sm btn-block" onclick="location.href = '{{ post.url }}';">View project</button>
</div>
</div>
</div>
{% endfor %}
</div>
</div>
</div>
</div>
</div>
This would work however the syntax here:
{% for post in site.categories.ui %}
Needs to be (and this is where I can't figure out what to do)
{% for post in site.categories. {{ page.passname }} %}
This throws an error:
Liquid Warning: Liquid syntax error (line 23): Unexpected character { in "post in site.categories.{{ page.passname }}" in /_layouts/page-internal.html
So my question is, how can I get the passname from said .md post (in this instance it'd be design-ui.md ) and put it into {% for post in site.categories.ui %} where the word ui would be dependint on the .md
I hope I said all this right, apologies if not.
Your loop syntax {% for post in site.categories. {{ page.passname }} %}
is incorrect :
You may reach your category with bracket notation :
{% for post in site.categories[page.passname] %}