mirror of
https://github.com/viq/NewsBlur.git
synced 2025-08-31 22:20:12 +00:00
Finishing up the story detail page. Need to hook up the next/previous buttons, add paging, add an intelligence slider, and mark read and mobile will be done for v1.
This commit is contained in:
Samuel Clay
parent
bf8eb9b1de
commit
883946ea49
5 changed files with 327 additions and 174 deletions
|
|
@ -1,16 +1,80 @@
|
|||
/* ========== */
|
||||
/* = Global = */
|
||||
/* ========== */
|
||||
|
||||
.NB-favicon {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
vertical-align: text-top;
|
||||
}
|
||||
.NB-story-tags {
|
||||
overflow: hidden;
|
||||
line-height: 12px;
|
||||
height: 14px;
|
||||
margin: 0 0 6px 0;
|
||||
}
|
||||
.NB-story-tag {
|
||||
float: left;
|
||||
font-weight: normal;
|
||||
font-size: 9px;
|
||||
padding: 0px 4px 1px;
|
||||
margin: 0 2px 2px;
|
||||
background-color: #E3DFD4;
|
||||
color: #878787;
|
||||
text-shadow: 0 1px 0 #E9E9E9;
|
||||
border-radius: 4px;
|
||||
-moz-border-radius: 4px;
|
||||
-webkit-border-radius: 4px;
|
||||
}
|
||||
.NB-story-author {
|
||||
color: #969696;
|
||||
font-size: 10px;
|
||||
text-transform: uppercase;
|
||||
margin: 0 16px 8px 0;
|
||||
text-shadow: 0 1px 0 #F9F9F9;
|
||||
float: left;
|
||||
}
|
||||
.NB-story-date {
|
||||
float: right;
|
||||
font-size: 11px;
|
||||
color: #252D6C;
|
||||
}
|
||||
.NB-story .NB-icon-score {
|
||||
margin-top: 12px;
|
||||
height: 16px;
|
||||
width: 16px;
|
||||
left: 4px;
|
||||
top: 17px;
|
||||
}
|
||||
.NB-story.NB-read .NB-icon-score {
|
||||
opacity: .2;
|
||||
}
|
||||
.NB-story.NB-score-positive .NB-icon-score {
|
||||
background: transparent url('../../img/icons/silk/bullet_green.png') no-repeat 0 0;
|
||||
}
|
||||
.NB-story.NB-score-neutral .NB-icon-score {
|
||||
background: transparent url('../../img/icons/silk/bullet_yellow.png') no-repeat 0 0;
|
||||
}
|
||||
.NB-story.NB-score-negative .NB-icon-score {
|
||||
background: transparent url('../../img/icons/silk/bullet_red.png') no-repeat 0 0;
|
||||
}
|
||||
.NB-story .NB-story-title {
|
||||
clear: left;
|
||||
}
|
||||
|
||||
/* ============= */
|
||||
/* = Feed List = */
|
||||
/* ============= */
|
||||
|
||||
#NB-feed-list a {
|
||||
padding-left: 36px;
|
||||
padding-right: 36px;
|
||||
}
|
||||
#NB-feed-list .ui-li-icon {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
margin-top: -2px;
|
||||
}
|
||||
|
||||
#NB-feed-list a {
|
||||
padding-right: 32px;
|
||||
}
|
||||
#NB-feed-list .ui-li-count {
|
||||
position: static;
|
||||
float: right;
|
||||
|
|
@ -43,63 +107,8 @@
|
|||
/* ============== */
|
||||
|
||||
#NB-story-list .NB-story a {
|
||||
padding-right: 42px;
|
||||
padding-left: 24px;
|
||||
}
|
||||
#NB-story-list .NB-story .NB-icon-score {
|
||||
margin-top: 12px;
|
||||
height: 16px;
|
||||
width: 16px;
|
||||
left: 4px;
|
||||
top: 17px;
|
||||
}
|
||||
#NB-story-list .NB-story.NB-read .NB-icon-score {
|
||||
opacity: .2;
|
||||
}
|
||||
#NB-story-list .NB-story.NB-score-positive .NB-icon-score {
|
||||
background: transparent url('../../img/icons/silk/bullet_green.png') no-repeat 0 0;
|
||||
}
|
||||
#NB-story-list .NB-story.NB-score-neutral .NB-icon-score {
|
||||
background: transparent url('../../img/icons/silk/bullet_yellow.png') no-repeat 0 0;
|
||||
}
|
||||
#NB-story-list .NB-story.NB-score-negative .NB-icon-score {
|
||||
background: transparent url('../../img/icons/silk/bullet_red.png') no-repeat 0 0;
|
||||
}
|
||||
#NB-story-list .NB-story-author {
|
||||
color: #969696;
|
||||
font-size: 10px;
|
||||
text-transform: uppercase;
|
||||
margin: 0 16px 8px 0;
|
||||
text-shadow: 0 1px 0 #F9F9F9;
|
||||
float: left;
|
||||
}
|
||||
#NB-story-list .NB-story-tags {
|
||||
overflow: hidden;
|
||||
line-height: 12px;
|
||||
height: 14px;
|
||||
margin: 0 0 6px 0;
|
||||
}
|
||||
#NB-story-list .NB-story-tag {
|
||||
float: left;
|
||||
font-weight: normal;
|
||||
font-size: 9px;
|
||||
padding: 0px 4px 1px;
|
||||
margin: 0 2px 2px;
|
||||
background-color: #E3DFD4;
|
||||
color: #878787;
|
||||
text-shadow: 0 1px 0 #E9E9E9;
|
||||
border-radius: 4px;
|
||||
-moz-border-radius: 4px;
|
||||
-webkit-border-radius: 4px;
|
||||
}
|
||||
#NB-story-list .NB-story-date {
|
||||
float: right;
|
||||
font-size: 11px;
|
||||
color: #252D6C;
|
||||
}
|
||||
#NB-story-list .NB-read .NB-story-date {
|
||||
color: #6D6D6D;
|
||||
font-weight: normal;
|
||||
padding-right: 36px;
|
||||
}
|
||||
#NB-story-list .NB-story-feed {
|
||||
overflow: hidden;
|
||||
|
|
@ -123,15 +132,107 @@
|
|||
}
|
||||
#NB-story-list .NB-read .NB-story-feed .NB-story-feed-title {
|
||||
color: #7C7C7C;
|
||||
font-weight: normal;
|
||||
}
|
||||
#NB-story-list .NB-story .NB-story-title {
|
||||
text-shadow: 0 1px 0 #F3F3F3;
|
||||
white-space: normal;
|
||||
font-weight: bold;
|
||||
clear: left;
|
||||
}
|
||||
#NB-story-list .NB-story.NB-read .NB-story-title {
|
||||
#NB-story-list .NB-read .NB-story-title {
|
||||
font-weight: normal;
|
||||
}
|
||||
#NB-story-list .NB-read .NB-story-date {
|
||||
color: #6D6D6D;
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
|
||||
/* ================ */
|
||||
/* = Story Detail = */
|
||||
/* ================ */
|
||||
|
||||
#NB-page-story .ui-content {
|
||||
padding: 0;
|
||||
}
|
||||
#NB-page-story .ui-header {
|
||||
padding: 2px 0;
|
||||
color: white;
|
||||
font-size: 13px;
|
||||
text-shadow: 1px 1px 0 #000;
|
||||
}
|
||||
#NB-page-story .ui-header.NB-inverse {
|
||||
color: black;
|
||||
text-shadow: 1px 1px 0 #E0E0E0;
|
||||
}
|
||||
#NB-page-story .ui-title {
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
#NB-page-story .ui-title .feed_title {
|
||||
}
|
||||
#NB-page-story .NB-favicon {
|
||||
margin-right: 4px;
|
||||
}
|
||||
#NB-story {
|
||||
background-color: white;
|
||||
}
|
||||
#NB-story .NB-story-header {
|
||||
font-weight: bold;
|
||||
font-size: 16px;
|
||||
padding: 8px 24px 8px 24px;
|
||||
background-color: #dadada;
|
||||
background-image: -moz-linear-gradient(top, #EBEBEB, #CFCFCF); /* FF3.6 */
|
||||
background-image: -ms-linear-gradient(top, #EBEBEB, #CFCFCF); /* IE10 */
|
||||
background-image: -o-linear-gradient(top, #EBEBEB, #CFCFCF); /* Opera 11.10+ */
|
||||
background-image: -webkit-gradient(linear, left top, left bottom, from(#EBEBEB), to(#CFCFCF)); /* Saf4+, Chrome */
|
||||
background-image: -webkit-linear-gradient(top, #EBEBEB, #CFCFCF); /* Chrome 10+, Saf5.1+ */
|
||||
background-image: linear-gradient(top, #EBEBEB, #CFCFCF);
|
||||
filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#EBEBEB', EndColorStr='#CFCFCF'); /* IE6–IE9 */
|
||||
|
||||
border-bottom: 1px solid #ADADAD;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
#NB-story .NB-story-header a {
|
||||
text-decoration: none;
|
||||
}
|
||||
#NB-story .NB-story-title {
|
||||
color: #303030;
|
||||
}
|
||||
#NB-story .NB-story-content {
|
||||
text-shadow: none;
|
||||
padding: 12px 24px;
|
||||
color: #2b2b2b;
|
||||
font-family: "Lucida Sans", "Lucida Grande", Verdana, Arial, Helvetica, sans-serif;
|
||||
font-size: 12px;
|
||||
line-height: 1.5em;
|
||||
}
|
||||
#NB-story .NB-story-content p {
|
||||
clear: both;
|
||||
}
|
||||
#NB-story .NB-story-content blockquote {
|
||||
background-color: #F0F0F0;
|
||||
border-left: 1px solid #9B9B9B;
|
||||
padding: .5em 2em;
|
||||
margin: 0px;
|
||||
}
|
||||
#NB-story .NB-story-content img {
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
#NB-page-story .NB-icon-score {
|
||||
margin-top: 12px;
|
||||
height: 16px;
|
||||
width: 16px;
|
||||
left: 4px;
|
||||
top: 17px;
|
||||
}
|
||||
#NB-page-story.NB-score-positive .NB-icon-score {
|
||||
background: transparent url('../../img/icons/silk/bullet_green.png') no-repeat 0 0;
|
||||
}
|
||||
#NB-page-story.NB-score-neutral .NB-icon-score {
|
||||
background: transparent url('../../img/icons/silk/bullet_yellow.png') no-repeat 0 0;
|
||||
}
|
||||
#NB-page-story.NB-score-negative .NB-icon-score {
|
||||
background: transparent url('../../img/icons/silk/bullet_red.png') no-repeat 0 0;
|
||||
}
|
||||
|
|
@ -100,7 +100,7 @@
|
|||
|
||||
var $feed = _.template('\
|
||||
<li class="<%= unread_class %> <%= exception_class %>">\
|
||||
<a href="#stories" data-feed-id="<%= feed.id %>">\
|
||||
<a href="#" data-feed-id="<%= feed.id %>">\
|
||||
<% if (feed.ps) { %>\
|
||||
<span class="ui-li-count ui-li-count-positive"><%= feed.ps %></span>\
|
||||
<% } %>\
|
||||
|
|
@ -158,7 +158,7 @@
|
|||
|
||||
return _.template('<li class="NB-story <%= story.read_status?"NB-read":"" %> NB-score-<%= score_color %>">\
|
||||
<div class="ui-li-icon NB-icon-score"></div>\
|
||||
<a href="#story" data-story-id="<%= story.id %>">\
|
||||
<a href="#" data-story-id="<%= story.id %>">\
|
||||
<div class="NB-story-date"><%= story.long_parsed_date %></div>\
|
||||
<% if (story.story_authors) { %>\
|
||||
<div class="NB-story-author"><%= story.story_authors %></div>\
|
||||
|
|
@ -191,21 +191,67 @@
|
|||
$.mobile.pageLoading();
|
||||
var $story_detail_view = this.$s.$story_detail;
|
||||
var story = this.model.get_story(story_id);
|
||||
var score_color = this.story_color(story);
|
||||
var $story = this.make_story_detail(story);
|
||||
|
||||
this.colorize_story_title(story);
|
||||
$('.ul-li-right', this.pages.story).jqmData('icon', 'NB-'+score_color);
|
||||
$story_detail_view.html($story);
|
||||
$.mobile.pageLoading(true);
|
||||
NEWSBLUR.log(['load_story_detail', story_id, story, this.pages.story, $('.ul-li-right', this.pages.story), score_color]);
|
||||
},
|
||||
|
||||
make_story_detail: function(story) {
|
||||
var feed = this.model.get_feed(this.active_feed);
|
||||
var score_color = this.story_color(story);
|
||||
|
||||
return _.template('<div class="NB-story-title"><%= story.story_title %></div>', {
|
||||
story : story,
|
||||
feed : feed,
|
||||
score_color : score_color
|
||||
var $story = _.template('<div class="NB-story <%= story.read_status?"NB-read":"" %> NB-score-<%= score_color %>">\
|
||||
<div class="NB-story-header">\
|
||||
<div class="NB-story-header-feed-gradient"></div>\
|
||||
<div class="ui-li-icon NB-icon-score"></div>\
|
||||
<div class="NB-story-date"><%= story.long_parsed_date %></div>\
|
||||
<% if (story.story_authors) { %>\
|
||||
<div class="NB-story-author"><%= story.story_authors %></div>\
|
||||
<% } %>\
|
||||
<% if (story.story_tags && story.story_tags.length) { %>\
|
||||
<div class="NB-story-tags">\
|
||||
<% _.each(story.story_tags, function(tag) { %>\
|
||||
<div class="NB-story-tag"><%= tag %></div>\
|
||||
<% }); %>\
|
||||
</div>\
|
||||
<% } %>\
|
||||
<a href="<%= story.story_permalink %>" data-story-id="<%= story.id %>">\
|
||||
<div class="NB-story-title"><%= story.story_title %></div>\
|
||||
</a>\
|
||||
</div>\
|
||||
<div class="NB-story-content"><%= story.story_content %></div>\
|
||||
</div>', {
|
||||
story : story,
|
||||
feed : feed,
|
||||
score_color : score_color
|
||||
});
|
||||
|
||||
return $story;
|
||||
},
|
||||
|
||||
colorize_story_title: function() {
|
||||
var feed = this.model.get_feed(this.active_feed);
|
||||
$('.ui-header', this.pages.story)
|
||||
.css('background-image', NEWSBLUR.utils.generate_gradient(feed, 'webkit'))
|
||||
.css('background-image', NEWSBLUR.utils.generate_gradient(feed, 'moz'))
|
||||
.css('borderBottom', NEWSBLUR.utils.generate_gradient(feed, 'border'))
|
||||
.css('borderTop', NEWSBLUR.utils.generate_gradient(feed, 'border'))
|
||||
.toggleClass('NB-inverse', NEWSBLUR.utils.is_feed_floater_gradient_light(feed));
|
||||
|
||||
var $feed = _.template('<div class="NB-story-feed-header">\
|
||||
<img class="NB-favicon" src="<%= $.favicon(feed.favicon, true) %>" />\
|
||||
<span class="feed_title">\
|
||||
<%= feed.feed_title %>\
|
||||
</span>\
|
||||
</div>', {
|
||||
feed : feed
|
||||
});
|
||||
|
||||
$('.ui-title', this.pages.story).html($feed);
|
||||
},
|
||||
|
||||
// =====================
|
||||
|
|
@ -228,15 +274,18 @@
|
|||
bind_clicks: function() {
|
||||
var self = this;
|
||||
|
||||
$('#NB-feed-list').delegate('li', 'tap', function(e) {
|
||||
var feed_id = $(e.target).jqmData('feed-id');
|
||||
$('#NB-feed-list').delegate('li a', 'tap', function(e) {
|
||||
e.preventDefault();
|
||||
var feed_id = $(e.currentTarget).jqmData('feed-id');
|
||||
$.mobile.pageLoading();
|
||||
$.mobile.changePage('stories');
|
||||
self.load_stories(feed_id);
|
||||
});
|
||||
|
||||
$('#NB-stories-list').delegate('li', 'tap', function(e) {
|
||||
var story_id = $(e.target).jqmData('story-id');
|
||||
$('#NB-story-list').delegate('li a', 'tap', function(e) {
|
||||
e.preventDefault();
|
||||
NEWSBLUR.log(['story tap', e, e.target]);
|
||||
var story_id = $(e.currentTarget).jqmData('story-id');
|
||||
$.mobile.pageLoading();
|
||||
$.mobile.changePage('story');
|
||||
self.load_story_detail(story_id);
|
||||
|
|
|
|||
|
|
@ -2559,82 +2559,6 @@
|
|||
return $story_title;
|
||||
},
|
||||
|
||||
is_feed_floater_gradient_light: function(feed) {
|
||||
if (!feed) return false;
|
||||
var color = feed.favicon_color;
|
||||
if (!color) return false;
|
||||
|
||||
var r = parseInt(color.substr(0, 2), 16) / 255.0;
|
||||
var g = parseInt(color.substr(2, 2), 16) / 255.0;
|
||||
var b = parseInt(color.substr(4, 2), 16) / 255.0;
|
||||
|
||||
return $.textColor({r: r, g: g, b: b}) != 'white';
|
||||
},
|
||||
|
||||
generate_gradient: function(feed, type) {
|
||||
if (!feed) return '';
|
||||
var color = feed.favicon_color;
|
||||
if (!color) return '';
|
||||
|
||||
var r = parseInt(color.substr(0, 2), 16);
|
||||
var g = parseInt(color.substr(2, 2), 16);
|
||||
var b = parseInt(color.substr(4, 2), 16);
|
||||
|
||||
if (type == 'border') {
|
||||
return [
|
||||
'1px solid rgb(',
|
||||
[
|
||||
parseInt(r*(6/8), 10),
|
||||
parseInt(g*(6/8), 10),
|
||||
parseInt(b*(6/8), 10)
|
||||
].join(','),
|
||||
')'
|
||||
].join('');
|
||||
} else if (type == 'webkit') {
|
||||
return [
|
||||
'-webkit-gradient(',
|
||||
'linear,',
|
||||
'left bottom,',
|
||||
'left top,',
|
||||
'color-stop(0.06, rgba(',
|
||||
[
|
||||
r,
|
||||
g,
|
||||
b,
|
||||
255
|
||||
].join(','),
|
||||
')),',
|
||||
'color-stop(0.84, rgba(',
|
||||
[
|
||||
r+35,
|
||||
g+35,
|
||||
b+35,
|
||||
255
|
||||
].join(','),
|
||||
')))'
|
||||
].join('');
|
||||
} else if (type == 'moz') {
|
||||
return [
|
||||
'-moz-linear-gradient(',
|
||||
'center bottom,',
|
||||
'rgb(',
|
||||
[
|
||||
r,
|
||||
g,
|
||||
b
|
||||
].join(','),
|
||||
') 6%,',
|
||||
'rgb(',
|
||||
[
|
||||
r+35,
|
||||
g+35,
|
||||
b+35
|
||||
].join(','),
|
||||
') 84%)'
|
||||
].join('');
|
||||
}
|
||||
},
|
||||
|
||||
story_titles_clear_loading_endbar: function() {
|
||||
var $story_titles = this.$s.$story_titles;
|
||||
|
||||
|
|
@ -3176,11 +3100,11 @@
|
|||
$.make('span', { className: 'feed_title' }, feed.feed_title)
|
||||
])
|
||||
)
|
||||
]).css('background-image', this.generate_gradient(feed, 'webkit'))
|
||||
.css('background-image', this.generate_gradient(feed, 'moz'))
|
||||
.css('borderBottom', this.generate_gradient(feed, 'border'))
|
||||
.css('borderTop', this.generate_gradient(feed, 'border'))
|
||||
.toggleClass('NB-inverse', this.is_feed_floater_gradient_light(feed)),
|
||||
]).css('background-image', NEWSBLUR.utils.generate_gradient(feed, 'webkit'))
|
||||
.css('background-image', NEWSBLUR.utils.generate_gradient(feed, 'moz'))
|
||||
.css('borderBottom', NEWSBLUR.utils.generate_gradient(feed, 'border'))
|
||||
.css('borderTop', NEWSBLUR.utils.generate_gradient(feed, 'border'))
|
||||
.toggleClass('NB-inverse', NEWSBLUR.utils.is_feed_floater_gradient_light(feed)),
|
||||
$.make('div', { className: 'NB-feed-story-header-info' }, [
|
||||
(story.story_authors &&
|
||||
this.make_story_feed_author(story)),
|
||||
|
|
|
|||
|
|
@ -1,19 +1,95 @@
|
|||
NEWSBLUR.utils = {
|
||||
|
||||
compute_story_score: function(story) {
|
||||
var score = 0;
|
||||
var score_max = Math.max(story.intelligence['title'],
|
||||
story.intelligence['author'],
|
||||
story.intelligence['tags']);
|
||||
var score_min = Math.min(story.intelligence['title'],
|
||||
story.intelligence['author'],
|
||||
story.intelligence['tags']);
|
||||
if (score_max > 0) score = score_max;
|
||||
else if (score_min < 0) score = score_min;
|
||||
compute_story_score: function(story) {
|
||||
var score = 0;
|
||||
var score_max = Math.max(story.intelligence['title'],
|
||||
story.intelligence['author'],
|
||||
story.intelligence['tags']);
|
||||
var score_min = Math.min(story.intelligence['title'],
|
||||
story.intelligence['author'],
|
||||
story.intelligence['tags']);
|
||||
if (score_max > 0) score = score_max;
|
||||
else if (score_min < 0) score = score_min;
|
||||
|
||||
if (score == 0) score = story.intelligence['feed'];
|
||||
if (score == 0) score = story.intelligence['feed'];
|
||||
|
||||
return score;
|
||||
}
|
||||
return score;
|
||||
},
|
||||
|
||||
generate_gradient: function(feed, type) {
|
||||
if (!feed) return '';
|
||||
var color = feed.favicon_color;
|
||||
if (!color) return '';
|
||||
|
||||
var r = parseInt(color.substr(0, 2), 16);
|
||||
var g = parseInt(color.substr(2, 2), 16);
|
||||
var b = parseInt(color.substr(4, 2), 16);
|
||||
|
||||
if (type == 'border') {
|
||||
return [
|
||||
'1px solid rgb(',
|
||||
[
|
||||
parseInt(r*(6/8), 10),
|
||||
parseInt(g*(6/8), 10),
|
||||
parseInt(b*(6/8), 10)
|
||||
].join(','),
|
||||
')'
|
||||
].join('');
|
||||
} else if (type == 'webkit') {
|
||||
return [
|
||||
'-webkit-gradient(',
|
||||
'linear,',
|
||||
'left bottom,',
|
||||
'left top,',
|
||||
'color-stop(0, rgba(',
|
||||
[
|
||||
r,
|
||||
g,
|
||||
b,
|
||||
255
|
||||
].join(','),
|
||||
')),',
|
||||
'color-stop(1, rgba(',
|
||||
[
|
||||
r+35,
|
||||
g+35,
|
||||
b+35,
|
||||
255
|
||||
].join(','),
|
||||
')))'
|
||||
].join('');
|
||||
} else if (type == 'moz') {
|
||||
return [
|
||||
'-moz-linear-gradient(',
|
||||
'center bottom,',
|
||||
'rgb(',
|
||||
[
|
||||
r,
|
||||
g,
|
||||
b
|
||||
].join(','),
|
||||
') 0%,',
|
||||
'rgb(',
|
||||
[
|
||||
r+35,
|
||||
g+35,
|
||||
b+35
|
||||
].join(','),
|
||||
') 100%)'
|
||||
].join('');
|
||||
}
|
||||
},
|
||||
|
||||
is_feed_floater_gradient_light: function(feed) {
|
||||
if (!feed) return false;
|
||||
var color = feed.favicon_color;
|
||||
if (!color) return false;
|
||||
|
||||
var r = parseInt(color.substr(0, 2), 16) / 255.0;
|
||||
var g = parseInt(color.substr(2, 2), 16) / 255.0;
|
||||
var b = parseInt(color.substr(4, 2), 16) / 255.0;
|
||||
|
||||
return $.textColor({r: r, g: g, b: b}) != 'white';
|
||||
}
|
||||
|
||||
};
|
||||
|
|
@ -60,39 +60,42 @@
|
|||
|
||||
|
||||
<div data-role="page" data-url="feeds" id="NB-page-feeds">
|
||||
<div data-role="header">
|
||||
<div data-role="header" data-backbtn="false">
|
||||
<h1>{{ request.user.username }}</h1>
|
||||
</div>
|
||||
<div data-role="content">
|
||||
<div id="NB-feed-list"></div>
|
||||
</div>
|
||||
<div data-role="footer"> 1
|
||||
<div data-role="footer">
|
||||
<div class="NB-footer-site-count ui-li-count">12 sites</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div data-role="page" data-url="stories" id="NB-page-stories">
|
||||
<div data-role="header">
|
||||
<a href="#" data-icon="arrow-l" data-back-btn-text="Sites" data-rel="back">Sites</a>
|
||||
<h1>Stories</h1>
|
||||
</div>
|
||||
<div data-role="content">
|
||||
<div id="NB-story-list"></div>
|
||||
</div>
|
||||
<div data-role="footer"> 1
|
||||
<div data-role="footer" class="ui-header"> 1
|
||||
<div class="NB-footer-site-count ui-li-count">12 sites</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div data-role="page" data-url="story" id="NB-page-story">
|
||||
<div data-role="header">
|
||||
<a href="#" data-icon="arrow-l" data-back-btn-text="Stories" data-rel="back">Stories</a>
|
||||
<h1>Story</h1>
|
||||
</div>
|
||||
<div data-role="content">
|
||||
<div id="NB-story"></div>
|
||||
</div>
|
||||
<div data-role="footer"> 1
|
||||
<div data-role="button" class="ui-li-left">Previous</div>
|
||||
<div data-role="button" class="ui-li-right">Next Unread</div>
|
||||
<div data-role="footer" class="ui-header">
|
||||
<a href="#" data-icon="arrow-u">Previous</a>
|
||||
<h1>...</h1>
|
||||
<a href="#" data-icon="arrow-d" class="ui-btn-right">Next Unread</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue