stubbornella media and img dom structure FTW! major css deletion <3

app/views/people/_person.html.haml

@@ -3,17 +3,17 @@
 -#   the COPYRIGHT file.
 
 .stream_element{:id => person.id}
-  .right
+  .media
-    = render :partial => 'people/relationship_action',
+    %div{:style => "float:right;margin-top:2px;"}
-             :locals => { :person => person, :contact => contact,
+      = render :partial => 'people/relationship_action',
-                          :current_user => current_user }
+               :locals => { :person => person, :contact => contact,
+                            :current_user => current_user }
+    .img
+      = person_image_link(person)
 
-  = person_image_link(person)
+    .bd
-
-  .content
-    %span.from
       =person_link(person)
 
-    .info
+      .info
-      = Diaspora::Taggable.format_tags(person.profile.tag_string)
+        = Diaspora::Taggable.format_tags(person.profile.tag_string)
 

app/views/photos/_new_profile_photo.haml

@@ -74,11 +74,5 @@
   %p
     #fileInfo
 
-  -if !aspect.nil? && aspect != :getting_started && current_user.person.has_photos?
-    %br
-    %br
-    %p
-      \...#{t('.or_select_one_existing', :photos => link_to(t('_photos'), person_photos_path(person))).html_safe}
-
   #publisher_photo_upload
 

features/comments.feature

@@ -17,8 +17,8 @@ Feature: commenting
     When I focus the comment field
     And I fill in "text" with "is that a poodle?"
     And I press "Comment"
-    Then I should see "is that a poodle?" within "li.comment div.content"
+    Then I should see "is that a poodle?" within ".comment"
-    And I should see "less than a minute ago" within "li.comment time"
+    And I should see "less than a minute ago" within ".comment time"
 
   Scenario: comment on a photo from the photo page
     When I sign in as "bob@bob.bob"
@@ -27,8 +27,8 @@ Feature: commenting
     And I focus the comment field
     And I fill in "text" with "hahahah"
     And I press "Comment"
-    Then I should see "hahaha" within "li.comment div.content"
+    Then I should see "hahaha" within ".comment"
-    And I should see "less than a minute ago" within "li.comment time"
+    And I should see "less than a minute ago" within ".comment time"
 
   Scenario: comment on your own photo from the photo page
     When I sign in as "alice@alice.alice"
@@ -37,8 +37,8 @@ Feature: commenting
     And I focus the comment field
     And I fill in "text" with "hahahah"
     And I press "Comment"
-    Then I should see "hahaha" within "li.comment div.content"
+    Then I should see "hahaha" within ".comment"
-    And I should see "less than a minute ago" within "li.comment time"
+    And I should see "less than a minute ago" within ".comment time"
 
   Scenario: delete a comment
     When I sign in as "bob@bob.bob"

public/javascripts/app/templates/comment-stream.handlebars

