Styling main stream

app/assets/javascripts/app/views/photo_view.js

@@ -4,7 +4,7 @@ app.views.Photo = app.views.Base.extend({
 
   templateName: "photo",
 
-  className : "photo loaded col-md-4 clearfix",
+  className : "photo loaded col-md-4 col-sm-6 clearfix",
 
   events: {
     "click .remove_post": "destroyModel"

app/assets/javascripts/app/views/photos_view.js

@@ -1,7 +1,7 @@
 // @license magnet:?xt=urn:btih:0b31508aeb0634b347b8270c7bee4d411b5d4109&dn=agpl-3.0.txt AGPL-v3-or-Later
 
 app.views.Photos = app.views.InfScroll.extend({
-  className: "clearfix",
+  className: "clearfix row",
 
   postClass : app.views.Photo,
 

app/assets/stylesheets/colors.scss

@@ -26,3 +26,5 @@ $dark-blue: darken(#0984C8,10%);
 $sidebars-background: #f0f0f0;
 $sidebars-sub-background: darken($sidebars-background, 12%);
 $left-navbar-drawer-background: darken($sidebars-background, 6%);
+
+$card-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);

app/assets/stylesheets/people.scss

@@ -12,7 +12,7 @@
   .stream_element.media {
     border-bottom: 1px solid $border-grey;
     padding: 10px;
-    margin: 0px;
+    margin: 0;
     font-size: 13px;
     line-height: 16px;
     min-height: 50px;

app/assets/stylesheets/profile.scss

@@ -1,15 +1,19 @@
+body.page-people.action-show, body.page-people.action-contacts {
+  background-color: $sidebars-background;
+}
+
 #profile_container {
   .profile_header {
-    margin-bottom: 20px;
+    margin-bottom: 15px;
-    border-left: 1px solid #dddddd;
+    background-color: $white;
     padding-left: 10px;
+    padding-right: 10px;
     padding-top: 20px;
-    margin-left: -10px;
     margin-top: -20px;
+    box-shadow: $card-shadow;
 
     #edit_profile, #unblock_user_button, .aspect_dropdown {
-      margin-top: 5px;
+      margin-top: 15px;
-      margin-right: 10px;
     }
 
     #author_info {
@@ -51,9 +55,8 @@
       }
     }
 
-    #profile_horizontal_bar {
+    #profile-horizontal-bar {
       border-top: 1px dashed $border-grey;
-      border-bottom: 1px solid $border-grey;
       min-height: 50px;
       margin-top: 10px;
       #profile_buttons {
@@ -106,15 +109,20 @@
   }
 
   #profile {
-    padding: 10px 20px;
+    background-color: $white;
+    padding: 20px;
+    margin-top: -10px;
+    margin-bottom: 35px;
+    box-shadow: $card-shadow;
+
     #profile_photo {
       margin-top: 10px;
       padding-bottom: 10px;
-      border-bottom: 1px dashed $border-grey;
       text-align: center;
     }
 
     ul#profile_information {
+      border-top: 1px dashed $border-grey;
       margin: 0;
       padding: 0;
       list-style: none;
@@ -129,6 +137,11 @@
   }
 
   .stream_container > .pagination { text-align: center; }
+
+  #people_stream {
+    background-color: $white;
+    box-shadow: $card-shadow;
+  }
 }
 
 #email-form{

app/assets/stylesheets/stream.scss

@@ -1,8 +1,8 @@
+body.page-streams, body.page-photos {
+  background-color: $sidebars-background;
+}
+
 .stream_container {
-	padding-left: 10px;
-	padding-top: 20px;
-	margin-left: -10px;
-	margin-top: -20px;
   #publisher {
     margin-bottom: 15px;
   }

app/assets/stylesheets/stream_element.scss

@@ -24,25 +24,25 @@
         top: 1px;
       }
     }
-    &:hover > .bd > .control-icons { background: #fff; }
+    &:hover > .bd > .control-icons { background: $white; }
   }
   .thumbnail {
     padding: 10px;
-    margin: 0 5px 10px;
+    margin: 0 0 15px;
-    text-align: center;
+    background: $white;
-    line-height: 200px;
+    border-radius: 0;
-    border: 1px solid $border-grey;
+    box-shadow: $card-shadow;
-    background: #fefefe;
+    img.big_photo { max-height: 200px; }
-    box-shadow: 3px 3px 2px #eee;
-    img {
-      &.big_photo { max-height: 200px; }
-    }
   }
 }
 
 #main_stream .stream_element {
