Skip to content

Commit

Permalink
Merge pull request #32 from wpaccessibility/fa/improved-markup
Browse files Browse the repository at this point in the history 
Improve markup by removing unnecessary elements
  • Loading branch information
@felixarntz
felixarntz authored Jun 8, 2017
2 parents 588480c + 87d9f47 commit 1da41b4
Show file tree
Hide file tree
Showing 3 changed files with 101 additions and 184 deletions.
247 changes: 78 additions & 169 deletions wp-admin/css/forms.css
View file
Original file line number Diff line number Diff line change
@@ -1,60 +1,23 @@
/*
This file is currently an exact representation of the Core markup.
However it is using the new classes instead of the Core table classes.
These styles can therefore be used as a starting point to move from the
old two-column layout to a modern one-column layout.
*/

@-moz-document url-prefix() {
.settings-fields input.tog {
margin-bottom: -1px;
}
}
/*------------------------------------------------------------------------------
1.0 - Settings Section
------------------------------------------------------------------------------*/

.settings-section {
margin: 0 0 40px;
margin-bottom: 50px;
}

.settings-section:last-child {
margin: 0;
}

.settings-fields .form-required.form-invalid .settings-field-control:after {
content: "\f534";
font: 400 20px/1 dashicons;
color: #dc3232;
margin-left: -25px;
vertical-align: middle;
}

.settings-fields .form-required.user-pass1-wrap.form-invalid .settings-field-control:after {
content: "";
}

.settings-fields .form-required.user-pass1-wrap.form-invalid .password-input-wrapper:after {
content: "\f534";
font: 400 20px/1 dashicons;
color: #dc3232;
margin: 0 6px 0 -29px;
vertical-align: middle;
margin-bottom: 0;
}

