Commit dfc4c347 authored by Porter Libby's avatar Porter Libby
Browse files

add detail toggle (charlies suggestion)

parent 7ff46e62
......@@ -169,7 +169,32 @@ label
#button_permalink:hover{
background-color: #bbb;
}
#button_details{
margin-left: 20px;
position: absolute;
bottom:0px;
color: gray;
font-size: 20px;
background-color: #ddd;
opacity:1.0;
border-top-right-radius: 10px;
border-top-left-radius: 10px;
padding: 5px;
}
#button_details:disabled
{
background-color: #999;
opacity:0.1;
}
#button_details:hover{
background-color: #bbb;
}
.data-catagory-simple .detailed_info{
display: none;
}
.data-catagory-detail .detailed_info{
display: inline;
}
.lds-ellipsis {
display: inline-block;
......
......@@ -454,4 +454,16 @@ function removeQuery(){
current = document.location.href;
base = current.split('?')[0];
location.replace(base);
}
function toggleDetails(){
var all = document.getElementsByClassName('data-catagory');
for (var i = 0; i < all.length; i++) {
if (all[i].classList.contains('data-catagory-simple')){
all[i].classList.remove('data-catagory-simple');
all[i].classList.add('data-catagory-detail');
}else{
all[i].classList.add('data-catagory-simple');
all[i].classList.remove('data-catagory-detail');
}
}
}
\ No newline at end of file
......@@ -7,8 +7,9 @@
# Starts the program + general stuff
*/
function ready(){ // placeholder for now
function ready(){
switchToData() // set screen to data
base_url = document.location.href; // get base url
url_parts = base_url.split('?')
......
......@@ -49,7 +49,7 @@ function createRadioElementTrips( mode, name, checked, label, id ) {
radioHtml += ' checked="checked"';
}
radioHtml += '/>';
radioHtml += '<label for="' + label + '"><strong>'+ label + "</strong> (ID: " + id +')</label></div>';
radioHtml += '<label for="' + label + '"><strong>'+ label + "</strong><span class='detailed_info'> (ID: " + id +')</span></label></div>';
return radioHtml;
}
......@@ -60,7 +60,7 @@ function createRadioElementSites( mode, name, checked, label, siteid ) {
radioHtml += ' checked="checked"';
}
radioHtml += '/>';
radioHtml += '<label for="' + label + '"><strong>'+ label +"</strong> (ID: " + siteid +')</label></div>';
radioHtml += '<label for="' + label + '"><strong>'+ label +"</strong><span class='detailed_info'> (ID: " + siteid +')</span></label></div>';
return radioHtml;
}
......@@ -78,7 +78,7 @@ function createRadioElementSectors( mode, name, checked, label,sectorid ) {
radioHtml += ' checked="checked"';
}
radioHtml += '/>';
radioHtml += '<label for="' + label + '"><strong>'+ label +"</strong> (ID: " + sectorid +')</label></div>';
radioHtml += '<label for="' + label + '"><strong>'+ label +"</strong><span class='detailed_info'> (ID: " + sectorid +')</span></label></div>';
return radioHtml;
}
......@@ -98,7 +98,7 @@ function createRadioElementStreamingsPlatforms( mode, name, checked, id,name ) {
radioHtml += ' checked="checked"';
}
radioHtml += '/>';
radioHtml += '<label for="' + name + '"><strong>'+ name + "</strong> (ID: " + id + ")" +'</label></div>';
radioHtml += '<label for="' + name + '"><strong>'+ name + "</strong><span class='detailed_info'> (ID: " + id + ")" +'</span></label></div>';
return radioHtml;
}
......
......@@ -114,14 +114,14 @@
<label for="streamings"><strong>Stream Data</strong></label>
</div>
</div>
<div class='data-catagory' id='trips'></div>
<div class='data-catagory' id='sites'></div>
<div class='data-catagory' id='sectors'></div>
<div class='data-catagory' id='spots'></div>
<div class='data-catagory' id='streamingplatform'></div>
<div class='data-catagory' id='streamingdates'></div>
<div class='data-catagory' id='streaming'></div>
<div class='data-catagory' id='reading'></div>
<div class='data-catagory data-catagory-simple' id='trips'></div>
<div class='data-catagory data-catagory-simple' id='sites'></div>
<div class='data-catagory data-catagory-simple' id='sectors'></div>
<div class='data-catagory data-catagory-simple' id='spots'></div>
<div class='data-catagory data-catagory-simple' id='streamingplatform'></div>
<div class='data-catagory data-catagory-simple' id='streamingdates'></div>
<div class='data-catagory data-catagory-simple' id='streaming'></div>
<div class='data-catagory data-catagory-simple' id='reading'></div>
<div id='data-prompt-box'>
<div id='text'>
......@@ -141,6 +141,16 @@
width="32" height="32">
<span class="tooltiptext">Create permalink</span>
</div>
<div class='tooltip' style='position:absolute; bottom: 0px;left: 80px;'>
<input
id='button_details'
onclick='toggleDetails()'
type="image"
src="img/detail-icon.png"
alt="Submit"
width="32" height="32">
<span class="tooltiptext">Toggle Details</span>
</div>
</div>
</div>
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment