PLT-6905 - Updating channel header design (#6789)
* PLT-6905 - Updating channel header design * Updating border-radius * Updating radius for wide icons * Updating trigger for overlay * Updating UI for channel header * Updating channel header sizing * Updating channel header css * Updating sidebar css * Updating status icons * Adjusting border * Updating comment * Removing type from status icon * Fixing UI issues for the channel header/sidebar * make "Add a channel description" open the channel header modal * Updating status and opacity * Updating stauts icon positioning * Updating description and heading size * Updating UI changes * Updating UI changes * add a focused class to the parent div .search__form and then remove when hover away * Fix active state for pinned posts icon * Updating UI changes * Update channel header text
Этот коммит содержится в:
Asaad Mahmood
коммит произвёл
Joram Wilander
Joram Wilander
родитель
97cfe62309
Коммит
d64d1f4029
@@ -1,7 +1,7 @@
|
||||
@charset 'UTF-8';
|
||||
|
||||
.btn {
|
||||
@include single-transition(all, .25s, ease-in);
|
||||
@include single-transition(all, .15s, ease-in);
|
||||
@include border-radius($border-rad);
|
||||
|
||||
&.btn-primary {
|
||||
|
||||
@@ -45,3 +45,23 @@ input {
|
||||
margin-top: 3px;
|
||||
}
|
||||
}
|
||||
|
||||
::-webkit-input-placeholder { /* Chrome/Opera/Safari */
|
||||
color: inherit;
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
::-moz-placeholder { /* Firefox 19+ */
|
||||
color: inherit;
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
:-ms-input-placeholder { /* IE 10+ */
|
||||
color: inherit;
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
:-moz-placeholder { /* Firefox 18- */
|
||||
color: inherit;
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
@@ -36,6 +36,24 @@
|
||||
width: 100%;
|
||||
z-index: 101;
|
||||
|
||||
.icon {
|
||||
@include opacity(.5);
|
||||
display: inline-block;
|
||||
margin: 0 7px 0 0;
|
||||
position: relative;
|
||||
text-align: center;
|
||||
top: 2px;
|
||||
vertical-align: top;
|
||||
width: 16px;
|
||||
|
||||
&.icon__globe {
|
||||
svg {
|
||||
height: 14px;
|
||||
width: 14px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.status {
|
||||
font-size: 15px;
|
||||
text-align: center;
|
||||
@@ -59,11 +77,12 @@
|
||||
@include border-radius(20px);
|
||||
display: block;
|
||||
font-size: 15px;
|
||||
height: 20px;
|
||||
line-height: 20px;
|
||||
margin-right: 6px;
|
||||
height: 16px;
|
||||
line-height: 16px;
|
||||
margin-right: 7px;
|
||||
margin-top: 3px;
|
||||
text-align: center;
|
||||
width: 20px;
|
||||
width: 16px;
|
||||
|
||||
.mention--align {
|
||||
display: inline-block;
|
||||
|
||||
@@ -4,6 +4,7 @@
|
||||
.popover {
|
||||
@include border-radius($border-rad);
|
||||
color: lighten($black, 25%);
|
||||
padding: 0;
|
||||
|
||||
&.bottom,
|
||||
&.right,
|
||||
@@ -220,17 +221,70 @@
|
||||
.member-list__popover {
|
||||
max-width: initial;
|
||||
|
||||
.more-modal__header {
|
||||
padding: 14px 0;
|
||||
|
||||
.icon {
|
||||
@include opacity(.8);
|
||||
margin: 0 38px 0 24px;
|
||||
position: relative;
|
||||
top: 2px;
|
||||
}
|
||||
|
||||
span {
|
||||
font-weight: 500;
|
||||
}
|
||||
}
|
||||
|
||||
.more-modal__list {
|
||||
.more-modal__row {
|
||||
min-height: inherit;
|
||||
border-bottom: none;
|
||||
border-top: 1px solid;
|
||||
cursor: pointer;
|
||||
height: 45px;
|
||||
padding: 5px 19px 5px 17px;
|
||||
|
||||
&:hover {
|
||||
border-left: 3px solid transparent;
|
||||
padding-left: 14px;
|
||||
|
||||
.more-modal__actions {
|
||||
@include opacity(1);
|
||||
}
|
||||
}
|
||||
|
||||
&.more-modal__row--button {
|
||||
border-left: none;
|
||||
height: 40px;
|
||||
position: relative;
|
||||
|
||||
button {
|
||||
font-weight: 500;
|
||||
height: 100%;
|
||||
left: 0;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.more-modal__name {
|
||||
line-height: 33px;
|
||||
}
|
||||
|
||||
.more-modal__image {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.more-modal__details {
|
||||
line-height: 32px;
|
||||
padding-left: 30px;
|
||||
}
|
||||
|
||||
.more-modal__actions {
|
||||
line-height: 31px;
|
||||
@include opacity(0);
|
||||
line-height: 42px;
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,14 +1,7 @@
|
||||
@charset 'UTF-8';
|
||||
|
||||
.channel-header {
|
||||
.search-bar__container {
|
||||
padding: 0 7px 0 3px;
|
||||
}
|
||||
}
|
||||
|
||||
.search-bar__container {
|
||||
@include flex(0 0 56px);
|
||||
padding: 12px 5px 0 0;
|
||||
@include flex(0 0 79px);
|
||||
|
||||
.channel-header__links {
|
||||
.sidebar--right & {
|
||||
@@ -31,30 +24,10 @@
|
||||
}
|
||||
}
|
||||
|
||||
.sidebar__collapse {
|
||||
@include single-transition(all, .2s, linear);
|
||||
@include translateX(0);
|
||||
cursor: pointer;
|
||||
display: none;
|
||||
fill: $white;
|
||||
font-size: 35px;
|
||||
left: 0;
|
||||
line-height: 40px;
|
||||
padding-left: 1px;
|
||||
.search__icon {
|
||||
left: 10px;
|
||||
position: absolute;
|
||||
text-align: center;
|
||||
width: 49px;
|
||||
z-index: 5;
|
||||
}
|
||||
|
||||
.sidebar__search-icon {
|
||||
@include opacity(.5);
|
||||
color: $dark-gray;
|
||||
display: none;
|
||||
font-size: 14px;
|
||||
margin-left: 10px;
|
||||
position: absolute;
|
||||
top: 15px;
|
||||
top: 8px;
|
||||
}
|
||||
|
||||
.sidebar__search-clear {
|
||||
@@ -69,31 +42,33 @@
|
||||
width: 40px;
|
||||
}
|
||||
|
||||
.search-form__container {
|
||||
|
||||
}
|
||||
|
||||
.search__form {
|
||||
position: relative;
|
||||
|
||||
.search-bar__container & {
|
||||
@include border-radius(2px);
|
||||
@include border-radius(50px);
|
||||
border: 1px solid $light-gray;
|
||||
margin: 0;
|
||||
width: 300px;
|
||||
margin: 16px 10px 0 0;
|
||||
width: 229px;
|
||||
}
|
||||
|
||||
.sidebar--right & {
|
||||
float: left;
|
||||
margin-right: 7px;
|
||||
width: 325px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.search-bar {
|
||||
background: transparent;
|
||||
border: none;
|
||||
box-shadow: none;
|
||||
height: 40px;
|
||||
padding-right: 30px;
|
||||
|
||||
.search-bar__container & {
|
||||
border: none;
|
||||
height: 30px;
|
||||
}
|
||||
font-size: 14px;
|
||||
height: 35px;
|
||||
outline: none;
|
||||
padding: 0 30px 0 40px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.icon--refresh {
|
||||
|
||||
@@ -42,10 +42,10 @@
|
||||
|
||||
.status {
|
||||
display: inline-block;
|
||||
margin-right: 6px;
|
||||
margin: 0 7px 0 1px;
|
||||
position: relative;
|
||||
top: 1px;
|
||||
width: 12px;
|
||||
top: 2px;
|
||||
width: 15px;
|
||||
|
||||
&.status--group {
|
||||
border-radius: 2px;
|
||||
@@ -54,18 +54,19 @@
|
||||
height: 16px;
|
||||
left: 1px;
|
||||
line-height: 15px;
|
||||
margin-left: -3px;
|
||||
margin: 0 9px 0 -1px;
|
||||
text-align: center;
|
||||
top: -1px;
|
||||
width: 16px;
|
||||
width: 15px;
|
||||
|
||||
.mentions__name & {
|
||||
height: 20px;
|
||||
height: 18px;
|
||||
left: 0;
|
||||
line-height: 20px;
|
||||
line-height: 18px;
|
||||
margin-left: 0;
|
||||
margin-right: 6px;
|
||||
text-align: center;
|
||||
width: 20px;
|
||||
width: 17px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -2,14 +2,9 @@
|
||||
|
||||
.webrtc__header {
|
||||
@include webrtc-button;
|
||||
float: left;
|
||||
margin-right: 10px;
|
||||
position: relative;
|
||||
top: 13px;
|
||||
|
||||
svg {
|
||||
position: relative;
|
||||
width: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
Ссылка в новой задаче
Block a user