From e5bb4216f9b1183925270a670a06dc449a3bcf91 Mon Sep 17 00:00:00 2001 From: danielgrippi Date: Sat, 5 May 2012 19:55:29 -0700 Subject: [PATCH] clean up dom on post viewer; use circles instead of weird semi-rounded boxes to be consistent --- .../javascripts/app/pages/post-viewer.js | 2 +- .../app/views/post-viewer/author.js | 9 +- app/assets/stylesheets/new_styles/_base.scss | 89 +++++++------------ .../stylesheets/new_styles/_profile.scss | 12 +++ app/assets/templates/post-viewer.jst.hbs | 6 +- .../templates/post-viewer/author.jst.hbs | 36 ++++---- 6 files changed, 70 insertions(+), 84 deletions(-) diff --git a/app/assets/javascripts/app/pages/post-viewer.js b/app/assets/javascripts/app/pages/post-viewer.js index e58f26b90..17b0c19f8 100644 --- a/app/assets/javascripts/app/pages/post-viewer.js +++ b/app/assets/javascripts/app/pages/post-viewer.js @@ -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) { diff --git a/app/assets/javascripts/app/views/post-viewer/author.js b/app/assets/javascripts/app/views/post-viewer/author.js index 0de915c93..af8e0aee2 100644 --- a/app/assets/javascripts/app/views/post-viewer/author.js +++ b/app/assets/javascripts/app/views/post-viewer/author.js @@ -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")) + } }); \ No newline at end of file diff --git a/app/assets/stylesheets/new_styles/_base.scss b/app/assets/stylesheets/new_styles/_base.scss index e3610c3c6..db268f266 100644 --- a/app/assets/stylesheets/new_styles/_base.scss +++ b/app/assets/stylesheets/new_styles/_base.scss @@ -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 { diff --git a/app/assets/stylesheets/new_styles/_profile.scss b/app/assets/stylesheets/new_styles/_profile.scss index 300326ab9..de74b9a73 100644 --- a/app/assets/stylesheets/new_styles/_profile.scss +++ b/app/assets/stylesheets/new_styles/_profile.scss @@ -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 { diff --git a/app/assets/templates/post-viewer.jst.hbs b/app/assets/templates/post-viewer.jst.hbs index 4797d4721..8301ac213 100644 --- a/app/assets/templates/post-viewer.jst.hbs +++ b/app/assets/templates/post-viewer.jst.hbs @@ -1,8 +1,4 @@ - - -
-
-
+
diff --git a/app/assets/templates/post-viewer/author.jst.hbs b/app/assets/templates/post-viewer/author.jst.hbs index 14418b1d2..3828014cc 100644 --- a/app/assets/templates/post-viewer/author.jst.hbs +++ b/app/assets/templates/post-viewer/author.jst.hbs @@ -1,25 +1,25 @@
- {{#linkToPerson author}} - {{{personImage this "small"}}} - {{/linkToPerson}} + {{#linkToPerson author}} +
+ {{/linkToPerson}}
- {{#linkToPerson author}} - {{name}} - {{/linkToPerson}} - - {{#if root}} - - {{#linkToPerson root.author}} - {{name}} + {{#linkToPerson author}} + {{name}} {{/linkToPerson}} - {{/if}} -
-
+ {{#if root}} + + {{#linkToPerson root.author}} + {{name}} + {{/linkToPerson}} + {{/if}} + +
+