forked from GithubBackups/healthchecks
Split style.css in smaller files. Email instructions in welcome page.
This commit is contained in:
Pēteris Caune
parent
36f0e7c82a
commit
3bafac24ba
@ -32,6 +32,9 @@ class Check(models.Model):
|
||||
def url(self):
|
||||
return settings.PING_ENDPOINT + str(self.code)
|
||||
|
||||
def email(self):
|
||||
return "%s@%s" % (self.code, settings.PING_EMAIL_DOMAIN)
|
||||
|
||||
def send_alert(self):
|
||||
ctx = {
|
||||
"check": self,
|
||||
|
||||
@ -21,19 +21,9 @@ def _welcome(request):
|
||||
code = request.session["welcome_code"]
|
||||
check = Check.objects.get(code=code)
|
||||
|
||||
if check.alert_after:
|
||||
duration = check.alert_after - timezone.now()
|
||||
timer = int(duration.total_seconds())
|
||||
timer_formatted = "%dh %dm %ds" % (timer / 3600, (timer / 60) % 60, timer % 60)
|
||||
else:
|
||||
timer = 0
|
||||
timer_formatted = "Never"
|
||||
|
||||
ctx = {
|
||||
"page": "welcome",
|
||||
"check": check,
|
||||
"timer": timer,
|
||||
"timer_formatted": timer_formatted,
|
||||
"ping_url": check.url()
|
||||
}
|
||||
|
||||
|
||||
@ -90,6 +90,7 @@ USE_TZ = True
|
||||
|
||||
SITE_ROOT = "http://localhost:8000"
|
||||
PING_ENDPOINT = SITE_ROOT + "/ping/"
|
||||
PING_EMAIL_DOMAIN = HOST
|
||||
STATIC_URL = '/static/'
|
||||
STATICFILES_DIRS = [os.path.join(BASE_DIR, "static")]
|
||||
STATIC_ROOT = os.path.join(BASE_DIR, 'static-collected')
|
||||
|
||||
59
static/css/base.css
Normal file
59
static/css/base.css
Normal file
@ -0,0 +1,59 @@
|
||||
html {
|
||||
position: relative;
|
||||
min-height: 100%;
|
||||
}
|
||||
|
||||
body {
|
||||
/* Margin bottom by footer height */
|
||||
margin-bottom: 60px;
|
||||
}
|
||||
|
||||
.footer {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
/* Set the fixed height of the footer here */
|
||||
height: 60px;
|
||||
line-height: 60px;
|
||||
color: #AAA;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.navbar-nav {
|
||||
text-transform: uppercase;
|
||||
font-size: small;
|
||||
}
|
||||
|
||||
.navbar-text {
|
||||
font-size: small;
|
||||
}
|
||||
|
||||
.glyphicon.up, .glyphicon.new, .glyphicon.grace, .glyphicon.down {
|
||||
font-size: 22px;
|
||||
}
|
||||
|
||||
.glyphicon.up {
|
||||
color: #5cb85c;
|
||||
}
|
||||
|
||||
.glyphicon.new {
|
||||
color: #AAA;
|
||||
}
|
||||
|
||||
.glyphicon.grace {
|
||||
color: #f0ad4e;
|
||||
}
|
||||
|
||||
.glyphicon.down {
|
||||
color: #d9534f;
|
||||
}
|
||||
|
||||
#login_dialog {
|
||||
background: #FFF;
|
||||
padding: 2em;
|
||||
margin-top: 100px;
|
||||
}
|
||||
|
||||
#login_dialog h1 {
|
||||
margin: 0;
|
||||
}
|
||||
3
static/css/log.css
Normal file
3
static/css/log.css
Normal file
@ -0,0 +1,3 @@
|
||||
.log-table .remote-addr, .log-table .ua {
|
||||
font-family: monospace;
|
||||
}
|
||||
58
static/css/my_checks.css
Normal file
58
static/css/my_checks.css
Normal file
@ -0,0 +1,58 @@
|
||||
#update-timeout-modal .modal-body {
|
||||
padding-top: 40px;
|
||||
}
|
||||
|
||||
.update-timeout-info {
|
||||
line-height: 22px;
|
||||
}
|
||||
|
||||
.update-timeout-label {
|
||||
position: relative;
|
||||
right: 3px;
|
||||
display: inline-block;
|
||||
text-align: right;
|
||||
width: 100px;
|
||||
}
|
||||
|
||||
.update-timeout-value {
|
||||
font-size: 22px;
|
||||
display: inline-block;
|
||||
width: 100px;
|
||||
text-align: left;
|
||||
white-space: nowrap;
|
||||
|
||||
}
|
||||
|
||||
#period-slider {
|
||||
margin: 20px 50px 80px 50px;
|
||||
}
|
||||
|
||||
#period-slider.noUi-connect {
|
||||
background: #5cb85c;
|
||||
}
|
||||
|
||||
#grace-slider {
|
||||
margin: 20px 50px 110px 50px;
|
||||
}
|
||||
|
||||
#grace-slider.noUi-connect {
|
||||
background: #f0ad4e;
|
||||
}
|
||||
|
||||
#period-slider .noUi-value, #grace-slider .noUi-value {
|
||||
width: 60px;
|
||||
margin-left: -30px;
|
||||
}
|
||||
|
||||
.update-timeout-terms {
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.update-timeout-terms p {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
|
||||
.update-timeout-terms span {
|
||||
font-weight: bold;
|
||||
}
|
||||
62
static/css/my_checks_desktop.css
Normal file
62
static/css/my_checks_desktop.css
Normal file
@ -0,0 +1,62 @@
|
||||
.my-checks-name.unnamed {
|
||||
color: #999;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
|
||||
table.table tr > th.th-name {
|
||||
padding-left: 21px;
|
||||
}
|
||||
|
||||
#checks-table .indicator-cell {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
#checks-table th {
|
||||
border-top: 0;
|
||||
}
|
||||
|
||||
#checks-table td {
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
#checks-table .my-checks-name {
|
||||
border: 1px solid rgba(0, 0, 0, 0);
|
||||
padding: 6px;
|
||||
display: block;
|
||||
}
|
||||
|
||||
#checks-table tr:hover .my-checks-name {
|
||||
border: 1px dotted #AAA;
|
||||
}
|
||||
|
||||
.url-cell {
|
||||
font-size: small;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
#checks-table > tbody > tr > th.th-period {
|
||||
padding-left: 15px;
|
||||
}
|
||||
|
||||
#checks-table .timeout-grace {
|
||||
border: 1px solid rgba(0, 0, 0, 0);
|
||||
padding: 6px;
|
||||
display: block;
|
||||
}
|
||||
|
||||
#checks-table tr:hover .timeout-grace {
|
||||
border: 1px dotted #AAA;
|
||||
}
|
||||
|
||||
.checks-subline {
|
||||
color: #888;
|
||||
}
|
||||
|
||||
.check-menu {
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
tr:hover .check-menu {
|
||||
visibility: visible;
|
||||
}
|
||||
@ -1,257 +0,0 @@
|
||||
html {
|
||||
position: relative;
|
||||
min-height: 100%;
|
||||
}
|
||||
|
||||
body {
|
||||
/* Margin bottom by footer height */
|
||||
margin-bottom: 60px;
|
||||
}
|
||||
|
||||
.footer {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
/* Set the fixed height of the footer here */
|
||||
height: 60px;
|
||||
line-height: 60px;
|
||||
color: #AAA;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.page-welcome .navbar {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.navbar-nav {
|
||||
text-transform: uppercase;
|
||||
font-size: small;
|
||||
}
|
||||
|
||||
.navbar-text {
|
||||
font-size: small;
|
||||
}
|
||||
|
||||
.index-bleed {
|
||||
background: #FFF;
|
||||
padding-bottom: 2em;
|
||||
}
|
||||
|
||||
.get-started-bleed {
|
||||
background: #e5ece5;
|
||||
padding-bottom: 3em;
|
||||
}
|
||||
|
||||
#pitch {
|
||||
text-align: center;
|
||||
padding: 72px 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
#pitch-subtitle {
|
||||
margin-top: 0;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
#pitch-url {
|
||||
text-align: center;
|
||||
font-family: monospace;
|
||||
padding-bottom: 72px;
|
||||
}
|
||||
|
||||
.nav-tabs {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.page-welcome .highlight pre {
|
||||
background: #FFF;
|
||||
border-top: 0;
|
||||
border-radius: 0;
|
||||
border-color: #dddddd;
|
||||
}
|
||||
|
||||
#get-started {
|
||||
margin-top: 4em;
|
||||
}
|
||||
|
||||
.glyphicon.up, .glyphicon.new, .glyphicon.grace, .glyphicon.down {
|
||||
font-size: 22px;
|
||||
}
|
||||
|
||||
.glyphicon.up {
|
||||
color: #5cb85c;
|
||||
}
|
||||
|
||||
.glyphicon.new {
|
||||
color: #AAA;
|
||||
}
|
||||
|
||||
.glyphicon.grace {
|
||||
color: #f0ad4e;
|
||||
}
|
||||
|
||||
.glyphicon.down {
|
||||
color: #d9534f;
|
||||
}
|
||||
|
||||
#login_dialog {
|
||||
background: #FFF;
|
||||
padding: 2em;
|
||||
margin-top: 100px;
|
||||
}
|
||||
|
||||
#login_dialog h1 {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.tour-title {
|
||||
margin: 50px 0;
|
||||
}
|
||||
|
||||
|
||||
.tour-section {
|
||||
margin-bottom: 50px;
|
||||
}
|
||||
|
||||
/* Checks */
|
||||
|
||||
table.table tr > th.th-name {
|
||||
padding-left: 21px;
|
||||
}
|
||||
|
||||
#checks-table .indicator-cell {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
#checks-table th {
|
||||
border-top: 0;
|
||||
}
|
||||
|
||||
#checks-table td {
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
#checks-table .my-checks-name {
|
||||
border: 1px solid rgba(0, 0, 0, 0);
|
||||
padding: 6px;
|
||||
display: block;
|
||||
}
|
||||
|
||||
#checks-table tr:hover .my-checks-name {
|
||||
border: 1px dotted #AAA;
|
||||
}
|
||||
|
||||
.my-checks-name.unnamed {
|
||||
color: #999;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.url-cell {
|
||||
font-size: small;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
td.inactive .popover {
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
.popover.timeout-dialog.bottom {
|
||||
display: block;
|
||||
position: absolute;
|
||||
top: auto;
|
||||
left: auto;
|
||||
margin-top: 57px;
|
||||
margin-left: -77px;
|
||||
}
|
||||
|
||||
#checks-table > tbody > tr > th.th-period {
|
||||
padding-left: 15px;
|
||||
}
|
||||
|
||||
#checks-table .timeout-grace {
|
||||
border: 1px solid rgba(0, 0, 0, 0);
|
||||
padding: 6px;
|
||||
display: block;
|
||||
}
|
||||
|
||||
#checks-table tr:hover .timeout-grace {
|
||||
border: 1px dotted #AAA;
|
||||
}
|
||||
|
||||
.checks-subline {
|
||||
color: #888;
|
||||
}
|
||||
|
||||
.check-menu {
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
tr:hover .check-menu {
|
||||
visibility: visible;
|
||||
}
|
||||
|
||||
|
||||
#update-timeout-modal .modal-body {
|
||||
padding-top: 40px;
|
||||
}
|
||||
|
||||
.update-timeout-info {
|
||||
line-height: 22px;
|
||||
}
|
||||
|
||||
.update-timeout-label {
|
||||
position: relative;
|
||||
right: 3px;
|
||||
display: inline-block;
|
||||
text-align: right;
|
||||
width: 100px;
|
||||
}
|
||||
|
||||
.update-timeout-value {
|
||||
font-size: 22px;
|
||||
display: inline-block;
|
||||
width: 100px;
|
||||
text-align: left;
|
||||
white-space: nowrap;
|
||||
|
||||
}
|
||||
|
||||
#period-slider {
|
||||
margin: 20px 50px 80px 50px;
|
||||
}
|
||||
|
||||
#period-slider.noUi-connect {
|
||||
background: #5cb85c;
|
||||
}
|
||||
|
||||
#grace-slider {
|
||||
margin: 20px 50px 110px 50px;
|
||||
}
|
||||
|
||||
#grace-slider.noUi-connect {
|
||||
background: #f0ad4e;
|
||||
}
|
||||
|
||||
#period-slider .noUi-value, #grace-slider .noUi-value {
|
||||
width: 60px;
|
||||
margin-left: -30px;
|
||||
}
|
||||
|
||||
.update-timeout-terms {
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.update-timeout-terms p {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
|
||||
.update-timeout-terms span {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
/* Log */
|
||||
|
||||
.log-table .remote-addr, .log-table .ua {
|
||||
font-family: monospace;
|
||||
}
|
||||
67
static/css/welcome.css
Normal file
67
static/css/welcome.css
Normal file
@ -0,0 +1,67 @@
|
||||
.page-welcome .navbar {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.index-bleed {
|
||||
background: #FFF;
|
||||
padding-bottom: 2em;
|
||||
}
|
||||
|
||||
.get-started-bleed {
|
||||
background: #e5ece5;
|
||||
padding-bottom: 3em;
|
||||
}
|
||||
|
||||
#pitch {
|
||||
text-align: center;
|
||||
padding: 72px 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
#pitch-subtitle {
|
||||
margin-top: 0;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
#pitch-url {
|
||||
text-align: center;
|
||||
font-family: monospace;
|
||||
padding-bottom: 72px;
|
||||
}
|
||||
|
||||
.nav-tabs {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.page-welcome .highlight pre {
|
||||
background: #FFF;
|
||||
border-top: 0;
|
||||
border-radius: 0;
|
||||
border-color: #dddddd;
|
||||
}
|
||||
|
||||
#email .instructions {
|
||||
background: #FFF;
|
||||
border: 1px solid #dddddd;
|
||||
border-top: 0;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
#email .email-address {
|
||||
font-size: 18px;
|
||||
padding-top: 10px;
|
||||
}
|
||||
|
||||
|
||||
#get-started {
|
||||
margin-top: 4em;
|
||||
}
|
||||
|
||||
.tour-title {
|
||||
margin: 50px 0;
|
||||
}
|
||||
|
||||
|
||||
.tour-section {
|
||||
margin-bottom: 50px;
|
||||
}
|
||||
@ -14,8 +14,11 @@
|
||||
<link rel="stylesheet" href="{% static 'css/bootstrap.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/style.css' %}" type="text/css">
|
||||
<link rel="stylesheet" href="{% static 'css/checks-list.css' %}" type="text/css">
|
||||
<link rel="stylesheet" href="{% static 'css/base.css' %}" type="text/css">
|
||||
<link rel="stylesheet" href="{% static 'css/welcome.css' %}" type="text/css">
|
||||
<link rel="stylesheet" href="{% static 'css/my_checks.css' %}" type="text/css">
|
||||
<link rel="stylesheet" href="{% static 'css/my_checks_mobile.css' %}" type="text/css">
|
||||
<link rel="stylesheet" href="{% static 'css/my_checks_desktop.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">
|
||||
{% endcompress %}
|
||||
|
||||
@ -36,7 +36,7 @@
|
||||
<td class="url-cell">
|
||||
<code>{{ check.url }}</code>
|
||||
</td>
|
||||
<td class="timeout-cell inactive">
|
||||
<td class="timeout-cell">
|
||||
<span
|
||||
data-url="{% url 'hc-update-timeout' check.code %}"
|
||||
data-timeout="{{ check.timeout.total_seconds }}"
|
||||
|
||||
@ -39,6 +39,9 @@
|
||||
<li class="hidden-xs">
|
||||
<a href="#browser" data-toggle="tab">Browser</a>
|
||||
</li>
|
||||
<li class="hidden-xs">
|
||||
<a href="#email" data-toggle="tab">Email</a>
|
||||
</li>
|
||||
</ul>
|
||||
<div class="tab-content">
|
||||
<div role="tabpanel" class="tab-pane active" id="crontab">
|
||||
@ -59,6 +62,16 @@
|
||||
<div class="tab-pane" id="browser">
|
||||
{% include "front/snippets/browser.html" %}
|
||||
</div>
|
||||
<div class="tab-pane" id="email">
|
||||
<div class="instructions">
|
||||
As an alternative to HTTP/HTTPS requests,
|
||||
you can "ping" this check by sending an
|
||||
email message to
|
||||
<div class="email-address">
|
||||
<a href="mailto:{{ check.email }}">{{ check.email }}</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user