|
From: <tob...@us...> - 2014-04-29 02:10:11
|
Revision: 8140
http://sourceforge.net/p/bigdata/code/8140
Author: tobycraig
Date: 2014-04-29 02:10:07 +0000 (Tue, 29 Apr 2014)
Log Message:
-----------
Further workbench styling
Modified Paths:
--------------
branches/RDR/bigdata-war/src/html/css/style.css
branches/RDR/bigdata-war/src/html/index.html
Modified: branches/RDR/bigdata-war/src/html/css/style.css
===================================================================
--- branches/RDR/bigdata-war/src/html/css/style.css 2014-04-26 00:55:27 UTC (rev 8139)
+++ branches/RDR/bigdata-war/src/html/css/style.css 2014-04-29 02:10:07 UTC (rev 8140)
@@ -154,13 +154,11 @@
.box {
padding: 20px 55px;
- /*border: 1px solid;*/
border-bottom: none;
overflow-x: scroll;
}
.box:last-of-type {
- /*border-bottom: 1px solid;*/
}
.modal {
@@ -228,21 +226,24 @@
box-sizing: border-box;
}
-hr {
- background: #929292;
- border: none;
- height: 5px;
- width: 50%;
- margin: 20px auto;
+label[for=load-type], label[for=rdf-type] {
+ margin: 0 10px 0 30px;
}
-#load-load {
- margin: 0 auto;
- display: block;
+.has-vertical-divider {
+ line-height: 55px;
}
+.vertical-divider {
+ height: 55px;
+ display: inline-block;
+ width: 0;
+ border-left: 1px solid #d7d7d7;
+ padding-left: 30px;
+ margin-left: 30px;
+}
+
.bottom {
- /*border-top: 1px solid;*/
text-align: right;
}
@@ -254,7 +255,7 @@
border: none;
}
-#advanced-features, #query-response, #query-pagination, #query-explanation, #query-tab .bottom *, #load-response, #load-clear, #explore-results, #namespace-properties {
+#advanced-features, #query-response, #query-pagination, #query-explanation, #query-export-container, #load-response, #load-clear, #explore-results, #namespace-properties {
display: none;
}
@@ -337,13 +338,27 @@
padding: 25px;
}
-button, input[type=reset], input[type=submit], input[type=file], select {
+button, input[type=reset], input[type=submit], input[type=file], #load-file-container, select {
width: 110px;
height: 25px;
border: 1px solid #e4e4e4;
color: #616161;
}
+#load-file-container {
+ display: inline-block;
+ position: relative;
+ text-align: center;
+ line-height: 25px;
+}
+
+#load-file {
+ position: absolute;
+ top: 0;
+ left: 0;
+ opacity: 0;
+}
+
input[type=checkbox] {
display: none;
}
@@ -361,6 +376,9 @@
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==");
}
+#load-response > pre {
+ overflow-x: scroll;
+}
.clear {
clear: both;
@@ -407,10 +425,12 @@
border: 1px solid #e1e1e1;
padding: 10px 25px;
margin: 0 55px;
+ color: #e1e1e1;
}
#results-per-page {
width: 60px;
+ color: #e1e1e1;
}
#query-pagination button {
@@ -418,7 +438,10 @@
height: 20px;
border: 1px solid #e1e1e1;
background: transparent;
+ color: #e1e1e1;
}
#current-page {
- border: 1px solid #e1e1e1;
\ No newline at end of file
+ border: 1px solid #e1e1e1;
+ color: #e1e1e1;
+}
Modified: branches/RDR/bigdata-war/src/html/index.html
===================================================================
--- branches/RDR/bigdata-war/src/html/index.html 2014-04-26 00:55:27 UTC (rev 8139)
+++ branches/RDR/bigdata-war/src/html/index.html 2014-04-29 02:10:07 UTC (rev 8140)
@@ -40,17 +40,22 @@
<div id="load-errors"></div>
<textarea id="load-box" placeholder="(Type in or drag a file containing RDF data, a SPARQL update or a file path or URL)"></textarea>
</div>
- <p id="large-file-message">Your file <span id="filename"></span> is too large to display here, but will be uploaded as normal. <a href="#" id="clear-file">Remove file</a></p>
- <p>
- <input type="file" id="load-file"><br>
- <label for="load-type">Type:</label>
- <select id="load-type">
+
+ <div class="controls-container">
+ <span id="load-file-container" class="orange">Upload a local file<input type="file" id="load-file"></span>
+ <button class="orange right">Clear</button>
+ <p id="large-file-message">Your file <span id="filename"></span> is too large to display here, but will be uploaded as normal. <a href="#" id="clear-file">Remove file</a></p>
+ </div>
+
+ <div class="controls-container right has-vertical-divider">
+ <label for="load-type">TYPE:</label>
+ <select id="load-type" class="blue">
<option value="sparql" selected="selected">SPARQL Update</option>
<option value="rdf">RDF Data</option>
<option value="path">File Path or URL</option>
</select>
- <label for="rdf-type">Format:</label>
- <select id="rdf-type">
+ <label for="rdf-type">FORMAT:</label>
+ <select id="rdf-type" class="blue">
<option value="n-quads">N-Quads</option>
<option value="n-triples">N-Triples</option>
<option value="n3">Notation3</option>
@@ -60,19 +65,19 @@
<option value="trix">TriX</option>
<option value="turtle">Turtle</option>
</select>
- </p>
- <hr class="shadow">
- <button id="load-load">Load</button>
+ <span class="vertical-divider"> </span>
+ <button id="load-load" class="green">Load</button>
+ </div>
+
</div>
<div class="box" id="load-response">
<pre></pre>
+ <div class="controls-container right">
+ <button id="load-clear" class="orange">Clear output</button>
+ </div>
</div>
- <div class="bottom">
- <button id="load-clear">Clear output</button>
- </div>
-
</div>
<div class="tab" id="query-tab">
@@ -125,9 +130,11 @@
<div id="query-explanation" class="box">
</div>
- <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 id="query-export-container" class="box">
+ <div 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>
</div>
This was sent by the SourceForge.net collaborative development platform, the world's largest Open Source development site.
|