Skip to content

C
clinicaltrials
Commit def57317 authored by Romain Loth's avatar Romain Loth
Browse files
Options

safe and efficient sidepanel width setting 

simply change TW.conf.sidePanelSize to adjust the side panel setting, without affecting small viewport variants (with panel at full width)
parent ad4584d1
Hide whitespace changes
Inline Side-by-side
Showing with 284 additions and 233 deletions
explorerjs.html
View file @ def57317
......@@ -55,7 +55,10 @@
<!-- CSS -->
<link rel="stylesheet" href="libs/css2/twjs.css">
<link rel="stylesheet" href="libs/css2/twjs-mobile.css">
<link rel="stylesheet" href="libs/css2/selection-panels.css">
<link rel="stylesheet" href="libs/css2/selection-panels-mobile.css">
<link rel="stylesheet" href="libs/jquery-3/jquery-ui-1.12.1/jquery-ui.min.css" media="screen">
<link rel="stylesheet" href="libs/bootstrap-3/css/bootstrap.min.css" media="screen">
<!-- NB bs2/3 not used for main grid (graph + bars) but inside the bars -->
......
libs/css2/selection-panels-mobile.css 0 → 100644
View file @ def57317
/* viewport-specific variants */
/* sm and smaller: for mobile */
@media(max-width:768px){
#lefttopbox {
top: 105px;
left: 0;
width:30% ;
}
#lefttopbox h4 {
font-size: 10px;
}
/* zoombar re-positioned */
#ctlzoom {
right: 5px ;
bottom: calc(40% - 105px);
/* bot just above #sidebar which has top at calc(105px + 60%); */
}
/* "top left" */
#selectionsBox{
margin: 0;
padding: 3px 0;
}
#unselectbutton {
font-size: 60%;
right: 17px;
top: 7px;
}
.readmore-js-toggle {
font-size: 10px;
}
#defaultop #searchnav {
padding-left: 15px !important;
}
#defaultop .weight-selectors {
padding-left: 15px !important;
margin-left: 0 !important;
}
/* legend re-positioned */
.my-legend {
bottom: calc(40% - 105px);
/* bot just above #sidebar which has top at calc(105px + 60%); */
}
/* collapsed menu styling */
#left {
max-width: 320px;
background-color: #ddd;
overflow-x: hidden;
overflow-y: scroll;
z-index: 3;
padding: 5px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
-border-radius: 3px;
-moz-box-shadow: 0px 2px 6px #000;
-webkit-box-shadow: 0px 2px 6px #000;
box-shadow: 0px 2px 6px #000;
}
}
/* small width or small height */
@media(max-width:768px), (max-height:550px) {
/* zoombar reduction */
.zoombarbuttons img {
width: 20px !important;
}
#ctlzoom li:not(#zoomSliderzone) {
margin: 5px 0;
height: 18px;
width: 18px;
}
#zoomMinusButton, #zoomPlusButton {
margin-left: -2px;
}
#zoomSliderzone {
display: none;
}
/* legend reduction */
.my-legend {
max-width: 27%;
max-height: 25%;
padding: 0 2px;
font-size: 85%;
margin: 0 0 5px 0;
}
.my-legend .legend-title {
margin-bottom: 0;
font-size: 90%;
}
.my-legend .legend-scale ul {
margin-bottom: 0;
}
.my-legend .legend-scale ul li {
margin-left: 0;
line-height: 12px;
margin-bottom: 0;
}
.my-legend ul.legend-labels li span.lgdcol {
height: 11px;
width: 11px;
border: 1px solid #999;
}
/* smaller switch */
.onoffswitch {
width: 20px;
padding-left: 0px;
}
.onoffswitch-inner:before, .onoffswitch-inner:after {
height: 10px;
line-height: 10px;
font-size: 6px;
}
.onoffswitch-switch {
width: 5px;
border-radius: 20px;
}
.onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-inner {
margin-left: 0;
}
.onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-switch {
left: 16px;
}
/* switch css -- Edges instance */
#edges-switch-inner-label:before {
font-size: 4px;
padding-left: 2px;
}
#edges-switch-inner-label:after {
font-size: 4px;
padding-right: 2px;
}
}
libs/css2/selection-panels.css
View file @ def57317
......@@ -214,154 +214,3 @@
.fss-right {
margin-left: 0 !important ;
}
/* sm and smaller: for mobile */
@media(max-width:768px){
#lefttopbox {
top: 105px;
left: 0;
width:30% ;
}
#lefttopbox h4 {
font-size: 10px;
}
/* zoombar re-positioned */
#ctlzoom {
right: 5px ;
bottom: calc(40% - 105px);
/* bot just above #sidebar which has top at calc(105px + 60%); */
}
/* "top left" */
#selectionsBox{
margin: 0;
padding: 3px 0;
}
#unselectbutton {
font-size: 60%;
right: 17px;
top: 7px;
}
.readmore-js-toggle {
font-size: 10px;
}
#defaultop #searchnav {
padding-left: 15px !important;
}
#defaultop .weight-selectors {
padding-left: 15px !important;
margin-left: 0 !important;
}
/* legend re-positioned */
.my-legend {
bottom: calc(40% - 105px);
/* bot just above #sidebar which has top at calc(105px + 60%); */
}
/* collapsed menu styling */
#left {
max-width: 320px;
background-color: #ddd;
overflow-x: hidden;
overflow-y: scroll;
z-index: 3;
padding: 5px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
-border-radius: 3px;
-moz-box-shadow: 0px 2px 6px #000;
-webkit-box-shadow: 0px 2px 6px #000;
box-shadow: 0px 2px 6px #000;
}
}
/* small width or small height */
@media(max-width:768px), (max-height:550px) {
/* zoombar reduction */
.zoombarbuttons img {
width: 20px !important;
}
#ctlzoom li:not(#zoomSliderzone) {
margin: 5px 0;
height: 18px;
width: 18px;
}
#zoomMinusButton, #zoomPlusButton {
margin-left: -2px;
}
#zoomSliderzone {
display: none;
}
/* legend reduction */
.my-legend {
max-width: 27%;
max-height: 25%;
padding: 0 2px;
font-size: 85%;
margin: 0 0 5px 0;
}
.my-legend .legend-title {
margin-bottom: 0;
font-size: 90%;
}
.my-legend .legend-scale ul {
margin-bottom: 0;
}
.my-legend .legend-scale ul li {
margin-left: 0;
line-height: 12px;
margin-bottom: 0;
}
.my-legend ul.legend-labels li span.lgdcol {
height: 11px;
width: 11px;
border: 1px solid #999;
}
/* smaller switch */
.onoffswitch {
width: 20px;
padding-left: 0px;
}
.onoffswitch-inner:before, .onoffswitch-inner:after {
height: 10px;
line-height: 10px;
font-size: 6px;
}
.onoffswitch-switch {
width: 5px;
border-radius: 20px;
}
.onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-inner {
margin-left: 0;
}
.onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-switch {
left: 16px;
}
/* switch css -- Edges instance */
#edges-switch-inner-label:before {
font-size: 4px;
padding-left: 2px;
}
#edges-switch-inner-label:after {
font-size: 4px;
padding-right: 2px;
}
}
libs/css2/twjs-mobile.css 0 → 100644
View file @ def57317
/* fixed TWJS grid: viewport-specific variants
* -------------------------------------------
*/
/* sm and smaller: for mobile */
@media(max-width: 768px){
body {
font-size: 10px;
}
#sigma-contnr {
top: 105px;
left: 0;
width: 100%;
height: 60%;
border-bottom: 1px #222 solid;
}
#sidebar {
top: calc(105px + 60%);
bottom: 0;
height: 25%;
width: 100%;
background-color: #CCC;
}
#topPapers {
-moz-box-shadow: none ;
-webkit-box-shadow: none ;
box-shadow: none;
}
#toolbar {
}
/* £TODO de-collapsed but smaller */
#topbar {
}
#twbrand {
font-size: 12px;
width: 30px !important;
}
#topbar .container {
max-height: 35px !important;
width: 100%;
font-size: 9px ;
overflow-y: hidden;
}
/* in percentage of what htmlProportionalLabels() calculates*/
#sameNodes {
font-size: 75%;
}
.etabs {
font-size: 10px;
line-height: 10px;
}
}
libs/css2/twjs.css
View file @ def57317
......@@ -341,70 +341,3 @@ ul.infoitems {
background-color: #EEEEEE; color: #999999;
text-align: right;
}
/* viewport-specific variants */
/* sm and smaller: for mobile */
@media(max-width: 768px){
body {
font-size: 10px;
}
#sigma-contnr {
top: 105px;
left: 0;
width: 100%;
height: 60%;
border-bottom: 1px #222 solid;
}
#sidebar {
top: calc(105px + 60%);
bottom: 0;
height: 25%;
width: 100%;
background-color: #CCC;
}
#topPapers {
-moz-box-shadow: none ;
-webkit-box-shadow: none ;
box-shadow: none;
}
#toolbar {
}
/* £TODO de-collapsed but smaller */
#topbar {
}
#twbrand {
font-size: 12px;
width: 30px !important;
}
#topbar .container {
max-height: 35px !important;
width: 100%;
font-size: 9px ;
overflow-y: hidden;
}
/* in percentage of what htmlProportionalLabels() calculates*/
#sameNodes {
font-size: 75%;
}
.etabs {
font-size: 10px;
line-height: 10px;
}
}
settings_explorerjs.js
View file @ def57317
......@@ -179,9 +179,11 @@ TW.conf = (function(TW){
TWConf.ModulesFlags["crowdsourcingModule"] = true ;
// Other optional functionalities
// -----------------------------
TWConf.filterSliders = true // show sliders for nodes/edges subsets
// Other GUI options
// ------------------
TWConf.sidePanelSize = "300px" // width of the side panel (def: 400px)
TWConf.filterSliders = true // show sliders for nodes/edges subsets
TWConf.clusterColorsAtt = true; // show "Set colors" menu
......@@ -200,6 +202,7 @@ TW.conf = (function(TW){
// TW.geomap = false;
// TW.twittertimeline = false;
TWConf.maxPastStates = 5 ; // number of TW.states to remember (~CTRL-Z)
......
tinawebJS/Tinaweb.js
View file @ def57317
......@@ -598,6 +598,40 @@ var TinaWebJS = function ( sigmacanvas ) {
var body=document.getElementsByTagName('body')[0];
body.style.paddingTop="41px";
// side panel width
if(TW.conf.sidePanelSize && TW.conf.sidePanelSize != "400px") {
// change stylesheet rules preferably to element style directly
// (this way we don't block the mobile-variants CSS effects,
// b/c twjs-mobile.css is loaded after twjs.css in the html)
if (TW.gui.sheets) {
if (TW.gui.sheets.main) {
TW.gui.sheets.main.insertRule(
`#sidebar {width: ${TW.conf.sidePanelSize};}`,
TW.gui.sheets.main.cssRules.length
)
TW.gui.sheets.main.insertRule(
`#sigma-contnr {right: ${TW.conf.sidePanelSize};}`,
TW.gui.sheets.main.cssRules.length
)
}
if (TW.gui.sheets.panels) {
TW.gui.sheets.panels.insertRule(
`#ctlzoom {right: calc(${TW.conf.sidePanelSize} + 10px);}`,
TW.gui.sheets.panels.cssRules.length
)
}
}
// otherwise we do it the easy way
else {
console.warn("Couldn't identify twjs.css and selection-panels.css")
document.getElementById('sidebar').style.width = TW.conf.sidePanelSize
document.getElementById('sigma-contnr').style.right = TW.conf.sidePanelSize
document.getElementById('ctlzoom').style.right = `calc(${TW.conf.sidePanelSize} + 10px)`
}
}
// tab handlers
$('.etabs').click(function(){
setTimeout(
function() {
......@@ -713,7 +747,7 @@ var TinaWebJS = function ( sigmacanvas ) {
$("#noverlapButton").click(function () {
if(! TW.partialGraph.isNoverlapRunning()) {
// show waiting cursor on page and button
theHtml.classList.add('waiting');
TW.gui.elHtml.classList.add('waiting');
this.style.cursor = 'wait'
// and waiting icon
this.insertBefore(createWaitIcon('noverlapwait'), this.children[0])
......@@ -723,7 +757,7 @@ var TinaWebJS = function ( sigmacanvas ) {
listener.bind('stop', function(event) {
var stillRunning = document.getElementById('noverlapwait')
if (stillRunning) {
theHtml.classList.remove('waiting');
TW.gui.elHtml.classList.remove('waiting');
noverButton.style.cursor = 'auto'
stillRunning.remove()
}
......@@ -775,8 +809,8 @@ var TinaWebJS = function ( sigmacanvas ) {
if (window.TW.partialGraph && window.TW.partialGraph.refresh) {
window.TW.partialGraph.refresh()
}
if (theHtml.classList) {
theHtml.classList.remove('waiting');
if (TW.gui.elHtml.classList) {
TW.gui.elHtml.classList.remove('waiting');
}
}, 3000)
}, true)
......
tinawebJS/enviroment.js
View file @ def57317
'use strict;'
// always useful
var theHtml = document.getElementsByTagName('html')[0]
// GUI commodity pointers
TW.gui = {}
TW.gui.elHtml = document.getElementsByTagName('html')[0]
TW.gui.sheets = {}
for (var i in document.styleSheets) {
if (/twjs.css$/.test(document.styleSheets[i].href)) {
TW.gui.sheets.main = document.styleSheets[i]
}
else if (/selection-panels.css$/.test(document.styleSheets[i].href)) {
TW.gui.sheets.panels = document.styleSheets[i]
}
}
// GUI vars
TW.gui = {}
TW.gui.selectionActive = false // <== changes rendering mode
TW.gui.circleSize = 0;
TW.gui.circleSlider = null
......@@ -430,7 +439,7 @@ function changeType() {
//
function changeLevel() {
// show waiting cursor
theHtml.classList.add('waiting');
TW.gui.elHtml.classList.add('waiting');
// let the waiting cursor appear
setTimeout(function() {
......@@ -542,7 +551,7 @@ function changeLevel() {
reInitFa2({
useSoftMethod: !futurelevel,
callback: function() {
theHtml.classList.remove('waiting');
TW.gui.elHtml.classList.remove('waiting');
// when going local, it's nice to see the selected nodes rearrange
if (!futurelevel) {
......@@ -646,7 +655,7 @@ function EdgeWeightFilter(sliderDivID , typestr , criteria) {
max:steps-1,
value:[0,steps-1],
onchange:function(low, high) {
theHtml.classList.add('waiting');
TW.gui.elHtml.classList.add('waiting');
// 40ms timeout to let the waiting cursor appear
setTimeout(function() {
......@@ -813,7 +822,7 @@ function EdgeWeightFilter(sliderDivID , typestr , criteria) {
// in any case
setTimeout( function() {
theHtml.classList.remove('waiting')
TW.gui.elHtml.classList.remove('waiting')
}, 20)
}, 1500) // large-ish debounce timeout
......
tinawebJS/main.js
View file @ def57317
......@@ -627,7 +627,7 @@ function mainStartGraph(inFormat, inData, twInstance) {
}
setTimeout( function() {
theHtml.classList.remove('waiting')
TW.gui.elHtml.classList.remove('waiting')
}, 20)
console.log("finish")
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