nielsperetzke
/
healthchecks
1
0
Fork 0
Code Issues 0 Pull Requests 0 Projects 0 Releases 32 Wiki Activity
Browse Source

Responsive CSS

pull/7/head
Pēteris Caune 9 years ago
parent
9e2edeeceb
commit
1b0413aa49
9 changed files with 274 additions and 127 deletions
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. +45
    -0
      static/css/checks-list.css
  2. +3
    -3
      static/css/style.css
  3. +2
    -1
      static/js/checks.js
  4. +46
    -25
      templates/base.html
  5. +2
    -0
      templates/front/log.html
  6. +3
    -89
      templates/front/my_checks.html
  7. +90
    -0
      templates/front/my_checks_desktop.html
  8. +79
    -0
      templates/front/my_checks_mobile.html
  9. +4
    -9
      templates/front/welcome.html

+ 45
- 0
static/css/checks-list.css View File

@ -0,0 +1,45 @@
#checks-list {
list-style: none;
padding: 0;
margin-top: 48px;
}
#checks-list li {
margin-bottom: 48px;
position: relative;
}
#checks-list h2 {
font-size: 18px;
font-weight: 400;
}
#checks-list h2 .glyphicon {
position: relative;
top: 11px;
margin: 0 10px;
}
#checks-list h2 code {
display: block;
font-size: 12px;
margin-top: 4px;
padding: 0;
}
#checks-list .remove-link {
color: #AAA;
position: absolute;
top: 0;
right: 0;
}
#checks-list .unnamed {
color: #999;
font-style: italic;
}
#checks-list th {
width: 100px;
}

+ 3
- 3
static/css/style.css View File

@ -131,7 +131,7 @@ table.table tr > th.th-name {
vertical-align: middle; vertical-align: middle;
} }
.my-checks-name {
#checks-table .my-checks-name {
border: 1px solid rgba(0, 0, 0, 0); border: 1px solid rgba(0, 0, 0, 0);
padding: 6px; padding: 6px;
display: block; display: block;
@ -168,13 +168,13 @@ td.inactive .popover {
padding-left: 15px; padding-left: 15px;
} }
.timeout_grace {
#checks-table .timeout-grace {
border: 1px solid rgba(0, 0, 0, 0); border: 1px solid rgba(0, 0, 0, 0);
padding: 6px; padding: 6px;
display: block; display: block;
} }
#checks-table tr:hover .timeout_grace {
#checks-table tr:hover .timeout-grace {
border: 1px dotted #AAA; border: 1px dotted #AAA;
} }


+ 2
- 1
static/js/checks.js View File

