Refactor conversations css + fix inconsistent height of conversations list bug
This commit is contained in:
flaburgan
Steffen van Bergerem
parent
5c81da3147
commit
c24d5193e4
4 changed files with 176 additions and 224 deletions
|
|
@ -60,11 +60,6 @@ $(document).ready(function(){
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
resize();
|
|
||||||
$(window).resize(function(){
|
|
||||||
resize();
|
|
||||||
});
|
|
||||||
|
|
||||||
$('#conversation_inbox .stream').infinitescroll({
|
$('#conversation_inbox .stream').infinitescroll({
|
||||||
navSelector : ".pagination",
|
navSelector : ".pagination",
|
||||||
// selector for the paged navigation (it will be hidden)
|
// selector for the paged navigation (it will be hidden)
|
||||||
|
|
@ -134,11 +129,3 @@ $(document).ready(function(){
|
||||||
})
|
})
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|
||||||
var resize = function(){
|
|
||||||
var inboxSidebar = $('#conversation_inbox'),
|
|
||||||
inboxSidebarOffset = inboxSidebar.offset().top,
|
|
||||||
windowHeight = $(window).height();
|
|
||||||
|
|
||||||
inboxSidebar.css('height', windowHeight - inboxSidebarOffset);
|
|
||||||
};
|
|
||||||
|
|
|
||||||
|
|
@ -15,6 +15,7 @@
|
||||||
@import 'publisher'
|
@import 'publisher'
|
||||||
@import 'facebox'
|
@import 'facebox'
|
||||||
@import 'aspects'
|
@import 'aspects'
|
||||||
|
@import 'conversations'
|
||||||
|
|
||||||
/* ====== media ====== */
|
/* ====== media ====== */
|
||||||
.media
|
.media
|
||||||
|
|
@ -1086,210 +1087,8 @@ ul#press_logos
|
||||||
iframe, .thumb img
|
iframe, .thumb img
|
||||||
:width 100%
|
:width 100%
|
||||||
|
|
||||||
.conversation_participants
|
#contact_visibility_padlock:hover
|
||||||
:background
|
@include opacity(0.7)
|
||||||
:color $background-white
|
|
||||||
:margin
|
|
||||||
:bottom 10px
|
|
||||||
|
|
||||||
:-webkit-box-shadow 0 2px 3px -3px #666
|
|
||||||
:-moz-box-shadow 0 2px 3px -3px #666
|
|
||||||
:box-shadow 0 2px 3px -3px #666
|
|
||||||
|
|
||||||
a.close_conversation
|
|
||||||
:display block
|
|
||||||
:margin-top 20px
|
|
||||||
:float right
|
|
||||||
|
|
||||||
.icons-deletelabel
|
|
||||||
:height 14px
|
|
||||||
:width 14px
|
|
||||||
|
|
||||||
h3
|
|
||||||
:margin 0
|
|
||||||
:top 6px
|
|
||||||
:bottom 0px
|
|
||||||
:padding
|
|
||||||
:bottom 10px
|
|
||||||
|
|
||||||
.avatar
|
|
||||||
:height 30px
|
|
||||||
:width 30px
|
|
||||||
|
|
||||||
:line
|
|
||||||
:height 0
|
|
||||||
|
|
||||||
a img
|
|
||||||
:margin
|
|
||||||
:bottom 4px
|
|
||||||
|
|
||||||
.conversation_controls
|
|
||||||
a
|
|
||||||
:margin
|
|
||||||
:right 10px
|
|
||||||
|
|
||||||
:margin
|
|
||||||
:bottom 10px
|
|
||||||
|
|
||||||
:border
|
|
||||||
:bottom 1px solid $border-grey
|
|
||||||
:padding 10px
|
|
||||||
:top 101px
|
|
||||||
:bottom 10px
|
|
||||||
:width 560px
|
|
||||||
:margin
|
|
||||||
:top -100px
|
|
||||||
|
|
||||||
.avatars
|
|
||||||
:text
|
|
||||||
:align right
|
|
||||||
:margin
|
|
||||||
:top 9px
|
|
||||||
|
|
||||||
.conversation_participants
|
|
||||||
a:hover
|
|
||||||
:text-decoration none
|
|
||||||
|
|
||||||
|
|
||||||
.stream_element.conversation
|
|
||||||
:padding 8px
|
|
||||||
|
|
||||||
.message_count
|
|
||||||
@include border-radius(5px)
|
|
||||||
|
|
||||||
:float right
|
|
||||||
:right 0px
|
|
||||||
:padding 0 5px
|
|
||||||
:position relative
|
|
||||||
:background
|
|
||||||
:color #999
|
|
||||||
:color #eee
|
|
||||||
:font
|
|
||||||
:size 12px
|
|
||||||
:weight normal
|
|
||||||
|
|
||||||
.unread_message_count
|
|
||||||
@include border-radius(5px)
|
|
||||||
|
|
||||||
:float right
|
|
||||||
:right 5px
|
|
||||||
:padding 0 5px
|
|
||||||
:position relative
|
|
||||||
:background
|
|
||||||
:color #b11
|
|
||||||
:color #eee
|
|
||||||
:font
|
|
||||||
:size 12px
|
|
||||||
:weight normal
|
|
||||||
|
|
||||||
.participant_count
|
|
||||||
:font
|
|
||||||
:weight normal
|
|
||||||
|
|
||||||
.timestamp
|
|
||||||
:position relative
|
|
||||||
:float right
|
|
||||||
:font
|
|
||||||
:weight normal
|
|
||||||
:color $blue
|
|
||||||
|
|
||||||
.participants_link
|
|
||||||
:margin-top 5px
|
|
||||||
:clear right
|
|
||||||
:float right
|
|
||||||
:color #aaa
|
|
||||||
|
|
||||||
.icons-users
|
|
||||||
:display block
|
|
||||||
:width 25px
|
|
||||||
:height 16px
|
|
||||||
|
|
||||||
.conversation_participants_popover_content
|
|
||||||
:display none
|
|
||||||
|
|
||||||
.conversation_participants_popover
|
|
||||||
:margin 0 auto
|
|
||||||
:padding-left 12px
|
|
||||||
|
|
||||||
.avatar
|
|
||||||
:display inline
|
|
||||||
:width 35px
|
|
||||||
:height 35px
|
|
||||||
:margin
|
|
||||||
:right 10px
|
|
||||||
:bottom 10px
|
|
||||||
|
|
||||||
.participants_left
|
|
||||||
:display block
|
|
||||||
|
|
||||||
&:hover:not(.selected)
|
|
||||||
:background
|
|
||||||
:color $highlight-white
|
|
||||||
|
|
||||||
&.selected:hover
|
|
||||||
:background
|
|
||||||
:color lighten($blue,5%)
|
|
||||||
|
|
||||||
&:hover
|
|
||||||
:cursor pointer
|
|
||||||
|
|
||||||
.conversation.unread
|
|
||||||
:background
|
|
||||||
:color darken($background-white,5%)
|
|
||||||
|
|
||||||
.conversation.selected
|
|
||||||
:background
|
|
||||||
:color $blue
|
|
||||||
.subject
|
|
||||||
:color #fff
|
|
||||||
.last_author
|
|
||||||
:color #fff
|
|
||||||
.timestamp
|
|
||||||
:color #eee
|
|
||||||
:border
|
|
||||||
:bottom 1px solid darken($blue, 10%)
|
|
||||||
:top 1px solid darken($blue, 10%)
|
|
||||||
|
|
||||||
#conversation_inbox
|
|
||||||
:height 100%
|
|
||||||
:overflow-y auto
|
|
||||||
:overflow-x none
|
|
||||||
|
|
||||||
a:hover
|
|
||||||
:text
|
|
||||||
:decoration none
|
|
||||||
|
|
||||||
#left_pane
|
|
||||||
:position fixed
|
|
||||||
:width 337px
|
|
||||||
|
|
||||||
h3
|
|
||||||
:padding
|
|
||||||
:bottom 0
|
|
||||||
:margin
|
|
||||||
:bottom 15px
|
|
||||||
|
|
||||||
#left_pane_header
|
|
||||||
:padding 10px
|
|
||||||
:height 55px
|
|
||||||
:border
|
|
||||||
:bottom 1px solid $border-grey
|
|
||||||
|
|
||||||
#no_conversation_text
|
|
||||||
:font
|
|
||||||
:size 20px
|
|
||||||
:weight bold
|
|
||||||
:color #ccc
|
|
||||||
:text
|
|
||||||
:align center
|
|
||||||
:margin
|
|
||||||
:top 100px
|
|
||||||
|
|
||||||
#no_conversation_controls
|
|
||||||
:text
|
|
||||||
:align center
|
|
||||||
:font
|
|
||||||
:size 12px
|
|
||||||
|
|
||||||
.side_stream
|
.side_stream
|
||||||
.stream_element
|
.stream_element
|
||||||
|
|
|
||||||
171
app/assets/stylesheets/conversations.css.scss
Normal file
171
app/assets/stylesheets/conversations.css.scss
Normal file
|
|
@ -0,0 +1,171 @@
|
||||||
|
.conversation_participants {
|
||||||
|
box-shadow: 0 2px 3px -3px #666;
|
||||||
|
-webkit-box-shadow: 0 2px 3px -3px #666;
|
||||||
|
-moz-box-shadow: 0 2px 3px -3px #666;
|
||||||
|
|
||||||
|
background-color: $background-white;
|
||||||
|
margin-bottom: 10px;
|
||||||
|
border-bottom: 1px solid $border-grey;
|
||||||
|
padding: 10px;
|
||||||
|
padding-top: 0px;
|
||||||
|
width: 560px;
|
||||||
|
line-height: 0px;
|
||||||
|
|
||||||
|
a.close_conversation {
|
||||||
|
display: block;
|
||||||
|
margin-top: 5px;
|
||||||
|
float: right;
|
||||||
|
|
||||||
|
.icons-deletelabel {
|
||||||
|
height: 14px;
|
||||||
|
width: 14px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
h3 {
|
||||||
|
margin: 0px;
|
||||||
|
margin-top: 6px;
|
||||||
|
padding-bottom: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.avatar {
|
||||||
|
height: 30px;
|
||||||
|
width: 30px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.avatars {
|
||||||
|
text-align: right;
|
||||||
|
margin-top: 9px;
|
||||||
|
}
|
||||||
|
|
||||||
|
a img { margin-bottom: 4px; }
|
||||||
|
|
||||||
|
.conversation_controls {
|
||||||
|
margin-bottom: 10px;
|
||||||
|
|
||||||
|
a { margin-right: 10px; }
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.conversation_participants a:hover { text-decoration: none; }
|
||||||
|
|
||||||
|
.stream_element.conversation {
|
||||||
|
padding: 8px;
|
||||||
|
|
||||||
|
.message_count, .unread_message_count {
|
||||||
|
@include border-radius(5px);
|
||||||
|
float: right;
|
||||||
|
right: 5px;
|
||||||
|
padding: 0px 5px;
|
||||||
|
position: relative;
|
||||||
|
color: $background-grey;
|
||||||
|
font-size: 12px;
|
||||||
|
font-weight: normal;
|
||||||
|
}
|
||||||
|
|
||||||
|
.message_count { background-color: #999; }
|
||||||
|
.unread_message_count { background-color: #b11; }
|
||||||
|
.participant_count { font-weight: normal; }
|
||||||
|
|
||||||
|
.timestamp {
|
||||||
|
position: relative;
|
||||||
|
float: right;
|
||||||
|
font-weight: normal;
|
||||||
|
color: $blue;
|
||||||
|
}
|
||||||
|
|
||||||
|
.participants_link {
|
||||||
|
margin-top: 5px;
|
||||||
|
clear: right;
|
||||||
|
float: right;
|
||||||
|
color: #aaa;
|
||||||
|
}
|
||||||
|
|
||||||
|
.icons-users {
|
||||||
|
display: block;
|
||||||
|
width: 25px;
|
||||||
|
height: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.conversation_participants_popover_content {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.conversation_participants_popover {
|
||||||
|
margin: 0px auto;
|
||||||
|
padding-left: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.avatar {
|
||||||
|
display: inline;
|
||||||
|
width: 35px;
|
||||||
|
height: 35px;
|
||||||
|
margin-right: 10px;
|
||||||
|
margin-bottom: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.participants_left { display: block; }
|
||||||
|
&:hover:not(.selected) { background-color: $highlight-white; }
|
||||||
|
&.selected:hover { background-color: lighten($blue,5%); }
|
||||||
|
&:hover { cursor: pointer; }
|
||||||
|
}
|
||||||
|
|
||||||
|
.conversation.unread {
|
||||||
|
background-color: darken($background-white, 5%);
|
||||||
|
}
|
||||||
|
|
||||||
|
.conversation.selected {
|
||||||
|
background-color: $blue;
|
||||||
|
|
||||||
|
.subject,
|
||||||
|
.last_author {
|
||||||
|
color: $white;
|
||||||
|
}
|
||||||
|
.timestamp { color: $background-grey; }
|
||||||
|
}
|
||||||
|
|
||||||
|
#left_pane {
|
||||||
|
h3 {
|
||||||
|
padding-bottom: 0;
|
||||||
|
margin-bottom: 15px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#left_pane_header {
|
||||||
|
position: fixed;
|
||||||
|
top: 50px;
|
||||||
|
width: 320px;
|
||||||
|
height: 40px;
|
||||||
|
padding: 10px;
|
||||||
|
border-bottom: 1px solid $border-grey;
|
||||||
|
}
|
||||||
|
|
||||||
|
#conversation_inbox {
|
||||||
|
position: fixed;
|
||||||
|
bottom: 0px;
|
||||||
|
top: 125px;
|
||||||
|
width: 350px;
|
||||||
|
overflow-y: auto;
|
||||||
|
overflow-x: none;
|
||||||
|
|
||||||
|
a:hover {
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
#no_conversations,
|
||||||
|
#no_conversation_text {
|
||||||
|
font-weight: bold;
|
||||||
|
color: #ccc;
|
||||||
|
text-align: center;
|
||||||
|
margin-top: 100px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#no_conversation_text {
|
||||||
|
font-size: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#no_conversation_controls {
|
||||||
|
text-align: center;
|
||||||
|
font-size: 12px;
|
||||||
|
}
|
||||||
|
|
@ -24,13 +24,8 @@
|
||||||
- if @conversations.count > 0
|
- if @conversations.count > 0
|
||||||
= render :partial => 'conversations/conversation', :collection => @conversations, :locals => {:authors => @authors, :unread_counts => @unread_counts}
|
= render :partial => 'conversations/conversation', :collection => @conversations, :locals => {:authors => @authors, :unread_counts => @unread_counts}
|
||||||
- else
|
- else
|
||||||
%br
|
#no_conversations
|
||||||
%br
|
= t('.no_messages')
|
||||||
%br
|
|
||||||
%br
|
|
||||||
%div{:style => 'text-align:center;'}
|
|
||||||
%i
|
|
||||||
= t('.no_messages')
|
|
||||||
= will_paginate @conversations
|
= will_paginate @conversations
|
||||||
|
|
||||||
|
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue