From c36cd587af1e11cf6d992b68ac9e9f7543b00815 Mon Sep 17 00:00:00 2001 From: fuluboy Date: Sun, 30 Apr 2017 21:16:43 +0800 Subject: [PATCH 1/3] middle panel toggle --- assets/css/main.css | 373 ++++++++++-------- assets/scss/main.scss | 73 +++- .../viewcontrollers/read-viewcontroller.js | 17 +- sections/read-view.html | 8 + 4 files changed, 307 insertions(+), 164 deletions(-) diff --git a/assets/css/main.css b/assets/css/main.css index bc7d612..67ce7cf 100644 --- a/assets/css/main.css +++ b/assets/css/main.css @@ -497,171 +497,226 @@ h1, h2 { .favorite-entry.media .subscribe-btn:hover { color: #857af8; } -#read-view .middle-panel { - z-index: 0; - position: fixed; - -webkit-user-select: none; } - @media only screen and (max-width: 768px) { - #read-view .middle-panel { - height: calc(100vh - 60px); - width: 100vw; - top: 60px; } } - @media only screen and (min-width: 769px) { - #read-view .middle-panel { - height: calc(100vh - 25px); - width: 250px; - position: fixed; - overflow-y: auto; - left: 60px; - overflow-x: hidden; } } - #read-view .middle-panel #comic-header { - border-left: 7px solid #e4ff67; - padding-left: 15px; - background-color: #4d5769; - border-bottom: 1px solid #313743; +#read-view { + transition: all .8s ease; } + #read-view .chapToggle { + color: #b1cece; + font-size: 16px; + width: 250px; + display: inline-block; + background: #1f232a; + padding: 6px 0 0 30px; + cursor: pointer; + position: relative; + z-index: 9999; + height: 40px; } + #read-view .chapToggle span { + font-size: 28px; + float: left; + margin-left: calc(50% - 40px); } + #read-view .chapToggle p { + line-height: 27px; + display: block; + padding: 0; + opacity: 0; } + #read-view .chapToggle:hover p { + opacity: 1; + padding: 0 0 0 35px; + transition: .3s ease-in-out; } + #read-view .chapToggle:hover span { + margin: 0; + transition: .3s ease-in-out; } + #read-view .toggleTag { + position: absolute; + left: 0px; + bottom: 25px; + z-index: 2; + width: 40px; + height: 40px; + background: #415983; + border-radius: 0 3px 3px 0; + box-shadow: 2px 0px 5px 0px rgba(0, 0, 0, 0.3); color: #fff; - display: flex; } - @media only screen and (max-width: 768px) { - #read-view .middle-panel #comic-header.float-menu { - position: fixed; - height: 60px; - width: 100%; - transition: top 0.2s; - top: 60px; } - #read-view .middle-panel #comic-header.float-menu.nav-up { - top: -60px; } } - @media only screen and (min-width: 769px) { - #read-view .middle-panel #comic-header { - width: calc(250px - 10px); - position: fixed; - left: calc($sidebar-widt + 1); - height: 60px; - box-shadow: 0px 2px 3px 0px rgba(0, 0, 0, 0.3); - font-size: 18px; } } - #read-view .middle-panel #comic-header .level-item { - margin: 0; } - #read-view .middle-panel #comic-header .subscribe-btn { - cursor: pointer; - position: absolute; - right: 15px; - top: 19px; } - #read-view .middle-panel #comic-header .subscribe-btn.subscribed { - color: #ff558d; } - #read-view .middle-panel .loading-bg { - z-index: 10000; } + font-size: 28px; + text-align: center; + cursor: pointer; + display: block; + transition: all 1s ease; } + #read-view .toggleTag.active { + left: 60px; + transition: all 1s ease; } + #read-view .toggleTag:hover { + background: #0cffc0; } + #read-view .middle-panel { + transition: all .8s ease; + z-index: 0; + position: fixed; + -webkit-user-select: none; } @media only screen and (max-width: 768px) { - #read-view .middle-panel .loading-bg { - height: calc(100vh - 60px - 68px); } } + #read-view .middle-panel { + height: calc(100vh - 60px); + width: 100vw; + top: 60px; } } @media only screen and (min-width: 769px) { - #read-view .middle-panel .loading-bg { + #read-view .middle-panel { + height: 100vh; width: 250px; position: fixed; - height: calc(100vh - 60px); - background-color: rgba(0, 0, 0, 0.8); - margin-top: 60px; } } - #read-view .middle-panel .loading-bg .loading { - width: 4em; - height: 4em; - margin: auto; - vertical-align: middle; - position: absolute; - top: 50%; - left: calc(50% - 2em); } - #read-view .middle-panel #chapter-selector { - margin-top: 60px; - padding: 0; - color: #cecece; } - @media only screen and (max-width: 768px) { - #read-view .middle-panel #chapter-selector { - height: calc(100vh - 60px*2); - overflow-y: auto; } } - @media only screen and (min-width: 769px) { - #read-view .middle-panel #chapter-selector { - width: 250px; } } - #read-view .middle-panel #chapter-selector .chapter-entry { - cursor: pointer; - background: #373e4a; + overflow-y: auto; + left: 60px; + overflow-x: hidden; } } + #read-view .middle-panel.active { + left: -190px; } + #read-view .middle-panel #comic-header { + border-left: 7px solid #e4ff67; + padding-left: 15px; + background-color: #4d5769; border-bottom: 1px solid #313743; - padding-left: 25px; } - #read-view .middle-panel #chapter-selector .chapter-entry:hover { - background-color: #2f3640; } - #read-view .middle-panel #chapter-selector .chapter-entry.read { - background-color: #3f4654; } - #read-view .middle-panel #chapter-selector .chapter-entry.active { - background-color: #2f3640; - border-bottom: 2px solid #17c4bb; } - #read-view .middle-panel #chapter-selector .chapter-entry.active:before { - color: #17c4bb; } - #read-view .middle-panel #chapter-selector .chapter-entry:before { - content: "• "; - font-size: 22px; - line-height: 22px; - letter-spacing: 3px; } - -#read-view .controlTips { - position: absolute; - left: 325px; - top: 35px; - z-index: 99; - width: 160px; - transition: opacity 1.5s; - opacity: 0; } - #read-view .controlTips.is-visible { - transition: opacity 1.5s; - opacity: 1; } - @media only screen and (max-width: 768px) { - #read-view .controlTips { - display: none; } } - #read-view .controlTips li { - display: block; - width: 50px; - height: 50px; - font-size: 50px; - color: #17c4bb; - line-height: 50px; - text-align: center; - position: absolute; - opacity: 0.6; - background: rgba(0, 0, 0, 0.5); } - #read-view .controlTips li:nth-child(1) { - left: 55px; } - #read-view .controlTips li:nth-child(2) { - top: 55px; } - #read-view .controlTips li:nth-child(3) { - top: 55px; - left: 55px; } - #read-view .controlTips li:nth-child(4) { - top: 55px; - left: 110px; } - -#read-view #read-area { - height: calc(100vh - 25px); - overflow-y: auto; - background-color: #222935; - color: #fff; - padding: 0; } - @media only screen and (max-width: 768px) { - #read-view #read-area { + color: #fff; + display: flex; } + @media only screen and (max-width: 768px) { + #read-view .middle-panel #comic-header.float-menu { + position: fixed; + height: 60px; + width: 100%; + transition: top 0.2s; + top: 60px; } + #read-view .middle-panel #comic-header.float-menu.nav-up { + top: -60px; } } + @media only screen and (min-width: 769px) { + #read-view .middle-panel #comic-header { + width: calc(250px - 10px); + position: fixed; + left: calc($sidebar-widt + 1); + height: 60px; + box-shadow: 0px 2px 3px 0px rgba(0, 0, 0, 0.3); + font-size: 18px; } } + #read-view .middle-panel #comic-header .level-item { + margin: 0; } + #read-view .middle-panel #comic-header .subscribe-btn { + cursor: pointer; + position: absolute; + right: 15px; + top: 19px; } + #read-view .middle-panel #comic-header .subscribe-btn.subscribed { + color: #ff558d; } + #read-view .middle-panel .loading-bg { + z-index: 10000; } + @media only screen and (max-width: 768px) { + #read-view .middle-panel .loading-bg { + height: calc(100vh - 60px - 68px); } } + @media only screen and (min-width: 769px) { + #read-view .middle-panel .loading-bg { + width: 250px; + position: fixed; + height: calc(100vh - 60px); + background-color: rgba(0, 0, 0, 0.8); + margin-top: 60px; } } + #read-view .middle-panel .loading-bg .loading { + width: 4em; + height: 4em; + margin: auto; + vertical-align: middle; + position: absolute; + top: 50%; + left: calc(50% - 2em); } + #read-view .middle-panel #chapter-selector { + height: calc(100vh - 125px); margin-top: 60px; - min-height: calc(100vh - 60px * 2); } } - @media only screen and (min-width: 769px) { - #read-view #read-area { - margin-left: 250px; - min-height: calc(100vh - 25px); } } - #read-view #read-area .comic-page-container { - position: relative; - -webkit-user-select: none; - margin-bottom: 1em; } - #read-view #read-area .comic-page-container img { - height: calc(100vh - 25px); + padding: 0; + color: #cecece; } + @media only screen and (max-width: 768px) { + #read-view .middle-panel #chapter-selector { + height: calc(100vh - 60px*2); + overflow-y: auto; } } + @media only screen and (min-width: 769px) { + #read-view .middle-panel #chapter-selector { + width: 250px; + overflow-y: scroll; } } + #read-view .middle-panel #chapter-selector .chapter-entry { + cursor: pointer; + background: #373e4a; + border-bottom: 1px solid #313743; + padding-left: 25px; } + #read-view .middle-panel #chapter-selector .chapter-entry:hover { + background-color: #2f3640; } + #read-view .middle-panel #chapter-selector .chapter-entry.read { + background-color: #3f4654; } + #read-view .middle-panel #chapter-selector .chapter-entry.active { + background-color: #2f3640; + border-bottom: 2px solid #17c4bb; } + #read-view .middle-panel #chapter-selector .chapter-entry.active:before { + color: #17c4bb; } + #read-view .middle-panel #chapter-selector .chapter-entry:before { + content: "• "; + font-size: 22px; + line-height: 22px; + letter-spacing: 3px; } + #read-view .controlTips { + position: absolute; + left: 325px; + top: 35px; + z-index: 99; + width: 160px; + transition: opacity 1.5s; + opacity: 0; } + #read-view .controlTips.is-visible { + transition: opacity 1.5s; + opacity: 1; } + @media only screen and (max-width: 768px) { + #read-view .controlTips { + display: none; } } + #read-view .controlTips li { display: block; - margin: 0 auto; } - #read-view #read-area .comic-page-container .zoom-btn { - opacity: 0.1; - font-size: 1.5em; + width: 50px; + height: 50px; + font-size: 50px; + color: #17c4bb; + line-height: 50px; + text-align: center; position: absolute; - padding: 0.5em 0.8em 0.4em; - background-color: rgba(0, 0, 0, 0.8); } - #read-view #read-area .comic-page-container .zoom-btn:hover { - opacity: 1; - transition: opacity 0.2s ease-out; } + opacity: 0.6; + background: rgba(0, 0, 0, 0.5); } + #read-view .controlTips li:nth-child(1) { + left: 55px; } + #read-view .controlTips li:nth-child(2) { + top: 55px; } + #read-view .controlTips li:nth-child(3) { + top: 55px; + left: 55px; } + #read-view .controlTips li:nth-child(4) { + top: 55px; + left: 110px; } + #read-view #read-area { + height: calc(100vh - 25px); + overflow-y: auto; + background-color: #222935; + color: #fff; + padding: 0; } + @media only screen and (max-width: 768px) { + #read-view #read-area { + margin-top: 60px; + min-height: calc(100vh - 60px * 2); } } + @media only screen and (min-width: 769px) { + #read-view #read-area { + margin-left: 250px; + min-height: calc(100vh - 25px); } } + #read-view #read-area.active { + margin-left: 60px; } + #read-view #read-area .comic-page-container { + position: relative; + -webkit-user-select: none; + margin-bottom: 1em; } + #read-view #read-area .comic-page-container img { + height: calc(100vh - 25px); + display: block; + margin: 0 auto; } + #read-view #read-area .comic-page-container .zoom-btn { + opacity: 0.1; + font-size: 1.5em; + position: absolute; + padding: 0.5em 0.8em 0.4em; + background-color: rgba(0, 0, 0, 0.8); } + #read-view #read-area .comic-page-container .zoom-btn:hover { + opacity: 1; + transition: opacity 0.2s ease-out; } diff --git a/assets/scss/main.scss b/assets/scss/main.scss index a841063..52c9932 100644 --- a/assets/scss/main.scss +++ b/assets/scss/main.scss @@ -640,8 +640,67 @@ h1, h2 { } #read-view { + transition: all .8s ease; + .chapToggle{ + color: #b1cece; + font-size: 16px; + width: $chapter-selector-width; + display: inline-block; + background: #1f232a; + padding: 6px 0 0 30px; + cursor: pointer; + position: relative; + z-index: 9999; + height: 40px; + span{ + font-size: 28px; + float: left; + margin-left: calc(50% - 40px) + } + p{ + line-height: 27px; + display: block; + padding: 0; + opacity: 0; + } + &:hover{ + p{ + opacity: 1; + padding: 0 0 0 35px; + transition: .3s ease-in-out; + } + span{ + margin: 0; + transition: .3s ease-in-out; + } + } + } + .toggleTag { + position: absolute; + left: 0px; + bottom: 25px; + z-index: 2; + width: 40px; + height: 40px; + background: #415983; + border-radius: 0 3px 3px 0; + box-shadow: 2px 0px 5px 0px rgba(0,0,0,0.3); + color: #fff; + font-size: 28px; + text-align: center; + cursor: pointer; + display: block; + transition: all 1s ease; + + &.active{ + left: 60px; + transition: all 1s ease; + } + &:hover{ + background: #0cffc0; + } + } .middle-panel { - z-index: 0; @media #{$info-mobile} { height: calc(100vh - #{$sidebar-width}); width: 100vw; @@ -649,13 +708,18 @@ h1, h2 { } @media #{$info-tablet} { - height: calc(100vh - #{$titlebar-height}; + height: 100vh; width: $chapter-selector-width; position: fixed; overflow-y: auto; left: $sidebar-width; overflow-x: hidden; } + &.active{ + left: -190px; + } + transition: all .8s ease; + z-index: 0; position: fixed; -webkit-user-select: none; #comic-header { @@ -728,7 +792,9 @@ h1, h2 { } @media #{$info-tablet} { width: $chapter-selector-width; + overflow-y: scroll; } + height: calc(100vh - 125px); margin-top: $sidebar-width; padding: 0; color: #cecece; @@ -813,6 +879,9 @@ h1, h2 { // margin-top: 22px; min-height: calc(100vh - #{$titlebar-height}); } + &.active{ + margin-left: 60px; + } height: calc(100vh - #{$titlebar-height}); overflow-y: auto; background-color: #222935; diff --git a/renderer-process/viewcontrollers/read-viewcontroller.js b/renderer-process/viewcontrollers/read-viewcontroller.js index eed020e..32fc77e 100644 --- a/renderer-process/viewcontrollers/read-viewcontroller.js +++ b/renderer-process/viewcontrollers/read-viewcontroller.js @@ -287,12 +287,23 @@ function lateInit() { // toggle chapter selector toggleChapterSelector(); } - }) + }); $("#comic-header .subscribe-btn").click(function(e) { e.stopPropagation(); subscribeFunc(current_host, current_titlekey, current_title, current_link, current_imguri); }); + $('#change').click(function(){ + $('.content').css("background-color","#FF0000"); + $('.content').css("color","#FFF"); + }); + + $(".chapToggle").click(function(e) { + $('.middle-panel, #read-area, .toggleTag').addClass("active"); + }); + $(".toggleTag").click(function(e) { + $('.middle-panel, #read-area, .toggleTag').removeClass("active"); + }); } function appendNewChapter(view) { @@ -409,13 +420,13 @@ function createComicPage(imguri, id, idx) { view.trigger('zoom.destroy'); } }) - + }); view.find("img").click(function() { current_page_idx = idx; nextPic(); }); - + // view.zoom({ // on:'grab', // magnify: '2' diff --git a/sections/read-view.html b/sections/read-view.html index 76e7c6f..bab351e 100644 --- a/sections/read-view.html +++ b/sections/read-view.html @@ -21,8 +21,13 @@
+
+ +

Toggle Chapter Panel

+
+
+
+
+
From 12394f913df32861bc2fdb00e931e39c881490c1 Mon Sep 17 00:00:00 2001 From: Yu-Jen Lin Date: Sun, 30 Apr 2017 22:02:00 -0400 Subject: [PATCH 2/3] fixed scrolling middle panel --- .../viewcontrollers/read-viewcontroller.js | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/renderer-process/viewcontrollers/read-viewcontroller.js b/renderer-process/viewcontrollers/read-viewcontroller.js index 32fc77e..88eb4a3 100644 --- a/renderer-process/viewcontrollers/read-viewcontroller.js +++ b/renderer-process/viewcontrollers/read-viewcontroller.js @@ -252,15 +252,15 @@ function scrollToPage(page_idx) { * will always be visible */ function scrollMiddlePanel() { - var scroll_bottom = $(".middle-panel").height() - $("#comic-header").height() + $("#titlebar").outerHeight(); + var scroll_bottom = $("#chapter-selector").height() + $("#titlebar").outerHeight(); var e = $(chapter_list[current_chapter_idx]); if (e.offset() && e.offset().top + e.height() >= scroll_bottom) { - $(".middle-panel").animate({ - scrollTop: $(".middle-panel").scrollTop() + e.offset().top - $("#comic-header").outerHeight() - $("#titlebar").outerHeight() + $("#chapter-selector").animate({ + scrollTop: $("#chapter-selector").scrollTop() + e.offset().top - $("#comic-header").outerHeight() - $("#titlebar").outerHeight() }, 100) } else if (e.offset() && e.offset().top < $("#comic-header").outerHeight() + $("#titlebar").outerHeight()) { - $(".middle-panel").animate({ - scrollTop: $(".middle-panel").scrollTop() - $(".middle-panel").height() + $("#comic-header").outerHeight() + e.offset().top - $("#titlebar").outerHeight() + $("#chapter-selector").animate({ + scrollTop: $("#chapter-selector").scrollTop() - $("#chapter-selector").height() + e.offset().top - $("#titlebar").outerHeight() }, 100) } } From 4736063aaf3d03b21de0b5609d7a5a9c71ef6785 Mon Sep 17 00:00:00 2001 From: Yu-Jen Lin Date: Sun, 30 Apr 2017 22:04:59 -0400 Subject: [PATCH 3/3] bump version --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index ad8aa7e..a879b0b 100644 --- a/package.json +++ b/package.json @@ -2,7 +2,7 @@ "name": "comic-reader", "productName:": "Comic Reader", "author": "Team Comic Reader", - "version": "0.1.13", + "version": "0.1.14", "description": "A simple comic reader app", "main": "main.js", "devDependencies": {