Merge pull request #2086 from asaadmahmoodspin/ui-improvements
Multiple UI improvements
Этот коммит содержится в:
Joram Wilander
@@ -75,10 +75,12 @@ export default class Analytics extends React.Component {
|
|||||||
}
|
}
|
||||||
|
|
||||||
let loading = (
|
let loading = (
|
||||||
<FormattedMessage
|
<h5>
|
||||||
id='admin.analytics.loading'
|
<FormattedMessage
|
||||||
defaultMessage='Loading...'
|
id='admin.analytics.loading'
|
||||||
/>
|
defaultMessage='Loading...'
|
||||||
|
/>
|
||||||
|
</h5>
|
||||||
);
|
);
|
||||||
|
|
||||||
let firstRow;
|
let firstRow;
|
||||||
|
|||||||
@@ -419,7 +419,7 @@ export default class ChannelHeader extends React.Component {
|
|||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
<OverlayTrigger
|
<OverlayTrigger
|
||||||
trigger={['hover', 'focus']}
|
trigger={'click'}
|
||||||
placement='bottom'
|
placement='bottom'
|
||||||
overlay={popoverContent}
|
overlay={popoverContent}
|
||||||
ref='headerOverlay'
|
ref='headerOverlay'
|
||||||
|
|||||||
@@ -1,28 +1,28 @@
|
|||||||
@charset "UTF-8";
|
@charset "UTF-8";
|
||||||
|
|
||||||
html, body {
|
html, body {
|
||||||
height: 100%;
|
height: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
body {
|
body {
|
||||||
font-family: 'Open Sans', sans-serif;
|
font-family: 'Open Sans', sans-serif;
|
||||||
-webkit-font-smoothing: antialiased;
|
-webkit-font-smoothing: antialiased;
|
||||||
background: $body-bg;
|
background: $body-bg;
|
||||||
position: relative;
|
position: relative;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
&.white {
|
&.white {
|
||||||
background: #fff;
|
background: #fff;
|
||||||
> .container-fluid {
|
> .container-fluid {
|
||||||
overflow: auto;
|
overflow: auto;
|
||||||
}
|
}
|
||||||
.inner__wrap {
|
.inner__wrap {
|
||||||
> .row.content {
|
> .row.content {
|
||||||
min-height: 100%;
|
min-height: 100%;
|
||||||
margin-bottom: -89px;
|
margin-bottom: -89px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.inner__wrap {
|
.inner__wrap {
|
||||||
@@ -46,175 +46,177 @@ body {
|
|||||||
}
|
}
|
||||||
|
|
||||||
img {
|
img {
|
||||||
max-width: 100%;
|
max-width: 100%;
|
||||||
height: auto;
|
height: auto;
|
||||||
&.rounded {
|
&.rounded {
|
||||||
@include border-radius(100%);
|
@include border-radius(100%);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.popover {
|
.popover {
|
||||||
@include border-radius(3px);
|
@include border-radius(3px);
|
||||||
color: #333;
|
color: #333;
|
||||||
&.bottom, &.right, &.top, &.left {
|
&.bottom, &.right, &.top, &.left {
|
||||||
>.arrow:after {
|
>.arrow:after {
|
||||||
border-color: transparent;
|
border-color: transparent;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.popover-title {
|
||||||
|
background: rgba(black, 0.05);
|
||||||
|
}
|
||||||
|
.popover-content {
|
||||||
|
p:last-child {
|
||||||
|
margin-bottom: 5px;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
|
||||||
.popover-title {
|
|
||||||
background: rgba(black, 0.05);
|
|
||||||
}
|
|
||||||
.popover-content {
|
|
||||||
white-space: pre-wrap;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.dropdown-menu {
|
.dropdown-menu {
|
||||||
.divider {
|
.divider {
|
||||||
@include opacity(0.15);
|
@include opacity(0.15);
|
||||||
}
|
}
|
||||||
> li > a {
|
> li > a {
|
||||||
color: inherit;
|
color: inherit;
|
||||||
&:focus, &:hover {
|
&:focus, &:hover {
|
||||||
color: inherit;
|
color: inherit;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.word-break--all {
|
.word-break--all {
|
||||||
word-break: break-all;
|
word-break: break-all;
|
||||||
}
|
}
|
||||||
|
|
||||||
a {
|
a {
|
||||||
word-break: break-word;
|
word-break: break-word;
|
||||||
color: $primary-color;
|
color: $primary-color;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
|
|
||||||
a:focus, a:hover {
|
a:focus, a:hover {
|
||||||
color: $primary-color;
|
color: $primary-color;
|
||||||
}
|
}
|
||||||
|
|
||||||
.tooltip {
|
.tooltip {
|
||||||
.tooltip-inner {
|
.tooltip-inner {
|
||||||
word-break: break-word;
|
word-break: break-word;
|
||||||
font-size: 13px;
|
font-size: 13px;
|
||||||
padding: 3px 10px 4px;
|
padding: 3px 10px 4px;
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.nopadding {
|
.nopadding {
|
||||||
padding: 0;
|
padding: 0;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.text-danger, a.text-danger {
|
.text-danger, a.text-danger {
|
||||||
color: #E05F5D;
|
|
||||||
&:hover, &:focus {
|
|
||||||
color: #E05F5D;
|
color: #E05F5D;
|
||||||
}
|
&:hover, &:focus {
|
||||||
|
color: #E05F5D;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.btn {
|
.btn {
|
||||||
&.btn-danger {
|
&.btn-danger {
|
||||||
color: #fff;
|
color: #fff;
|
||||||
&:hover, &:active, &:focus {
|
&:hover, &:active, &:focus {
|
||||||
color: #fff;
|
color: #fff;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.form-control {
|
.form-control {
|
||||||
@include border-radius(2px);
|
@include border-radius(2px);
|
||||||
&:focus {
|
&:focus {
|
||||||
@include box-shadow(none);
|
@include box-shadow(none);
|
||||||
}
|
}
|
||||||
&.no-padding {
|
&.no-padding {
|
||||||
line-height: 32px;
|
line-height: 32px;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
}
|
}
|
||||||
&.no-resize {
|
&.no-resize {
|
||||||
resize: none;
|
resize: none;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.form-control[disabled], .form-control[readonly], fieldset[disabled] .form-control {
|
.form-control[disabled], .form-control[readonly], fieldset[disabled] .form-control {
|
||||||
cursor: auto;
|
cursor: auto;
|
||||||
background: rgba(#fff, 0.1);
|
background: rgba(#fff, 0.1);
|
||||||
color: inherit;
|
color: inherit;
|
||||||
}
|
}
|
||||||
|
|
||||||
.form-group {
|
.form-group {
|
||||||
&.form-group--small {
|
&.form-group--small {
|
||||||
margin-bottom: 10px;
|
margin-bottom: 10px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.error-panel {
|
.error-panel {
|
||||||
max-width: 275px;
|
max-width: 275px;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
right: 10px;
|
right: 10px;
|
||||||
top: 40px;
|
top: 40px;
|
||||||
z-index: 100;
|
z-index: 100;
|
||||||
}
|
}
|
||||||
|
|
||||||
.nav>li>a:focus, .nav>li>a:hover {
|
.nav>li>a:focus, .nav>li>a:hover {
|
||||||
background: transparent;
|
background: transparent;
|
||||||
}
|
}
|
||||||
|
|
||||||
.btn {
|
.btn {
|
||||||
@include single-transition(all, 0.25s, ease-in);
|
@include single-transition(all, 0.25s, ease-in);
|
||||||
@include border-radius(1px);
|
@include border-radius(1px);
|
||||||
&.btn-primary {
|
&.btn-primary {
|
||||||
border-color: transparent;
|
border-color: transparent;
|
||||||
background: $primary-color;
|
background: $primary-color;
|
||||||
&:hover, &:focus, &:active {
|
&:hover, &:focus, &:active {
|
||||||
background: $primary-color--hover;
|
background: $primary-color--hover;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&.btn-inactive {
|
||||||
|
border-color: transparent;
|
||||||
|
background: #707070;
|
||||||
|
color: #fff;
|
||||||
}
|
}
|
||||||
}
|
|
||||||
&.btn-inactive {
|
|
||||||
border-color: transparent;
|
|
||||||
background: #707070;
|
|
||||||
color: #fff;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.relative-div {
|
.relative-div {
|
||||||
position:relative;
|
position:relative;
|
||||||
}
|
}
|
||||||
|
|
||||||
@-webkit-keyframes spin2 {
|
@-webkit-keyframes spin2 {
|
||||||
from { -webkit-transform: rotate(0deg);}
|
from { -webkit-transform: rotate(0deg);}
|
||||||
to { -webkit-transform: rotate(360deg);}
|
to { -webkit-transform: rotate(360deg);}
|
||||||
}
|
}
|
||||||
|
|
||||||
@keyframes spin {
|
@keyframes spin {
|
||||||
from { transform: scale(1) rotate(0deg);}
|
from { transform: scale(1) rotate(0deg);}
|
||||||
to { transform: scale(1) rotate(360deg);}
|
to { transform: scale(1) rotate(360deg);}
|
||||||
}
|
}
|
||||||
|
|
||||||
.glyphicon-refresh-animate {
|
.glyphicon-refresh-animate {
|
||||||
@include animation(spin .7s infinite linear);
|
@include animation(spin .7s infinite linear);
|
||||||
}
|
}
|
||||||
|
|
||||||
.black-bg {
|
.black-bg {
|
||||||
background-color: black !important;
|
background-color: black !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.white-bg {
|
.white-bg {
|
||||||
background-color: white !important;
|
background-color: white !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.alert {
|
.alert {
|
||||||
padding: 8px 12px;
|
padding: 8px 12px;
|
||||||
@include border-radius(2px);
|
@include border-radius(2px);
|
||||||
}
|
}
|
||||||
|
|
||||||
.emoji {
|
.emoji {
|
||||||
width: 1.5em;
|
width: 1.5em;
|
||||||
height: 1.5em;
|
height: 1.5em;
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
margin-bottom: 0.25em;
|
margin-bottom: 0.25em;
|
||||||
background-size: contain;
|
background-size: contain;
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -298,8 +298,13 @@
|
|||||||
height: 30px;
|
height: 30px;
|
||||||
width: 24px;
|
width: 24px;
|
||||||
line-height: 26px;
|
line-height: 26px;
|
||||||
margin-right: 10px;
|
margin-right: 9px;
|
||||||
font-size: 22px;
|
font-size: 22px;
|
||||||
|
.channel__wrap.move--left & {
|
||||||
|
position: absolute;
|
||||||
|
right: -400px;
|
||||||
|
top: 14px;
|
||||||
|
}
|
||||||
> a {
|
> a {
|
||||||
color: inherit;
|
color: inherit;
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
|
|||||||
@@ -283,8 +283,8 @@ body.ios {
|
|||||||
width: 40px;
|
width: 40px;
|
||||||
height: 40px;
|
height: 40px;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
bottom: 50px;
|
bottom: 0;
|
||||||
right: 5px;
|
left: 10px;
|
||||||
z-index: 50;
|
z-index: 50;
|
||||||
@include opacity(0);
|
@include opacity(0);
|
||||||
@include single-transition(all, 0.3s);
|
@include single-transition(all, 0.3s);
|
||||||
|
|||||||
@@ -60,6 +60,11 @@
|
|||||||
|
|
||||||
&.move--left {
|
&.move--left {
|
||||||
@include translateX(0);
|
@include translateX(0);
|
||||||
|
|
||||||
|
.search-bar__container {
|
||||||
|
padding-right: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
@@ -68,6 +73,13 @@
|
|||||||
|
|
||||||
&.move--left {
|
&.move--left {
|
||||||
margin-right: 0;
|
margin-right: 0;
|
||||||
|
|
||||||
|
.channel-header__links {
|
||||||
|
position: relative;
|
||||||
|
right: auto;
|
||||||
|
top: auto;
|
||||||
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,11 +1,14 @@
|
|||||||
@charset "UTF-8";
|
@charset "UTF-8";
|
||||||
|
|
||||||
#channel-header .search-bar__container {
|
#channel-header .search-bar__container {
|
||||||
padding: 0 8px 0 3px;
|
padding: 0 9px 0 3px;
|
||||||
}
|
}
|
||||||
.search-bar__container {
|
.search-bar__container {
|
||||||
padding: 12px 8px 0 0;
|
padding: 12px 8px 0 0;
|
||||||
@include flex(0 0 56px);
|
@include flex(0 0 56px);
|
||||||
|
.sidebar--right.move--left & {
|
||||||
|
padding-right: 42px;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
.search__clear {
|
.search__clear {
|
||||||
display: none;
|
display: none;
|
||||||
|
|||||||
Ссылка в новой задаче
Block a user