@ -80,11 +80,12 @@ $(function () {
$("#update-name-form").attr("action", $this.data("url")); $("#update-name-form").attr("action", $this.data("url"));
$("#update-name-input").val($this.data("name")); $("#update-name-input").val($this.data("name"));
$('#update-name-modal').modal("show"); $('#update-name-modal').modal("show");
$("#update-name-input").focus();
return false; return false;
}); });
$(".timeout_grace").click(function() {
$(".timeout-grace").click(function() {
var $this = $(this); var $this = $(this);
$("#update-timeout-form").attr("action", $this.data("url")); $("#update-timeout-form").attr("action", $this.data("url"));


+ 46
- 25
templates/base.html View File

@ -5,6 +5,7 @@
<title>{% block title %}healthchecks.io - Get Notified When Your Cron Jobs Fail{% endblock %}</title> <title>{% block title %}healthchecks.io - Get Notified When Your Cron Jobs Fail{% endblock %}</title>
<meta name="description" content="Monitor and Get Notified When Your Cron Jobs Fail. Free alternative to Cronitor and Dead Man's Snitch."> <meta name="description" content="Monitor and Get Notified When Your Cron Jobs Fail. Free alternative to Cronitor and Dead Man's Snitch.">
<meta name="keywords" content="monitor cron jobs daemon background worker service cronjob monitoring crontab alert notify cronitor deadmanssnitch webhook"> <meta name="keywords" content="monitor cron jobs daemon background worker service cronjob monitoring crontab alert notify cronitor deadmanssnitch webhook">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href='//fonts.googleapis.com/css?family=Open+Sans:400,300,600' rel='stylesheet' type='text/css'> <link href='//fonts.googleapis.com/css?family=Open+Sans:400,300,600' rel='stylesheet' type='text/css'>
@ -14,6 +15,7 @@
<link rel="stylesheet" href="{% static 'css/nouislider.min.css' %}" type="text/css"> <link rel="stylesheet" href="{% static 'css/nouislider.min.css' %}" type="text/css">
<link rel="stylesheet" href="{% static 'css/nouislider.pips.css' %}" type="text/css"> <link rel="stylesheet" href="{% static 'css/nouislider.pips.css' %}" type="text/css">
<link rel="stylesheet" href="{% static 'css/style.css' %}" type="text/css"> <link rel="stylesheet" href="{% static 'css/style.css' %}" type="text/css">
<link rel="stylesheet" href="{% static 'css/checks-list.css' %}" type="text/css">
<link rel="stylesheet" href="{% static 'css/pricing.css' %}" type="text/css"> <link rel="stylesheet" href="{% static 'css/pricing.css' %}" type="text/css">
<link rel="stylesheet" href="{% static 'css/syntax.css' %}" type="text/css"> <link rel="stylesheet" href="{% static 'css/syntax.css' %}" type="text/css">
{% endcompress %} {% endcompress %}
@ -22,37 +24,50 @@
<nav class="navbar navbar-default"> <nav class="navbar navbar-default">
<div class="container"> <div class="container">
<div class="navbar-header"> <div class="navbar-header">
<button
type="button"
class="navbar-toggle collapsed"
data-toggle="collapse"
data-target="#navbar"
aria-expanded="false"
aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="{% url 'hc-index' %}">Health Checks</a> <a class="navbar-brand" href="{% url 'hc-index' %}">Health Checks</a>
</div> </div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li {% if page == 'pricing' %} class="active" {% endif %}>
<a href="{% url 'hc-pricing' %}">Pricing</a>
</li>
<ul class="nav navbar-nav">
<li {% if page == 'pricing' %} class="active" {% endif %}>
<a href="{% url 'hc-pricing' %}">Pricing</a>
</li>
<li {% if page == 'docs' %} class="active" {% endif %}>
<a href="{% url 'hc-docs' %}">Docs</a>
</li>
<li {% if page == 'docs' %} class="active" {% endif %}>
<a href="{% url 'hc-docs' %}">Docs</a>
</li>
<li {% if page == 'about' %} class="active" {% endif %}>
<a href="{% url 'hc-about' %}">About</a>
</li>
</ul>
<li {% if page == 'about' %} class="active" {% endif %}>
<a href="{% url 'hc-about' %}">About</a>
</li>
</ul>
{% if request.user.is_authenticated %}
{% else %}
<ul class="nav navbar-nav navbar-right">
<li><a href="{% url 'hc-login' %}">Log In</a></li>
</ul>
{% endif %}
<ul class="nav navbar-nav navbar-right">
{% if request.user.is_authenticated %}
{% else %}
<li><a href="{% url 'hc-login' %}">Log In</a></li>
{% endif %}
</ul>
{% if request.user.is_authenticated %}
<p class="navbar-text navbar-right">
{{ request.user.email }}
<a href="{% url 'hc-logout' %}">Log Out</a>
</p>
{% endif %}
{% if request.user.is_authenticated %}
<p class="navbar-text navbar-right">
{{ request.user.email }}
<a href="{% url 'hc-logout' %}">Log Out</a>
</p>
{% endif %}
</div>
</div> </div>
</nav> </nav>
@ -69,6 +84,12 @@
</div> </div>
</footer> </footer>
{% block scripts %}{% endblock %}
{% block scripts %}
{% compress js %}
<script src="{% static 'js/jquery-2.1.4.min.js' %}"></script>
<script src="{% static 'js/bootstrap.min.js' %}"></script>
{% endcompress %}
{% endblock %}
</body> </body>
</html> </html>

+ 2
- 0
templates/front/log.html View File

@ -9,6 +9,7 @@
<div class="col-sm-12"> <div class="col-sm-12">
<h1>Log for {{ check.name|default:check.code }}</h1> <h1>Log for {{ check.name|default:check.code }}</h1>
{% if pings %} {% if pings %}
<div class="table-responsive">
<table class="table table-striped log-table"> <table class="table table-striped log-table">
<tr> <tr>
<th>Time</th> <th>Time</th>
@ -33,6 +34,7 @@
</tr> </tr>
{% endfor %} {% endfor %}
</table> </table>
</div>
{% else %} {% else %}
<div class="alert alert-info">Log is empty. This check has not received any pings yet.</div> <div class="alert alert-info">Log is empty. This check has not received any pings yet.</div>
{% endif %} {% endif %}


+ 3
- 89
templates/front/my_checks.html View File

@ -1,5 +1,5 @@
{% extends "base.html" %} {% extends "base.html" %}
{% load compress humanize staticfiles hc_extras %}
{% load compress staticfiles %}
{% block title %}My Checks - healthchecks.io{% endblock %} {% block title %}My Checks - healthchecks.io{% endblock %}
@ -9,94 +9,8 @@
<div class="col-sm-12"> <div class="col-sm-12">
<h1>My Checks</h1> <h1>My Checks</h1>
{% if checks %} {% if checks %}
<table id="checks-table" class="table table-hover">
<tr>
<th></th>
<th class="th-name">Name</th>
<th>URL</th>
<th class="th-period">
Period <br />
<span class="checks-subline">Grace</span>
</th>
<th>Last Ping</th>
<th></th>
</tr>
{% for check in checks %}
<tr class="checks-row">
<td class="indicator-cell">
{% if check.get_status == "new" %}
<span class="glyphicon glyphicon-question-sign new"></span>
{% elif check.get_status == "up" %}
<span class="glyphicon glyphicon-ok-sign up"></span>
{% elif check.get_status == "grace" %}
<span class="glyphicon glyphicon-exclamation-sign grace"></span>
{% elif check.get_status == "down" %}
<span class="glyphicon glyphicon-exclamation-sign down"></span>
{% endif %}
</td>
<td class="name-cell">
<span
data-name="{{ check.name }}"
data-url="{% url 'hc-update-name' check.code %}"
class="my-checks-name {% if not check.name %}unnamed{% endif %}">
{{ check.name|default:"unnamed" }}
</span>
</td>
<td class="url-cell">
<code>{{ check.url }}</code>
</td>
<td class="timeout-cell inactive">
<span
data-url="{% url 'hc-update-timeout' check.code %}"
data-timeout="{{ check.timeout.total_seconds }}"
data-grace="{{ check.grace.total_seconds }}"
class="timeout_grace">
{{ check.timeout|hc_duration }}
<br />
<span class="checks-subline">
{{ check.grace|hc_duration }}
</span>
</span>
</td>
<td>
{% if check.last_ping %}
<span
data-toggle="tooltip"
title="{{ check.last_ping }}">
{{ check.last_ping|naturaltime }}
</span>
{% else %}
Never
{% endif %}
</td>
<td>
<div class="check-menu dropdown">
<button class="btn btn-sm btn-default dropdown-toggle" type="button" data-toggle="dropdown">
<span class="glyphicon glyphicon-cog" aria-hidden="true"></span>
</button>
<ul class="dropdown-menu">
<li>
<a href="{% url 'hc-log' check.code %}">
<span class="glyphicon glyphicon-time"></span>
Log
</a>
</li>
<li role="separator" class="divider"></li>
<li>
<a href="#" class="check-menu-remove"
data-name="{{ check.name|default:check.code }}"
data-url="{% url 'hc-remove-check' check.code %}">
<span class="glyphicon glyphicon-trash"></span>
Remove
</a>
</li>
</ul>
</div>
</td>
</tr>
{% endfor %}
</table>
{% include "front/my_checks_mobile.html" %}
{% include "front/my_checks_desktop.html" %}
{% else %} {% else %}
<div class="alert alert-info">You don't have any checks yet.</div> <div class="alert alert-info">You don't have any checks yet.</div>
{% endif %} {% endif %}


+ 90
- 0
templates/front/my_checks_desktop.html View File

@ -0,0 +1,90 @@
{% load hc_extras humanize %}
<table id="checks-table" class="table table-hover hidden-xs">
<tr>
<th></th>
<th class="th-name">Name</th>
<th>URL</th>
<th class="th-period">
Period <br />
<span class="checks-subline">Grace</span>
</th>
<th>Last Ping</th>
<th></th>
</tr>
{% for check in checks %}
<tr class="checks-row">
<td class="indicator-cell">
{% if check.get_status == "new" %}
<span class="glyphicon glyphicon-question-sign new"></span>
{% elif check.get_status == "up" %}
<span class="glyphicon glyphicon-ok-sign up"></span>
{% elif check.get_status == "grace" %}
<span class="glyphicon glyphicon-exclamation-sign grace"></span>
{% elif check.get_status == "down" %}
<span class="glyphicon glyphicon-exclamation-sign down"></span>
{% endif %}
</td>
<td class="name-cell">
<span
data-name="{{ check.name }}"
data-url="{% url 'hc-update-name' check.code %}"
class="my-checks-name {% if not check.name %}unnamed{% endif %}">
{{ check.name|default:"unnamed" }}
</span>
</td>
<td class="url-cell">
<code>{{ check.url }}</code>
</td>
<td class="timeout-cell inactive">
<span
data-url="{% url 'hc-update-timeout' check.code %}"
data-timeout="{{ check.timeout.total_seconds }}"
data-grace="{{ check.grace.total_seconds }}"
class="timeout-grace">
{{ check.timeout|hc_duration }}
<br />
<span class="checks-subline">
{{ check.grace|hc_duration }}
</span>
</span>
</td>
<td>
{% if check.last_ping %}
<span
data-toggle="tooltip"
title="{{ check.last_ping }}">
{{ check.last_ping|naturaltime }}
</span>
{% else %}
Never
{% endif %}
</td>
<td>
<div class="check-menu dropdown">
<button class="btn btn-sm btn-default dropdown-toggle" type="button" data-toggle="dropdown">
<span class="glyphicon glyphicon-cog" aria-hidden="true"></span>
</button>
<ul class="dropdown-menu">
<li>
<a href="{% url 'hc-log' check.code %}">
<span class="glyphicon glyphicon-time"></span>
Log
</a>
</li>
<li role="separator" class="divider"></li>
<li>
<a href="#" class="check-menu-remove"
data-name="{{ check.name|default:check.code }}"
data-url="{% url 'hc-remove-check' check.code %}">
<span class="glyphicon glyphicon-trash"></span>
Remove
</a>
</li>
</ul>
</div>
</td>
</tr>
{% endfor %}
</table>

+ 79
- 0
templates/front/my_checks_mobile.html View File

@ -0,0 +1,79 @@
{% load hc_extras humanize %}
<ul id="checks-list" class="visible-xs">
{% for check in checks %}
<li>
<h2>
<span class="{% if not check.name %}unnamed{% endif %}">
{{ check.name|default:"unnamed" }}
</span>
<code>{{ check.code }}</code>
</h2>
<a
href="#"
class="btn remove-link check-menu-remove"
data-name="{{ check.name|default:check.code }}"
data-url="{% url 'hc-remove-check' check.code %}">
<span class="glyphicon glyphicon-remove"></span>
</a>
<table class="table">
<tr>
<th>Status</th>
<td>
{% if check.get_status == "new" %}
<span class="label label-default">NEW</span>
{% elif check.get_status == "up" %}
<span class="label label-success">UP</span>
{% elif check.get_status == "grace" %}
<span class="label label-warning">LATE</span>
{% elif check.get_status == "down" %}
<span class="label label-danger">DOWN</span>
{% endif %}
</td>
</tr>
<tr>
<th>Period</th>
<td>{{ check.timeout|hc_duration }}</td>
</tr>
<tr>
<th>Grace Time</th>
<td>{{ check.grace|hc_duration }}</td>
</tr>
<tr>
<th>Last Ping</th>
<td>
{% if check.last_ping %}
{{ check.last_ping|naturaltime }}
{% else %}
Never
{% endif %}
</td>
</tr>
</table>
<div>
<a
href="#"
data-name="{{ check.name }}"
data-url="{% url 'hc-update-name' check.code %}"
class="btn btn-default my-checks-name">
Rename
</a>
<a
href="#"
data-url="{% url 'hc-update-timeout' check.code %}"
data-timeout="{{ check.timeout.total_seconds }}"
data-grace="{{ check.grace.total_seconds }}"
class="btn btn-default timeout-grace">Change Period</a>
<a href="{% url 'hc-log' check.code %}" class="btn btn-default">Log</a>
</div>
</li>
{% endfor %}
</ul>

+ 4
- 9
templates/front/welcome.html View File

@ -30,13 +30,13 @@
<li> <li>
<a href="#python" data-toggle="tab">Python</a> <a href="#python" data-toggle="tab">Python</a>
</li> </li>
<li>
<li class="hidden-xs">
<a href="#node" data-toggle="tab">Node.js</a> <a href="#node" data-toggle="tab">Node.js</a>
</li> </li>
<li>
<li class="hidden-xs">
<a href="#php" data-toggle="tab">PHP</a> <a href="#php" data-toggle="tab">PHP</a>
</li> </li>
<li>
<li class="hidden-xs">
<a href="#browser" data-toggle="tab">Browser</a> <a href="#browser" data-toggle="tab">Browser</a>
</li> </li>
</ul> </ul>
@ -187,9 +187,4 @@
{% endblock %} {% endblock %}
{% block scripts %}
{% compress js %}
<script src="{% static 'js/jquery-2.1.4.min.js' %}"></script>
<script src="{% static 'js/bootstrap.min.js' %}"></script>
{% endcompress %}
{% endblock %}

Write Preview
Loading…
Cancel
Save