-  border-bottom: 1px solid $border-grey;
   padding: 10px;
+  margin-bottom: 20px;
+  background-color: $white;
+  border: 1px solid $light-grey;
+  box-shadow: $card-shadow;
+
   & > .media {
     &.shield-active .nsfw-hidden { display: none; }
     &:not(.shield-active) .nsfw-shield { display: none; }

app/assets/stylesheets/tag.scss

@@ -22,26 +22,29 @@ h1.tag {
     &:hover { border-bottom: 1px solid $border-dark-grey; }
   }
 }
-
+.page-tags {
-#tags_show {
+  background-color: $sidebars-background;
-  .col-md-3 {
+  #tags_show {
-    h4 { margin: 25px 0 15px; }
+    #left-navbar-fixed-background { border-right: none; }
-    .side_stream #people_stream {
+    .col-md-3 {
-      .name { display: block; }
+      h4 { margin: 25px 0 15px; }
-      .name, .diaspora_handle {
+      .side_stream #people_stream {
-        overflow: hidden;
+        .name { display: block; }
-        text-overflow: ellipsis;
+        .name, .diaspora_handle {
-        white-space: nowrap;
+          overflow: hidden;
+          text-overflow: ellipsis;
+          white-space: nowrap;
+        }
       }
     }
-  }
+    .col-md-7 {
-  .col-md-7 {
+      .tag-following-action {
-    .tag-following-action {
-      max-width: 100%;
-      input[type="submit"] {
-        overflow: hidden;
-        text-overflow: ellipsis;
         max-width: 100%;
+        input[type="submit"] {
+          overflow: hidden;
+          text-overflow: ellipsis;
+          max-width: 100%;
+        }
       }
     }
   }

app/assets/templates/photo_tpl.jst.hbs

@@ -25,5 +25,5 @@
         <img src="{{sizes.large}}" class="photo big_photo">
       </a>
     </div>
-
+  </div>
 </div>

app/assets/templates/profile_header_tpl.jst.hbs

@@ -1,43 +1,46 @@
-{{#if loggedIn}}
+<div id="author_info" class="row">
-  <div class="pull-right">
+  <div class="col-sm-10">
-    {{#if is_own_profile}}
+    <h2>
-      {{!-- can't block myself, so don't check it here --}}
+      <span id="name">{{name}}</span>
-      <a href="{{urlTo 'editProfile'}}" id="edit_profile" class="btn btn-primary">{{t 'people.edit_my_profile'}}</a>
+      <span id="diaspora_handle">{{diaspora_id}}</span>
-    {{else}} {{#if is_blocked}}
+      {{#if show_profile_btns}}
-      <a href="#" id="unblock_user_button" class="btn btn-danger">{{t 'people.stop_ignoring'}}</a>
+        {{{sharingMessage this}}}
-    {{else}}
+      {{/if}}
-      <div class="placeholder aspect_membership_dropdown"></div>
+    </h2>
-    {{/if}}{{/if}}
-  </div>
-{{/if}}
 
-<div id="author_info">
+    {{#if has_tags}}
-  <h2>
-    <span id="name">{{name}}</span>
-    <span id="diaspora_handle">{{diaspora_id}}</span>
-    {{#if show_profile_btns}}
-      {{{sharingMessage this}}}
-    {{/if}}
-  </h2>
-
-  {{#if has_tags}}
-    <div class="description">
-      <i class="entypo-tag"></i>
-      {{fmtTags profile.tags}}
-    </div>
-  {{else}}
-    {{#if is_own_profile}}
       <div class="description">
-        <i>{{t 'profile.you_have_no_tags'}}</i>
+        <i class="entypo-tag"></i>
-        <span class="add_tags">
+        {{fmtTags profile.tags}}
-          <a href="{{urlTo 'editProfile'}}">{{t 'profile.add_some'}}</a>
+      </div>
-        </span>
+    {{else}}
+      {{#if is_own_profile}}
+        <div class="description">
+          <i>{{t 'profile.you_have_no_tags'}}</i>
+          <span class="add_tags">
+            <a href="{{urlTo 'editProfile'}}">{{t 'profile.add_some'}}</a>
+          </span>
+        </div>
+      {{/if}}
+    {{/if}}
+  </div>
+  <div class="clearfix col-sm-2">
+    {{#if loggedIn}}
+      <div class="pull-right">
+        {{#if is_own_profile}}
+        {{!-- can't block myself, so don't check it here --}}
+          <a href="{{urlTo 'editProfile'}}" id="edit_profile" class="btn btn-primary">{{t 'people.edit_my_profile'}}</a>
+        {{else}} {{#if is_blocked}}
+          <a href="#" id="unblock_user_button" class="btn btn-danger">{{t 'people.stop_ignoring'}}</a>
+        {{else}}
+          <div class="placeholder aspect_membership_dropdown"></div>
+        {{/if}}{{/if}}
       </div>
     {{/if}}
-  {{/if}}
+  </div>
 </div>
 
-<div id="profile_horizontal_bar">
+<div id="profile-horizontal-bar">
   {{#if show_profile_btns}}
     <div id="profile_buttons" class="pull-right">
       {{#if is_receiving}}

app/views/tags/show.haml

@@ -10,14 +10,16 @@
 
 .container-fluid#tags_show
   .row
-    .col-md-3.col-md-offset-1
+    .col-lg-1.visible-lg#left-navbar-fixed-sub-background
+    .col-lg-offset-1.col-lg-3.col-md-4.hidden-sm.hidden-xs#left-navbar-fixed-background
+    .col-lg-offset-1.col-lg-3.col-md-4
       %h4
         = t('.tagged_people', count: @stream.tagged_people_count, tag: @stream.display_tag_name)
 
       .side_stream.stream
         = render partial: 'people/index', locals: {people: @stream.tagged_people}
 
-    .col-md-7
+    .col-lg-7.col-md-8
       .stream_container
         #author_info
           %h2
@@ -26,13 +28,13 @@
         - if current_user
           = render 'publisher/publisher', :selected_aspects => @stream.aspect_ids, :aspect_ids => @stream.aspect_ids, aspect: @stream.aspect
 
-        %hr
-
         #main_stream.stream
 
         #paginate
           %span.loader.hidden
             .spinner
 
+    .col-lg-1.visible-lg#right-sidebar-fixed-sub-background
+
       %a{id:"back-to-top", title:"#{t('layouts.application.back_to_top')}", href:"#"}
         ⇧

features/desktop/contacts.feature

@@ -22,7 +22,7 @@ Feature: show contacts
     And I sign out
     And I sign in as "alice@alice.alice"
     And I am on "robert@grimm.grimm"'s page
-    Then I should see "Contacts" within "#profile_horizontal_bar"
+    Then I should see "Contacts" within "#profile-horizontal-bar"
 
     When I press the first "#contacts_link"
     And I press the first "a" within "#people_stream .media-body"
@@ -38,4 +38,4 @@ Feature: show contacts
 
     And I sign in as "alice@alice.alice"
     And I am on "robert@grimm.grimm"'s page
-    Then I should not see "Contacts" within "#profile_horizontal_bar"
+    Then I should not see "Contacts" within "#profile-horizontal-bar"

features/desktop/profile_photos.feature

@@ -25,7 +25,7 @@ Feature: show photos
     Scenario: I cannot see photos of people who don't share with me
       When I sign in as "alice@alice.alice"
       And I am on "robert@grimm.grimm"'s page
-      Then I should not see "Photos" within "#profile_horizontal_bar"
+      Then I should not see "Photos" within "#profile-horizontal-bar"
 
     Scenario: I delete a photo
       When I am on "robert@grimm.grimm"'s photos page
@@ -33,4 +33,4 @@ Feature: show photos
       And I confirm the alert
       Then I should not see a ".stream"
       When I am on "robert@grimm.grimm"'s page
-      Then I should not see "Photos" within "#profile_horizontal_bar"
+      Then I should not see "Photos" within "#profile-horizontal-bar"