Massively improved styling of product pages

This commit is contained in:
Luke Else 2024-02-08 20:38:35 +00:00
parent b1ee09e35a
commit c55fdde3fc
3 changed files with 30 additions and 30 deletions

View File

@ -20,24 +20,24 @@ html {
background-color: var(--bg); background-color: var(--bg);
color: var(--fg); color: var(--fg);
font-size: 160%; font-size: 160%;
font-family: 'Courier New', Courier, 'Inter'; font-weight: lighter;
font-family: 'InterVariable', 'Courier New', Courier, 'Inter';
height: 100%; height: 100%;
} }
body { body {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 1rem;
margin: 0; margin: 0;
height: 100%; height: 100%;
} }
.navbar { .navbar {
flex: 0 1 auto; flex: 0 1 auto;
padding: 30px; padding: 5px 30px;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 1rem; gap: .3rem;
} }
/* Navbar styling*/ /* Navbar styling*/
@ -163,7 +163,7 @@ a:active {
} }
.category { .category {
margin: .5rem 0rem; margin: 0;
padding: 0rem 1rem; padding: 0rem 1rem;
border-left: .125rem solid var(--fg); border-left: .125rem solid var(--fg);
} }
@ -178,7 +178,6 @@ a:active {
justify-content: flex-start; justify-content: flex-start;
align-items: center; align-items: center;
width: 100%; width: 100%;
gap: 1rem;
flex-direction: column; flex-direction: column;
flex-grow: 1; flex-grow: 1;
height: 1%; height: 1%;

View File

@ -1,7 +1,8 @@
<link rel="stylesheet" href="{{ url_for('static', filename='css/products.css') }}"> <link rel="stylesheet" href="{{ url_for('static', filename='css/products.css') }}">
<div class="product-container"> {% if products != None %}
{% if products != None %} <p>Showing results for {{products|count}} products</p>
<div class="product-container">
{% for product in products %} {% for product in products %}
<a href="/products/{{product.id}}" class="product product-link"> <a href="/products/{{product.id}}" class="product product-link">
<div class="product-title">{{product.name}}</div> <div class="product-title">{{product.name}}</div>
@ -16,5 +17,7 @@
<input type="submit" class="product-add-to-cart" value="Add to Cart" /> <input type="submit" class="product-add-to-cart" value="Add to Cart" />
</a> </a>
{% endfor %} {% endfor %}
{% endif %} </div>
</div> {% else %}
<p>Sorry... We have nothing to show here!</p>
{% endif %}

View File

@ -15,27 +15,25 @@
</div> </div>
</nav> </nav>
<centre> {% if user != None and user.role == "Seller" %}
{% if user != None and user.role == "Seller" %}
<div class="categories">
{# List all available seller tools #}
<a href="{{url_for('main.products.display_add_product')}}" class="category">Create Products</a>
<a href="{{url_for('main.products.display_own_products')}}" class="category">View My Products</a>
<a href="{{url_for('main.stats.index')}}" class="category">View Seller Stats</a>
</div>
{% endif %}
<div class="categories"> <div class="categories">
{# List all categories and ensure the selected one is highlighted #} {# List all available seller tools #}
{% for c in categories %} <a href="{{url_for('main.products.display_add_product')}}" class="category">Create Products</a>
{% if category == c.name %} <a href="{{url_for('main.products.display_own_products')}}" class="category">View My Products</a>
<a style="color: cyan" href="{{url_for('main.products.category', category=c.name)}}" class="category">{{c.name}}</a> <a href="{{url_for('main.stats.index')}}" class="category">View Seller Stats</a>
{% else %}
<a href="{{url_for('main.products.category', category=c.name)}}" class="category">{{c.name}}</a>
{% endif %}
{% endfor %}
</div> </div>
</centre> {% endif %}
<div class="categories">
{# List all categories and ensure the selected one is highlighted #}
{% for c in categories %}
{% if category == c.name %}
<a style="color: cyan" href="{{url_for('main.products.category', category=c.name)}}" class="category">{{c.name}}</a>
{% else %}
<a href="{{url_for('main.products.category', category=c.name)}}" class="category">{{c.name}}</a>
{% endif %}
{% endfor %}
</div>
</div> </div>
{% with messages = get_flashed_messages(with_categories=true)%} {% with messages = get_flashed_messages(with_categories=true)%}