discourse/app/assets/stylesheets/common/admin/admin_base.scss
riking 1833b43ae2 FEATURE: Badge query validation, preview results, and EXPLAIN
Upon saving a badge or requesting a badge result preview,
BadgeGranter.contract_checks! will examine the provided badge SQL for
some contractual obligations - namely, the returned columns and use of
trigger parameters.

Saving the badge is wrapped in a transaction to make this easier, by
raising ActiveRecord::Rollback on a detected violation.

On the client, a modal view is added for the badge query sample run
results, named admin-badge-preview.
The preview action is moved up to the route.
The save action, on failure, triggers a 'saveError' action (also in the
route).

The preview action gains a new parameter, 'explain', which will give the
output of an EXPLAIN query for the badge sql, which can be used by forum
admins to estimate the cost of their badge queries.
The preview link is replaced by two links, one which omits (false) and
includes (true) the EXPLAIN query.

The Badge.save() method is amended to propogate errors.

Badge::Trigger gets some utility methods for use in the
BadgeGranter.contract_checks! method.

Additionally, extra checks outside of BadgeGranter.contract_checks! are
added in the preview() method, to cover cases of null granted_at
columns.

An uninitialized variable path is removed in the backfill() method.

TODO - it would be nice to be able to get the actual names of all
columns the provided query returns, so we could give more errors
2014-08-31 11:25:44 -07:00

1300 lines
21 KiB
SCSS

