From 5e0c6957ca4a6e4d0440fa54836ef5fa5d503285 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C3=89ric=20Falconnier?= Date: Fri, 13 Sep 2024 17:11:31 +0200 Subject: [PATCH] Add stylesheet for the user portal --- server/realms/templates/user_portal/base.html | 4 +- .../templates/user_portal/boilerplate.html | 2 +- server/static_src/js/user_portal.js | 2 + server/static_src/scss/user_portal.scss | 117 ++++++++++++++++++ webpack.config.js | 1 + .../user_portal/santa_target_detail.html | 31 +++-- 6 files changed, 138 insertions(+), 19 deletions(-) create mode 100644 server/static_src/js/user_portal.js create mode 100644 server/static_src/scss/user_portal.scss diff --git a/server/realms/templates/user_portal/base.html b/server/realms/templates/user_portal/base.html index 2f0d63ea43..2cb8120aa1 100644 --- a/server/realms/templates/user_portal/base.html +++ b/server/realms/templates/user_portal/base.html @@ -7,9 +7,9 @@

User Portal

{% if realm_user %} - {{ realm_user }} +
{{ realm_user }}
{% csrf_token %} - +
{% endif %}
diff --git a/server/realms/templates/user_portal/boilerplate.html b/server/realms/templates/user_portal/boilerplate.html index 1927218640..f968d96905 100644 --- a/server/realms/templates/user_portal/boilerplate.html +++ b/server/realms/templates/user_portal/boilerplate.html @@ -6,7 +6,7 @@ {{ title }} - + {% block body %} diff --git a/server/static_src/js/user_portal.js b/server/static_src/js/user_portal.js new file mode 100644 index 0000000000..3768dd80a1 --- /dev/null +++ b/server/static_src/js/user_portal.js @@ -0,0 +1,2 @@ +// Import our custom CSS +import '../scss/user_portal.scss' diff --git a/server/static_src/scss/user_portal.scss b/server/static_src/scss/user_portal.scss new file mode 100644 index 0000000000..4ebc4f2b5b --- /dev/null +++ b/server/static_src/scss/user_portal.scss @@ -0,0 +1,117 @@ +:root { + --main-color: #040203; + --background-color: #fafafa; + --default-weight: 400; + --bold-weight: 700; + --btn-border: 2px; + --btn-border-radius: 4px; +} + +body { + background-color: var(--background-color); + color: var(--main-color); + font-family: Arial, Helvetica, sans-serif; + font-size: 1rem; + font-weight: var(--default-weight); + margin: 0; +} + +a, a:visited { + color: var(--main-color); +} + +dt { + margin: 0 0 .5rem 0; + font-weight: var(--bold-weight); +} + +dd { + margin: 0 0 .5rem 0; +} + +/* Grid */ + +.main-head { + grid-area: header; + display: flex; + align-items: center; + border-bottom: 1px solid var(--main-color); + padding: 0 1.5rem; + margin: 0 0 1.5rem 0; +} + +.main-nav { + grid-area: nav; + padding: 0 1.5rem; +} + +.content { + grid-area: content; + padding: 0 1.5rem; +} + +.main-footer { + grid-area: footer; + padding: 0 1.5rem; +} + +.container { + display: grid; + grid-template-areas: + "header" + "nav" + "content" + "footer"; +} + +@media (min-width: 768px) { + .container { + grid-template-columns: 220px auto; + grid-template-areas: + "header header" + "nav content" + "footer footer"; + } +} + +/* logo */ +.logo { + flex-grow: 2; + font-size: 1.5rem; +} + +.logo a { + text-decoration: none; +} + +/* logout */ +.user-id { + margin: 0 .375rem; +} + +/* buttons */ +.btn { + display: inline-block; + padding: .375rem .75rem; + background-color: var(--background-color); + border: var(--btn-border) solid var(--main-color); + border-radius: var(--btn-border-radius); + cursor: pointer; + font-size: 1rem; + text-decoration: none; +} + +.btn:hover { + background-color: var(--main-color); + color: var(--background-color); +} + +.btn.btn-primary { + background-color: var(--main-color); + color: var(--background-color); +} + +.btn.btn-primary:hover { + background-color: var(--background-color); + color: var(--main-color); +} diff --git a/webpack.config.js b/webpack.config.js index a2bf57df08..27a5ad6b65 100644 --- a/webpack.config.js +++ b/webpack.config.js @@ -9,6 +9,7 @@ module.exports = { entry: { main: './server/static_src/js/main.js', theme: './server/static_src/js/theme.js', + user_portal: './server/static_src/js/user_portal.js', }, output: { filename: '[name].js', diff --git a/zentral/contrib/santa/templates/user_portal/santa_target_detail.html b/zentral/contrib/santa/templates/user_portal/santa_target_detail.html index a0b386021f..b97b10b7a3 100644 --- a/zentral/contrib/santa/templates/user_portal/santa_target_detail.html +++ b/zentral/contrib/santa/templates/user_portal/santa_target_detail.html @@ -13,22 +13,21 @@

App

{{ object.name }}
Version
{{ object.version }}
- {% if publisher_info %} -
Publisher
-
-
- {% if publisher_info.team_id %} -
Team ID
-
{{ publisher_info.team_id }}
- {% endif %} - {% if publisher_info.name %} -
Name
-
{{ publisher_info.name }}
- {% endif %} -
-
+ + +{% if publisher_info %} +

Publisher

+
+ {% if publisher_info.team_id %} +
Team ID
+
{{ publisher_info.team_id }}
+ {% endif %} + {% if publisher_info.name %} +
Name
+
{{ publisher_info.name }}
{% endif %}
+{% endif %} {% endfor %} {% if ballot_box %} @@ -64,10 +63,10 @@

Vote

{% if vote %}Update your{% else %}Cast a{% endif %} vote for this application

{% csrf_token %} {% if ballot_box.is_upvoting_allowed %} -

+

{% endif %} {% if ballot_box.is_downvoting_allowed %} -

+

{% endif %}
{% endif %}