add image height config

conf/app.php

@@ -18,4 +18,10 @@ return array(
 
     //for debug, log directory: ../runtime/logs/
     'debug' => false,
+
+    //for themes
+    'googleimage' => [
+        'imageHeight' => 180,           //图片高度，单位：px
+
+    ],
 );

themes/googleimage/views/layout/main.php

@@ -17,12 +17,10 @@
             <img src="/content/machete_icon.png" alt="Logo of FileSite.io" height="34">
             FileSite.io
         </a>
-        <div class="about">
+        <a href="#modal_about" role="button" class="about btn-open">
-            <a href="#modal_about" role="button" class="btn-open">
             <svg width="24" height="24" viewBox="0 0 24 24" focusable="false"><path d="M13.85 22.25h-3.7c-.74 0-1.36-.54-1.45-1.27l-.27-1.89c-.27-.14-.53-.29-.79-.46l-1.8.72c-.7.26-1.47-.03-1.81-.65L2.2 15.53c-.35-.66-.2-1.44.36-1.88l1.53-1.19c-.01-.15-.02-.3-.02-.46 0-.15.01-.31.02-.46l-1.52-1.19c-.59-.45-.74-1.26-.37-1.88l1.85-3.19c.34-.62 1.11-.9 1.79-.63l1.81.73c.26-.17.52-.32.78-.46l.27-1.91c.09-.7.71-1.25 1.44-1.25h3.7c.74 0 1.36.54 1.45 1.27l.27 1.89c.27.14.53.29.79.46l1.8-.72c.71-.26 1.48.03 1.82.65l1.84 3.18c.36.66.2 1.44-.36 1.88l-1.52 1.19c.01.15.02.3.02.46s-.01.31-.02.46l1.52 1.19c.56.45.72 1.23.37 1.86l-1.86 3.22c-.34.62-1.11.9-1.8.63l-1.8-.72c-.26.17-.52.32-.78.46l-.27 1.91c-.1.68-.72 1.22-1.46 1.22zm-3.23-2h2.76l.37-2.55.53-.22c.44-.18.88-.44 1.34-.78l.45-.34 2.38.96 1.38-2.4-2.03-1.58.07-.56c.03-.26.06-.51.06-.78s-.03-.53-.06-.78l-.07-.56 2.03-1.58-1.39-2.4-2.39.96-.45-.35c-.42-.32-.87-.58-1.33-.77l-.52-.22-.37-2.55h-2.76l-.37 2.55-.53.21c-.44.19-.88.44-1.34.79l-.45.33-2.38-.95-1.39 2.39 2.03 1.58-.07.56a7 7 0 0 0-.06.79c0 .26.02.53.06.78l.07.56-2.03 1.58 1.38 2.4 2.39-.96.45.35c.43.33.86.58 1.33.77l.53.22.38 2.55z"></path><circle cx="12" cy="12" r="3.5"></circle></svg>
         </a>
     </div>
-    </div>
 
 <?php
 //### Render view file

themes/googleimage/views/site/index.php

@@ -1,3 +1,6 @@
+<style>
+	.img-item img{height: <?php echo FSC::$app['config']['googleimage']['imageHeight']; ?>px;}
+</style>
 <div class="menu">
 <?php
 $selectedId = $viewData['cateId'];

www/css/googleimage.css

@@ -1,14 +1,14 @@
 /* for theme GoogleImage */
 body{background-color:#202124;color: #e8eaed;font-family: Roboto,HelveticaNeue,Arial,sans-serif;font-size: small;margin: 0}
 a{color: #aaadb2;text-decoration: none}
-.header{padding:10px;position: relative;}
+.header{padding:10px 10px 0 10px;position: relative;}
-.header .logo{display: inline-block;margin:10px;font-size: 1.86em;color: #e8eaed}
+.header .logo{display: inline-block;margin:10px 10px 6px 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 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}
-.about{position: absolute;right: 10px;top: 8px;width: 24px;height: 24px;padding: 8px;border-radius: 50%}
+.about{display: block;position: absolute;right: 10px;top: 14px;width: 24px;height: 24px;padding: 8px;border-radius: 50%}
 .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;}
@@ -28,7 +28,7 @@ a{color: #aaadb2;text-decoration: none}
 @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 img{height: auto !important;width: 100% !important}
     .img-item strong{font-size: 14px;}
 }
 @media only screen and (min-width: 540px) and (max-width: 767px) {
@@ -38,6 +38,5 @@ a{color: #aaadb2;text-decoration: none}
 /* 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;}
 }

www/js/googleimage.js

@@ -3,6 +3,9 @@
     //show modal
     $('.btn-open').click(function(evt) {
         var target_id = $(evt.target).parents('.btn-open').attr('href');
+        if ($(evt.target).hasClass('btn-open')) {
+            target_id = $(evt.target).attr('href');
+        }
         $(target_id).css('display', 'block');
     });