Skip to content

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

new CSS layout for smaller viewports

parent 104264d1
Hide whitespace changes
Inline Side-by-side
Showing with 219 additions and 211 deletions
libs/css2/selection-panels.css
View file @ bcaff55b
......@@ -19,12 +19,17 @@
}
#unselectbutton {
background-color: rgba(255,255,255,0)
color: #900;
font-weight: bold;
font-size: 70%;
float:right;
margin-top:.5em;
margin-right:1em;
position: absolute;
right: 24px;
top: 14px;
z-index: 6;
}
#unselectbutton:hover {
color: #400;
}
/* LEGEND PANEL */
......@@ -114,7 +119,7 @@
/* ZOOM IN OUT */
/* ZOOMBAR */
#ctlzoom {
position: fixed;
......@@ -137,6 +142,14 @@
#zoomSliderzone {
}
.zoombarbuttons {
position:relative; /* b/c they can contain absolute wait icon */
}
.zoombarbuttons:hover {
opacity: .7;
}
#edgesButton {
display: block;
width: 24px;
......@@ -167,67 +180,7 @@
background-position: -24px 0;
}
#lensButton {
display: block;
width: 36px;
height: 36px;
margin: 0 auto;
/*background:url("../libs/img2/loupe-edges2.png");*/
}
#lensButton:hover {
opacity: .7;
}
/*#lensButton {
background-position: -72px 0;
}
#lensButton:hover {
background-position: -36px 0;
}
#lensButton.off {
background-position: 0 0;
}
#lensButton.off:hover {
background-position: -108px 0;
}*/
#edgesButton {
display: block;
width: 36px;
height: 36px;
/*background:url("../libs/img2/loupe-edges.png");*/
margin: 0 auto;
}
.zoombarbuttons {
position:relative; /* b/c they can contain absolute wait icon */
}
.zoombarbuttons:hover {
opacity: .7;
}
/*#edgesButton {
background-position: -72px -36px;
}
#edgesButton:hover {
background-position: -36px -36px;
}
#edgesButton.off {
background-position: 0 -36px;
}
#edgesButton.off:hover {
background-position: -108px -36px;
}*/
/* ----------- */
#unfold {
display:none; width: 12px; height: 12px; background: rgb(250, 250, 252); padding: 2px 2px 2px 0; border-top-right-radius: 5px; border-bottom-right-radius: 5px; box-shadow: 1px 1px 2px #808090;
......@@ -276,10 +229,26 @@
display: none; /* because no are nodes selected at page init time */
}
#current-selection {
#tw-current-selection {
width: 100%; /* 100% within lefttopbox */
}
/* inside #tw-current-selection > #names */
#selectionsBox {
text-align:center;
background-color:white;
color:#250587;
margin: 7px;
padding: 3px;
border: 1px solid #666;
-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;
}
/* tweets inside topPapers */
.EmbeddedTweet-tweet {
......@@ -288,18 +257,126 @@
}
/* xs and smaller: for mobile */
@media(max-width:544px){
/* freshslider right-side cursor positioning fix
* (cf. freshslider.js l. 125) */
.fss-right {
margin-left: 0 !important ;
}
/* sm and smaller: for mobile */
@media(max-width:768px){
#lefttopbox {
top: 105px;
left: -15px;
width:30% ;
top: 105px;
left: 0;
width:30% ;
}
#lefttopbox h4 {
font-size: 10px;
}
/* zoombar re-positioned */
#ctlzoom {
position: fixed;
left: 10px ;
top: 170px;
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;
}
/* 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:500px) {
/* 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;
}
/* 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.css
View file @ bcaff55b
......@@ -15,6 +15,11 @@ html, body {
font-family: "Droid Sans", Calibri, "Helvetica Neue", Helvetica, sans-serif;
}
/* to display wait cursor */
html.waiting {
cursor: wait;
}
#sigma-contnr {
position: fixed;
top: 105px;
......@@ -72,84 +77,6 @@ html, body {
width: 50px !important;
}
/* xs and smaller: for mobile */
@media(max-width:544px){
html, body {
height: 100%;
width: 100%;
background-color: #eee;
font-family: "Droid Sans", Calibri, "Helvetica Neue", Helvetica, sans-serif;
}
#sigma-contnr {
position: fixed;
top: 105px;
left: 0;
right: 0;
height: 500px;
z-index: 1;
/* non selectable: we've got our own events here */
-webkit-user-select: none; /* Safari */
-moz-user-select: none; /* Firefox */
-ms-user-select: none; /* IE/Edge */
user-select: none; /* Chrome and Opera, future + */
}
#sidebar {
position: fixed;
top: 605px;
left: 0;
right: 0;
width: 100%;
z-index: 2;
border-left: 1px #222 solid;
overflow-y: scroll;
}
#toolbar {
position: fixed;
top: 35px;
left: 0;
right: 0;
z-index: 2;
height: 70px;
width: 100%;
border-bottom: 1px #222 solid;
font-size: 9px;
line-height: 10px;
}
#topbar {
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 2;
height: 35px;
width: 100%;
border-bottom: 1px #222 solid;
}
#twbrand {
font-family: "Gurajada", "Droid Sans", sans-serif ;
font-size: 24px;
width: 50px !important;
}
#topbar .container {
max-height: 35px !important;
width: 100%;
font-size: 9px ;
overflow-y: hidden;
}
}
/* toolbar contents */
#defaultop {
padding-top: 8px;
......@@ -221,21 +148,6 @@ html, body {
/* VARIAE */
#selectionsBox{
text-align:center;
background-color:white;
color:#250587;
margin: 7px;
padding: 3px;
border: 1px solid #666;
-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;
}
#oppositesBox{
margin: 0;
padding: 0;
......@@ -260,6 +172,10 @@ html, body {
}
#tab-container {
margin: 7px;
}
#topPapers{
display: none;
margin: 7px;
......@@ -267,14 +183,10 @@ html, body {
border-style:solid;
background-color:white;
color:black;
margin: 7px;
border: 1px solid #666;
-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;
}
......@@ -314,9 +226,9 @@ p.micromessage{
}
/* Example Styles for Demo */
.etabs { margin: 0; padding: 0; }
.etabs { margin: 0; padding: 0; line-height: 15px;}
.tab { display: inline-block; zoom:1; *display:inline; background: #eee; border: solid 1px #999; border-bottom: none; -moz-border-radius: 4px 4px 0 0; -webkit-border-radius: 4px 4px 0 0; }
.tab a { font-size: 12px; line-height: 2em; display: block; padding: 0 10px; outline: none; }
.tab a { font-size: 12px; line-height: 15px; display: block; padding: 0 5px 2px 5px; outline: none; }
.tab a:hover { text-decoration: underline; }
.tab.active { background: #fff; padding-top: 6px; position: relative; top: 1px; border-color: #666; }
.tab a.active { font-weight: bold; }
......@@ -426,50 +338,68 @@ p.micromessage{
}
/* viewport-specific variants */
/* collapsed variants */
/* sm and smaller: for mobile */
@media(max-width: 768px){
/* collapsed nav items don't need padding anymore */
#defaultop #searchnav {
padding-left: 15px !important;
body {
font-size: 10px;
}
#defaultop .weight-selectors {
padding-left: 15px !important;
margin-left: 0 !important;
#sigma-contnr {
top: 105px;
left: 0;
width: 100%;
height: 60%;
border-bottom: 1px #222 solid;
}
/* 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;
#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;
}
/* freshslider right-side cursor positioning fix
* (cf. freshslider.js l. 125)
*/
.fss-right {
margin-left: 0 !important ;
}
#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;
}
/* to display wait cursor
*/
html.waiting {
cursor: wait;
}
libs/img2/disperse.png
View replaced file @ 104264d1 View file @ bcaff55b
libs/img2/disperse.png

1.99 KB | W: | H:

libs/img2/disperse.png

1.82 KB | W: | H:

libs/img2/disperse.png
libs/img2/disperse.png
libs/img2/disperse.png
libs/img2/disperse.png
  • 2-up
  • Swipe
  • Onion skin
settings_explorerjs.js
View file @ bcaff55b
......@@ -239,9 +239,9 @@ TW.conf = (function(TW){
TWConf.circleSizeMin = 0;
TWConf.circleSizeMax = 100;
// size range for neighbor nodes "tagcloud"
TWConf.tagcloudFontsizeMin = 12;
TWConf.tagcloudFontsizeMax = 24;
// em size range for neighbor nodes "tagcloud" (1 = "normal size")
TWConf.tagcloudFontsizeMin = .5 ;
TWConf.tagcloudFontsizeMax = 2 ;
TWConf.tagcloudSameLimit = 50 // max displayed neighbors of the same type
TWConf.tagcloudOpposLimit = 10 // max displayed neighbors of the opposite type
......
tinawebJS/methods.js
View file @ bcaff55b
......@@ -480,7 +480,8 @@ function htmlProportionalLabels(elems , limit, selectableFlag) {
jspart = ' onclick="manualSelectNode(\''+id+'\')" onmouseover="manualForceLabel(\''+id+'\',true, true)" onmouseout="manualForceLabel(\''+id+'\',false, true)"'
}
let htmlLabel = '<span class="tagcloud-item" style="font-size:'+fontSize+'px;" '+jspart+'>'+ TW.Nodes[id].label+ '</span>';
// using em instead of px to allow global x% resize at css box level
let htmlLabel = '<span class="tagcloud-item" style="font-size:'+fontSize+'em;" '+jspart+'>'+ TW.Nodes[id].label+ '</span>';
resHtml.push(htmlLabel)
}
}
......
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