From cec9cfd800b81cd644bfc8ca4ba553c0780e3fdb Mon Sep 17 00:00:00 2001 From: Sansui233 Date: Tue, 21 Sep 2021 17:08:23 +0800 Subject: [PATCH 1/4] save --- theme/flatcard.html | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/theme/flatcard.html b/theme/flatcard.html index 35ad6f1..0f7e875 100644 --- a/theme/flatcard.html +++ b/theme/flatcard.html @@ -49,10 +49,12 @@ .more-disk a{flex-grow: 1;text-align: center;font-size: 15px;padding:14px 20px;transition-duration: 0.4s;background-color: #f4f5f8; color: #353535;display: inline-block;} .more-disk a:hover, .more-disk a[now]{ background-color: rgb(79 116 220); color: white; } .list-table{width:100%;padding:0 20px 20px 20px;border-spacing:0} - .list-table tr{height:33px} + .list-table tr{height:2rem; line-height: 1.5rem;} .list-table tr[data-to]:hover{background: rgb(79 116 220);color:white;} .list-table tr[data-to]:hover a{color:white} .list-table tr:first-child{background:rgba(245,245,245,0)} + .list-table tr[data-to]:hover .operate ul li a{color:black} + .list-table tr ion-icon {vertical-align: middle;} .list-table td,.list-table th{padding:0 10px;text-align:left} .list-table .size,.list-table .updated_at{text-align:right} .updated_at{width:25%} @@ -66,7 +68,6 @@ body .active ul{position:absolute;display:inline-table;} /*for some mobile browser */ .operate ul li{padding:7px;list-style:none;display:block;} .operate ul li:hover {background-color: #f4f5f8;} - .list-table tr[data-to]:hover .operate ul li a{color:black} #tr0{height: 40px;} .operatediv{position:absolute;border-radius: 8px;background-color:#ffffff;z-index:2;box-shadow: 5px 5px 10px 0 #00000033;padding: 15px 4px;} From 4c14349c766b92c020ff250de85bc21a09337465 Mon Sep 17 00:00:00 2001 From: Sansui233 Date: Tue, 21 Sep 2021 19:17:04 +0800 Subject: [PATCH 2/4] add grid-view --- theme/flatcard.html | 73 +++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 73 insertions(+) diff --git a/theme/flatcard.html b/theme/flatcard.html index 0f7e875..41ce390 100644 --- a/theme/flatcard.html +++ b/theme/flatcard.html @@ -59,6 +59,74 @@ .list-table .size,.list-table .updated_at{text-align:right} .updated_at{width:25%} .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;} #top-op {position: absolute;color: white;font-size: 12px;} @@ -681,6 +749,11 @@ function showthumbnails(obj) { images = []; 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 Date: Tue, 21 Sep 2021 19:53:29 +0800 Subject: [PATCH 3/4] add responsive grid-view when thumbnails --- theme/flatcard.html | 39 ++++++++++++++++++++++++++++++++++----- 1 file changed, 34 insertions(+), 5 deletions(-) diff --git a/theme/flatcard.html b/theme/flatcard.html index 41ce390..22622d2 100644 --- a/theme/flatcard.html +++ b/theme/flatcard.html @@ -103,6 +103,10 @@ display: inline-block; position:relative } + .list-table tbody.grid-view td.file a > span { + position: absolute; + left: 3px; + } .list-table tbody.grid-view td.file .download { display: none; } @@ -746,13 +750,38 @@ } + var isGrid = false; + var isthumbLoaded = false; function showthumbnails(obj) { + images = []; var files=document.getElementsByName('filelist'); - // turn to grid view - var list_body = document.getElementById('list-table').firstElementChild - list_body.classList.add('grid-view') + if (document.getElementById('originalpic').checked==true){ + if(isGrid){ + var list_body = document.getElementById('list-table').firstElementChild + list_body.classList.remove('grid-view') + isGrid = false + } + }else { + if(!isGrid){ + // turn to grid view + var list_body = document.getElementById('list-table').firstElementChild + list_body.classList.add('grid-view') + isGrid = true + if (isthumbLoaded) { + return + }else { + isthumbLoaded = true + } + } else { + var list_body = document.getElementById('list-table').firstElementChild + list_body.classList.remove('grid-view') + isGrid = false + return + } + } + for ($i=0;$i'; + if (xhr.responseText!='') filea.innerHTML= '' + filea.innerHTML + '' + ''+name+''; } else console.log(xhr.status+'\n'+xhr.responseText); } } From 8e53c2883dd4fdb1833440ed01e664a2be272b58 Mon Sep 17 00:00:00 2001 From: Sansui233 Date: Tue, 21 Sep 2021 20:37:52 +0800 Subject: [PATCH 4/4] fix vertical align --- theme/flatcard.html | 87 ++++++++------------------------------------- 1 file changed, 14 insertions(+), 73 deletions(-) diff --git a/theme/flatcard.html b/theme/flatcard.html index 22622d2..16e4224 100644 --- a/theme/flatcard.html +++ b/theme/flatcard.html @@ -54,83 +54,24 @@ .list-table tr[data-to]:hover a{color:white} .list-table tr:first-child{background:rgba(245,245,245,0)} .list-table tr[data-to]:hover .operate ul li a{color:black} - .list-table tr ion-icon {vertical-align: middle;} + .list-table tr ion-icon {vertical-align: middle; height: 2rem;} .list-table td,.list-table th{padding:0 10px;text-align:left} + .list-table td.file a {vertical-align: middle;} .list-table .size,.list-table .updated_at{text-align:right} .updated_at{width:25%} .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 a > span { - position: absolute; - left: 3px; - } - .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; - } + .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 a > span {position: absolute;left: 3px;} + .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;} #top-op {position: absolute;color: white;font-size: 12px;}