Skip to content
Permalink
Browse files

Update UI with tab-based query input for SPARQL and GraphQL-LD

  • Loading branch information
rubensworks committed Sep 19, 2018
1 parent 339b371 commit c34a1d54d29e294a0a499b06b9b6d5c51db5c52e
Showing with 89 additions and 1 deletion.
  1. +1 −0 images/graphql.svg
  2. BIN images/sparql.png
  3. +23 −1 index.html
  4. +65 −0 styles/ldf-client.css
@@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 400"><path fill="#E10098" d="M57.468 302.66l-14.376-8.3 160.15-277.38 14.376 8.3z"/><path fill="#E10098" d="M39.8 272.2h320.3v16.6H39.8z"/><path fill="#E10098" d="M206.348 374.026l-160.21-92.5 8.3-14.376 160.21 92.5zM345.522 132.947l-160.21-92.5 8.3-14.376 160.21 92.5z"/><path fill="#E10098" d="M54.482 132.883l-8.3-14.375 160.21-92.5 8.3 14.376z"/><path fill="#E10098" d="M342.568 302.663l-160.15-277.38 14.376-8.3 160.15 277.38zM52.5 107.5h16.6v185H52.5zM330.9 107.5h16.6v185h-16.6z"/><path fill="#E10098" d="M203.522 367l-7.25-12.558 139.34-80.45 7.25 12.557z"/><path fill="#E10098" d="M369.5 297.9c-9.6 16.7-31 22.4-47.7 12.8-16.7-9.6-22.4-31-12.8-47.7 9.6-16.7 31-22.4 47.7-12.8 16.8 9.7 22.5 31 12.8 47.7M90.9 137c-9.6 16.7-31 22.4-47.7 12.8-16.7-9.6-22.4-31-12.8-47.7 9.6-16.7 31-22.4 47.7-12.8 16.7 9.7 22.4 31 12.8 47.7M30.5 297.9c-9.6-16.7-3.9-38 12.8-47.7 16.7-9.6 38-3.9 47.7 12.8 9.6 16.7 3.9 38-12.8 47.7-16.8 9.6-38.1 3.9-47.7-12.8M309.1 137c-9.6-16.7-3.9-38 12.8-47.7 16.7-9.6 38-3.9 47.7 12.8 9.6 16.7 3.9 38-12.8 47.7-16.7 9.6-38.1 3.9-47.7-12.8M200 395.8c-19.3 0-34.9-15.6-34.9-34.9 0-19.3 15.6-34.9 34.9-34.9 19.3 0 34.9 15.6 34.9 34.9 0 19.2-15.6 34.9-34.9 34.9M200 74c-19.3 0-34.9-15.6-34.9-34.9 0-19.3 15.6-34.9 34.9-34.9 19.3 0 34.9 15.6 34.9 34.9 0 19.3-15.6 34.9-34.9 34.9"/></svg>
BIN +5.73 KB images/sparql.png
Binary file not shown.
@@ -32,7 +32,29 @@ <h1><a href="#">Query Linked Data on the Web</a></h1>
<li>
<label>Type or pick a query</label>
<select class="query"></select>
<textarea class="queryText"></textarea>

<div>
<ul class="query-texts">
<li><a id="sparql"><img src="images/sparql.png" alt="SPARQL" />SPARQL</a></li>
<li><a id="graphql"><img src="images/graphql.svg" alt="GraphQL" />GraphQL-LD</a></li>
</ul>
</div>

<div class="query-text-containers">
<div class="query-text-container" id="tab-sparql">
<textarea class="querytext querytext-sparql"></textarea>
</div>
<div class="query-text-container" id="tab-graphql">
<label class="muted">GraphQL Query</label>
<textarea class="querytext querytext-graphql"></textarea>

<label class="muted">JSON-LD context</label>
<textarea class="querycontext querycontext-graphql"></textarea>

<label class="muted">Compact results</label>
<input type="checkbox" checked="checked" class="results-to-tree results-to-tree-graphql" />
</div>
</div>
</li>

<li>
@@ -28,6 +28,10 @@ a, button, input:hover, label {
cursor: pointer;
text-decoration: none;
}
.muted {
font-size: 0.8em;
color: #a8a1a2;
}
a:hover {
color: #be1622;
text-decoration: underline;
@@ -225,6 +229,57 @@ textarea {
contain: layout;
}

.query-text-containers {
display: block;
clear: both;
}

.query-texts li {
float:left;
list-style:none;
}

.query-texts li a {
font-weight: bold;
font-size: 12px;
color: black;
display: block;
background-color: white;
border: 1px solid #999999;
border-radius: 3px 3px 0px 0px;
border-bottom: none;
margin: 0;
padding: 5px 8px 6px;
cursor: pointer;
}

.query-texts li a img {
width: 14px;
height: 14px;
padding-right: 1px;
vertical-align: top;
}

.query-texts li a.inactive {
background-color: #f6f6f6;
padding: 5px 8px 5px;
}

.query-texts li a:hover {
background-color: white;
text-decoration: none;
}

.query-texts li a:active {
margin: 1px -1px -1px 1px;
}

.query-texts {
margin-top: 2px;
height: 27px;
border-bottom: 1px solid #999999;
}

footer {
font-size: .8em;
}
@@ -427,10 +482,20 @@ li.active-result {
li.query {
font-style: normal;
color: #000000;
background-repeat: no-repeat;
background-position-y: 4px;
background-size: 14px;
padding-left: 16px;
}
li.query:not(.query-relevant) {
color: #777777;
}
li.query-type-sparql {
background-image: url('../images/sparql.png');
}
li.query-type-graphql {
background-image: url('../images/graphql.svg');
}
li.highlighted {
background-color: #be1622;
color: #fff !important;

0 comments on commit c34a1d5

Please sign in to comment.