Update buienradar style, and add logo

WISVCH · Jan 3, 2024 · 202de18 · 202de18
1 parent 77e61b7
commit 202de18
Show file tree

Hide file tree

Showing 4 changed files with 92 additions and 5 deletions.
diff --git a/narrowcast_content/buienradar_graph/static/buienradar_logo.svg b/narrowcast_content/buienradar_graph/static/buienradar_logo.svg
diff --git a/narrowcast_content/buienradar_graph/static/css/style.css b/narrowcast_content/buienradar_graph/static/css/style.css
@@ -3,11 +3,27 @@ html {
 }
 
 body {
-    margin: 5px 50px 10px 20px;
-    padding: 60px;
     background-color: #ffffff;
 }
 
+.logo {
+    margin-bottom: -30px;
+    float: right;
+}
+
+.logo img {
+    width: 150px;
+}
+
+.container {
+    margin: 0;
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    width: 80%;
+}
+
 .source {
     font-weight: normal;
     font-size: 8pt;

diff --git a/narrowcast_content/buienradar_graph/static/js/index.js b/narrowcast_content/buienradar_graph/static/js/index.js
@@ -137,7 +137,7 @@ async function createChart() {
                         font: {
                             family: "'RTLGraphikTT-Semibold',Arial,Helvetica,sans-serif",
                             weight: "normal",
-                            size: 8,
+                            size: 12,
                         },
                         padding: 10,
                     }
@@ -158,6 +158,7 @@ async function createChart() {
                         font: {
                             family: "'RTLGraphikTT-Semibold',Arial,Helvetica,sans-serif",
                             weight: "bold",
+                            size: 16,
                         },
                         // autoSkip: true,
                         // maxTicksLimit: 10,
@@ -201,6 +202,7 @@ async function createChart() {
                                 font: {
                                     family: "'RTLGraphikTT-Semibold',Arial,Helvetica,sans-serif",
                                     weight: "bold",
+                                    size: 16
                                 },
                                 position: 'end',
                                 yAdjust: '',
@@ -222,6 +224,7 @@ async function createChart() {
                                 font: {
                                     family: "'RTLGraphikTT-Semibold',Arial,Helvetica,sans-serif",
                                     weight: "normal",
+                                    size: 16,
                                 },
                                 position: 'end',
                                 yAdjust: '',

diff --git a/narrowcast_content/buienradar_graph/templates/buienradar_graph/index.jinja2 b/narrowcast_content/buienradar_graph/templates/buienradar_graph/index.jinja2
@@ -8,9 +8,12 @@
     <link rel="stylesheet" href="{{ url_for('buienradar_graph.static', filename='css/style.css') }}">
 </head>
 <body>
-<div>
+<div class="container">
+    <div class="logo">
+        <img src="{{ url_for('buienradar_graph.static', filename='buienradar_logo.svg') }}">
+    </div>
     <canvas id="rainfallChart"></canvas>
-    <div class="source">Source: Buienradar<sup>®</sup></div>
+{#    <div class="source">Source: Buienradar<sup>®</sup></div>#}
 </div>
 
 <script type="text/javascript">