Skip to content

Commit

Permalink
Updated mobile column sizing on review card elements to better displa…
Browse files Browse the repository at this point in the history 
…y on mobile devices
  • Loading branch information
@Gilleece
Gilleece committed Apr 5, 2021
1 parent 42338f1 commit 9f0173a
Show file tree
Hide file tree
Showing 3 changed files with 86 additions and 89 deletions.
3 changes: 0 additions & 3 deletions templates/base.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -128,9 +128,6 @@
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
integrity="sha384-b5kHyXgcpbZJO/tY9Ul7kGkf1S0CWuKcCD38l8YkeH8z8QjE0GmW1gYU5S9FOnJ0"
crossorigin="anonymous"></script>

<!-- Custom JS -->
<script src="{{ url_for('static', filename='js/script.js') }}"></script>
{% block scripts %}
{% endblock %}

Expand Down
164 changes: 82 additions & 82 deletions templates/profile.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,88 +17,88 @@ <h3>
{% for review in reviews %}
{% if review.author.lower() == username %}
<div class="col">
<div class="card letter review-card shadow p-3 mb-5 bg-body rounded">
<img src="{{ review.image_url }}" class="card-img-top review-image" alt="Review image">
<div class="card-body d-flex flex-column">
<h4 class="card-title text-center">{{ review.filament_name }} from {{ review.brand }}</h4>
<h6 class="text-center mb-4"><i>Review by: {{ review.author }}</i></h6>
<div class="row text-center mb-1">
<div class="col-6">
<h6><i class="fas fa-palette rainbow-gradient"></i> Colour</h6>
<p>{{ review.colour }}</p>
</div>
<div class="col-6">
<h6><i class="fas fa-tape glow"></i> Finish</h6>
<p>{{ review.finish }}</p>
</div>
</div>
<div class="row text-center">
<div class="col-4">
<h6>Rating</h6>
<p>
{% if review.rating == 1 %}
<i class="fas fa-star goodstar"></i>
<i class="far fa-star badstar"></i>
<i class="far fa-star badstar"></i>
<i class="far fa-star badstar"></i>
<i class="far fa-star badstar"></i>
{% endif %}
{% if review.rating == 2 %}
<i class="fas fa-star goodstar"></i>
<i class="fas fa-star goodstar"></i>
<i class="far fa-star badstar"></i>
<i class="far fa-star badstar"></i>
<i class="far fa-star badstar"></i>
{% endif %}
{% if review.rating == 3 %}
<i class="fas fa-star goodstar"></i>
<i class="fas fa-star goodstar"></i>
<i class="fas fa-star goodstar"></i>
<i class="far fa-star badstar"></i>
<i class="far fa-star badstar"></i>
{% endif %}
{% if review.rating == 4 %}
<i class="fas fa-star goodstar"></i>
<i class="fas fa-star goodstar"></i>
<i class="fas fa-star goodstar"></i>
<i class="fas fa-star goodstar"></i>
<i class="far fa-star badstar"></i>
{% endif %}
{% if review.rating == 5 %}
<i class="fas fa-star goodstar"></i>
<i class="fas fa-star goodstar"></i>
<i class="fas fa-star goodstar"></i>
<i class="fas fa-star goodstar"></i>
<i class="fas fa-star goodstar"></i>
{% endif %}
</p>
</div>
<div class="col-4">
<h6><i class="fas fa-thermometer-three-quarters thermometer"></i> Temp</h6>
<p>{{ review.temperature }}c</p>
</div>
<div class="col-4">
<h6><i class="fas fa-money-bill-wave money"></i> Cost:</h6>
<p>
{% if review.cost == 1 %}
<i class="fas fa-dollar-sign" style="color: green;"></i>
<i class="fas fa-dollar-sign" style="color: grey;"></i>
<i class="fas fa-dollar-sign" style="color: grey;"></i>
{% endif %}
{% if review.cost == 2 %}
<i class="fas fa-dollar-sign" style="color: green;"></i>
<i class="fas fa-dollar-sign" style="color: green;"></i>
<i class="fas fa-dollar-sign" style="color: grey;"></i>
{% endif %}
{% if review.cost == 3 %}
<i class="fas fa-dollar-sign" style="color: green;"></i>
<i class="fas fa-dollar-sign" style="color: green;"></i>
<i class="fas fa-dollar-sign" style="color: green;"></i>
{% endif %}
</p>
</div>
</div>
<p class="card-text mt-3"><strong>Review: </strong>{{ review.review_text }}</p>
<div class="card letter review-card shadow p-3 mb-5 bg-body rounded">
<img src="{{ review.image_url }}" class="card-img-top review-image" alt="Review image">
<div class="card-body d-flex flex-column">
<h4 class="card-title text-center">{{ review.filament_name }} from {{ review.brand }}</h4>
<h6 class="text-center mb-4"><i>Review by: {{ review.author }}</i></h6>
<div class="row text-center mb-1">
<div class="col-6">
<h6><i class="fas fa-palette rainbow-gradient"></i> Colour</h6>
<p>{{ review.colour }}</p>
</div>
<div class="col-6">
<h6><i class="fas fa-tape glow"></i> Finish</h6>
<p>{{ review.finish }}</p>
</div>
</div>
<div class="row text-center">
<div class="col-12 col-md-4">
<h6>Rating</h6>
<p>
{% if review.rating == 1 %}
<i class="fas fa-star goodstar"></i>
<i class="far fa-star badstar"></i>
<i class="far fa-star badstar"></i>
<i class="far fa-star badstar"></i>
<i class="far fa-star badstar"></i>
{% endif %}
{% if review.rating == 2 %}
<i class="fas fa-star goodstar"></i>
<i class="fas fa-star goodstar"></i>
<i class="far fa-star badstar"></i>
<i class="far fa-star badstar"></i>
<i class="far fa-star badstar"></i>
{% endif %}
{% if review.rating == 3 %}
<i class="fas fa-star goodstar"></i>
<i class="fas fa-star goodstar"></i>
<i class="fas fa-star goodstar"></i>
<i class="far fa-star badstar"></i>
<i class="far fa-star badstar"></i>
{% endif %}
{% if review.rating == 4 %}
<i class="fas fa-star goodstar"></i>
<i class="fas fa-star goodstar"></i>
<i class="fas fa-star goodstar"></i>
<i class="fas fa-star goodstar"></i>
<i class="far fa-star badstar"></i>
{% endif %}
{% if review.rating == 5 %}
<i class="fas fa-star goodstar"></i>
<i class="fas fa-star goodstar"></i>
<i class="fas fa-star goodstar"></i>
<i class="fas fa-star goodstar"></i>
<i class="fas fa-star goodstar"></i>
{% endif %}
</p>
</div>
<div class="col-6 col-md-4">
<h6><i class="fas fa-thermometer-three-quarters thermometer"></i> Temp</h6>
<p>{{ review.temperature }}c</p>
</div>
<div class="col-6 col-md-4">
<h6><i class="fas fa-money-bill-wave money"></i> Cost</h6>
<p>
{% if review.cost == 1 %}
<i class="fas fa-dollar-sign" style="color: green;"></i>
<i class="fas fa-dollar-sign" style="color: grey;"></i>
<i class="fas fa-dollar-sign" style="color: grey;"></i>
{% endif %}
{% if review.cost == 2 %}
<i class="fas fa-dollar-sign" style="color: green;"></i>
<i class="fas fa-dollar-sign" style="color: green;"></i>
<i class="fas fa-dollar-sign" style="color: grey;"></i>
{% endif %}
{% if review.cost == 3 %}
<i class="fas fa-dollar-sign" style="color: green;"></i>
<i class="fas fa-dollar-sign" style="color: green;"></i>
<i class="fas fa-dollar-sign" style="color: green;"></i>
{% endif %}
</p>
</div>
</div>
<p class="card-text mt-3"><strong>Review: </strong>{{ review.review_text }}</p>
</div>
<!-- Edit/Delete Button for user reviews-->
<div class="row justify-content-center">
Expand Down
8 changes: 4 additions & 4 deletions templates/reviews.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@ <h6><i class="fas fa-tape glow"></i> Finish</h6>
</div>
</div>
<div class="row text-center">
<div class="col-4">
<div class="col-12 col-md-4">
<h6>Rating</h6>
<p>
{% if review.rating == 1 %}
Expand Down Expand Up @@ -55,12 +55,12 @@ <h6>Rating</h6>
{% endif %}
</p>
</div>
<div class="col-4">
<div class="col-6 col-md-4">
<h6><i class="fas fa-thermometer-three-quarters thermometer"></i> Temp</h6>
<p>{{ review.temperature }}c</p>
</div>
<div class="col-4">
<h6><i class="fas fa-money-bill-wave money"></i> Cost:</h6>
<div class="col-6 col-md-4">
<h6><i class="fas fa-money-bill-wave money"></i> Cost</h6>
<p>
{% if review.cost == 1 %}
<i class="fas fa-dollar-sign" style="color: green;"></i>
Expand Down

0 comments on commit 9f0173a

Please sign in to comment.