diff --git a/index.html b/index.html
index cdbf235506be0474626c12e671e3a3f314e94a16..556479a6db5bc563ec91d7dfbc342f2e4b6767fe 100644
--- a/index.html
+++ b/index.html
@@ -93,12 +93,12 @@
<!-- ATLAS tab -->
<div id="browse_tab" class="tabcontent">
- <div class="proportional-layout proportional-layout-responsive-flow-wide shadowed-block">
- <div id="browse-layout-first">
+ <div id="browse-layout-container" class="proportional-layout proportional-layout-responsive-flow-wide shadowed-block">
+ <div id="browse-layout-first" class="browse-layout-first-expanded">
<div id='browse-fragments-table'></div>
<p id="wva-browse-status"></p>
</div>
- <div id="browse-layout-second">
+ <div id="browse-layout-second" class="browse-layout-second-expanded">
<div id="wva-app-browse"></div>
</div>
</div>
@@ -257,7 +257,8 @@ const WATNA_PRELOAD_ABZ = true;
let SCROLL_EVT_HANDLERS = [];
let CURRENT_ACTIVE_TAB = null;
-let PREGENERATED_TABLES = {}
+let PREGENERATED_TABLES = {};
+let COLL_EXPD_CALLBACKS = {};
function fragment_cell_id(fragId, tag) {
return `fragment-cell-${fragId}-${tag}`;
@@ -475,12 +476,15 @@ function mk_ntc_seq_table_code(ntcs, titleHTML) {
}
/* Sequences horizontal, NtC classes vertical */
-function mk_seq_ntc_table_code(ntcs, sequences, title, title_collapsed, tainer_id) {
+function mk_seq_ntc_table_code(ntcs, sequences, title, title_collapsed, tainer_id, coll_expd_callback) {
let has_unreliable = false;
let code = '';
let code_collapsed = '';
- const toggle_func = (c) => toggler(c);
+ COLL_EXPD_CALLBACKS[tainer_id] = (state) => {
+ if (coll_expd_callback)
+ coll_expd_callback(state);
+ };
code += '<table class="ntc-seq-table">';
/* Make table caption */
@@ -488,7 +492,7 @@ function mk_seq_ntc_table_code(ntcs, sequences, title, title_collapsed, tainer_i
if (tainer_id) {
code += '<div class="collapsible-table-header">'
code += title;
- code += `<div class="wva-pushbutton wva-pushbutton-border wva-symbolic-pushbutton" onclick="document.querySelector('#${tainer_id}').innerHTML = PREGENERATED_TABLES['${tainer_id}'].collapsed; redraw_molstar();"><img src="assets/imgs/triangle-down.svg" /></div>`;
+ code += `<div class="wva-pushbutton wva-pushbutton-border wva-symbolic-pushbutton" onclick="document.querySelector('#${tainer_id}').innerHTML = PREGENERATED_TABLES['${tainer_id}'].collapsed; COLL_EXPD_CALLBACKS['${tainer_id}']('collapsed'); redraw_molstar();"><img src="assets/imgs/triangle-down.svg" /></div>`;
code += '</div>';
} else
code = `<div class="ntc-seq-title-text">${title}</div>`;
@@ -539,7 +543,7 @@ function mk_seq_ntc_table_code(ntcs, sequences, title, title_collapsed, tainer_i
code_collapsed += '<tr><td>';
code_collapsed += '<div class="collapsible-table-header">'
code_collapsed += title_collapsed;
- code_collapsed += `<div class="wva-pushbutton wva-pushbutton-border wva-symbolic-pushbutton" onclick="document.querySelector('#${tainer_id}').innerHTML = PREGENERATED_TABLES['${tainer_id}'].expanded; redraw_molstar();"><img src="assets/imgs/triangle-left.svg" /></div>`;
+ code_collapsed += `<div class="wva-pushbutton wva-pushbutton-border wva-symbolic-pushbutton" onclick="document.querySelector('#${tainer_id}').innerHTML = PREGENERATED_TABLES['${tainer_id}'].expanded; COLL_EXPD_CALLBACKS['${tainer_id}']('expanded'); redraw_molstar();"><img src="assets/imgs/triangle-left.svg" /></div>`;
code_collapsed += '</div>';
code_collapsed += '</td></tr>';
code_collapsed += '<tr><td>...</td></tr>';
@@ -578,11 +582,46 @@ function fill_zee_table() {
}
function fill_browse_table() {
+ const change_responsive_width = (state) => {
+ console.log(state);
+
+ const states = [ 'collapsed', 'expanded' ];
+ const classes = {
+ 'collapsed': [
+ 'browse-layout-first-collapsed',
+ 'browse-layout-second-collapsed',
+ 'proportional-layout-responsive-flow-narrow',
+ ],
+ 'expanded': [
+ 'browse-layout-first-expanded',
+ 'browse-layout-second-expanded',
+ 'proportional-layout-responsive-flow-wide',
+ ],
+ };
+
+ const elems = [
+ document.querySelector('#browse-layout-first'),
+ document.querySelector('#browse-layout-second'),
+ document.querySelector('#browse-layout-container'),
+ ];
+
+ if (!elems[0] || !elems[1])
+ return;
+
+ const switchingOrder = state === 'collapsed' ? [ states[1], states[0] ] : [ states[0], states[1] ];
+
+ for (let idx = 0; idx < elems.length; idx++)
+ elems[idx].classList.remove(classes[switchingOrder[0]][idx]);
+ for (let idx = 0; idx < elems.length; idx++)
+ elems[idx].classList.add(classes[switchingOrder[1]][idx]);
+ };
+
const { code, code_collapsed, has_unreliable } = mk_seq_ntc_table_code(
WATNA_NTCS, watna_sequences(),
'<div><strong>Table 3:</strong> Number of water molecules for each NtC/sequence category.</div>',
'<div class="dont-wrap"><strong>Table 3:</strong> ...</div>',
- 'browse-fragments-table'
+ 'browse-fragments-table',
+ change_responsive_width
);
PREGENERATED_TABLES['browse-fragments-table'] = {
diff --git a/watna.css b/watna.css
index 04261b3ec04a09262452f9345e10348e4d210699..4d8a1e20371166bcb2cd9614d8642496ad664de4 100644
--- a/watna.css
+++ b/watna.css
@@ -43,7 +43,16 @@ td.disabled {
}
@media screen and (min-width: 100em) {
- #browse-layout-first {
+ .browse-layout-first-expanded {
+ width: min-content;
+ overflow: scroll;
+ position: relative;
+ -ms-overflow-style: none; /* IE and Edge */
+ scrollbar-width: none; /* Firefox */
+ }
+}
+@media screen and (min-width: 50em) {
+ .browse-layout-first-collapsed {
width: min-content;
overflow: scroll;
position: relative;
@@ -53,7 +62,17 @@ td.disabled {
}
@media screen and (max-width: 100em) {
- #browse-layout-first {
+ .browse-layout-first-expanded {
+ flex: 1;
+ min-height: 6em;
+ overflow: scroll;
+ position: relative;
+ -ms-overflow-style: none; /* IE and Edge */
+ scrollbar-width: none; /* Firefox */
+ }
+}
+@media screen and (max-width: 50em) {
+ .browse-layout-first-collapsed {
flex: 1;
min-height: 6em;
overflow: scroll;
@@ -68,14 +87,27 @@ td.disabled {
}
@media screen and (min-width: 100em) {
- #browse-layout-second {
+ .browse-layout-second-expanded {
+ display: flex;
+ flex: 1;
+ }
+}
+@media screen and (min-width: 50em) {
+ .browse-layout-second-collapsed {
display: flex;
flex: 1;
}
}
@media screen and (max-width: 100em) {
- #browse-layout-second {
+ .browse-layout-second-expanded {
+ display: flex;
+ flex: 3;
+ overflow: auto;
+ }
+}
+@media screen and (max-width: 50em) {
+ .browse-layout-second-collapsed {
display: flex;
flex: 3;
overflow: auto;
@@ -319,6 +351,18 @@ td.disabled {
}
}
+@media screen and (min-width: 50em) {
+ .proportional-layout-responsive-flow-narrow {
+ flex-direction: row;
+ }
+}
+
+@media screen and (max-width: 50em) {
+ .proportional-layout-responsive-flow-narrow {
+ flex-direction: column;
+ }
+}
+
.pushbutton {
-moz-appearance: none;
-webkit-appearance: none;