Adds prev/next UI for post landing page
Project: http://git-wip-us.apache.org/repos/asf/cordova-docs/repo Commit: http://git-wip-us.apache.org/repos/asf/cordova-docs/commit/f63ffac6 Tree: http://git-wip-us.apache.org/repos/asf/cordova-docs/tree/f63ffac6 Diff: http://git-wip-us.apache.org/repos/asf/cordova-docs/diff/f63ffac6 Branch: refs/heads/cordova-website Commit: f63ffac6e025ff0d549fd467c23dc68112230f7c Parents: 67cba9f Author: RuRios <[email protected]> Authored: Fri Aug 7 15:53:31 2015 -0700 Committer: RuRios <[email protected]> Committed: Fri Aug 7 15:53:31 2015 -0700 ---------------------------------------------------------------------- www/_layouts/post.html | 36 ++++++++++-- www/static/css-src/blog.scss | 118 ++++++++++++++++++++++++++++++-------- www/static/img/post-next.png | Bin 0 -> 3589 bytes www/static/img/post-prev.png | Bin 0 -> 3221 bytes 4 files changed, 124 insertions(+), 30 deletions(-) ---------------------------------------------------------------------- http://git-wip-us.apache.org/repos/asf/cordova-docs/blob/f63ffac6/www/_layouts/post.html ---------------------------------------------------------------------- diff --git a/www/_layouts/post.html b/www/_layouts/post.html index 7e739d2..5cd1e2e 100644 --- a/www/_layouts/post.html +++ b/www/_layouts/post.html @@ -3,7 +3,7 @@ layout: blog --- <div class="blog"> <div id="content" class="container"> - <div class="row"> + <div class="row"> <div class="blogHeader"> <h1>Blog</h1> <div> @@ -18,10 +18,36 @@ layout: blog <div class="date">{{ page.date | date_to_string }}</div> </header> <section> - <div> + <div class="content"> {{ content }} </div> - </section> - </div> - </div> + </section> + </div> + </div> + <div class="row"> + <section class="nextprev-controls"> + <div class="prev"> + <img src="{{ site.baseurl }}/static/img/post-prev.png"> + </div> + <div class="next"> + <div class="title"><a href="{{ site.baseurl }}{{ post.url }}">Title next article</a></div> + <div><span class="date">3 days ago</span><span> - </span><span class="author">Author name</span></div> + <img src="{{ site.baseurl }}/static/img/post-next.png"> + </div> + </section> + <section class="nextprev-posts"> + <div class="prev col-sm-6"> + <div class="header"><a href="{{ site.baseurl }}{{ post.url }}">Prev article</a></div> + <div class="title"><a href="{{ site.baseurl }}{{ post.url }}">Title prev article</a></div> + <div><span class="date">3 days ago</span><span> - by </span><span class="author">Author name</span></div> + <div class="excerpt">Gumbo beet greens corn soko endive gumbo gourd. Parsley shallot courgette tatsoi pea sprouts fava bean collard greens wakame tomato...</div> + </div> + <div class="next col-sm-6"> + <div class="header"><a href="{{ site.baseurl }}{{ post.url }}">Next article</a></div> + <div class="title"><a href="{{ site.baseurl }}{{ post.url }}">Title next article</a></div> + <div><span class="date">2 days ago</span><span> - by </span><span class="author">Author name</span></div> + <div class="excerpt"> Dandelion cucumber earthnut pea peanut soko zucchini. Gumbo beet greens corn soko endive gumbo gourd... </div> + </div> + </section> + </div> </div> \ No newline at end of file http://git-wip-us.apache.org/repos/asf/cordova-docs/blob/f63ffac6/www/static/css-src/blog.scss ---------------------------------------------------------------------- diff --git a/www/static/css-src/blog.scss b/www/static/css-src/blog.scss index 3ed47a4..25161f0 100644 --- a/www/static/css-src/blog.scss +++ b/www/static/css-src/blog.scss @@ -2,8 +2,7 @@ padding-top:20px; .blogHeader{ position: relative; - padding-bottom:26px; - padding-left:40px; + padding:0 15px 25px 15px; h1{ color: #b58733; font-size: 30pt; @@ -11,7 +10,7 @@ div{ position: absolute; top: 20px; - left: 126px; + left: 96px; img{ float: left; @@ -180,8 +179,8 @@ //blog post page - .post{ - padding:0 40px; + div.post{ + padding:0 15px; header{ @@ -192,7 +191,7 @@ .author, .date{ font-size: 14pt; color: #999; - padding: 0 2px; + padding: 0 4px; } .date{ float:right; @@ -200,27 +199,96 @@ top:-20pt; } } - section{ + section > div.content{ padding: 40px 0; color: black; - } + } + } + section.nextprev-posts{ + div{ + .header{ + padding: 10px 0; + } + .title{ + color: #3992ab; + font-size: 14pt; + } + span{ + font-size: 9pt; + color: #999; + padding: 0 4px; + } + } + .next , .prev{ + padding: 10px 15px; + } + } -} - -// <div class="post"> -// <header> -// <div class="title">{{ page.title }}</div> -// <div class="author">By: {{ page.author.name }}</div> -// <div class="date">{{ page.date | date_to_string }}</div> -// </header> -// <section> -// <div class="content"> -// {{ content }} -// </div> -// </section> -// </div> -// </div> -// </div> -// </div> \ No newline at end of file + section.nextprev-controls{ + + div{ + position: fixed; + top:37%; + .title{ + color: white; + font-size: 12pt; + } + span{ + font-size: 9pt; + color: #999; + padding: 0 2px; + } + div{ + position: relative; + top: 64px; + left: 20px; + z-index:10; + width: 240px; + text-overflow: ellipsis; + overflow: hidden; + white-space: nowrap; + } + } + + .next { + right: 0px; + height:90px; + width: 321px; + top:calc(37% - 38px); + img{ + position: fixed; + right: 0px; + } + } + .prev{ + left:0px; + } + + + @media (max-width: 1800px) { + .next { + img{ + clip: rect(0px, 321px, 89px, 262px); + top:37%; + } + } + div{ + .title{ + display:none; + } + span{ + display:none; + } + } + } + @media (max-width: 1300px) { + .next, .prev { + img{ + display:none; + } + } + } + } +} \ No newline at end of file http://git-wip-us.apache.org/repos/asf/cordova-docs/blob/f63ffac6/www/static/img/post-next.png ---------------------------------------------------------------------- diff --git a/www/static/img/post-next.png b/www/static/img/post-next.png new file mode 100644 index 0000000..3eb420d Binary files /dev/null and b/www/static/img/post-next.png differ http://git-wip-us.apache.org/repos/asf/cordova-docs/blob/f63ffac6/www/static/img/post-prev.png ---------------------------------------------------------------------- diff --git a/www/static/img/post-prev.png b/www/static/img/post-prev.png new file mode 100644 index 0000000..4f267af Binary files /dev/null and b/www/static/img/post-prev.png differ --------------------------------------------------------------------- To unsubscribe, e-mail: [email protected] For additional commands, e-mail: [email protected]
