Skip to content

Commit

Permalink
Update review card style and format
Browse files Browse the repository at this point in the history
  • Loading branch information
@Gilleece
Gilleece committed Apr 1, 2021
1 parent baf6851 commit 7a664df
Show file tree
Hide file tree
Showing 16 changed files with 419 additions and 514 deletions.
33 changes: 33 additions & 0 deletions static/css/style.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -75,6 +75,39 @@
color: green;
}

/* Letter style credit to: https://codepen.io/mlms13/pen/LKFoy */
.letter {
background-color: #fff;
box-shadow: 0 0 10px rgba(0,0,0,0.3);
margin: 26px auto 0;
max-width: 550px;
min-height: 300px;
padding: 24px;
position: relative;
width: 80%;
}
.letter:before, .letter:after {
content: "";
height: 98%;
position: absolute;
width: 100%;
z-index: -1;
}
.letter:before {
background: #fafafa;
box-shadow: 0 0 8px rgba(0,0,0,0.2);
left: -5px;
top: 4px;
transform: rotate(-2.5deg);
}
.letter:after {
background: #f6f6f6;
box-shadow: 0 0 3px rgba(0,0,0,0.2);
right: -3px;
top: 1px;
transform: rotate(1.4deg);
}

/* Footer styles */
html {
position: relative;
Expand Down
4 changes: 3 additions & 1 deletion templates/add_review.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -103,7 +103,9 @@ <h6>Image URL:</h6>
</div>
<!-- Submit button -->
<div class="text-center">
<div>{{ form.submit(class_='btn btn-success') }} <i class="fas fa-sign-in-alt"></i></div>
<button type="submit" class='btn btn-success'>
Post Review <i class="fas fa-sign-in-alt"></i>
</button>
</div>
</div>
</form>
Expand Down
2 changes: 1 addition & 1 deletion templates/base.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1">

<!-- Fav Icon fix -->
<link rel="shortcut icon" href="#">
<link rel="shortcut icon" href="/static/images/filament-icon-white.png">

<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"
Expand Down
32 changes: 11 additions & 21 deletions templates/materials/abs.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -38,24 +38,24 @@ <h3>
<div class="row row-cols-1 row-cols-md-2 g-4">
{% for review in reviews %}
{% if review.material_name == "ABS" %}
<div class="col">
<div class="card review-card shadow p-3 mb-5 bg-body rounded">
<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-2">Review by: {{ review.author }}</h6>
<div class="row text-center mb-1 border border-primary">
<div class="col-6 border border-primary">
<h6 class="text-center mb-4"><i>Review by: {{ review.author }}</i></h6>
<div class="row text-center mb-1">
<div class="col-6">
<h5><i class="fas fa-palette rainbow-gradient"></i> Colour:</h5>
<h6>{{ review.colour }}</h6>
</div>
<div class="col-6 border border-primary">
<div class="col-6">
<h5><i class="fas fa-tape glow"></i> Finish:</h5>
<h6>{{ review.finish }}</h6>
</div>
</div>
<div class="row text-center border border-primary">
<div class="col-4 border border-primary">
<div class="row text-center">
<div class="col-4">
<h5>Rating:</h5>
<h6>
{% if review.rating == 1 %}
Expand Down Expand Up @@ -95,11 +95,11 @@ <h6>
{% endif %}
</h6>
</div>
<div class="col-4 border border-primary">
<div class="col-4">
<h5><i class="fas fa-thermometer-three-quarters thermometer"></i> Temp:</h5>
<h5>{{ review.temperature }}c</h5>
</div>
<div class="col-4 border border-primary">
<div class="col-4">
<h5><i class="fas fa-money-bill-wave money"></i> Cost:</h5>
<h6>
{% if review.cost == 1 %}
Expand All @@ -120,17 +120,7 @@ <h6>
</h6>
</div>
</div>
<p class="card-text mt-3"><strong>Review: </strong>{{ review.review_text }}</p>
<p class="card-text mt-auto text-end">
<small class="text-muted">
{% if review.likes == 1 %}
{{ review.likes }} like
{% else %}
{{ review.likes }} likes
{% endif %}
</small>
<a href="#"><i class="fas fa-thumbs-up"></i></a>
</p>
<p class="card-text mt-3"><strong>Review: </strong>{{ review.review_text }}</p>
</div>
</div>
</div>
Expand Down
32 changes: 11 additions & 21 deletions templates/materials/asa.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -36,24 +36,24 @@ <h3>
<div class="row row-cols-1 row-cols-md-2 g-4">
{% for review in reviews %}
{% if review.material_name == "ASA" %}
<div class="col">
<div class="card review-card shadow p-3 mb-5 bg-body rounded">
<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-2">Review by: {{ review.author }}</h6>
<div class="row text-center mb-1 border border-primary">
<div class="col-6 border border-primary">
<h6 class="text-center mb-4"><i>Review by: {{ review.author }}</i></h6>
<div class="row text-center mb-1">
<div class="col-6">
<h5><i class="fas fa-palette rainbow-gradient"></i> Colour:</h5>
<h6>{{ review.colour }}</h6>
</div>
<div class="col-6 border border-primary">
<div class="col-6">
<h5><i class="fas fa-tape glow"></i> Finish:</h5>
<h6>{{ review.finish }}</h6>
</div>
</div>
<div class="row text-center border border-primary">
<div class="col-4 border border-primary">
<div class="row text-center">
<div class="col-4">
<h5>Rating:</h5>
<h6>
{% if review.rating == 1 %}
Expand Down Expand Up @@ -93,11 +93,11 @@ <h6>
{% endif %}
</h6>
</div>
<div class="col-4 border border-primary">
<div class="col-4">
<h5><i class="fas fa-thermometer-three-quarters thermometer"></i> Temp:</h5>
<h5>{{ review.temperature }}c</h5>
</div>
<div class="col-4 border border-primary">
<div class="col-4">
<h5><i class="fas fa-money-bill-wave money"></i> Cost:</h5>
<h6>
{% if review.cost == 1 %}
Expand All @@ -118,17 +118,7 @@ <h6>
</h6>
</div>
</div>
<p class="card-text mt-3"><strong>Review: </strong>{{ review.review_text }}</p>
<p class="card-text mt-auto text-end">
<small class="text-muted">
{% if review.likes == 1 %}
{{ review.likes }} like
{% else %}
{{ review.likes }} likes
{% endif %}
</small>
<a href="#"><i class="fas fa-thumbs-up"></i></a>
</p>
<p class="card-text mt-3"><strong>Review: </strong>{{ review.review_text }}</p>
</div>
</div>
</div>
Expand Down
32 changes: 11 additions & 21 deletions templates/materials/carbon.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -38,24 +38,24 @@ <h3>
<div class="row row-cols-1 row-cols-md-2 g-4">
{% for review in reviews %}
{% if review.material_name == "Carbon" %}
<div class="col">
<div class="card review-card shadow p-3 mb-5 bg-body rounded">
<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-2">Review by: {{ review.author }}</h6>
<div class="row text-center mb-1 border border-primary">
<div class="col-6 border border-primary">
<h6 class="text-center mb-4"><i>Review by: {{ review.author }}</i></h6>
<div class="row text-center mb-1">
<div class="col-6">
<h5><i class="fas fa-palette rainbow-gradient"></i> Colour:</h5>
<h6>{{ review.colour }}</h6>
</div>
<div class="col-6 border border-primary">
<div class="col-6">
<h5><i class="fas fa-tape glow"></i> Finish:</h5>
<h6>{{ review.finish }}</h6>
</div>
</div>
<div class="row text-center border border-primary">
<div class="col-4 border border-primary">
<div class="row text-center">
<div class="col-4">
<h5>Rating:</h5>
<h6>
{% if review.rating == 1 %}
Expand Down Expand Up @@ -95,11 +95,11 @@ <h6>
{% endif %}
</h6>
</div>
<div class="col-4 border border-primary">
<div class="col-4">
<h5><i class="fas fa-thermometer-three-quarters thermometer"></i> Temp:</h5>
<h5>{{ review.temperature }}c</h5>
</div>
<div class="col-4 border border-primary">
<div class="col-4">
<h5><i class="fas fa-money-bill-wave money"></i> Cost:</h5>
<h6>
{% if review.cost == 1 %}
Expand All @@ -120,17 +120,7 @@ <h6>
</h6>
</div>
</div>
<p class="card-text mt-3"><strong>Review: </strong>{{ review.review_text }}</p>
<p class="card-text mt-auto text-end">
<small class="text-muted">
{% if review.likes == 1 %}
{{ review.likes }} like
{% else %}
{{ review.likes }} likes
{% endif %}
</small>
<a href="#"><i class="fas fa-thumbs-up"></i></a>
</p>
<p class="card-text mt-3"><strong>Review: </strong>{{ review.review_text }}</p>
</div>
</div>
</div>
Expand Down
32 changes: 11 additions & 21 deletions templates/materials/hips.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -34,24 +34,24 @@ <h3>
<div class="row row-cols-1 row-cols-md-2 g-4">
{% for review in reviews %}
{% if review.material_name == "HIPS" %}
<div class="col">
<div class="card review-card shadow p-3 mb-5 bg-body rounded">
<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-2">Review by: {{ review.author }}</h6>
<div class="row text-center mb-1 border border-primary">
<div class="col-6 border border-primary">
<h6 class="text-center mb-4"><i>Review by: {{ review.author }}</i></h6>
<div class="row text-center mb-1">
<div class="col-6">
<h5><i class="fas fa-palette rainbow-gradient"></i> Colour:</h5>
<h6>{{ review.colour }}</h6>
</div>
<div class="col-6 border border-primary">
<div class="col-6">
<h5><i class="fas fa-tape glow"></i> Finish:</h5>
<h6>{{ review.finish }}</h6>
</div>
</div>
<div class="row text-center border border-primary">
<div class="col-4 border border-primary">
<div class="row text-center">
<div class="col-4">
<h5>Rating:</h5>
<h6>
{% if review.rating == 1 %}
Expand Down Expand Up @@ -91,11 +91,11 @@ <h6>
{% endif %}
</h6>
</div>
<div class="col-4 border border-primary">
<div class="col-4">
<h5><i class="fas fa-thermometer-three-quarters thermometer"></i> Temp:</h5>
<h5>{{ review.temperature }}c</h5>
</div>
<div class="col-4 border border-primary">
<div class="col-4">
<h5><i class="fas fa-money-bill-wave money"></i> Cost:</h5>
<h6>
{% if review.cost == 1 %}
Expand All @@ -116,17 +116,7 @@ <h6>
</h6>
</div>
</div>
<p class="card-text mt-3"><strong>Review: </strong>{{ review.review_text }}</p>
<p class="card-text mt-auto text-end">
<small class="text-muted">
{% if review.likes == 1 %}
{{ review.likes }} like
{% else %}
{{ review.likes }} likes
{% endif %}
</small>
<a href="#"><i class="fas fa-thumbs-up"></i></a>
</p>
<p class="card-text mt-3"><strong>Review: </strong>{{ review.review_text }}</p>
</div>
</div>
</div>
Expand Down
Loading

0 comments on commit 7a664df

Please sign in to comment.