refactor(UI): update contest routes and styles
Simplified contest route URLs by removing the domain, now using relative paths. Utilized a proxy function for banner URLs for enhanced handling. Revamped CSS styling for a darker theme, improving readability and updating contest display to be more flexible and mobile-friendly. Removed deprecated elements from the template to streamline the presentation.
This commit is contained in:
parent
c633a3ec47
commit
4bf5ac680d
GPG key ID:
ECBCC9082395383F
3 changed files with 84 additions and 130 deletions
|
|
@ -31,12 +31,12 @@ def init_contest_routes(app):
|
|||
for contest in contests:
|
||||
contest_details = {
|
||||
"title": contest["title"],
|
||||
"link": f"https://www.instructables.com/{contest['urlString']}",
|
||||
"link": f"/{contest['urlString']}",
|
||||
"deadline": contest["deadline"],
|
||||
"startDate": contest["startDate"],
|
||||
"numEntries": contest["numEntries"],
|
||||
"state": contest["state"],
|
||||
"bannerUrl": contest["bannerUrlMedium"],
|
||||
"bannerUrl": proxy(contest["bannerUrlMedium"]),
|
||||
}
|
||||
contest_list.append(contest_details)
|
||||
|
||||
|
|
@ -139,8 +139,8 @@ def init_contest_routes(app):
|
|||
contest_list = []
|
||||
for contest in contests:
|
||||
contest_details = {
|
||||
"link": f"https://www.instructables.com/{contest['urlString']}",
|
||||
"img": contest["bannerUrlMedium"],
|
||||
"link": f"/{contest['urlString']}",
|
||||
"img": proxy(contest["bannerUrlMedium"]),
|
||||
"alt": contest["title"],
|
||||
"title": contest["title"],
|
||||
"deadline": contest["deadline"],
|
||||
|
|
|
|||
|
|
@ -6,6 +6,9 @@
|
|||
--code-bg: #20232a;
|
||||
--code-color: #969ba6;
|
||||
--border-color: lightgrey;
|
||||
--background-color: #1e1e2e;
|
||||
--card-background: #2b2e3b;
|
||||
--text-color: #f0f0f0;
|
||||
}
|
||||
|
||||
body {
|
||||
|
|
@ -17,6 +20,7 @@ body {
|
|||
color: var(--main-color);
|
||||
padding: 0 10px;
|
||||
hyphens: auto;
|
||||
background-color: var(--background-color);
|
||||
}
|
||||
|
||||
a {
|
||||
|
|
@ -63,92 +67,94 @@ blockquote {
|
|||
margin-right: 10px;
|
||||
}
|
||||
|
||||
.navbar-logo {
|
||||
height: 64px;
|
||||
}
|
||||
|
||||
.card {
|
||||
background-color: #fff;
|
||||
border: 1px solid #ddd;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.card-body {
|
||||
flex: 1;
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
.card-footer {
|
||||
padding: 1rem;
|
||||
background-color: #f8f9fa;
|
||||
border-top: 1px solid #ddd;
|
||||
margin-top: auto;
|
||||
}
|
||||
|
||||
.card-img-top {
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.navbar-collapse {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.navbar-nav {
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
.nav-item {
|
||||
margin-left: 1rem;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.navbar-nav {
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.nav-item {
|
||||
margin-left: 0;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.navbar-collapse {
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.form-control {
|
||||
width: 100%;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
.contest-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-around;
|
||||
gap: 20px;
|
||||
margin: 20px 0;
|
||||
}
|
||||
|
||||
.contest-item {
|
||||
background-color: #fff;
|
||||
.contest-list-item {
|
||||
background-color: var(--card-background);
|
||||
padding: 20px;
|
||||
border: 1px solid var(--border-color);
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
|
||||
max-width: 500px;
|
||||
color: var(--text-color);
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.contest-item img {
|
||||
.contest-list-item img {
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
border-radius: 4px;
|
||||
margin-top: 10px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.closed-contests {
|
||||
margin-top: 40px;
|
||||
}
|
||||
|
||||
.closed-contest {
|
||||
margin-bottom: 30px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.closed-contest-contest {
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
border-radius: 8px;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
.closed-contest-winner {
|
||||
display: inline-block;
|
||||
max-width: 200px;
|
||||
margin: 10px;
|
||||
text-align: center;
|
||||
color: var(--text-color);
|
||||
}
|
||||
|
||||
.closed-contest-winner-img {
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
border-radius: 4px;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
.ible-small {
|
||||
font-size: 0.9em;
|
||||
color: #ccc;
|
||||
}
|
||||
|
||||
.container {
|
||||
margin-top: 20px !important;
|
||||
}
|
||||
|
||||
header {
|
||||
margin-bottom: 50px;
|
||||
}
|
||||
|
||||
.wrap {
|
||||
word-wrap: break-word;
|
||||
overflow-wrap: break-word;
|
||||
}
|
||||
|
||||
.navbar-logo {
|
||||
height: 64px;
|
||||
}
|
||||
|
||||
.img-fluid,
|
||||
video,
|
||||
iframe {
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.text-muted {
|
||||
color: #6c757d !important;
|
||||
}
|
||||
|
||||
.pagination {
|
||||
|
|
@ -193,14 +199,6 @@ blockquote {
|
|||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.container {
|
||||
margin-top: 20px !important;
|
||||
}
|
||||
|
||||
header {
|
||||
margin-bottom: 50px;
|
||||
}
|
||||
|
||||
.go_here_link {
|
||||
background-color: #4caf50;
|
||||
border: none;
|
||||
|
|
@ -216,30 +214,6 @@ header {
|
|||
color: black;
|
||||
}
|
||||
|
||||
.wrap {
|
||||
word-wrap: break-word;
|
||||
overflow-wrap: break-word;
|
||||
}
|
||||
|
||||
.img-fluid {
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
video {
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
iframe {
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.text-muted {
|
||||
color: #6c757d !important;
|
||||
}
|
||||
|
||||
.sitemap-group {
|
||||
margin-top: 2em;
|
||||
display: inline-block;
|
||||
|
|
@ -253,7 +227,7 @@ iframe {
|
|||
}
|
||||
|
||||
.sitemap-group .card {
|
||||
background-color: var(--primary-bg);
|
||||
background-color: var(--background-color);
|
||||
border: 1px solid var(--border-color);
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 2px 4px var(--shadow-color);
|
||||
|
|
|
|||
|
|
@ -9,7 +9,7 @@
|
|||
{% for contest in contests %}
|
||||
<div class="contest-list-item">
|
||||
<a href="{{ contest.link }}">
|
||||
<img src="{{ contest.img }}" alt="{{ contest.alt }}" style="max-width:500px;">
|
||||
<img src="{{ contest.img }}" alt="{{ contest.alt }}">
|
||||
</a>
|
||||
<h2>{{ contest.title }}</h2>
|
||||
<p>Closes: {{ contest.deadline }}</p>
|
||||
|
|
@ -17,25 +17,5 @@
|
|||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
<div class="closed-contests" id="contest-winners">
|
||||
<h2>Winner's Circle</h2>
|
||||
{% for closed in closed %}
|
||||
<div class="closed-contest">
|
||||
<a href="{{ closed.link }}"><img class="closed-contest-contest" src="{{ closed.img }}"
|
||||
alt="{{ closed.alt }}"></a>
|
||||
{% for featured_items in closed.featured_items %}
|
||||
<div class="closed-contest-winner">
|
||||
<a href="{{ featured_items.link }}">
|
||||
<img class="closed-contest-winner-img" src="{{ featured_items.img }}"
|
||||
alt="{{ featured_items.title}}">
|
||||
<br>
|
||||
<b>{{ featured_items.title }}</b>
|
||||
</a>
|
||||
<p>by <a href="{{ featured_items.author_link }}">{{ featured_items.author }}</a></p>
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
</center>
|
||||
{% endblock %}
|
||||
|
|
|
|||
Loading…
Reference in a new issue