Skip to content

Commit

Permalink
clean up interface
Browse files Browse the repository at this point in the history 
moved scales before arps
created fb_messagebar div enclosing message, help, title
  • Loading branch information
@deltadada
deltadada committed Sep 23, 2014
1 parent d55c1c5 commit a345cec
Show file tree
Hide file tree
Showing 4 changed files with 138 additions and 117 deletions.
3 changes: 3 additions & 0 deletions ScaleDictionary.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -200,6 +200,7 @@ var INTCLR_LYDAUG = ["i_root", "white","black","white","i_third","white","black"
var INTCLR_PENTMIN = ["i_root", "white","white","i_third","white","black","white","i_fifth","white","white","i_seventh","white"];
var INTCLR_PENTMAJ = ["i_root", "white","black","white","i_third","white","white","i_fifth","white","black","white","white"];
var INTCLR_PENTDOM = ["i_root", "white","black","white","i_third","white","white","i_fifth","white","white","black","white"];
var INTCLR_PENTMINMEL = ["i_root", "white","black","i_third","white","white","white","i_fifth","white","black","white","white"];


var SC_MAJOR = { "name" : "Ionian", "intnames": INTS_FLATS, "color" : INTCLR_IONIAN };
Expand All @@ -222,6 +223,7 @@ var SC_MINJAZZ = { "name" : "Jazz Minor", "intnames": INTS_FLATS, "color" : INT
var SC_PENTMIN = { "name" : "Minor Pentatonic", "intnames": INTS_FLATS, "color" : INTCLR_PENTMIN };
var SC_PENTMAJ = { "name" : "Major Pentatonic", "intnames": INTS_FLATS, "color" : INTCLR_PENTMAJ };
var SC_PENTDOM = { "name" : "Dominant Pentatonic", "intnames": INTS_FLATS, "color" : INTCLR_PENTDOM };
var SC_PENTMELMIN = { "name" : "Pentatonic Melodic Minor", "intnames": INTS_FLATS, "color" : INTCLR_PENTMINMEL };


var dictScales = {
Expand All @@ -243,6 +245,7 @@ var dictScales = {
"SC_PHRYGDOM": SC_PHRYGDOM,
"SC_LYDIANAUG": SC_LYDIANAUG,
"SC_MINNAT": SC_MINNAT,
"SC_PENTMELMIN": SC_PENTMELMIN,
//"SC_MINJAZZ": SC_MINJAZZ
};

Expand Down
4 changes: 2 additions & 2 deletions boxfrets.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -833,10 +833,10 @@ var populateNotegroupsUnabridged = function(){
//populateKeyWithUnabridgedNotegroups();
html += '<div id="ngTab_'+dictKeys[key].safename+'" class="tabs-nohdr">';
html += '<ul >';
html += '<li><a href="#tb_scales_'+dictKeys[key].safename+'">Scales</a></li>';
html += '<li><a href="#tb_arppegios_'+dictKeys[key].safename+'">Arpeggios</a></li>';
html += '<li><a href="#tb_scales_'+dictKeys[key].safename+'">Scales</a></li>';
html += '<li><a href="#tb_chords_'+dictKeys[key].safename+'">Chords</a></li>';
html += '</ul>';
html += '</ul>';

// ~~~~~~ arpeggios
html += '<div id="tb_arppegios_'+dictKeys[key].safename+'" class="tabs-nobg ngExchange">';
Expand Down
167 changes: 89 additions & 78 deletions fretboard.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,11 +4,11 @@
* { margin:0; padding:0; border-spacing:0; }
body { font-family:sans-serif; font-size:100%; }
table {table-layout: fixed; }
table#mainfretboard { position:absolute; top:120px; left:69px; border:1px solid red; }
table#mainfretboard { position:absolute; top: 60px; left:69px; border:1px solid red; }
/*table#mainfretboard tr td { border:1px solid black; font-size: 28px; width:46px; height:34px; text-align:center; }*/
table#mainfretboard tr td { border:1px solid black; display:inline-block; font-size: 28px; width:66px; height:34px; text-align:center; }
/* fretclone sits at z of 1 over main fretboard */
table#fretclone { position:absolute; top:100px; left:-5px; border-spacing:8px; }
table#fretclone { position:absolute; top: 40px; left:-5px; border-spacing:8px; }
/*table#fretclone tr td { margin: 0 2px; display:inline-block; border:2px solid transparent; background-color:transparent; font-size:18px; font-weight:bold; width:40px;height:24px; text-align:center; z-index:1; border-radius: 5px; }*/
table#fretclone tr td { margin: 0 12px; display:inline-block; border:2px solid transparent; background-color:transparent; font-size:18px; font-weight:bold; width:40px;height:24px; text-align:center; z-index:1; border-radius: 14px; }
table#fretclone tr td:hover { cursor:pointer; border-color: black !important; border-style: dotted !important; }
Expand Down Expand Up @@ -57,8 +57,23 @@ a:hover { color: #005580; text-decoration: underline; }
table#fretclone tr .fretpainter {background-color:#DADADA !important; border-color:#FFF !important; height:6px !important; border-radius:0px !important;}

div#main {width: 100%; min-width: 1356px; }
div#fretboard_container { height:340px; margin:10px; width: 1400; white-space:nowrap; }
#diagram_title { font-size:25px; font-weight:bold; margin:15px; display:block; padding:4px; border:0; width:auto; float:left; }
div#fretboard_container { height: 280px; /* margin:10px; */ width: 1400; white-space:nowrap; }

div#fretboard_container

.fb_messagebar{
text-align: right;
margin-top:12px;
margin-right: 120px;
color:#a5a5a5;
display:block;
width: inherit;
width:1289px;
}
#message {float:right; display: inline; padding-top: 6px;}
#btnHelp {float:right; padding:3px; width: 24px; height: 24px; font-weight:bold; border-radius: 5px; margin-left: 24px; background-color: white; border: #b5b5b5 solid 1px; }

#diagram_title { font-size:25px; font-weight:bold; margin:0 0 0 15px; display:block; padding:4px; border:0; width:auto; float:left; }

div.h_ctrl_cnt{ padding:10px; margin:0px 10px 0px 10px; }
div.h_ctrl { display:inline; margin-right: 12px; }
Expand All @@ -75,25 +90,21 @@ input.color_button { width:40px; border-radius: 5px; margin-left: 8px; }

#colorchooser { display:inline; }

#btnHelp {float:right; padding:3px; width: 24px; height: 24px; font-weight:bold; border-radius: 5px; margin-left: 8px; background-color: white; border: #b5b5b5 solid 1px; }


/*.helpText li {list-style-type: none; font-weight:normal;}*/
#form_controls { padding:10px; }

#checkanswer { display:none; }
#message { text-align: right;
margin-right: 22px;
color:#a5a5a5;
}

#examples ul { margin-left: 20px; }

/* jquery ui*/
.tabs-nohdr {
padding: 0px;
background: none;
border-width: 0px;
font-size: inherit;
font-size: inherit;



Expand All @@ -109,121 +120,121 @@ input.color_button { width:40px; border-radius: 5px; margin-left: 8px; }
.tabs-nohdr .ui-tabs-panel {
background: #FFF;
border-width: 0px 1px 1px 1px;
overflow:auto;
overflow:auto;
}
.tabs-nohdr .ui-tabs-anchor{
font-weight:normal;
font-weight:normal;
}
/* must be under tabs-nohdr */
div#notegroupsUnabridged {
font-size:12px;
width: 660px;
display:inline-block;
float:left;
font-size:12px;
width: 660px;
display:inline-block;
float:left;
}

/*div#notegroupsUnabridged2 {
font-size:12px;
width: 660px;
display:inline-block;
float:left;
font-size:12px;
width: 660px;
display:inline-block;
float:left;
}*/


#notegroupsKeysTab a{
font-weight:bold;
font-weight:bold;
}


#dashContainer{
border:#aaa thin solid;
padding:4px 12px 12px 12px;
display:inline-block;
float:left;
margin-left: 10px;
border-radius: 4px;
}
border:#aaa thin solid;
padding:4px 12px 12px 12px;
display:inline-block;
float:left;
margin-left: 10px;
border-radius: 4px;
}
#dashControls{
padding:8px;
height:24px;
}
padding:8px;
height:24px;
}
#dashControls input { padding:2px;}

