From 4bf5ac680d870a5e8a9aca54e7b9194d9a4d67ba Mon Sep 17 00:00:00 2001 From: Kumi Date: Fri, 4 Oct 2024 06:26:07 +0200 Subject: [PATCH] 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. --- src/structables/routes/contest.py | 8 +- src/structables/static/css/style.css | 184 ++++++++++-------------- src/structables/templates/contests.html | 22 +-- 3 files changed, 84 insertions(+), 130 deletions(-) diff --git a/src/structables/routes/contest.py b/src/structables/routes/contest.py index 9e29e47..a60b88f 100644 --- a/src/structables/routes/contest.py +++ b/src/structables/routes/contest.py @@ -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"], diff --git a/src/structables/static/css/style.css b/src/structables/static/css/style.css index b3c1041..86471cd 100644 --- a/src/structables/static/css/style.css +++ b/src/structables/static/css/style.css @@ -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); diff --git a/src/structables/templates/contests.html b/src/structables/templates/contests.html index 3c000de..8eb60ca 100644 --- a/src/structables/templates/contests.html +++ b/src/structables/templates/contests.html @@ -9,7 +9,7 @@ {% for contest in contests %}
- {{ contest.alt }} + {{ contest.alt }}

{{ contest.title }}

Closes: {{ contest.deadline }}

@@ -17,25 +17,5 @@
{% endfor %} -
-

Winner's Circle

- {% for closed in closed %} -
- {{ closed.alt }} - {% for featured_items in closed.featured_items %} -
- - {{ featured_items.title}} -
- {{ featured_items.title }} - -

by {{ featured_items.author }}

-
- {% endfor %} -
- {% endfor %} -
{% endblock %}