public-mirrors/NewsBlur
1
0
Fork 0
mirror of https://github.com/samuelclay/NewsBlur.git synced 2025-09-18 21:50:56 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

Login popover.

Browse source
This commit is contained in:
Samuel Clay 2013-01-15 18:58:11 -08:00
parent f4edd12513
commit f58695fef1
8 changed files with 312 additions and 174 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
assets.yml
View file

@ -133,5 +133,5 @@ stylesheets:
- media/css/bookmarklet/bookmarklet.css
blurblog:
- media/css/jquery.tipsy.css
- media/css/circular/css/social_page.css
- media/css/vendor/bootstrap-*.css
- media/css/circular/css/social_page.css

186
media/css/circular/css/social_page.css
View file

@ -179,6 +179,7 @@ blockquote {
padding: 4px 12px;
font-size: 14px;
font-weight: normal;
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.2);
}
.NB-blue-button:hover {
border: 1px solid #3573a5;
@ -212,12 +213,12 @@ blockquote {
-ms-border-radius: 2px;
-o-border-radius: 2px;
border-radius: 2px;
background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #fcfcfc), color-stop(100%, #f2f2f2));
background-image: -webkit-linear-gradient(#fcfcfc, #f2f2f2);
background-image: -moz-linear-gradient(#fcfcfc, #f2f2f2);
background-image: -o-linear-gradient(#fcfcfc, #f2f2f2);
background-image: linear-gradient(#fcfcfc, #f2f2f2);
text-shadow: 0px -1px 0px white;
background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #f8f8f8), color-stop(100%, #e5e5e5));
background-image: -webkit-linear-gradient(#f8f8f8, #e5e5e5);
background-image: -moz-linear-gradient(#f8f8f8, #e5e5e5);
background-image: -o-linear-gradient(#f8f8f8, #e5e5e5);
background-image: linear-gradient(#f8f8f8, #e5e5e5);
text-shadow: 0 -1px 0 rgba(255, 255, 255, 0.5);
color: gray;
height: 20px;
line-height: 20px;
@ -229,11 +230,12 @@ blockquote {
}
.NB-grey-button:hover {
border: 1px solid #ababab;
background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #f8f8f8), color-stop(100%, #e5e5e5));
background-image: -webkit-linear-gradient(#f8f8f8, #e5e5e5);
background-image: -moz-linear-gradient(#f8f8f8, #e5e5e5);
background-image: -o-linear-gradient(#f8f8f8, #e5e5e5);
background-image: linear-gradient(#f8f8f8, #e5e5e5);
color: #707070;
background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #efefef), color-stop(100%, #dfdfdf));
background-image: -webkit-linear-gradient(#efefef, #dfdfdf);
background-image: -moz-linear-gradient(#efefef, #dfdfdf);
background-image: -o-linear-gradient(#efefef, #dfdfdf);
background-image: linear-gradient(#efefef, #dfdfdf);
}
.NB-grey-button:active {
border: 1px solid #9d9d9d;
@ -245,7 +247,6 @@ blockquote {
-webkit-box-shadow: inset 0px 0px 10px #c1c1c1;
-moz-box-shadow: inset 0px 0px 10px #c1c1c1;
box-shadow: inset 0px 0px 10px #c1c1c1;
text-shadow: 0px -1px 1px white;
color: #333333;
}
@media screen and (max-width: 480px) {
@ -406,63 +407,8 @@ blockquote {
background-size: 17px;
}
.NB-popover {
display: none;
position: absolute;
z-index: 2;
width: 308px;
-webkit-border-radius: 8px 8px;
-moz-border-radius: 8px / 8px;
border-radius: 8px / 8px;
-webkit-box-shadow: rgba(51, 51, 51, 0.3) 0 0 2px, rgba(51, 51, 51, 0.3) 0 3px 8px inset;
-moz-box-shadow: rgba(51, 51, 51, 0.3) 0 0 2px, rgba(51, 51, 51, 0.3) 0 3px 8px inset;
box-shadow: rgba(51, 51, 51, 0.3) 0 0 2px, rgba(51, 51, 51, 0.3) 0 3px 8px inset;
background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #ffffff), color-stop(100%, #e6ebf0));
background-image: -webkit-linear-gradient(#ffffff, #e6ebf0);
background-image: -moz-linear-gradient(#ffffff, #e6ebf0);
background-image: -o-linear-gradient(#ffffff, #e6ebf0);
background-image: linear-gradient(#ffffff, #e6ebf0);
text-shadow: 0 1px 0 white;
font-size: 14px;
opacity: 0;
}
.NB-popover.NB-request-popover {
top: 50px;
left: 329px;
}
.NB-popover.NB-login-popover {
top: 50px;
left: 456px;
}
.NB-popover.NB-active {
display: block;
}
.NB-popover .NB-arrow {
position: absolute;
background: transparent url('/../../../media/img/circular/popover/arrow.png?1358278259') no-repeat 0 0;
background-size: 26px 17px;
}
.NB-popover input {
border: 1px solid #bdbdbd;
border: 1px solid #bdbdbd;
padding: 5px;
width: 228px;
margin-bottom: 15px;
font-size: 14px;
font-weight: normal;
}
.NB-popover .NB-error {
font-size: 12px;
color: #6A1000;
padding: 15px 0 0;
font-weight: bold;
line-height: 140%;
text-align: center;
margin: 0 10px;
}
.NB-banner {
padding: 12px 0 24px 0;
padding: 12px 0 18px 0;
overflow: hidden;
}
@media screen and (max-width: 480px) {
@ -561,6 +507,7 @@ blockquote {
padding: 4px 12px;
font-size: 14px;
font-weight: normal;
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.2);
padding: 2px 0;
}
.NB-banner .NB-button-following:hover {
@ -1063,12 +1010,12 @@ blockquote {
-ms-border-radius: 2px;
-o-border-radius: 2px;
border-radius: 2px;
background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #fcfcfc), color-stop(100%, #f2f2f2));
background-image: -webkit-linear-gradient(#fcfcfc, #f2f2f2);
background-image: -moz-linear-gradient(#fcfcfc, #f2f2f2);
background-image: -o-linear-gradient(#fcfcfc, #f2f2f2);
background-image: linear-gradient(#fcfcfc, #f2f2f2);
text-shadow: 0px -1px 0px white;
background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #f8f8f8), color-stop(100%, #e5e5e5));
background-image: -webkit-linear-gradient(#f8f8f8, #e5e5e5);
background-image: -moz-linear-gradient(#f8f8f8, #e5e5e5);
background-image: -o-linear-gradient(#f8f8f8, #e5e5e5);
background-image: linear-gradient(#f8f8f8, #e5e5e5);
text-shadow: 0 -1px 0 rgba(255, 255, 255, 0.5);
color: gray;
height: 20px;
line-height: 20px;
@ -1080,11 +1027,12 @@ blockquote {
}
.NB-story-comments-container .NB-story-comment-reply-form .NB-modal-submit-button:hover {
border: 1px solid #ababab;
background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #f8f8f8), color-stop(100%, #e5e5e5));
background-image: -webkit-linear-gradient(#f8f8f8, #e5e5e5);
background-image: -moz-linear-gradient(#f8f8f8, #e5e5e5);
background-image: -o-linear-gradient(#f8f8f8, #e5e5e5);
background-image: linear-gradient(#f8f8f8, #e5e5e5);
color: #707070;
background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #efefef), color-stop(100%, #dfdfdf));
background-image: -webkit-linear-gradient(#efefef, #dfdfdf);
background-image: -moz-linear-gradient(#efefef, #dfdfdf);
background-image: -o-linear-gradient(#efefef, #dfdfdf);
background-image: linear-gradient(#efefef, #dfdfdf);
}
.NB-story-comments-container .NB-story-comment-reply-form .NB-modal-submit-button:active {
border: 1px solid #9d9d9d;
@ -1096,7 +1044,6 @@ blockquote {
-webkit-box-shadow: inset 0px 0px 10px #c1c1c1;
-moz-box-shadow: inset 0px 0px 10px #c1c1c1;
box-shadow: inset 0px 0px 10px #c1c1c1;
text-shadow: 0px -1px 1px white;
color: #333333;
}
@media screen and (max-width: 480px) {
@ -1126,12 +1073,12 @@ blockquote {
-ms-border-radius: 2px;
-o-border-radius: 2px;
border-radius: 2px;
background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #fcfcfc), color-stop(100%, #f2f2f2));
background-image: -webkit-linear-gradient(#fcfcfc, #f2f2f2);
background-image: -moz-linear-gradient(#fcfcfc, #f2f2f2);
background-image: -o-linear-gradient(#fcfcfc, #f2f2f2);
background-image: linear-gradient(#fcfcfc, #f2f2f2);
text-shadow: 0px -1px 0px white;
background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #f8f8f8), color-stop(100%, #e5e5e5));
background-image: -webkit-linear-gradient(#f8f8f8, #e5e5e5);
background-image: -moz-linear-gradient(#f8f8f8, #e5e5e5);
background-image: -o-linear-gradient(#f8f8f8, #e5e5e5);
background-image: linear-gradient(#f8f8f8, #e5e5e5);
text-shadow: 0 -1px 0 rgba(255, 255, 255, 0.5);
color: gray;
height: 20px;
line-height: 20px;
@ -1143,11 +1090,12 @@ blockquote {
}
.NB-story-comments-container .NB-story-comment-buttons .NB-story-comment-save:hover {
border: 1px solid #ababab;
background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #f8f8f8), color-stop(100%, #e5e5e5));
background-image: -webkit-linear-gradient(#f8f8f8, #e5e5e5);
background-image: -moz-linear-gradient(#f8f8f8, #e5e5e5);
background-image: -o-linear-gradient(#f8f8f8, #e5e5e5);
background-image: linear-gradient(#f8f8f8, #e5e5e5);
color: #707070;
background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #efefef), color-stop(100%, #dfdfdf));
background-image: -webkit-linear-gradient(#efefef, #dfdfdf);
background-image: -moz-linear-gradient(#efefef, #dfdfdf);
background-image: -o-linear-gradient(#efefef, #dfdfdf);
background-image: linear-gradient(#efefef, #dfdfdf);
}
.NB-story-comments-container .NB-story-comment-buttons .NB-story-comment-save:active {
border: 1px solid #9d9d9d;
@ -1159,7 +1107,6 @@ blockquote {
-webkit-box-shadow: inset 0px 0px 10px #c1c1c1;
-moz-box-shadow: inset 0px 0px 10px #c1c1c1;
box-shadow: inset 0px 0px 10px #c1c1c1;
text-shadow: 0px -1px 1px white;
color: #333333;
}
@media screen and (max-width: 480px) {
@ -1287,12 +1234,12 @@ footer {
border: none;
}
ul.dropdown-menu {
.dropdown-menu {
min-width: 138px;
text-align: left;
cursor: default;
}
ul.dropdown-menu:before {
.dropdown-menu:before {
position: absolute;
top: -7px;
left: 60px;
@ -1303,7 +1250,7 @@ ul.dropdown-menu:before {
border-bottom-color: rgba(0, 0, 0, 0.2);
content: '';
}
ul.dropdown-menu:after {
.dropdown-menu:after {
position: absolute;
top: -6px;
left: 61px;
@ -1313,13 +1260,56 @@ ul.dropdown-menu:after {
border-left: 6px solid rgba(0, 0, 0, 0);
content: '';
}
ul.dropdown-menu li:hover {
.dropdown-menu li:hover {
cursor: pointer;
text-shadow: 0 1px 0 rgba(0, 0, 0, 0.2);
}
ul.dropdown-menu .divider {
.dropdown-menu .divider {
margin: 4px 0;
}
ul.dropdown-menu .divider:hover {
.dropdown-menu .divider:hover {
cursor: default;
}
.NB-popover-content,
.NB-popover-title {
display: none;
}
.popover {
text-shadow: inherit;
}
.popover.bottom .arrow:after {
border-bottom-color: #F7F7F7;
}
.popover .popover-title {
padding: 14px 14px;
border-bottom: 1px solid silver;
}
.popover .popover-content {
padding: 16px 14px;
}
.popover input {
border: 1px solid #bdbdbd;
border: 1px solid #bdbdbd;
padding: 5px;
width: 100%;
margin-bottom: 8px;
font-size: 14px;
font-weight: normal;
-webkit-box-sizing: border-box;
/* Safari/Chrome, other WebKit */
-moz-box-sizing: border-box;
/* Firefox, other Gecko */
box-sizing: border-box;
/* Opera/IE 8+ */
}
.popover .NB-error {
font-size: 12px;
color: #6A1000;
padding: 15px 0 0;
font-weight: bold;
line-height: 140%;
text-align: center;
margin: 0 10px;
}

120
media/css/circular/sass/social_page.scss
View file

@ -10,6 +10,7 @@ $link-color: #22258C;
$link-color-hover: #740417;
$link-color-active: #550B14;
$highlight-text-color: #62a4d3;
$grey-text-color: #707070;
$light-text-color: #808080;
$lighter-text-color: #A0A0A0;
$more-text-color: #1a9fff;
@ -42,8 +43,8 @@ $default-box-shadow-blur: 1px;
@mixin NB-default-button {
border: 1px solid $border-color;
@include border-radius(2px);
@include background-image(linear-gradient(#FCFCFC, #F2F2F2));
@include single-text-shadow(0px, -1px, 0px, false, white);
@include background-image(linear-gradient(#F8F8F8, #E5E5E5));
text-shadow: 0 -1px 0 rgba(255, 255, 255, .5);
color: $light-text-color;
height: 20px;
@ -56,14 +57,14 @@ $default-box-shadow-blur: 1px;
&:hover {
border: 1px solid $border-color-hover;
@include background-image(linear-gradient(#F8F8F8, #E5E5E5));
color: $grey-text-color;
@include background-image(linear-gradient(#EFEFEF, #DFDFDF));
}
&:active {
border: 1px solid $border-color-active;
@include background-image(linear-gradient(#e9e9e9, #e9e9e9));
@include single-box-shadow(#c1c1c1, 0px, 0px, 10px, false, true);
@include single-text-shadow(0px, -1px, 1px, false, white);
color: $text-color;
}
@media screen and (max-width: 480px) {
@ -83,6 +84,7 @@ $default-box-shadow-blur: 1px;
padding: 4px 12px;
font-size: $small-font-size;
font-weight: normal;
text-shadow: 0 -1px 0 rgba(0, 0, 0, .2);
&:hover {
border: 1px solid #3573A5;
@ -380,69 +382,12 @@ blockquote {
}
}
// ===========
// = Popover =
// ===========
.NB-popover {
display: none;
position: absolute;
z-index: 2;
width: 308px;
@include border-radius(8px, 8px);
@include box-shadow(rgba(#333, 0.3) 0 0 2px, rgba(#333, 0.3) 0 3px 8px inset);
@include background-image(linear-gradient(white, #E6EBF0));
text-shadow: 0 1px 0 white;
font-size: 14px;
opacity: 0;
&.NB-request-popover {
top: 50px;
left: 329px;
}
&.NB-login-popover {
top: 50px;
left: 456px;
}
&.NB-active {
display: block;
}
.NB-arrow {
position: absolute;
background: transparent image-url('popover/arrow.png') no-repeat 0 0;
background-size: 26px 17px;
}
input {
border: 1px solid $border-color;
border: 1px solid #BDBDBD;
padding: 5px;
width: 228px;
margin-bottom: 15px;
font-size: $small-font-size;
font-weight: normal;
}
.NB-error {
font-size: $smallest-font-size;
color: #6A1000;
padding: 15px 0 0;
font-weight: bold;
line-height: 140%;
text-align: center;
margin: 0 10px;
}
}
// ==========
// = Banner =
// ==========
.NB-banner {
padding: 12px 0 24px 0;
padding: 12px 0 18px 0;
overflow: hidden;
@media screen and (max-width: 480px) {
@ -1191,7 +1136,7 @@ footer {
// = Dropdown =
// ============
ul.dropdown-menu {
.dropdown-menu {
min-width: 138px;
text-align: left;
cursor: default;
@ -1228,3 +1173,52 @@ ul.dropdown-menu {
}
}
}
// ===========
// = Popover =
// ===========
.NB-popover-content,
.NB-popover-title {
display: none;
}
.popover {
text-shadow: inherit;
&.bottom .arrow:after {
border-bottom-color: #F7F7F7;
}
.popover-title {
padding: 14px 14px;
border-bottom: 1px solid #C0C0C0;
}
.popover-content {
padding: 16px 14px;
}
input {
border: 1px solid $border-color;
border: 1px solid #BDBDBD;
padding: 5px;
width: 100%;
margin-bottom: 8px;
font-size: $small-font-size;
font-weight: normal;
-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
-moz-box-sizing: border-box; /* Firefox, other Gecko */
box-sizing: border-box; /* Opera/IE 8+ */
}
.NB-error {
font-size: $smallest-font-size;
color: #6A1000;
padding: 15px 0 0;
font-weight: bold;
line-height: 140%;
text-align: center;
margin: 0 10px;
}
}

122
media/css/vendor/bootstrap-popover.css vendored Normal file
View file

@ -0,0 +1,122 @@
.popover {
position: absolute;
top: 0;
left: 0;
z-index: 1010;
display: none;
width: 236px;
padding: 1px;
text-align: left;
background-color: #ffffff;
-webkit-background-clip: padding-box;
-moz-background-clip: padding;
background-clip: padding-box;
border: 1px solid #ccc;
border: 1px solid rgba(0, 0, 0, 0.2);
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
-webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
-moz-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
white-space: normal;
}
.popover.top {
margin-top: -10px;
}
.popover.right {
margin-left: 10px;
}
.popover.bottom {
margin-top: 10px;
}
.popover.left {
margin-left: -10px;
}
.popover-title {
margin: 0;
padding: 8px 14px;
font-size: 14px;
font-weight: normal;
line-height: 18px;
background-color: #f7f7f7;
border-bottom: 1px solid #ebebeb;
-webkit-border-radius: 5px 5px 0 0;
-moz-border-radius: 5px 5px 0 0;
border-radius: 5px 5px 0 0;
}
.popover-content {
padding: 9px 14px;
}
.popover .arrow,
.popover .arrow:after {
position: absolute;
display: block;
width: 0;
height: 0;
border-color: transparent;
border-style: solid;
}
.popover .arrow {
border-width: 11px;
}
.popover .arrow:after {
border-width: 10px;
content: "";
}
.popover.top .arrow {
left: 50%;
margin-left: -11px;
border-bottom-width: 0;
border-top-color: #999;
border-top-color: rgba(0, 0, 0, 0.25);
bottom: -11px;
}
.popover.top .arrow:after {
bottom: 1px;
margin-left: -10px;
border-bottom-width: 0;
border-top-color: #ffffff;
}
.popover.right .arrow {
top: 50%;
left: -11px;
margin-top: -11px;
border-left-width: 0;
border-right-color: #999;
border-right-color: rgba(0, 0, 0, 0.25);
}
.popover.right .arrow:after {
left: 1px;
bottom: -10px;
border-left-width: 0;
border-right-color: #ffffff;
}
.popover.bottom .arrow {
left: 50%;
margin-left: -11px;
border-top-width: 0;
border-bottom-color: #999;
border-bottom-color: rgba(0, 0, 0, 0.25);
top: -11px;
}
.popover.bottom .arrow:after {
top: 1px;
margin-left: -10px;
border-top-width: 0;
border-bottom-color: #ffffff;
}
.popover.left .arrow {
top: 50%;
right: -11px;
margin-top: -11px;
border-right-width: 0;
border-left-color: #999;
border-left-color: rgba(0, 0, 0, 0.25);
}
.popover.left .arrow:after {
right: 1px;
border-right-width: 0;
border-left-color: #ffffff;
bottom: -10px;
}

10
media/css/vendor/bootstrap-transition.css vendored Normal file
View file

@ -0,0 +1,10 @@
.fade {
opacity: 0;
-webkit-transition: opacity 0.15s linear;
-moz-transition: opacity 0.15s linear;
-o-transition: opacity 0.15s linear;
transition: opacity 0.15s linear;
}
.fade.in {
opacity: 1;
}

22
media/js/newsblur/social_page/social_page_login_view.js
View file

@ -1,18 +1,34 @@
NEWSBLUR.Views.SocialPageLoginSignupView = Backbone.View.extend({
events: {
"click .NB-logout-button" : "logout",
"click .NB-menu-newsblur" : "open_in_newsblur",
"click .NB-menu-logout" : "logout",
"click .NB-login-button" : "login",
"click .NB-request-button" : "request_invite"
},
initialize: function() {
this.setup_login_popover();
},
setup_login_popover: function() {
this.$(".NB-circular-tab .NB-tab-inner").popover({
html: true,
placement: "bottom",
content: this.$(".NB-circular-tab .NB-popover-content").html(),
title: this.$(".NB-circular-tab .NB-popover-title").html()
});
},
// ==========
// = Events =
// ==========
open_in_newsblur: function(e) {
e.preventDefault();
window.location.href = NEWSBLUR.URLs.newsblur_page;
},
clean: function() {
this.$('.NB-error').remove();
},
@ -35,7 +51,7 @@ NEWSBLUR.Views.SocialPageLoginSignupView = Backbone.View.extend({
this.clean();
var error = _.first(_.values(data.errors))[0];
this.$('.NB-login-popover .NB-popover-inner').append($.make('div', { className: 'NB-error' }, error));
this.$('.popover .popover-content').append($.make('div', { className: 'NB-error' }, error));
},
logout: function() {

22
templates/social/social_page.xhtml
View file

@ -56,6 +56,9 @@
'email' : "{{ user.email|safe }}",
'MEDIA_URL' : "{{ MEDIA_URL }}",
};
NEWSBLUR.URLs = {
"newsblur_page": "http://{% current_domain %}/social/{{ social_profile.user_id }}/{{ social_profile.username|slugify }}"
};
{% if user_social_profile_page %}
NEWSBLUR.user_social_profile = {{ user_social_profile_page|safe }};
{% endif %}
@ -120,9 +123,9 @@
{{ user_social_profile.username }}
</div>
<ul class="dropdown-menu" role="menu">
<li><a href="#">Other thing</a></li>
<li><a href="#" class="NB-menu-newsblur">View on NewsBlur</a></li>
<li class="divider"></li>
<li><a href="#">Logout</a></li>
<li><a href="#" class="NB-menu-logout">Logout</a></li>
</ul>
</li>
{% else %}
@ -132,12 +135,15 @@
<img src="{{ MEDIA_URL }}img/icons/silk/bullet_arrow_down.png" class="NB-arrow" />
NewsBlur
<div class="NB-login-popover NB-popover">
<input type="text" placeholder="Username or email" name="login_username" class="NB-input" />
<input placeholder="Password" type="password" name="login_password" class="NB-input" />
<div class="NB-login-button NB-blue-button">Login</div>
<div class="NB-arrow"></div>
</div>
</div>
<div class="NB-popover-title">
<div class="NB-signup-button NB-grey-button">Create an account</div>
</div>
<div class="NB-popover-content">
<input type="text" placeholder="Username or email" name="login_username" class="NB-input" />
<input placeholder="Password" type="password" name="login_password" class="NB-input" />
<div class="NB-login-button NB-blue-button">Login</div>
<div class="NB-arrow"></div>
</div>
</li>
{% endif %}

2
templates/social/story_comments.xhtml
View file

@ -20,7 +20,7 @@
<div class="NB-story-comment-edit NB-story-comment {% if story.shared_by_user %}NB-hidden{% endif %}" data-user-id="{{ user_social_profile.user_id }}">
<a href="{{ user_social_profile.blurblog_url }}" class="NB-user-avatar">
<img src="{{ user_social_profile.photo_url }}">
<img src="{% if user_social_profile.photo_url %}{{ user_social_profile.photo_url }}{% else %}{{ MEDIA_URL }}/img/circular/circular_avatar.png{% endif %}">
</a>
<div class="NB-story-comment-input-form">
<textarea class="NB-story-comment-input" placeholder="Comment on this story..."></textarea>