Add stylesheet for the user portal

zentralopensource · Sep 13, 2024 · 5e0c695 · 5e0c695
1 parent 7faddef
commit 5e0c695
Show file tree

Hide file tree

Showing 6 changed files with 138 additions and 19 deletions.
diff --git a/server/realms/templates/user_portal/base.html b/server/realms/templates/user_portal/base.html
@@ -7,9 +7,9 @@
   <header class="main-head">
     <h1 class="logo"><a href="{% url 'realms_public:up_index' realm.pk %}">User Portal</a></h1>
     {% if realm_user %}
-    {{ realm_user }}
+    <div class="user-id">{{ realm_user }}</div>
     <form action="{% url 'realms_public:up_logout' realm.pk %}" method="POST" style="display:inline-block">{% csrf_token %}
-      <button type="submit">Logout</button>
+      <button type="submit" class="btn">Logout</button>
     </form>
     {% endif %}
   </header>

diff --git a/server/realms/templates/user_portal/boilerplate.html b/server/realms/templates/user_portal/boilerplate.html
@@ -6,7 +6,7 @@
     <title>{{ title }}</title>
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <link href="{% static 'favicon.png' %}" rel="icon" type="image/png">
-    <link href="{% static 'style.css' %}" rel="stylesheet">
+    <link href="{% static 'dist/user_portal.css' %}" rel="stylesheet">
   </head>
   <body>
   {% block body %}

diff --git a/server/static_src/js/user_portal.js 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
@@ -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
@@ -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
@@ -13,22 +13,21 @@ <h3>App</h3>
   <dd>{{ object.name }}</dd>
   <dt>Version</dt>
   <dd>{{ object.version }}</dd>
-  {% if publisher_info %}
-  <dt>Publisher</dt>
-  <dd>
-    <dl>
-      {% if publisher_info.team_id %}
-      <dt>Team ID</dt>
-      <dd>{{ publisher_info.team_id }}</dd>
-      {% endif %}
-      {% if publisher_info.name %}
-      <dt>Name</dt>
-      <dd>{{ publisher_info.name }}</dd>
-      {% endif %}
-    </dl>
-  </dd>
+</dl>
+
+{% if publisher_info %}
+<h3>Publisher</h3>
+<dl>
+  {% if publisher_info.team_id %}
+  <dt>Team ID</dt>
+  <dd>{{ publisher_info.team_id }}</dd>
+  {% endif %}
+  {% if publisher_info.name %}
+  <dt>Name</dt>
+  <dd>{{ publisher_info.name }}</dd>
   {% endif %}
 </dl>
+{% endif %}
 {% endfor %}
 
 {% if ballot_box %}
@@ -64,10 +63,10 @@ <h3>Vote</h3>
 <h3>{% if vote %}Update your{% else %}Cast a{% endif %} vote for this application</h3>
 <form method="POST">{% csrf_token %}
   {% if ballot_box.is_upvoting_allowed %}
-  <p><button type="submit" name="yes_vote" value="oui">Vote to allowlist this</button></p>
+  <p><button class="btn" type="submit" name="yes_vote" value="oui">👍 Vote to allowlist this</button></p>
   {% endif %}
   {% if ballot_box.is_downvoting_allowed %}
-  <p><button type="submit" name="yes_vote" value="non">Vote to blocklist this</button></p>
+  <p><button class="btn" type="submit" name="yes_vote" value="non">👎 Vote to blocklist this</button></p>
   {% endif %}
 </form>
 {% endif %}