feat(settings): improve usage on small devices

web/static/css/main.css

@@ -74,20 +74,24 @@
   @apply relative overflow-x-auto shadow-md sm:rounded-lg text-gray-500 bg-white;
 }
 .settings section h2 {
-  @apply flex flex-col mb-5 text-lg font-semibold text-gray-900;
+  @apply flex flex-col text-lg font-semibold text-gray-900;
 }
 .settings section h2 span {
   @apply text-sm font-medium text-gray-500;
 }
 .settings section form {
-  @apply grid gap-4 md:grid-cols-[2fr_1fr];
+  @apply grid gap-4 grid-cols-1 sm:grid-cols-[2fr_1fr];
 }
 .settings section form input {
   @apply h-min bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5;
 }
 .settings section form label {
-  @apply col-span-2 block text-sm font-medium text-gray-900;
+  @apply sm:col-span-2 block text-sm font-medium text-gray-900;
 }
 .settings section form p {
   @apply text-sm font-normal text-gray-500;
 }
+.settings section form button[type="submit"] {
+  @apply text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center;
+  @apply sm:col-span-2;
+}

web/static/css/tailwind.css

@@ -603,6 +603,11 @@ video {
   margin-right: 0.25rem;
 }
 
+.mx-8 {
+  margin-left: 2rem;
+  margin-right: 2rem;
+}
+
 .mx-auto {
   margin-left: auto;
   margin-right: auto;
@@ -652,6 +657,10 @@ video {
   display: block;
 }
 
+.inline-block {
+  display: inline-block;
+}
+
 .flex {
   display: flex;
 }
@@ -744,10 +753,6 @@ video {
   grid-template-columns: repeat(1, minmax(0, 1fr));
 }
 
-.grid-cols-2 {
-  grid-template-columns: repeat(2, minmax(0, 1fr));
-}
-
 .grid-cols-\[auto_min-content\] {
   grid-template-columns: auto min-content;
 }
@@ -798,6 +803,10 @@ video {
   justify-self: end;
 }
 
+.justify-self-center {
+  justify-self: center;
+}
+
 .overflow-hidden {
   overflow: hidden;
 }
@@ -939,16 +948,6 @@ video {
   padding-bottom: 0.25rem;
 }
 
-.py-2 {
-  padding-top: 0.5rem;
-  padding-bottom: 0.5rem;
-}
-
-.py-2\.5 {
-  padding-top: 0.625rem;
-  padding-bottom: 0.625rem;
-}
-
 .py-3 {
   padding-top: 0.75rem;
   padding-bottom: 0.75rem;
@@ -964,6 +963,10 @@ video {
   padding-bottom: 2rem;
 }
 
+.pt-8 {
+  padding-top: 2rem;
+}
+
 .text-left {
   text-align: left;
 }
@@ -1030,6 +1033,10 @@ video {
   line-height: 1.25rem;
 }
 
+.leading-6 {
+  line-height: 1.5rem;
+}
+
 .leading-none {
   line-height: 1;
 }
@@ -1042,6 +1049,11 @@ video {
   letter-spacing: 0.05em;
 }
 
+.text-black {
+  --tw-text-opacity: 1;
+  color: rgb(0 0 0 / var(--tw-text-opacity));
+}
+
 .text-blue-600 {
   --tw-text-opacity: 1;
   color: rgb(37 99 235 / var(--tw-text-opacity));
@@ -1072,6 +1084,11 @@ video {
   color: rgb(55 65 81 / var(--tw-text-opacity));
 }
 
+.text-gray-800 {
+  --tw-text-opacity: 1;
+  color: rgb(31 41 55 / var(--tw-text-opacity));
+}
+
 .text-gray-900 {
   --tw-text-opacity: 1;
   color: rgb(17 24 39 / var(--tw-text-opacity));
@@ -1106,6 +1123,12 @@ video {
   text-decoration-line: underline;
 }
 
+.shadow {
+  --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
+  --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);
+  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+}
+
 .shadow-sm {
   --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
   --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
@@ -1335,7 +1358,6 @@ video {
 }
 
 .settings section h2 {
-  margin-bottom: 1.25rem;
   display: flex;
   flex-direction: column;
   font-size: 1.125rem;
@@ -1355,10 +1377,11 @@ video {
 
 .settings section form {
   display: grid;
+  grid-template-columns: repeat(1, minmax(0, 1fr));
   gap: 1rem;
 }
 
-@media (min-width: 768px) {
+@media (min-width: 640px) {
   .settings section form {
     grid-template-columns: 2fr 1fr;
   }
@@ -1390,7 +1413,6 @@ video {
 }
 
 .settings section form label {
-  grid-column: span 2 / span 2;
   display: block;
   font-size: 0.875rem;
   line-height: 1.25rem;
@@ -1399,6 +1421,12 @@ video {
   color: rgb(17 24 39 / var(--tw-text-opacity));
 }
 
+@media (min-width: 640px) {
+  .settings section form label {
+    grid-column: span 2 / span 2;
+  }
+}
+
 .settings section form p {
   font-size: 0.875rem;
   line-height: 1.25rem;
@@ -1407,6 +1435,43 @@ video {
   color: rgb(107 114 128 / var(--tw-text-opacity));
 }
 
+.settings section form button[type="submit"] {
+  border-radius: 0.5rem;
+  --tw-bg-opacity: 1;
+  background-color: rgb(29 78 216 / var(--tw-bg-opacity));
+  padding-left: 1.25rem;
+  padding-right: 1.25rem;
+  padding-top: 0.625rem;
+  padding-bottom: 0.625rem;
+  text-align: center;
+  font-size: 0.875rem;
+  line-height: 1.25rem;
+  font-weight: 500;
+  --tw-text-opacity: 1;
+  color: rgb(255 255 255 / var(--tw-text-opacity));
+}
+
+.settings section form button[type="submit"]:hover {
+  --tw-bg-opacity: 1;
+  background-color: rgb(30 64 175 / var(--tw-bg-opacity));
+}
+
+.settings section form button[type="submit"]:focus {
+  outline: 2px solid transparent;
+  outline-offset: 2px;
+  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
+  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(4px + var(--tw-ring-offset-width)) var(--tw-ring-color);
+  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
+  --tw-ring-opacity: 1;
+  --tw-ring-color: rgb(147 197 253 / var(--tw-ring-opacity));
+}
+
+@media (min-width: 640px) {
+  .settings section form button[type="submit"] {
+    grid-column: span 2 / span 2;
+  }
+}
+
 .odd\:bg-white:nth-child(odd) {
   --tw-bg-opacity: 1;
   background-color: rgb(255 255 255 / var(--tw-bg-opacity));
@@ -1463,10 +1528,22 @@ video {
 }
 
 @media (min-width: 640px) {
+  .sm\:ml-2 {
+    margin-left: 0.5rem;
+  }
+
+  .sm\:mt-0 {
+    margin-top: 0px;
+  }
+
   .sm\:w-auto {
     width: auto;
   }
 
+  .sm\:grid-cols-2 {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+
   .sm\:flex-row {
     flex-direction: row;
   }
@@ -1481,13 +1558,30 @@ video {
     margin-bottom: calc(0px * var(--tw-space-y-reverse));
   }
 
+  .sm\:justify-self-end {
+    justify-self: end;
+  }
+
   .sm\:px-8 {
     padding-left: 2rem;
     padding-right: 2rem;
   }
+
+  .sm\:text-left {
+    text-align: left;
+  }
 }
 
 @media (min-width: 768px) {
+  .md\:grid-cols-4 {
+    grid-template-columns: repeat(4, minmax(0, 1fr));
+  }
+
+  .md\:px-40 {
+    padding-left: 10rem;
+    padding-right: 10rem;
+  }
+
   .md\:text-3xl {
     font-size: 1.875rem;
     line-height: 2.25rem;
@@ -1495,10 +1589,23 @@ video {
 }
 
 @media (min-width: 1024px) {
+  .lg\:mx-0 {
+    margin-left: 0px;
+    margin-right: 0px;
+  }
+
+  .lg\:mt-20 {
+    margin-top: 5rem;
+  }
+
   .lg\:grid-cols-\[min-content_minmax\(0\2c 1fr\)\] {
     grid-template-columns: min-content minmax(0,1fr);
   }
 
+  .lg\:justify-start {
+    justify-content: flex-start;
+  }
+
   .lg\:px-40 {
     padding-left: 10rem;
     padding-right: 10rem;
@@ -1509,6 +1616,10 @@ video {
     padding-bottom: 4rem;
   }
 
+  .lg\:pt-16 {
+    padding-top: 4rem;
+  }
+
   .lg\:text-4xl {
     font-size: 2.25rem;
     line-height: 2.5rem;

web/templates/components/settings.tmpl

@@ -6,7 +6,7 @@
   {{ $path = .SettingsSidebarActive.Path }}
 {{ end }}
 
-<div class="container max-w-screen-lg mt-20 grid grid-cols-1 lg:grid-cols-[min-content_minmax(0,1fr)] gap-8">
+<div class="container max-w-screen-lg mt-8 lg:mt-20 grid grid-cols-1 lg:grid-cols-[min-content_minmax(0,1fr)] gap-8">
   <ul class="sidebar">
     {{range .SettingsSidebar}}
     <li>
@@ -21,7 +21,7 @@
     {{end}}
   </ul>
   <div class="settings">
-    <nav aria-label="Breadcrumb">
+    <nav aria-label="Breadcrumb" class="mx-8 lg:mx-0 grid justify-center lg:justify-start">
       <ol class="inline-flex items-center">
         {{ range .SettingsBreadcrumbs }}
         <li class="inline-flex items-center">

web/templates/pages/index.tmpl

@@ -66,15 +66,15 @@
   </div>
   {{ end }}
   <div class="healthchecks">
-    <div class="grid grid-cols-2 gap-2">
+    <div class="grid grid-cols-1 sm:grid-cols-2 gap-2">
-      <p class="text-l font-normal text-gray-500">Healthchecks</p>
+      <p class="text-l font-normal text-gray-800 text-center sm:text-left">Healthchecks</p>
-      <div class="inline-flex rounded-md shadow-sm justify-self-end time-range" role="group">
+      <div class="inline-flex rounded-md shadow-sm justify-self-center sm:justify-self-end time-range" role="group">
         <a href="/?time-range=90days" class="{{ if eq .TimeRange "90days" }}active{{end}}" type="button">90 Days</a>
         <a href="/?time-range=48hours" class="{{ if eq .TimeRange "48hours" }}active{{end}}" type="button">48 Hours</a>
       </div>
     </div>
     {{ range .HealthChecks }}
-    <div class="grid grid-cols-2 gap-2">
+    <div class="grid grid-cols-1 sm:grid-cols-2 gap-2">
       <div class="flex items-center">
         {{ if eq .Status "SUCCESS" }}
         <span class="flex w-3 h-3 me-2 bg-green-400 rounded-full"></span>

web/templates/pages/settings_healthchecks_create.tmpl

@@ -17,7 +17,7 @@
     Script is what determines the status of a service.
     You can read more about it on <a target="_blank" href="https://k6.io/docs/using-k6/http-requests/" class="text-blue-700">k6 documentation</a>.
     </p>
-    <button type="submit" onclick="save()" class="col-span-2 text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm w-full sm:w-auto px-5 py-2.5 text-center">Create</button>
+    <button type="submit" onclick="save()">Create</button>
   </form>
 </section>
 

web/templates/pages/settings_healthchecks_describe.tmpl

@@ -4,7 +4,6 @@
     <h2>
       Configuration
     </h2>
-    <button type="submit" onclick="save()" class="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm w-full sm:w-auto px-5 py-2.5 text-center inline-flex justify-self-end">Save</button>
     <label for="workergroups">Worker Groups</label>
     <input type="text" name="workergroups" id="workergroups" value="{{ StringsJoin .Healthcheck.WorkerGroups " " }}"/>
     <p> Worker groups are used to distribute the healthcheck to specific workers.</p>
@@ -18,6 +17,7 @@
     Script is what determines the status of a service.
     You can read more about it on <a target="_blank" href="https://k6.io/docs/using-k6/http-requests/" class="text-blue-700">k6 documentation</a>.
     </p>
+    <button type="submit" onclick="save()">Save</button>
   </form>
 </section>
 

web/templates/pages/settings_overview.tmpl

@@ -1,10 +1,37 @@
 {{define "settings"}}
-<div class="py-8 px-4 mx-auto max-w-screen-xl text-center lg:py-16">
+<div class="pt-8 mx-auto max-w-screen-xl text-center lg:pt-16">
     <h1 class="mb-4 text-2xl font-extrabold tracking-tight leading-none text-gray-900 md:text-3xl lg:text-4xl">
     Hi there, {{.User.Email}}.
     </h1>
-    <p class="mb-8 text-l font-normal text-gray-500 lg:text-l sm:px-8 lg:px-40">
+    <p class="mb-8 text-l font-normal text-gray-500 lg:text-l sm:px-8 md:px-40">
     Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
     </p>
 </div>
+
+<div class="mx-auto max-w-screen-xl text-center grid grid-cols-1 sm:grid-cols-2 md:grid-cols-4 gap-4">
+  <div class="inline-block bg-white rounded-lg shadow p-5 w-full">
+    <div class="text-center sm:mt-0 sm:ml-2 sm:text-left">
+      <h3 class="text-sm leading-6 font-medium text-gray-400">Total Workers</h3>
+      <p class="text-3xl font-bold text-black">42</p>
+    </div>
+  </div>
+  <div class="inline-block bg-white rounded-lg shadow p-5 w-full">
+    <div class="text-center sm:mt-0 sm:ml-2 sm:text-left">
+      <h3 class="text-sm leading-6 font-medium text-gray-400">Total Healthchecks</h3>
+      <p class="text-3xl font-bold text-black">42</p>
+    </div>
+  </div>
+  <div class="inline-block bg-white rounded-lg shadow p-5 w-full">
+    <div class="text-center sm:mt-0 sm:ml-2 sm:text-left">
+      <h3 class="text-sm leading-6 font-medium text-gray-400">Total Cronjobs</h3>
+      <p class="text-3xl font-bold text-black">42</p>
+    </div>
+  </div>
+  <div class="inline-block bg-white rounded-lg shadow p-5 w-full">
+    <div class="text-center sm:mt-0 sm:ml-2 sm:text-left">
+      <h3 class="text-sm leading-6 font-medium text-gray-400">Total Notifications</h3>
+      <p class="text-3xl font-bold text-black">42</p>
+    </div>
+  </div>
+</div>
 {{end}}

web/templates/pages/settings_workers_create.tmpl

@@ -11,7 +11,7 @@
       For example, you can have a group for different regions,
       different datacenters or different environments.
     </p>
-    <button type="submit" class="col-span-2 text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm w-full sm:w-auto px-5 py-2.5 text-center">Create</button>
+    <button type="submit">Create</button>
   </form>
 </section>
 {{end}}

web/templates/pages/settings_workers_describe.tmpl

@@ -4,7 +4,6 @@
     <h2>
       Configuration
     </h2>
-    <button type="submit" onclick="save()" class="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm w-full sm:w-auto px-5 py-2.5 text-center inline-flex justify-self-end">Save</button>
     <label for="group">Group</label>
     <input type="text" name="group" id="group" value="{{ .Worker.Group }}"/>
     <p>
@@ -12,6 +11,7 @@
       For example, you can have a group for different regions,
       different datacenters or different environments.
     </p>
+    <button type="submit" onclick="save()">Save</button>
   </form>
 </section>
 <section class="p-5">