derekovecs: flex layout + hidden details
diff --git a/templates/index.html.ep b/templates/index.html.ep
index d818149..a649811 100644
--- a/templates/index.html.ep
+++ b/templates/index.html.ep
@@ -210,19 +210,24 @@
}
});
+ // var filterQuot = /(^quot?=[A-Z])|(quot$)/g;
+ var filterQuot = /^quot/;
classicCollocatorTable = $('#classicoloctable').DataTable({
ajax: {
- method: "GET",
- url: '/derekovecs/getClassicCollocators',
- dataType: 'json',
- dataSrc: "",
- timeout: 30000,
- data: { w: paraResults[0][0].rank }
+ method: "GET",
+ url: '/derekovecs/getClassicCollocators',
+ dataType: 'json',
+ dataSrc: "",
+ timeout: 30000,
+ data: { w: paraResults[0][0].rank }
},
"initComplete":function(settings, json){
$("td.collocator").click(function(){
queryKorAPCII(this.textContent + " /w5 " + CIIsearchWords);
});
+ classicCollocatorTable.columns(".detail").visible(false);
+ $("#ccd").css('width', '450px');
+ classicCollocatorTable.columns.adjust().draw();
},
"sScrollY": "780px",
"bScrollCollapse": true,
@@ -235,15 +240,16 @@
{ "data": "lfmd", render: function ( data, type, row ) {return data.toFixed(1) }},
// { "data": "fpmi", type: "scientific", render: function ( data, type, row ) {return data.toExponential(2) } },
{ "data": "npmi", render: function ( data, type, row ) {return data.toFixed(2) }},
- { "data": "llfmd", class: "detail", render: function ( data, type, row ) {return data.toFixed(1) }},
- { "data": "rlfmd", class: "detail", render: function ( data, type, row ) {return data.toFixed(1) }},
- { "data": "lnpmi", class: "detail", render: function ( data, type, row ) {return data.toFixed(2) }},
- { "data": "rnpmi", class: "detail", render: function ( data, type, row ) {return data.toFixed(2) }},
+ { "data": "llfmd", render: function ( data, type, row ) {return data.toFixed(1) }},
+ { "data": "rlfmd", render: function ( data, type, row ) {return data.toFixed(1) }},
+ { "data": "lnpmi", render: function ( data, type, row ) {return data.toFixed(2) }},
+ { "data": "rnpmi", render: function ( data, type, row ) {return data.toFixed(2) }},
{ "data": "f" },
{ "data": "word", sClass: "collocator" }
],
"columnDefs": [
{ className: "dt-right", "targets": [0,1,2,3,4,5,6,7] },
+ { className: "dt-right detail", "targets": [3,4,5,6] },
{ "searchable": false,
"orderable": false,
"targets": []
@@ -262,140 +268,143 @@
var columns = classicCollocatorTable.columns(".detail");
if(this.checked) {
columns.visible(true);
+ $("#ccd").css('width', 'auto');
} else {
columns.visible(false);
+ $("#ccd").css('width', '450px');
}
+ classicCollocatorTable.columns.adjust().draw();
} );
- $("td.collocator").click(function(){
- queryKorAPCII(this.textContent + " /w5 " + CIIsearchWords);
- });
-
- collocatorTable.on( 'order.dt search.dt', function () {
- collocatorTable.column(0, {order:'applied'}).nodes().each( function (cell, i) {
- cell.innerHTML = i+1;
- } );
- }).draw();
- }
-
- if (localStorage && !window.location.hash) { // let's not crash if some user has IE7
- var index = parseInt(localStorage['tab']||'0');
- $("#tabs").tabs({ active: index });
- }
- $("#tabs").css("visibility", "visible"); // now we can show the tabs
- });
-
- $(function(){
- $("#dropdownoptions").dialog({
- title: "Options",
- autoOpen: false,
- modal: false,
- draggable: false,
- height: "auto",
- width: "auto",
- resizable: false,
- buttons: {
- "Cancel": function() {
- $( this ).dialog( "close" );
- },
- "Apply": function() {
- window.open($(location).attr('pathname')+'?'+$('form').serialize(), "_self");
- }
- }
+ $("td.collocator").click(function(){
+ queryKorAPCII(this.textContent + " /w5 " + CIIsearchWords);
});
- });
- $(function(){
- $("#showoptions").click(function(){
- $("#dropdownoptions").dialog("open");
- var target = $(this);
- $("#dropdownoptions").dialog("widget").position({
- my: 'left bottom',
- at: 'left bottom',
- of: target
- });
- });
- });
+ collocatorTable.on( 'order.dt search.dt', function () {
+ collocatorTable.column(0, {order:'applied'}).nodes().each( function (cell, i) {
+ cell.innerHTML = i+1;
+ } );
+ }).draw();
+ }
- $( function() {
- $( "#no_iterations" ).spinner({
- spin: function( event, ui ) {
- if ( ui.value < 1000 ) {
- $( this ).spinner( "value", 1000 );
- return false;
- } else if ( ui.value > 10000 ) {
- $( this ).spinner( "value", 10000 );
- return false;
- }
- }
- });
- } );
+ if (localStorage && !window.location.hash) { // let's not crash if some user has IE7
+ var index = parseInt(localStorage['tab']||'0');
+ $("#tabs").tabs({ active: index });
+ }
+ $("#tabs").css("visibility", "visible"); // now we can show the tabs
+ });
- $( function() {
- $( "#neighbours" ).spinner({
- spin: function( event, ui ) {
- if ( ui.value < 0 ) {
- $( this ).spinner( "value", 0 );
- return false;
- } else if ( ui.value > 200 ) {
- $( this ).spinner( "value", 200 );
- return false;
- }
- }
- });
- } );
-
- $( function() {
- $( "#cutoff" ).spinner({
- spin: function( event, ui ) {
- if ( ui.value < 100000 ) {
- $( this ).spinner( "value", 100000 );
- return false;
- } else if ( ui.value > 2000000 ) {
- $( this ).spinner( "value", 2000000 );
- return false;
- }
- }
- });
- } );
-
- $( function() {
- $( "#tabs" ).tabs().addClass('tabs-min');
- } );
-
- $( function() {
- $( ".controlgroup-vertical" ).controlgroup({
- "direction": "vertical"
- });
- } );
-
- $(function() {
- $( document ).tooltip({
- content: function() {
- return $(this).attr('title');
- }}
- )
- });
-
- $(function () {
- $(document).tooltip({
- content: function () {
- return $(this).prop('title');
+ $(function(){
+ $("#dropdownoptions").dialog({
+ title: "Options",
+ autoOpen: false,
+ modal: false,
+ draggable: false,
+ height: "auto",
+ width: "auto",
+ resizable: false,
+ buttons: {
+ "Cancel": function() {
+ $( this ).dialog( "close" );
},
- show: null,
- close: function (event, ui) {
- ui.tooltip.hover(
- function () {
- $(this).stop(true).fadeTo(400, 1);
- },
- function () {
- $(this).fadeOut("400", function () {
- $(this).remove();
- })
- });
+ "Apply": function() {
+ window.open($(location).attr('pathname')+'?'+$('form').serialize(), "_self");
}
+ }
+ });
+ });
+
+ $(function(){
+ $("#showoptions").click(function(){
+ $("#dropdownoptions").dialog("open");
+ var target = $(this);
+ $("#dropdownoptions").dialog("widget").position({
+ my: 'left bottom',
+ at: 'left bottom',
+ of: target
});
});
+ });
+
+ $( function() {
+ $( "#no_iterations" ).spinner({
+ spin: function( event, ui ) {
+ if ( ui.value < 1000 ) {
+ $( this ).spinner( "value", 1000 );
+ return false;
+ } else if ( ui.value > 10000 ) {
+ $( this ).spinner( "value", 10000 );
+ return false;
+ }
+ }
+ });
+ } );
+
+ $( function() {
+ $( "#neighbours" ).spinner({
+ spin: function( event, ui ) {
+ if ( ui.value < 0 ) {
+ $( this ).spinner( "value", 0 );
+ return false;
+ } else if ( ui.value > 200 ) {
+ $( this ).spinner( "value", 200 );
+ return false;
+ }
+ }
+ });
+ } );
+
+ $( function() {
+ $( "#cutoff" ).spinner({
+ spin: function( event, ui ) {
+ if ( ui.value < 100000 ) {
+ $( this ).spinner( "value", 100000 );
+ return false;
+ } else if ( ui.value > 2000000 ) {
+ $( this ).spinner( "value", 2000000 );
+ return false;
+ }
+ }
+ });
+ } );
+
+ $( function() {
+ $( "#tabs" ).tabs().addClass('tabs-min');
+ } );
+
+ $( function() {
+ $( ".controlgroup-vertical" ).controlgroup({
+ "direction": "vertical"
+ });
+ } );
+
+ $(function() {
+ $( document ).tooltip({
+ content: function() {
+ return $(this).attr('title');
+ }}
+ )
+ });
+
+ $(function () {
+ $(document).tooltip({
+ content: function () {
+ return $(this).prop('title');
+ },
+ show: null,
+ close: function (event, ui) {
+ ui.tooltip.hover(
+ function () {
+ $(this).stop(true).fadeTo(400, 1);
+ },
+ function () {
+ $(this).fadeOut("400", function () {
+ $(this).remove();
+ })
+ });
+ }
+ });
+ });
</script>
<script src="//d3js.org/d3.v3.min.js" charset="utf-8"></script>
<script src="/derekovecs/js/tsne.js"></script>
@@ -511,13 +520,18 @@
#topwrapper {
width: 100%;
- // border: 1px solid red;
- overflow: hidden; /* will contain if #first is longer than #second */
+ display: flex;
+// border: 1px solid red;
}
#wrapper {
+ width: 100%;
+ display: flex;
+ flex-wrap: wrap;
+ padding:5px;
+// border: 1px solid green;
// border: 1px solid red;
- overflow: hidden; /* will contain if #first is longer than #second */
+ // overflow: hidden; /* will contain if #first is longer than #second */
}
#pagetitle {
@@ -920,7 +934,7 @@
<div id="tabs-1">
% if($lists && (@$lists) > 0 && (@$lists)[0]) {
<div id="wrapper">
- <div id="first" style="width: 320px">
+ <div id="first" style="min-width: 320px; margin-bottom: 15px;">
<table class="display compact nowrap" id="firsttable">
<thead>
<tr>
@@ -976,14 +990,14 @@
</div>
% }
</div>
- <div id="tabs-2">
+ <div id="tabs-2" style="display: flex; padding: 5px; flex-flow: row wrap;">
<div id="som2" style="width: 800;">
+ <div id="sominfo1"><span id="somcolor1"> </span> <span id="somword1"> </span> <span id="somcolor2"> </span> <span id="somword2"> </span> <span id="somcolor3"> </span></div>
+ <div id="sominfo" style="text-align: right">SOM iteration <span id="iterations">0</span></div>
</div>
- <div id="sominfo1"><span id="somcolor1"> </span> <span id="somword1"> </span> <span id="somcolor2"> </span> <span id="somword2"> </span> <span id="somcolor3"> </span></div>
- <div id="sominfo">SOM iteration <span id="iterations">0</span></div>
</div>
- <div id="tabs-3" style="width:1500px">
- <div style="width: 45%; float: left;" id="secondt">
+ <div id="tabs-3" style="display: flex; padding:5px; flex-flow: row wrap;">
+ <div style="margin-right: 20px; margin-bottom: 10px;" id="secondt">
<table class="display compact nowrap" id="secondtable">
<thead>
<tr>
@@ -1017,7 +1031,7 @@
</tbody>
</table>
</div>
- <div id="ccd" style="margin-left:0px; float:right; width:800px;">
+ <div id="ccd" style="">
<table class="display compact nowrap" id="classicoloctable">
<thead>
% if($collocators) {
@@ -1055,8 +1069,10 @@
</tbody>
</table>
</div>
+<!--
<div style="clear:both" ></div>
<div style="float: right; overflow: hidden" id="extra"><button onClick="showCollocatorSOM()"> </button></div>
+-->
</div>
</div>
</div> <!-- topwrapper -->