0
0
Fork 0
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:
Pēteris Caune 2015-10-10 18:42:27 +03:00
parent 077c362432
commit d833d299c2
6 changed files with 150 additions and 996 deletions

File diff suppressed because it is too large Load diff

119
static/js/tab-native.js Normal file
View 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;
});

View file

@ -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);

View file

@ -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";

View file

@ -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>

View file

@ -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 %}