From e29568f627ed9506da000ddbfabe467208583752 Mon Sep 17 00:00:00 2001
From: Oliver Giles <ohw.giles@gmail.com>
Date: Fri, 4 Sep 2020 13:08:34 +1200
Subject: [PATCH] improve layout on large screens

---
 src/laminar.cpp          |  4 ++--
 src/resources/index.html | 14 ++++++--------
 src/resources/style.css  | 15 +++++++++++++++
 3 files changed, 23 insertions(+), 10 deletions(-)

diff --git a/src/laminar.cpp b/src/laminar.cpp
index 5b941bb..c9c90ac 100644
--- a/src/laminar.cpp
+++ b/src/laminar.cpp
@@ -259,7 +259,7 @@ std::string Laminar::getStatus(MonitorScope scope) {
         populateArtifacts(j, scope.job, scope.num);
         j.EndArray();
     } else if(scope.type == MonitorScope::JOB) {
-        const uint runsPerPage = 10;
+        const uint runsPerPage = 20;
         j.startArray("recent");
         // ORDER BY param cannot be bound
         std::string order_by;
@@ -364,7 +364,7 @@ std::string Laminar::getStatus(MonitorScope scope) {
         j.EndObject();
     } else { // Home page
         j.startArray("recent");
-        db->stmt("SELECT * FROM builds ORDER BY completedAt DESC LIMIT 15")
+        db->stmt("SELECT * FROM builds ORDER BY completedAt DESC LIMIT 20")
         .fetch<str,uint,str,time_t,time_t,time_t,int>([&](str name,uint build,str context,time_t,time_t started,time_t completed,int result){
             j.StartObject();
             j.set("name", name)
diff --git a/src/resources/index.html b/src/resources/index.html
index cb5a57f..0072205 100644
--- a/src/resources/index.html
+++ b/src/resources/index.html
@@ -66,14 +66,12 @@
      <div><canvas id="chartUtil"></canvas></div>
     </div>
    </div>
-   <div>
-    <div style="display: grid; grid-template-columns: repeat(auto-fill, minmax(380px, 1fr)); gap: 5px; padding: 5px;">
-     <div><canvas id="chartBpd"></canvas></div>
-     <div><canvas id="chartBpj"></canvas></div>
-     <div><canvas id="chartTpj"></canvas></div>
-     <div><canvas id="chartBuildTimeChanges"></canvas></div>
-     <div><canvas id="chartBuildTimeDist"></canvas></div>
-    </div>
+   <div id="page-home-plots">
+    <div><canvas id="chartBpd"></canvas></div>
+    <div><canvas id="chartBpj"></canvas></div>
+    <div><canvas id="chartTpj"></canvas></div>
+    <div><canvas id="chartBuildTimeChanges"></canvas></div>
+    <div><canvas id="chartBuildTimeDist"></canvas></div>
    </div>
   </section>
  </div></template>
diff --git a/src/resources/style.css b/src/resources/style.css
index 121d724..db17248 100644
--- a/src/resources/style.css
+++ b/src/resources/style.css
@@ -214,6 +214,8 @@ button:not([disabled]) { cursor: pointer; color: var(--main-fg); }
  grid-template-columns: 1fr 1fr 1fr;
  padding: 15px;
  gap: 15px;
+ max-width: 1600px;
+ margin: auto;
  text-align: center;
 }
 @media (max-width: 650px) {
@@ -221,6 +223,19 @@ button:not([disabled]) { cursor: pointer; color: var(--main-fg); }
   grid-template-columns: 1fr;
  }
 }
+#page-home-plots {
+ display: grid;
+ grid-template-columns: 1fr 1fr;
+ padding: 5px;
+ gap: 5px;
+ max-width: 1600px;
+ margin: auto;
+}
+@media (max-width: 1095px) {
+ #page-home-plots {
+  grid-template-columns: 1fr;
+ }
+}
 #page-job-main {
  display: grid;
  grid-template: auto 1fr / minmax(550px, 1fr) 1fr;