Skip to content

Commit

Permalink
Altering main HTML, CSS and JavaScript to use Twitter Bootstrap.
Browse files Browse the repository at this point in the history
  • Loading branch information
@jwholdsworth
jwholdsworth committed May 11, 2013
1 parent 77872ad commit f39820b
Show file tree
Hide file tree
Showing 3 changed files with 101 additions and 107 deletions.
55 changes: 11 additions & 44 deletions css/jsprove.css
View file
@@ -1,16 +1,6 @@
body {
font:normal 0.8em Arial,sans-serif;
margin:0;
}

section, header {
display:block;
}

#tabs {
margin:60px 5px 5px 5px;
z-index:0;
overflow:hidden;
h1 {
line-height: 1;
float:none;
}

#input {
Expand Down Expand Up @@ -42,9 +32,8 @@ section, header {
font-weight:bold;
}

textarea, input[type=text] {
border:1px solid #aaa;
margin: 0 2px;
input, select, button {
width: auto;
}

abbr {
Expand All @@ -60,23 +49,6 @@ textarea {
font-size:12px;
}

h1 {
margin:0;
padding:10px;
background:#111;
color:#fff;
position:fixed;
width:100%;
text-align: center;
top:0;
z-index:2;
}

h2 {
margin:0;
padding:10px 0 5px 0;
}

#popup {
border:2px solid #090;
border-radius:5px;
Expand All @@ -89,15 +61,10 @@ h2 {
padding:4px;
}

#warning {
display:none;
border-radius:5px;
border:2px solid #900;
background-color:pink;
position:fixed;
padding:4px;
width:50%;
left:25%;
top:2%;
z-index:3;
.alert {
display: none;
position: fixed;
z-index: 3;
width: 50%;
left: 25%;
}
126 changes: 72 additions & 54 deletions index.html
View file
Expand Up @@ -4,24 +4,42 @@
<meta charset="utf-8" />
<meta name="description" content="Browser based Peal proving program by Paul Brook and James Holdsworth" />
<title>JSProve</title>
<link href="css/jsprove.css" rel="stylesheet" type="text/css" media="screen" />
<link href="css/jquery.css" rel="stylesheet" type="text/css" media="screen" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="css/bootstrap.min.css" rel="stylesheet" media="screen" />
<link href="css/bootstrap-responsive.min.css" rel="stylesheet" media="screen" />
<link href="css/jsprove.css" rel="stylesheet" media="screen" />

<!--link href="css/jquery.css" rel="stylesheet" type="text/css" media="screen" /-->
</head>
<body>
<header>
<h1>JSProve</h1>
</header>
<section class="alert">
<button type="button" class="close" data-dismiss="alert">&times;</button>
<div></div>
</section>

<div class="navbar">
<div class="navbar-inner">
<h1><a class="brand" href="#">JSProve</a></h1>
<ul class="nav">
<li><a href="https://github.com/jwholdsworth/JSProve">GitHub</a></li>
<li><a href="https://github.com/jwholdsworth/JSProve/archive/master.zip">Download</a></li>
</ul>
</div>
</div>

<noscript><p class="error">This application requires JavaScript to be enabled within your browser. Please enable it before continuing.</p></noscript>

<section id="tabs">
<ul>
<li><a href="#methods">Methods and Composition</a></li>
<li><a href="#calls">Calls</a></li>
<li><a href="#musicInput">Music</a></li>
<li><a href="#aboutJsprove">About</a></li>
<ul class="nav nav-tabs">
<li><a href="#methods" data-toggle="tab">Methods and Composition</a></li>
<li><a href="#calls" data-toggle="tab">Calls</a></li>
<li><a href="#musicInput" data-toggle="tab">Music</a></li>
<li><a href="#about" data-toggle="tab">About</a></li>
</ul>
<section id="input">
<section id="calls">
<section class="tab-content">
<section id="calls" class="tab-pane">
<h2>Calls</h2>
<table>
<table class="form-horizontal">
<tr>
<th>Symbol</th><th>Notation</th><th>Location</th>
</tr>
Expand All @@ -36,43 +54,52 @@ <h2>Calls</h2>
<td><select class="callLocation" name="callLocation1" id="callLocation1"><option value="le">Lead End</option><option value="hl">Half Lead</option></select></td>
</tr>
</table>
<input type="button" value="Add more calls" id="btnAddMoreCalls" />
<input type="button" value="Add more calls" id="btnAddMoreCalls" class="btn btn-primary" />
</section>
<section id="musicInput">
<section id="musicInput" class="tab-pane">
<h2>Music</h2>
Enter your own music, e.g. ****4678 for rows ending in 4678. One entry per line please.<br />JSProve will count the 4-bell runs for you.<br />
<textarea id="userMusicList" rows="5" cols="40"></textarea>
</section>
<section id="methods">
<h2>Methods</h2>
<div>
<select name="methodRank" id="methodRank">
<option value="6">Minor</option>
<option value="8" selected="selected">Major</option>
<option value="10">Royal</option>
<option value="12">Maximus</option>
</select>
<!--input type="button" value="Add Method" id="moreMethods" /-->
<select name="class" id="class">
<option value="D">Delight</option>
<option value="P">Plain</option>
<option value="S" selected="selected">Surprise</option>
<option value="T">Treble Bob</option>
</select>
<input type="button" value="Load Method from Library" id="searchMethod" /> <input type="button" value="+" id="moreMethods" />
</div>
<div id="methodList"></div>
<section id="methods" class="tab-pane">
<section id="input">
<h2>Methods</h2>
<div class="form-horizontal">
<select name="methodRank" id="methodRank">
<option value="6">Minor</option>
<option value="8" selected="selected">Major</option>
<option value="10">Royal</option>
<option value="12">Maximus</option>
</select>
<!--input type="button" value="Add Method" id="moreMethods" /-->
<select name="class" id="class">
<option value="D">Delight</option>
<option value="P">Plain</option>
<option value="S" selected="selected">Surprise</option>
<option value="T">Treble Bob</option>
</select>
<input type="button" value="Load Method from Library" id="searchMethod" class="btn btn-primary" /> <input type="button" value="+" id="moreMethods" class="btn btn-success" />
</div>
<div id="methodList" class="form-horizontal"></div>

<h2>Composition</h2>
<div><label for="shorthand"><abbr title="For single method compositions only. E.g. mhwvf">Shorthand</abbr> (uses first method from selection above)</label><br /><input type="text" value="hhh" name="shorthand" id="shorthand" size="60" /> <input type="button" id="generateShorthand" value="Generate" class="btn btn-primary" /></div>
<div><label for="liveProve"><abbr title="Proves for every keystroke. Not great on slower machines.">Live Prove</abbr></label><input type="checkbox" name="liveProve" id="liveProve" checked="checked" /></div>
<div style="overflow:hidden;">
<textarea id="composition" rows="10" cols="40" style="float:left;">YYYYYYY</textarea>
<pre style="float:left; width:100px; margin:0; padding:0;" id="courseEnds"></pre>
</div>
<input type="button" id="prove" value="Prove" class="btn btn-success" />
</section>

<h2>Composition</h2>
<div><label for="shorthand"><abbr title="For single method compositions only. E.g. mhwvf">Shorthand</abbr> (uses first method from selection above)</label><br /><input type="text" value="hhh" name="shorthand" id="shorthand" size="60" /> <input type="button" id="generateShorthand" value="Generate" /></div>
<div><label for="liveProve"><abbr title="Proves for every keystroke. Not great on slower machines.">Live Prove</abbr></label><input type="checkbox" name="liveProve" id="liveProve" checked="checked" /></div>
<div style="overflow:hidden;">
<textarea id="composition" rows="10" cols="40" style="float:left;">YYYYYYY</textarea>
<pre style="float:left; width:100px; margin:0; padding:0;" id="courseEnds"></pre>
</div>
<input type="button" id="prove" value="Prove" />
<section id="output">
<h3 id="results"></h3>
<div id="music"></div>
<h3 id="com"></h3>
<div id="atw"><pre></pre></div>
</section>
</section>
<section id="aboutJsprove">
<section id="about" class="tab-pane">
<h2>About JSProve</h2>
<p>Created by Paul Brook and James Holdsworth. Written in HTML5 and JavaScript.</p>
<h3>Feature Requests</h3>
Expand All @@ -93,23 +120,14 @@ <h3>Feature Requests</h3>
</ul>
</section>
</section>
<section id="output">
<h3 id="results"></h3>
<noscript>
<p class="error">This application requires JavaScript to be enabled within your browser. Please enable it before continuing.</p>
</noscript>
<div id="music"></div>
<h3 id="com"></h3>
<div id="atw"><pre></pre></div>
</section>
</section>

<section id="popup"></section>
<section id="warning"><h3>Oops...</h3><div></div></section>

<!-- import javascript libraries and files -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js" defer></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" defer></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.24/jquery-ui.min.js" defer></script>
<script type="text/javascript" src="js/bootstrap.min.js" defer></script>
<script type="text/javascript" src="js/pealprover.js" defer></script>
<script type="text/javascript" src="js/methodlib.js" defer></script>
<script type="text/javascript" src="js/frontend.js" defer></script>
Expand Down
27 changes: 18 additions & 9 deletions js/frontend.js
View file
Expand Up @@ -20,7 +20,12 @@ $(document).ready(function() {
checkLiveProve();

// Enable the tabs
$("#tabs").tabs();
//$("#tabs").tabs();
$('#tabs a').click(function (e) {
e.preventDefault();
$(this).tab('show');
});
$('#tabs a:first').tab('show');
});

/*******************************************************************************
Expand Down Expand Up @@ -50,7 +55,7 @@ $("#prove").click(prove);

// Display a warning when you try to use half lead calls (not implemented yet)
$('.callLocation').change(function() {
displayWarning('Half-lead bobs are not implemented yet');
displayWarning('Half-lead calls are not implemented yet');
});

// generate the composition from the shorthand
Expand Down Expand Up @@ -87,7 +92,7 @@ function setup() {

// function to add a new input box into the method list section
function insertMethodBox(code, pn) {
$('#methodList').append('<div id="method' + numberOfMethods + '"><input type="text" id="shortcut' + numberOfMethods + '" maxlength="1" size="1" value="'+code+'" /><input type="text" class="notation" id="notation' + numberOfMethods + '" value="'+pn+'" size="35" /><input type="button" value="&dash;" class="removeMethod" onclick="removeParent(this);" /></div>');
$('#methodList').append('<div id="method' + numberOfMethods + '"><input type="text" id="shortcut' + numberOfMethods + '" maxlength="1" size="1" value="'+code+'" /><input type="text" class="notation" id="notation' + numberOfMethods + '" value="'+pn+'" size="35" /><input type="button" value="&dash;" class="removeMethod btn btn-danger" onclick="removeParent(this);" /></div>');
numberOfMethods++;
}

Expand Down Expand Up @@ -228,16 +233,20 @@ function loadMethods(file) {
/**
* Display a warning
*/
function displayWarning(warning, timeout) {
if(timeout === undefined) {
timeout = 2000;
function displayWarning(message, level, timeout) {
if (level === undefined) {
level = 'error';
}
$('#warning div').html(warning);
$('#warning').fadeIn('slow').delay(timeout).fadeOut('slow');
if (timeout === undefined) {
timeout = 4000;
}
$('.alert').addClass('alert-' + level);
$('.alert div').html(message);
$('.alert').fadeIn('slow').delay(timeout).fadeOut('slow');
}

function hideWarning() {
$('#warning').fadeOut('slow');
$('.alert').fadeOut('slow');
}

function closePopup() {
Expand Down

0 comments on commit f39820b

Please sign in to comment.