Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Improve markup by removing unnecessary elements #32

Merged
merged 4 commits into from
Jun 8, 2017
Merged

Improve markup by removing unnecessary elements #32

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
bfb8313
Remove settings-field-control span and always apply the class to each…
Jun 4, 2017
3730dbe
Adjust CSS to settings-field-control changes, remove unnecessary bloat.
Jun 4, 2017
d78eb38
Remove unnecessary settings-sections wrap.
Jun 4, 2017
87d9f47
Merge remote-tracking branch 'origin/master' into fa/improved-markup
Jun 8, 2017
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
247 changes: 78 additions & 169 deletions wp-admin/css/forms.css
View file
Open in desktop
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
Open in desktop
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