mirror of
https://github.com/discourse/discourse.git
synced 2024-11-24 20:01:11 +08:00
e113eff663
Currently, if you set an integer site setting in the admin interface and include thousands separators, you will silently configure the wrong value. This PR replaces TextField inputs for integer site settings with NumberField. It also cleans the numeric input of any non-digits in the backend in case any separators make it through.
141 lines
3.2 KiB
SCSS
141 lines
3.2 KiB
SCSS
// styles for admin/settings
|
|
|
|
.settings {
|
|
.setting {
|
|
padding-bottom: 20px;
|
|
.setting-label {
|
|
float: left;
|
|
width: 17.6576%;
|
|
margin-right: 12px;
|
|
@media (max-width: $mobile-breakpoint) {
|
|
float: none;
|
|
margin-right: 0;
|
|
width: 100%;
|
|
h3 {
|
|
margin-bottom: 6px;
|
|
}
|
|
}
|
|
.history-icon {
|
|
opacity: 0;
|
|
transition: opacity 0.3s;
|
|
color: var(--primary-medium);
|
|
}
|
|
&:hover .history-icon {
|
|
opacity: 1;
|
|
}
|
|
}
|
|
.setting-value {
|
|
float: left;
|
|
width: 53%;
|
|
padding-right: 20px;
|
|
input[type="checkbox"],
|
|
input[type="radio"] {
|
|
flex: 0 0 auto;
|
|
}
|
|
.category-selector {
|
|
width: 95%;
|
|
}
|
|
@media (max-width: $mobile-breakpoint) {
|
|
width: 100%;
|
|
padding-right: 0;
|
|
}
|
|
.select-kit {
|
|
width: 100% !important; // Needs !important to override hard-coded value
|
|
@media (max-width: $mobile-breakpoint) {
|
|
width: 100% !important; // !important overrides hard-coded mobile width of 68px
|
|
}
|
|
}
|
|
.image-uploader {
|
|
display: flex;
|
|
}
|
|
.uploaded-image-preview {
|
|
background-size: contain;
|
|
background-repeat: no-repeat;
|
|
background-color: var(--primary-medium);
|
|
}
|
|
}
|
|
.setting-controls {
|
|
float: left;
|
|
}
|
|
.input-setting-string,
|
|
.input-setting-integer,
|
|
.input-setting-textarea {
|
|
width: 100%;
|
|
@media (max-width: $mobile-breakpoint) {
|
|
width: 100%;
|
|
}
|
|
}
|
|
.input-setting-textarea {
|
|
height: 150px;
|
|
}
|
|
.input-setting-list {
|
|
@media (max-width: $mobile-breakpoint) {
|
|
width: 100%;
|
|
}
|
|
padding: 1px;
|
|
background-color: var(--secondary);
|
|
border: 1px solid var(--primary-low);
|
|
border-radius: 3px;
|
|
transition: border linear 0.2s, box-shadow linear 0.2s;
|
|
li.sortable-placeholder {
|
|
@include unselectable;
|
|
padding: 3px 5px 3px 18px;
|
|
margin: 3px 0 3px 5px;
|
|
position: relative;
|
|
line-height: var(--line-height-small);
|
|
cursor: default;
|
|
border: 1px dashed var(--primary-low-mid);
|
|
border-radius: 3px;
|
|
background-clip: padding-box;
|
|
background-color: transparent;
|
|
width: 3em;
|
|
height: 1em;
|
|
}
|
|
}
|
|
.desc,
|
|
.validation-error {
|
|
padding-top: 3px;
|
|
font-size: var(--font-down-1);
|
|
line-height: var(--line-height-large);
|
|
}
|
|
.validation-error {
|
|
color: var(--danger);
|
|
}
|
|
.desc {
|
|
color: var(--primary-medium);
|
|
}
|
|
h3 {
|
|
font-size: var(--font-0);
|
|
font-weight: normal;
|
|
}
|
|
}
|
|
.setting.overridden {
|
|
.values input {
|
|
background-color: var(--highlight-bg);
|
|
}
|
|
h3 {
|
|
position: relative;
|
|
&:before {
|
|
content: "";
|
|
position: absolute;
|
|
top: 0.5rem;
|
|
left: -1rem;
|
|
width: 0.5rem;
|
|
height: 0.5rem;
|
|
border-radius: 100%;
|
|
background-color: var(--quaternary-low);
|
|
}
|
|
}
|
|
}
|
|
.setting.overridden.string {
|
|
input[type="text"],
|
|
input[type="password"],
|
|
textarea {
|
|
background-color: var(--highlight-bg);
|
|
}
|
|
}
|
|
.warning {
|
|
color: var(--danger);
|
|
}
|
|
}
|