diff --git a/lib/DirScanner.php b/lib/DirScanner.php index b9a903f..14de123 100644 --- a/lib/DirScanner.php +++ b/lib/DirScanner.php @@ -163,14 +163,31 @@ Class DirScanner { 'directory' => basename($realpath), 'realpath' => $realpath, 'path' => $this->getDirPath($id), - 'files' => $files, ]; + $sub_dirs = []; + $sub_files = []; + //try to merge description data if (!empty($files[$id])) { $data = array_merge($data, $files[$id]); unset($files[$id]); - $data['files'] = $files; + } + + //区分目录和文件 + foreach ($files as $id => $item) { + if (!empty($item['directory'])) { + $sub_dirs[$id] = $item; + }else { + $sub_files[$id] = $item; + } + } + + if (!empty($sub_dirs)) { + $data['directories'] = $sub_dirs; + } + if (!empty($sub_files)) { + $data['files'] = $sub_files; } return $data; diff --git a/themes/googleimage/controller/SiteController.php b/themes/googleimage/controller/SiteController.php index 5d5f58f..f35af74 100644 --- a/themes/googleimage/controller/SiteController.php +++ b/themes/googleimage/controller/SiteController.php @@ -8,6 +8,8 @@ require_once __DIR__ . '/../../../plugins/Parsedown.php'; Class SiteController extends Controller { public function actionIndex() { + $cateId = $this->get('id', ''); + //获取数据 $scanner = new DirScanner(); $scanner->setWebRoot(FSC::$app['config']['content_directory']); @@ -31,7 +33,7 @@ Class SiteController extends Controller { $pageTitle = !empty($titles) ? $titles[0]['name'] : "FileSite.io - 无数据库、基于文件和目录的Markdown文档、网址导航、图书、图片、视频网站PHP开源系统"; $viewName = 'index'; - $params = compact('dirTree', 'scanResults', 'menus', 'html'); + $params = compact('cateId', 'dirTree', 'scanResults', 'menus', 'html'); return $this->render($viewName, $params, $pageTitle); } diff --git a/themes/googleimage/views/site/index.php b/themes/googleimage/views/site/index.php index e685336..aab5b88 100644 --- a/themes/googleimage/views/site/index.php +++ b/themes/googleimage/views/site/index.php @@ -1,11 +1,11 @@
$item) { - $selected = $index == $selectedIndex ? 'selected' : ''; + $selected = $item['id'] == $selectedId ? 'selected' : ''; echo <<{$item['directory']} + {$item['directory']} eof; } } @@ -16,10 +16,33 @@ eof;
+eof; + + if (!empty($dir['snapshot'])) { + echo << +eof; + }else if (!empty($dir['files'])) { + $first_img = array_shift($dir['files']); + echo << +eof; + } + echo <<{$dir['directory']} + +eof; + } + }else if (!empty($category['files'])) { foreach($category['files'] as $file) { + if (!in_array($file['extension'], $imgExts)) {continue;} echo << eof; diff --git a/www/css/googleimage.css b/www/css/googleimage.css index e9b029d..9238f83 100644 --- a/www/css/googleimage.css +++ b/www/css/googleimage.css @@ -4,7 +4,7 @@ a{color: #aaadb2;text-decoration: none} .header{padding:10px;position: relative;} .header .logo{display: inline-block;margin:10px;font-size: 1.86em;color: #e8eaed} .header .logo img{vertical-align: middle;} -.menu{max-width: 80%;white-space;nowrap;overflow-x:auto;overflow-y: hidden;margin: 0 auto} +.menu{max-width: 80%;white-space: nowrap;overflow-x:auto;overflow-y: hidden;margin: 0 auto;} .menu a{display: inline-block;line-height: 16px;margin: 0 1px;padding: 16px 12px 12px 10px;text-align: center} .menu .selected{color: #8ab4f8;border-bottom: 3px solid #8ab4f8;padding: 20px 12px 11px 10px;} .hr{border-bottom: solid 1px #3c4043;margin-bottom: 11px} @@ -12,10 +12,32 @@ a{color: #aaadb2;text-decoration: none} .about:hover{background-color: #303134} .about svg{fill: currentColor;cursor: pointer;} .modal-mask{display: none;background: rgba(0,0,0,.6);position: fixed;left: 0;right: 0;top: 0;bottom: 0;overflow: hidden;z-index: 9000;} -.modal-about{background: #202124;bottom: 0;overflow-y: auto;position: fixed;right: 0px;top: 0;width: 360px} +.modal-about{background: #202124;bottom: 0;overflow-y: auto;position: fixed;right: 0px;top: 0;width: 360px;max-width: 100%;} .modal-about h3{color: #e8eaed;font-size: 24px;font-weight: 300;margin-top: 0;margin-bottom: 20px;text-align: left;} .modal-about .modal-head{padding: 20px 24px 0 24px} .modal-about .btn-close{color: #9aa0a6;cursor: pointer;display: block;float: right;position: relative;top: -45px;} .modal-about .btn-close svg{fill: currentColor;flex-shrink: 0;} .modal-body{padding: 10px;background-color: inherit;} -.modal-about .modal-body h1{display: none;} \ No newline at end of file +.modal-about .modal-body h1{display: none;} +.content{padding: 20px 10px} +.img-item{display: inline-block;margin-left: 10px;margin-right: 10px;margin-bottom: 20px;} +.img-item img{height: 180px;object-fit: cover;} +.img-item strong{display: block;color: #bdc1c6;font-family: Roboto,Arial,sans-serif;font-size: 12px;letter-spacing: .2px;line-height: 20px;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;} + +/* for mobile */ +@media only screen and (max-width: 767px) { + .menu{max-width:96%;font-size: 15px} + .img-item{margin-left: 0;margin-right: 0;width: 100%} + .img-item img{height: auto;width: 100%} + .img-item strong{font-size: 14px;} +} +@media only screen and (min-width: 540px) and (max-width: 767px) { + .img-item{width: 48%;margin-right: 5px;} +} + +/* for pad */ +@media only screen and (min-width: 768px) and (max-width: 1024px) { + .menu{font-size: 14px} + .img-item img{height: 18vh} + .img-item strong{font-size: 13px;} +} \ No newline at end of file diff --git a/www/js/googleimage.js b/www/js/googleimage.js index fabe2fa..3e1f114 100644 --- a/www/js/googleimage.js +++ b/www/js/googleimage.js @@ -10,5 +10,10 @@ $('.btn-close').click(function(evt) { $(evt.target).parents('.modal-mask').css('display', 'none'); }); + $('.modal-mask').click(function(evt) { + if ($(evt.target).hasClass('modal-mask')) { + $(evt.target).css('display', 'none'); + } + }); })(); \ No newline at end of file