Minor UI fixes for 4.0 (#6899)

* PLT-7056 - Fixing profile popover position

* PLT-7082 - Removing extra space below header

* PLT-7074 - Channel header fix

* PLT-7054 - Fixing scroll inside members popover

* Updating mention highlight color for default theme
This commit is contained in:
Asaad Mahmood
2017-07-10 23:48:45 +05:00
committed by Saturnino Abril
parent 45e7ad0c34
commit 87e62e8823
6 changed files with 23 additions and 22 deletions

View File

@@ -56,10 +56,6 @@ export default class UserProfile extends React.Component {
render() {
let name = '...';
let profileImg = '';
let popoverPosition = 'right';
if (Utils.isMobile()) {
popoverPosition = 'bottom';
}
if (this.props.user) {
name = Utils.displayUsername(this.props.user.id);
@@ -78,7 +74,7 @@ export default class UserProfile extends React.Component {
<OverlayTrigger
ref='overlay'
trigger='click'
placement={popoverPosition}
placement='right'
rootClose={true}
overlay={
<ProfilePopover

View File

@@ -242,6 +242,7 @@
border-top: 1px solid;
cursor: pointer;
height: 45px;
overflow: hidden;
padding: 5px 19px 5px 17px;
&:hover {

View File

@@ -197,13 +197,13 @@
display: inline-block;
height: 35px;
margin-top: -10px;
max-width: calc(100vw - 720px);
max-width: calc(100vw - 740px);
overflow: hidden;
padding: 3px 0 0;
position: relative;
text-overflow: ellipsis;
top: 10px;
white-space: nowrap;
white-space: pre;
word-break: break-word;
.markdown__heading {
@@ -212,7 +212,7 @@
}
.multi-teams & {
max-width: calc(100vw - 790px);
max-width: calc(100vw - 810px);
}
&.light {
@@ -226,10 +226,10 @@
}
.move--left & {
max-width: calc(100vw - 790px);
max-width: calc(100vw - 810px);
.multi-teams & {
max-width: calc(100vw - 840px);
max-width: calc(100vw - 860px);
}
}

View File

@@ -1043,8 +1043,8 @@
@include single-transition(transform, .35s, ease);
@include translate3d(290px, 0, 0);
border: none;
width: 290px;
visibility: hidden;
width: 290px;
&.visible {
display: block;
@@ -1287,10 +1287,10 @@
.app__content {
margin: 0;
padding-top: 56px;
padding-top: 50px;
.channel__wrap & {
padding-top: 56px;
padding-top: 50px;
}
#channel-header {
@@ -1575,6 +1575,10 @@
}
@media screen and (max-width: 480px) {
#user-profile-popover {
left: 50px !important;
}
.post {
.img-div {
max-width: 100%;

View File

@@ -5,20 +5,20 @@
&.move--left {
.channel-header {
.heading {
max-width: calc(100vw - 600px);
max-width: calc(100vw - 620px);
.multi-teams & {
max-width: calc(100vw - 650px);
max-width: calc(100vw - 670px);
}
}
}
.channel-header__info {
.channel-header__description {
max-width: calc(100vw - 600px);
max-width: calc(100vw - 620px);
.multi-teams & {
max-width: calc(100vw - 650px);
max-width: calc(100vw - 670px);
}
}
}
@@ -34,20 +34,20 @@
.channel-header__info {
.channel-header__description {
max-width: calc(100vw - 660px);
max-width: calc(100vw - 680px);
.multi-teams & {
max-width: calc(100vw - 710px);
max-width: calc(100vw - 730px);
}
}
}
.channel-header {
.heading {
max-width: calc(100vw - 700px);
max-width: calc(100vw - 720px);
.multi-teams & {
max-width: calc(100vw - 750px);
max-width: calc(100vw - 770px);
}
}
}

View File

@@ -493,7 +493,7 @@ export const Constants = {
buttonBg: '#166de0',
buttonColor: '#ffffff',
errorTextColor: '#fd5960',
mentionHighlightBg: '#fff2bb',
mentionHighlightBg: '#ffe577',
mentionHighlightLink: '#166de0',
codeTheme: 'github',
image: mattermostThemeImage