// these are the styles associated with the Discourse admin section
@import "common/foundation/variables";
@import "common/foundation/mixins";
@import "common/foundation/helpers";
.admin-contents table {
width: 100%;
tr {text-align: left;}
td, th {padding: 8px;}
th {border-top: 1px solid scale-color-diff();}
td {border-bottom: 1px solid scale-color-diff(); border-top: 1px solid scale-color-diff();}
tr:hover { background-color: darken($secondary, 2.5%); }
tr.selected { background-color: lighten($primary, 50%); }
.filters input { margin-bottom: 0; }
}
td.flaggers td {
border-bottom: none;
border-top: none;
}
.content-list li a span.count {
font-size: 12px;
float: right;
margin-right: 10px;
background-color: scale-color-diff();
padding: 2px 5px;
border-radius: 5px;
color: $primary;
}
.admin-content {
margin-bottom: 50px;
.admin-contents {
padding: 8px;
.ace-wrapper {
height: 400px;
}
}
table.report {
margin-top: 20px;
tr {
th:nth-of-type(1) {
width: 20%;
}
}
.bar-container {
float: left;
width: 300px;
margin-right: 15px;
margin-bottom: 5px;
display: inline-block;
.bar {
margin-top: 5px;
background-color: $tertiary;
display: inline-block;
text-align: right;
padding-right: 8px;
color: $secondary;
}
}
}
}
.admin-loading {
width: 100px;
margin: 0 auto 30px auto;
background-color: $primary;
@include border-radius-all(10px);
padding: 10px 10px 10px 30px;
font-size: 15px;
line-height: 23px;
text-align: center;
color: $secondary;
background: {
image: image-url("spinner_96_w.gif");
repeat: no-repeat;
position: 10px 8px;
size: 25px;
};
}
.ip-lookup {
position: relative;
display: inline-block;
.location-box {
position: absolute;
width: 460px;
right: 0px;
z-index: 990;
box-shadow: 0 2px 6px rgba(0,0,0, .8);
margin-top: -2px;
background-color: $secondary;
padding: 12px 12px 5px;
.close {
float: right;
}
}
}
.admin-container {
margin-top: 20px;
}
.admin-controls {
background-color: dark-light-diff($primary, $secondary, 90%, -20%);
padding: 10px 10px 3px 0;
height: 35px;
.nav.nav-pills {
li.active {
a {
border-color: scale-color-diff();
background-color: lighten($primary, 40%);
&:hover {
background-color: lighten($primary, 40%);
}
}
}
}
h1 {
font-size: 20px;
line-height: 25px;
color: $primary;
}
.controls {
margin-left: 10px;
}
button {
margin-right: 5px;
}
input[type=text] {
display: inline-block;
float: left;
}
.result-message {
display: inline-block;
padding-left: 10px;
padding-top: 5px;
}
.username {
input[type=text] {
width: 240px;
}
}
.search {
float: right;
margin-left: 10px;
label {
margin-top: 5px;
}
}
.toggle {
margin-top: 8px;
float: right;
span {
font-weight: bold;
}
}
label {
display: inline-block;
margin-right: 5px;
}
}
.site-settings-nav {
width: 18.018%;
margin-top: 30px;
.nav-stacked {
border-right: none;
}
li a.active {
color: $secondary;
background-color: $quaternary;
}
}
.site-settings-detail {
width: 76.5765%;
min-height: 800px;
margin-left: 0;
border-left: solid 1px scale-color-diff();
padding: 30px 0 30px 30px;
}
.settings {
.setting {
padding-bottom: 20px;
.setting-label {
float: left;
width: 17.6576%;
margin-right: 12px;
}
.setting-value {
float: left;
width: 53%;
.select2-container {
width: 100%;
}
.select2-container-multi .select2-choices {
border: none;
}
}
.setting-controls {
float: left;
}
.input-setting-string {
width: 404px;
@include medium-width { width: 314px; }
@include small-width { width: 284px; }
}
.input-setting-list {
width: 408px;
padding: 1px;
background-color: $secondary;
border: 1px solid scale-color-diff();
border-radius: 3px;
box-shadow: inset 0 1px 1px rgba(51, 51, 51, 0.3);
-webkit-transition: border linear 0.2s, box-shadow linear 0.2s;
transition: border linear 0.2s, box-shadow linear 0.2s;
li.select2-search-choice {
cursor: pointer;
.select2-search-choice-close {
content: "x"
}
}
li.sortable-placeholder {
padding: 3px 5px 3px 18px;
margin: 3px 0px 3px 5px;
position: relative;
line-height: 13px;
cursor: default;
border: 1px dashed #AAA;
border-radius: 3px;
background-clip: padding-box;
-moz-user-select: none;
background-color: none;
width: 3em;
height: 1em;
}
}
.desc, .validation-error {
padding-top: 3px;
font-size: 80%;
line-height: 1.4em;
}
.validation-error {
color: $danger;
}
.desc {
color: scale-color($primary, $lightness: 50%);
}
h3 {
font-size: 13px;
font-weight: normal;
}
}
.setting.overridden {
input[type=text] {
background-color: dark-light-diff($highlight, $secondary, 50%, -10%);
}
h3 {
color: scale-color($highlight, $lightness: -50%);
}
}
}
section.details {
h1 {
font-size: 18px;
color: $primary;
padding: 5px 10px;
margin: 30px 0 5px 0;
border-bottom: 5px solid scale-color-diff();
}
}
#selected-controls {
background-color: scale-color($tertiary, $lightness: 75%);
padding: 8px;
min-height: 27px;
position: fixed;
bottom: 0;
width: 1075px;
}
.user-controls {
padding: 5px;
clear: both;
text-align: right;
}
.display-row {
line-height: 30px;
padding: 5px;
&:nth-of-type(1) {
border-top: 0;
}
&.highlight-danger {
background-color: scale-color($danger, $lightness: 50%);
}
border-top: 1px solid scale-color-diff();
&:before, &:after {
display: table;
content: "";
}
&:after {
clear: both;
}
.field {
font-weight: bold;
width: 17.65765%;
float: left;
margin-left: 12px;
}
.value {
width: 250px;
float: left;
margin-left: 12px;
}
.long-value {
width: 800px;
float: left;
margin-left: 12px;
font-size: 13px;
button {
margin-left: 10px;
}
}
.controls {
width: 480px;
float: left;
margin-left: 12px;
.btn {
margin-right: 5px;
}
}
}
// Badges area
.badges {
.content-list ul {
margin-bottom: 10px;
.list-badge {
float: right;
font-size: 11px;
font-weight: normal;
padding: 0 6px;
color: $secondary;
background-color: scale-color($tertiary, $lightness: 50%);
border-radius: 3px;
}
}
.current-badge {
margin: 20px;
}
.form-horizontal {
label {
font-weight: bold;
}
& > div {
margin-top: 10px;
}
.delete-link {
margin-left: 15px;
margin-top: 5px;
}
input, textarea, select {
width: 350px;
}
input[type="checkbox"] {
width: 20px;
}
textarea {
height: 200px;
}
}
.current-badge-actions {
margin: 10px;
padding: 10px;
border-top: 1px solid scale-color($primary, $lightness: 80%);
}
.buttons {
float: left;
width: 200px;
.saving {
padding: 5px 0 0 0;
margin-left: 10px;
width: 80px;
color: $primary;
}
}
}
.badge-query-preview {
.grant-count, .sample, .error-header {
margin-left: 10px;
}
.badge-query-plan, .badge-errors {
padding: 4px;
background-color: scale-color-diff();
}
.badge-query-plan {
font-size: 80%;
}
.badge-errors {
font-family: monospace;
}
.count-warning {
background-color: dark-light-diff(rgba($danger,.7), $secondary, 50%, -60%);
margin: 0 0 7px 0;
padding: 10px 20px;
p {
margin: 0;
}
.heading {
color: $danger;
font-weight: bold;
}
}
}
// Customise area
.customize {
.nav.nav-pills {
margin-left: 10px;
}
.content-list, .current-style {
float: left;
}
.content-list ul {
margin-bottom: 10px;
}
.current-style {
.delete-link {
margin-left: 15px;
margin-top: 5px;
}
.preview-link {
margin-left: 15px;
}
padding-left: 10px;
width: 65%;
.style-name {
width: 54.0540%;
height: 25px;
font-size: 20px;
}
.ace-wrapper {
position: relative;
height: 400px;
width: 100%;
}
.ace_editor {
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
}
.status-actions {
float: right;
margin-top: 7px;
span {
margin-right: 10px;
}
}
.buttons {
float: left;
width: 200px;
.saving {
padding: 5px 0 0 0;
margin-left: 10px;
width: 80px;
color: $primary;
}
}
}
.color-scheme {
.controls {
span, button, a {
margin-right: 10px;
}
}
}
.colors {
thead th { border: none; }
td.hex { width: 100px; }
td.actions { width: 200px; }
.hex-input { width: 80px; margin-bottom: 0; }
.hex { text-align: center; }
.description { color: scale-color($primary, $lightness: 50%); }
.invalid .hex input {
background-color: white;
color: black;
border-color: $danger;
}
}
}
.admin-flags {
.hidden-post td.excerpt, .hidden-post td.user { opacity: 0.5; }
.deleted td.excerpt, .deleted td.user { background-color: scale-color($danger, $lightness: 70%); }
.message { background-color: scale-color($highlight, $lightness: 70%); }
.message:hover { background-color: scale-color($highlight, $lightness: 30%); }
td { vertical-align: top; }
th { text-align: left; }
.user {
width: 20px;
padding: 8px 0 0 0;
text-align: center;
}
.excerpt {
max-width: 700px;
width: 700px;
padding: 8px;
word-wrap: break-word;
.fa { display: inline-block; }
h3 {
max-height: 1.2em;
overflow: hidden;
}
}
.flaggers {
font-size: 11px;
padding: 8px 0 0 5px;
.avatar {
width: 25px;
}
table {
max-width: 145px;
}
tr {
height: 44px;
}
td {
vertical-align: middle;
padding: 3px;
line-height: 1.4;
}
}
.action {
button { margin: 4px; }
text-align: right;
padding-bottom: 20px;
}
td p {
font-size: 13px;
margin: 0 0 5px 0;
}
}
/* Dashboard */
.dashboard-left {
float: left;
width: 60%;
}
.dashboard-right {
float: right;
margin-top: 10px;
width: 40%;
.dashboard-stats {
width: 100%;
margin-left: 0;
}
}
.version-check {
.version-number {
font-size: 18px;
font-weight: bold;
text-align: center;
}
.face {
width: 20px;
}
.version-notes .fa {
vertical-align: bottom;
}
&.critical .version-notes .normal-note {
display: none;
}
&.normal .version-notes .critical-note {
display: none;
}
.fa {
font-size: 26px;
}
.up-to-date {
color: $success;
}
.updates-available {
color: $danger;
}
.critical-updates-available {
color: $danger;
}
}
.update-nag {
i.fa {
font-size: 20px;
}
}
table.api-keys {
margin-top: 10px;
width: 100%;
th {
text-align: left;
padding: 5px;
}
td {
padding: 5px;
}
td.key {
font-size: 12px;
}
}
.dashboard-stats {
margin-bottom: 30px;
margin-right: 40px;
h4 {
font-weight: normal;
margin-bottom: 8px;
}
table {
width: 100%;
.title {
i.fa {
color: $primary;
}
}
th {
font-weight: normal;
text-align: center;
background-color: scale-color-diff();
}
th.title {
text-align: left;
}
thead {
tr:hover > td {
background-color: $secondary;
}
tr:hover > th {
background-color: scale-color($primary, $lightness: 75%);
}
}
td.value {
font-weight: bold;
text-align: center;
i {
display: none;
}
&.trending-up {
color: $success;
i.up {
display: inline;
}
}
&.trending-down {
color: $danger;
i.down {
display: inline;
}
}
&.no-change {
i.down {
display: inline;
visibility: hidden;
}
}
}
}
&.detected-problems {
@include border-radius-all(5px);
background-color: scale-color-diff();
margin-bottom: 20px;
margin-top: 10px;
box-shadow: inset 0 0 10px rgba(0,0,0, .1);
.look-here {
float: left;
margin: 20px 10px 0 10px;
.fa {
font-size: 32px;
vertical-align: middle;
color: $primary
}
}
.problem-messages {
float: left;
width: 75%;
a {
text-decoration: underline;
}
.actions {
text-align: right;
}
.btn {
background-color: lighten($primary, 60%);
}
ul {
margin-left: 0;
}
}
}
&.totals {
table {
width: auto;
}
margin-top: 12px;
padding-left: 5px;
.value {
text-align: left;
font-weight: bold;
padding-left: 8px;
padding-right: 30px;
}
}
&.trust-levels {
margin-bottom: 0;
table {
margin-bottom: 0;
}
td.value {
width: 45px;
}
}
.referred-topic-title {
width: 410px;
@include medium-width { width: 360px; }
@include small-width { width: 320px; }
}
}
.commits-widget {
border: solid 1px scale-color-diff();
height: 180px;
margin-bottom: 36px;
ul, li {
margin: 0;
padding: 0;
}
ul {
list-style: none;
}
a {
color: $primary;
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
.header {
color: $primary;
font-weight: bold;
height: 30px;
background-color: scale-color($primary, $lightness: 75%);
cursor: pointer;
h1 {
font-size: 18px;
margin: 5px 0 0 8px;
display: inline-block;
line-height: 1.0em;
}
}
.header:hover h1 {
color: $tertiary;
}
.commits-list {
height: 149px;
overflow-y:auto;
li {
@extend .clearfix;
line-height: 1.0em;
padding: 6px 8px;
background-color: scale-color-diff();
.left {
float: left;
}
.right {
margin-left: 52px;
}
img {
margin-top: 2px;
border: solid 1px scale-color-diff();
padding: 2px;
background-color: $secondary;
}
.commit-message {
color: $primary;
font-size: 12px;
font-weight: bold;
}
.commit-meta {
color: $primary;
font-size: 12px;
}
.committer-name {
font-weight: bold;
color: $primary;
}
}
li:last-child {
border: none;
}
}
// Always show the scrollbar:
::-webkit-scrollbar {
width: 6px;
}
::-webkit-scrollbar-thumb {
background-color: scale-color($primary, $lightness: 75%);
-webkit-border-radius: 3px;
}
::-webkit-scrollbar-track {
border-left: solid 1px scale-color-diff();
}
}
.content-list {
h3 {
color: dark-light-diff($primary, $secondary, 90%, -60%);
font-size: 15px;
padding-left: 5px;
margin-bottom: 10px;
}
ul {
list-style: none;
margin: 0;
li:first-of-type {
border-top: 1px solid scale-color-diff();
}
li {
border-bottom: 1px solid scale-color-diff();
}
li a {
display: block;
padding: 10px;
color: $primary;
&:hover {
background-color: scale-color-diff();
color: $primary;
}
&.active {
font-weight: bold;
color: $primary;
}
}
}
}
.content-editor {
min-height: 500px;
float: left;
width: 54.0540%;
margin-left: 1.8018%;
p.description {
color: $primary;
}
.controls {
margin-top: 10px;
}
#pagedown-editor {
width: 98%;
}
textarea.plain {
width: 98%;
height: 200px;
}
#wmd-input {
width: 98%;
height: 200px;
}
.ace-wrapper {
position: relative;
height: 600px;
width: 100%;
}
.ace_editor {
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
}
}
.row.groups {
input[type='text'] {
width: 500px;
}
input#group-users {
width: 600px;
}
}
// Logs
.admin-logs-table {
input.ember-text-field {
padding: 1px 4px;
}
.btn {
padding: 2px 8px;
.fa {
margin-right: 2px;
}
}
}
.screened-emails, .screened-urls, .screened-ip-addresses {
.email, .url, .domain {
width: 300px;
}
.action, .match_count, .last_match_at, .created_at {
text-align: center;
width: 9.9099%;
}
}
.screened-ip-address-form {
margin-left: 6px;
.combobox {
width: 130px;
}
}
.screened-emails, .screened-urls {
.ip_address {
width: 9.9099%;
text-align: center;
}
}
.screened-ip-addresses {
.ip_address {
width: 150px;
text-align: left;
input {
width: 130px;
}
}
.col.actions {
width: 275px;
padding-top: 4px;
a {
text-decoration: underline;
}
}
}
.staff-actions {
width: 100%;
.action {
width: 10.810%;
}
.staff_user {
width: 9.009%;
}
.subject {
width: 18.018%;
}
.created_at {
width: 4.5045%;
}
.context {
width: 18.018%;
}
.created_at {
text-align: center;
}
.details {
width: 300px;
a {
text-decoration: underline;
}
&.value {
height: 70px;
}
}
}
.staff-action-logs-controls {
margin: 0 0 20px 6px;
a.filter {
display: inline-block;
background-color: scale-color($primary, $lightness: 75%);
padding: 3px 10px;
border-radius: 3px;
color: $primary;
&:hover {
color: $primary;
background-color: scale-color-diff();
}
.label {
font-weight: bold;
}
i {
margin-left: 6px;
}
}
}
.staff-action-logs-instructions {
margin: 0 0 10px 10px;
}
// Ember.ListView
.ember-list-view {
overflow-y: auto;
overflow-x: hidden;
position: relative;
}
.ember-list-item-view {
position: absolute;
}
.staff-actions, .screened-emails, .screened-urls, .screened-ip-addresses {
border-bottom: dotted 1px scale-color($primary, $lightness: 75%);
.heading-container {
width: 100%;
background-color: scale-color-diff();
}
.col.heading {
font-weight: bold;
padding: 4px 0;
}
.col {
display: inline-block;
padding-top: 6px;
vertical-align: top;
overflow-y: auto;
overflow-x: hidden;
}
.ember-list-item-view {
width: 100%;
border-top: solid 1px scale-color-diff();
}
}
.log-details-modal {
.modal-tab {
width: 95%;
}
}
.leader-requirements {
.fa-check {
color: $success;
}
.fa-times {
color: $danger;
}
}
// Backups
// --------------------------------------------------
$rollback: #3D9970;
$rollback-dark: darken($rollback, 10%) !default;
$rollback-darker: darken($rollback, 20%) !default;
.btn-rollback {
color: $secondary;
background: $rollback;
&:hover {
background: $rollback-dark;
}
&:active {
@include linear-gradient($rollback-darker, $rollback-dark);
}
&[disabled] {
background: $rollback;
}
}
.admin-backups-logs {
max-height: 500px;
overflow: auto;
}
button.ru {
position: relative;
min-width: 110px;
}
.ru-progress {
position: absolute;
top: 0;
left: 0;
height: 100%;
background: rgba(0, 175, 0, 0.3);
}
.is-uploading:hover .ru-progress {
background: rgba(200, 0, 0, 0.3);
}
.invisible {
visibility: hidden;
}
.delete-flag-modal, .agree-flag-modal {
button {
display: block;
margin: 10px 0 10px 10px;
padding: 10px 15px;
}
}
.start-backup-modal {
.btn {
margin: 10px 0 10px 5px;
}
.btn:first-of-type {
margin-left: 10px;
}
}
@media all
and (max-width : 850px) {
.nav-stacked {
.glyph {width: auto; position: relative;}
.fa-chevron-right {display: none;}
> li > a {padding: 13px}
}
}
@media all
and (min-width : 320px)
and (max-width : 500px) {
.full-width { margin: 0; }
.site-settings-nav { width: 100%; }
.site-settings-detail {
width: 100%;
padding: 0;
border: none;
.settings .setting {
.setting-label {
float: left;
width: 100%;
h3 {
margin-bottom: 5px;
font-weight: bold;
margin-top: 25px;
}
}
.setting-value {
width: 100%;
}
label {
font-size: 13px;
}
}
}
.content-editor {
width: 100%;
#pagedown-editor {
box-sizing: border-box;
}
}
div.ac-wrap {
width: 100% !important;
box-sizing: border-box;
}
.admin-container {
h2 {
float: left;
}
}
.dashboard-left, .dashboard-right { width: 100%; }
.dashboard-stats { margin: 0; }
.badges {
.current-badge {margin: 70px 0 0 0;}
.current-badge-actions {padding: 0;}
}
.customize .content-list, .customize .current-style {
width: 100%;
}
}
.badge-groupings {
list-style: none;
margin: 0;
padding: 10px 3px;
li {
padding: 6px 0;
width: 600px;
border-bottom: 1px solid #dfdfdf;
}
.actions {
font-size: 17px;
float: right;
a {
margin-left: 5px;
}
}
}