.settings-fields + p.submit,
.settings-fields + input + p.submit,
.settings-fields + input + input + p.submit {
.settings-section + p.submit {
border-top: none;
padding-top: 0;
}

.settings-fields input,
select,
textarea {
font-size: 16px;
}

.settings-fields span.description.important {
font-size: 12px;
}
/*------------------------------------------------------------------------------
2.0 - Settings Fields
------------------------------------------------------------------------------*/

.settings-fields {
border-collapse: collapse;
Expand All @@ -63,101 +26,100 @@ textarea {
clear: both;
}

.settings-fields,
.settings-fields .settings-field-control,
.settings-fields .settings-field-title,
.settings-fields .settings-field-control p {
.settings-field {
margin-bottom: 19px;
font-size: 12px;
line-height: 1.3;
}

.settings-fields .settings-field-control {
display: block;
margin-bottom: 9px;
padding: 5px 0;
line-height: 1.3;
vertical-align: middle;
.settings-field:last-child {
margin-bottom: 0;
}

.settings-fields .settings-field-title {
/*------------------------------------------------------------------------------
3.0 - Settings Field Titles
------------------------------------------------------------------------------*/

.settings-field-title {
display: block;
color: #23282d;
text-shadow: none;
vertical-align: baseline;
vertical-align: top;
text-align: left;
padding: 5px 10px 10px 0;
line-height: 1.3;
font-weight: 400;
}

.settings-fields .settings-field {
padding: 10px 0 0;
}
/*------------------------------------------------------------------------------
4.0 - Settings Field Controls
------------------------------------------------------------------------------*/

.settings-fields .settings-field {
padding: 10px 0 0;
.settings-field-control {
padding: 3px 5px;
font-size: 16px;
}

.settings-fields .settings-field-title.th-full {
width: auto;
font-weight: 400;
input[type="checkbox"].settings-field-control,
input[type="radio"].settings-field-control {
margin: 0 4px 0 0;
}

.settings-fields .settings-field-control p {
margin-top: 4px;
margin-bottom: 0;
input[type="checkbox"].settings-field-control + label,
input[type="radio"].settings-field-control + label,
.settings-field .radio-item label,
.settings-field .multibox-item label,
.settings-field .radio-item label code,
.settings-field .multibox-item label code,
.settings-field .radio-item .description,
.settings-field .multibox-item .description {
font-size: 16px;
}

.settings-fields .settings-field-control .title-label {
font-weight: 600;
.settings-field .radio-item,
.settings-field .multibox-item {
display: inline-block;
line-height: 1.4em;
margin: 0.25em 0 0.5em !important;
}

.settings-fields .date-time-doc {
margin-top: 1em;
}
/*------------------------------------------------------------------------------
5.0 - Settings Field Misc Content
------------------------------------------------------------------------------*/

.settings-fields p.timezone-info {
margin: 1em 0;
.settings-field p {
margin-top: 4px;
margin-bottom: 0;
}

.settings-fields .settings-field-control .radio-item,
.settings-fields .settings-field-control .multibox-item {
display: inline-block;
line-height: 1.4em;
margin: 0.25em 0 0.5em !important;
.settings-field .title-label {
font-weight: 400;
}

.settings-fields input[type="checkbox"] {
margin: 0 4px 0 0;
.settings-field .date-time-doc {
margin-top: 1em;
}

.settings-fields input.tog,
.settings-fields input[type="radio"] {
margin: 0 4px 0 0;
float: none;
.settings-field p.timezone-info {
margin: 1em 0;
}

.settings-fields .pre {
.settings-field .pre {
padding: 8px;
margin: 0;
}

.settings-fields .settings-field-control .updated {
.settings-field .updated {
font-size: 13px;
}

.settings-fields .settings-field-control .updated p {
.settings-field .updated p {
font-size: 13px;
margin: 0.3em 0;
}

#profile-page .settings-fields textarea {
width: 500px;
margin-bottom: 6px;
}

#profile-page .settings-fields #rich_editing {
margin-right: 5px;
}
/*------------------------------------------------------------------------------
6.0 - Responsive View
------------------------------------------------------------------------------*/

@media screen and ( max-width: 782px ) {
.settings-fields {
Expand All @@ -166,32 +128,18 @@ textarea {
box-sizing: border-box;
}

.settings-field {
display: block;
}

.settings-fields .settings-field-title,
.settings-fields .settings-field-control {
display: block;
width: auto;
vertical-align: middle;
}

.settings-fields .color-palette td {
width: 15px;
}

.settings-fields table.color-palette {
margin-right: 10px;
.settings-field-title {
padding-top: 10px;
padding-bottom: 0;
border-bottom: 0;
}

.settings-fields .settings-field-control input[type="text"],
.settings-fields .settings-field-control input[type="email"],
.settings-fields .settings-field-control input[type="password"],
.settings-fields .settings-field-control select,
.settings-fields .settings-field-control textarea,
.settings-fields span.description,
#profile-page .settings-fields textarea {
input[type="text"].settings-field-control,
input[type="email"].settings-field-control,
input[type="password"].settings-field-control,
select.settings-field-control,
textarea.settings-field-control,
.settings-field span.description {
width: 100%;
font-size: 16px;
line-height: 1.5;
Expand All @@ -203,69 +151,30 @@ textarea {
box-sizing: border-box;
}

.settings-fields .form-required.form-invalid .settings-field-control:after {
float: right;
margin: -30px 3px 0 0;
}

#wpbody .settings-fields .settings-field-control select {
select.settings-field-control {
height: 40px;
}

.settings-fields input[type="text"].small-text {
input[type="text"].settings-field-control.small-text {
width: auto;
max-width: 55px;
display: inline;
padding: 3px 6px;
margin: 0 3px;
}

.settings-fields span.description {
input.settings-field-control.regular-text {
width: 100%;
}

.settings-field span.description {
display: inline;
padding: 4px 0 0;
line-height: 1.4em;
font-size: 14px;
}

.settings-fields .settings-field-title {
padding-top: 10px;
padding-bottom: 0;
border-bottom: 0;
}

.settings-fields .settings-field-control {
margin-bottom: 0;
padding-bottom: 6px;
padding-top: 4px;
padding-left: 0;
}

.settings-fields.permalink-structure .settings-field-control code {
margin-left: 32px;
}

.settings-fields.permalink-structure .settings-field-control input[type="text"] {
margin-left: 32px;
margin-top: 4px;
width: 96%;
}

.settings-fields input.regular-text {
width: 100%;
}

.settings-fields label {
font-size: 14px;
}

.settings-fields fieldset label {
display: block;
}
}

@media only screen and (max-width: 768px) {
#profile-page .settings-fields textarea {
max-width: 400px;
width: auto;
}
}
23 changes: 16 additions & 7 deletions wp-admin/includes/options-general.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -168,14 +168,23 @@ function render_settings_field_languages_dropdown( $field_args ) {
$locale = '';
}

wp_dropdown_languages( array(
'name' => ! empty( $field_args['input_name'] ) ? $field_args['input_name'] : '',
'id' => ! empty( $field_args['input_id'] ) ? $field_args['input_id'] : '',
'selected' => $locale,
'languages' => $languages,
'translations' => $translations,
$dropdown_args = array(
'name' => ! empty( $field_args['input_name'] ) ? $field_args['input_name'] : '',
'id' => ! empty( $field_args['input_id'] ) ? $field_args['input_id'] : '',
'selected' => $locale,
'languages' => $languages,
'translations' => $translations,
'show_available_translations' => ( ! is_multisite() || is_super_admin() ) && wp_can_install_language_pack(),
) );
);

// Ugly hack because `wp_dropdown_languages()` does not support a class.
if ( ! empty( $field_args['input_class'] ) ) {
ob_start();
wp_dropdown_languages( $dropdown_args );
echo str_replace( ' id="' . $dropdown_args['id'] . '"', ' id="' . $dropdown_args['id'] . '" class="' . esc_attr( $field_args['input_class'] ) . '"', ob_get_clean() );
} else {
wp_dropdown_languages( $dropdown_args );
}
}

/**
Expand Down
Loading

0 comments on commit 1da41b4

Please sign in to comment.