fix: Mobile view fixes

Various fixes to make sure that views are working on mobile. Fixes #22
deliverybot · Oct 12, 2019 · 75f850c · 75f850c
1 parent a502e35
commit 75f850c
Show file tree

Hide file tree

Showing 8 changed files with 38 additions and 34 deletions.
diff --git a/static/main.css b/static/main.css
@@ -23,19 +23,24 @@ pre {
   word-wrap: normal;
   white-space: pre;
 }
+main {
+  min-height: 80vh;
+}
 
-html,
-body {
-  height: 100%;
-  margin: 0
+@media (max-width: 544px) {
+  .d-none-sm {
+    display: none;
+  }
 }
-main {
-  display: flex;
-  flex-flow: column;
-  height: 100%;
+@media (max-width: 768px) {
+  .d-none-md {
+    display: none;
+  }
 }
-.fill {
-  flex: 1 1 auto;
+@media (max-width: 1012px) {
+  .d-none-lg {
+    display: none;
+  }
 }
 
 .loader:after {

diff --git a/views/commit.hbs b/views/commit.hbs
@@ -9,10 +9,10 @@
 </nav>
 </header>
 
-<div class="bg-white fill">
-  <div class="content pb-10">
+<main class="bg-white fill pt-3 pb-8">
+  <div class="content">
 
-    <div class="position-relative mt-3">
+    <div class="position-relative">
       <div id="targets" class="Popover position-absolute d-none" style="top: 130%; left: 0;">
         <div class="Popover-message Popover-message--top-left mx-auto mb-2 text-left Box Box-condensed box-shadow-large">
           {{#each targets}}
@@ -46,15 +46,16 @@
           <strong><code>{{oidShort}}</code></strong> - <a href="https://github.com/{{author}}">@{{author}}</a>
         </div>
       </div>
-      <div class="Box-body">
-        <pre><code>{{message}}</code></pre>
-      </div>
+
       {{#if error}}
       <div class="p-4">
         <h2>Deployment failed</h2>
         <p id="error" class="text-red">{{error}}</p>
       </div>
       {{else}}
+      <div class="Box-body">
+        <pre><code>{{message}}</code></pre>
+      </div>
       <div id="deploy_status_body" style="transition: 0.5s;">
         {{#if minimal}}
           <h1 class="p-4 loader text-center"></h1>
@@ -69,6 +70,6 @@
       {{/if}}
     </div>
   </div>
-</div>
+</main>
 
 {{> footer}}
diff --git a/views/commits.hbs b/views/commits.hbs
@@ -9,10 +9,10 @@
 </nav>
 </header>
 
-<div class="bg-white fill">
-  <div class="content pb-10">
+<main class="bg-white fill pt-3 pb-8">
+  <div class="content fill">
 
-    <div class="d-flex mt-3">
+    <div class="d-flex">
       <div class="position-relative mr-2">
         <div id="targets" class="Popover position-absolute d-none" style="top: 130%; left: 0;">
           <div class="Popover-message Popover-message--top-left mx-auto mb-2 text-left Box Box-condensed box-shadow-large">
@@ -58,6 +58,6 @@
       {{> commit_rows}}
     </div>
   </div>
-</div>
+</main>
 
 {{> footer}}
diff --git a/views/home.hbs b/views/home.hbs
@@ -1,7 +1,7 @@
 {{> header}}
 </header>
 
-<div class="content">
+<main class="content pb-8">
   <div class="box-shadow rounded-2 border p-6 bg-white">
     <div class="text-center">
       <h1 class="f1-light">Welcome to Deliverybot</h1>
@@ -19,7 +19,7 @@
       {{#each repos}}
       <div class="Box-row d-flex flex-justify-between">
         <a href="/{{owner.login}}/{{name}}"><strong>{{owner.login}} / {{name}}</strong></a>
-        <a target="_blank" href="{{../htmlUrl}}">Manage installation</a>
+        <a target="_blank" href="{{../htmlUrl}}">Edit</a>
       </div>
       {{/each}}
       {{else}}
@@ -34,14 +34,15 @@
       {{/each}}
       {{#if hasInstalls}}
       <div class="text-center mt-5">
-        <p>
+        <p class="lead">
           Above are all the installed repositories that you can manage. You can
-          <a href="https://github.com/apps/{{ pkg.name }}/installations/new">install</a>
-          Deliverybot on a new repository or click on a repository to start deploying.
+          <a href="https://github.com/apps/{{ pkg.name }}/installations/new">install Deliverybot</a>
+           on a new repository or click on a repository to start deploying.
         </p>
       </div>
       {{/if}}
     </div>
   </div>
-</div>
+</main>
+
 {{> footer}}
diff --git a/views/partials/commit-rows.hbs b/views/partials/commit-rows.hbs
@@ -12,7 +12,7 @@
       <strong><code>{{oidShort}}</code></strong> - <a href="https://github.com/{{author}}">@{{author}}</a>
     </div>
   </div>
-  <div class="text-gray-light mr-3 {{#if @root.minimal}}loader{{/if}}">
+  <div class="d-none-sm text-gray-light mr-3 {{#if @root.minimal}}loader{{/if}}">
     {{#if deployment.lastDeployedAtWords}}
       Last deployed {{deployment.lastDeployedAtWords}}
     {{/if}}

diff --git a/views/partials/deploy-status-body.hbs b/views/partials/deploy-status-body.hbs
@@ -1,4 +1,4 @@
-<div class="Box-header bg-white">
+<div class="Box-row">
   <h4 class="mb-2 mt-2 text-{{deployment.status.color}}">
     {{#if deployment.status.success}}The last deployment has succeeded{{/if}}
     {{#if deployment.status.pending}}Waiting for an in-progress deployment{{/if}}

diff --git a/views/partials/footer.hbs b/views/partials/footer.hbs
@@ -1,7 +1,5 @@
-</main>
-
-<footer class="mt-8 bg-gray-dark">
-  <div class="d-flex flex-justify-center text-mono text-gray-light" style="font-size: 0.9em;">
+<footer class="bg-gray-dark">
+  <div class="d-flex flex-justify-center text-mono text-gray-light flex-wrap" style="font-size: 0.9em;">
     <div class="p-6">
       <ul class="list-style-none">
         <li><a class="text-gray-light" href="/login">Login</a></li>

diff --git a/views/partials/header.hbs b/views/partials/header.hbs
@@ -19,7 +19,6 @@
 </head>
 
 <body class="height-full bg-gray-light">
-<main>
 <header>
 <nav class="box-shadow navbar d-flex flex-justify-between">
   <div>
-Original file line number
+Diff line change
@@ Expand Up / @@ -19,7 +19,6 @@ @@
     </head>
     <body class="height-full bg-gray-light">
-    <main>
     <header>
     <nav class="box-shadow navbar d-flex flex-justify-between">
       <div>
@@ Expand Down @@