ttss/mpk-ttss - git.Jacekk.net

commits
diff

2016-12-13

Jacek Kowalski

Use navbar for loading indication

0f9bcf

diff | tree

2016-12-13

Jacek Kowalski

Move CSS to separate file

5dd112

diff | tree

2 files modified

1 files added

	index.css	49 ●●●●● patch \| view \| raw \| blame \| history
	index.html	44 ●●●●● patch \| view \| raw \| blame \| history
	index.js	6 ●●●●● patch \| view \| raw \| blame \| history

 index.css

New file
@@ -0,0 +1,49 @@
tr.active {
    color: gray;
}
.form-round-left {
    border-top-left-radius: 4px !important;
    border-bottom-left-radius: 4px !important;
    border-right: 0;
}
.navbar-text {
    margin-right: 15px;
    margin-left: 15px;
}
.input-group-btn:first-child {
    width: 50%;
}
@keyframes blink {
    50% { color: transparent; }
}
.status-boarding {
    animation: blink 1s linear infinite;
}
.status-delayed {
    font-weight: bold;
}
.bg-active {
    background-color: #eee;
}
.bg-default {
    border: 1px solid #eee;
}
.label.bg-success, .label.bg-warning, .label.bg-danger, .label.bg-active, .label.bg-default {
    color: black;
    font-weight: normal;
    font-size: inherit;
}

nav.loading {
    background-image: -webkit-linear-gradient(45deg,rgba(0,0,0,.1) 25%,transparent 25%,transparent 50%,rgba(0,0,0,.1) 50%,rgba(0,0,0,.1) 75%,transparent 75%,transparent);
    background-image: -o-linear-gradient(45deg,rgba(0,0,0,.1) 25%,transparent 25%,transparent 50%,rgba(0,0,0,.1) 50%,rgba(0,0,0,.1) 75%,transparent 75%,transparent);
    background-image: linear-gradient(45deg,rgba(0,0,0,.1) 25%,transparent 25%,transparent 50%,rgba(0,0,0,.1) 50%,rgba(0,0,0,.1) 75%,transparent 75%,transparent);
    -webkit-background-size: 40px 40px;
    background-size: 40px 40px;
    -webkit-animation: progress-bar-stripes 2s linear infinite;
    -o-animation: progress-bar-stripes 2s linear infinite;
    animation: progress-bar-stripes 2s linear infinite;
}
nav.loading * {
    color: black !important;
}

 index.html

@@ -6,43 +6,7 @@
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
        <style type="text/css">
            tr.active {
                color: gray;
            }
            .form-round-left {
                border-top-left-radius: 4px !important;
                border-bottom-left-radius: 4px !important;
                border-right: 0;
            }
            .navbar-text {
                margin-right: 15px;
                margin-left: 15px;
            }
            .input-group-btn:first-child {
                width: 50%;
            }
            @keyframes blink {
                50% { color: transparent; }
            }
            .status-boarding {
                animation: blink 1s linear infinite;
            }
            .status-delayed {
                font-weight: bold;
            }
            .bg-active {
                background-color: #eee;
            }
            .bg-default {
                border: 1px solid #eee;
            }
            .label.bg-success, .label.bg-warning, .label.bg-danger, .label.bg-active, .label.bg-default {
                color: black;
                font-weight: normal;
                font-size: inherit;
            }
        </style>
        <link rel="stylesheet" type="text/css" href="index.css">
    </head>
    <body>
        <nav class="navbar navbar-default">
@@ -72,12 +36,6 @@
            </div>
        </nav>
        <div class="container-fluid">
            <div id="progress" class="progress" style="display: none;">
                <div id="progress-bar" class="progress-bar progress-bar-striped active" style="width: 100%">
                    <span id="progress-text" class="sr-only">Refreshing data...</span>
                </div>
            </div>
			
            <div id="alert" class="alert alert-danger alert-dismissible" style="display:none">
                <a href="#" class="close" id="alert-close" aria-label="close">&times;</a>
                <strong>Error occured!</strong> <span id="alert-text"></span>

 index.js

@@ -30,7 +30,7 @@
var alert_text = document.getElementById('alert-text');
var alert_close = document.getElementById('alert-close');

var progress = document.getElementById('progress');
var nav = document.getElementsByTagName('nav')[0];

var parseStatusBoarding = '>>>';
function parseStatus(status) {
@@ -130,11 +130,11 @@
}

function loading_start() {
    progress.style.display = 'block';
    nav.className += ' loading';
}

