# HG changeset patch # User Rob Canning # Date 1405464584 -3600 # Node ID e4db7d4d1d08fd2582450d8de14ad9ae5b0fecf9 # Parent 0bcba76683f21b3d4757d5a3973b51e7dad003e8 major UI fixes for martin version interface diff -r 0bcba76683f2 -r e4db7d4d1d08 www/martin/css/chat-tablet.css --- a/www/martin/css/chat-tablet.css Tue Jul 15 17:48:35 2014 +0100 +++ b/www/martin/css/chat-tablet.css Tue Jul 15 23:49:44 2014 +0100 @@ -6,7 +6,7 @@ #chat { position: relative; border: 0px solid #ccc; - background: black; + background: white; border-radius: 15px; } #nickname, @@ -16,11 +16,11 @@ z-index: 100; left: 0; top: 0; - background: black; + background: white; text-align: center; width: 250px; font: 15px Georgia; - color: white; + color: black; display: block; } #nickname .wrap, @@ -30,40 +30,40 @@ #nickname #nickname-err { color: #8b0000; font-size: 12px; visibility: hidden; } .connected #connecting { display: none; } .nickname-set #nickname { display: none; } -#messages { height: 100px; background: black; } -#messages em { color: white; } +#messages { height: 100px; background: white; } +#messages em { color: black; } #messages p { padding: 0; margin: 0; font: 14px Helvetica, Arial; padding: 0px 10px; - color: white; + color: black; } #messages p b { display: inline-block; padding-right: 10px; - color: white; + color: black; } #messages p:nth-child(even) { - background: black; - color: white; + background: white; + color: black; } #messages #nicknames { - background: black; + background: white; padding: 2px 4px 4px; font: 11px Helvetica; - color: white; + color: black; } #messages #nicknames span { color: #000; - color: white; + color: black; } #messages #nicknames b { display: inline-block; - background: black; + background: white; margin-right: 5px; - color: yellow; + color: black; } #messages #lines { height: 80px; @@ -98,7 +98,7 @@ -webkit-border-radius: 3px; } #send-message { - background: black; + background: white; position: relative; border-radius:5px; } @@ -109,8 +109,8 @@ line-height: 20px; vertical-align: middle; width: 200px; - background:black; - color: yellow; + background:white; + color: black; border-radius:5px; border: 1px solid white; } diff -r 0bcba76683f2 -r e4db7d4d1d08 www/martin/css/chat.css --- a/www/martin/css/chat.css Tue Jul 15 17:48:35 2014 +0100 +++ b/www/martin/css/chat.css Tue Jul 15 23:49:44 2014 +0100 @@ -6,7 +6,7 @@ #chat { position: relative; border: 0px solid #ccc; - background: black; + background: white; border-radius: 15px; } #nickname, @@ -16,7 +16,7 @@ z-index: 100; left: 0; top: 0; - background: black; + background: white; text-align: center; width: 350px; font: 15px Georgia; @@ -49,7 +49,7 @@ #messages { height: 160px; !background: #eee; - background: black; + background: white; } #messages em { !text-shadow: 0 1px 0 #fff; @@ -70,22 +70,22 @@ } #messages p:nth-child(even) { !background: #fafafa; - background: black; + background: white; color: white; } #messages #nicknames { - background: black; + background: white; padding: 2px 4px 4px; font: 11px Helvetica; color: white; } #messages #nicknames span { - color: #000; + color: white; } #messages #nicknames b { display: inline-block; - background: black; + background: white; margin-right: 5px; color: yellow; } diff -r 0bcba76683f2 -r e4db7d4d1d08 www/martin/css/nodescore.css --- a/www/martin/css/nodescore.css Tue Jul 15 17:48:35 2014 +0100 +++ b/www/martin/css/nodescore.css Tue Jul 15 23:49:44 2014 +0100 @@ -1,6 +1,4 @@ body{ - !background-color: white; - !color: white; font: 12px Helvetica, Arial; margin-left:0px; height:100%; @@ -9,36 +7,30 @@ h3,h4,h5,h6 { width: 400px; - ! background-color: white; display: inline; color: #666; z-index: 2; } -h1{ !background-color: black; - !color:white; +h1{ font: 44px Helvetica, Arial; - } -h2 { font: 28px Helvetica, Arial; - !color:white +h2 { font: 18px Helvetica, Arial; } h3{ font: 12px Helvetica, Arial; - !color:white } -h4{ !background-color: black; +h4{ font: 19px Helvetica, Arial; text-align: center; margin-left:auto; margin-right:auto; - !color:white } a:link { color:#666;} a:visited { color: #666;} a:hover { color: black; background-color:orange; } -a:active { color: black;background-color:white; } +a:active { color: black; background-color:white; } ul, li, h4, h3, h2, h1, p{ padding:0; @@ -48,14 +40,12 @@ .outermaster{ float:right; - !margin-top:50px; height: 580px; width: 1020px; border-radius: 15px; position: absolute; - top:130px; + top:30px; left: 3000px; - !+filter: invert(100%); margin: 0 auto; } @@ -64,20 +54,20 @@ width: 100%; text-align: center; border-radius: 15px; - background-color:black; border: 0px solid blue; - position: absolute; - color: white; - top: 0px; - +filter: invert(100%); - z-index:1111; + !position: absolute; + !top: 10px; + !z-index:1111; + min-height:470px; margin-left: 0px; - padding:0px; + padding-top:20px; } + + .xunit{ display:block; -background:black; + width: 155px; height: 70px; padding: 5px 5px 5px 5px; @@ -86,15 +76,14 @@ .precd{ height:70px; -color:white; + } #info{ position: absolute; -border: 0px solid red; border-radius:15px; -top: 450px; -!padding: 5px 5px 5px 5px; +float:bottom; +!top: 450px; height: 135px; width: 100%; } @@ -129,7 +118,7 @@ margin-left:6%; border: 1px solid gray; padding: 5px 5px 5px 5px ; - background: black; + opacity:1; float:left; } @@ -146,28 +135,15 @@ float:right; font-size:1em; } + #preview img{margin-top:15px; width:300px; background:transparent; position: relative; top:-20px;} -#timeinfo{ - border-radius: 15px; - height:80px; - width: 95%; - margin: 0px; - padding: 5px 5px 5px 5px ; - background: transparent; - position:relative; - top:30px; -} #remainingtime{ padding:0; margin:0; - font-size:1.4em; - color:white; - position:relative; - left:40px; - top:90px; - width:120px; + font-size:2.6em; + width:180px; float:left; background-color:transparent; } @@ -180,7 +156,6 @@ border: 0px solid gray; position:absolute; top: 0px; - background: black; opacity:1; } @@ -188,31 +163,27 @@ border-radius: 15px; border: 1px solid blue; padding: 1px 1px 1px 1px ; - background: black; + width: 99%; height: 490px; } .svgmusic { padding:0px; - border: 1px solid gray; + border: 1px dashed gray; display:block; border-radius: 15px; margin: 0px; width: 100%; height: 445px; + min-height: 445px; + } -svg { background-color: black; width:1000px; height:330px; display:block;} -line { stroke: white; } -text { fill: white;} -path { stroke: white; fill: white; } -rect { fill: white; } -polygon { fill: white; } -circle { stroke: white; } - -#thesquare{ position:absolute; width:700px; } +#thesquare{ position:absolute; + width:700px; + } .magicsquare { border: 1px solid white; padding: 2px 2px 2px 2px; @@ -220,7 +191,6 @@ height: 100px; float: left; font-size: 3em; - color:white; text-align:center } @@ -251,18 +221,16 @@ } #datetime{ - display:table-cell; - vertical-align:middle; + float:left; width:90px; - font-size:0.9em; color: white; + font-size:0.9em; text-align:center; background-color: transparent; } #current{ font-size:1.7em; - font-weight: bold; - color: white; + font-weight: bold; background-color: transparent; z-index: 3; opacity: 0.8; @@ -270,76 +238,38 @@ } #client_latency{ + position:absolute; + right:100px; + top:1px; background:transparent; - width:135px; + float:right; font-size:1em; - color: white; - z-index: 1; - padding: 3px 3px 3px 3px; - opacity: 0.8; - position:relative; - top: -30px; + padding:0px; } -.metrocase { - !float:right; - border-radius: 5px; - !position: relative; - !right: 20px; - !top:-25px; - width: 60px; - height: 30px; - color: black; - text-align: center; - font-size: 4em; font-color: black; - background: transparent; - z-index: 2; - border: 1px solid white; -} -#metronome0 { position: absolute; width: 60px; height: 30px; border-radius: 5px; float:left; } -#metronome1 { width: 50px; height: 40px; border-radius: 30px; float:left; } -#metronome2 { width: 50px; height: 40px; border-radius: 30px; float:left; } -#metronome3 { width: 50px; height: 40px; border-radius: 30px; float:left; } #fluid {} .fluid-img{ height:50%; width:50%; } .clear { clear:both; } #midcomms{ -!color:white; -width:160px; -height:40px; -background-color:transparent; -border: 0px solid yellow; -float:left; +!width:160px; +!height:40px; +!background-color:transparent; + +!float:left; } #client_chronometer{ -position:fixed; -right:70px; -bottom: 10px; +float:right; font-size:3em; - - !display:table-cell; - !vertical-align:middle; - !border-radius: 15px; - !float:right; - !background-color: transparent; - !color: white; - !font-size: 3.7em; - !text-align: center; - !opacity:0.8; - !position: relative; - !left: 10px; - !bottom:64px; - !width: 210px; - !z-position: 2; +margin-right:50px; } #transport{ position:relative; - padding: 20px; + padding: 0px; bottom:40px; } @@ -364,6 +294,7 @@ position:relative; top:-5px; left:20px; + } #count { @@ -378,6 +309,7 @@ background:transparent; float:left; display:inline; + min-height:70px; } #totalcountdown { @@ -410,14 +342,15 @@ font-size:3em; text-align:center; !background-color:black; - border:1px solid white; + border:1px solid black; margin-left:auto; margin-right:auto; display:table-cell; vertical-align:middle; border-radius: 15px; } -!#wide { !background-color:white; +!#wide { + width:5600px; height:90%; border: 1px solid black; padding: 16px 10px 16px 0px; display:inline; } @@ -425,7 +358,7 @@ !background-color:black; margin-top:4px; height: 810px; - width: 6700px; + width: 4400px; border-radius: 15px; position: relative; +filter: invert(100%); @@ -434,30 +367,29 @@ #map { width: 1250px; position:absolute; - left: -0px; + top:30px; + left: 0px; height: 760px; padding: 20px 50px 20px 50px; - border: 1px solid gray; + !border: 1px dashed gray; !background-color: black; } #outerpreview { - !display:inline; - !float:left; height:700px; width: 1200px; padding: 0; - border: 1px solid gray; - background-color: black; - margin: 0 auto; + !border: 1px solid red; + background-color: white; padding: 50px 50px 50px 50px; - position: relative; left:-1200px; + position: relative; + left:1500px; } -.pview { border: 1px solid red; height:49%; width:49%; float:left; background:gray; z-index:-100; } +.pview { border: 1px dashed gray; height:45%; width:49%; float:left; background:white; z-index:-100; } .pviewmusic { position:relative; top:60px; } -.middle { float: left; width: 10.8%; height: 11%; padding: 0; border: 0; margin: 0.33%; - border: 1px solid red; background:gray; border-radius:10px; } /* 100 = 6 * widt\h + 12 * margin */ +.middle { float: left; width: 10.8%; height: 9%; padding: 0; border: 0; margin: 0.33%; + border: 1px solid red; background:white; border-radius:10px; } /* 100 = 6 * widt\h + 12 * margin */ .middle p { font-size:2.5em; position:relative; left: 0px; opacity:0.3; color:blue; display:block;} .middle img { padding: 20px 0px 0px 0px; position:relative; top:-30px;} @@ -465,7 +397,7 @@ .middle:hover img { z-index:1000; width:500px; - background-color: orange; + background-color: white; !position: absolute; border: 0px solid red; border-radius:20px; @@ -478,10 +410,12 @@ opacity:1; } -.inner-0, .inner-1, .inner-2, .inner-3 { font-size:2.5em; float: left; width: 47%; height: 50%; - padding: 0; border: 1px solid white; margin: 0; - text-align: center; font-weight: bold; - position:relative; top: -110px; } +.inner-0, .inner-1, .inner-2, .inner-3 { + font-size:2.5em; float: left; width: 47%; height: 50%; + padding: 0; border: 1px solid white; margin: 0; + text-align: center; font-weight: bold; + position:relative; top: -110px; +} .inner-0 { background-color: transparent; } .inner-1 { background-color: transparent; } @@ -492,16 +426,81 @@ width:10%; background:transparent; height:40px; padding: 5px 5px 5px 5px; text-align:center; } -.unitseq { display:inline; float:right; - width:10%; background:transparent; height:40px; - padding: 5px 5px 5px 5px; text-align:center; - font-size:2em;} +.unitseq { + !position:absolute; + !top:0px; + !right:10px; + padding: 1px 1px 1px 1px; + text-align:center; + font-size:1em; +} + +.head{ +!border: 1px solid black; +background:gray; +opacity:0.8; +padding:10px; +height:30px; +position:fixed; +top:0px; +left:20px; +width:100%; +} + +.footx{ + background:gray; + opacity:0.8; + padding:10px; + height:30px; + position:fixed; + bottom:0px; + left:20px; + width:100%; +} + + +#indexpagetitle{ + font-size:1.2em; + float:left; + margin-left:30%; + padding:0; + margin-bottom:0px; +} + +#setPart{ + float:right; + margin-right:50px; + font-size:2em; +} + + +.metrocase { + margin-left:20px; + float:left; + border-radius: 5px; + width: 60px; + height:30px; + color: black; + text-align: center; + font-size: 4em; + border: 1px solid white; +} + +#metronome0 { width: 60px; height: 30px; border-radius: 5px; float:left; } + + + + + + #links {position:absolute; bottom:150px; left: 800px; width:900px;} -!#transect {position:absolute; bottom:180px; left: 1300px; width:600px;} -.tportpop { !background-color:black; +#transect {float:left; font-size:2em; padding:0px;} + +.tportpop { width:200px; height: 90px; margin: 1px solid white; position:relative; left:300px; top:60px; border: 1px solid green; - border-radius: 10px; padding: 5px; } \ No newline at end of file + border-radius: 10px; padding: 5px; +} \ No newline at end of file diff -r 0bcba76683f2 -r e4db7d4d1d08 www/martin/css/svg-stylesheet.css --- a/www/martin/css/svg-stylesheet.css Tue Jul 15 17:48:35 2014 +0100 +++ b/www/martin/css/svg-stylesheet.css Tue Jul 15 23:49:44 2014 +0100 @@ -1,4 +1,4 @@ -svg { background-color: black; width:1000px; height:330px; display:block;} +svg { background-color: red; width:1000px; height:330px; display:block;} line { stroke: white; } text { fill: white;} path { stroke: white; fill: white; } diff -r 0bcba76683f2 -r e4db7d4d1d08 www/martin/index.html --- a/www/martin/index.html Tue Jul 15 17:48:35 2014 +0100 +++ b/www/martin/index.html Tue Jul 15 23:49:44 2014 +0100 @@ -65,7 +65,7 @@
-
+
@@ -74,18 +74,18 @@
-
+
-
+
-
+
@@ -112,104 +112,116 @@
-
+
+
+
-
-
-
-
-