#ngDashboard {
border:#aaa thin solid;
width: 588px;
height: 400px;
border:#aaa thin solid;
width: 588px;
height: 400px;

}

div.cNoteGroup{
float:left;
text-align:center;
font-size:14px;
font-weight: bold;
width:120px;
height:36px;
padding: 4px;
margin: 8px;
background:rgb(200,238,251);
border-bottom:#555 thin solid;
border-top:#FFF thin solid;
border-right:#FFF thin solid;
border-left:#FFF thin solid;
/*border-width: 0px 0px 1px 0px; */
float:left;
text-align:center;
font-size:14px;
font-weight: bold;
width:120px;
height:36px;
padding: 4px;
margin: 8px;
background:rgb(200,238,251);
border-bottom:#555 thin solid;
border-top:#FFF thin solid;
border-right:#FFF thin solid;
border-left:#FFF thin solid;
/*border-width: 0px 0px 1px 0px; */
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 4px;
}

div .ngUnabDiv{
float:left;
text-align:center;
width:220px;
padding: 6px;
margin: 2px;
background:rgb(200,238,251);
border:#555 thin solid;
border-width: 0px 0px 1px 0px;
float:left;
text-align:center;
width:220px;
padding: 6px;
margin: 2px;
background:rgb(200,238,251);
border:#555 thin solid;
border-width: 0px 0px 1px 0px;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 4px;
}

div .tabs-nobg .ui-tabs-panel {
overflow:hidden;
padding:5px;
}
overflow:hidden;
padding:5px;
}

.ui-draggable-helper{
background:#aaa;
z-index:999;
border:#F00 thin solid;
}
background:#aaa;
z-index:999;
border:#F00 thin solid;
}

ul .uNotegroup{
list-style:none;
border:#555 thin solid;
padding:3px;
margin: 2px;
}
list-style:none;
border:#555 thin solid;
padding:3px;
margin: 2px;
}

div .ngboxScale{
background:#ddfcc2;
background:#ddfcc2;
}

div .ngboxArp{
background:#faf5af;
background:#faf5af;
}

div .ngboxChd{
background:#cff6fd;
background:#cff6fd;
}
/* drag drop classes */
.ngExchange{}
span .drag{
background-color:rgb(153,153,153);
}
background-color:rgb(153,153,153);
}
.remove-drag-hover {
background-color: #ED4949 !important;
}
Expand Down Expand Up @@ -263,9 +274,9 @@ div#helpText.ui-dialog-content li{list-style-type:circle; font-weight:normal; fo
/* end jQuery dialog for help popup */

div .playing{
/*color:red;*/
border:rgb(255,0,0) thin solid;
/*//text-decoration:underline;
//background-color: rgb(255,102,153);*/
}
/*color:red;*/
border:rgb(255,0,0) thin solid;
/*//text-decoration:underline;
//background-color: rgb(255,102,153);*/
}
/*@media print { #form_controls { display:none; } }*/
Loading

0 comments on commit a345cec

Please sign in to comment.