CSS tweaks for long check names, and for mobile view of cron form.

static/css/my_checks.css

@@ -1,5 +1,7 @@
-#update-timeout-modal .modal-dialog {
+@media (min-width: 992px) {
-    width: 800px;
+    #update-timeout-modal .modal-dialog {
+        width: 800px;
+    }
 }
 
 #update-timeout-form .modal-body {

static/css/my_checks_desktop.css

@@ -6,6 +6,9 @@
     background-color: #f5f5f5;
 }
 
+.my-checks-name {
+    max-width: 250px;
+}
 
 .my-checks-name.unnamed {
     color: #999;
@@ -49,6 +52,14 @@ table.table tr > th.th-name {
     display: block;
 }
 
+.timeout-grace .cron-expression {
+    display: inline-block;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    overflow: hidden;
+    max-width: 120px;
+}
+
 #checks-table tr:hover .timeout-grace {
     border: 1px dotted #AAA;
 }

templates/front/cron_preview.html

@@ -11,7 +11,7 @@
     <tr>
         <td>{{ naive|date:"M j, H:i" }}</td>
         <td>{{ aware|naturaltime }}</td>
-        <td>{{ aware|date:"c" }}</td>
+        <td class="hidden-xs">{{ aware|date:"c" }}</td>
     </tr>
     {% endfor %}
 </table>

templates/front/my_checks.html

@@ -178,7 +178,7 @@
                 <input type="hidden" name="kind" value="cron" />
                 <div class="modal-body">
                     <div class="row">
-                        <div class="col-sm-4">
+                        <div class="col-md-4">
                             <div class="form-group">
                                 <label for="schedule">Cron Expression</label>
                                 <input
@@ -189,7 +189,7 @@
                                     placeholder="* * * * *">
                             </div>
                         </div>
-                        <div class="col-sm-4">
+                        <div class="col-md-4">
                             <div class="form-group">
                                 <label for="tz">Server's Timezone</label>
                                 <br />
@@ -200,7 +200,7 @@
                                 </select>
                             </div>
                         </div>
-                        <div class="col-sm-4">
+                        <div class="col-md-4">
                             <div class="form-group">
                                 <label for="cron-grace">Grace Time</label>
                                 <div class="input-group">

templates/front/my_checks_desktop.html

@@ -61,7 +61,7 @@
                 {% if check.kind == "simple" %}
                     {{ check.timeout|hc_duration }}
                 {% elif check.kind == "cron" %}
-                    {{ check.schedule }}
+                    <span class="cron-expression">{{ check.schedule }}</span>
                 {% endif %}
                 <br />
                 <span class="checks-subline">

templates/front/my_checks_mobile.html

@@ -92,7 +92,13 @@
                 data-grace="{{ check.grace.total_seconds }}"
                 data-schedule="{{ check.schedule }}"
                 data-tz="{{ check.tz }}"
-                class="btn btn-default timeout-grace">Change Period</a>
+                class="btn btn-default timeout-grace">
+                {% if check.kind == "simple" %}
+                Change Period
+                {% elif check.kind == "cron" %}
+                Change Schedule
+                {% endif %}
+            </a>
 
             <a href="{% url 'hc-log' check.code %}" class="btn btn-default">Log</a>
         </div>