diff --git a/app/assets/javascripts/app/views/photo_view.js b/app/assets/javascripts/app/views/photo_view.js
index c4602a40f76bf8752201ba28033c13ab089313ab..ecf30fe1c9ff4af8a91022613435e78620389d5a 100644
--- a/app/assets/javascripts/app/views/photo_view.js
+++ b/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"
diff --git a/app/assets/javascripts/app/views/photos_view.js b/app/assets/javascripts/app/views/photos_view.js
index e1053e663f628303f8446624668d2b1ae8e01ec2..8a31fc815279e17292cf2d016e6fd669d975fa0b 100644
--- a/app/assets/javascripts/app/views/photos_view.js
+++ b/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,
diff --git a/app/assets/stylesheets/colors.scss b/app/assets/stylesheets/colors.scss
index a106062e4d08402a449bbda9bd48ab4d62d7c742..0496b0aa28c2d689d2fdf222ab021c326665cc7b 100644
--- a/app/assets/stylesheets/colors.scss
+++ b/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);
\ No newline at end of file
diff --git a/app/assets/stylesheets/people.scss b/app/assets/stylesheets/people.scss
index 62a1debd55ac1e0e9007c1ed991848884b003b53..2135983725534e3a286ce1fb4f3f83be00e4b9fd 100644
--- a/app/assets/stylesheets/people.scss
+++ b/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;
diff --git a/app/assets/stylesheets/profile.scss b/app/assets/stylesheets/profile.scss
index 99e792eb4534bcd15ca2a0125c3bfad6f2695994..590a979bd5f1d97205fceb6b65a10c83a2edf5b6 100644
--- a/app/assets/stylesheets/profile.scss
+++ b/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;
- border-left: 1px solid #dddddd;
+ margin-bottom: 15px;
+ 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-right: 10px;
+ margin-top: 15px;
}
#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{
diff --git a/app/assets/stylesheets/stream.scss b/app/assets/stylesheets/stream.scss
index 69a5b900bc42fe2164e39166203f9daec3906aa4..a1f98a13707e94f29e16bad84000a1b37dc84e0d 100644
--- a/app/assets/stylesheets/stream.scss
+++ b/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;
}
diff --git a/app/assets/stylesheets/stream_element.scss b/app/assets/stylesheets/stream_element.scss
index 9b2861c5af688ffee1889a9a9b27e6bf29039803..df46a590480f9e66762ae4f4736f9dc96c12f2f5 100644
--- a/app/assets/stylesheets/stream_element.scss
+++ b/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;
- text-align: center;
- line-height: 200px;
- border: 1px solid $border-grey;
- background: #fefefe;
- box-shadow: 3px 3px 2px #eee;
- img {
- &.big_photo { max-height: 200px; }
- }
+ margin: 0 0 15px;
+ background: $white;
+ border-radius: 0;
+ box-shadow: $card-shadow;
+ 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; }
diff --git a/app/assets/stylesheets/tag.scss b/app/assets/stylesheets/tag.scss
index 72f9d757fea61cbfb346b3539683e048ca097023..a70a705928b375a3d0410a75a354cf8c34f1d68d 100644
--- a/app/assets/stylesheets/tag.scss
+++ b/app/assets/stylesheets/tag.scss
@@ -22,26 +22,29 @@ h1.tag {
&:hover { border-bottom: 1px solid $border-dark-grey; }
}
}
-
-#tags_show {
- .col-md-3 {
- h4 { margin: 25px 0 15px; }
- .side_stream #people_stream {
- .name { display: block; }
- .name, .diaspora_handle {
- overflow: hidden;
- text-overflow: ellipsis;
- white-space: nowrap;
+.page-tags {
+ background-color: $sidebars-background;
+ #tags_show {
+ #left-navbar-fixed-background { border-right: none; }
+ .col-md-3 {
+ h4 { margin: 25px 0 15px; }
+ .side_stream #people_stream {
+ .name { display: block; }
+ .name, .diaspora_handle {
+ overflow: hidden;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+ }
}
}
- }
- .col-md-7 {
- .tag-following-action {
- max-width: 100%;
- input[type="submit"] {
- overflow: hidden;
- text-overflow: ellipsis;
+ .col-md-7 {
+ .tag-following-action {
max-width: 100%;
+ input[type="submit"] {
+ overflow: hidden;
+ text-overflow: ellipsis;
+ max-width: 100%;
+ }
}
}
}
diff --git a/app/assets/templates/photo_tpl.jst.hbs b/app/assets/templates/photo_tpl.jst.hbs
index fc83528dc8d4b747eb852c95d0b8b62860cd82e8..a36e05879f0a5fba7d27090be963807e5e153d1b 100644
--- a/app/assets/templates/photo_tpl.jst.hbs
+++ b/app/assets/templates/photo_tpl.jst.hbs
@@ -25,5 +25,5 @@
<img src="{{sizes.large}}" class="photo big_photo">
</a>
</div>
-
+ </div>
</div>
diff --git a/app/assets/templates/profile_header_tpl.jst.hbs b/app/assets/templates/profile_header_tpl.jst.hbs
index 197fb590c4fac976ffb079be60582a5c68902d9d..41d2c34343e8a3a2a77372b9ae8559df1e622987 100644
--- a/app/assets/templates/profile_header_tpl.jst.hbs
+++ b/app/assets/templates/profile_header_tpl.jst.hbs
@@ -1,43 +1,46 @@
-{{#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}}
-
-<div id="author_info">
- <h2>
- <span id="name">{{name}}</span>
- <span id="diaspora_handle">{{diaspora_id}}</span>
- {{#if show_profile_btns}}
- {{{sharingMessage this}}}
- {{/if}}
- </h2>
+<div id="author_info" class="row">
+ <div class="col-sm-10">
+ <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}}
+ {{#if has_tags}}
<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>
+ <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>
+ <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}}
diff --git a/app/views/tags/show.haml b/app/views/tags/show.haml
index 56dd1d43edd3b601d8c2dd1e12929ca823059870..8a29d2ca199f66fe31515fbdb838486f0d30781f 100644
--- a/app/views/tags/show.haml
+++ b/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:"#"}
⇧
diff --git a/features/desktop/contacts.feature b/features/desktop/contacts.feature
index 97bc87a1bd96b8bdacd595438169d62a750426ea..5af487d2dc158b2108385700e9c6734fbeb2932e 100644
--- a/features/desktop/contacts.feature
+++ b/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"
diff --git a/features/desktop/profile_photos.feature b/features/desktop/profile_photos.feature
index 7af405fb2ccbe7787c90bbb35897e5a09621ab75..eed062c08508ad02b062b4d3cc40185e8d5fd08f 100644
--- a/features/desktop/profile_photos.feature
+++ b/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"