Simple RSS Reader inspired by Gxxgle Reader
| 修订版 | 1f157356bfed231585ca0255bfe5640cd654d3d6 (tree) |
|---|---|
| 时间 | 2013-07-04 01:16:30 |
| 作者 | hylom <hylom@hylo...> |
| Commiter | hylom |
implement contents preview
client/public/css/style.css (diff) client/public/js/grdc.js (diff) client/views/index.jade (diff) client/views/layout.jade (diff)| @@ -3,6 +3,31 @@ body { | ||
| 3 | 3 | font: 14px "Lucida Grande", Helvetica, Arial, sans-serif; |
| 4 | 4 | } |
| 5 | 5 | |
| 6 | +#contents-body { | |
| 7 | + padding: 0 10px; | |
| 8 | +} | |
| 9 | + | |
| 6 | 10 | a { |
| 7 | 11 | color: #00B7FF; |
| 8 | 12 | } |
| 13 | + | |
| 14 | +#contentsPane .contentHeader { | |
| 15 | + background: #f9f9f9; | |
| 16 | +} | |
| 17 | +#contentsPane .contentTitle h4 { | |
| 18 | + margin: 0; | |
| 19 | + font-size: 100%; | |
| 20 | +} | |
| 21 | +#contentsPane .contentTitle h4 a { | |
| 22 | + color: #111; | |
| 23 | +} | |
| 24 | + | |
| 25 | +#contentsPane .contentTimestamp { | |
| 26 | + color: #999; | |
| 27 | +} | |
| 28 | + | |
| 29 | +#contentsPane .contentBody { | |
| 30 | + color: #333; | |
| 31 | + padding: 0 10px 0 20px; | |
| 32 | + display: none; | |
| 33 | +} | |
| \ No newline at end of file |
| @@ -1,18 +1,23 @@ | ||
| 1 | 1 | // grdc.js |
| 2 | 2 | |
| 3 | 3 | (function () { |
| 4 | - | |
| 5 | 4 | function updateContentsPane(data) { |
| 6 | 5 | var pane = $('#contentsPane'); |
| 7 | 6 | pane.empty(); |
| 8 | 7 | for (var i = 0; i < data.length; i++) { |
| 9 | 8 | var item = data[i]; |
| 10 | - var elem = '<tr>' | |
| 11 | - + '<td>' + item.title + '</td>' | |
| 12 | - + '<td>' + item.formatedTimestamp + '</td>' | |
| 13 | - + '<td><a target="_blank" href="' + item.url + '">' | |
| 14 | - + '<i class="icon-chevron-right"></i></a></td>' | |
| 15 | - + '</tr>'; | |
| 9 | + var elem = '<tr class="contentHeader" id="chead' + item.content_id + '">' | |
| 10 | + + '<td class="contentTitle"><h4><a href="#" class="contentTitleString" cid="' + item.content_id + '">' + item.title + '</a></h4></td>' | |
| 11 | + + '<td class="contentTimestamp">' + item.formatedTimestamp + '</td>' | |
| 12 | + + '<td class="contentLink"><a target="_blank" href="' + item.url + '">' | |
| 13 | + + '<i class="icon-chevron-right"></i></a></td>' | |
| 14 | + + '</tr>' | |
| 15 | + + '<tr class="contentBody" id="cbody' + item.content_id + '">' | |
| 16 | + + '<td colspan="3">' | |
| 17 | + + item.body | |
| 18 | + + '</td>' | |
| 19 | + + '</tr>' | |
| 20 | + ; | |
| 16 | 21 | pane.append(elem); |
| 17 | 22 | } |
| 18 | 23 | } |
| @@ -26,7 +31,17 @@ | ||
| 26 | 31 | return false; |
| 27 | 32 | } |
| 28 | 33 | |
| 34 | + function toggleContentBody(event) { | |
| 35 | + var contentId = $(event.target).attr('cid'); | |
| 36 | + console.log('click header ' + contentId); | |
| 37 | + if (contentId !== undefined) { | |
| 38 | + $('#cbody' + contentId).toggle(); | |
| 39 | + } | |
| 40 | + return false; | |
| 41 | + } | |
| 42 | + | |
| 29 | 43 | $(document).on('click', ".feedItem", loadFeed); |
| 44 | + $(document).on('click', ".contentTitleString", toggleContentBody); | |
| 30 | 45 | }).apply(); |
| 31 | 46 | |
| 32 | 47 |
| @@ -1,12 +1,11 @@ | ||
| 1 | 1 | extends layout |
| 2 | 2 | |
| 3 | 3 | block content |
| 4 | - .row | |
| 5 | - p grdc - RSS reader | |
| 6 | - .row | |
| 7 | - .span3 | |
| 8 | - ul.unstyled | |
| 9 | - each feed in feeds | |
| 10 | - li: a.feedItem(href='#', feed-id=feed.feed_id) #{feed.title} | |
| 11 | - .span9 | |
| 12 | - table.table.table-striped#contentsPane | |
| 4 | + #contents-body | |
| 5 | + .row | |
| 6 | + .span3 | |
| 7 | + ul.unstyled | |
| 8 | + each feed in feeds | |
| 9 | + li: a.feedItem(href='#', feed-id=feed.feed_id) #{feed.title} | |
| 10 | + .span9 | |
| 11 | + table.table#contentsPane |
| @@ -9,4 +9,6 @@ html | ||
| 9 | 9 | script(src="http://code.jquery.com/jquery.js") |
| 10 | 10 | script(src="/js/bootstrap.min.js") |
| 11 | 11 | script(src="/js/grdc.js") |
| 12 | + #header | |
| 13 | + p grdc - RSS reader | |
| 12 | 14 | block content |
| \ No newline at end of file |
hiromichi-m
Fork