From 05855c1c698e8a4cb32f048c68c0b19a84b94f1e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?P=C4=93teris=20Caune?= <cuu508@gmail.com>
Date: Tue, 5 Nov 2019 09:53:22 +0200
Subject: [PATCH] Make the "Details" screen fit better on mobile screens.

---
 static/css/details.css              | 7 +++++--
 templates/front/details.html        | 8 +++++---
 templates/front/details_events.html | 2 +-
 3 files changed, 11 insertions(+), 6 deletions(-)

diff --git a/static/css/details.css b/static/css/details.css
index 218112bf..1be8001f 100644
--- a/static/css/details.css
+++ b/static/css/details.css
@@ -34,6 +34,10 @@
     display: inline;
 }
 
+#how-to-ping code {
+    overflow-wrap: break-word;
+}
+
 #details-schedule th {
     padding-top: 4px;
 }
@@ -82,7 +86,7 @@
 }
 
 #downtimes table {
-    width: 350px;
+    max-width: 350px;
 }
 
 #downtimes tr:first-child td, #downtimes tr:first-child th {
@@ -104,7 +108,6 @@
     padding: 32px;
 }
 
-
 ul.checkmarks {
     padding-left: 20px;
     list-style: none;
diff --git a/templates/front/details.html b/templates/front/details.html
index 17c26238..d9986c0a 100644
--- a/templates/front/details.html
+++ b/templates/front/details.html
@@ -64,7 +64,7 @@
             {% endif %}
         </div>
 
-        <div class="details-block">
+        <div id="how-to-ping" class="details-block">
             <h2>How To Ping</h2>
             <div>
                 <p>Keep this check up by making HTTP requests to this URL:</p>
@@ -220,7 +220,9 @@
                     data-toggle="modal"
                     data-target="#transfer-modal"
                     data-url="{% url 'hc-transfer' check.code %}"
-                    class="btn btn-sm btn-default">Transfer to Another Project&hellip;</button>
+                    class="btn btn-sm btn-default">
+                    Transfer<span class="hidden-sm hidden-xs"> to Another Project</span>&hellip;
+                </button>
                 &nbsp;
                 <button
                     id="details-remove-check"
@@ -235,7 +237,7 @@
     <div id="events" class="col-sm-7">
         <h2>
             Log
-            <small>Click on individual items for details</small>
+            <small class="hidden-xs">Click on individual items for details</small>
             <div id="format-switcher" class="btn-group pull-right" data-toggle="buttons">
                 <label class="btn btn-default btn-xs" data-format="UTC">
                     <input type="radio" name="date-format">
diff --git a/templates/front/details_events.html b/templates/front/details_events.html
index 9c3fca91..cb425d0f 100644
--- a/templates/front/details_events.html
+++ b/templates/front/details_events.html
@@ -92,7 +92,7 @@
     </p>
 {% else %}
     <div class="alert no-events">
-        You will see a live-updating log of received pings here. <br />
+        You will see a <span class="hidden-xs">live-updating</span> log of received pings here. <br />
         This check has not received any pings yet.
     </div>
 {% endif %}