function loading_end() {
    progress.style.display = 'none';
    nav.className = nav.className.replace(' loading', '');
}

function loadTimes(stopId = null, clearRoute = false) {

New file
			@@ -0,0 +1,49 @@
			tr.active {
			color: gray;
			}
			.form-round-left {
			border-top-left-radius: 4px !important;
			border-bottom-left-radius: 4px !important;
			border-right: 0;
			}
			.navbar-text {
			margin-right: 15px;
			margin-left: 15px;
			}
			.input-group-btn:first-child {
			width: 50%;
			}
			@keyframes blink {
			50% { color: transparent; }
			}
			.status-boarding {
			animation: blink 1s linear infinite;
			}
			.status-delayed {
			font-weight: bold;
			}
			.bg-active {
			background-color: #eee;
			}
			.bg-default {
			border: 1px solid #eee;
			}
			.label.bg-success, .label.bg-warning, .label.bg-danger, .label.bg-active, .label.bg-default {
			color: black;
			font-weight: normal;
			font-size: inherit;
			}

			nav.loading {
			background-image: -webkit-linear-gradient(45deg,rgba(0,0,0,.1) 25%,transparent 25%,transparent 50%,rgba(0,0,0,.1) 50%,rgba(0,0,0,.1) 75%,transparent 75%,transparent);
			background-image: -o-linear-gradient(45deg,rgba(0,0,0,.1) 25%,transparent 25%,transparent 50%,rgba(0,0,0,.1) 50%,rgba(0,0,0,.1) 75%,transparent 75%,transparent);
			background-image: linear-gradient(45deg,rgba(0,0,0,.1) 25%,transparent 25%,transparent 50%,rgba(0,0,0,.1) 50%,rgba(0,0,0,.1) 75%,transparent 75%,transparent);
			-webkit-background-size: 40px 40px;
			background-size: 40px 40px;
			-webkit-animation: progress-bar-stripes 2s linear infinite;
			-o-animation: progress-bar-stripes 2s linear infinite;
			animation: progress-bar-stripes 2s linear infinite;
			}
			nav.loading * {
			color: black !important;
			}

			@@ -6,43 +6,7 @@
			<meta http-equiv="X-UA-Compatible" content="IE=edge">
			<meta name="viewport" content="width=device-width, initial-scale=1">
			<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
			<style type="text/css">
			tr.active {
			color: gray;
			}
			.form-round-left {
			border-top-left-radius: 4px !important;
			border-bottom-left-radius: 4px !important;
			border-right: 0;
			}
			.navbar-text {
			margin-right: 15px;
			margin-left: 15px;
			}
			.input-group-btn:first-child {
			width: 50%;
			}
			@keyframes blink {
			50% { color: transparent; }
			}
			.status-boarding {
			animation: blink 1s linear infinite;
			}
			.status-delayed {
			font-weight: bold;
			}
			.bg-active {
			background-color: #eee;
			}
			.bg-default {
			border: 1px solid #eee;
			}
			.label.bg-success, .label.bg-warning, .label.bg-danger, .label.bg-active, .label.bg-default {
			color: black;
			font-weight: normal;
			font-size: inherit;
			}
			</style>
			<link rel="stylesheet" type="text/css" href="index.css">
			</head>
			<body>
			<nav class="navbar navbar-default">
			@@ -72,12 +36,6 @@
			</div>
			</nav>
			<div class="container-fluid">
			<div id="progress" class="progress" style="display: none;">
			<div id="progress-bar" class="progress-bar progress-bar-striped active" style="width: 100%">
			<span id="progress-text" class="sr-only">Refreshing data...</span>
			</div>
			</div>

			<div id="alert" class="alert alert-danger alert-dismissible" style="display:none">
			<a href="#" class="close" id="alert-close" aria-label="close">×</a>
			<strong>Error occured!</strong> <span id="alert-text"></span>

			@@ -30,7 +30,7 @@
			var alert_text = document.getElementById('alert-text');
			var alert_close = document.getElementById('alert-close');

			var progress = document.getElementById('progress');
			var nav = document.getElementsByTagName('nav')[0];

			var parseStatusBoarding = '>>>';
			function parseStatus(status) {
			@@ -130,11 +130,11 @@
			}

			function loading_start() {
			progress.style.display = 'block';
			nav.className += ' loading';
			}

			function loading_end() {
			progress.style.display = 'none';
			nav.className = nav.className.replace(' loading', '');
			}

			function loadTimes(stopId = null, clearRoute = false) {