ttss/mpk-ttss - git.Jacekk.net

commits
diff

2019-07-07

Jacek Kowalski

Improve close/hide icons usage

ae5170

diff | tree

2019-07-07

Jacek Kowalski

Add proper descriptions to buttons on map

d8379d

diff | tree

2019-07-07

Jacek Kowalski

Fix icons styling, remove redundant CSS entries

20d39d

diff | tree

3 files modified

	map.css	43 ●●●●● patch \| view \| raw \| blame \| history
	map.html	6 ●●●●● patch \| view \| raw \| blame \| history
	map.js	6 ●●●●● patch \| view \| raw \| blame \| history

 map.css

@@ -17,6 +17,19 @@
    right: auto;
}

.close, .hide {
    float: right;
    cursor: pointer;
    font-size: 1.5em;
    padding-left: 1em;
    color: black;
}
#fail .close {
    font-size: inherit;
    height: 1em;
    color: black;
}

.panel {
    opacity: .85;
    color: black;
@@ -37,9 +50,9 @@
.panel.expanded {
    right: 0;
}

.panel .hide {
    display: none;
    padding: 0px 1em;
}
.panel.enabled .hide {
    display: block;
@@ -77,17 +90,6 @@
        margin-right: 10px;
    }
}

.close, .hide {
    float: right;
    cursor: pointer;
    font-size: 20px;
    padding: 0px 10px;
}
#fail .close {
    font-size: inherit;
    height: 1em;
}
.panel .type {
    padding-bottom: 0;
    color: #444;
@@ -99,6 +101,13 @@
}
.panel .name {
    font-weight: bold;
    padding-bottom: 0;
}
.panel .name .icon {
    margin: -5px 0.2rem 0;
    text-indent: 2rem;
    font-size: 1.4rem;
    vertical-align: top;
}
.panel .vehicleInfo {
    font-size: 21px;
@@ -135,17 +144,11 @@
    float: right;
}

.addon-icon {
    margin-left: 0.2rem;
}
.normal-icon, .addon-icon {
    font-size: 1rem;
}
.icon, .icon-loc, .icon-pin, .icon-zoom {
    display: inline-block;
    height: 1em;
    width: 1em;
    text-indent: 1rem;
    text-indent: 1.5em;
    overflow: hidden;
    background-size: contain;
    background-repeat: no-repeat;
@@ -219,7 +222,7 @@
    display: none;
}

