Merge pull request #64 from yjlintw/styleupdate

Styleupdate
yjlintw · Apr 24, 2017 · c3d1328 · c3d1328
2 parents 8df9427 + bd94ceb
commit c3d1328
Show file tree

Hide file tree

Showing 8 changed files with 126 additions and 76 deletions.
diff --git a/assets/css/main.css b/assets/css/main.css
@@ -70,7 +70,7 @@
 /* ---- Overall area ----*/
 body, html, .whole-view {
   font-family: 'Roboto Condensed',"文泉驛正黑","WenQuanYi Zen Hei","黑體-繁","Heiti TC","微軟正黑體","Microsoft JhengHei",sans-serif;
-  background: #373e4a; }
+  background: #222935; }
   @media only screen and (max-width: 768px) {
     body, html, .whole-view {
       height: 100%; } }
@@ -225,29 +225,48 @@ body, html, .whole-view {
       padding: 0.5em; } }
 
 .search-result.media, .favorite-entry.media {
-  margin-top: 0;
-  margin-bottom: 0.2em;
+  margin: 5px 0;
   padding: 1em;
   border-top: none;
-  background-color: #f8f8ff;
-  cursor: pointer; }
+  border-radius: 3px;
+  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
+  background-color: #373f4e;
+  cursor: pointer;
+  color: #fff; }
+  .search-result.media .thumb, .favorite-entry.media .thumb {
+    width: 115px;
+    height: 160px; }
+  .search-result.media .comic-name, .favorite-entry.media .comic-name {
+    font-size: 23px;
+    overflow: hidden;
+    white-space: nowrap;
+    line-height: 25px;
+    padding: 5px 0 5px 0;
+    border-bottom: 1px solid #242e40;
+    color: #fff; }
   .search-result.media:hover, .favorite-entry.media:hover {
-    background-color: #eef; }
-  .search-result.media .thumbnail, .favorite-entry.media .thumbnail {
-    width: 100px; }
-  .search-result.media .conten p, .favorite-entry.media .conten p {
-    margin-bottom: 0.4em;
-    line-height: 1.2em; }
-    .search-result.media .conten p.comic-update-info, .favorite-entry.media .conten p.comic-update-info {
-      font-size: 0.9em;
-      color: #888; }
+    background-color: #303744; }
+  .search-result.media .content p, .favorite-entry.media .content p {
+    margin: 10px 0;
+    font-size: 15px;
+    color: #fff; }
+    .search-result.media .content p.comic-host, .favorite-entry.media .content p.comic-host, .search-result.media .content p.comic-update-info, .favorite-entry.media .content p.comic-update-info {
+      margin: 5px 0 0 0;
+      color: #698aca;
+      font-weight: 600;
+      line-height: 15px;
+      font-size: 13px; }
+    .search-result.media .content p.comic-description, .favorite-entry.media .content p.comic-description {
+      height: 85px;
+      color: #b6cfce;
+      overflow: hidden; }
   .search-result.media .subscribe-btn, .favorite-entry.media .subscribe-btn {
     font-size: 1.4em;
     color: #aaa; }
     .search-result.media .subscribe-btn:hover, .favorite-entry.media .subscribe-btn:hover {
       color: #558; }
     .search-result.media .subscribe-btn.subscribed, .favorite-entry.media .subscribe-btn.subscribed {
-      color: #a00; }
+      color: #fc5fa1; }
       .search-result.media .subscribe-btn.subscribed:hover, .favorite-entry.media .subscribe-btn.subscribed:hover {
         color: #d55; }
 
@@ -288,7 +307,7 @@ body, html, .whole-view {
   position: relative;
   margin: 3px;
   background: #373f4e;
-  border-top: 10px solid #857af8; }
+  border-top: 10px solid #3c4659; }
   .favorite-entry.media:hover {
     background: #303744; }
   .favorite-entry.media .media-left {
@@ -298,10 +317,13 @@ body, html, .whole-view {
     right: 10px;
     top: 10px;
     z-index: 2; }
-  .favorite-entry.media p {
+  .favorite-entry.media .content p {
     margin: 0;
     line-height: 15px;
     padding: 0; }
+  .favorite-entry.media .thumb {
+    width: 115px;
+    height: 160px; }
   .favorite-entry.media .comic-name {
     font-size: 20px;
     overflow: hidden;
@@ -337,7 +359,7 @@ body, html, .whole-view {
     .favorite-entry.media {
       width: 317px; } }
   .favorite-entry.media.hasupdate {
-    border-top: 10px solid #6ddaa4; }
+    border-top: 10px solid #857af8; }
   .favorite-entry.media .subscribe-btn {
     color: #697d8d; }
     .favorite-entry.media .subscribe-btn:hover {

diff --git a/assets/scss/main.scss b/assets/scss/main.scss
@@ -48,13 +48,12 @@ $search-result-thumbnail-width: 100px;
 
 // color
 $search-header-bg-color: #34495e;
-$search-result-bg-color: #f8f8ff;
-$search-result-hover-bg-color: #eef;
-$search-result-grey-color: #888;
+$search-result-bg-color: #373f4e;
+$search-result-hover-bg-color: #303744;
 
 $non-subscribe-color: #aaa;
 $non-subscribe-hover-color: #558;
-$subscribed-color: #a00;
+$subscribed-color: #fc5fa1;
 $subscribed-hover-color: #d55;
 
 
@@ -75,7 +74,7 @@ $chapter-selector-width: 250px;
 body, html, .whole-view {
     font-family:'Roboto Condensed',"文泉驛正黑","WenQuanYi Zen Hei","黑體-繁","Heiti TC","微軟正黑體","Microsoft JhengHei",sans-serif;
     // background: linear-gradient(to bottom, #7072e3 0%,#7f66e5 44%,#964cdb 100%);
-    background: #373e4a;
+    background: #222935;
     @media #{$info-mobile} {
         height: 100%;
     }
@@ -295,31 +294,45 @@ body {
 }
 
 .search-result.media {
-    margin-top: 0;
-    margin-bottom: 0.2em;
+    margin: 5px 0;
     padding: 1em;
     border-top: none;
-    // border-bottom: 1px solid rgba(219,219,219, 0.3);
-    // border-right: 1px solid rgba(219,219,219, 0.3);
-
+    border-radius: 3px;
+    box-shadow: 0 2px 6px rgba(0,0,0,0.3);
     background-color: $search-result-bg-color;
     cursor: pointer;
-
+    color: #fff;
+    .thumb{
+      width: 115px;
+      height: 160px;
+    }
+    .comic-name{
+      font-size: 23px;
+      overflow: hidden;
+      white-space : nowrap;
+      line-height: 25px;
+      padding: 5px 0 5px 0;
+      border-bottom: 1px solid #242e40;
+      color: #fff;
+    }
     &:hover {
         background-color: $search-result-hover-bg-color;
     }
-
-    .thumbnail {
-        width: $search-result-thumbnail-width;
-    }
-
-    .conten p {
-        margin-bottom: 0.4em;
-        line-height: 1.2em;
-
-        &.comic-update-info {
-            font-size: 0.9em;
-            color: $search-result-grey-color;
+    .content p {
+        margin: 10px 0;
+        font-size: 15px;
+        color: #fff;
+        &.comic-host, &.comic-update-info {
+            margin: 5px 0 0 0;
+            color:#698aca;
+            font-weight: 600;
+            line-height: 15px;
+            font-size: 13px;
+        }
+        &.comic-description {
+            height: 85px;
+            color: #b6cfce;
+            overflow: hidden;
         }
     }
 
@@ -387,7 +400,7 @@ body {
     position: relative;
     margin: 3px;
     background: #373f4e;
-    border-top: 10px solid #857af8;
+    border-top: 10px solid #3c4659;
     &:hover{
       background: #303744;
     }
@@ -401,11 +414,15 @@ body {
       z-index: 2;
     }
 
-    p {
+    .content p {
         margin: 0;
         line-height: 15px;
         padding: 0;
     }
+    .thumb{
+      width: 115px;
+      height: 160px;
+    }
     .comic-name{
       font-size: 20px;
       overflow: hidden;
@@ -448,7 +465,7 @@ body {
     }
 
     &.hasupdate {
-        border-top: 10px solid #6ddaa4
+        border-top: 10px solid #857af8
     }
     .subscribe-btn{
       color: #697d8d;

diff --git a/package.json b/package.json
@@ -2,7 +2,7 @@
   "name": "comic-reader",
   "productName:": "Comic Reader",
   "author": "Team Comic Reader",
-  "version": "0.1.8",
+  "version": "0.1.9",
   "description": "A simple comic reader app",
   "main": "main.js",
   "devDependencies": {

diff --git a/renderer-process/viewcontrollers/favorite-viewcontroller.js b/renderer-process/viewcontrollers/favorite-viewcontroller.js
@@ -79,9 +79,15 @@ function updateSubscribeUI(all_comic_data) {
  * @param {String} title     : comic's name (human-readable)
  * @param {String} host      : host name
  */
-function createFavEntry(link, titlekey, imguri, title, host, lastread, newest) {
+function createFavEntry(link, titlekey, imguri, title, host, lastread, newest)  {
     var view = $(favorite_entry_template_str);
-    view.find("img").attr("src", imguri);
+    view.find("img").each(function(n, img) {
+            view.find(".thumb").css({
+                'background': '#fff url(' + imguri + ') center center no-repeat',
+                'background-size': 'cover'
+            });
+            img.remove();
+        });
     view.find(".comic-name").text(title);
     view.find(".host").text(host);
     view.find(".last-read").text(lastread);

diff --git a/renderer-process/viewcontrollers/read-viewcontroller.js b/renderer-process/viewcontrollers/read-viewcontroller.js
@@ -407,20 +407,20 @@ function toggleLoadingAnimation(shown) {
 function onKeydown(e) {
     if (!$('#read-view').hasClass('is-hidden')) {
         switch(e.which) {
+            case 33: // pageup
             case 37: // left
                 prevChapter();
             break;
 
-            case 33: // pageup
             case 38: // up
                 prevPic();
             break;
 
+            case 34: // pagedown
             case 39: // right
                 nextChapter();
             break;
 
-            case 34: // pagedown
             case 40: // down
                 nextPic();
             break;

diff --git a/renderer-process/viewcontrollers/search-viewcontroller.js b/renderer-process/viewcontrollers/search-viewcontroller.js
@@ -1,7 +1,7 @@
 /**
  *      Search View
  *      search-view.js
- * 
+ *
  *      See Also: ../sections/search-view.html,
  *      ../sections/search-result-entry.html,
  *      ./search-controller.js
@@ -31,28 +31,34 @@ var selectComicFunc;
 
 /**
  * Create a single search result HTML DOM
- * 
+ *
  * See: ../sections/search-result-entry.html
- * 
+ *
  * @param {String} link         : link to the comic page
  * @param {String} titlekey     : a unique key for a comic in a host, two comics
                                   from different hosts can have the same key
  * @param {String} imguri       : image thumbnail / cover photo
  * @param {String} title        : comic name (human-readable)
  * @param {String} host         : host name
  * @param {String} updateinfo   :
- * @param {String} description  : 
- * 
+ * @param {String} description  :
+ *
  * @return {jQueryObject} result view HTML DOM
  */
 function createResultView(link, titlekey, imguri, title, host, updateinfo, description) {
     var view = $(resultview_template_str);
-    view.find(".thumbnail img").attr("src", imguri);
-    view.find(".comic-name strong").html(title);
-    view.find(".comic-name small").html("(" + host +")");
+    view.find("img").each(function(n, img) {
+            view.find(".thumb").css({
+                'background': '#fff url(' + imguri + ') center center no-repeat',
+                'background-size': 'cover'
+            });
+            img.remove();
+        });
+    view.find(".comic-name").text(title);
+    view.find(".host").text(host);
     view.find(".comic-update-info").html(updateinfo);
-    view.find(".comic-description").html(description);    
-    
+    view.find(".comic-description").html(description);
+
     view.attr("title", title);
     view.attr("link", link);
     view.attr("titlekey", titlekey);
@@ -86,15 +92,15 @@ function clearSearchResults() {
 
 /**
  * Append a new view to #search-results
- * @param {jQueryObject} view 
+ * @param {jQueryObject} view
  */
 function appendNewResult(view) {
     $("#search-results").append(view);
 }
 
 /**
  * Toggle loading animation
- * @param {bool} shown 
+ * @param {bool} shown
  */
 function loadingUI(shown) {
     if (shown) {
@@ -129,23 +135,23 @@ function updateSubscribeUI(all_comic_Data) {
 
 /**
  * Bind the search function
- * @param {function} func 
+ * @param {function} func
  */
 function bindSearch(func) {
     searchFunc = func;
 }
 
 /**
  * Bind subsribe function
- * @param {function} func 
+ * @param {function} func
  */
 function bindSubscribe(func) {
     subscribeFunc = func;
 }
 
 /**
  * Bind select comic function
- * @param {function} func 
+ * @param {function} func
  */
 function bindSelectComic(func) {
     selectComicFunc = func;

diff --git a/sections/favorite-entry.html b/sections/favorite-entry.html
@@ -1,16 +1,14 @@
 <div class="media favorite-entry" title="" link="" titleKey="" host="">
     <div class="media-left">
         <figure class="media-left">
-            <p class="image thumbnail">
-                <img src="./assets/img/test/80x100.png">
-            </p>
+            <div class="thumb"><img src="./assets/img/test/80x100.png"></div>
         </figure>
     </div>
     <div class="media-content">
         <div class="content">
-            <p class="comic-name">
+            <div class="comic-name">
                 Title
-            </p>
+            </div>
             <div class="level is-mobile">
                 <div class="level-left">
                     <p class="level-item">FROM&nbsp;:&nbsp;</p>