Merge pull request #1445 from asaadmahmoodspin/ui-improvements
Multiple UI Improvements
Этот коммит содержится в:
Corey Hulen
@@ -20,7 +20,6 @@
|
||||
background: #fff;
|
||||
@include display-flex;
|
||||
@include flex-direction(column);
|
||||
flex-direction: column;
|
||||
.channel__wrap & {
|
||||
padding-top: 0;
|
||||
}
|
||||
|
||||
@@ -1,9 +1,9 @@
|
||||
.preview-container {
|
||||
position: relative;
|
||||
margin-top: 10px;
|
||||
margin-top: 25px;
|
||||
width: 100%;
|
||||
max-height: 110px;
|
||||
height: 110px;
|
||||
max-height: 100px;
|
||||
height: 100px;
|
||||
white-space: nowrap;
|
||||
overflow-x: auto;
|
||||
overflow-y: hidden;
|
||||
@@ -11,7 +11,7 @@
|
||||
display: inline-block;
|
||||
width: 120px;
|
||||
height: 100px;
|
||||
margin: 7px 0 0 5px;
|
||||
margin: 0 0 0 5px;
|
||||
vertical-align: top;
|
||||
position: relative;
|
||||
border: 1px solid #DDD;
|
||||
|
||||
@@ -1,8 +1,5 @@
|
||||
#channel-header {
|
||||
padding: 3px 0;
|
||||
height: 58px;
|
||||
flex: 0 0 58px;
|
||||
@include flex(0 0 50px);
|
||||
@include flex(0 0 56px);
|
||||
}
|
||||
.row {
|
||||
&.header {
|
||||
@@ -45,9 +42,9 @@
|
||||
text-overflow: ellipsis;
|
||||
margin-top: 2px;
|
||||
max-height: 45px;
|
||||
.markdown-inline-img {
|
||||
max-height: 45px
|
||||
}
|
||||
.markdown-inline-img {
|
||||
max-height: 45px
|
||||
}
|
||||
}
|
||||
&.popover {
|
||||
white-space: normal;
|
||||
@@ -97,7 +94,7 @@
|
||||
.sidebar--left, .sidebar--menu {
|
||||
.team__header {
|
||||
position: relative;
|
||||
padding: 10px;
|
||||
padding: 9px 10px;
|
||||
@include legacy-pie-clearfix;
|
||||
&:before {
|
||||
@include single-transition(all, 0.05s, linear);
|
||||
@@ -125,7 +122,7 @@
|
||||
.navbar-right {
|
||||
font-size: 0.85em;
|
||||
position: absolute;
|
||||
top: 11px;
|
||||
top: 10px;
|
||||
right: 22px;
|
||||
z-index: 5;
|
||||
.dropdown-toggle {
|
||||
@@ -217,7 +214,7 @@
|
||||
width:100%;
|
||||
border-left: none;
|
||||
font-size: 14px;
|
||||
line-height: 50px;
|
||||
line-height: 56px;
|
||||
#member_popover {
|
||||
margin-right: 5px;
|
||||
width: 45px;
|
||||
@@ -296,17 +293,19 @@
|
||||
|
||||
.channel-header__links {
|
||||
height: 32px;
|
||||
vertical-align: top;
|
||||
display: inline-block;
|
||||
width: 15px;
|
||||
margin: 9px 6px 3px 0;
|
||||
a {
|
||||
width: 32px;
|
||||
@include border-radius(50px);
|
||||
border: 1px solid #ccc;
|
||||
margin-right: 10px;
|
||||
> a {
|
||||
@include border-radius(50px);
|
||||
height: 100%;
|
||||
display: block;
|
||||
@include single-transition(all, 0.1s, ease-in);
|
||||
}
|
||||
svg {
|
||||
vertical-align: top;
|
||||
margin-top: 8px;
|
||||
margin: 7px 0 0 0px;
|
||||
fill: inherit;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -332,18 +332,19 @@ body.ios {
|
||||
}
|
||||
.post-create-footer {
|
||||
@include clearfix;
|
||||
padding: 0;
|
||||
padding: 3px 0 0 0;
|
||||
font-size: 13px;
|
||||
.has-error {
|
||||
.control-label {
|
||||
height: 0;
|
||||
display: block;
|
||||
font-weight: normal;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
.msg-typing {
|
||||
min-height: 25px;
|
||||
line-height: 25px;
|
||||
display: block;
|
||||
font-size: 13px;
|
||||
@include opacity(0.7);
|
||||
}
|
||||
}
|
||||
@@ -417,9 +418,6 @@ body.ios {
|
||||
}
|
||||
}
|
||||
}
|
||||
.post-create-footer {
|
||||
padding: 0;
|
||||
}
|
||||
p {
|
||||
margin: 0 0 1em;
|
||||
line-height: 1.6em;
|
||||
@@ -545,13 +543,14 @@ body.ios {
|
||||
}
|
||||
&.post-info {
|
||||
.post-profile-time {
|
||||
color: #a8adb7;
|
||||
vertical-align: top;
|
||||
width: 150px;
|
||||
max-width: 220px;
|
||||
overflow: hidden;
|
||||
display: block;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
margin: 0 0 0 50px;
|
||||
}
|
||||
}
|
||||
.post-header-col {
|
||||
@@ -577,7 +576,7 @@ body.ios {
|
||||
}
|
||||
}
|
||||
.post-profile-time {
|
||||
color: #a8adb7;
|
||||
@include opacity(0.5);
|
||||
}
|
||||
}
|
||||
.post-comment {
|
||||
|
||||
@@ -1,4 +1,7 @@
|
||||
.post-right__container {
|
||||
@include display-flex;
|
||||
@include flex-direction(column);
|
||||
height: 100%;
|
||||
|
||||
.post-right-root-message {
|
||||
padding: 1em 1em 0;
|
||||
@@ -19,6 +22,15 @@
|
||||
margin: 1em 0 0 0;
|
||||
}
|
||||
}
|
||||
.post-header {
|
||||
.post-profile-time {
|
||||
width: 200px;
|
||||
display: inline-block;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.post-create__container {
|
||||
@@ -44,7 +56,7 @@
|
||||
}
|
||||
.post-create-footer {
|
||||
width: 100%;
|
||||
padding-top: 5px;
|
||||
padding: 5px 0 10px;
|
||||
}
|
||||
.post-right-comments-upload-in-progress {
|
||||
padding: 6px 0;
|
||||
@@ -103,8 +115,9 @@
|
||||
|
||||
.post-right__scroll {
|
||||
position: relative;
|
||||
overflow: scroll;
|
||||
overflow: auto;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
@include flex(1 1 auto);
|
||||
}
|
||||
|
||||
.post-right-comment-time {
|
||||
|
||||
@@ -275,6 +275,11 @@
|
||||
}
|
||||
}
|
||||
@media screen and (max-width: 768px) {
|
||||
.textarea-wrapper {
|
||||
.textbox-preview-link {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
.form-control {
|
||||
&.min-height {
|
||||
min-height: 100px;
|
||||
@@ -503,17 +508,22 @@
|
||||
.post-create__container {
|
||||
.post-right__container & {
|
||||
padding: 0 1em;
|
||||
.msg-typing {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
form {
|
||||
padding: 0;
|
||||
padding: 0.5em 0;
|
||||
}
|
||||
.post-create-footer {
|
||||
padding: 0 1em;
|
||||
.msg-typing {
|
||||
margin-left: 45px;
|
||||
width: 55%;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
display: none;
|
||||
}
|
||||
.has-error {
|
||||
.control-label {
|
||||
height: auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
.post-create-body {
|
||||
@@ -542,8 +552,8 @@
|
||||
}
|
||||
}
|
||||
.preview-container {
|
||||
padding: 0px 10px;
|
||||
margin-top: 20px;
|
||||
padding: 0px;
|
||||
margin-top: 5px;
|
||||
.preview-div {
|
||||
margin-top: 0;
|
||||
}
|
||||
@@ -616,7 +626,7 @@
|
||||
}
|
||||
.search-bar__container {
|
||||
padding: 0;
|
||||
height: 45px;
|
||||
@include flex(0 0 44px);
|
||||
background: $primary-color;
|
||||
color: #fff;
|
||||
&.focused {
|
||||
@@ -745,6 +755,12 @@
|
||||
.sidebar--right__close {
|
||||
display: none;
|
||||
}
|
||||
.sidebar-right__body {
|
||||
height: calc(100% - 44px);
|
||||
}
|
||||
}
|
||||
.search-items-container {
|
||||
height: calc(100% - 44px);
|
||||
}
|
||||
.inner__wrap {
|
||||
&.move--right {
|
||||
|
||||
@@ -1,8 +1,9 @@
|
||||
#channel-header .search-bar__container {
|
||||
padding: 8px 8px 8px 0;
|
||||
padding: 0 8px 0 0;
|
||||
}
|
||||
.search-bar__container {
|
||||
padding: 12px 8px 12px 0;
|
||||
padding: 12px 8px 0 0;
|
||||
@include flex(0 0 56px);
|
||||
}
|
||||
.search__clear {
|
||||
display: none;
|
||||
@@ -71,8 +72,10 @@
|
||||
|
||||
.search-items-container {
|
||||
position: relative;
|
||||
overflow: scroll;
|
||||
overflow: auto;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
@include flex(1 1 auto);
|
||||
height: calc(100% - 56px);
|
||||
}
|
||||
|
||||
.search-results-header {
|
||||
@@ -92,9 +95,11 @@
|
||||
padding: 10px 1em;
|
||||
margin: 0;
|
||||
cursor: pointer;
|
||||
|
||||
&:first-child {
|
||||
border: none;
|
||||
}
|
||||
|
||||
.search-channel__name {
|
||||
font-weight: 600;
|
||||
margin: 0 0 10px 0;
|
||||
|
||||
@@ -47,7 +47,7 @@
|
||||
.nav-pills__container {
|
||||
height: 100%;
|
||||
position: relative;
|
||||
overflow: scroll;
|
||||
overflow: auto;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
}
|
||||
|
||||
|
||||
@@ -57,8 +57,11 @@
|
||||
color: inherit;
|
||||
line-height: 40px;
|
||||
padding: 0 15px;
|
||||
.glyphicon {
|
||||
.fa ,.glyphicon {
|
||||
width: 25px;
|
||||
text-align: center;
|
||||
left: -5px;
|
||||
position: relative;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -3,24 +3,38 @@
|
||||
width: 400px;
|
||||
height: 100%;
|
||||
right: 0px;
|
||||
padding: 0 0 2em 0;
|
||||
padding: 0;
|
||||
background: #fff;
|
||||
@include single-transition(transform, 0.5s, ease);
|
||||
right: -320px;
|
||||
|
||||
&.move--left {
|
||||
right: 0;
|
||||
}
|
||||
|
||||
.sidebar--right__content {
|
||||
height: 100%;
|
||||
@include display-flex;
|
||||
@include flex-direction(column);
|
||||
}
|
||||
|
||||
.sidebar--right__back {
|
||||
color: #666;
|
||||
width: 20px;
|
||||
color: inherit;
|
||||
@include opacity(0.8);
|
||||
width: 30px;
|
||||
text-align: center;
|
||||
margin: 0 0 0 -6px;
|
||||
font-size: 12px;
|
||||
margin: 0 0 0 -14px;
|
||||
font-size: 13px;
|
||||
display: inline-block;
|
||||
}
|
||||
.sidebar-right__body {
|
||||
@include flex(1 1 auto);
|
||||
border-left: $border-gray;
|
||||
border-top: $border-gray;
|
||||
@include display-flex;
|
||||
@include flex-direction(column);
|
||||
height: calc(100% - 56px);
|
||||
@include border-radius(2px 0 0 0);
|
||||
}
|
||||
.post {
|
||||
.post-header {
|
||||
@@ -75,7 +89,7 @@
|
||||
height: 44px;
|
||||
padding: 0 1em;
|
||||
line-height: 44px;
|
||||
background: #F5F5F5;
|
||||
@include flex(0 0 44px);
|
||||
border-bottom: $border-gray;
|
||||
}
|
||||
.sidebar--right__subheader {
|
||||
|
||||
Ссылка в новой задаче
Block a user