improve layout on large screens

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)

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>

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;