Mercurial > lbo > hg > analyrics

changeset 32:ebe9dbb5b5ea

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
Use flex layout for graph page
author Lewin Bormann <lbo@spheniscida.de>
date Fri, 15 Jul 2022 11:23:47 -0700
parents c25ab9d90bb2
children a28f7484d2fc
files assets/index.html.hbs
diffstat 1 files changed, 9 insertions(+), 6 deletions(-) [+]
line wrap: on
line diff
--- a/assets/index.html.hbs	Fri Jul 15 08:53:07 2022 -0700
+++ b/assets/index.html.hbs	Fri Jul 15 11:23:47 2022 -0700
@@ -2,6 +2,9 @@
 <html>
     <head>
         <title>Analyrics</title>
+
+        <meta name="viewport" content="width=80vw, initial-scale=1">
+
         <script src="static/chart.min.js" type="application/javascript"></script>
 
         <script type="application/javascript">
@@ -19,11 +22,11 @@
             #error { text-align: center; border-style: solid; border-color: #aa2222; margin-left: 30%; margin-right: 30%; }
 
             .plottitle { text-align: center; }
-            .plotrow { border-style: solid; border-color: blue; text-align: center; }
+            .plotrow { border-style: solid; border-color: blue; text-align: center; display: flex; justify-content: center; }
             .plotframe { border-style: solid; border-color: green; display: inline-block; margin: 5pt; }
 
             .fullwidth { width: 95%; }
-            .halfwidth { width: 47%; }
+            .halfwidth { width: 48%; }
         </style>
 
     </head>
@@ -36,7 +39,7 @@
         <form id="logout" action="/logout" method="POST">
             <input type="submit" value="Log out" />
         </form>
-        <div class="useraction">Logged in as <b>{{username}}</b>.</div>
+        <div class="useraction"><b>{{username}}</b>.</div>
         <div class="userdomain">{{#if domain}}Domain: <b>{{domain}}</b>{{else}}<i>(all domains)</i>{{/if}}</div>
 {{else}}
         <a class="useraction" href="login">Log in</a>
@@ -48,14 +51,14 @@
     <!-- Plots -- only shown when logged in. -->
     {{#if loggedin}}
     <div class="plotrow row1">
+        <div class="plotframe fullwidth">
         <div class="plottitle">Visits and Sessions</div>
-        <div class="plotframe fullwidth">
             <canvas id="visitsAndSessions" height="100"></canvas>
         </div>
     </div>
     <div class="plotrow row2">
-        <div class="plotframe halfwidth"><canvas id="topPaths" height="100"></canvas> </div>
-        <div class="plotframe halfwidth"><canvas id="requestsBySession" height="100"></canvas> </div>
+        <div class="plotframe halfwidth">Top paths<canvas id="topPaths"></canvas> </div>
+        <div class="plotframe halfwidth">Requests per Session<canvas id="requestsBySession"></canvas> </div>
     </div>
 
     <script>