mirror of
https://framagit.org/tykayn/mastodon.git
synced 2023-08-25 08:33:12 +02:00
better placement for popups
This commit is contained in:
parent
519c9f417e
commit
871aceb89a
@ -808,4 +808,4 @@ RUBY VERSION
|
||||
ruby 2.6.5p114
|
||||
|
||||
BUNDLED WITH
|
||||
1.17.3
|
||||
2.1.4
|
||||
|
||||
@ -51,9 +51,10 @@ export default class ConversationItem extends React.PureComponent {
|
||||
render() {
|
||||
const hasNewClass = this.state.newMessages ? 'has-new-message' : 'nothing-new';
|
||||
const isVisible = this.state.displayed ? 'displayed' : 'hidden';
|
||||
const isReduced = this.state.displayed ? 'full' : 'reduced';
|
||||
const isFocused = this.state.isFocused ? 'isFocused' : 'not-focused';
|
||||
const list = (
|
||||
<li className={'conversation-item ' + hasNewClass + ' ' + isVisible + ' ' + isFocused}>
|
||||
<li className={`conversation-item ${hasNewClass} ${isReduced} ${isFocused}`}>
|
||||
<div className='top-title'>
|
||||
<i
|
||||
role='img'
|
||||
@ -78,31 +79,35 @@ export default class ConversationItem extends React.PureComponent {
|
||||
/>
|
||||
</button >
|
||||
</div >
|
||||
<ConversationStream messages={this.props.messages} />
|
||||
<div className='conversation_input'>
|
||||
<form
|
||||
action='#'
|
||||
onSubmit={this.submitCompose}
|
||||
>
|
||||
<textarea
|
||||
name='messager'
|
||||
id=''
|
||||
cols='15'
|
||||
rows='3'
|
||||
className='messager-textarea'
|
||||
placeholder='allez dis nous tout'
|
||||
onFocusCapture={this.toggleFocused}
|
||||
onBlurCapture={this.toggleFocused}
|
||||
onChange={this.handleChange}
|
||||
<div className={`body ${isVisible} `} >
|
||||
|
||||
/>
|
||||
<input
|
||||
type='submit'
|
||||
name='submit'
|
||||
value='Send'
|
||||
/>
|
||||
</form >
|
||||
</div >
|
||||
<ConversationStream messages={this.props.messages} />
|
||||
<div className='conversation_input'>
|
||||
<form
|
||||
action='#'
|
||||
onSubmit={this.submitCompose}
|
||||
>
|
||||
<textarea
|
||||
name='messager'
|
||||
id=''
|
||||
cols='15'
|
||||
rows='3'
|
||||
className='messager-textarea'
|
||||
placeholder='allez dis nous tout'
|
||||
onFocusCapture={this.toggleFocused}
|
||||
onBlurCapture={this.toggleFocused}
|
||||
onChange={this.handleChange}
|
||||
|
||||
/>
|
||||
<input
|
||||
className='messager-send'
|
||||
type='submit'
|
||||
name='submit'
|
||||
value='>'
|
||||
/>
|
||||
</form >
|
||||
</div >
|
||||
</div>
|
||||
</li >
|
||||
);
|
||||
return (
|
||||
|
||||
@ -33,6 +33,7 @@ export default class ConversationStream extends React.PureComponent {
|
||||
<div className='conversation-stream'>
|
||||
<div className='messages'>
|
||||
{messagesLists}
|
||||
<hr className='marker'/>
|
||||
</div >
|
||||
</div >
|
||||
);
|
||||
|
||||
@ -31,3 +31,4 @@
|
||||
@import 'bliss/dashboard';
|
||||
@import 'bliss/rtl';
|
||||
@import 'bliss/accessibility';
|
||||
@import 'bliss/responsive';
|
||||
|
||||
7
app/javascript/styles/bliss/responsive.scss
Normal file
7
app/javascript/styles/bliss/responsive.scss
Normal file
@ -0,0 +1,7 @@
|
||||
|
||||
@media screen and (min-width: 740px) {
|
||||
.sidebar__toggle{
|
||||
display: none;
|
||||
}
|
||||
|
||||
}
|
||||
@ -878,3 +878,12 @@ a.name-tag,
|
||||
color: $primary-text-color;
|
||||
}
|
||||
}
|
||||
// control panel
|
||||
|
||||
.simple_form .edit_user{
|
||||
button[type=submit]{
|
||||
position: fixed;
|
||||
bottom: 3px;
|
||||
right: 3px;
|
||||
}
|
||||
}
|
||||
|
||||
@ -12,5 +12,9 @@
|
||||
|
||||
.contact {
|
||||
margin-bottom: 0.5rem;
|
||||
img{
|
||||
max-width: 3em;
|
||||
max-height: 3em;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,8 +1,10 @@
|
||||
$textareaHeight : 60px;
|
||||
$conversationMargin: 1em;
|
||||
$conversationWidth: 20em;
|
||||
|
||||
.main-instant-messaging {
|
||||
|
||||
.conversation {
|
||||
|
||||
|
||||
.conversation__content {
|
||||
padding-right: 0;
|
||||
}
|
||||
@ -30,22 +32,26 @@
|
||||
@extend .fixed-box;
|
||||
right: $messagingBoxWidth + 2em;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
width: 50%;
|
||||
padding: 0.5em;
|
||||
overflow-x: auto;
|
||||
border: 0;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
/**
|
||||
block containing one stream, in line at the bottom of the screen
|
||||
*/
|
||||
.conversation-item {
|
||||
float: right;
|
||||
width: 20em;
|
||||
margin-left: 2em;
|
||||
padding: 1em;
|
||||
width: $conversationWidth;
|
||||
margin-left: $conversationMargin;
|
||||
|
||||
border-radius: 15px;
|
||||
border: 3px solid $classic-primary-color;
|
||||
-moz-border-radius-bottomleft: 0;
|
||||
-moz-border-radius-bottomright: 0;
|
||||
background: $classic-base-color;
|
||||
border: 3px solid white;
|
||||
border-bottom-left-radius: 0;
|
||||
border-bottom-right-radius: 0;
|
||||
background: $classic-primary-color;
|
||||
|
||||
|
||||
&.has-new-message {
|
||||
@ -56,11 +62,35 @@
|
||||
&.is-focused {
|
||||
border-color: $ui-base-color;
|
||||
}
|
||||
&.reduced{
|
||||
|
||||
}
|
||||
|
||||
.top-title {
|
||||
padding: 1em;
|
||||
background: $classic-base-color;
|
||||
border-top-left-radius: 1em;
|
||||
border-top-right-radius: 1em;
|
||||
|
||||
button, .btn{
|
||||
background: transparent;
|
||||
color: white;
|
||||
float:right;
|
||||
border: 0;
|
||||
}
|
||||
}
|
||||
.body{
|
||||
height: 17.7em;
|
||||
&.reduced{
|
||||
display:none;
|
||||
}
|
||||
}
|
||||
.username {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.conversation-stream{
|
||||
width: $conversationWidth - 2em;
|
||||
}
|
||||
.conversation-stream,
|
||||
.conversation_input {
|
||||
height: 100%;
|
||||
@ -73,14 +103,38 @@
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.btn {
|
||||
background: $classic-base-color;
|
||||
color: $ui-base-color;
|
||||
.messager-send {
|
||||
background: #282c37;
|
||||
color: white;
|
||||
float: right;
|
||||
padding: 0 1em;
|
||||
margin-left: 1em;
|
||||
border: 0;
|
||||
margin-top: -$textareaHeight;
|
||||
height:$textareaHeight;
|
||||
width: 3em;
|
||||
}
|
||||
|
||||
.messager-textarea{
|
||||
box-sizing: border-box;
|
||||
padding: 1rem;
|
||||
padding-right: 4em;
|
||||
background: $ui-base-color;
|
||||
color: white;
|
||||
border: 0;
|
||||
width: 100%;
|
||||
display: block;
|
||||
height: $textareaHeight;
|
||||
overflow: auto;
|
||||
}
|
||||
button[type=submit]{
|
||||
background: $classic-base-color;
|
||||
color: white;
|
||||
padding: 0.5rem;
|
||||
-webkit-border-radius: 3px;
|
||||
-moz-border-radius: 3px;
|
||||
border-radius: 3px;
|
||||
border: 0;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -1,13 +1,40 @@
|
||||
|
||||
.conversation-stream {
|
||||
display: block;
|
||||
padding-top: 1em;
|
||||
height: 5em;
|
||||
padding-left: 1em;
|
||||
padding-right: 1em;
|
||||
height: 10em;
|
||||
overflow: auto;
|
||||
width: 100%;
|
||||
width: $messagingBoxWidth;
|
||||
padding-bottom: 4em;
|
||||
|
||||
|
||||
.message {
|
||||
background: #6b7f9b;
|
||||
clear: both;
|
||||
margin-bottom: 2rem;
|
||||
&.ours {
|
||||
text-align: right;
|
||||
background: #6b7f9b;
|
||||
float: right;
|
||||
|
||||
.arrow-down {
|
||||
border-top-color: #6b7f9b;
|
||||
left: 75%;
|
||||
}
|
||||
}
|
||||
|
||||
&.theirs {
|
||||
text-align: left;
|
||||
background: $ui-highlight-color;
|
||||
float: left;
|
||||
|
||||
.arrow-down {
|
||||
border-top-color: $ui-highlight-color;
|
||||
right: 1em;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.messages >
|
||||
@ -16,38 +43,19 @@
|
||||
-moz-border-radius: 0.5rem;
|
||||
border-radius: 0.5rem;
|
||||
margin-bottom: 0.5em;
|
||||
margin-right: 0.5em;
|
||||
padding: 0.5em 1em;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.ours {
|
||||
text-align: right;
|
||||
background: $light-text-color;
|
||||
float: right;
|
||||
|
||||
.arrow-down {
|
||||
border-top-color: $light-text-color;
|
||||
left: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.theirs {
|
||||
text-align: left;
|
||||
background: $ui-highlight-color;
|
||||
float: left;
|
||||
|
||||
.arrow-down {
|
||||
border-top-color: $ui-highlight-color;
|
||||
right: 1em;
|
||||
}
|
||||
}
|
||||
|
||||
.arrow-down {
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-left: 10px solid transparent;
|
||||
border-right: 20px solid transparent;
|
||||
border-top: 20px solid $classic-primary-color;
|
||||
border-top: 20px solid $ui-highlight-color;
|
||||
position: relative;
|
||||
bottom: -1em;
|
||||
|
||||
|
||||
@ -1,19 +1,10 @@
|
||||
|
||||
.status-direct,
|
||||
.item-list .conversation {
|
||||
@extend .airmail-border;
|
||||
}
|
||||
|
||||
.main-instant-messaging {
|
||||
|
||||
.column-header__icon {
|
||||
color: white;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
conteneur de contacts latéral
|
||||
*/
|
||||
.messaging-box {
|
||||
@extend .fixed-box;
|
||||
|
||||
box-sizing: border-box;
|
||||
right: 1em;
|
||||
width: $messagingBoxWidth;
|
||||
background: $ui-base-color;
|
||||
@ -33,6 +24,16 @@
|
||||
color: white;
|
||||
}
|
||||
|
||||
.account__display-name{
|
||||
float: left;
|
||||
margin-right: 1em;
|
||||
}
|
||||
|
||||
.card-title{
|
||||
height: 2rem;
|
||||
padding-left: 0;
|
||||
font-size: 1.3rem;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -52,3 +53,15 @@
|
||||
.conversation_created-at {
|
||||
margin-right: 1em;
|
||||
}
|
||||
|
||||
.status-direct,
|
||||
.item-list .conversation {
|
||||
@extend .airmail-border;
|
||||
}
|
||||
|
||||
.main-instant-messaging {
|
||||
|
||||
.column-header__icon {
|
||||
color: white;
|
||||
}
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user