yanglc
/
OneManager-php
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

add grid-view

pull/427/head
Sansui233 2021-09-21 19:17:04 +08:00
parent cec9cfd800
commit 4c14349c76
1 changed files with 73 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

73
theme/flatcard.html
View File

@ -59,6 +59,74 @@
.list-table .size,.list-table .updated_at{text-align:right} .list-table .size,.list-table .updated_at{text-align:right}
.updated_at{width:25%} .updated_at{width:25%}
.size{width:15%} .size{width:15%}
.list-table tbody.grid-view {
display: flex;
flex-wrap: wrap;
position: relative;
width: 100%;
grid-template: repeat(auto-fill, 100px) / repeat(auto-fill, minmax(100px, 50%));
grid-auto-rows: 100px;
}
.list-table tbody.grid-view td, .list-table tbody.grid-view th {
padding:0;
}
.list-table tbody.grid-view img {
height: 150px;
width: 100%;
object-fit: cover;
position:relative;
}
.list-table tbody.grid-view #tr0{
width: 100%;
height: 33px;
background-color: unset !important;
}
.list-table tbody.grid-view tr {
width: unset;
height: 150px;
background-color: #efefef;
margin: 2px;
position: relative;
flex-grow: 1;
min-width: 100px;
}
.list-table tbody.grid-view td.file {
display: block;
width: 100%;
height: 100%;
}
.list-table tbody.grid-view td.file a {
width: 100%;
height: 100%;
display: inline-block;
position:relative
}
.list-table tbody.grid-view td.file .download {
display: none;
}
.list-table tbody.grid-view td.file ion-icon{
position: absolute;
top: calc(50% - 25px);
left: calc(50% - 25px);
width: 50px;
height: 50px;
color: #0002
}
.list-table tbody.grid-view td.updated_at {
position: absolute;
bottom: 0px;
height: 1.5em;
overflow-y: hidden;
width: 100%;
background-image: linear-gradient(#ffffff00, #0000008f);
color: #fffc;
z-index: 3;
}
.list-table tbody.grid-view td.size {
display: none;
}
.mask{position:absolute;left:0px;top:0px;width:100%;background-color:#000;filter:alpha(opacity=50);opacity:0.5;z-index:2;} .mask{position:absolute;left:0px;top:0px;width:100%;background-color:#000;filter:alpha(opacity=50);opacity:0.5;z-index:2;}
<!--AdminStart--> <!--AdminStart-->
#top-op {position: absolute;color: white;font-size: 12px;} #top-op {position: absolute;color: white;font-size: 12px;}
@ -681,6 +749,11 @@
function showthumbnails(obj) { function showthumbnails(obj) {
images = [<!--ImgExts-->]; images = [<!--ImgExts-->];
var files=document.getElementsByName('filelist'); var files=document.getElementsByName('filelist');
// turn to grid view
var list_body = document.getElementById('list-table').firstElementChild
list_body.classList.add('grid-view')
for ($i=0;$i<files.length;$i++) { for ($i=0;$i<files.length;$i++) {
str=files[$i].innerText; str=files[$i].innerText;
if (str.substr(-1)==' ') str=str.substr(0,str.length-1); if (str.substr(-1)==' ') str=str.substr(0,str.length-1);