LOGIN:

+
+
+
+ +

LOGIN:

-

Nickname already in use

+

Nickname already in use

+ +
+
+
Connecting to socket.io server
+
+
+
+
+
+
+ +
-
-
Connecting to socket.io server
+
+ +
+
+
waiting...
+
+
-
-
-
+ +
+ next in: +
.
-
- - -
+ + + +
+ + + +
+
+ +
+
+ + + + + +
-
+ -
-
-
-
-
- -
- next in: -
.
-
+ + + +
+
+
+
+
+
Latency: 0ms
+
00:00:00.0
+
+ +
+
..
- -
-
- -
Latency: 0ms
-
- - -
- - -
- -
-
- +
+ pathways - for guitar, percussion & electronics
- -
- -
- - -
- - - - -
+
+ +
+ + + -
pathways - for guitar, percussion & electronics -
- -
..
-
00:00:00.0
- -
-
-
+ + +
+ diff -r 0bcba76683f2 -r e4db7d4d1d08 www/martin/js/controlseq.js --- a/www/martin/js/controlseq.js Tue Jul 15 17:48:35 2014 +0100 +++ b/www/martin/js/controlseq.js Tue Jul 15 23:49:44 2014 +0100 @@ -54,9 +54,9 @@ function countinCtrl(groupID, currentseconds,mm,text,colour,background,unit){ //console.log("#count"+groupID) // all counts to control page - $("#counttitle"+groupID).css('color','white'); + $("#counttitle"+groupID).css('color','black'); $("#counttitle"+groupID).text(text); - $("#count"+groupID).text(currentseconds).css('color','white'); + $("#count"+groupID).text(currentseconds).css('color','black'); document.getElementById("count"+groupID).style.color=colour; } diff -r 0bcba76683f2 -r e4db7d4d1d08 www/martin/js/nodescore-client.js --- a/www/martin/js/nodescore-client.js Tue Jul 15 17:48:35 2014 +0100 +++ b/www/martin/js/nodescore-client.js Tue Jul 15 23:49:44 2014 +0100 @@ -254,4 +254,4 @@ function clear () { $('#message').val('').focus(); }; -}); \ No newline at end of file +}); diff -r 0bcba76683f2 -r e4db7d4d1d08 www/martin/js/nodescore-slides.js --- a/www/martin/js/nodescore-slides.js Tue Jul 15 17:48:35 2014 +0100 +++ b/www/martin/js/nodescore-slides.js Tue Jul 15 23:49:44 2014 +0100 @@ -46,7 +46,7 @@ function countinClient(groupID, currentseconds,mm,text,colour,background,unit){ var groupPage=document.getElementById('group').value if (groupID == groupPage) { - $("#counttitle").css('color','white'); + $("#counttitle").css('color','black'); $("#counttitle").text(text); $("#count").text(currentseconds); document.getElementById("count").style.color=colour; @@ -224,4 +224,4 @@ function clear () { $('#message').val('').focus(); }; -}); \ No newline at end of file +}); diff -r 0bcba76683f2 -r e4db7d4d1d08 www/martin/svg/svg-stylesheet.css --- a/www/martin/svg/svg-stylesheet.css Tue Jul 15 17:48:35 2014 +0100 +++ b/www/martin/svg/svg-stylesheet.css Tue Jul 15 23:49:44 2014 +0100 @@ -1,8 +1,8 @@ -svg { background-color: black; width:1000px; height:330px; display:block;} -line { stroke: white; } -text { fill: white;} -path { stroke: white; fill: white; } -rect { fill: white; } -polygon { fill: white; } -circle { stroke: white; } +svg { width:1000px; height:330px; display:block;} +!line { stroke: white; } +!text { fill: white;} +!path { stroke: white; fill: white; } +!rect { fill: white; } +!polygon { fill: white; } +!circle { stroke: white; } diff -r 0bcba76683f2 -r e4db7d4d1d08 www/martin/transport.html --- a/www/martin/transport.html Tue Jul 15 17:48:35 2014 +0100 +++ b/www/martin/transport.html Tue Jul 15 23:49:44 2014 +0100 @@ -18,18 +18,6 @@ - - - -
-
..
-
..
-
-
00:00:00.0