vhad/wordpress-develop
1
0
Fork 0
mirror of https://github.com/gosticks/wordpress-develop.git synced 2026-07-26 12:00:16 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Improve the Customize experience on mobile.

Browse Source 
Before: https://make.wordpress.org/flow/2015/02/02/a-peek-at-the-customizer-on-an-iphone-6/
After: https://make.wordpress.org/flow/2015/02/03/vizrec-for-28784-improve-the-customize-experience-on-mobile-iphone-6-28784-diff-4-2-alpha-31325/

props celloexpressions.
see #28784.

git-svn-id: https://develop.svn.wordpress.org/trunk@31384 602fd350-edb4-49c9-b593-d223f7449a82
This commit is contained in:
Dominik Schilling (ocean90)
2015-02-09 12:35:38 +00:00
parent 0d65892e29
commit da09ac082b
4 changed files with 105 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

79
src/wp-admin/css/customize-controls.css
View File

@@ -235,7 +235,9 @@ body {
.customize-controls-close:focus,
.customize-controls-close:hover,
.control-panel-back:focus,
.control-panel-back:hover {
.control-panel-back:hover,
.customize-controls-preview-toggle:focus,
.customize-controls-preview-toggle:hover {
background: #ddd;
border-color: #ccc;
color: #000;
@@ -309,7 +311,7 @@ body {
}
#customize-theme-controls .control-section.current-panel > h3.accordion-section-title {
left: -300px;
left: -354px;
-webkit-transition: left ease-in-out .18s;
transition: left ease-in-out .18s;
}
@@ -848,3 +850,76 @@ body.cheatin p {
line-height: 1.5;
margin: 25px 0 20px;
}
/* Responsive */
.customize-controls-preview-toggle {
display: none;
}
@media screen and ( max-width: 640px ) {
#customize-controls {
width: 100%;
}
.wp-full-overlay.expanded {
margin-left: 0;
}
.wp-full-overlay-sidebar .wp-full-overlay-sidebar-content {
bottom: 0;
}
.customize-controls-preview-toggle {
display: block;
position: absolute;
top: 0;
left: 48px;
line-height: 45px;
font-size: 14px;
padding: 0 12px 0 12px;
margin: 0;
height: 45px;
background: #eee;
border-right: 1px solid #ddd;
color: #444;
cursor: pointer;
-webkit-transition: color .1s ease-in-out, background .1s ease-in-out;
transition: color .1s ease-in-out, background .1s ease-in-out;
}
#customize-footer-actions,
#customize-preview,
.customize-controls-preview-toggle .controls,
.preview-only .wp-full-overlay-sidebar-content,
.preview-only .customize-controls-preview-toggle .preview {
display: none;
}
.customize-controls-preview-toggle .preview:before,
.customize-controls-preview-toggle .controls:before {
font: normal 20px/1 dashicons;
content: "\f177";
position: relative;
top: 4px;
margin-right: 6px;
}
.customize-controls-preview-toggle .controls:before {
content: "\f100";
}
.preview-only #customize-controls {
height: 45px;
}
.preview-only #customize-preview,
.preview-only .customize-controls-preview-toggle .controls {
display: block;
}
#customize-preview {
top: 45px;
bottom: 0;
height: auto;
}
}

16
src/wp-admin/css/customize-widgets.css
View File

@@ -344,7 +344,7 @@ body.adding-widget .add-new-widget:before {
width: 300px;
margin: 0;
z-index: 1;
background: #fff;
background: #fff !important;
-webkit-transition: all 0.2s;
transition: all 0.2s;
border-right: 1px solid #dddddd;
@@ -607,3 +607,17 @@ body.adding-widget #customize-preview {
top: 8px;
}
}
@media screen and ( max-width: 640px ) {
body.adding-widget div#available-widgets {
left: 0;
z-index: 10;
width: 100%;
}
#available-widgets-filter {
position: static;
width: 100%;
height: auto;
}
}