DEV: Minor fixes to json schema editor styling (#16634)

This commit is contained in:
Penar Musaraj 2022-05-04 21:52:58 -04:00 committed by GitHub
parent fb1a3a1dbb
commit 749e496a2c
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 98 additions and 153 deletions

View File

@ -35,6 +35,7 @@ export default Component.extend({
disable_edit_json: true,
disable_properties: true,
disable_collapse: true,
remove_button_labels: true,
show_errors: "never",
startval: this.model.value ? JSON.parse(this.model.value) : null,
});

View File

@ -1003,6 +1003,7 @@ a.inline-editable-field {
@import "common/admin/suspend";
@import "common/admin/badges";
@import "common/admin/emails";
@import "common/admin/json_schema_editor";
@import "common/admin/staff_logs";
@import "common/admin/customize";
@import "common/admin/customize-install-theme";

View File

@ -0,0 +1,91 @@
.json-schema-editor-modal {
h3.card-title {
margin-top: 0;
label {
display: none;
}
}
.card .je-object__container {
border-bottom: 1px dashed var(--primary-low);
padding-bottom: 1em;
margin-bottom: 1em;
position: relative;
.card-title label {
display: inline-block;
font-size: var(--font-down-1);
color: var(--primary-medium);
}
.form-group {
label {
display: inline-block;
width: 35%;
}
.form-control {
width: 65%;
}
}
.btn-group:last-child {
position: absolute;
right: 0px;
top: 0px;
.btn {
font-size: var(--font-down-1);
}
}
}
.btn-group {
margin-top: 0;
display: flex;
align-items: stretch;
gap: 0.25em;
.btn {
.d-icon {
margin-right: 0;
}
}
}
.card-body > .btn-group {
// !important needed to override inline style :-(
display: block !important;
text-align: right;
}
.table {
td {
vertical-align: top;
padding: 1em 0;
}
td.compact {
.invalid-feedback {
margin: 0;
font-size: var(--font-down-1);
color: var(--danger);
}
}
input[type="text"] {
margin-bottom: 0;
width: 95%;
&.is-invalid {
border-color: var(--danger);
outline: 1px solid var(--danger);
}
}
}
.desktop-view & #json-editor-holder {
min-width: 600px;
}
}

View File

@ -707,153 +707,6 @@
}
}
.json-schema-editor-modal {
h3.card-title {
margin-top: 0;
label {
display: none;
}
}
.card .je-object__container {
border-bottom: 1px dashed var(--primary-low);
padding-bottom: 1em;
margin-bottom: 1em;
position: relative;
.card-title label {
display: inline-block;
font-size: $font-down-1;
color: var(--primary-medium);
}
.form-group {
label {
display: inline-block;
width: 33%;
}
.form-control {
width: 66%;
}
}
.btn-group:last-child {
position: absolute;
right: 0px;
top: 0px;
.btn {
font-size: $font-down-2;
}
}
}
.btn-group {
margin-top: 0;
display: flex;
align-items: stretch;
gap: 0.5em;
.btn {
padding-block: 0.65em;
.d-icon {
margin-right: 0;
}
}
}
.json-editor-btn-delete {
@extend .btn-danger !optional;
@extend .no-text !optional;
.d-icon + span {
display: none;
}
}
.card-body > .btn-group {
// !important needed to override inline style :-(
display: block !important;
text-align: right;
}
}
.json-schema-editor-modal {
h3.card-title {
margin-top: 0;
label {
display: none;
}
}
.card .je-object__container {
border-bottom: 1px dashed var(--primary-low);
padding-bottom: 1em;
margin-bottom: 1em;
position: relative;
.card-title label {
display: inline-block;
font-size: $font-down-1;
color: var(--primary-medium);
}
.form-group {
label {
display: inline-block;
width: 33%;
}
.form-control {
width: 66%;
}
}
.btn-group:last-child {
position: absolute;
right: 0px;
top: 0px;
.btn {
font-size: $font-down-2;
}
}
}
.btn-group {
margin-top: 0;
}
.json-editor-btn-delete {
@extend .btn-danger !optional;
@extend .no-text !optional;
.d-icon + span {
display: none;
}
}
.card-body > .btn-group {
// !important needed to override inline style :-(
display: block !important;
text-align: right;
}
.table {
td {
vertical-align: top;
padding: 1em 0;
}
td.compact {
.invalid-feedback {
margin: 0;
font-size: $font-down-1;
color: var(--danger);
}
}
input[type="text"] {
margin-bottom: 0;
width: 95%;
&.is-invalid {
border-color: var(--danger);
outline: 1px solid var(--danger);
}
}
}
}
.group-add-members-modal {
.input-group {
margin-bottom: 0.5em;

View File

@ -102,12 +102,6 @@
}
}
.json-schema-editor-modal {
#json-editor-holder {
min-width: 500px;
}
}
.create-invite-modal,
.create-invite-bulk-modal,
.share-topic-modal {
@ -130,3 +124,8 @@
max-width: 100vw; // prevent overflow if user font-size is enourmous
}
}
.json-editor-btn-delete {
@extend .btn-danger !optional;
@extend .no-text !optional;
}