Merge pull request #6324 from AugierLe42e/styling-main-stream
Styling main stream
This commit is contained in:
Steffen van Bergerem
commit
5aeac0c2e3
13 changed files with 110 additions and 87 deletions
|
|
@ -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"
|
||||
|
|
|
|||
|
|
@ -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,
|
||||
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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{
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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; }
|
||||
|
|
|
|||
|
|
@ -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%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -25,5 +25,5 @@
|
|||
<img src="{{sizes.large}}" class="photo big_photo">
|
||||
</a>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -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" 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>
|
||||
|
||||
<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>
|
||||
|
||||
{{#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}}
|
||||
|
|
|
|||
|
|
@ -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:"#"}
|
||||
⇧
|
||||
|
|
|
|||
|
|
@ -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"
|
||||
|
|
|
|||
|
|
@ -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"
|
||||
|
|
|
|||
Loading…
Reference in a new issue