Composer restyle
* composer restyle, some input normalization
* style adjustments: spacing, preview background, colors
* small spacing adjustments, removing default iOS input appearance, fixing merge
* small width adjustment
* fixing mobile link modal for small devices
* FIX: more resilient allowInitiatlValueMutation implementation
* Build scrollMap only on scroll.
* FIX: pick date and time was not reseting state
* FIX: removes auto sizing and touchstart support for now
* Revert "FIX: reflects discourse icons naming scheme s/d-icon-*/d-*"
This reverts commit b5ed980235.
* tweak icon-library generation
* FIX: regression preventing to set number of hours before closing
This commit also adds a full test suite for editing topic timer.
* FIX: makes allowInitialValueMutation more restrictive
* FIX: invite-list expects initial value mutation
* fixing tag input spacing
* minor input cleanup
* bump onebox version
* FIX: avoids test failing at some times of the day
* FIX: various issues when editing category permissions
This commit also adds multiple tests
This commit is contained in:
Kris
GitHub
parent
49b1df40fc
commit
ada1d6b987
|
|
@ -475,8 +475,8 @@ export default Ember.Component.extend({
|
|||
} else {
|
||||
let previewInputOffset = $(".d-editor-input").offset();
|
||||
let replyControlOffset = $("#reply-control").offset() || {left: 0};
|
||||
let left = previewInputOffset.left - replyControlOffset.left;
|
||||
desktopPositioning({left, bottom: $("#reply-control").height() - 48});
|
||||
let left = previewInputOffset.left;
|
||||
desktopPositioning({left, bottom: $("#reply-control").height() - 45});
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,3 +1,4 @@
|
|||
<div class="composer-controls">
|
||||
{{#if site.mobileView}}
|
||||
{{flat-button
|
||||
class="toggle-toolbar"
|
||||
|
|
@ -10,3 +11,4 @@
|
|||
icon=toggleIcon
|
||||
action=toggleComposer
|
||||
title='composer.toggler'}}
|
||||
</div>
|
||||
|
|
@ -23,19 +23,16 @@
|
|||
messageCount=messageCount
|
||||
addLinkLookup="addLinkLookup"}}
|
||||
|
||||
{{composer-toggles composeState=model.composeState
|
||||
toggleComposer=(action "toggle")
|
||||
toggleToolbar=(action "toggleToolbar")}}
|
||||
|
||||
{{#if model.viewOpen}}
|
||||
|
||||
<div class='reply-area {{if canEditTags "with-tags"}}'>
|
||||
<div class="reply-area {{if canEditTags 'with-tags'}}">
|
||||
|
||||
<div class='composer-fields'>
|
||||
|
||||
{{plugin-outlet name="composer-open" args=(hash model=model)}}
|
||||
|
||||
<div class='reply-to'>
|
||||
<div class="reply-details">
|
||||
{{{model.actionTitle}}}
|
||||
|
||||
{{#unless site.mobileView}}
|
||||
|
|
@ -52,6 +49,10 @@
|
|||
{{/if}}
|
||||
{{/if}}
|
||||
</div>
|
||||
{{composer-toggles composeState=model.composeState
|
||||
toggleComposer=(action "toggle")
|
||||
toggleToolbar=(action "toggleToolbar")}}
|
||||
</div>
|
||||
|
||||
{{#if model.canEditTitle}}
|
||||
{{#if model.creatingPrivateMessage}}
|
||||
|
|
@ -70,7 +71,7 @@
|
|||
</div>
|
||||
{{/if}}
|
||||
|
||||
<div class="title-and-category">
|
||||
<div class="title-and-category {{if showPreview 'with-preview'}}">
|
||||
|
||||
{{composer-title composer=model lastValidatedAt=lastValidatedAt focusTarget=focusTarget}}
|
||||
|
||||
|
|
@ -83,6 +84,10 @@
|
|||
{{d-button action="showOptions" label="topic.options"}}
|
||||
{{/if}}
|
||||
{{/if}}
|
||||
{{#if canEditTags}}
|
||||
{{tag-chooser tags=model.tags tabIndex="4" categoryId=model.categoryId}}
|
||||
{{/if}}
|
||||
|
||||
|
||||
</div>
|
||||
{{/if}}
|
||||
|
|
@ -111,12 +116,9 @@
|
|||
showUploadSelector="showUploadSelector"
|
||||
afterRefresh="afterRefresh"}}
|
||||
|
||||
<div class='submit-panel {{if canEditTags "with-tags"}}'>
|
||||
<div class='submit-panel'>
|
||||
{{plugin-outlet name="composer-fields-below" args=(hash model=model)}}
|
||||
|
||||
{{#if canEditTags}}
|
||||
{{tag-chooser tags=model.tags tabIndex="4" categoryId=model.categoryId}}
|
||||
{{/if}}
|
||||
|
||||
<div class='save-or-cancel'>
|
||||
{{composer-save-button action=(action "save")
|
||||
|
|
@ -180,6 +182,11 @@
|
|||
{{i18n "composer.saved_draft"}}
|
||||
{{/if}}
|
||||
</div>
|
||||
|
||||
{{composer-toggles composeState=model.composeState
|
||||
toggleComposer=(action "toggle")
|
||||
toggleToolbar=(action "toggleToolbar")}}
|
||||
|
||||
{{/if}}
|
||||
|
||||
{{/if}}
|
||||
|
|
|
|||
|
|
@ -1,27 +1,27 @@
|
|||
#reply-control {
|
||||
background-color: $primary-low;
|
||||
border-top: 1px solid $primary-low;
|
||||
bottom: 0;
|
||||
height: 0;
|
||||
position: fixed;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
transition: height 250ms ease;
|
||||
bottom: 0;
|
||||
height: 0;
|
||||
right: 0;
|
||||
left: 0;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
|
||||
max-width: 1400px;
|
||||
@media screen and (max-width: 1200px) {
|
||||
width: 100%;
|
||||
min-width: 0;
|
||||
}
|
||||
z-index: 999;
|
||||
transition: height 250ms ease, background 250ms ease;
|
||||
background-color: $secondary;
|
||||
box-shadow: 0 -2px 40px rgba($primary, .12);
|
||||
|
||||
.toggler,
|
||||
.toggle-toolbar {
|
||||
position: absolute;
|
||||
color: $primary-medium;
|
||||
}
|
||||
|
||||
.toggler {
|
||||
right: 1px;
|
||||
}
|
||||
|
||||
.toggle-toolbar {
|
||||
right: 30px;
|
||||
.reply-area {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.saving-text,
|
||||
|
|
@ -30,9 +30,11 @@
|
|||
padding-left: 10px;
|
||||
.spinner {
|
||||
margin-left: 5px;
|
||||
border-color: $secondary;
|
||||
border-right-color: transparent;
|
||||
}
|
||||
i {
|
||||
color: $primary-medium;
|
||||
color: $secondary;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -50,7 +52,21 @@
|
|||
&.draft,
|
||||
&.saving {
|
||||
height: 40px !important;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
background: $tertiary;
|
||||
color: $secondary;
|
||||
flex-direction: row;
|
||||
.composer-controls {
|
||||
margin-left: auto;
|
||||
display: flex;
|
||||
padding-right: 5px;
|
||||
.toggle-toolbar {
|
||||
display: none;
|
||||
}
|
||||
.d-icon {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.draft {
|
||||
|
|
@ -62,34 +78,38 @@
|
|||
.grippie, .saving-text {
|
||||
display: none;
|
||||
}
|
||||
.toggler {
|
||||
right: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
&.saving .saving-text {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
input[type="text"] {
|
||||
border: 0;
|
||||
}
|
||||
|
||||
.reply-to {
|
||||
color: $tertiary;
|
||||
margin-bottom: 10px;
|
||||
color: $primary-medium;
|
||||
margin: 5px 0 10px 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
i {
|
||||
color: $primary-medium;
|
||||
}
|
||||
.reply-details {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
i {
|
||||
color: $primary-medium;
|
||||
max-width: calc(100% - 100px);
|
||||
}
|
||||
.composer-controls {
|
||||
margin-left: auto;
|
||||
margin-right: -5px;
|
||||
button {
|
||||
padding: 0 8px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.whisper,
|
||||
.display-edit-reason {
|
||||
font-style: italic;
|
||||
color: $primary-medium !important;
|
||||
}
|
||||
|
||||
#edit-reason {
|
||||
|
|
@ -99,14 +119,52 @@
|
|||
.user-selector,
|
||||
.title-and-category {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
width: 100%;
|
||||
align-items: center;
|
||||
margin-bottom: 10px;
|
||||
margin-bottom: 5px;
|
||||
position: relative;
|
||||
&.with-preview {
|
||||
width: 50%;
|
||||
}
|
||||
}
|
||||
|
||||
.title-input {
|
||||
position: relative;
|
||||
.popup-tip {margin-top: -30px;}
|
||||
display: flex;
|
||||
flex: 1 1 50%;
|
||||
|
||||
input {
|
||||
flex-grow: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.with-tags {
|
||||
.title-input {
|
||||
flex: 1 1 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.category-input {
|
||||
display: flex;
|
||||
flex: 1 0 35%;
|
||||
margin: 0 0 5px 10px;
|
||||
@media screen and (max-width: 955px) {
|
||||
flex: 1 0 100%;
|
||||
margin-left: 0;
|
||||
}
|
||||
.category-chooser {
|
||||
display: flex;
|
||||
flex: 1;
|
||||
width: auto;
|
||||
}
|
||||
}
|
||||
|
||||
.with-tags {
|
||||
.category-input {
|
||||
flex-basis: 25%;
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.add-warning {
|
||||
|
|
@ -114,14 +172,25 @@
|
|||
}
|
||||
|
||||
#reply-title {
|
||||
width: 400px;
|
||||
padding: 6px 10px;
|
||||
margin: 0 10px 0 0;
|
||||
margin: 0 0 5px 0;
|
||||
flex-basis: 50%;
|
||||
}
|
||||
|
||||
.tag-chooser {
|
||||
margin: 5px 0 0 0;
|
||||
flex-basis: 30%;
|
||||
flex: 1 1 25%;
|
||||
margin: 0 0 5px 10px;
|
||||
border: 1px solid $primary-medium;
|
||||
@media all and (max-width: 900px) {
|
||||
margin: 0;
|
||||
flex: 1 1 100%;
|
||||
}
|
||||
.select2-choices {
|
||||
border: none;
|
||||
}
|
||||
&.select2-dropdown-open, &.select2-container-active {
|
||||
border-color: $tertiary;
|
||||
}
|
||||
}
|
||||
|
||||
.wmd-controls {
|
||||
|
|
@ -133,14 +202,28 @@
|
|||
}
|
||||
|
||||
.d-editor-button-bar .btn {
|
||||
padding: 0 6px;
|
||||
padding: 3px 8px;
|
||||
@media all and (max-width: 800px) {
|
||||
padding: 5px;
|
||||
}
|
||||
}
|
||||
|
||||
.submit-panel {
|
||||
display: flex;
|
||||
flex-shrink: 0;
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.save-or-cancel {
|
||||
margin-top: 5px;
|
||||
flex-basis: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
button {
|
||||
flex: 0 0 auto;
|
||||
}
|
||||
.cancel {
|
||||
margin-left: 10px;
|
||||
}
|
||||
#draft-status,
|
||||
#file-uploading {
|
||||
margin-left: 25px;
|
||||
|
|
@ -162,22 +245,12 @@
|
|||
}
|
||||
}
|
||||
|
||||
.with-tags {
|
||||
.composer-bottom-right {
|
||||
flex-basis: 60%;
|
||||
margin-left: auto;
|
||||
}
|
||||
.save-or-cancel {
|
||||
order: 3;
|
||||
}
|
||||
}
|
||||
|
||||
.create {
|
||||
margin-right: 5px;
|
||||
}
|
||||
|
||||
#draft-status, #file-uploading {
|
||||
color: dark-light-choose($primary-medium, $secondary-medium);
|
||||
color: $primary-medium;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -212,7 +285,7 @@
|
|||
text-overflow: ellipsis;
|
||||
|
||||
span.username {
|
||||
color: darken($primary, 40%);
|
||||
color: $primary;
|
||||
}
|
||||
span.name {
|
||||
font-size: 11px;
|
||||
|
|
@ -260,8 +333,8 @@ div.ac-wrap {
|
|||
overflow: auto;
|
||||
max-height: 150px;
|
||||
background-color: $secondary;
|
||||
border: 1px solid $primary-low;
|
||||
padding: 5px 4px 1px 4px;
|
||||
border: 1px solid $primary-medium;
|
||||
padding: 5px 4px 1px 10px;
|
||||
div.item {
|
||||
float: left;
|
||||
margin-bottom: 4px;
|
||||
|
|
@ -294,7 +367,7 @@ div.ac-wrap {
|
|||
|
||||
.future-date-input {
|
||||
.examples {
|
||||
color: lighten($primary, 40%);
|
||||
color: $primary-medium;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -185,22 +185,21 @@ input {
|
|||
&[type="search"],
|
||||
&[type="tel"],
|
||||
&[type="color"] {
|
||||
@include appearance-none;
|
||||
display: inline-block;
|
||||
height: 18px;
|
||||
padding: 4px;
|
||||
padding: 4px 10px;
|
||||
margin-bottom: 9px;
|
||||
font-size: 0.929em;
|
||||
line-height: 18px;
|
||||
line-height: 1.25;
|
||||
color: $primary;
|
||||
background-color: $secondary;
|
||||
border: 1px solid $primary-low;
|
||||
border-radius: 3px;
|
||||
box-shadow: inset 0 1px 1px rgba(0,0,0, .3);
|
||||
|
||||
border: 1px solid $primary-medium;
|
||||
border-radius: 0;
|
||||
&:focus {
|
||||
border-color: $tertiary;
|
||||
box-shadow: $tertiary 0px 0px 6px 0px;
|
||||
outline: 0;
|
||||
box-shadow: inset 0 1px 1px rgba(0,0,0, .3), 0 0 8px $tertiary;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -208,14 +207,11 @@ input {
|
|||
textarea {
|
||||
height: auto;
|
||||
background-color: $secondary;
|
||||
border: 1px solid $primary-low;
|
||||
border-radius: 3px;
|
||||
box-shadow: inset 0 1px 1px rgba(0,0,0, .3);
|
||||
|
||||
border: 1px solid $primary-medium;
|
||||
&:focus {
|
||||
border-color: $tertiary;
|
||||
box-shadow: $tertiary 0px 0px 6px 0px;
|
||||
outline: 0;
|
||||
box-shadow: inset 0 1px 1px rgba(0,0,0, .3), 0 0 8px $tertiary;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -316,10 +312,6 @@ select {
|
|||
}
|
||||
}
|
||||
|
||||
.d-editor-input {
|
||||
resize: none;
|
||||
}
|
||||
|
||||
.avatar-wrapper {
|
||||
background-color: $secondary;
|
||||
display: inline-block;
|
||||
|
|
|
|||
|
|
@ -202,7 +202,7 @@ header .discourse-tag {color: $tag-color }
|
|||
width: 100%;
|
||||
margin: 5px 0;
|
||||
ul.select2-choices {
|
||||
max-height: 40px;
|
||||
max-height: 30px;
|
||||
overflow-y: auto;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,6 +1,7 @@
|
|||
.d-editor-container {
|
||||
display: flex;
|
||||
flex-grow: 1;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.d-editor-overlay {
|
||||
|
|
@ -23,6 +24,9 @@
|
|||
|
||||
.d-editor .d-editor-modal {
|
||||
min-width: 400px;
|
||||
@media screen and (max-width: 424px) {
|
||||
min-width: 300px;
|
||||
}
|
||||
position: absolute;
|
||||
background-color: $secondary;
|
||||
border: 1px solid $primary-low;
|
||||
|
|
@ -30,7 +34,7 @@
|
|||
top: 25px;
|
||||
|
||||
input {
|
||||
width: 98%;
|
||||
width: 95%;
|
||||
}
|
||||
h3 {
|
||||
margin-bottom: 0.5em;
|
||||
|
|
@ -47,11 +51,20 @@
|
|||
flex-direction: column;
|
||||
background-color: $secondary;
|
||||
position: relative;
|
||||
border: 1px solid $primary-medium;
|
||||
|
||||
textarea {
|
||||
border-top: 1px solid $primary-low;
|
||||
&:focus {
|
||||
border-top: 1px solid $primary-low;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.d-editor-preview-wrapper {
|
||||
margin-left: 5px;
|
||||
max-width: 50%;
|
||||
max-width: 49%;
|
||||
margin-left: 1%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
background: $secondary;
|
||||
|
|
@ -60,12 +73,13 @@
|
|||
.d-editor-button-bar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
border-bottom: 2px solid $primary-low;
|
||||
border-bottom: none;
|
||||
min-height: 30px;
|
||||
padding-left: 3px;
|
||||
|
||||
button {
|
||||
background-color: transparent;
|
||||
color: $primary-medium;
|
||||
color: $primary-high;
|
||||
}
|
||||
|
||||
.btn:not(.no-text) {
|
||||
|
|
@ -91,7 +105,6 @@
|
|||
|
||||
.d-editor-input,
|
||||
.d-editor-preview {
|
||||
box-shadow: none;
|
||||
box-sizing: border-box;
|
||||
height: 100%;
|
||||
margin: 0;
|
||||
|
|
@ -99,6 +112,8 @@
|
|||
width: 100%;
|
||||
word-wrap: break-word;
|
||||
flex-grow: 1;
|
||||
-webkit-appearance: none;
|
||||
border-radius: 0;
|
||||
&:focus {
|
||||
box-shadow: none;
|
||||
border: 0;
|
||||
|
|
@ -113,16 +128,15 @@
|
|||
|
||||
.d-editor-input {
|
||||
border: 0;
|
||||
padding: 7px;
|
||||
padding: 10px;
|
||||
overflow-x: hidden;
|
||||
resize: none;
|
||||
}
|
||||
|
||||
.d-editor-preview {
|
||||
border: 1px dashed $primary-low;
|
||||
overflow: auto;
|
||||
cursor: default;
|
||||
background-color: $secondary;
|
||||
padding: 7px;
|
||||
padding: 0 10px;
|
||||
}
|
||||
|
||||
.composing-whisper .d-editor-preview {
|
||||
|
|
|
|||
|
|
@ -110,3 +110,10 @@
|
|||
-webkit-transform: $transforms;
|
||||
transform: $transforms;
|
||||
}
|
||||
|
||||
|
||||
@mixin appearance-none() { // resets default browser styles
|
||||
-webkit-appearance: none;
|
||||
-moz-appearance: none;
|
||||
appearance: none;
|
||||
}
|
||||
|
|
@ -1,6 +1,5 @@
|
|||
.select-box-kit, .select-kit {
|
||||
&.combo-box {
|
||||
border-radius: 3px;
|
||||
|
||||
.select-box-kit-body, .select-kit-body {
|
||||
width: 100%;
|
||||
|
|
@ -14,7 +13,7 @@
|
|||
|
||||
.select-box-kit-filter, .select-kit-filter {
|
||||
line-height: 18px;
|
||||
padding: 5px 10px;
|
||||
padding: 6px 10px;
|
||||
border-top: 1px solid dark-light-diff($primary, $secondary, 90%, -60%);
|
||||
border-bottom: 1px solid dark-light-diff($primary, $secondary, 90%, -60%);
|
||||
|
||||
|
|
@ -25,16 +24,14 @@
|
|||
|
||||
.select-box-kit-header, .select-kit-header {
|
||||
background: $secondary;
|
||||
border: 1px solid dark-light-diff($primary, $secondary, 90%, -60%);
|
||||
border-radius: 3px;
|
||||
padding: 5px 10px;
|
||||
border: 1px solid $primary-medium;
|
||||
padding: 6px 10px;
|
||||
font-weight: 500;
|
||||
font-size: 1em;
|
||||
font-size: 0.929em;
|
||||
line-height: 18px;
|
||||
|
||||
&.is-focused {
|
||||
border: 1px solid $tertiary;
|
||||
border-radius: 3px;
|
||||
-webkit-box-shadow: $tertiary 0px 0px 6px 0px;
|
||||
box-shadow: $tertiary 0px 0px 6px 0px;
|
||||
}
|
||||
|
|
@ -59,13 +56,11 @@
|
|||
.select-kit-wrapper {
|
||||
display: block;
|
||||
border: 1px solid $tertiary;
|
||||
border-radius: 3px;
|
||||
-webkit-box-shadow: $tertiary 0px 0px 6px 0px;
|
||||
box-shadow: $tertiary 0px 0px 6px 0px;
|
||||
}
|
||||
|
||||
.select-kit-header {
|
||||
border-radius: 3px 3px 0 0;
|
||||
border-color: transparent;
|
||||
-webkit-box-shadow: none;
|
||||
box-shadow: none;
|
||||
|
|
|
|||
|
|
@ -36,7 +36,6 @@
|
|||
}
|
||||
|
||||
.select2-container {
|
||||
border-radius: 3px;
|
||||
border: 1px solid $primary-low;
|
||||
min-width: 200px;
|
||||
|
||||
|
|
|
|||
|
|
@ -71,7 +71,6 @@
|
|||
}
|
||||
|
||||
.select-box-kit-header, .select-kit-header {
|
||||
border: 1px solid transparent;
|
||||
box-sizing: border-box;
|
||||
overflow: hidden;
|
||||
-webkit-transition: all .25s;
|
||||
|
|
@ -270,6 +269,5 @@
|
|||
-webkit-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
pointer-events: none;
|
||||
border: 1px solid transparent;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,3 +1,67 @@
|
|||
#reply-control {
|
||||
.reply-area {
|
||||
max-width: 1500px;
|
||||
margin: 0 auto;
|
||||
padding: 5px 15px;
|
||||
box-sizing: border-box;
|
||||
height: calc(100% - 11px);
|
||||
width: 100%;
|
||||
.submit-panel {
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.category-input {
|
||||
margin-left: 10px;
|
||||
}
|
||||
|
||||
.edit-title {
|
||||
.d-editor-preview {
|
||||
margin-top: -43px;
|
||||
}
|
||||
&:not(.private-message) {
|
||||
.d-editor-preview {
|
||||
@media screen and (max-width: 955px) {
|
||||
margin-top: -79px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
.with-tags {
|
||||
.d-editor-preview {
|
||||
margin-top: -79px;
|
||||
@media screen and (max-width: 900px) {
|
||||
margin-top: -116px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.closed {
|
||||
.grippie {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.open {
|
||||
.grippie {
|
||||
cursor: row-resize;
|
||||
padding: 4px 0px;
|
||||
background: $tertiary;
|
||||
&:before {
|
||||
content: '';
|
||||
display: block;
|
||||
width: 27px;
|
||||
margin: auto;
|
||||
border-top: 3px double $secondary;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.composer-popup-container {
|
||||
max-width: 1500px;
|
||||
margin-left: auto;
|
||||
|
|
@ -6,15 +70,11 @@
|
|||
|
||||
.composer-popup {
|
||||
position: absolute;
|
||||
width: calc(50% - 55px);
|
||||
width: calc(50% - 45px);
|
||||
max-width: 724px;
|
||||
top: 16px;
|
||||
bottom: 16px;
|
||||
left: 50%;
|
||||
// The composer goes off-center at 1550px
|
||||
@media (min-width: 1550px) {
|
||||
left: calc(50%);
|
||||
}
|
||||
top: 20px;
|
||||
bottom: 10px;
|
||||
left: 51%;
|
||||
overflow-y: auto;
|
||||
z-index: 110;
|
||||
padding: 10px 10px 35px 10px;
|
||||
|
|
@ -68,8 +128,10 @@
|
|||
}
|
||||
}
|
||||
|
||||
.d-editor-container {
|
||||
max-width: 100%;
|
||||
.composer-controls {
|
||||
.d-chevron-down {
|
||||
vertical-align: text-top;
|
||||
}
|
||||
}
|
||||
|
||||
.custom-body {
|
||||
|
|
@ -110,21 +172,11 @@
|
|||
width: calc(50% - 65px);
|
||||
}
|
||||
|
||||
#reply-control {
|
||||
.reply-area {
|
||||
max-width: 1500px;
|
||||
margin: 0 auto;
|
||||
padding: 0 10px 10px 10px;
|
||||
box-sizing: border-box;
|
||||
height: calc(100% - 11px);
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
.submit-panel {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
flex-shrink: 0;
|
||||
.composer-bottom-right {
|
||||
a {
|
||||
color: $primary-medium;
|
||||
&:hover {
|
||||
color: $tertiary;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -17,19 +17,6 @@ header {
|
|||
height: 100%;
|
||||
}
|
||||
|
||||
.grippie {
|
||||
cursor: row-resize;
|
||||
padding: 4px 0px;
|
||||
|
||||
&:before {
|
||||
content: '';
|
||||
display: block;
|
||||
width: 27px;
|
||||
margin: auto;
|
||||
border-top: 3px double dark-light-choose($primary-low-mid, $secondary-medium);
|
||||
}
|
||||
}
|
||||
|
||||
.topic-statuses {
|
||||
float: left;
|
||||
padding: 0;
|
||||
|
|
@ -157,7 +144,6 @@ input {
|
|||
position: relative;
|
||||
margin-bottom: 0;
|
||||
vertical-align: middle;
|
||||
border-radius: 0 3px 3px 0;
|
||||
|
||||
&:focus {
|
||||
z-index: 2;
|
||||
|
|
|
|||
|
|
@ -212,11 +212,11 @@ and (min-width: 400px) {
|
|||
}
|
||||
|
||||
#topic-progress-wrapper {
|
||||
right: 160px;
|
||||
right: 19vw;
|
||||
}
|
||||
|
||||
#topic-progress-wrapper.docked {
|
||||
right: 152px;
|
||||
right: 19vw;
|
||||
}
|
||||
|
||||
#topic-footer-main-buttons {
|
||||
|
|
|
|||
|
|
@ -9,9 +9,10 @@
|
|||
#reply-control {
|
||||
z-index: 1002; //d-header is 1001
|
||||
.reply-area {
|
||||
padding: 0 10px;
|
||||
@media screen and (max-width: 374px) {
|
||||
padding: 0 5px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
|
|
@ -23,13 +24,14 @@
|
|||
}
|
||||
|
||||
.reply-to {
|
||||
margin: 5px;
|
||||
max-width: calc(100% - 60px);
|
||||
margin: 5px 0;
|
||||
}
|
||||
|
||||
.toggle-toolbar,
|
||||
.toggler {
|
||||
top: 2px;
|
||||
margin-left: -5px;
|
||||
.d-icon-chevron-down {
|
||||
vertical-align: text-top;
|
||||
}
|
||||
}
|
||||
|
||||
&.draft {
|
||||
|
|
@ -37,10 +39,12 @@
|
|||
.toggler {
|
||||
top: 8px;
|
||||
}
|
||||
.draft-text {
|
||||
width: calc(100% - 40px);
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.title-input {
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
#reply-title {
|
||||
|
|
@ -56,14 +60,17 @@
|
|||
|
||||
.submit-panel {
|
||||
margin-bottom: 5px;
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
flex-shrink: 0;
|
||||
.save-or-cancel {
|
||||
flex-basis: 69%;
|
||||
flex: 1 1 auto;
|
||||
#draft-status,
|
||||
#file-uploading {
|
||||
margin-left: 15px;
|
||||
}
|
||||
}
|
||||
.composer-bottom-right {
|
||||
flex-basis: 30%;
|
||||
margin-left: auto;
|
||||
flex: 1 1 auto;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -126,6 +133,7 @@
|
|||
.user-selector {
|
||||
flex-direction: column;
|
||||
margin: 0;
|
||||
min-height: 75px;
|
||||
}
|
||||
|
||||
.title-input,
|
||||
|
|
@ -138,10 +146,5 @@
|
|||
.add-warning {
|
||||
margin: 5px 0 5px 5px;
|
||||
}
|
||||
|
||||
#draft-status {
|
||||
color: $primary-medium;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -129,7 +129,6 @@ Version: @@ver@@ Timestamp: @@timestamp@@
|
|||
border: 1px solid #aaa;
|
||||
border-top: 0;
|
||||
|
||||
border-radius: 0 0 4px 4px;
|
||||
|
||||
-webkit-box-shadow: 0 4px 5px rgba(0, 0, 0, .15);
|
||||
box-shadow: 0 4px 5px rgba(0, 0, 0, .15);
|
||||
|
|
@ -140,7 +139,6 @@ Version: @@ver@@ Timestamp: @@timestamp@@
|
|||
border-top: 1px solid #aaa;
|
||||
border-bottom: 0;
|
||||
|
||||
border-radius: 4px 4px 0 0;
|
||||
|
||||
-webkit-box-shadow: 0 -4px 5px rgba(0, 0, 0, .15);
|
||||
box-shadow: 0 -4px 5px rgba(0, 0, 0, .15);
|
||||
|
|
@ -446,11 +444,11 @@ html[dir="rtl"] .select2-container-multi .select2-choices li
|
|||
}
|
||||
|
||||
.select2-container-multi .select2-choices .select2-search-field input {
|
||||
padding: 5px;
|
||||
padding: 5px 10px;
|
||||
margin: 1px 0;
|
||||
|
||||
font-family: sans-serif;
|
||||
font-size: 100%;
|
||||
font-size: 0.929em;
|
||||
color: #666;
|
||||
outline: 0;
|
||||
border: 0;
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@
|
|||
@import "vendor/sweetalert";
|
||||
@import "common/foundation/colors";
|
||||
@import "common/foundation/variables";
|
||||
@import "common/select-kit/*";
|
||||
@import "common/select-box-kit/*";
|
||||
|
||||
body.wizard {
|
||||
background-color: #fff;
|
||||
|
|
@ -401,7 +401,6 @@ body.wizard {
|
|||
textarea {
|
||||
padding: 3px;
|
||||
border: 4px solid red;
|
||||
border-radius: 3px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -419,7 +418,6 @@ body.wizard {
|
|||
input {
|
||||
padding: 3px;
|
||||
border: 4px solid red;
|
||||
border-radius: 3px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,13 +1,10 @@
|
|||
.presence-users{
|
||||
|
||||
background-color: $primary-low;
|
||||
|
||||
background-color: $secondary;
|
||||
color: $primary-medium;
|
||||
padding: 0px 5px;
|
||||
position: absolute;
|
||||
top: 8px;
|
||||
right: 30px;
|
||||
|
||||
top: 18px;
|
||||
right: 35px;
|
||||
|
||||
.wave {
|
||||
|
||||
|
|
@ -37,8 +34,8 @@
|
|||
}
|
||||
|
||||
.mobile-view .presence-users{
|
||||
top: 5px;
|
||||
right: 60px;
|
||||
top: 3px;
|
||||
right: 54px;
|
||||
.description{
|
||||
display:none;
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue