Grid init
Signed-off-by: John Molakvoæ (skjnldsv) <skjnldsv@protonmail.com>
This commit is contained in:
parent
302a5d8171
commit
f717bed085
|
@ -726,3 +726,37 @@ table.dragshadow td.size {
|
|||
height: 30px;
|
||||
line-height: 30px;
|
||||
}
|
||||
|
||||
/* GRID */
|
||||
#filestable.view-grid {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
thead {
|
||||
display: none;
|
||||
}
|
||||
tbody {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, 180px);
|
||||
justify-content: space-around;
|
||||
row-gap: 15px;
|
||||
tr {
|
||||
display: block;
|
||||
height: 180px;
|
||||
}
|
||||
td {
|
||||
display: block;
|
||||
&.selection {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
display: flex;
|
||||
width: 44px;
|
||||
label {
|
||||
width: 44px;
|
||||
height: 44px;
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
|
@ -327,6 +327,9 @@
|
|||
|
||||
this.$el.find('thead th .columntitle').click(_.bind(this._onClickHeader, this));
|
||||
|
||||
// Toggle for grid view
|
||||
$('#view-button').on('click', this._onGridToggle);
|
||||
|
||||
this._onResize = _.debounce(_.bind(this._onResize, this), 250);
|
||||
$('#app-content').on('appresized', this._onResize);
|
||||
$(window).resize(this._onResize);
|
||||
|
@ -587,6 +590,13 @@
|
|||
this.$table.find('>thead').width($('#app-content').width() - OC.Util.getScrollBarWidth());
|
||||
},
|
||||
|
||||
/**
|
||||
* Event handler for grid view toggle
|
||||
*/
|
||||
_onGridToggle: function() {
|
||||
$('.list-container').toggleClass('view-grid');
|
||||
},
|
||||
|
||||
/**
|
||||
* Event handler when leaving previously hidden state
|
||||
*/
|
||||
|
|
|
@ -38,7 +38,7 @@
|
|||
<p></p>
|
||||
</div>
|
||||
|
||||
<table id="filestable" data-allow-public-upload="<?php p($_['publicUploadEnabled'])?>" data-preview-x="32" data-preview-y="32">
|
||||
<table id="filestable" class="view-grid" data-allow-public-upload="<?php p($_['publicUploadEnabled'])?>" data-preview-x="32" data-preview-y="32">
|
||||
<thead>
|
||||
<tr>
|
||||
<th id="headerSelection" class="hidden column-selection">
|
||||
|
|
Loading…
Reference in New Issue