mirror of
https://github.com/galaxyproject/galaxy.git
synced 2026-09-24 16:30:27 +08:00
UI, multi-history: move styles from mako to less
This commit is contained in:
Carl Eberhard
@@ -37,7 +37,7 @@ function historyCopyDialog( history, options ){
|
||||
.css( 'margin-top', '8px' );
|
||||
Galaxy.modal.$( '.modal-body' ).append( $copyIndicator );
|
||||
history.copy( true, name )
|
||||
//TODO: make this unneccessary with pub-sub error
|
||||
//TODO: make this unneccessary with pub-sub error
|
||||
.fail( function(){
|
||||
alert( _l( 'History could not be copied. Please contact a Galaxy administrator' ) );
|
||||
})
|
||||
@@ -329,7 +329,7 @@ var HistoryPanelColumn = Backbone.View.extend( baseMVC.LoggableMixin ).extend({
|
||||
controlsRightTemplate : _.template([
|
||||
'<div class="pull-right">',
|
||||
'<% if( !history.purged ){ %>',
|
||||
'<div class="panel-menu order btn-group">',
|
||||
'<div class="panel-menu btn-group">',
|
||||
'<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">',
|
||||
'<span class="caret"></span>',
|
||||
'</button>',
|
||||
@@ -372,7 +372,7 @@ var HistoryPanelColumn = Backbone.View.extend( baseMVC.LoggableMixin ).extend({
|
||||
var MultiPanelColumns = Backbone.View.extend( baseMVC.LoggableMixin ).extend({
|
||||
|
||||
//logger : console,
|
||||
className : 'multi-history-columns',
|
||||
className : 'multi-panel-history',
|
||||
|
||||
// ------------------------------------------------------------------------ set up
|
||||
/** Set up internals, history collection, and columns to display the history */
|
||||
@@ -380,6 +380,9 @@ var MultiPanelColumns = Backbone.View.extend( baseMVC.LoggableMixin ).extend({
|
||||
options = options || {};
|
||||
this.log( this + '.init', options );
|
||||
|
||||
// add the className here (since we gen. pass the el in options)
|
||||
this.$el.addClass( this.className );
|
||||
|
||||
// --- instance vars
|
||||
if( !options.currentHistoryId ){
|
||||
throw new Error( this + ' requires a currentHistoryId in the options' );
|
||||
@@ -549,7 +552,11 @@ var MultiPanelColumns = Backbone.View.extend( baseMVC.LoggableMixin ).extend({
|
||||
this.collection.comparator = function __comparator( a, b ){
|
||||
return sortOrder.fn( a, b, currentHistoryId );
|
||||
};
|
||||
// set the sort order text
|
||||
this.$( '.current-order' ).text( sortOrder.text );
|
||||
if( this.$( '.more-options' ).is( ':visible' ) ){
|
||||
this.$( '.open-more-options.btn' ).popover( 'show' );
|
||||
}
|
||||
|
||||
//NOTE: auto fires 'sort' from collection
|
||||
this.collection.sort( options );
|
||||
@@ -815,7 +822,7 @@ var MultiPanelColumns = Backbone.View.extend( baseMVC.LoggableMixin ).extend({
|
||||
|
||||
/** put a text msg in the header */
|
||||
renderInfo : function( msg ){
|
||||
this.$( '.header .header-info' ).text( msg );
|
||||
return this.$( '.header .header-info' ).text( msg );
|
||||
},
|
||||
|
||||
// ------------------------------------------------------------------------ events/behaviors
|
||||
@@ -1061,7 +1068,6 @@ var MultiPanelColumns = Backbone.View.extend( baseMVC.LoggableMixin ).extend({
|
||||
|
||||
optionsPopoverTemplate : _.template([
|
||||
'<div class="more-options">',
|
||||
|
||||
'<div class="order btn-group">',
|
||||
'<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">',
|
||||
_l( 'Order histories by' ) + ' ',
|
||||
|
||||
@@ -37,7 +37,7 @@ function historyCopyDialog( history, options ){
|
||||
.css( 'margin-top', '8px' );
|
||||
Galaxy.modal.$( '.modal-body' ).append( $copyIndicator );
|
||||
history.copy( true, name )
|
||||
//TODO: make this unneccessary with pub-sub error
|
||||
//TODO: make this unneccessary with pub-sub error
|
||||
.fail( function(){
|
||||
alert( _l( 'History could not be copied. Please contact a Galaxy administrator' ) );
|
||||
})
|
||||
@@ -329,7 +329,7 @@ var HistoryPanelColumn = Backbone.View.extend( baseMVC.LoggableMixin ).extend({
|
||||
controlsRightTemplate : _.template([
|
||||
'<div class="pull-right">',
|
||||
'<% if( !history.purged ){ %>',
|
||||
'<div class="panel-menu order btn-group">',
|
||||
'<div class="panel-menu btn-group">',
|
||||
'<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">',
|
||||
'<span class="caret"></span>',
|
||||
'</button>',
|
||||
@@ -372,7 +372,7 @@ var HistoryPanelColumn = Backbone.View.extend( baseMVC.LoggableMixin ).extend({
|
||||
var MultiPanelColumns = Backbone.View.extend( baseMVC.LoggableMixin ).extend({
|
||||
|
||||
//logger : console,
|
||||
className : 'multi-history-columns',
|
||||
className : 'multi-panel-history',
|
||||
|
||||
// ------------------------------------------------------------------------ set up
|
||||
/** Set up internals, history collection, and columns to display the history */
|
||||
@@ -380,6 +380,9 @@ var MultiPanelColumns = Backbone.View.extend( baseMVC.LoggableMixin ).extend({
|
||||
options = options || {};
|
||||
this.log( this + '.init', options );
|
||||
|
||||
// add the className here (since we gen. pass the el in options)
|
||||
this.$el.addClass( this.className );
|
||||
|
||||
// --- instance vars
|
||||
if( !options.currentHistoryId ){
|
||||
throw new Error( this + ' requires a currentHistoryId in the options' );
|
||||
@@ -549,7 +552,11 @@ var MultiPanelColumns = Backbone.View.extend( baseMVC.LoggableMixin ).extend({
|
||||
this.collection.comparator = function __comparator( a, b ){
|
||||
return sortOrder.fn( a, b, currentHistoryId );
|
||||
};
|
||||
// set the sort order text
|
||||
this.$( '.current-order' ).text( sortOrder.text );
|
||||
if( this.$( '.more-options' ).is( ':visible' ) ){
|
||||
this.$( '.open-more-options.btn' ).popover( 'show' );
|
||||
}
|
||||
|
||||
//NOTE: auto fires 'sort' from collection
|
||||
this.collection.sort( options );
|
||||
@@ -815,7 +822,7 @@ var MultiPanelColumns = Backbone.View.extend( baseMVC.LoggableMixin ).extend({
|
||||
|
||||
/** put a text msg in the header */
|
||||
renderInfo : function( msg ){
|
||||
this.$( '.header .header-info' ).text( msg );
|
||||
return this.$( '.header .header-info' ).text( msg );
|
||||
},
|
||||
|
||||
// ------------------------------------------------------------------------ events/behaviors
|
||||
@@ -1061,7 +1068,6 @@ var MultiPanelColumns = Backbone.View.extend( baseMVC.LoggableMixin ).extend({
|
||||
|
||||
optionsPopoverTemplate : _.template([
|
||||
'<div class="more-options">',
|
||||
|
||||
'<div class="order btn-group">',
|
||||
'<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">',
|
||||
_l( 'Order histories by' ) + ' ',
|
||||
|
||||
File diff suppressed because one or more lines are too long
@@ -2097,6 +2097,34 @@ div.permissionContainer{padding-left:20px}
|
||||
.annotated-history-panel table.list-items>tbody>tr>td>.list-item{border:0px}
|
||||
.annotated-history-panel .empty-message{margin-top:8px}
|
||||
.current-history-panel .list-item.history-content.current-content{border-left:5px solid #4E5777}
|
||||
.multi-panel-history{display:flex;flex-direction:column;}.multi-panel-history .flex-row-container,.multi-panel-history .flex-column-container{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;min-width:0px;min-height:0px;-webkit-align-items:stretch;-ms-align-items:stretch;align-items:stretch;-webkit-align-content:stretch;-ms-align-content:stretch;align-content:stretch;-webkit-justify-content:flex-start;-ms-flex-pack:start;justify-content:flex-start}
|
||||
.multi-panel-history .flex-row-container{-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column}
|
||||
.multi-panel-history .flex-column-container{-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row}
|
||||
.multi-panel-history .flex-row,.multi-panel-history .flex-column{-webkit-flex:1 1 auto;-ms-flex:1 1 auto;flex:1 1 auto;-webkit-align-self:auto;-ms-flex-item-align:auto;align-self:auto}
|
||||
.multi-panel-history .header,.multi-panel-history .footer{width:100%;background-color:lightgrey}.multi-panel-history .header .btn,.multi-panel-history .footer .btn{height:21px}
|
||||
.multi-panel-history .header{min-height:29px;max-height:29px}
|
||||
.multi-panel-history .footer{min-height:0;max-height:0}
|
||||
.multi-panel-history .smaller-btn{height:20px;line-height:normal;font-size:90%;padding-top:0px;padding-bottom:0px}
|
||||
.multi-panel-history .control-column{margin-top:4px}.multi-panel-history .control-column .btn{height:20px;line-height:normal;font-size:90%;padding-top:0px;padding-bottom:0px}
|
||||
.multi-panel-history .control-column .search-control{display:inline-block;width:40%}.multi-panel-history .control-column .search-control .search-clear,.multi-panel-history .control-column .search-control .search-loading{margin-top:-22px}
|
||||
.multi-panel-history .control-column input.search-query{font-size:90%;height:21px;line-height:normal;padding:2px 2px 1px 2px}
|
||||
.multi-panel-history .control-column .open-more-options{padding:2px 6px 2px 6px;font-size:100%}
|
||||
.multi-panel-history .control-column .more-options input[type=checkbox]{margin-top:2px}
|
||||
.multi-panel-history .control-column .header-info{display:inline-block;padding:2px 4px 2px 4px;color:grey}
|
||||
.multi-panel-history .control-column.control-column-right,.multi-panel-history .control-column.control-column-left{margin-right:8px;margin-left:8px}.multi-panel-history .control-column.control-column-right>*,.multi-panel-history .control-column.control-column-left>*{margin:0px 4px 4px 0px}
|
||||
.multi-panel-history .control-column.control-column-center{text-align:center;max-height:22px;-webkit-flex:0 1 auto;-ms-flex:0 1 auto;flex:0 1 auto;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-height:22px}
|
||||
.multi-panel-history .control-column.control-column-right{text-align:right}
|
||||
.multi-panel-history .outer-middle{overflow:auto}
|
||||
.multi-panel-history .middle{min-width:100%;margin:0px 0px 0px 0px;background-color:white;padding:8px}
|
||||
.multi-panel-history .history-column{width:312px;margin:0 8px 0 0}.multi-panel-history .history-column:first-child{position:fixed;z-index:2}.multi-panel-history .history-column:first-child .history-panel{border:1px solid black;box-shadow:4px 4px 4px rgba(96,96,96,0.3)}
|
||||
.multi-panel-history .history-column:nth-child(2){margin-left:320px}
|
||||
.multi-panel-history .history-column:last-child{margin-right:0px}
|
||||
.multi-panel-history .history-column .panel-controls{width:100%;height:24px;border-radius:3px;background-color:white;text-align:center;flex:0 0 auto;-webkit-align-self:auto;-ms-flex-item-align:auto;align-self:auto}.multi-panel-history .history-column .panel-controls .btn{height:20px;line-height:normal;font-size:90%;padding-top:0px;padding-bottom:0px}
|
||||
.multi-panel-history .history-column .panel-controls .pull-left .btn{margin-right:4px}
|
||||
.multi-panel-history .history-column .panel-controls .pull-right .btn{margin-left:4px}
|
||||
.multi-panel-history .history-column .panel-controls .panel-menu{z-index:1}.multi-panel-history .history-column .panel-controls .panel-menu .dropdown-menu a{text-align:left}
|
||||
.multi-panel-history .history-column .panel-controls .current-label{display:inline-block;color:grey;padding-left:2px;margin-top:2px}
|
||||
.multi-panel-history .history-column .history-panel{width:100%;border:1px solid #808080;border-radius:3px;background-color:#DFE5F9;overflow:auto}
|
||||
body.historyPage{background:#dfe5f9;color:#000;margin:5px;border:0;padding:0}
|
||||
div.historyLinks{margin:5px 5px}
|
||||
div.historyItem{margin:0 -5px;padding:8px 10px;border-top:solid #bfbfbf 1px;border-right:none;word-wrap:break-word;background:#eee}div.historyItem .state-icon{display:inline-block;vertical-align:middle;width:16px;height:16px;background-position:0 1px;background-repeat:no-repeat}
|
||||
|
||||
@@ -579,6 +579,235 @@
|
||||
}
|
||||
|
||||
|
||||
// ---------------------------------------------------------------------------- multi-view / multi-panel
|
||||
.multi-panel-history {
|
||||
@mph-column_width: 312px;
|
||||
@mph-border_width: 1px;
|
||||
@mph-column_gap: 8px;
|
||||
@mph-header_height: 29px;
|
||||
@mph-footer_height: 0;
|
||||
@mph-controls_height: 20px;
|
||||
|
||||
// for some reason, .flex-row-container below won't be applied to multi-panel-history since it's the enclosing node
|
||||
// re-apply here
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
.flex-row-container,
|
||||
.flex-column-container {
|
||||
display: -webkit-box;
|
||||
display: -webkit-flex;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
|
||||
/* force ff to squish beyond content:
|
||||
https://developer.mozilla.org/en-US/Firefox/Releases/34/Site_Compatibility#CSS */
|
||||
min-width: 0px;
|
||||
min-height: 0px;
|
||||
|
||||
-webkit-align-items: stretch;
|
||||
-ms-align-items: stretch;
|
||||
align-items: stretch;
|
||||
|
||||
-webkit-align-content: stretch;
|
||||
-ms-align-content: stretch;
|
||||
align-content: stretch;
|
||||
|
||||
-webkit-justify-content: flex-start;
|
||||
-ms-flex-pack: start;
|
||||
justify-content: flex-start;
|
||||
}
|
||||
.flex-row-container {
|
||||
-webkit-flex-direction: column;
|
||||
-ms-flex-direction: column;
|
||||
flex-direction: column;
|
||||
}
|
||||
.flex-column-container {
|
||||
-webkit-flex-direction: row;
|
||||
-ms-flex-direction: row;
|
||||
flex-direction: row;
|
||||
}
|
||||
.flex-row,
|
||||
.flex-column {
|
||||
-webkit-flex: 1 1 auto;
|
||||
-ms-flex: 1 1 auto;
|
||||
flex: 1 1 auto;
|
||||
|
||||
-webkit-align-self: auto;
|
||||
-ms-flex-item-align: auto;
|
||||
align-self: auto;
|
||||
}
|
||||
|
||||
/* ---------------------- header & footer */
|
||||
.header,
|
||||
.footer {
|
||||
width: 100%;
|
||||
background-color: lightgrey;
|
||||
.btn {
|
||||
height: 21px;
|
||||
}
|
||||
}
|
||||
.header {
|
||||
min-height: @mph-header_height;
|
||||
max-height: @mph-header_height;
|
||||
}
|
||||
.footer {
|
||||
min-height: @mph-footer_height;
|
||||
max-height: @mph-footer_height;
|
||||
}
|
||||
|
||||
// make the buttons in the header/footers and the panel controls slightly smaller
|
||||
.smaller-btn {
|
||||
height: 20px;
|
||||
line-height: normal;
|
||||
font-size: 90%;
|
||||
padding-top: 0px;
|
||||
padding-bottom: 0px;
|
||||
}
|
||||
|
||||
// the header/footers controls
|
||||
.control-column {
|
||||
margin-top: 4px;
|
||||
|
||||
.btn {
|
||||
.smaller-btn;
|
||||
}
|
||||
.search-control {
|
||||
display: inline-block;
|
||||
width: 40%;
|
||||
|
||||
.search-clear,
|
||||
.search-loading {
|
||||
margin-top: -22px;
|
||||
}
|
||||
}
|
||||
input.search-query {
|
||||
font-size: 90%;
|
||||
height: 21px;
|
||||
line-height: normal;
|
||||
padding: 2px 2px 1px 2px;
|
||||
}
|
||||
.open-more-options {
|
||||
padding: 2px 6px 2px 6px;
|
||||
font-size: 100%;
|
||||
}
|
||||
.more-options input[type=checkbox] {
|
||||
margin-top: 2px;
|
||||
}
|
||||
.header-info {
|
||||
display: inline-block;
|
||||
padding: 2px 4px 2px 4px;
|
||||
color: grey;
|
||||
}
|
||||
|
||||
&.control-column-right,
|
||||
&.control-column-left {
|
||||
margin-right: 8px;
|
||||
margin-left: 8px;
|
||||
& > * {
|
||||
margin: 0px 4px 4px 0px;
|
||||
}
|
||||
}
|
||||
&.control-column-center {
|
||||
text-align: center;
|
||||
max-height: 22px;
|
||||
-webkit-flex: 0 1 auto;
|
||||
-ms-flex: 0 1 auto;
|
||||
flex: 0 1 auto;
|
||||
|
||||
/* truncate */
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
max-height: 22px;
|
||||
}
|
||||
&.control-column-right {
|
||||
text-align: right;
|
||||
}
|
||||
}
|
||||
|
||||
/* ---------------------- middle */
|
||||
.outer-middle {
|
||||
overflow: auto;
|
||||
}
|
||||
.middle {
|
||||
min-width: 100%;
|
||||
margin: 0px 0px 0px 0px;
|
||||
background-color: white;
|
||||
padding: @mph-column_gap;
|
||||
}
|
||||
|
||||
.history-column {
|
||||
width: @mph-column_width;
|
||||
margin: 0px @mph-column_gap 0px 0px;
|
||||
|
||||
// current history
|
||||
&:first-child {
|
||||
position: fixed;
|
||||
z-index : 2;
|
||||
|
||||
// visually differentiate the current history
|
||||
.history-panel {
|
||||
border: 1px solid black;
|
||||
box-shadow: 4px 4px 4px rgba( 96, 96, 96, 0.3 );
|
||||
}
|
||||
}
|
||||
&:nth-child(2) {
|
||||
// push the column after the current away from the left (since it's fixed)
|
||||
margin-left: ( @mph-column_width + @mph-column_gap );
|
||||
}
|
||||
&:last-child {
|
||||
margin-right: 0px;
|
||||
}
|
||||
|
||||
.panel-controls {
|
||||
width: 100%;
|
||||
height: ( @mph-controls_height + 4 );
|
||||
border-radius: 3px;
|
||||
background-color: white;
|
||||
text-align: center;
|
||||
|
||||
flex: 0 0 auto;
|
||||
|
||||
-webkit-align-self: auto;
|
||||
-ms-flex-item-align: auto;
|
||||
align-self: auto;
|
||||
|
||||
.btn {
|
||||
.smaller-btn;
|
||||
}
|
||||
.pull-left .btn {
|
||||
margin-right: 4px;
|
||||
}
|
||||
.pull-right .btn {
|
||||
margin-left: 4px;
|
||||
}
|
||||
.panel-menu {
|
||||
z-index: 1;
|
||||
.dropdown-menu a {
|
||||
text-align: left;
|
||||
}
|
||||
}
|
||||
.current-label {
|
||||
display: inline-block;
|
||||
color: grey;
|
||||
padding-left: 2px;
|
||||
margin-top: 2px;
|
||||
}
|
||||
}
|
||||
.history-panel {
|
||||
width: 100%;
|
||||
|
||||
border: @mph-border_width solid grey;
|
||||
border-radius: 3px;
|
||||
background-color: #DFE5F9;
|
||||
|
||||
overflow: auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// ---------------------------------------------------------------------------- older styles
|
||||
//TODO: these may still apply in mobile display, workflow stuff
|
||||
body.historyPage {
|
||||
|
||||
@@ -5,251 +5,16 @@
|
||||
${_('Histories')}
|
||||
</%def>
|
||||
|
||||
## ----------------------------------------------------------------------------
|
||||
<%!
|
||||
column_width = 312
|
||||
border_width = 1
|
||||
column_gap = 8
|
||||
|
||||
header_height = 29
|
||||
footer_height = 0
|
||||
|
||||
controls_height = 20
|
||||
%>
|
||||
|
||||
## ----------------------------------------------------------------------------
|
||||
<%def name="stylesheets()">
|
||||
${parent.stylesheets()}
|
||||
<style type="text/css">
|
||||
/* reset */
|
||||
html, body {
|
||||
margin: 0px;
|
||||
padding: 0px;
|
||||
}
|
||||
|
||||
.flex-row-container,
|
||||
.flex-column-container {
|
||||
display: -webkit-box;
|
||||
display: -webkit-flex;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
|
||||
/* force ff to squish beyond content:
|
||||
https://developer.mozilla.org/en-US/Firefox/Releases/34/Site_Compatibility#CSS */
|
||||
min-width: 0px;
|
||||
min-height: 0px;
|
||||
|
||||
-webkit-align-items: stretch;
|
||||
-ms-align-items: stretch;
|
||||
align-items: stretch;
|
||||
|
||||
-webkit-align-content: stretch;
|
||||
-ms-align-content: stretch;
|
||||
align-content: stretch;
|
||||
|
||||
-webkit-justify-content: flex-start;
|
||||
-ms-flex-pack: start;
|
||||
justify-content: flex-start;
|
||||
}
|
||||
.flex-row-container {
|
||||
-webkit-flex-direction: column;
|
||||
-ms-flex-direction: column;
|
||||
flex-direction: column;
|
||||
}
|
||||
.flex-column-container {
|
||||
-webkit-flex-direction: row;
|
||||
-ms-flex-direction: row;
|
||||
flex-direction: row;
|
||||
}
|
||||
.flex-row,
|
||||
.flex-column {
|
||||
-webkit-flex: 1 1 auto;
|
||||
-ms-flex: 1 1 auto;
|
||||
flex: 1 1 auto;
|
||||
|
||||
-webkit-align-self: auto;
|
||||
-ms-flex-item-align: auto;
|
||||
align-self: auto;
|
||||
}
|
||||
.flex-row {
|
||||
}
|
||||
.flex-column {
|
||||
}
|
||||
|
||||
/* ---------------------- header & footer */
|
||||
.header, .footer {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
/* ---------------------- header */
|
||||
.header {
|
||||
background-color: lightgrey;
|
||||
min-height: ${header_height}px;
|
||||
max-height: ${header_height}px;
|
||||
}
|
||||
.control-column {
|
||||
margin-top: 4px;
|
||||
}
|
||||
|
||||
.control-column-right,
|
||||
.control-column-left {
|
||||
margin-right: 8px;
|
||||
margin-left: 8px;
|
||||
/*background-color: green;*/
|
||||
}
|
||||
|
||||
.control-column-left > * {
|
||||
margin: 0px 4px 4px 0px;
|
||||
}
|
||||
.more-options input[type=checkbox] {
|
||||
margin-top: 3px;
|
||||
}
|
||||
|
||||
.control-column-center {
|
||||
text-align: center;
|
||||
max-height: 22px;
|
||||
-webkit-flex: 0 1 auto;
|
||||
-ms-flex: 0 1 auto;
|
||||
flex: 0 1 auto;
|
||||
|
||||
/* truncate */
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
max-height: 22px;
|
||||
}
|
||||
.header-info {
|
||||
display: inline-block;
|
||||
padding: 2px 4px 2px 4px;
|
||||
color: grey;
|
||||
|
||||
}
|
||||
|
||||
.control-column-right {
|
||||
text-align: right;
|
||||
}
|
||||
.control-column-right > * {
|
||||
margin: 0px 0px 4px 4px;
|
||||
}
|
||||
|
||||
.search-control {
|
||||
display: inline-block;
|
||||
width: 40%;
|
||||
}
|
||||
.search-control .search-clear,
|
||||
.search-control .search-loading {
|
||||
margin-top: -22px;
|
||||
}
|
||||
.footer input.search-query,
|
||||
.header input.search-query {
|
||||
font-size: 90%;
|
||||
height: 21px;
|
||||
line-height: normal;
|
||||
padding: 2px 2px 1px 2px;
|
||||
}
|
||||
|
||||
.open-more-options {
|
||||
padding: 2px 6px 2px 6px;
|
||||
font-size: 150%;
|
||||
}
|
||||
|
||||
/* ---------------------- middle */
|
||||
.outer-middle {
|
||||
overflow: auto;
|
||||
}
|
||||
.middle {
|
||||
min-width: 100%;
|
||||
margin: 0px 0px 0px 0px;
|
||||
background-color: white;
|
||||
padding: ${column_gap}px;
|
||||
}
|
||||
|
||||
.history-column {
|
||||
width: ${column_width}px;
|
||||
margin: 0px ${column_gap}px 0px 0px;
|
||||
}
|
||||
.history-column:last-child {
|
||||
margin-right: 0px;
|
||||
}
|
||||
|
||||
.panel-controls {
|
||||
width: 100%;
|
||||
height: ${controls_height + 4}px;
|
||||
border-radius: 3px;
|
||||
background-color: white;
|
||||
text-align: center;
|
||||
|
||||
flex: 0 0 auto;
|
||||
|
||||
-webkit-align-self: auto;
|
||||
-ms-flex-item-align: auto;
|
||||
align-self: auto;
|
||||
}
|
||||
.header .btn,
|
||||
.footer .btn,
|
||||
.panel-controls .btn {
|
||||
height: 20px;
|
||||
/*line-height: ${controls_height - 2}px;*/
|
||||
line-height: normal;
|
||||
font-size: 90%;
|
||||
padding-top: 0px;
|
||||
padding-bottom: 0px;
|
||||
}
|
||||
.header .btn {
|
||||
height: 21px;
|
||||
}
|
||||
.panel-controls .pull-left .btn {
|
||||
margin-right: 4px;
|
||||
}
|
||||
.panel-controls .pull-right .btn {
|
||||
margin-left: 4px;
|
||||
}
|
||||
.panel-controls .panel-menu {
|
||||
z-index: 1;
|
||||
}
|
||||
.panel-controls .panel-menu .dropdown-menu a {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
|
||||
/* ---------------------- footer */
|
||||
.footer {
|
||||
min-height: ${footer_height}px;
|
||||
max-height: ${footer_height}px;
|
||||
background-color: lightgrey;
|
||||
}
|
||||
|
||||
/* ---------------------- columns */
|
||||
.history-panel {
|
||||
width: 100%;
|
||||
|
||||
border: ${border_width}px solid grey;
|
||||
border-radius: 3px;
|
||||
background-color: #DFE5F9;
|
||||
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.history-column:first-child {
|
||||
position: fixed;
|
||||
z-index : 2;
|
||||
}
|
||||
.history-column:first-child .history-panel {
|
||||
border: 1px solid black;
|
||||
box-shadow: 4px 4px 4px rgba( 96, 96, 96, 0.3 );
|
||||
}
|
||||
|
||||
.history-column:nth-child(2) {
|
||||
margin-left: ${( column_width + column_gap )}px;
|
||||
}
|
||||
|
||||
.current-label {
|
||||
display: inline-block;
|
||||
color: grey;
|
||||
padding-left: 2px;
|
||||
margin-top: 2px;
|
||||
}
|
||||
</style>
|
||||
|
||||
</%def>
|
||||
|
||||
|
||||
@@ -264,7 +29,6 @@ define( 'app', function(){
|
||||
'mvc/history/multi-panel'
|
||||
], function( HISTORY_MODEL, MULTI_PANEL ){
|
||||
$(function(){
|
||||
$( '#center' ).addClass( 'flex-row-container' );
|
||||
window.historyJSONArray = bootstrapped.historyJSONArray;
|
||||
|
||||
var historyModels = [];
|
||||
@@ -277,7 +41,7 @@ define( 'app', function(){
|
||||
includeDeleted : bootstrapped.includingDeleted
|
||||
});
|
||||
multipanel = new MULTI_PANEL.MultiPanelColumns({
|
||||
el : $( '#center' ),
|
||||
el : $( '#center' ).get(0),
|
||||
histories : histories,
|
||||
//historiesJSON : historiesJSON,
|
||||
order : bootstrapped.order,
|
||||
|
||||
Reference in New Issue
Block a user