mirror of
https://github.com/webbukkit/dynmap.git
synced 2024-09-25 12:22:39 +02:00
many ui iprovements by lechd
This commit is contained in:
Arthur Mayer
parent
77539522f0
commit
22cc46f4b8
@ -1,15 +1,29 @@
|
||||
#chat {
|
||||
position:absolute;
|
||||
bottom:14px;
|
||||
bottom:0px;
|
||||
left:14px;
|
||||
border: 1px solid rgba(0,0,0,0.5);
|
||||
background: rgba(0, 0, 0, 0.6);
|
||||
|
||||
border-color: rgba(0,0,0,0.5);
|
||||
background: rgba(0,0,0,0.6);
|
||||
|
||||
border-style: solid;
|
||||
border-width: 1px 1px 0px 1px;
|
||||
|
||||
-moz-box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.4);
|
||||
-webkit-box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.4);
|
||||
-o-box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.4);
|
||||
|
||||
-moz-border-radius: 3px 3px 0px 0px;
|
||||
-webkit-border-radius: 3px 3px 0px 0px;
|
||||
-o-border-radius: 3px 3px 0px 0px;
|
||||
|
||||
box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.4);
|
||||
border-radius: 3px 3px 0px 0px;
|
||||
}
|
||||
#chatcursor {
|
||||
position:absolute;
|
||||
left:5px;
|
||||
bottom:5px;
|
||||
font-size:10px;
|
||||
color: white;
|
||||
padding:0px;
|
||||
}
|
||||
@ -17,8 +31,6 @@
|
||||
margin:4px;
|
||||
width:608px;
|
||||
height:12px;
|
||||
font-family:sans-serif;
|
||||
font-size:10px;
|
||||
padding:1px;
|
||||
padding-left:15px;
|
||||
color: white;
|
||||
@ -29,11 +41,8 @@
|
||||
margin:4px 4px 0px 4px;
|
||||
width:622px;
|
||||
max-height:198px;
|
||||
font-family:sans-serif;
|
||||
font-size: 10px;
|
||||
padding:1px;
|
||||
color: white;
|
||||
background: rgba(0, 0, 0, 0.6);
|
||||
overflow:hidden;
|
||||
display:none;
|
||||
}
|
||||
@ -42,9 +51,8 @@
|
||||
left:0px;
|
||||
bottom:0px;
|
||||
max-height:200px;
|
||||
font-family:sans-serif;
|
||||
font-size: 10px;
|
||||
color: white;
|
||||
font-weight:bold;
|
||||
}
|
||||
.messageicon {
|
||||
position:relative;
|
||||
|
||||
BIN
web/compass.png
BIN
web/compass.png
Binary file not shown.
|
Before Width: | Height: | Size: 5.7 KiB After Width: | Height: | Size: 5.5 KiB |
@ -19,7 +19,7 @@ body {
|
||||
padding: 0px ;
|
||||
}
|
||||
|
||||
.dynmap .map .tile img {
|
||||
.dynmap .map .tile img, img {
|
||||
image-rendering: -moz-crisp-edges;
|
||||
-ms-interpolation-mode: nearest-neighbor;
|
||||
}
|
||||
@ -59,7 +59,7 @@ body {
|
||||
.dynmap > .map {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: #000;
|
||||
background: #000;
|
||||
}
|
||||
|
||||
/* Map Controls */
|
||||
@ -77,27 +77,29 @@ body {
|
||||
|
||||
|
||||
/*******************
|
||||
* Alerts
|
||||
* Alerts are pretty.
|
||||
*/
|
||||
|
||||
.alertbox {
|
||||
position: fixed;
|
||||
width: 50%;
|
||||
z-index: 999;
|
||||
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
|
||||
text-align: center;
|
||||
color: #a00;
|
||||
background-color: #fff;
|
||||
font-size: 16px;
|
||||
font-weight: bold;
|
||||
|
||||
color: #fff;
|
||||
background: #c00;
|
||||
|
||||
border-color: #a00;
|
||||
|
||||
margin: auto;
|
||||
padding: 5px;
|
||||
|
||||
border: 1px solid #a00;
|
||||
box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.3);
|
||||
border-radius: 0 0 3px 3px;
|
||||
padding: 8px;
|
||||
}
|
||||
|
||||
|
||||
@ -118,6 +120,25 @@ body {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.alertbox,
|
||||
.largeclock {
|
||||
background: rgba(0,0,0,0.6);
|
||||
|
||||
border-style: solid;
|
||||
border-width: 0px 1px 1px 1px;
|
||||
|
||||
-moz-box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.4);
|
||||
-webkit-box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.4);
|
||||
-o-box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.4);
|
||||
|
||||
-moz-border-radius: 0 0 3px 3px;
|
||||
-webkit-border-radius: 0 0 3px 3px;
|
||||
-o-border-radius: 0 0 3px 3px;
|
||||
|
||||
box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.4);
|
||||
border-radius: 0 0 3px 3px;
|
||||
}
|
||||
|
||||
/*******************
|
||||
* sidebar panels
|
||||
*/
|
||||
@ -126,11 +147,12 @@ body {
|
||||
|
||||
display: block;
|
||||
position: absolute;
|
||||
z-index: 120;
|
||||
|
||||
top: 0px;
|
||||
right: 0px;
|
||||
|
||||
width: 250px;
|
||||
width: 200px;
|
||||
height: 100%;
|
||||
|
||||
background: rgb(0,0,0); /* FU IE */
|
||||
@ -139,12 +161,12 @@ body {
|
||||
|
||||
border-left: 1px solid rgba(0,0,0,0.5);
|
||||
|
||||
margin-right: -253px;
|
||||
/*margin-right: 251px;*/
|
||||
margin-right: -203px;
|
||||
|
||||
-moz-transition: all 0.6s ease-in-out;
|
||||
-webkit-transition: all 0.6s ease-in-out;
|
||||
-o-transition: all 0.6s ease-in-out;
|
||||
|
||||
transition: all 0.6s ease-in-out;
|
||||
}
|
||||
|
||||
@ -152,6 +174,7 @@ body {
|
||||
|
||||
display: block;
|
||||
position: fixed;
|
||||
z-index: 110;
|
||||
|
||||
right: 0px;
|
||||
top: 0px;
|
||||
@ -171,22 +194,10 @@ body {
|
||||
-moz-transition: all 0.6s ease-in-out;
|
||||
-webkit-transition: all 0.6s ease-in-out;
|
||||
-o-transition: all 0.6s ease-in-out;
|
||||
|
||||
transition: all 0.6s ease-in-out;
|
||||
}
|
||||
|
||||
.dynmap .sidebar .panel > .pin {
|
||||
position: absolute;
|
||||
right: 4px;
|
||||
top: 4px;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
background-image: url(window_unpinned.png);
|
||||
}
|
||||
|
||||
.dynmap .sidebar.pinned .panel > .pin {
|
||||
background-image: url(window_pinned.png);
|
||||
}
|
||||
|
||||
/* magic and metrics */
|
||||
|
||||
.dynmap .sidebar:hover,
|
||||
@ -203,6 +214,98 @@ body {
|
||||
right: -120px;
|
||||
}
|
||||
|
||||
/* pinning */
|
||||
|
||||
.dynmap .sidebar .panel > .pin {
|
||||
position: absolute;
|
||||
|
||||
right: 8px;
|
||||
top: 7px;
|
||||
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
|
||||
background-image: url(window_close.png);
|
||||
}
|
||||
|
||||
.dynmap .sidebar .panel > .pin:hover {
|
||||
background-image: url(window_pinned.png);
|
||||
}
|
||||
|
||||
.dynmap .sidebar.pinned .panel > .pin:hover {
|
||||
background-image: url(window_close.png);
|
||||
}
|
||||
|
||||
.dynmap .sidebar.pinned .panel > .pin {
|
||||
background-image: url(window_pinned.png);
|
||||
}
|
||||
|
||||
|
||||
/*******************
|
||||
* Sidebar clock style
|
||||
*/
|
||||
|
||||
/*.dynmap .panel .clock {
|
||||
display: inline-block;
|
||||
height: 16px;
|
||||
|
||||
font-weight: bold;
|
||||
background-repeat: no-repeat;
|
||||
padding-left: 20px;
|
||||
margin-left: 8px;
|
||||
}*/
|
||||
.clock {
|
||||
position:relative;
|
||||
bottom:12px;
|
||||
text-align:center;
|
||||
}
|
||||
|
||||
/*.clock.night {
|
||||
background-image: url(clock_night.png);
|
||||
color: #dff;
|
||||
}
|
||||
|
||||
.clock.day {
|
||||
background-image: url(clock_day.png);
|
||||
color: #fd3;
|
||||
}*/
|
||||
|
||||
.clock.night, clock.day {
|
||||
-moz-transition: all 8s 8s linear;
|
||||
-webkit-transition: all 8s 8s linear;
|
||||
-o-transition: all 8s 8s linear;
|
||||
transition: all 8s 8s linear;
|
||||
}
|
||||
|
||||
|
||||
/*******************
|
||||
* Large clock style
|
||||
*/
|
||||
|
||||
.largeclock {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
border-color: rgba(0,0,0,0.5);
|
||||
width: 150px;
|
||||
height: 60px;
|
||||
background: rgba(0,0,0,0.6);
|
||||
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
.timeofday {
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
|
||||
.timeofday.sun {
|
||||
background-image: url(sun.png);
|
||||
}
|
||||
|
||||
.timeofday.moon {
|
||||
background-image: url(moon.png);
|
||||
}
|
||||
|
||||
/*******************
|
||||
* map list-specific styling
|
||||
@ -256,7 +359,7 @@ body {
|
||||
|
||||
.dynmap .maplist .map > a {
|
||||
background-repeat: no-repeat;
|
||||
background-position:center;
|
||||
background-position: center;
|
||||
}
|
||||
|
||||
/*******************
|
||||
@ -281,7 +384,10 @@ body {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
/* may need to tweak this for canvas */
|
||||
.dynmap .playerlist .playerIcon img {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
}
|
||||
|
||||
.dynmap .playerlist .playerIcon > * {
|
||||
vertical-align: middle;
|
||||
@ -299,9 +405,11 @@ body {
|
||||
.dynmap .playerlist .player.following {
|
||||
background: rgba(128,128,128,0.5);
|
||||
border: 1px solid rgba(255,255,255,0.5);
|
||||
|
||||
border-radius: 3px;
|
||||
padding: 6px 2px;
|
||||
-moz-border-radius: 3px;
|
||||
|
||||
padding: 6px 2px;
|
||||
}
|
||||
|
||||
.dynmap .playerlist .player:hover .playericon {
|
||||
@ -316,3 +424,37 @@ body {
|
||||
.dynmap .playerlist .player:hover .playericon > * {
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
|
||||
/*******************
|
||||
* players on the map
|
||||
*/
|
||||
|
||||
.dynmap .playerName {
|
||||
color: #fff;
|
||||
background: rgba(0,0,0,0.6);
|
||||
padding: 2px;
|
||||
|
||||
-moz-border-radius: 3px;
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
|
||||
/*******************
|
||||
* Compass
|
||||
*/
|
||||
|
||||
.compass {
|
||||
display: block;
|
||||
position: absolute;
|
||||
z-index: 10;
|
||||
|
||||
height: 830px;
|
||||
width: 84px;
|
||||
|
||||
top: 10px;
|
||||
right: 32px;
|
||||
|
||||
background-repeat: no-repeat;
|
||||
background-image: url(compass.png);
|
||||
}
|
||||
25
web/map.js
25
web/map.js
@ -174,6 +174,19 @@ DynMap.prototype = {
|
||||
});
|
||||
});
|
||||
|
||||
// The clock
|
||||
var largeclock = $('<div/>')
|
||||
.addClass('largeclock')
|
||||
.appendTo(container);
|
||||
var clock = me.clock = clocks['timeofday'](
|
||||
$('<div/>')
|
||||
.appendTo(largeclock)
|
||||
);
|
||||
var clockdigital = me.clockdigital = clocks['digital'](
|
||||
$('<div/>')
|
||||
.appendTo(largeclock)
|
||||
);
|
||||
|
||||
// The Player List
|
||||
var playerlist;
|
||||
$('<fieldset/>')
|
||||
@ -181,19 +194,12 @@ DynMap.prototype = {
|
||||
.append(me.playerlist = playerlist = $('<ul/>').addClass('playerlist'))
|
||||
.appendTo(panel);
|
||||
|
||||
// The clock
|
||||
var clock = me.clock = clocks[me.options.clock](
|
||||
$('<div/>')
|
||||
.appendTo(panel)
|
||||
);
|
||||
|
||||
// The Compass
|
||||
var compass = me.compass = new MinecraftCompass(
|
||||
$('<div/>')
|
||||
.addClass('compass')
|
||||
.appendTo(panel)
|
||||
.appendTo(container)
|
||||
);
|
||||
compass.initialize();
|
||||
|
||||
// The chat
|
||||
if (me.options.showchat == 'modal') {
|
||||
@ -270,6 +276,7 @@ DynMap.prototype = {
|
||||
|
||||
me.lasttimestamp = update.timestamp;
|
||||
me.clock.setTime(update.servertime);
|
||||
me.clockdigital.setTime(update.servertime);
|
||||
|
||||
var typeVisibleMap = {};
|
||||
var newmarkers = {};
|
||||
@ -300,7 +307,7 @@ DynMap.prototype = {
|
||||
webchat: function() {
|
||||
if (!me.options.showchat)
|
||||
return;
|
||||
me.onPlayerChat('[WEB] ' + update.playerName, update.message);
|
||||
me.onPlayerChat('[WEB]' + update.playerName, update.message);
|
||||
}
|
||||
}, function(type) {
|
||||
console.log('Unknown type ', value, '!');
|
||||
|
||||
BIN
web/moon.png
BIN
web/moon.png
Binary file not shown.
|
Before Width: | Height: | Size: 3.1 KiB After Width: | Height: | Size: 3.2 KiB |
BIN
web/sun.png
BIN
web/sun.png
Binary file not shown.
|
Before Width: | Height: | Size: 5.1 KiB After Width: | Height: | Size: 5.2 KiB |
Loading…
Reference in New Issue
Block a user