From: <tob...@us...> - 2014-04-26 00:55:30
|
Revision: 8139 http://sourceforge.net/p/bigdata/code/8139 Author: tobycraig Date: 2014-04-26 00:55:27 +0000 (Sat, 26 Apr 2014) Log Message: ----------- New workbench styling (still in progress) Modified Paths: -------------- branches/RDR/bigdata-war/src/html/css/style.css branches/RDR/bigdata-war/src/html/index.html branches/RDR/bigdata-war/src/html/js/workbench.js Modified: branches/RDR/bigdata-war/src/html/css/style.css =================================================================== --- branches/RDR/bigdata-war/src/html/css/style.css 2014-04-24 10:02:02 UTC (rev 8138) +++ branches/RDR/bigdata-war/src/html/css/style.css 2014-04-26 00:55:27 UTC (rev 8139) @@ -51,7 +51,11 @@ /* Workbench */ body { - margin: 10px; + margin: 50px 10px; + background-color: #f1f1f1; + font-family: sans-serif; + font-size: 80%; + color: #545454; } h1 { @@ -65,7 +69,8 @@ } #container { - /*max-width: 600px;*/ + max-width: 1000px; + margin: 0 auto; } #top { @@ -77,6 +82,33 @@ float: left; } +#search-form { + padding-top: 80px; +} + +#search-form label { + font-size: 50%; +} + +#search-form input { + border: 1px solid #e3e3e3; + margin: 0; + height: 21px; +} + +#search-form button { + background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAsAAAAMCAMAAACDd7esAAAArlBMVEX////7+/vQ0NDExMT09PSzs7MZGRkAAAAHBweHh4f9/f3JyckDAwNXV1fPz8/b29uCgoIEBASNjY1GRkY8PDz+/v57e3sLCwsRERGOjo7Nzc3R0dEjIyO7u7vf399ra2sVFRXk5OT4+PhAQEAqKirw8PAkJCQSEhJvb28pKSlpaWn5+fny8vJ0dHQwMDAhISFYWFgYGBg+Pj7t7e0lJSXZ2dmlpaUmJiahoaGMjIzmLhVjAAAACXZwQWcAAAAVAAAAFABoZ/l0AAAAXklEQVQIHQXBAwLDQAAAsHS6sXNn29b/P7YEUSqdAWRzIeQLRSiVK3G1Vm9As9VG0onQ7UE/DDBMYBTGmExnzBdLWK0322QX9gc4ns6Xa3y7PwCk888XgHf4APD9/QGT1gbfV95+QQAAAABJRU5ErkJggg=='); + background-repeat: no-repeat; + background-color: white; + background-position: 6px 6px; + border: 1px solid #e3e3e3; + border-left: none; + padding: 0; + margin: 0; + width: 25px; + height: 25px; +} + .shadow { -webkit-box-shadow: 0px 3px 5px 0px rgba(50, 50, 50, 0.75); -moz-box-shadow: 0px 3px 5px 0px rgba(50, 50, 50, 0.75); @@ -85,40 +117,50 @@ #tab-selector { clear: both; + padding-top: 20px; } #tab-selector a { padding: 10px; - border: 1px solid; - border-right: none; + border: 1px solid #dadada; border-bottom: none; display: inline-block; float: left; cursor: pointer; + width: 108px; + margin-right: 9px; + text-transform: uppercase; + text-align: center; + font-weight: bold; + background-color: #ebebeb; } -#tab-selector a:last-of-type { - border-right: 1px solid; +#tab-selector p { + float: right; + font-weight: bold; + padding-top: 11px; } -.active { - background: lightgrey; +#tab-selector .active { + background: white; + border-color: white; } .tab { display: none; clear: both; + background: white; } .box { - padding: 10px; - border: 1px solid; + padding: 20px 55px; + /*border: 1px solid;*/ border-bottom: none; overflow-x: scroll; } .box:last-of-type { - border-bottom: 1px solid; + /*border-bottom: 1px solid;*/ } .modal { @@ -154,17 +196,26 @@ } .namespace-shortcuts { - text-align: right; + float: right; + margin-bottom: 20px; } .namespace-shortcuts li { display: inline-block; - border: 1px solid; + border: 1px solid #e4e4e4; padding: 5px; margin-left: 5px; cursor: pointer; + width: 40px; + text-align: center; } +.namespace-shortcuts li:hover { + border-color: #b7b7b7; + background-color: #b7b7b7; + color: #ededed; +} + #large-file-message { display: none; margin: 5px 0; @@ -190,12 +241,8 @@ display: block; } -#load-buttons { - text-align: center; -} - .bottom { - border-top: 1px solid; + /*border-top: 1px solid;*/ text-align: right; } @@ -232,6 +279,7 @@ background-color: transparent; padding: 2px; border-width: 1px; + border-color: #e1e1e1; } /* these should have the same typography so the error highlighting matches up with the query text */ @@ -257,6 +305,14 @@ background-color: red; } +#advanced-features { + margin-right: 50px; +} + +#advanced-features label { + margin-left: 20px; +} + #running-queries li { margin: 10px 0; } @@ -277,3 +333,92 @@ overflow-x: scroll; } +.controls-container { + padding: 25px; +} + +button, input[type=reset], input[type=submit], input[type=file], select { + width: 110px; + height: 25px; + border: 1px solid #e4e4e4; + color: #616161; +} + +input[type=checkbox] { + display: none; +} + +input[type="checkbox"] + label span { + display: inline-block; + width: 13px; + height: 13px; + margin: 0; + vertical-align: middle; + background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA0AAAANCAIAAAD9iXMrAAAA4UlEQVQoU11RARLCIAzr/1+hMHF7iN6x0rLph0wp9Tx3jLVrSNNALE24YR/PzlwRV9nftTPz42gnt2dj0iaXg5LSTagobWpxOqk02vr8CSiBANGqljsaaznIf95HClZCszLy3GnpVi7B7VCwQgBBShqg62uWs07QXI2g1bB+LgdZjtg0dNOKnvbm0beEmgkNARANB4wv95n/ifMYDmBWgnlewL4Gq6cYyw/DVxIRT5YfVh/rq9L0fflKWAg+H8sDw6kYzu/DTUbZJ0hxGFVgDIuPLeHOirHQBTt8HUHFxWLeD+xTIgvbAhziAAAAAElFTkSuQmCC"); +} + +input[type="checkbox"]:checked + label span { + background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA0AAAANCAIAAAD9iXMrAAABb0lEQVQoFQXBTYuNYRjA8f913S/neRyUD2AzRVgoNTsZzUodG76Jz2QpZWEhNmNBaM682KCMEsnCHKYx5nm77+vy+8mbnf1spaZK0ShopQY1XI0qroTkdqoas5VnB+tNwyxikQgFJKAFM8rEauTe2nYE5g1NAy0xIpAdQMCNbuCCEUTVBWugJTf8+ND+/UWc0R/y7VOriWZGO8PdFTQFzgSSIKHbe3S/H3j9ZCGx04gqrrig4qYFALh0Az1/uv3wTpqXy9cJDo5Fqpi6MCZGqII7a5vP//yeX7n1ApgCABBcVZw8IU4A4Oe72+L6dWczCGogaCG4KioiuFDh83tWh+cWDx4frc5+2Q0i4AyRGlzNrFSqcXLMx6271za2YsvVm0/3Xy2Oj6hOHMCqLJfLl9/X85w8oxGqUB0VELynM+oJGxeXMTljhxrSUxM1oAURCmBMI/8GFJW3u3vRJhcVN4jJy6iqSKHmkk1LttDH+h9YiLIwVyNFQAAAAABJRU5ErkJggg=="); +} + + +.clear { + clear: both; +} + +.right { + float: right; +} + +.orange { + background-color: #ffd8b3; + background-image: -webkit-gradient(linear, left top, left bottom, from(#ffffff), to(#ffd8b3)); + background-image: -webkit-linear-gradient(top, #ffffff, #ffd8b3); + background-image: -moz-linear-gradient(top, #ffffff, #ffd8b3); + background-image: -ms-linear-gradient(top, #ffffff, #ffd8b3); + background-image: -o-linear-gradient(top, #ffffff, #ffd8b3); + background-image: linear-gradient(to bottom, #ffffff, #ffd8b3); + filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=#ffffff, endColorstr=#ffd8b3); +} + +.blue { + background-color: #d3e4f6; + background-image: -webkit-gradient(linear, left top, left bottom, from(#ffffff), to(#d3e4f6)); + background-image: -webkit-linear-gradient(top, #ffffff, #d3e4f6); + background-image: -moz-linear-gradient(top, #ffffff, #d3e4f6); + background-image: -ms-linear-gradient(top, #ffffff, #d3e4f6); + background-image: -o-linear-gradient(top, #ffffff, #d3e4f6); + background-image: linear-gradient(to bottom, #ffffff, #d3e4f6); + filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=#ffffff, endColorstr=#d3e4f6); +} + +.green { + background-color: #d9e689; + background-image: -webkit-gradient(linear, left top, left bottom, from(#ffffff), to(#d9e689)); + background-image: -webkit-linear-gradient(top, #ffffff, #d9e689); + background-image: -moz-linear-gradient(top, #ffffff, #d9e689); + background-image: -ms-linear-gradient(top, #ffffff, #d9e689); + background-image: -o-linear-gradient(top, #ffffff, #d9e689); + background-image: linear-gradient(to bottom, #ffffff, #d9e689); + filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=#ffffff, endColorstr=#d9e689); +} + +#query-pagination { + border: 1px solid #e1e1e1; + padding: 10px 25px; + margin: 0 55px; +} + +#results-per-page { + width: 60px; +} + +#query-pagination button { + width: 20px; + height: 20px; + border: 1px solid #e1e1e1; + background: transparent; +} + +#current-page { + border: 1px solid #e1e1e1; \ No newline at end of file Modified: branches/RDR/bigdata-war/src/html/index.html =================================================================== --- branches/RDR/bigdata-war/src/html/index.html 2014-04-24 10:02:02 UTC (rev 8138) +++ branches/RDR/bigdata-war/src/html/index.html 2014-04-26 00:55:27 UTC (rev 8139) @@ -16,8 +16,7 @@ <div id="top"> <img src="/bigdata/html/images/logo.png" id="logo"> - <form id="search-form"><label for="search-text">Search:</label> <input type="text" id="search-text"></form> - <p>Current namespace: <span id="current-namespace"></span></p> + <form id="search-form"><label for="search-text">SEARCH:</label> <input type="text" id="search-text"><button type="submit"><span> </span></button></form> </div> <div id="tab-selector"> @@ -27,6 +26,7 @@ <a data-target="status">Status</a> <a data-target="performance">Performance</a> <a data-target="namespaces">Namespaces</a> + <p>Current namespace: <span id="current-namespace"></span></p> </div> <div class="tab" id="load-tab"> @@ -51,7 +51,6 @@ </select> <label for="rdf-type">Format:</label> <select id="rdf-type"> - <option value="">Select RDF format</option> <option value="n-quads">N-Quads</option> <option value="n-triples">N-Triples</option> <option value="n3">Notation3</option> @@ -86,20 +85,21 @@ <div id="query-errors"></div> <textarea id="query-box" name="query" placeholder="(Input a SPARQL query)"></textarea> - <a href="#" id="advanced-features-toggle">Advanced features</a> - - <div id="advanced-features"> - <input type="checkbox" id="query-explain"> <label for="query-explain">Explain</label> - <input type="checkbox" name="analytic" value="true" id="query-analytic"> <label for="query-analytic">Analytic</label> - <input type="checkbox" name="RTO" value="true" id="query-rto"> <label for="query-rto">Runtime Query Optimizer</label> + <div class="controls-container"> + <input type="reset" value="Clear" class="orange right"> </div> + <div class="controls-container"> + <div class="clear right"> + <a href="#" id="advanced-features-toggle">ADVANCED FEATURES</a>: + <span id="advanced-features"> + <input type="checkbox" id="query-explain"><label for="query-explain"><span></span> EXPLAIN</label> + <input type="checkbox" name="analytic" value="true" id="query-analytic"><label for="query-analytic"><span></span> ANALYTIC</label> + <input type="checkbox" name="RTO" value="true" id="query-rto"><label for="query-rto"><span></span> RUNTIME QUERY OPTIMIZER</label> + </span> + <input type="submit" value="Execute" class="green"> + </div> + </div> - <hr class="shadow"> - - <div id="load-buttons"> - <input type="submit" value="Execute"> - <input type="reset" value="Clear"> - </div> </form> </div> @@ -116,18 +116,18 @@ <option>100</option> </select> per page <div id="page-selector"> - <button id="previous-page"><</button> + <button id="previous-page">◀</button> Page <input type="text" id="current-page"> of <span id="result-pages"></span> - <button id="next-page">></button> + <button id="next-page">▶</button> </div> </div> <div id="query-explanation" class="box"> </div> - <div class="bottom"> - <button id="query-export">Export</button> - <button id="query-response-clear">Clear</button> + <div id="query-export-container" class="controls-container"> + <button id="query-export" class="right orange">Export</button> + <button id="query-response-clear" class="right clear orange">Clear</button> </div> </div> @@ -207,6 +207,8 @@ </div> + <div class="clear"> </div> + </div> <div id="overlay"></div> Modified: branches/RDR/bigdata-war/src/html/js/workbench.js =================================================================== --- branches/RDR/bigdata-war/src/html/js/workbench.js 2014-04-24 10:02:02 UTC (rev 8138) +++ branches/RDR/bigdata-war/src/html/js/workbench.js 2014-04-26 00:55:27 UTC (rev 8139) @@ -26,6 +26,7 @@ } var query = 'select ?s ?p ?o { ?o bds:search "' + term + '" . ?s ?p ?o . }' $('#query-box').val(query); + $('#query-errors').hide(); $('#query-form').submit(); showTab('query'); }); @@ -480,7 +481,7 @@ $('#query-response-clear').click(function() { $('#query-response, #query-explanation').empty(''); - $('#query-response, #query-pagination, #query-explanation, #query-tab .bottom *').hide(); + $('#query-response, #query-pagination, #query-explanation, #query-export-container').hide(); }); $('#query-export').click(function() { updateExportFileExtension(); showModal('query-export-modal'); }); @@ -611,7 +612,7 @@ function showQueryResults(data) { $('#query-response').empty(); $('#query-export-rdf').hide(); - $('#query-response, #query-pagination, #query-tab .bottom *').show(); + $('#query-response, #query-pagination, #query-export-container').show(); var table = $('<table>').appendTo($('#query-response')); if(this.dataTypes[1] == 'xml') { // RDF @@ -700,7 +701,7 @@ } function queryResultsError(jqXHR, textStatus, errorThrown) { - $('#query-response, #query-tab .bottom *').show(); + $('#query-response, #query-export-container').show(); $('#query-response').text('Error! ' + textStatus + ' ' + jqXHR.statusText); highlightError(jqXHR.statusText, 'query'); } @@ -812,7 +813,7 @@ } // update current results numbers - $('#current-results').html((start + 1) + ' - ' + end); + $('#current-results').html((start + 1) + '-' + end); $('#current-page').val(n); } This was sent by the SourceForge.net collaborative development platform, the world's largest Open Source development site. |