clean up dom on post viewer; use circles instead of weird semi-rounded boxes to be consistent
This commit is contained in:
danielgrippi
parent
d47785d957
commit
e5bb4216f9
6 changed files with 70 additions and 84 deletions
|
|
@ -5,7 +5,7 @@ app.pages.PostViewer = app.views.Base.extend({
|
|||
"#post-content" : "postView",
|
||||
"#post-nav" : "navView",
|
||||
"#post-interactions" : "interactionsView",
|
||||
"#header-container" : "authorView"
|
||||
"#author-info" : "authorView"
|
||||
},
|
||||
|
||||
initialize : function(options) {
|
||||
|
|
|
|||
|
|
@ -3,6 +3,13 @@ app.views.PostViewerAuthor = app.views.Base.extend({
|
|||
id : "post-author",
|
||||
className : "media",
|
||||
|
||||
templateName: "post-viewer/author"
|
||||
tooltipSelector : ".profile-image-container",
|
||||
|
||||
templateName: "post-viewer/author",
|
||||
|
||||
initialize : function() {
|
||||
/* add a class so we know how to color the text for the author name */
|
||||
this.$el.addClass(this.model.get("frame_name"))
|
||||
}
|
||||
|
||||
});
|
||||
|
|
@ -5,12 +5,6 @@ a { color : rgb(42,156,235) }
|
|||
.icon-red { background-image: image_url("img/glyphicons-halflings-red.png"); }
|
||||
.icon-blue { background-image: image_url("img/glyphicons-halflings-blue.png"); }
|
||||
|
||||
@media (max-width: 770px) { //why is 770 a magic number?
|
||||
body {
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.photoset {
|
||||
@include center(horizontal);
|
||||
width: 100%;
|
||||
|
|
@ -58,30 +52,6 @@ a { color : rgb(42,156,235) }
|
|||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.header {
|
||||
position: fixed;
|
||||
|
||||
/* position absolute for mobile */
|
||||
@media (max-width: 480px) {
|
||||
position: absolute !important;
|
||||
}
|
||||
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 10;
|
||||
width: 100%;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
#header-container {
|
||||
padding: 1.2%;
|
||||
|
||||
/* don't pad the header if we're mobile */
|
||||
@media (max-width: 480px) {
|
||||
padding: 0 !important;
|
||||
}
|
||||
}
|
||||
|
||||
.avatar {
|
||||
&.micro {
|
||||
height: 20px;
|
||||
|
|
@ -95,46 +65,46 @@ a { color : rgb(42,156,235) }
|
|||
}
|
||||
|
||||
.author-name {
|
||||
font-family : Roboto;
|
||||
color: inherit;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
#post-author {
|
||||
@include border-radius();
|
||||
#author-info {
|
||||
position : absolute;
|
||||
z-index : 300;
|
||||
|
||||
border: 1px solid rgba(255,255,255,0.2);
|
||||
border-top: 1px solid rgba(255,255,255,0.5);
|
||||
|
||||
float: left;
|
||||
margin: 0;
|
||||
|
||||
padding: 5px;
|
||||
padding-right: 10px;
|
||||
|
||||
background-color: rgba(255,255,255,0.6);
|
||||
|
||||
/* don't pad the header if we're mobile */
|
||||
@media (max-width: 480px) {
|
||||
@include border-radius(0);
|
||||
background-color: rgba(255,255,255,0.4);
|
||||
width: 100% !important;
|
||||
border: none !important;
|
||||
padding: none !important;
|
||||
.author-name {
|
||||
color: #555;
|
||||
}
|
||||
|
||||
max-height: 35px;
|
||||
|
||||
.avatar {
|
||||
@include border-radius();
|
||||
.bd {
|
||||
margin-top : 5px;
|
||||
}
|
||||
|
||||
.post-time,
|
||||
.icon-retweet {
|
||||
color: #000;
|
||||
color: #555;
|
||||
@include opacity(0.5);
|
||||
}
|
||||
}
|
||||
|
||||
#post-author {
|
||||
margin : 0;
|
||||
padding : 10px;
|
||||
|
||||
&.status-with-photo-backdrop,
|
||||
&.Wallpaper {
|
||||
.author-name {
|
||||
color : #fff;
|
||||
}
|
||||
|
||||
.post-time,
|
||||
.icon-retweet {
|
||||
color: #fff;
|
||||
@include opacity(0.5);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.post-view {
|
||||
display: table;
|
||||
|
|
@ -203,6 +173,10 @@ article { //mood posts
|
|||
background-color : $night-background-color;
|
||||
color : $night-text-color;
|
||||
|
||||
#author-info {
|
||||
color : $night-text-color;
|
||||
}
|
||||
|
||||
.photo-viewer {
|
||||
img {
|
||||
max-height: 80%;
|
||||
|
|
@ -240,9 +214,6 @@ article { //mood posts
|
|||
|
||||
&.wallpaper{
|
||||
color : #fff;
|
||||
header {
|
||||
margin: 0 7%;
|
||||
}
|
||||
}
|
||||
|
||||
&.multi-photo {
|
||||
|
|
|
|||
|
|
@ -35,6 +35,18 @@
|
|||
display : inline-block;
|
||||
|
||||
margin-bottom : 5px;
|
||||
|
||||
&.small {
|
||||
height : 40px;
|
||||
width : 40px;
|
||||
border : 2px solid #fff;
|
||||
}
|
||||
|
||||
&.micro {
|
||||
height : 24px;
|
||||
width : 24px;
|
||||
border : 2px solid #fff;
|
||||
}
|
||||
}
|
||||
|
||||
#profile-controls {
|
||||
|
|
|
|||
|
|
@ -1,8 +1,4 @@
|
|||
<!-- header to be extracted -->
|
||||
|
||||
<div class="header">
|
||||
<div id="header-container"> </div>
|
||||
</div>
|
||||
<div id="author-info"></div>
|
||||
|
||||
<div id="top-right-nav">
|
||||
<a href="/" id="home-button">
|
||||
|
|
|
|||
|
|
@ -1,25 +1,25 @@
|
|||
<div class="img">
|
||||
{{#linkToPerson author}}
|
||||
{{{personImage this "small"}}}
|
||||
{{/linkToPerson}}
|
||||
{{#linkToPerson author}}
|
||||
<div class="profile-image-container small" style="background-image : url('{{avatar.small}}');" data-placement="right"></div>
|
||||
{{/linkToPerson}}
|
||||
</div>
|
||||
|
||||
<div class="bd">
|
||||
{{#linkToPerson author}}
|
||||
{{name}}
|
||||
{{/linkToPerson}}
|
||||
|
||||
{{#if root}}
|
||||
<i class="icon-retweet"></i>
|
||||
{{#linkToPerson root.author}}
|
||||
{{name}}
|
||||
{{#linkToPerson author}}
|
||||
{{name}}
|
||||
{{/linkToPerson}}
|
||||
{{/if}}
|
||||
|
||||
<div class="post-time">
|
||||
<time datetime="{{created_at}}" />
|
||||
{{#unless public}}
|
||||
<i class="icon-lock"> </i>
|
||||
{{/unless}}
|
||||
</div>
|
||||
{{#if root}}
|
||||
<i class="icon-retweet"></i>
|
||||
{{#linkToPerson root.author}}
|
||||
{{name}}
|
||||
{{/linkToPerson}}
|
||||
{{/if}}
|
||||
|
||||
<div class="post-time">
|
||||
<time datetime="{{created_at}}" />
|
||||
{{#unless public}}
|
||||
<i class="icon-lock"> </i>
|
||||
{{/unless}}
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
Loading…
Reference in a new issue