mirror of
https://github.com/galaxyproject/galaxy.git
synced 2026-09-22 22:30:57 +08:00
Popupmenu mvc: fix anchor target in renderOptions; Visualizations registry: default link target to galaxy_main; Scatterplot (in registry): general refactoring and cleanup, paginate data instead of loading all, allow zoom and pan; pack scripts
This commit is contained in:
Carl Eberhard
@@ -1,171 +1,199 @@
|
||||
/*TODO: use/move into base.less*/
|
||||
* { margin: 0px; padding: 0px; }
|
||||
|
||||
/* -------------------------------------------- general layout */
|
||||
div.tab-pane {
|
||||
padding: 8px;
|
||||
}
|
||||
* { margin: 0; padding: 0; }
|
||||
|
||||
/* -------------------------------------------- header */
|
||||
.header {
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
.chart-header > * { margin: 0; padding: 0; }
|
||||
|
||||
#chart-header {
|
||||
padding : 8px;
|
||||
background-color: #ebd9b2;
|
||||
.chart-header {
|
||||
margin-bottom: 16px;
|
||||
overflow: auto;
|
||||
background-color: #ebd9b2;
|
||||
padding : 16px 12px 12px 12px;
|
||||
}
|
||||
|
||||
#chart-header .subtitle {
|
||||
margin: -4px 0px 0px 4px;
|
||||
padding : 0;
|
||||
.chart-header h2 {
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.chart-header p {
|
||||
color: white;
|
||||
font-size: small;
|
||||
}
|
||||
|
||||
/* -------------------------------------------- main layout */
|
||||
#scatterplot {
|
||||
/*from width + margin of chart?*/
|
||||
.scatterplot-editor > * { margin: 0; padding: 0; }
|
||||
.scatterplot-editor .tab-pane {
|
||||
padding: 8px;
|
||||
}
|
||||
|
||||
.scatterplot-container .tab-pane {
|
||||
.scatterplot-editor .help-text,
|
||||
.scatterplot-editor .help-text-small {
|
||||
color: grey;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
/* -------------------------------------------- all controls */
|
||||
.scatterplot-editor .help-text {
|
||||
margin-top: 4px;
|
||||
}
|
||||
|
||||
#scatterplot input[type=button],
|
||||
#scatterplot select {
|
||||
.scatterplot-editor .help-text-small {
|
||||
font-size: smaller;
|
||||
}
|
||||
|
||||
/* ============================================ config controls */
|
||||
.scatterplot-config-control {
|
||||
max-width: 768px;
|
||||
}
|
||||
|
||||
.scatterplot-config-control input[type="button"],
|
||||
.scatterplot-config-control button,
|
||||
.scatterplot-config-control select {
|
||||
width: 100%;
|
||||
max-width: 256px;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
#scatterplot .help-text,
|
||||
#scatterplot .help-text-small {
|
||||
color: grey;
|
||||
.scatterplot-config-control input[type="text"] {
|
||||
width: 100%;
|
||||
max-width: 512px;
|
||||
border: 1px solid lightgrey;
|
||||
}
|
||||
|
||||
#scatterplot .help-text {
|
||||
padding-bottom: 16px;
|
||||
.scatterplot-config-control input[type="checkbox"] {
|
||||
display: inline-block;
|
||||
margin-top: -3px;
|
||||
}
|
||||
|
||||
#scatterplot .help-text-small {
|
||||
padding: 4px;
|
||||
font-size: smaller;
|
||||
}
|
||||
|
||||
#scatterplot > * {
|
||||
}
|
||||
|
||||
#scatterplot input[value=Draw] {
|
||||
.scatterplot-config-control .render-button {
|
||||
display: block;
|
||||
margin-top: 16px;
|
||||
}
|
||||
|
||||
#scatterplot .numeric-slider-input {
|
||||
max-width: 70%;
|
||||
}
|
||||
|
||||
/* -------------------------------------------- data controls */
|
||||
|
||||
/* -------------------------------------------- chart controls */
|
||||
#chart-control .form-input {
|
||||
/*display: table-row;*/
|
||||
}
|
||||
|
||||
#chart-control label {
|
||||
/*text-align: right;*/
|
||||
.scatterplot-config-control .form-input {
|
||||
margin-bottom: 8px;
|
||||
/*display: table-cell;*/
|
||||
}
|
||||
|
||||
#chart-control .slider {
|
||||
/*display: table-cell;*/
|
||||
.scatterplot-config-control .slider {
|
||||
height: 8px;
|
||||
display: block;
|
||||
margin: 8px 0px 0px 8px;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
#chart-control .slider-output {
|
||||
/*display: table-cell;*/
|
||||
.scatterplot-config-control .slider-output {
|
||||
float: right;
|
||||
}
|
||||
|
||||
#chart-control input[type="text"] {
|
||||
border: 1px solid lightgrey;
|
||||
}
|
||||
|
||||
|
||||
/* -------------------------------------------- statistics */
|
||||
#stats-display table#chart-stats-table {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
#stats-display #chart-stats-table th {
|
||||
width: 30%;
|
||||
padding: 4px;
|
||||
font-weight: bold;
|
||||
color: grey;
|
||||
}
|
||||
|
||||
#stats-display #chart-stats-table td {
|
||||
border: solid lightgrey;
|
||||
border-width: 1px 0px 0px 1px;
|
||||
padding: 4px;
|
||||
}
|
||||
|
||||
#stats-display #chart-stats-table td:nth-child(1) {
|
||||
border-width: 1px 0px 0px 0px;
|
||||
padding-right: 1em;
|
||||
text-align: right;
|
||||
font-weight: bold;
|
||||
color: grey;
|
||||
}
|
||||
|
||||
/* ============================================ plot display */
|
||||
/* -------------------------------------------- load indicators */
|
||||
#loading-indicator {
|
||||
margin: 12px 0px 0px 8px;
|
||||
.scatterplot-display .loading-indicator {
|
||||
position: absolute;
|
||||
margin: 10px 0px 0px 10px;
|
||||
color: grey;
|
||||
}
|
||||
|
||||
#scatterplot #loading-indicator .loading-message {
|
||||
.scatterplot-display .loading-indicator .loading-indicator-message {
|
||||
display: inline-block;
|
||||
margin-left: 4px;
|
||||
font-style: italic;
|
||||
font-size: smaller;
|
||||
color: grey;
|
||||
}
|
||||
|
||||
/* -------------------------------------------- display controls */
|
||||
.scatterplot-display .controls {
|
||||
width: 100%;
|
||||
margin-bottom: 4px;
|
||||
border: 1px solid lightgrey;
|
||||
border-radius: 3px;
|
||||
padding: 8px 8px 4px 8px;
|
||||
}
|
||||
|
||||
.scatterplot-display .controls button {
|
||||
display: inline-block;
|
||||
min-width: 0;
|
||||
width: auto;
|
||||
margin: 0px;
|
||||
}
|
||||
|
||||
.scatterplot-display .controls .left {
|
||||
float: left;
|
||||
}
|
||||
|
||||
.scatterplot-display .controls .pagination {
|
||||
display: inline-block;
|
||||
margin: 0px;
|
||||
}
|
||||
|
||||
.scatterplot-display .controls .data-prev-next {
|
||||
display: inline-block;
|
||||
margin: 0px 4px 0px 0px;
|
||||
}
|
||||
|
||||
.scatterplot-display .controls .pagination-container {
|
||||
display: inline-block;
|
||||
overflow: auto;
|
||||
max-width: 256px;
|
||||
/*very tweaky*/
|
||||
margin: 0px 8px 0px 0px;
|
||||
height: 27px;
|
||||
padding-top: 5px;
|
||||
}
|
||||
.scatterplot-display .controls .pagination-container a {
|
||||
display: inline;
|
||||
/* WTH, bootstrap? */
|
||||
position: static;
|
||||
float: none;
|
||||
/* up from 4px -> 5px */
|
||||
padding: 5px 10px 5px 10px;
|
||||
}
|
||||
|
||||
.scatterplot-display .controls .right {
|
||||
float: right;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.scatterplot-display .controls p {
|
||||
display: inline-block;
|
||||
margin: 0px 4px 0px 4px;
|
||||
/*to better match the buttons*/
|
||||
vertical-align: middle;
|
||||
line-height: 24px;
|
||||
}
|
||||
|
||||
.scatterplot-display button.rerender-btn {
|
||||
margin-left: 4px;
|
||||
}
|
||||
|
||||
.scatterplot-display button.stats-toggle-btn {
|
||||
margin-left: 4px;
|
||||
}
|
||||
|
||||
/* -------------------------------------------- chart area */
|
||||
#chart-holder {
|
||||
overflow: auto;
|
||||
margin-left: 8px;
|
||||
svg.scatterplot {
|
||||
border: 1px solid lightgrey;
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
svg .grid-line {
|
||||
svg.scatterplot .grid-line {
|
||||
fill: none;
|
||||
stroke: lightgrey;
|
||||
stroke-opacity: 0.5;
|
||||
stroke-opacity: 0.2;
|
||||
shape-rendering: crispEdges;
|
||||
stroke-dasharray: 3, 3;
|
||||
}
|
||||
|
||||
svg .axis path, svg .axis line {
|
||||
svg.scatterplot .axis path,
|
||||
svg.scatterplot .axis line {
|
||||
fill: none;
|
||||
stroke: black;
|
||||
shape-rendering: crispEdges;
|
||||
}
|
||||
|
||||
svg .axis text {
|
||||
font-family: monospace;
|
||||
font-size: 12px;
|
||||
svg.scatterplot .axis text {
|
||||
font-size: 9px;
|
||||
}
|
||||
|
||||
svg #x-axis-label, svg #y-axis-label {
|
||||
svg.scatterplot .axis-label {
|
||||
font-family: sans-serif;
|
||||
font-size: 10px;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
svg .glyph {
|
||||
svg.scatterplot .glyph {
|
||||
stroke: none;
|
||||
fill: black;
|
||||
fill-opacity: 0.2;
|
||||
|
||||
Reference in New Issue
Block a user