Unfloyded/Legamunt
0
0
Fork 0
Code Activity

Turn report screen into a modal (#3965)

Browse source
This commit is contained in:
Eugen Rochko 2017-06-27 18:07:21 +02:00 • committed by GitHub
parent 16d0aed403
commit 12e7c81dd8
10 changed files with 98 additions and 125 deletions
Download patch file Download diff file Expand all files Collapse all files

104
app/javascript/styles/components.scss
View file

@ -600,13 +600,15 @@
}
.status-check-box {
border-bottom: 1px solid lighten($ui-base-color, 8%);
border-bottom: 1px solid $ui-secondary-color;
display: flex;
.status__content {
background: lighten($ui-base-color, 4%);
flex: 1 1 auto;
padding: 10px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
}
@ -1830,6 +1832,17 @@
@media screen and (max-width: 600px) {
font-size: 16px;
}
&.light {
color: $ui-base-color;
border-bottom: 2px solid lighten($ui-base-color, 27%);
&:focus,
&:active {
color: $ui-base-color;
border-bottom-color: $ui-highlight-color;
}
}
}
@import 'boost';
@ -2287,67 +2300,6 @@ button.icon-button.active i.fa-retweet {
vertical-align: middle;
}
.report.scrollable {
box-sizing: border-box;
display: flex;
flex-direction: column;
max-height: 100%;
}
.report__target {
border-bottom: 1px solid lighten($ui-base-color, 4%);
color: $ui-secondary-color;
flex: 0 0 auto;
padding: 10px;
strong {
display: block;
color: $primary-text-color;
font-weight: 500;
}
}
.report__statuses {
flex: 1 1 auto;
}
.report__textarea-wrapper {
flex: 0 0 100px;
padding: 10px;
}
.report__textarea {
background: transparent;
box-sizing: border-box;
border: 0;
border-bottom: 2px solid $ui-primary-color;
border-radius: 2px 2px 0 0;
color: $primary-text-color;
display: block;
font-family: inherit;
font-size: 14px;
margin-bottom: 10px;
outline: 0;
padding: 7px 4px;
resize: vertical;
width: 100%;
&:active,
&:focus {
border-bottom-color: $ui-highlight-color;
background: rgba($base-overlay-background, 0.1);
}
}
.report__submit {
margin-top: 10px;
overflow: hidden;
}
.report__submit-button {
float: right;
}
.empty-column-indicator {
color: lighten($ui-base-color, 20%);
background: $ui-base-color;
@ -3245,7 +3197,8 @@ button.icon-button.active i.fa-retweet {
}
.boost-modal,
.confirmation-modal {
.confirmation-modal,
.report-modal {
background: lighten($ui-secondary-color, 8%);
color: $ui-base-color;
border-radius: 8px;
@ -3281,7 +3234,8 @@ button.icon-button.active i.fa-retweet {
}
.boost-modal__action-bar,
.confirmation-modal__action-bar {
.confirmation-modal__action-bar,
.report-modal__action-bar {
display: flex;
justify-content: space-between;
background: $ui-secondary-color;
@ -3317,6 +3271,23 @@ button.icon-button.active i.fa-retweet {
}
}
.report-modal__statuses,
.report-modal__comment {
padding: 10px;
}
.report-modal__statuses {
min-height: 20vh;
overflow-y: auto;
overflow-x: hidden;
}
.report-modal__comment {
.setting-text {
margin-top: 10px;
}
}
.confirmation-modal__action-bar {
.confirmation-modal__cancel-button {
background-color: transparent;
@ -3332,7 +3303,8 @@ button.icon-button.active i.fa-retweet {
}
}
.confirmation-modal__container {
.confirmation-modal__container,
.report-modal__target {
padding: 30px;
font-size: 16px;
text-align: center;