@@ -1,30 +1,32 @@
 {{#unless all_comments_loaded}}
-  <ul class="show_comments {{#unless showExpandCommentsLink}} hidden {{/unless}}">
+  <div class="show_comments comment {{#unless showExpandCommentsLink}} hidden {{/unless}}">
-    <li>
+    <div class="media">
       <a href="/posts/{{id}}/comments" class="toggle_post_comments">
-      {{t "stream.more_comments" count=moreCommentsCount}}
+        {{t "stream.more_comments" count=moreCommentsCount}}
       </a>
-    </li>
+    </div>
-  </ul>
+  </div>
 {{/unless}}
 
-<ul class="comments"> </ul>
+<div class="comments"> </div>
 
 {{#if current_user}}
-  <div class="new_comment_form_wrapper {{#unless comments_count}} hidden {{/unless}}">
+  <div class="comment no-border">
-    <form accept-charset="UTF-8" action="/posts/{{id}}/comments" class="new_comment" id="new_comment_on_{{id}}" method="post">
+    <div class="media new_comment_form_wrapper {{#unless comments_count}} hidden {{/unless}}">
       {{#with current_user}}
-        <a href="/people/{{guid}}">
+        <a href="/people/{{guid}}" class="img">
           <img src="{{avatar.small}}" class="avatar" />
         </a>
       {{/with}}
 
-      <p>
+      <div class="bd">
-        <textarea class="comment_box" id="comment_text_on_{{id}}" name="text" rows="2" placeholder="{{t "stream.comment"}}" />
+        <form accept-charset="UTF-8" action="/posts/{{id}}/comments" class="new_comment" id="new_comment_on_{{id}}" method="post">
-      </p>
+          <textarea class="comment_box" id="comment_text_on_{{id}}" name="text" rows="2" placeholder="{{t "stream.comment"}}" />
-      <div class="submit_button">
+          <div class="submit_button">
-        <input class="button creation" id="comment_submit_{{id}}" name="commit" type="submit" value="{{t "stream.comment"}}" />
+            <input class="button creation" id="comment_submit_{{id}}" name="commit" type="submit" value="{{t "stream.comment"}}" />
+          </div>
+        </form>
       </div>
-    </form>
+    </div>
   </div>
 {{/if}}

public/javascripts/app/templates/comment.handlebars

@@ -1,27 +1,28 @@
-<div class="right controls">
+<div class="media">
+
   {{#if canRemove}}
-    <a href="#" class="delete comment_delete" title="{{t "delete"}}">
+    <div class="controls">
-      <img alt="Deletelabel" src="{{imageUrl "/images/deletelabel.png"}}" />
+      <a href="#" class="delete comment_delete" title="{{t "delete"}}">
-    <a/>
+        <img alt="Deletelabel" src="{{imageUrl "/images/deletelabel.png"}}" />
+      <a/>
+    </div>
   {{/if}}
-</div>
 
-<a href="/people/{{author.guid}}">
+  <a href="/people/{{author.guid}}" class="img">
-  <img src="{{author.avatar.small}}" class="avatar" />
+    <img src="{{author.avatar.small}}" class="avatar" />
-</a>
+  </a>
 
-<div class="content">
+  <div class="bd">
-  <span class="from">
+    <a href="/people/{{author.guid}}" class="author">
-    <a href="/people/{{author.guid}}">
       {{author.name}}
     </a>
-  </span>
 
-  <div class="collapsible">
+    <div class="collapsible">
-    {{{text}}}
+      {{{text}}}
-  </div>
+    </div>
 
-  <div class="comment_info">
+    <div class="info">
-    <time class="timeago" datetime="{{created_at}}"/>
+      <time class="timeago" datetime="{{created_at}}"/>
+    </div>
   </div>
 </div>

public/javascripts/app/templates/feedback.handlebars

@@ -1,4 +1,4 @@
-<span class="post_scope">
+<span class="post_scope grey">
   {{#if public}}
     {{t "stream.public"}}
   {{else}}
@@ -10,8 +10,8 @@
       via {{provider_display_name}}
     </strong>
   {{/if}}
+  –
 </span>
-–
 
 <a href="#" class="like_action" rel='nofollow'>
   {{#if user_like}}

public/javascripts/app/templates/likes-info.handlebars

@@ -1,24 +1,28 @@
-{{#if likes_count}}
+{{#if hasLikes}}
-  <img alt="Heart" src="/images/icons/pin.png" />
+  <div class="comment">
-  {{#unless likes.length}}
+    <div class="media">
+      <span class="img">
+        <img alt="Heart" src="/images/icons/pin.png" />
+      </span>
 
-	  <a href="#" class="expand_likes">
+      <div class="bd">
-	    {{t "stream.likes" count=likes_count}}
+        {{#unless likes.length}}
-	  </a>
+          <a href="#" class="expand_likes">
-
+            {{t "stream.likes" count=likes_count}}
-  {{else}}
-
-  	<span class="likes_list">
-
-      {{#each likes}}
-        {{#with attributes.author}}
-          <a href="/people/{{guid}}">
-            <img src="{{avatar.small}}" class="avatar" title="{{name}}"/>
           </a>
-        {{/with}}
-      {{/each}}
 
-  	</span>
+        {{else}}
 
-  {{/unless}}
+          {{#each likes}}
+            {{#with attributes.author}}
+              <a href="/people/{{guid}}">
+                <img src="{{avatar.small}}" class="avatar micro" title="{{name}}"/>
+              </a>
+            {{/with}}
+          {{/each}}
+
+        {{/unless}}
+      </div>
+    </div>
+  </div>
 {{/if}}

public/javascripts/app/templates/status-message.handlebars

@@ -14,7 +14,5 @@
     {{/each}}
 {{/if}}
 
-<div class="collapsible">
+{{{text}}}
-  {{{text}}}
+{{{o_embed_html}}}
-  {{{o_embed_html}}}
-</div>

public/javascripts/app/templates/stream-element.handlebars

@@ -1,36 +1,37 @@
-<div class="right controls">
+<div class="media">
-  {{#if authorIsCurrentUser}}
+
-    <a href="#" rel=nofollow>
+  {{#if current_user}}
-      <img src="/images/icons/ignoreuser.png" alt="Ignoreuser" class="block_user control_icon" title="{{t "ignore"}}" />
+    <div class="controls">
-      <img src="/images/deletelabel.png" class="delete control_icon hide_post" title="{{t "stream.hide"}}" />
+      {{#if authorIsCurrentUser}}
-    </a>
+        <a href="#" rel=nofollow>
-  {{else}}
+          <img src="/images/icons/ignoreuser.png" alt="Ignoreuser" class="block_user control_icon" title="{{t "ignore"}}" />
-    <a href="#" rel=nofollow>
+        </a>
-      <img src="/images/deletelabel.png" class="delete control_icon remove_post" title="{{t "delete"}}" />
+        <a href="#" rel=nofollow>
-    </a>
+          <img src="/images/deletelabel.png" class="delete control_icon hide_post" title="{{t "stream.hide"}}" />
+        </a>
+      {{else}}
+        <a href="#" rel=nofollow>
+          <img src="/images/deletelabel.png" class="delete control_icon remove_post" title="{{t "delete"}}" />
+        </a>
+      {{/if}}
+    </div>
   {{/if}}
 
-</div>
-
-<div class="sm_body">
   {{#with author}}
-    <a href="/people/{{guid}}">
+    <a href="/people/{{guid}}" class="img">
       <img src="{{avatar.small}}" class="avatar" />
     </a>
   {{/with}}
 
-  <div class="content">
+  <div class="bd">
+    <div>
+      {{#with author}}
+        <a href="/people/{{guid}}" class="author">
+          {{name}}
+        </a>
+      {{/with}}
 
-    <div class="post_initial_info">
+      <span class="details grey">
-      <span class="from">
-        {{#with author}}
-          <a href="/people/{{guid}}">
-            {{name}}
-          </a>
-        {{/with}}
-      </span>
-
-      <span class="details">
         -
         <a href="/posts/{{id}}">
           <time class="timeago" datetime="{{created_at}}" />
@@ -53,7 +54,7 @@
         </div>
     {{/if}}
 
-    <div class="post-content"> </div>
+    <div class="post-content collapsible"> </div>
 
     {{#if nsfw}}
       </div>

public/javascripts/app/views/comment_stream_view.js

@@ -45,7 +45,7 @@ app.views.CommentStream = app.views.Base.extend({
     // on post ownership in the Comment view.
     comment.set({parent : this.model.toJSON()})
 
-    this.$("ul.comments").append(new app.views.Comment({
+    this.$(".comments").append(new app.views.Comment({
       model: comment
     }).render().el);
   },

public/javascripts/app/views/comment_view.js

@@ -2,8 +2,6 @@ app.views.Comment = app.views.Content.extend({
 
   templateName: "comment",
 
-  tagName : "li",
-
   className : "comment",
 
   events : {

public/javascripts/app/views/likes_info_view.js

@@ -2,8 +2,6 @@ app.views.LikesInfo = app.views.StreamObject.extend({
 
   templateName : "likes-info",
 
-  className : "likes_container",
-
   events : {
     "click .expand_likes" : "showAvatars"
   },
@@ -11,7 +9,14 @@ app.views.LikesInfo = app.views.StreamObject.extend({
   tooltipSelector : ".avatar",
 
   presenter : function() {
-    return _.extend(this.defaultPresenter(), {likes : this.model.likes.models})
+    return _.extend(this.defaultPresenter(), {
+      likes : this.model.likes.models,
+      hasLikes : this.hasLikes()
+    })
+  },
+
+  hasLikes : function() {
+    return this.model.likes.models.length > 0
   },
 
   showAvatars : function(evt){

spec/javascripts/app/views/likes_info_view_spec.js

@@ -3,9 +3,9 @@ describe("app.views.LikesInfo", function(){
     loginAs({id : -1, name: "alice", avatar : {small : "http://avatar.com/photo.jpg"}});
 
     Diaspora.I18n.loadLocale({stream : {
-      likes : {
+      pins : {
-        zero : "<%= count %> Likes",
+        zero : "<%= count %> Pins",
-        one : "<%= count %> Like"}
+        one : "<%= count %> Pin"}
       }
     })
 
@@ -18,7 +18,9 @@ describe("app.views.LikesInfo", function(){
     it("displays a the like count if it is above zero", function() {
       this.view.render();
 
-      expect($(this.view.el).text()).toContain(Diaspora.I18n.t('stream.likes', {count : this.view.model.get("likes_count")}))
+      console.log($(this.view.el))
+
+      expect($(this.view.el).text()).toContain(Diaspora.I18n.t('stream.pins', {count : this.view.model.get("likes_count")}))
     })
 
     it("does not display the like count if it is zero", function() {