From d8c46fbdb68341bd308bc48e9c3c1be7fbb70f92 Mon Sep 17 00:00:00 2001 From: Gehad elrobey Date: Sun, 1 Jun 2014 07:44:35 +0300 Subject: HTML: Create theme directory Create theme directory that contains the html templates copied to the exporting directory. - dive_export.html is the main html template. - light.css and sand.css are two separte themes. - list_lib.js is the main javascript library. Signed-off-by: Gehad elrobey Signed-off-by: Miika Turkia Signed-off-by: Dirk Hohndel --- theme/dive_export.html | 139 ++++++++++++ theme/light.css | 201 +++++++++++++++++ theme/list_lib.js | 577 +++++++++++++++++++++++++++++++++++++++++++++++++ theme/poster.png | Bin 0 -> 37876 bytes theme/sand.css | 203 +++++++++++++++++ 5 files changed, 1120 insertions(+) create mode 100644 theme/dive_export.html create mode 100644 theme/light.css create mode 100644 theme/list_lib.js create mode 100644 theme/poster.png create mode 100644 theme/sand.css (limited to 'theme') diff --git a/theme/dive_export.html b/theme/dive_export.html new file mode 100644 index 000000000..1c92d3a55 --- /dev/null +++ b/theme/dive_export.html @@ -0,0 +1,139 @@ + + + +dive log export + + + + + + + + +

Subsurface

+ +

+ Advanced Search + +

+ + + + +

+ +

+ + + +

+ +

