mirrors/mostlymatter
1
0
Форкнуть 0
Код Задачи Запросы на слияние Действия Пакеты Проекты Релизы Вики Активность

Multiple UI fixes and improvements (#4572)

Просмотр исходного кода 
Reverting switch teams code

Fixing change css function
Этот коммит содержится в:
Asaad Mahmood
2016-11-18 01:27:39 +05:00
коммит произвёл Corey Hulen
родитель a25afb1134
Коммит 7d68434e8c
7 изменённых файлов: 123 добавлений и 54 удалений
Скачать Patch файл Скачать Diff файл Показать все файлы Свернуть все файлы

1
webapp/components/new_channel_modal.jsx
Просмотреть файл

@@ -206,6 +206,7 @@ class NewChannelModal extends React.Component {
return (
<span>
<Modal
dialogClassName='new-channel__modal'
show={this.props.show}
bsSize='large'
onHide={this.props.onModalDismissed}

1
webapp/components/sidebar_right_menu.jsx
Просмотреть файл

@@ -68,6 +68,7 @@ export default class SidebarRightMenu extends React.Component {
getFlagged(e) {
e.preventDefault();
getFlaggedPosts();
this.hideSidebars();
}
componentDidMount() {

2
webapp/sass/components/_modal.scss
Просмотреть файл

@@ -612,7 +612,7 @@
.more-modal__row {
border-bottom: 1px solid $light-gray;
display: flex;
min-height: 50px;
min-height: 70px;
padding: 8px 15px;
}

16
webapp/sass/components/_scrollbar.scss
Просмотреть файл

@@ -15,13 +15,15 @@
}
body {
scrollbar-3dlight-color: #7D7E94;
scrollbar-arrow-color: #C1C1D1;
scrollbar-darkshadow-color: #2D2C4D;
scrollbar-face-color: rgba(0, 0, 0, .1);
scrollbar-highlight-color: #7D7E94;
scrollbar-shadow-color: #2D2C4D;
scrollbar-track-color: rgba(0, 0, 0, .1);
&.app__body {
scrollbar-3dlight-color: #7D7E94;
scrollbar-arrow-color: #C1C1D1;
scrollbar-darkshadow-color: #2D2C4D;
scrollbar-face-color: rgba(0, 0, 0, .1);
scrollbar-highlight-color: #7D7E94;
scrollbar-shadow-color: #2D2C4D;
scrollbar-track-color: rgba(0, 0, 0, .1);
}
}
.scrollbar--horizontal,

148
webapp/sass/responsive/_mobile.scss
Просмотреть файл

@@ -1,6 +1,23 @@
@charset 'UTF-8';
@media screen and (max-width: 768px) {
.modal {
.modal-dialog {
&.new-channel__modal {
position: fixed;
@include translate3d(0, 100%, 0);
}
}
&.in {
.modal-dialog {
&.new-channel__modal {
@include translate3d(0, 0, 0);
}
}
}
}
.webrtc__notification--rhs {
left: auto;
right: 0;
@@ -17,15 +34,21 @@
}
#header-popover {
@include single-transition(all, .35s, ease);
@include translate3d(0, 100%, 0);
@include box-shadow(none);
background: alpha-color($black, .8);
border: none;
height: 100%;
height: calc(100% - 45px);
max-width: 100%;
position: fixed;
top: 47px;
width: 100%;
&.in {
@include translate3d(0, 0, 0);
}
.arrow {
display: none;
}
@@ -37,23 +60,23 @@
}
.close {
font-family: 'Open Sans', sans-serif;
display: block;
position: fixed;
bottom: 25px;
height: 30px;
width: 30px;
margin-left: -15px;
left: 50%;
font-size: 23px;
line-height: 27px;
border-radius: 50%;
@include border-radius(50%);
border: 1px solid $white;
text-align: center;
opacity: 1;
text-shadow: none;
color: white;
bottom: 25px;
color: $white;
display: block;
font-family: 'Open Sans', sans-serif;
font-size: 23px;
font-weight: 200;
height: 30px;
left: 50%;
line-height: 27px;
margin-left: -15px;
opacity: 1;
position: fixed;
text-align: center;
text-shadow: none;
width: 30px;
}
}
@@ -743,34 +766,47 @@
white-space: nowrap;
}
.dropdown {
&.open {
.dropdown-menu {
@include translate3d(0, 0, 0);
visibility: visible;
}
}
}
.dropdown-menu {
@include single-transition(all, .35s, ease);
@include translate3d(0, 100%, 0);
background: alpha-color($black, .9);
height: 100%;
display: block;
height: calc(100% - 45px);
left: 0;
overflow: auto;
padding: 1.4em 0 140px;
padding: 1.4em 0 0;
position: fixed;
top: 42px;
visibility: hidden;
width: 100%;
.close {
font-family: 'Open Sans', sans-serif;
display: block;
position: fixed;
bottom: 25px;
height: 30px;
width: 30px;
margin-left: -15px;
left: 50%;
font-size: 23px;
line-height: 27px;
border-radius: 50%;
@include border-radius(50%);
border: 1px solid $white;
text-align: center;
opacity: 1;
text-shadow: none;
color: white;
bottom: 25px;
color: $white;
display: block;
font-family: 'Open Sans', sans-serif;
font-size: 23px;
font-weight: 200;
height: 30px;
left: 50%;
line-height: 27px;
margin-left: -15px;
opacity: 1;
position: fixed;
text-align: center;
text-shadow: none;
width: 30px;
}
> li {
@@ -1056,7 +1092,7 @@
}
&.move--right {
@include translate3d(290px, 0, 0);
@include translate3d(0, 0, 0);
&:before {
@include single-transition(all, .35s, ease);
@@ -1281,11 +1317,7 @@
}
.post__header {
.col__name {
.user-popover {
max-width: 100%;
}
}
padding-right: 50px;
}
}
}
@@ -1394,7 +1426,7 @@
.inner-wrap {
&.move--right {
@include translate3d(260px, 0, 0);
@include translate3d(0, 0, 0);
}
}
@@ -1415,26 +1447,41 @@
}
@media screen and (max-width: 320px) {
.post {
.post__header {
.col__name {
.user-popover {
max-width: 105px;
}
}
}
}
.tutorial-steps__container {
.tutorial__content {
.tutorial__steps {
padding: 0 20px;
width: 100%;
h1 {
font-size: 35px;
margin: -5px 0 20px;
}
h3 {
margin-bottom: 10px;
}
.tutorial__app-icons {
margin: 10px 0;
}
.tutorial__circles {
margin: 0 0 15px;
bottom: 60px;
margin: 0 0 15px;
position: absolute;
}
.tutorial__footer {
bottom: 30px;
position: absolute;
@@ -1450,13 +1497,30 @@
}
}
@media screen and (max-width: 320px) and (max-height: 560px) {
#navbar {
.navbar-default {
.dropdown-menu {
padding-top: 1em;
> li {
> a {
border: none;
line-height: 28px;
}
}
}
}
}
}
// on iOS, allow clicks within an input's label to actually propagate through to the input itself
// http://stackoverflow.com/a/34810294/6325807
label span {
pointer-events: none;
}
@media screen and (-webkit-min-device-pixel-ratio:0) {
@media screen and (-webkit-min-device-pixel-ratio: 0) {
select,
textarea,
input {

2
webapp/sass/routes/_admin-console.scss
Просмотреть файл

@@ -61,7 +61,7 @@
.log__panel {
background-color: white;
border: 1px solid #ddd;
height: 800px;
height: calc(100vh - 200px);
margin-top: 10px;
overflow: scroll;
padding: 5px;

7
webapp/utils/utils.jsx
Просмотреть файл

@@ -611,13 +611,14 @@ export function applyTheme(theme) {
changeCss('.app__body .post.post--hovered', 'background:' + changeOpacity(theme.centerChannelColor, 0.08));
changeCss('@media(min-width: 768px){.app__body .post:hover, .app__body .more-modal__list .more-modal__row:hover, .app__body .modal .settings-modal .settings-table .settings-content .section-min:hover', 'background:' + changeOpacity(theme.centerChannelColor, 0.08));
changeCss('.app__body .date-separator.hovered--before:after, .app__body .date-separator.hovered--after:before, .app__body .new-separator.hovered--after:before, .app__body .new-separator.hovered--before:after', 'background:' + changeOpacity(theme.centerChannelColor, 0.07));
changeCss('@media(min-width: 768px){.app__body .suggestion-list__content .command:hover, .app__body .mentions__name:hover, .app__body .suggestion--selected, .app__body .dropdown-menu>li>a:focus, .app__body .dropdown-menu>li>a:hover, .app__body .bot-indicator', 'background:' + changeOpacity(theme.centerChannelColor, 0.15));
changeCss('@media(min-width: 768px){.app__body .suggestion-list__content .command:hover, .app__body .mentions__name:hover, .app__body .dropdown-menu>li>a:focus, .app__body .dropdown-menu>li>a:hover, .app__body .bot-indicator', 'background:' + changeOpacity(theme.centerChannelColor, 0.15));
changeCss('.app__body .suggestion--selected', 'background:' + changeOpacity(theme.centerChannelColor, 0.15), 1);
changeCss('code, .app__body .form-control[disabled], .app__body .form-control[readonly], .app__body fieldset[disabled] .form-control', 'background:' + changeOpacity(theme.centerChannelColor, 0.1));
changeCss('@media(min-width: 960px){.app__body .post.current--user:hover .post__body ', 'background: none;');
changeCss('.app__body .sidebar--right', 'color:' + theme.centerChannelColor);
changeCss('.app__body .search-help-popover .search-autocomplete__item:hover, .app__body .modal .settings-modal .settings-table .settings-content .appearance-section .theme-elements__body', 'background:' + changeOpacity(theme.centerChannelColor, 0.05));
changeCss('.app__body .search-help-popover .search-autocomplete__item.selected', 'background:' + changeOpacity(theme.centerChannelColor, 0.15));
changeCss('::-webkit-scrollbar-thumb', 'background:' + changeOpacity(theme.centerChannelColor, 0.4));
changeCss('body.app__body ::-webkit-scrollbar-thumb', 'background:' + changeOpacity(theme.centerChannelColor, 0.4), 1);
changeCss('body', 'scrollbar-arrow-color:' + theme.centerChannelColor);
changeCss('.app__body .post-create__container .post-create-body .btn-file svg, .app__body .post.post--compact .post-image__column .post-image__details svg, .app__body .modal .about-modal .about-modal__logo svg, .app__body .post .post__img svg', 'fill:' + theme.centerChannelColor);
changeCss('.app__body .scrollbar--horizontal, .app__body .scrollbar--vertical', 'background:' + changeOpacity(theme.centerChannelColor, 0.5));
@@ -686,7 +687,7 @@ export function applyFont(fontName) {
}
export function changeCss(className, classValue) {
let styleEl = document.querySelector('style[data-class="' + className + '"]');
let styleEl = document.querySelector('style[data-class="' + className + classValue + '"]');
if (!styleEl) {
styleEl = document.createElement('style');
styleEl.setAttribute('data-class', className);