From c8736577e53aaf3b8ccf920ada359fbaaabb1623 Mon Sep 17 00:00:00 2001 From: Thomas Peetz Date: Sat, 16 Aug 2025 00:40:32 +0200 Subject: [PATCH] Resolve "use CSS for header" --- kontor-api/src/static/style.css | 172 ++++++++++++++++++ kontor-api/src/templates/comic/comics.html | 47 +++-- .../src/templates/components/footer.html | 1 + .../src/templates/components/navbar.html | 12 +- kontor-api/src/templates/index.html | 3 + kontor-api/src/templates/media/files.html | 42 +++-- kontor-api/src/templates/media/media_nav.html | 5 + kontor-api/src/templates/shared/base.html | 88 +++++++-- .../src/webapps/comic/route_worktype.py | 6 +- kontor-api/src/webapps/media/route_actors.py | 24 +++ kontor-api/src/webapps/media/route_media.py | 17 +- kontor-vue/index.html | 10 +- kontor-vue/src/App.vue | 50 +---- kontor-vue/src/assets/base.css | 43 +---- kontor-vue/src/assets/main.css | 19 +- kontor-vue/src/components/MainNavbar.vue | 75 ++++++++ kontor-vue/src/router/index.ts | 6 + kontor-vue/src/views/ComicsView.vue | 6 + 18 files changed, 464 insertions(+), 162 deletions(-) create mode 100644 kontor-api/src/static/style.css create mode 100644 kontor-api/src/templates/components/footer.html create mode 100644 kontor-api/src/templates/media/media_nav.html create mode 100644 kontor-api/src/webapps/media/route_actors.py create mode 100644 kontor-vue/src/components/MainNavbar.vue create mode 100644 kontor-vue/src/views/ComicsView.vue diff --git a/kontor-api/src/static/style.css b/kontor-api/src/static/style.css new file mode 100644 index 0000000..8b5c0c3 --- /dev/null +++ b/kontor-api/src/static/style.css @@ -0,0 +1,172 @@ +* { + box-sizing: border-box; +} + +body { + font-family: Arial; + padding: 10px; + background: lightgrey; +} + +/* Header/Blog Title */ +.header { + padding: 30px; + text-align: center; + background-color: lightblue; +} + +.header h1 { + font-size: 50px; +} + +/* Style the top navigation bar */ +.topnav { + overflow: hidden; + background-color: darkgrey; +} + +/* Style the topnav links */ +.topnav a { + float: left; + display: block; + color: #f2f2f2; + text-align: center; + padding: 14px 16px; + text-decoration: none; +} + +/* Change color on hover */ +.topnav a:hover { + background-color: #ddd; + color: black; +} + +.subnav { + overflow: hidden; + background-color: grey; +} + +.subnav a { + float: left; + display: block; + color: #f2f2f2; + text-align: center; + padding: 14px 16px; + text-decoration: none; +} + +.form-inline { + display: flex; + flex-flow: row wrap; + align-items: center; + padding-top: 10px; + padding-left: 20px; +} + +.form-inline label { + margin: 5px 10px 5px 0; +} + +.form-inline input { + padding-right: 50px; + margin-right: 10px; +} + +.form-inline button { + padding: 10px 20px; + background-color: dodgerblue; + border: 1px solid #ddd; + color: white; + border-radius: 10px; +} + +.form-inline button:hover { + background-color: royalblue; +} + +.pill-nav a { + display: inline-block; + color: white; + background-color: dodgerblue; + text-align: center; + padding: 10px; + text-decoration: none; + border-radius: 10px; + margin-left: 20px; +} + +/* Change the color of links on mouse-over */ +.pill-nav a:hover { + background-color: royalblue; + color: white; +} + +/* Add a color to the active/current link */ +.pill-nav a.active { + background-color: royalblue; + color: white; +} + +.maincolumn { + float:left; + width: 100%; +} +/* Create two unequal columns that floats next to each other */ +/* Left column */ +.leftcolumn { + float: left; + width: 75%; +} + +/* Right column */ +.rightcolumn { + float: left; + width: 25%; + background-color: #f1f1f1; + padding-left: 20px; +} + +/* Fake image */ +.fakeimg { + background-color: #aaa; + width: 100%; + padding: 20px; +} + +/* Add a card effect for articles */ +.card { + background-color: white; + padding: 20px; + margin-top: 20px; +} + +/* Clear floats after the columns */ +.row::after { + content: ""; + display: table; + clear: both; +} + +/* Footer */ +.footer { + padding: 20px; + text-align: center; + background: #ddd; + margin-top: 20px; +} + +/* Responsive layout - when the screen is less than 800px wide, make the two columns stack on top of each other instead of next to each other */ +@media screen and (max-width: 800px) { + .leftcolumn, .rightcolumn { + width: 100%; + padding: 0; + } +} + +/* Responsive layout - when the screen is less than 400px wide, make the navigation links stack on top of each other instead of next to each other */ +@media screen and (max-width: 400px) { + .topnav a { + float: none; + width: 100%; + } +} diff --git a/kontor-api/src/templates/comic/comics.html b/kontor-api/src/templates/comic/comics.html index cd7a1f9..0a4ce63 100644 --- a/kontor-api/src/templates/comic/comics.html +++ b/kontor-api/src/templates/comic/comics.html @@ -4,23 +4,39 @@ Comic List {% endblock %} +{% block header %} +

Comics..

+{% endblock %} + +{% block subnav %} +
+ Artists + Publishers + WorkTypes +
+{% endblock %} + {% block content %} {% with msg=msg %} {% include "components/alerts.html" %} {% endwith %} -
-
-
- - Completed - Order - -
-
-
-

Comics..

-
-
+
+
+ + + + +
+ Add Comic +
+
+
+
+
@@ -36,13 +52,10 @@ - + {% endfor %}
Title{% with check=comic.completed %}{% include "components/check.html" %}{% endwith %} Edit Delete
-
- Add Comic -
{% endblock %} diff --git a/kontor-api/src/templates/components/footer.html b/kontor-api/src/templates/components/footer.html new file mode 100644 index 0000000..e1ea0b7 --- /dev/null +++ b/kontor-api/src/templates/components/footer.html @@ -0,0 +1 @@ +

Footer

\ No newline at end of file diff --git a/kontor-api/src/templates/components/navbar.html b/kontor-api/src/templates/components/navbar.html index 02cc139..7a25805 100644 --- a/kontor-api/src/templates/components/navbar.html +++ b/kontor-api/src/templates/components/navbar.html @@ -1,4 +1,12 @@ -