+ + diff --git a/theme/light.css b/theme/light.css new file mode 100644 index 000000000..589bbddda --- /dev/null +++ b/theme/light.css @@ -0,0 +1,201 @@ +body{ + min-width:680px; + background-color:#dfdfdf; + font-size:12px; + font-family: 'Lobster', helvetica, arial; +} + +h1 { + text-align: center; + font-size: 70px; + margin-top: 0; + font-family: 'Lobster', helvetica, arial; + text-decoration: none; + color: #48697B; + padding-top:30px; +} + +ul{ + background-color:#7899AB; +} + +table{ + margin:10px; + font-size:inherit; +} + +tr{ + padding:6px; +} + +th{ + padding:4px; +} + +.trips{ + background-color:#5A7F9A; +} + +.words{ + font-size:inherit; + font-weight:bold; +} + +.item{ + width:9%; + min-width:82px; + max-width:250px; + float:left; + cursor:pointer; + overflow:hidden; + text-overflow:ellipsis; + white-space: nowrap; +} + +.item_large{ + width:16%; + min-width:200px; + max-width:385px; + margin-right:8px; + float:left; + cursor:pointer; + overflow:hidden; + text-overflow:ellipsis; + white-space: nowrap; +} + +#logo{ + width: 150px; + height: 150px; + background-image: url("poster.png"); + background-size: 150px 150px; + background-repeat: no-repeat; + float:left; +} + +#header_container{ + width:600px; + height:auto; + margin:50px; + margin-bottom:100px; +} + + + +ul,#header{ + border-style:solid; + border-radius:14px; + border-color:#7899AB; + margin:7px; + padding:5px 10px 5px 10px; +} + +input[type=checkbox]{ + height:27; + width:27; + margin:4px; +} + +#advanced_search{ + position: absolute; + box-shadow: 1px 1px 5px #888888; + z-index: 99; + width: 300px; + max-width: 30%; + min-width: 270px; + background-color: rgba(105,126,131,0.8); + font-size:16px; + color:white; + display:none; + max-height:40%; + overflow:scroll; + overflow-y:auto; + overflow-x:hidden; +} + +#toolbox{ + float:right; + height:35px; + overflow:hidden; + display:block; +} + +#header{ + height:20px; + background-color:#5f7f8f; + border-color:#5f7f8f; + font-weight:bold; +} + + +#controller{ + min-width:200px; + padding:10px; +} + +#divePanel{ + padding:5px; + width:90%; + margin:0% 5% 0% 5%; + margin-bottom:50px; + background-color: rgba(88,121,139,0.3); + box-shadow: 10px 10px 5px #888888; +} + +button,#no_dives_selector{ + font-size:13px; + min-width:55px; + line-height:2; + margin:0px 0px 0px 0px; + border-radius:10px; + opacity:0.6; + border-style:outset; + border-color:black; +} + +#no_dives_selector{ + padding:5px; + text-indent: 0.01px; + text-overflow: ''; +} + +button:hover{ + background-color:#4A5F5F; +} + +a:hover{ + cursor: pointer; + text-decoration:underline; +} + +ul:hover{ + background-color:#88A9BB; +} + +#search_res{ + font-size:0.6em; + visibility:hidden; +} + +#search_input{ + border-radius:6px; + max-width:30%; + padding:3px; + opacity:0.6; + margin: 0px 5px 5px 5px; + border-style:outset; + border-color:black; +} + +#controlbox{ + margin:7px; + margin-bottom:10px; +} + +@media (max-width: 768px) { + #divePanel{ + padding:4px; + width:100%; + margin:0% 0% 0% 0%; + } +} diff --git a/theme/list_lib.js b/theme/list_lib.js new file mode 100644 index 000000000..1a07dc384 --- /dev/null +++ b/theme/list_lib.js @@ -0,0 +1,577 @@ +var itemsToShow = new Array(); //list of indexes to all dives to view +var items = new Array(); +var start; //index of first element viewed in itemsToShow +var sizeofpage; //size of viewed page +var numberofwords=0; //just for stats +var olditemstoshow; //to reference the indexes to all dives if changed +////////////////////////////////// +// // +// View Model // +// // +////////////////////////////////// + +/** +*This Method view all items +*View N pages each of sizeofpage size items. +*starting from zero +*/ +function showAllDives(){ + for(var i=0 ; i < items.length ; i++){ + itemsToShow.push(i); + } + olditemstoshow = itemsToShow; + start=0; + viewInPage(); +} + +/** +*This function view the 'itemstoshow' in pages. +*It start from 'start' variable. +*It showes N pages each of sizeofpage size. +*/ +function viewInPage(){ + var end = start + sizeofpage -1; + if(end >= itemsToShow.length ) end = itemsToShow.length-1; + updateView(start,end); +} + +/** +*addHTML this Method puts the HTML of items of given indexes +*@param {array} indexes array of indexes to put in HTML +*/ +function updateView(start,end){ + var divelist = document.getElementById('diveslist'); + divelist.innerHTML=""; + for(var i=start;i<=end;i++){ + divelist.innerHTML+='

'; + expand(document.getElementById(indexes[i])); + itemsToShow[indexes[i]].expanded = true; + }; +} + +/** +*This Method shows items in a range [start,end] +*@param {integer} start start from this index +*@param {integer} finish at this index. +*/ +function view_in_range(start,end){ + var ind = new Array(); + if(end>=itemsToShow.length)end=itemsToShow.length-1; + for(var i=start ; i <= end ; i++){ + ind.push(i); + } + addHTML(ind); + view_pagging(start,end); +} + + +function prev_page(){ + var end = start+sizeofpage-1; + if(start-sizeofpage>0){ + start-=sizeofpage; + } + else{ + start=0; + } + if(end-sizeofpage>0){ + end-=sizeofpage; + } + if(end>=itemsToShow.length){ + end = itemsToShow.length-1; + } + updateView(start,end) +} + +function next_page(){ + var end = start+sizeofpage-1; + if(end+sizeofpage=itemsToShow.length) break; + unexpand(document.getElementById(itemsToShow[i])); + items[itemsToShow[i]].expanded = false; + } +} + +function collapseAll(){ + for(var i=start;i=itemsToShow.length) break; + expand(document.getElementById(itemsToShow[i])); + items[itemsToShow[i]].expanded = true; + } +} + +function setNumberOfDives(e){ + var value = e.options[e.selectedIndex].value; + sizeofpage=parseInt(value); + var end = start + sizeofpage -1; + view_in_range(start,end); +} + +function toggleExpantion(ul){ + if(!items[ul.id].expanded) + { + expand(ul); + items[ul.id].expanded = true; + } + else + { + unexpand(ul); + items[ul.id].expanded = false; + } +} + +function expand(ul){ + ul.innerHTML = getlimited(items[ul.id]); + ul.style.padding='2px 10px 2px 10px'; +} +function unexpand(ul){ + ul.innerHTML = getExpanded(items[ul.id]); + ul.style.padding='3px 10px 3px 10px'; +} + +/////////////////////////////////////// +// +// Dive Model +// +////////////////////////////////////// + +function getlimited (dive) { + return '

'+dive.subsurface_number+'

'+ + '

'+dive.date+'

'+ + '

'+dive.time+'

'+ + '

'+dive.location+'

'+ + '

'+dive.temperature.air+'

'+ + '

'+dive.temperature.water+'

'; +}; + +function getExpanded (dive) { + return '

Date:

'+dive.date+ + '

Time:

'+dive.time + + '

Location:

'+'' + +dive.location +''+ + '

Rating:

'+putRating(dive.rating)+ + '

Visibilty:

'+putRating(dive.visibility)+ + '

'+ + '

Air temp:

'+dive.temperature.air+ + '

Water temp:

'+dive.temperature.water + + '

DiveMaster:	'+dive.divemaster + + '
Buddy:	'+dive.buddy + + '
Suit:	'+dive.suit + + '
Tags:	'+putTags(dive.tags)+ + '

Notes:

' + dive.notes +'

'; +}; + +function putTags(tags){ + var result=""; + for(var i in tags){ + result+=''+tags[i]+''; + if(i items[iSmaller].location ; +} + +function cmpNumAsc(j,iSmaller){ + return items[j].subsurface_number < items[iSmaller].subsurface_number ; +} +function cmpNumDes(j,iSmaller){ + return items[j].subsurface_number > items[iSmaller].subsurface_number ; +} +function cmpTimeAsc(j,iSmaller){ + return items[j].time < items[iSmaller].time ; +} +function cmpTimeDes(j,iSmaller){ + return items[j].time > items[iSmaller].time ; +} +function cmpDateAsc(j,iSmaller){ + return items[j].date < items[iSmaller].date ; +} +function cmpDateDes(j,iSmaller){ + return items[j].date > items[iSmaller].date ; +} +function cmpAtempAsc(j,iSmaller){ + return parseInt(items[j].temperature.air) < parseInt(items[iSmaller].temperature.air) ; +} +function cmpAtempDes(j,iSmaller){ + return parseInt(items[j].temperature.air) > parseInt(items[iSmaller].temperature.air) ; +} +function cmpWtempAsc(j,iSmaller){ + return parseInt(items[j].temperature.water) < parseInt(items[iSmaller].temperature.water) ; +} +function cmpWtempDes(j,iSmaller){ + return parseInt(items[j].temperature.water) > parseInt(items[iSmaller].temperature.water) ; +} + +function sort_it(sortOn,function_){ + var res = new Array(); + var visited = new Array(itemsToShow.length); + for(var j=0;j= 0) ? true : false; +} + +Set.prototype.push = function(key) { + if(!this.contains(key)){ + this.keys.push(key); + } +}; + +Set.prototype.isEmpty = function() { + return this.keys.length<=0? true:false; +}; + +Set.prototype.forEach = function(do_){ + this.keys.forEach(do_); +}; + +Set.prototype.Union = function(another_set){ + if (another_set == null) { + return; + } + for(var i=0; i' + +trips[i].name+' ( '+trips[i].dives.length+' dives)'+'

'+'

'; + }; + for(var i=0;i'+getlimited(trips[trip].dives[j])+''; + } +} + +function unexpand_trip(trip){ + trips[trip].expanded = false; + var d = document.getElementById("trip_dive_list_"+trip); + d.innerHTML=''; +} + +function getItems(){ + var count = 0; + for(var i in trips){ + for(var j in trips[i].dives){ + items[count++]=trips[i].dives[j]; + } + } +} diff --git a/theme/poster.png b/theme/poster.png new file mode 100644 index 000000000..bd82ef7b9 Binary files /dev/null and b/theme/poster.png differ diff --git a/theme/sand.css b/theme/sand.css new file mode 100644 index 000000000..0bfcf66c1 --- /dev/null +++ b/theme/sand.css @@ -0,0 +1,203 @@ +body{ + min-width:680px; + background-color:#F7F4DD; + font-size:12px; + font-family: 'Lobster', helvetica, arial; +} + +h1 { + text-align: center; + font-size: 70px; + margin-top: 0; + font-family: 'Lobster', helvetica, arial; + text-decoration: none; + color: #213394; + padding-top:30px; +} + +ul{ + background-color:#FFD18F; +} + +table{ + margin:10px; + font-size:inherit; +} + +tr{ + padding:6px; +} + +th{ + padding:4px; +} + +.trips{ + background-color:#EFC15F; +} + +.words{ + font-size:inherit; + font-weight:bold; +} + +.item{ + width:9%; + min-width:82px; + max-width:250px; + float:left; + cursor:pointer; + overflow:hidden; + text-overflow:ellipsis; + white-space: nowrap; +} + +.item_large{ + width:16%; + min-width:200px; + max-width:385px; + margin-right:8px; + float:left; + cursor:pointer; + overflow:hidden; + text-overflow:ellipsis; + white-space: nowrap; +} + +#logo{ + width: 150px; + height: 150px; + background-image: url("poster.png"); + background-size: 150px 150px; + background-repeat: no-repeat; + float:left; +} + +#header_container{ + width:600px; + height:auto; + margin:50px; + margin-bottom:100px; +} + + + +ul,#header{ + border-style:solid; + border-radius:14px; + border-color: #F30; + margin:7px; + padding:5px 10px 5px 10px; + border-width: 1px; +} + +input[type=checkbox]{ + height:27; + width:27; + margin:4px; +} + +#advanced_search{ + position: absolute; + box-shadow: 1px 1px 5px #F30; + z-index: 99; + width: 300px; + max-width: 30%; + min-width: 270px; + background-color:rgba(239,193,127,0.87); + font-size:16px; + display:none; + max-height:40%; + overflow:scroll; + overflow-y:auto; + overflow-x:hidden; +} + +#toolbox{ + float:right; + height:35px; + overflow:hidden; + display:block; +} + +#header{ + height:20px; + background-color:#EFC15F; + font-weight:bold; +} + + +#controller{ + min-width:200px; + padding:10px; +} + +#divePanel{ + padding:5px; + width:90%; + margin:0% 5% 0% 5%; + margin-bottom:50px; + background-color:rgba(253, 195, 141, 0.43); + box-shadow: 7px 7px 5px rgba(215, 107, 27, 0.43); +} + +button,#no_dives_selector{ + font-size:13px; + min-width:55px; + line-height:2; + margin:0px 0px 0px 0px; + border-radius:10px; + opacity:0.6; + border-style:outset; + border-color: #F30; + background-color:#F7F4DD; + border-width: 1px; + color:#111354; +} + +#no_dives_selector{ + padding:5px; + text-indent: 0.01px; + text-overflow: ''; +} + +button:hover{ + background-color:#EFC17F; +} + +a:hover{ + cursor: pointer; + text-decoration:underline; +} + +ul:hover{ + background-color:#EFC17F; +} + +#search_res{ + font-size:0.6em; + visibility:hidden; +} + +#search_input{ + border-radius:6px; + max-width:30%; + padding:3px; + opacity:0.6; + margin: 0px 5px 5px 5px; + border-style:outset; + border-color:black; +} + +#controlbox{ + margin:7px; + margin-bottom:10px; +} + +@media (max-width: 768px) { + #divePanel{ + padding:4px; + width:100%; + margin:0% 0% 0% 0%; + } +} -- cgit v1.2.3-70-g09d2