a {
a, .close:hover, .hide:hover {
    color: #337ab7;
    text-decoration: none;
    cursor: pointer;

 map.html

@@ -11,10 +11,10 @@
<body>
<div id="map">
<div id="title" class="ol-unselectable ol-control"><a href="/">TTSS Kraków</a></div>
<div id="fail" class="ol-unselectable ol-control"><span></span> <span class="close">×</span></div>
<div id="fail" class="ol-unselectable ol-control"><span></span> <span class="close" title="Zamknij">×</span></div>
<div id="menu" class="ol-unselectable ol-control">
<button id="find" type="button" title="Find"><span class="icon-zoom normal-icon reverse"></span></button>
<button id="track" type="button" title="GPS"><span class="icon-loc reverse"></span></button>
<button id="find" type="button" title="Szukaj"><span class="icon-zoom small reverse">Szukaj</span></button>
<button id="track" type="button" title="Namierz"><span class="icon-loc reverse">Namierz</span></button>
</div>
</div>
<div id="panel"></div>

 map.js

@@ -82,12 +82,12 @@
    this._element = element;
    this._element.classList.add('panel');
    
    this._hide = addParaWithText(this._element, '▶');
    this._hide = addElementWithText(this._element, 'a', '▶');
    this._hide.title = lang.action_collapse;
    this._hide.className = 'hide';
    this._hide.addEventListener('click', this.toggleExpanded.bind(this));
    
    this._close = addParaWithText(this._element, '×');
    this._close = addElementWithText(this._element, 'a', '×');
    this._close.title = lang.action_close;
    this._close.className = 'close';
    this._close.addEventListener('click', this.close.bind(this));
@@ -675,7 +675,7 @@
        })}, 10);
    };
    showOnMapElement.addEventListener('click', showOnMapFunction);
    showOnMapElement.className = 'icon-pin addon-icon';
    showOnMapElement.className = 'icon icon-pin';
    showOnMapElement.title = lang.show_on_map;
    
    if(additional) {

			@@ -17,6 +17,19 @@
			right: auto;
			}

			.close, .hide {
			float: right;
			cursor: pointer;
			font-size: 1.5em;
			padding-left: 1em;
			color: black;
			}
			#fail .close {
			font-size: inherit;
			height: 1em;
			color: black;
			}

			.panel {
			opacity: .85;
			color: black;
			@@ -37,9 +50,9 @@
			.panel.expanded {
			right: 0;
			}

			.panel .hide {
			display: none;
			padding: 0px 1em;
			}
			.panel.enabled .hide {
			display: block;
			@@ -77,17 +90,6 @@
			margin-right: 10px;
			}
			}

			.close, .hide {
			float: right;
			cursor: pointer;
			font-size: 20px;
			padding: 0px 10px;
			}
			#fail .close {
			font-size: inherit;
			height: 1em;
			}
			.panel .type {
			padding-bottom: 0;
			color: #444;
			@@ -99,6 +101,13 @@
			}
			.panel .name {
			font-weight: bold;
			padding-bottom: 0;
			}
			.panel .name .icon {
			margin: -5px 0.2rem 0;
			text-indent: 2rem;
			font-size: 1.4rem;
			vertical-align: top;
			}
			.panel .vehicleInfo {
			font-size: 21px;
			@@ -135,17 +144,11 @@
			float: right;
			}

			.addon-icon {
			margin-left: 0.2rem;
			}
			.normal-icon, .addon-icon {
			font-size: 1rem;
			}
			.icon, .icon-loc, .icon-pin, .icon-zoom {
			display: inline-block;
			height: 1em;
			width: 1em;
			text-indent: 1rem;
			text-indent: 1.5em;
			overflow: hidden;
			background-size: contain;
			background-repeat: no-repeat;
			@@ -219,7 +222,7 @@
			display: none;
			}

			a {
			a, .close:hover, .hide:hover {
			color: #337ab7;
			text-decoration: none;
			cursor: pointer;

			@@ -11,10 +11,10 @@
			<body>
			<div id="map">
			<div id="title" class="ol-unselectable ol-control"><a href="/">TTSS Kraków</a></div>
			<div id="fail" class="ol-unselectable ol-control"><span></span> <span class="close">×</span></div>
			<div id="fail" class="ol-unselectable ol-control"><span></span> <span class="close" title="Zamknij">×</span></div>
			<div id="menu" class="ol-unselectable ol-control">
			<button id="find" type="button" title="Find"><span class="icon-zoom normal-icon reverse"></span></button>
			<button id="track" type="button" title="GPS"><span class="icon-loc reverse"></span></button>
			<button id="find" type="button" title="Szukaj"><span class="icon-zoom small reverse">Szukaj</span></button>
			<button id="track" type="button" title="Namierz"><span class="icon-loc reverse">Namierz</span></button>
			</div>
			</div>
			<div id="panel"></div>

			@@ -82,12 +82,12 @@
			this._element = element;
			this._element.classList.add('panel');

			this._hide = addParaWithText(this._element, '▶');
			this._hide = addElementWithText(this._element, 'a', '▶');
			this._hide.title = lang.action_collapse;
			this._hide.className = 'hide';
			this._hide.addEventListener('click', this.toggleExpanded.bind(this));

			this._close = addParaWithText(this._element, '×');
			this._close = addElementWithText(this._element, 'a', '×');
			this._close.title = lang.action_close;
			this._close.className = 'close';
			this._close.addEventListener('click', this.close.bind(this));
			@@ -675,7 +675,7 @@
			})}, 10);
			};
			showOnMapElement.addEventListener('click', showOnMapFunction);
			showOnMapElement.className = 'icon-pin addon-icon';
			showOnMapElement.className = 'icon icon-pin';
			showOnMapElement.title = lang.show_on_map;

			if(additional) {