Skip to content
This repository has been archived by the owner on Mar 13, 2023. It is now read-only.

Layouts thumbnail in customizer #33

Merged
merged 5 commits into from
Jul 27, 2016
Merged

Layouts thumbnail in customizer #33

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
b3e3492
WIP layout thumbnail in customizer
Jul 25, 2016
2f8568d
Add css to customizer + change layout css name
Jul 25, 2016
d721363
Add admin folder
Jul 25, 2016
4e4fa23
Move admin style and script to admin folder
Jul 25, 2016
1e988ee
Wrap args
Jul 26, 2016
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
31 changes: 22 additions & 9 deletions .dev/sass/meta-box.scss → .dev/sass/admin/layouts.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
.primer-layout {
.primer-layout-wrap {

p {
label {
Expand Down Expand Up @@ -40,6 +40,7 @@
label {
display: block;
position: relative;
margin-left: 0;

> input {
visibility: hidden;
Expand Down Expand Up @@ -69,18 +70,26 @@

}

#side-sortables .primer-layout ul {
flex-wrap: wrap;
#side-sortables,
#customize-control-layout {

.primer-layout-wrap ul {

flex-wrap: wrap;

li {

flex-basis: calc(25% - 0.6em);

}

li {
flex-basis: calc(25% - 0.6em);
}

}

@media only screen and (max-width: 850px) {

.primer-layout ul {
.primer-layout-wrap ul {
display: inline-block;

li {
Expand All @@ -96,9 +105,13 @@
display: none;
}

label > input {
visibility: visible;
position: relative;
label {
margin-left: 24px;

> input {
visibility: visible;
position: relative;
}
}

}
Expand Down
45 changes: 35 additions & 10 deletions Gruntfile.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,5 @@
/* global module, require */

module.exports = function(grunt) {

var pkg = grunt.file.readJSON( 'package.json' );
Expand All @@ -20,7 +22,7 @@ module.exports = function(grunt) {
cascade: false
},
dist: {
src: [ '*.css', 'assets/css/*.css' ]
src: [ '*.css', 'assets/css/**/*.css' ]
}
},

Expand All @@ -39,8 +41,11 @@ module.exports = function(grunt) {
dest: 'editor-style-rtl.css'
},
{
src: 'assets/css/meta-box.css',
dest: 'assets/css/meta-box-rtl.css'
expand: true,
cwd: 'assets/css/admin',
src: ['*.css','!*-rtl.css','!*.min.css','!*-rtl.min.css'],
dest: 'assets/css/admin',
ext: '-rtl.css'
}
]
}
Expand All @@ -59,6 +64,13 @@ module.exports = function(grunt) {
src: ['*.css', '!*.min.css'],
dest: 'assets/css',
ext: '.min.css'
},
{
expand: true,
cwd: 'assets/css/admin',
src: ['*.css', '!*.min.css'],
dest: 'assets/css/admin',
ext: '.min.css'
}]
}
},
Expand All @@ -80,7 +92,7 @@ module.exports = function(grunt) {
},

jshint: {
all: ['Gruntfile.js', 'assets/js/*.js', '!assets/js/*.min.js', '!assets/js/jquery.backgroundSize.js']
all: ['Gruntfile.js', 'assets/js/**/*.js', '!assets/js/**/*.min.js', '!assets/js/jquery.backgroundSize.js']
},

po2mo: {
Expand Down Expand Up @@ -138,7 +150,7 @@ module.exports = function(grunt) {
to: pkg.title
},
{
from: "YEAR THE PACKAGE'S COPYRIGHT HOLDER",
from: 'YEAR THE PACKAGE\'S COPYRIGHT HOLDER',
to: new Date().getFullYear()
},
{
Expand All @@ -158,24 +170,37 @@ module.exports = function(grunt) {
sourceMap: false
},
dist: {
files: {
'assets/css/meta-box.css': '.dev/sass/meta-box.scss',
files: [{
'style.css': '.dev/sass/style.scss',
'editor-style.css': '.dev/sass/editor-style.scss'
}
},
{
expand: true,
cwd: '.dev/sass/admin',
src: ['*.scss'],
dest: 'assets/css/admin',
ext: '.css'
}]
}
},

uglify: {
options: {
ASCIIOnly: true
},
core: {
dist: {
expand: true,
cwd: 'assets/js',
src: ['*.js', '!*.min.js'],
dest: 'assets/js',
ext: '.min.js'
},
admin: {
expand: true,
cwd: 'assets/js/admin',
src: ['*.js', '!*.min.js'],
dest: 'assets/js/admin',
ext: '.min.js'
}
},

Expand All @@ -185,7 +210,7 @@ module.exports = function(grunt) {
tasks: ['sass','autoprefixer','cssjanus']
},
scripts: {
files: ['Gruntfile.js', 'assets/js/*.js', '!assets/js/*.min.js'],
files: ['Gruntfile.js', 'assets/js/**/*.js', '!assets/js/**/*.min.js'],
tasks: ['jshint', 'uglify'],
options: {
interrupt: true
Expand Down
51 changes: 28 additions & 23 deletions assets/css/meta-box-rtl.css → assets/css/admin/layouts-rtl.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,68 +1,73 @@
.primer-layout p label {
.primer-layout-wrap p label {
float: right;
margin-left: 12px; }

.primer-layout p span.clear {
.primer-layout-wrap p span.clear {
content: '';
clear: both;
display: block; }

.primer-layout ul {
.primer-layout-wrap ul {
display: -webkit-box;
display: -webkit-flex;
display: -moz-box;
display: -ms-flexbox;
display: flex;
margin: 0; }
.primer-layout ul li {
.primer-layout-wrap ul li {
margin: 0.3em 0.3em;
padding: 0; }
.primer-layout ul li.disabled {
.primer-layout-wrap ul li.disabled {
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=35)";
filter: alpha(opacity=35);
opacity: 0.35; }
.primer-layout ul li span {
.primer-layout-wrap ul li span {
display: none; }
.primer-layout ul li img {
.primer-layout-wrap ul li img {
width: -webkit-calc(100% - 0.3em - 12px);
width: calc(100% - 0.3em - 12px);
height: auto;
padding: 6px; }
.primer-layout ul li label {
.primer-layout-wrap ul li label {
display: block;
position: relative; }
.primer-layout ul li label > input {
position: relative;
margin-right: 0; }
.primer-layout-wrap ul li label > input {
visibility: hidden;
position: absolute; }
.primer-layout ul li label > input + img {
.primer-layout-wrap ul li label > input + img {
border: 3px solid transparent; }
.primer-layout ul li.active label > input + img {
.primer-layout-wrap ul li.active label > input + img {
cursor: pointer; }
.primer-layout ul li.active label > input:checked + img {
.primer-layout-wrap ul li.active label > input:checked + img {
border-color: #1e8cbe; }
.primer-layout ul li.disabled label > input + img {
.primer-layout-wrap ul li.disabled label > input + img {
cursor: default; }

#side-sortables .primer-layout ul {
#side-sortables .primer-layout-wrap ul,
#customize-control-layout .primer-layout-wrap ul {
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap; }
#side-sortables .primer-layout ul li {
#side-sortables .primer-layout-wrap ul li,
#customize-control-layout .primer-layout-wrap ul li {
-webkit-flex-basis: -webkit-calc(25% - 0.6em);
-ms-flex-preferred-size: calc(25% - 0.6em);
flex-basis: calc(25% - 0.6em); }

@media only screen and (max-width: 850px) {
.primer-layout ul {
.primer-layout-wrap ul {
display: inline-block; }
.primer-layout ul li {
.primer-layout-wrap ul li {
float: none;
width: 100%;
padding: 0.5em 0 !important; }
.primer-layout ul li span {
.primer-layout-wrap ul li span {
display: inline-block; }
.primer-layout ul li img {
.primer-layout-wrap ul li img {
display: none; }
.primer-layout ul li label > input {
visibility: visible;
position: relative; } }
.primer-layout-wrap ul li label {
margin-right: 24px; }
.primer-layout-wrap ul li label > input {
visibility: visible;
position: relative; } }
1 change: 1 addition & 0 deletions assets/css/admin/layouts-rtl.min.css
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

51 changes: 28 additions & 23 deletions assets/css/meta-box.css → assets/css/admin/layouts.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,68 +1,73 @@
.primer-layout p label {
.primer-layout-wrap p label {
float: left;
margin-right: 12px; }

.primer-layout p span.clear {
.primer-layout-wrap p span.clear {
content: '';
clear: both;
display: block; }

.primer-layout ul {
.primer-layout-wrap ul {
display: -webkit-box;
display: -webkit-flex;
display: -moz-box;
display: -ms-flexbox;
display: flex;
margin: 0; }
.primer-layout ul li {
.primer-layout-wrap ul li {
margin: 0.3em 0.3em;
padding: 0; }
.primer-layout ul li.disabled {
.primer-layout-wrap ul li.disabled {
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=35)";
filter: alpha(opacity=35);
opacity: 0.35; }
.primer-layout ul li span {
.primer-layout-wrap ul li span {
display: none; }
.primer-layout ul li img {
.primer-layout-wrap ul li img {
width: -webkit-calc(100% - 0.3em - 12px);
width: calc(100% - 0.3em - 12px);
height: auto;
padding: 6px; }
.primer-layout ul li label {
.primer-layout-wrap ul li label {
display: block;
position: relative; }
.primer-layout ul li label > input {
position: relative;
margin-left: 0; }
.primer-layout-wrap ul li label > input {
visibility: hidden;
position: absolute; }
.primer-layout ul li label > input + img {
.primer-layout-wrap ul li label > input + img {
border: 3px solid transparent; }
.primer-layout ul li.active label > input + img {
.primer-layout-wrap ul li.active label > input + img {
cursor: pointer; }
.primer-layout ul li.active label > input:checked + img {
.primer-layout-wrap ul li.active label > input:checked + img {
border-color: #1e8cbe; }
.primer-layout ul li.disabled label > input + img {
.primer-layout-wrap ul li.disabled label > input + img {
cursor: default; }

#side-sortables .primer-layout ul {
#side-sortables .primer-layout-wrap ul,
#customize-control-layout .primer-layout-wrap ul {
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap; }
#side-sortables .primer-layout ul li {
#side-sortables .primer-layout-wrap ul li,
#customize-control-layout .primer-layout-wrap ul li {
-webkit-flex-basis: -webkit-calc(25% - 0.6em);
-ms-flex-preferred-size: calc(25% - 0.6em);
flex-basis: calc(25% - 0.6em); }

@media only screen and (max-width: 850px) {
.primer-layout ul {
.primer-layout-wrap ul {
display: inline-block; }
.primer-layout ul li {
.primer-layout-wrap ul li {
float: none;
width: 100%;
padding: 0.5em 0 !important; }
.primer-layout ul li span {
.primer-layout-wrap ul li span {
display: inline-block; }
.primer-layout ul li img {
.primer-layout-wrap ul li img {
display: none; }
.primer-layout ul li label > input {
visibility: visible;
position: relative; } }
.primer-layout-wrap ul li label {
margin-left: 24px; }
.primer-layout-wrap ul li label > input {
visibility: visible;
position: relative; } }
1 change: 1 addition & 0 deletions assets/css/admin/layouts.min.css
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

1 change: 0 additions & 1 deletion assets/css/meta-box-rtl.min.css
View file
Open in desktop

This file was deleted.

1 change: 0 additions & 1 deletion assets/css/meta-box.min.css
View file
Open in desktop

This file was deleted.

0 assets/js/meta-box.js → assets/js/admin/layouts.js
View file
Open in desktop
File renamed without changes.
0 assets/js/meta-box.min.js → assets/js/admin/layouts.min.js
View file
Open in desktop
File renamed without changes.
Loading