From f00f3965ffefc52be32266f1079a6990a9485a4c Mon Sep 17 00:00:00 2001 From: augier Date: Sun, 16 Aug 2015 14:40:30 +0200 Subject: [PATCH] Styling main stream --- .../javascripts/app/views/photo_view.js | 2 +- .../javascripts/app/views/photos_view.js | 2 +- app/assets/stylesheets/colors.scss | 2 + app/assets/stylesheets/people.scss | 2 +- app/assets/stylesheets/profile.scss | 31 +++++--- app/assets/stylesheets/stream.scss | 8 +-- app/assets/stylesheets/stream_element.scss | 22 +++--- app/assets/stylesheets/tag.scss | 37 +++++----- app/assets/templates/photo_tpl.jst.hbs | 2 +- .../templates/profile_header_tpl.jst.hbs | 71 ++++++++++--------- app/views/tags/show.haml | 10 +-- features/desktop/contacts.feature | 4 +- features/desktop/profile_photos.feature | 4 +- 13 files changed, 110 insertions(+), 87 deletions(-) diff --git a/app/assets/javascripts/app/views/photo_view.js b/app/assets/javascripts/app/views/photo_view.js index c4602a40f..ecf30fe1c 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 e1053e663..8a31fc815 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 a106062e4..0496b0aa2 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 62a1debd5..213598372 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 99e792eb4..590a979bd 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 69a5b900b..a1f98a137 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 9b2861c5a..df46a5904 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 72f9d757f..a70a70592 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 fc83528dc..a36e05879 100644 --- a/app/assets/templates/photo_tpl.jst.hbs +++ b/app/assets/templates/photo_tpl.jst.hbs @@ -25,5 +25,5 @@ - + diff --git a/app/assets/templates/profile_header_tpl.jst.hbs b/app/assets/templates/profile_header_tpl.jst.hbs index 197fb590c..41d2c3434 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}} -
- {{#if is_own_profile}} - {{!-- can't block myself, so don't check it here --}} - {{t 'people.edit_my_profile'}} - {{else}} {{#if is_blocked}} - {{t 'people.stop_ignoring'}} - {{else}} -
- {{/if}}{{/if}} -
-{{/if}} +
+
+

+ {{name}} + {{diaspora_id}} + {{#if show_profile_btns}} + {{{sharingMessage this}}} + {{/if}} +

-
-

- {{name}} - {{diaspora_id}} - {{#if show_profile_btns}} - {{{sharingMessage this}}} - {{/if}} -

- - {{#if has_tags}} -
- - {{fmtTags profile.tags}} -
- {{else}} - {{#if is_own_profile}} + {{#if has_tags}}
- {{t 'profile.you_have_no_tags'}} - - {{t 'profile.add_some'}} - + + {{fmtTags profile.tags}} +
+ {{else}} + {{#if is_own_profile}} +
+ {{t 'profile.you_have_no_tags'}} + + {{t 'profile.add_some'}} + +
+ {{/if}} + {{/if}} +
+
+ {{#if loggedIn}} +
+ {{#if is_own_profile}} + {{!-- can't block myself, so don't check it here --}} + {{t 'people.edit_my_profile'}} + {{else}} {{#if is_blocked}} + {{t 'people.stop_ignoring'}} + {{else}} +
+ {{/if}}{{/if}}
{{/if}} - {{/if}} +
-
+
{{#if show_profile_btns}}
{{#if is_receiving}} diff --git a/app/views/tags/show.haml b/app/views/tags/show.haml index 56dd1d43e..8a29d2ca1 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 97bc87a1b..5af487d2d 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 7af405fb2..eed062c08 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"