mirror of
https://github.com/healthchecks/healthchecks.git
synced 2025-04-08 06:30:05 +00:00
Don't use jQuery on welcome page, much less JS to load.
Slightly reduce the size of bootstrap.css, by commenting out unused components. Unauthenticated users see full logo, logged in users see icon-only logo.
This commit is contained in:
parent
077c362432
commit
d833d299c2
6 changed files with 150 additions and 996 deletions
static
stuff/bootstrap
templates
971
static/css/bootstrap.css
vendored
971
static/css/bootstrap.css
vendored
File diff suppressed because it is too large
Load diff
119
static/js/tab-native.js
Normal file
119
static/js/tab-native.js
Normal file
|
@ -0,0 +1,119 @@
|
|||
// Native Javascript for Bootstrap 3 | Tab
|
||||
// by dnp_theme
|
||||
|
||||
(function(factory){
|
||||
|
||||
// CommonJS/RequireJS and "native" compatibility
|
||||
if(typeof module !== "undefined" && typeof exports == "object") {
|
||||
// A commonJS/RequireJS environment
|
||||
if(typeof window != "undefined") {
|
||||
// Window and document exist, so return the factory's return value.
|
||||
module.exports = factory();
|
||||
} else {
|
||||
// Let the user give the factory a Window and Document.
|
||||
module.exports = factory;
|
||||
}
|
||||
} else {
|
||||
// Assume a traditional browser.
|
||||
window.Tab = factory();
|
||||
}
|
||||
|
||||
})(function(){
|
||||
|
||||
// TAB DEFINITION
|
||||
// ===================
|
||||
var Tab = function( element,options ) {
|
||||
options = options || {};
|
||||
|
||||
this.tab = typeof element === 'object' ? element : document.querySelector(element);
|
||||
this.tabs = this.tab.parentNode.parentNode;
|
||||
this.dropdown = this.tabs.querySelector('.dropdown');
|
||||
if ( this.tabs.classList.contains('dropdown-menu') ) {
|
||||
this.dropdown = this.tabs.parentNode;
|
||||
this.tabs = this.tabs.parentNode.parentNode;
|
||||
}
|
||||
this.options = {};
|
||||
|
||||
// default tab transition duration
|
||||
this.duration = 150;
|
||||
this.options.duration = document.documentElement.classList.contains('ie') ? 0 : (options.duration || this.duration);
|
||||
this.init();
|
||||
}
|
||||
|
||||
// TAB METHODS
|
||||
// ================
|
||||
Tab.prototype = {
|
||||
|
||||
init : function() {
|
||||
var self = this;
|
||||
self.actions();
|
||||
self.tab.addEventListener('click', self.action, false);
|
||||
},
|
||||
|
||||
actions : function() {
|
||||
var self = this;
|
||||
|
||||
this.action = function(e) {
|
||||
e = e || window.e;
|
||||
var next = e.target; //the tab we clicked is now the next tab
|
||||
var nextContent = document.getElementById(next.getAttribute('href').replace('#','')); //this is the actual object, the next tab content to activate
|
||||
|
||||
var activeTab = self.getActiveTab();
|
||||
var activeContent = self.getActiveContent();
|
||||
|
||||
//toggle "active" class name
|
||||
activeTab.classList.remove('active');
|
||||
next.parentNode.classList.add('active');
|
||||
|
||||
//handle dropdown menu "active" class name
|
||||
if ( !self.tab.parentNode.parentNode.classList.contains('dropdown-menu')){
|
||||
self.dropdown && self.dropdown.classList.remove('active');
|
||||
} else {
|
||||
self.dropdown && self.dropdown.classList.add('active');
|
||||
}
|
||||
|
||||
//1. hide current active content first
|
||||
activeContent.classList.remove('in');
|
||||
|
||||
setTimeout(function() {
|
||||
//2. toggle current active content from view
|
||||
activeContent.classList.remove('active');
|
||||
nextContent.classList.add('active');
|
||||
}, self.options.duration);
|
||||
setTimeout(function() {
|
||||
//3. show next active content
|
||||
nextContent.classList.add('in');
|
||||
}, self.options.duration*2);
|
||||
e.preventDefault();
|
||||
},
|
||||
|
||||
this.getActiveTab = function() {
|
||||
var activeTabs = self.tabs.querySelectorAll('.active');
|
||||
if ( activeTabs.length === 1 && !activeTabs[0].classList.contains('dropdown') ) {
|
||||
return activeTabs[0]
|
||||
} else if ( activeTabs.length > 1 ) {
|
||||
return activeTabs[activeTabs.length-1]
|
||||
}
|
||||
|
||||
console.log(activeTabs.length)
|
||||
},
|
||||
this.getActiveContent = function() {
|
||||
var a = self.getActiveTab().getElementsByTagName('A')[0].getAttribute('href').replace('#','');
|
||||
return a && document.getElementById(a)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// TAB DATA API
|
||||
// =================
|
||||
var Tabs = document.querySelectorAll("[data-toggle='tab'], [data-toggle='pill']"), tbl = Tabs.length, i=0;
|
||||
for ( i;i<tbl;i++ ) {
|
||||
var tab = Tabs[i], options = {};
|
||||
options.duration = tab.getAttribute('data-duration') && tab.getAttribute('data-duration') || false;
|
||||
new Tab(tab,options);
|
||||
}
|
||||
|
||||
return Tab;
|
||||
|
||||
});
|
|
@ -1,7 +1,8 @@
|
|||
$(function () {
|
||||
setTimeout(function() {
|
||||
|
||||
$("#pitch-url-input").click(function() {
|
||||
var input = document.getElementById("pitch-url-input");
|
||||
input.addEventListener("click", function() {
|
||||
this.select();
|
||||
});
|
||||
|
||||
});
|
||||
}, 1000);
|
||||
|
|
24
stuff/bootstrap/bootstrap.less
vendored
24
stuff/bootstrap/bootstrap.less
vendored
|
@ -25,31 +25,31 @@
|
|||
// Components
|
||||
@import "component-animations.less";
|
||||
@import "dropdowns.less";
|
||||
@import "button-groups.less";
|
||||
@import "input-groups.less";
|
||||
// @import "button-groups.less";
|
||||
// @import "input-groups.less";
|
||||
@import "navs.less";
|
||||
@import "navbar.less";
|
||||
@import "breadcrumbs.less";
|
||||
@import "pagination.less";
|
||||
@import "pager.less";
|
||||
// @import "breadcrumbs.less";
|
||||
// @import "pagination.less";
|
||||
// @import "pager.less";
|
||||
@import "labels.less";
|
||||
@import "badges.less";
|
||||
@import "jumbotron.less";
|
||||
@import "thumbnails.less";
|
||||
// @import "jumbotron.less";
|
||||
// @import "thumbnails.less";
|
||||
@import "alerts.less";
|
||||
@import "progress-bars.less";
|
||||
@import "media.less";
|
||||
// @import "progress-bars.less";
|
||||
// @import "media.less";
|
||||
@import "list-group.less";
|
||||
@import "panels.less";
|
||||
@import "responsive-embed.less";
|
||||
@import "wells.less";
|
||||
// @import "responsive-embed.less";
|
||||
// @import "wells.less";
|
||||
@import "close.less";
|
||||
|
||||
// Components w/ JavaScript
|
||||
@import "modals.less";
|
||||
@import "tooltip.less";
|
||||
@import "popovers.less";
|
||||
@import "carousel.less";
|
||||
// @import "carousel.less";
|
||||
|
||||
// Utility classes
|
||||
@import "utilities.less";
|
||||
|
|
|
@ -45,7 +45,7 @@
|
|||
<a class="navbar-brand"
|
||||
href="{% url 'hc-index' %}"
|
||||
title="healthchecks.io - Monitor Cron Jobs">
|
||||
{% block logo %}
|
||||
{% if request.user.is_authenticated %}
|
||||
<img
|
||||
id="logo"
|
||||
height="50"
|
||||
|
@ -53,7 +53,15 @@
|
|||
src="{% static 'img/logo.png'%}"
|
||||
srcset="{% static 'img/logo.png'%} 1x, {% static 'img/logo@2x.png'%} 2x"
|
||||
alt="healthchecks.io">
|
||||
{% endblock %}
|
||||
{% else %}
|
||||
<img
|
||||
id="logo"
|
||||
height="50"
|
||||
width="200"
|
||||
src="{% static 'img/logo-full.png'%}"
|
||||
srcset="{% static 'img/logo-full.png'%} 1x, {% static 'img/logo-full@2x.png'%} 2x"
|
||||
alt="healthchecks.io">
|
||||
{% endif %}
|
||||
</a>
|
||||
|
||||
</div>
|
||||
|
|
|
@ -1,16 +1,6 @@
|
|||
{% extends "base.html" %}
|
||||
{% load compress humanize staticfiles %}
|
||||
|
||||
{% block logo %}
|
||||
<img
|
||||
id="logo"
|
||||
height="50"
|
||||
width="200"
|
||||
src="{% static 'img/logo-full.png'%}"
|
||||
srcset="{% static 'img/logo-full.png'%} 1x, {% static 'img/logo-full@2x.png'%} 2x"
|
||||
alt="healthchecks.io">
|
||||
{% endblock %}
|
||||
|
||||
{% block containers %}
|
||||
<div class="index-bleed">
|
||||
<div class="container">
|
||||
|
@ -288,8 +278,7 @@
|
|||
|
||||
{% block scripts %}
|
||||
{% compress js %}
|
||||
<script src="{% static 'js/jquery-2.1.4.min.js' %}"></script>
|
||||
<script src="{% static 'js/bootstrap.min.js' %}"></script>
|
||||
<script src="{% static 'js/tab-native.js' %}"></script>
|
||||
<script src="{% static 'js/welcome.js' %}"></script>
|
||||
{% endcompress %}
|
||||
{% endblock %}
|
||||
|
|
Loading…
Add table
Reference in a new issue