Menu
▾
▴
[Bigdata-commit] SF.net SVN: bigdata:[8139] branches/RDR/bigdata-war/src/html
|
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.
|
