Added Page Types filtering and splitted Page Modes to their own column

This commit is contained in:
Djamil Legato
2015-09-08 11:26:56 -07:00
parent b805a5e405
commit 4e01672a34
4 changed files with 88 additions and 56 deletions

View File

@@ -449,7 +449,7 @@ hr {
*/
.switch-grav {
background-color: #fff;
border: 1px solid #d5d5d5;
border: 1px solid #d4d4d4;
border-radius: 4px;
/* Selected ON switch-light
*/ }
@@ -580,7 +580,7 @@ form .selectize-control.multi .selectize-input {
border-radius: 2px;
line-height: 1.5; }
form .selectize-control.multi .selectize-input > div.active {
background: #d5d5d5; }
background: #d4d4d4; }
form .selectize-control.single .selectize-input:after {
right: 27px; }
form .selectize-control.single .selectize-input.dropdown-active:after {
@@ -599,7 +599,7 @@ form .large {
height: 10rem; }
form select {
width: 100%;
border: 1px solid #d5d5d5;
border: 1px solid #d4d4d4;
background: #fff;
-webkit-appearance: none;
-moz-appearance: none;
@@ -609,17 +609,17 @@ form select {
margin: 0; }
form input[type=text], form input[type=password], form input[type=email] {
width: 100%;
border: 1px solid #d5d5d5;
border: 1px solid #d4d4d4;
background: #fff; }
form input[readonly=readonly] {
background: #f2f2f2;
font-weight: bold; }
form textarea {
width: 100%;
border: 1px solid #d5d5d5;
border: 1px solid #d4d4d4;
background: #fff; }
form .form-frontmatter-wrapper {
border: 1px solid #d5d5d5;
border: 1px solid #d4d4d4;
border-radius: 4px; }
form .switch-toggle label {
cursor: pointer; }
@@ -665,7 +665,7 @@ form .checkboxes {
margin-right: 10px;
position: absolute;
background: #fff;
border: 1px solid #d5d5d5;
border: 1px solid #d4d4d4;
border-radius: 4px; }
form .checkboxes input[type=checkbox] {
display: none; }
@@ -688,7 +688,7 @@ form .checkboxes {
margin-bottom: 3rem; }
.form-frontmatter-wrapper .dragbar {
height: 4px;
background: #d5d5d5;
background: #d4d4d4;
cursor: row-resize; }
#frontmatter + .CodeMirror {
@@ -703,7 +703,7 @@ form .checkboxes {
.form-order-wrapper ul#ordering li {
padding: 0.2rem 1rem;
border-radius: 4px;
border: 1px solid #d5d5d5;
border: 1px solid #d4d4d4;
background: #f8f8f8;
color: #8d959a;
margin: 3px 0;
@@ -727,7 +727,7 @@ form .checkboxes {
cursor: move;
padding: 1rem;
border-radius: 4px;
border: 1px solid #d5d5d5;
border: 1px solid #d4d4d4;
background: #f8f8f8;
color: #8d959a;
margin: 3px 0;
@@ -861,21 +861,21 @@ tr {
color: #fff; }
.button.dropdown-toggle {
background: #54c5b0;
border-left: 1px solid #3bab97; }
border-left: 1px solid #3aab97; }
.button.dropdown-toggle {
border-left: 1px solid #3bab97; }
border-left: 1px solid #3aab97; }
.button.secondary {
background: #2a7a6b;
background: #29796b;
color: rgba(255, 255, 255, 0.85);
border-radius: 4px; }
.button.secondary:hover {
background: #318d7c;
background: #2f8c7c;
color: #fff; }
.button.secondary.dropdown-toggle {
background: #318d7c;
border-left: 1px solid #23675a; }
background: #2f8c7c;
border-left: 1px solid #23665a; }
.button.secondary.dropdown-toggle {
border-left: 1px solid #318d7c; }
border-left: 1px solid #2f8c7c; }
.button-group {
position: relative;
@@ -917,7 +917,7 @@ tr {
background-color: #41bea8;
-webkit-background-clip: padding-box;
background-clip: padding-box;
border: 1px solid #3bab97;
border: 1px solid #3aab97;
border: 1px solid rgba(0, 0, 0, 0.15);
border-radius: 4px;
-webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
@@ -984,7 +984,7 @@ tr {
#admin-login .form-data {
padding-right: 0; }
#admin-login h1 {
background: #21333e url(../images/logo.png) 50% 50% no-repeat;
background: #20333e url(../images/logo.png) 50% 50% no-repeat;
font-size: 0;
color: transparent;
height: 216px;
@@ -1000,15 +1000,15 @@ tr {
text-align: center;
font-weight: 300;
-webkit-font-smoothing: auto;
border: 1px solid #1e2e39; }
border: 1px solid #1d2e38; }
#admin-login form input::-webkit-input-placeholder {
color: #83949d; }
color: #83949c; }
#admin-login form input::-moz-placeholder {
color: #83949d; }
color: #83949c; }
#admin-login form input:-moz-placeholder {
color: #83949d; }
color: #83949c; }
#admin-login form input:-ms-input-placeholder {
color: #83949d; }
color: #83949c; }
#admin-login form .form-actions {
text-align: center;
margin: 0 -3rem -3rem -3rem;
@@ -1037,7 +1037,7 @@ tr {
color: #fff; }
#admin-logo {
background: #21333e;
background: #20333e;
height: 4.2rem; }
#admin-logo h3 {
text-transform: uppercase;
@@ -1051,7 +1051,7 @@ tr {
#admin-user-details {
padding: 2rem;
border-bottom: 1px solid #21333e;
border-bottom: 1px solid #20333e;
overflow: hidden; }
#admin-user-details img {
-webkit-transition: all 0.5s ease;
@@ -1092,7 +1092,7 @@ tr {
#admin-menu li .badges .badge {
display: inline-block;
margin-right: -5px;
color: #e6e6e6; }
color: #e5e5e5; }
#admin-menu li .badges .count {
background-color: #365569; }
#admin-menu li .badges .updates {
@@ -1127,7 +1127,7 @@ tr {
#admin-menu li a i {
display: none; } }
#admin-menu li a:hover {
background: #21333e;
background: #20333e;
color: #fff; }
#admin-menu li a:hover i {
font-size: 1.2rem; }
@@ -1512,7 +1512,7 @@ tr {
color: #888888;
text-shadow: 1px 1px 0 #fff; }
.pages-list .row p.page-route .spacer {
color: #d5d5d5;
color: #d4d4d4;
display: inline-block;
margin: 0 0.3rem; }
.pages-list .row .hint--bottom:before, .pages-list .row .hint--bottom:after {
@@ -1612,14 +1612,17 @@ tr {
font-size: 1rem;
line-height: 1.7; }
#page-filtering .selectize-control.multi .selectize-input > div, #page-filtering .selectize-control.multi .selectize-input > div.active {
color: #fff;
color: #777;
padding: 2px 10px; }
#page-filtering .selectize-control.multi .selectize-input > div[data-value='Routable'], #page-filtering .selectize-control.multi .selectize-input > div.active[data-value='Routable'] {
background: #CE431D; }
background: #CE431D;
color: #fff; }
#page-filtering .selectize-control.multi .selectize-input > div[data-value='Visible'], #page-filtering .selectize-control.multi .selectize-input > div.active[data-value='Visible'] {
background: #999; }
background: #71B15E;
color: #fff; }
#page-filtering .selectize-control.multi .selectize-input > div[data-value='Modular'], #page-filtering .selectize-control.multi .selectize-input > div.active[data-value='Modular'] {
background: #9055AF; }
background: #9055AF;
color: #fff; }
.admin-form-wrapper {
position: relative; }
@@ -1672,6 +1675,11 @@ tr {
#admin-topbar .switch-toggle input.highlight:checked ~ a {
background: #3aafd6; }
body .selectize-dropdown .optgroup-header {
color: #000;
border-bottom: 1px solid #eee;
background-color: #fafafa; }
.depth-0 .row {
padding-left: 3rem; }
@@ -1966,7 +1974,7 @@ body.remodal_active .remodal {
border-radius: 0; }
.grav-mdeditor-navbar {
border: 1px solid #d5d5d5;
border: 1px solid #d4d4d4;
border-top-right-radius: 4px;
border-top-left-radius: 4px;
background: #fbfbfb; }
@@ -1985,8 +1993,8 @@ body.remodal_active .remodal {
.grav-mdeditor-navbar ul .mdeditor-active a {
background: white;
cursor: auto;
border-left: 1px solid #d5d5d5;
border-right: 1px solid #d5d5d5; }
border-left: 1px solid #d4d4d4;
border-right: 1px solid #d4d4d4; }
.grav-mdeditor-navbar ul .mdeditor-active a:hover {
background: #fff; }
.grav-mdeditor-navbar ul a {
@@ -2009,7 +2017,7 @@ body.remodal_active .remodal {
border-top-right-radius: 4px; }
.grav-mdeditor-content {
border: 1px solid #d5d5d5;
border: 1px solid #d4d4d4;
border-top: 0;
border-bottom-right-radius: 4px;
border-bottom-left-radius: 4px; }
@@ -2053,7 +2061,7 @@ body.remodal_active .remodal {
[data-mode=split] .grav-mdeditor-button-code, [data-mode=split] .grav-mdeditor-button-preview {
display: none; }
[data-mode=split] .grav-mdeditor-code {
border-right: 1px solid #d5d5d5; }
border-right: 1px solid #d4d4d4; }
[data-mode=split] .grav-mdeditor-code, [data-mode=split] .grav-mdeditor-code .grav-mdeditor-preview {
float: left;
width: 50%; }
@@ -2149,7 +2157,7 @@ body.remodal_active .remodal {
.dropzone {
position: relative;
border: 1px #d5d5d5 solid;
border: 1px #d4d4d4 solid;
border-radius: 4px;
min-height: 4rem;
background: #fff; }

File diff suppressed because one or more lines are too long

View File

@@ -7,18 +7,34 @@ $(function(){
var clickedLink;
// selectize
$('input.page-filter').selectize({
maxItems: null,
valueField: 'flag',
labelField: 'flag',
searchField: ['flag'],
options: [
{flag: 'Modular'},
{flag: 'Visible'},
{flag: 'Routable'}
]
});
var pageFilter = $('input.page-filter'),
pageTypes = pageFilter.data('template-types'),
options = [
{flag: 'Modular', key: 'Modular', cat: 'mode'},
{flag: 'Visible', key: 'Visible', cat: 'mode'},
{flag: 'Routable', key: 'Routable', cat: 'mode'}
];
jQuery.each(pageTypes, function(key, name){
options.push({flag: name, key: key, cat: 'type'});
})
pageFilter.selectize({
maxItems: null,
valueField: 'key',
labelField: 'flag',
searchField: ['flag', 'key'],
options: options,
optgroups: [
{id: 'mode', name: 'Page Modes'},
{id: 'type', name: 'Page Types'},
],
optgroupField: 'cat',
optgroupLabelField: 'name',
optgroupValueField: 'id',
optgroupOrder: ['mode', 'type'],
plugins: ['optgroup_columns']
});
var childrenToggles = $('[data-toggle="children"]'),
storage = sessionStorage.getItem('grav:admin:pages'),

View File

@@ -178,16 +178,19 @@
> div, > div.active {
color: $white;
color: #777;
padding: 2px 10px;
&[data-value='Routable'] {
background: #CE431D;
color: $white;
}
&[data-value='Visible'] {
background: #999;
background: #71B15E;
color: $white;
}
&[data-value='Modular'] {
background: #9055AF;
color: $white;
}
}
}
@@ -201,7 +204,7 @@
position: absolute;
right: 0.5rem;
height: 3.5rem;
@include breakpoint(mobile-only){
width: 100%;
right: 0;
@@ -214,7 +217,7 @@
height: 37px;
display: inline-block;
vertical-align: inherit;
@include breakpoint(mobile-only){
width: 100%;
}
@@ -243,7 +246,7 @@
}
.switch-toggle {
@include breakpoint(mobile-only) {
width: 100%;
}
@@ -266,6 +269,11 @@
}
body .selectize-dropdown .optgroup-header {
color: $black;
border-bottom: 1px solid #eee;
background-color: #fafafa;
}
@for $i from 0 to 10 {
.depth-#{$i} .row {