Nemcio/Grav-Admin-Plugin
1
0
Fork 0
mirror of https://github.com/getgrav/grav-plugin-admin.git synced 2025-11-14 17:26:10 +01:00
Code Issues Packages Projects Releases Activity

Merge branch 'feature/mobile' into develop

Browse Source
This commit is contained in:
unknown
2015-09-03 17:16:54 -04:00
parent fcf926cd3c e5e77bf472
commit 18f3335d94
10 changed files with 368 additions and 39 deletions
Download Patch File Download Diff File Expand all files Collapse all files

184
themes/grav/css-compiled/template.css
View File

@@ -277,7 +277,7 @@ hr {
* CSS TOGGLE SWITCHES * CSS TOGGLE SWITCHES
* Unlicense * Unlicense
* *
* Ionuț Colceriu - ghinda.net * Ionu╚¢ Colceriu - ghinda.net
* https://github.com/ghinda/css-toggle-switch * https://github.com/ghinda/css-toggle-switch
* *
*/ */
@@ -448,7 +448,7 @@ hr {
*/ */
.switch-grav { .switch-grav {
background-color: #fff; background-color: #fff;
border: 1px solid #d5d5d5; border: 1px solid #d4d4d4;
border-radius: 4px; border-radius: 4px;
/* Selected ON switch-light /* Selected ON switch-light
*/ } */ }
@@ -579,7 +579,7 @@ form .selectize-control.multi .selectize-input {
border-radius: 2px; border-radius: 2px;
line-height: 1.5; } line-height: 1.5; }
form .selectize-control.multi .selectize-input > div.active { form .selectize-control.multi .selectize-input > div.active {
background: #d5d5d5; } background: #d4d4d4; }
form .selectize-control.single .selectize-input:after { form .selectize-control.single .selectize-input:after {
right: 27px; } right: 27px; }
form .selectize-control.single .selectize-input.dropdown-active:after { form .selectize-control.single .selectize-input.dropdown-active:after {
@@ -598,7 +598,7 @@ form .large {
height: 10rem; } height: 10rem; }
form select { form select {
width: 100%; width: 100%;
border: 1px solid #d5d5d5; border: 1px solid #d4d4d4;
background: #fff; background: #fff;
-webkit-appearance: none; -webkit-appearance: none;
-moz-appearance: none; -moz-appearance: none;
@@ -608,17 +608,17 @@ form select {
margin: 0; } margin: 0; }
form input[type=text], form input[type=password], form input[type=email] { form input[type=text], form input[type=password], form input[type=email] {
width: 100%; width: 100%;
border: 1px solid #d5d5d5; border: 1px solid #d4d4d4;
background: #fff; } background: #fff; }
form input[readonly=readonly] { form input[readonly=readonly] {
background: #f2f2f2; background: #f2f2f2;
font-weight: bold; } font-weight: bold; }
form textarea { form textarea {
width: 100%; width: 100%;
border: 1px solid #d5d5d5; border: 1px solid #d4d4d4;
background: #fff; } background: #fff; }
form .form-frontmatter-wrapper { form .form-frontmatter-wrapper {
border: 1px solid #d5d5d5; border: 1px solid #d4d4d4;
border-radius: 4px; } border-radius: 4px; }
form .switch-toggle label { form .switch-toggle label {
cursor: pointer; } cursor: pointer; }
@@ -664,7 +664,7 @@ form .checkboxes {
margin-right: 10px; margin-right: 10px;
position: absolute; position: absolute;
background: #fff; background: #fff;
border: 1px solid #d5d5d5; border: 1px solid #d4d4d4;
border-radius: 4px; } border-radius: 4px; }
form .checkboxes input[type=checkbox] { form .checkboxes input[type=checkbox] {
display: none; } display: none; }
@@ -681,7 +681,7 @@ form .checkboxes {
margin-bottom: 3rem; } margin-bottom: 3rem; }
.form-frontmatter-wrapper .dragbar { .form-frontmatter-wrapper .dragbar {
height: 4px; height: 4px;
background: #d5d5d5; background: #d4d4d4;
cursor: row-resize; } cursor: row-resize; }
#frontmatter + .CodeMirror { #frontmatter + .CodeMirror {
@@ -696,7 +696,7 @@ form .checkboxes {
.form-order-wrapper ul#ordering li { .form-order-wrapper ul#ordering li {
padding: 0.2rem 1rem; padding: 0.2rem 1rem;
border-radius: 4px; border-radius: 4px;
border: 1px solid #d5d5d5; border: 1px solid #d4d4d4;
background: #f8f8f8; background: #f8f8f8;
color: #8d959a; color: #8d959a;
margin: 3px 0; margin: 3px 0;
@@ -720,7 +720,7 @@ form .checkboxes {
cursor: move; cursor: move;
padding: 1rem; padding: 1rem;
border-radius: 4px; border-radius: 4px;
border: 1px solid #d5d5d5; border: 1px solid #d4d4d4;
background: #f8f8f8; background: #f8f8f8;
color: #8d959a; color: #8d959a;
margin: 3px 0; margin: 3px 0;
@@ -812,6 +812,11 @@ tr {
flex: 2; } flex: 2; }
tr td:first-child { tr td:first-child {
padding-left: 3rem; } padding-left: 3rem; }
@media only all and (max-width: 47.938em) {
tr td:first-child {
padding-left: .5rem; }
tr td:first-child .plugin-update-button {
float: left; } }
tr td:last-child, tr td.gpm-actions { tr td:last-child, tr td.gpm-actions {
padding-right: 3rem; } padding-right: 3rem; }
tr td.gpm-actions { tr td.gpm-actions {
@@ -826,6 +831,9 @@ tr {
margin: 0; margin: 0;
padding: 0; padding: 0;
background-color: #f7f7f7; } background-color: #f7f7f7; }
@media only all and (max-width: 47.938em) {
tr td.gpm-details {
word-wrap: break-word; } }
tr td.gpm-details > .table-wrapper { tr td.gpm-details > .table-wrapper {
display: none; } display: none; }
tr td.gpm-details > .table-wrapper td { tr td.gpm-details > .table-wrapper td {
@@ -846,21 +854,21 @@ tr {
color: #fff; } color: #fff; }
.button.dropdown-toggle { .button.dropdown-toggle {
background: #54c5b0; background: #54c5b0;
border-left: 1px solid #3bab97; } border-left: 1px solid #3aab97; }
.button.dropdown-toggle { .button.dropdown-toggle {
border-left: 1px solid #3bab97; } border-left: 1px solid #3aab97; }
.button.secondary { .button.secondary {
background: #2a7a6b; background: #29796b;
color: rgba(255, 255, 255, 0.85); color: rgba(255, 255, 255, 0.85);
border-radius: 4px; } border-radius: 4px; }
.button.secondary:hover { .button.secondary:hover {
background: #318d7c; background: #2f8c7c;
color: #fff; } color: #fff; }
.button.secondary.dropdown-toggle { .button.secondary.dropdown-toggle {
background: #318d7c; background: #2f8c7c;
border-left: 1px solid #23675a; } border-left: 1px solid #23665a; }
.button.secondary.dropdown-toggle { .button.secondary.dropdown-toggle {
border-left: 1px solid #318d7c; } border-left: 1px solid #2f8c7c; }
.button-group { .button-group {
position: relative; position: relative;
@@ -902,7 +910,7 @@ tr {
background-color: #41bea8; background-color: #41bea8;
-webkit-background-clip: padding-box; -webkit-background-clip: padding-box;
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: 1px solid rgba(0, 0, 0, 0.15);
border-radius: 4px; border-radius: 4px;
-webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175); -webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
@@ -969,7 +977,7 @@ tr {
#admin-login .form-data { #admin-login .form-data {
padding-right: 0; } padding-right: 0; }
#admin-login h1 { #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; font-size: 0;
color: transparent; color: transparent;
height: 216px; height: 216px;
@@ -985,15 +993,15 @@ tr {
text-align: center; text-align: center;
font-weight: 300; font-weight: 300;
-webkit-font-smoothing: auto; -webkit-font-smoothing: auto;
border: 1px solid #1e2e39; } border: 1px solid #1d2e38; }
#admin-login form input::-webkit-input-placeholder { #admin-login form input::-webkit-input-placeholder {
color: #83949d; } color: #83949c; }
#admin-login form input::-moz-placeholder { #admin-login form input::-moz-placeholder {
color: #83949d; } color: #83949c; }
#admin-login form input:-moz-placeholder { #admin-login form input:-moz-placeholder {
color: #83949d; } color: #83949c; }
#admin-login form input:-ms-input-placeholder { #admin-login form input:-ms-input-placeholder {
color: #83949d; } color: #83949c; }
#admin-login form .form-actions { #admin-login form .form-actions {
text-align: center; text-align: center;
margin: 0 -3rem -3rem -3rem; margin: 0 -3rem -3rem -3rem;
@@ -1011,13 +1019,18 @@ tr {
bottom: 0; bottom: 0;
width: 20%; width: 20%;
background: #253A47; } background: #253A47; }
@media only all and (max-width: 47.938em) {
#admin-sidebar {
display: none;
width: 75%;
z-index: 999999; } }
#admin-sidebar a { #admin-sidebar a {
color: #cccccc; } color: #cccccc; }
#admin-sidebar a:hover { #admin-sidebar a:hover {
color: #fff; } color: #fff; }
#admin-logo { #admin-logo {
background: #21333e; background: #20333e;
height: 4.2rem; } height: 4.2rem; }
#admin-logo h3 { #admin-logo h3 {
text-transform: uppercase; text-transform: uppercase;
@@ -1031,7 +1044,7 @@ tr {
#admin-user-details { #admin-user-details {
padding: 2rem; padding: 2rem;
border-bottom: 1px solid #21333e; border-bottom: 1px solid #20333e;
overflow: hidden; } overflow: hidden; }
#admin-user-details img { #admin-user-details img {
-webkit-transition: all 0.5s ease; -webkit-transition: all 0.5s ease;
@@ -1039,10 +1052,16 @@ tr {
transition: all 0.5s ease; transition: all 0.5s ease;
border-radius: 100%; border-radius: 100%;
float: left; } float: left; }
@media only all and (min-width: 48em) and (max-width: 59.938em) {
#admin-user-details img {
float: none; } }
#admin-user-details:hover img { #admin-user-details:hover img {
box-shadow: 0px 0px 0 50px #2a4251; } box-shadow: 0px 0px 0 50px #2a4251; }
#admin-user-details .admin-user-names { #admin-user-details .admin-user-names {
margin-left: 45px; } margin-left: 45px; }
@media only all and (min-width: 48em) and (max-width: 59.938em) {
#admin-user-details .admin-user-names {
margin-left: 0; } }
#admin-user-details .admin-user-names h4, #admin-user-details .admin-user-names h5 { #admin-user-details .admin-user-names h4, #admin-user-details .admin-user-names h5 {
color: #e6e6e6; color: #e6e6e6;
margin: 0; margin: 0;
@@ -1066,7 +1085,7 @@ tr {
#admin-menu li .badges .badge { #admin-menu li .badges .badge {
display: inline-block; display: inline-block;
margin-right: -5px; margin-right: -5px;
color: #e6e6e6; } color: #e5e5e5; }
#admin-menu li .badges .count { #admin-menu li .badges .count {
background-color: #365569; } background-color: #365569; }
#admin-menu li .badges .updates { #admin-menu li .badges .updates {
@@ -1088,14 +1107,20 @@ tr {
padding-top: 0.7rem; padding-top: 0.7rem;
padding-bottom: 0.7rem; padding-bottom: 0.7rem;
color: #d1dee7; } color: #d1dee7; }
@media only all and (min-width: 48em) and (max-width: 59.938em) {
#admin-menu li a {
padding-left: 20px; } }
#admin-menu li a i { #admin-menu li a i {
-webkit-transition: all 0.2s ease; -webkit-transition: all 0.2s ease;
-moz-transition: all 0.2s ease; -moz-transition: all 0.2s ease;
transition: all 0.2s ease; transition: all 0.2s ease;
color: #afc7d5; color: #afc7d5;
margin-right: 8px; } margin-right: 8px; }
@media only all and (min-width: 48em) and (max-width: 59.938em) {
#admin-menu li a i {
display: none; } }
#admin-menu li a:hover { #admin-menu li a:hover {
background: #21333e; background: #20333e;
color: #fff; } color: #fff; }
#admin-menu li a:hover i { #admin-menu li a:hover i {
font-size: 1.2rem; } font-size: 1.2rem; }
@@ -1104,11 +1129,18 @@ tr {
color: #fff; color: #fff;
padding-left: 16px; padding-left: 16px;
border-left: 9px solid #349886; } border-left: 9px solid #349886; }
@media only all and (min-width: 48em) and (max-width: 59.938em) {
#admin-menu li.selected a {
padding-left: 11px; } }
#admin-menu li.selected a i { #admin-menu li.selected a i {
color: #e1eaf0; } color: #e1eaf0; }
#admin-main { #admin-main {
margin-left: 20%; } margin-left: 20%; }
@media only all and (max-width: 47.938em) {
#admin-main {
width: 100%;
margin-left: 0; } }
#admin-main .hint:after, #admin-main [data-hint]:after { #admin-main .hint:after, #admin-main [data-hint]:after {
font-size: 0.9rem; font-size: 0.9rem;
width: 400px; width: 400px;
@@ -1123,8 +1155,14 @@ tr {
position: relative; position: relative;
height: 4.2rem; height: 4.2rem;
padding: 0 3rem; } padding: 0 3rem; }
@media only all and (max-width: 47.938em) {
#admin-main .titlebar h1 i:before {
content: "\f0c9"; } }
#admin-main .titlebar .button-bar { #admin-main .titlebar .button-bar {
padding: 0; } padding: 0; }
@media only all and (max-width: 47.938em) {
#admin-main .titlebar .button-bar {
display: none; } }
#admin-main .titlebar .preview { #admin-main .titlebar .preview {
color: #fff; color: #fff;
font-size: 90%; } font-size: 90%; }
@@ -1172,11 +1210,35 @@ tr {
-webkit-transition: margin-top 0.15s ease-out; -webkit-transition: margin-top 0.15s ease-out;
-moz-transition: margin-top 0.15s ease-out; -moz-transition: margin-top 0.15s ease-out;
transition: margin-top 0.15s ease-out; } transition: margin-top 0.15s ease-out; }
@media only all and (max-width: 47.938em) {
#admin-main .grav-update.grav {
position: absolute;
z-index: 9;
bottom: 0;
width: 100%; }
#admin-main .grav-update.grav p * {
display: none; }
#admin-main .grav-update.grav p {
font-size: 0; }
#admin-main .grav-update.grav p button {
width: 95%;
display: inherit;
position: absolute;
top: 0;
left: 0;
margin-left: 2.5%;
margin-right: 2.5%;
padding-left: 0; } }
#admin-main .grav-update.grav + .content-padding { #admin-main .grav-update.grav + .content-padding {
top: 7.2rem; top: 7.2rem;
-webkit-transition: top 0.15s ease-out; -webkit-transition: top 0.15s ease-out;
-moz-transition: top 0.15s ease-out; -moz-transition: top 0.15s ease-out;
transition: top 0.15s ease-out; } transition: top 0.15s ease-out; }
@media only all and (max-width: 47.938em) {
#admin-main .grav-update.grav + .content-padding {
top: 5.2rem;
padding-bottom: 8rem;
padding-top: 0rem; } }
#admin-main .content-padding { #admin-main .content-padding {
position: absolute; position: absolute;
top: 4.2rem; top: 4.2rem;
@@ -1185,6 +1247,9 @@ tr {
right: 0; right: 0;
overflow-y: auto; overflow-y: auto;
padding: 2.5rem; } padding: 2.5rem; }
@media only all and (max-width: 47.938em) {
#admin-main .content-padding {
left: 0; } }
#admin-main .admin-block { #admin-main .admin-block {
background: #EEEEEE; background: #EEEEEE;
color: #737C81; color: #737C81;
@@ -1198,11 +1263,27 @@ tr {
border-bottom: 0; } border-bottom: 0; }
#admin-main .admin-block .button-bar { #admin-main .admin-block .button-bar {
margin-right: 3rem; } margin-right: 3rem; }
@media only all and (max-width: 47.938em) {
#admin-main .admin-block .button-bar {
width: 100%;
margin: -.5rem 0 1rem 0;
text-align: center; }
#admin-main .admin-block .button-bar .button {
width: 100%; } }
#admin-main .flush-bottom.button-bar { #admin-main .flush-bottom.button-bar {
margin: 1rem -2rem -1rem; margin: 1rem -2rem -1rem;
height: 70px; height: 70px;
padding: 0 1rem; padding: 0 1rem;
float: none; } float: none; }
@media only all and (max-width: 47.938em) {
#admin-main .flush-bottom.button-bar {
height: auto;
padding: 2rem 1rem 0rem 1rem; } }
@media only all and (max-width: 47.938em) {
#admin-main .flush-bottom.button-bar .button {
margin-left: 0 !important;
margin-bottom: .5rem;
width: 100%; } }
#admin-main .danger, #admin-main .success { #admin-main .danger, #admin-main .success {
position: relative; } position: relative; }
#admin-main .danger.button-bar, #admin-main .success.button-bar { #admin-main .danger.button-bar, #admin-main .success.button-bar {
@@ -1230,12 +1311,21 @@ tr {
float: left; float: left;
width: 50%; width: 50%;
margin-bottom: 2.5rem; } margin-bottom: 2.5rem; }
@media only all and (max-width: 47.938em) {
#admin-dashboard .dashboard-item {
width: 100%; } }
#admin-dashboard .dashboard-item > div { #admin-dashboard .dashboard-item > div {
padding: 1rem 2rem; } padding: 1rem 2rem; }
#admin-dashboard .dashboard-left { #admin-dashboard .dashboard-left {
padding-right: 1.25rem; } padding-right: 1.25rem; }
@media only all and (max-width: 47.938em) {
#admin-dashboard .dashboard-left {
padding-right: 0rem; } }
#admin-dashboard .dashboard-right { #admin-dashboard .dashboard-right {
padding-left: 1.25rem; } padding-left: 1.25rem; }
@media only all and (max-width: 47.938em) {
#admin-dashboard .dashboard-right {
padding-left: 0rem; } }
#admin-dashboard #updates p { #admin-dashboard #updates p {
text-align: center; text-align: center;
color: rgba(255, 255, 255, 0.95); color: rgba(255, 255, 255, 0.95);
@@ -1269,6 +1359,11 @@ tr {
clear: both; } clear: both; }
#admin-dashboard #updates .button { #admin-dashboard #updates .button {
margin-left: 0.5rem; } margin-left: 0.5rem; }
@media only all and (min-width: 48em) and (max-width: 59.938em) {
#admin-dashboard #updates .button {
width: 49%;
padding: .3rem 0rem;
margin-left: 0; } }
#admin-dashboard #popularity p { #admin-dashboard #popularity p {
text-align: center; text-align: center;
color: rgba(255, 255, 255, 0.95); color: rgba(255, 255, 255, 0.95);
@@ -1445,6 +1540,9 @@ tr {
#page-filtering .page-filters { #page-filtering .page-filters {
width: 60%; width: 60%;
float: left; } float: left; }
@media only all and (max-width: 47.938em) {
#page-filtering .page-filters {
width: 100%; } }
#page-filtering .page-search { #page-filtering .page-search {
position: relative; position: relative;
width: 40%; width: 40%;
@@ -1457,6 +1555,13 @@ tr {
top: 10px; top: 10px;
content: '\f002'; content: '\f002';
font-family: 'FontAwesome'; } font-family: 'FontAwesome'; }
@media only all and (max-width: 47.938em) {
#page-filtering .page-search {
width: 100%;
padding-top: 1rem;
padding-left: 0rem; }
#page-filtering .page-search:after {
top: 1.5rem; } }
#page-filtering .page-shortcuts { #page-filtering .page-shortcuts {
clear: both; clear: both;
padding-top: 5px; } padding-top: 5px; }
@@ -1722,6 +1827,12 @@ body.remodal_active .remodal {
.tab-bar li.active span, .tab-bar li.active a { .tab-bar li.active span, .tab-bar li.active a {
background: #EEEEEE; background: #EEEEEE;
color: #737C81; } color: #737C81; }
@media only all and (max-width: 47.938em) {
.tab-bar li {
width: 100%; }
.tab-bar li span, .tab-bar li a {
width: 100%;
text-align: center; } }
.tab-bar span, .tab-bar a { .tab-bar span, .tab-bar a {
display: inline-block; display: inline-block;
padding: 0 4rem; padding: 0 4rem;
@@ -1811,7 +1922,7 @@ body.remodal_active .remodal {
border-radius: 0; } border-radius: 0; }
.grav-mdeditor-navbar { .grav-mdeditor-navbar {
border: 1px solid #d5d5d5; border: 1px solid #d4d4d4;
border-top-right-radius: 4px; border-top-right-radius: 4px;
border-top-left-radius: 4px; border-top-left-radius: 4px;
background: #fbfbfb; } background: #fbfbfb; }
@@ -1830,8 +1941,8 @@ body.remodal_active .remodal {
.grav-mdeditor-navbar ul .mdeditor-active a { .grav-mdeditor-navbar ul .mdeditor-active a {
background: white; background: white;
cursor: auto; cursor: auto;
border-left: 1px solid #d5d5d5; border-left: 1px solid #d4d4d4;
border-right: 1px solid #d5d5d5; } border-right: 1px solid #d4d4d4; }
.grav-mdeditor-navbar ul .mdeditor-active a:hover { .grav-mdeditor-navbar ul .mdeditor-active a:hover {
background: #fff; } background: #fff; }
.grav-mdeditor-navbar ul a { .grav-mdeditor-navbar ul a {
@@ -1854,7 +1965,7 @@ body.remodal_active .remodal {
border-top-right-radius: 4px; } border-top-right-radius: 4px; }
.grav-mdeditor-content { .grav-mdeditor-content {
border: 1px solid #d5d5d5; border: 1px solid #d4d4d4;
border-top: 0; border-top: 0;
border-bottom-right-radius: 4px; border-bottom-right-radius: 4px;
border-bottom-left-radius: 4px; } border-bottom-left-radius: 4px; }
@@ -1898,7 +2009,7 @@ body.remodal_active .remodal {
[data-mode=split] .grav-mdeditor-button-code, [data-mode=split] .grav-mdeditor-button-preview { [data-mode=split] .grav-mdeditor-button-code, [data-mode=split] .grav-mdeditor-button-preview {
display: none; } display: none; }
[data-mode=split] .grav-mdeditor-code { [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 { [data-mode=split] .grav-mdeditor-code, [data-mode=split] .grav-mdeditor-code .grav-mdeditor-preview {
float: left; float: left;
width: 50%; } width: 50%; }
@@ -1994,7 +2105,7 @@ body.remodal_active .remodal {
.dropzone { .dropzone {
position: relative; position: relative;
border: 1px #d5d5d5 solid; border: 1px #d4d4d4 solid;
border-radius: 4px; border-radius: 4px;
min-height: 4rem; min-height: 4rem;
background: #fff; } background: #fff; }
@@ -2331,6 +2442,9 @@ button.toast-close-button {
padding-bottom: 1rem; padding-bottom: 1rem;
margin-bottom: 3rem; margin-bottom: 3rem;
overflow: hidden; } overflow: hidden; }
@media only all and (max-width: 47.938em) {
.gpm .gpm-item-info {
word-wrap: break-word; } }
.gpm .gpm-item-info .gpm-item-icon { .gpm .gpm-item-info .gpm-item-icon {
color: #e6e6e6; color: #e6e6e6;
position: absolute; position: absolute;

6
themes/grav/css-compiled/template.css.map
View File

File diff suppressed because one or more lines are too long

2
themes/grav/js/admin-all.js
View File

@@ -349,7 +349,7 @@ $(function () {
plugin = $('[data-gpm-plugin="' + key + '"] .gpm-name'); plugin = $('[data-gpm-plugin="' + key + '"] .gpm-name');
url = plugin.find('a'); url = plugin.find('a');
if (!plugin.find('.badge.update').length) { if (!plugin.find('.badge.update').length) {
plugin.append('<a href="' + url.attr('href') + '"><span class="badge update">' + translations.PLUGIN_ADMIN.UPDATE_AVAILABLE + '!</span></a>'); plugin.append('<a class="plugin-update-button" href="' + url.attr('href') + '"><span class="badge update">' + translations.PLUGIN_ADMIN.UPDATE_AVAILABLE + '!</span></a>');
} }
}); });

59
themes/grav/js/mobile.js Normal file
View File

@@ -0,0 +1,59 @@
$(document).ready(function(){
var large_desktop_container = 75.000;
var desktop_container= 60.000;
var tablet_container= 48.000;
var large_mobile_container= 30.000;
var mobile_only= large_desktop_container - 0.062;
var no_mobile= tablet_container;
var small_mobile_range= large_mobile_container;
var menu_state = "closed";
var admin_sidebar = document.getElementById("admin-sidebar");
var overlay = document.createElement("div");
overlay.id = "overlay";
overlay.style.position = 'fixed';
overlay.style.width = '25%';
overlay.style.height = '100%';
overlay.style.zIndex = 999999;
overlay.style.left = '75%';
document.body.getElementsByClassName('remodal-bg')[0].appendChild(overlay);
document.getElementById('overlay').style.display = 'none';
var selected = admin_sidebar.getElementsByClassName("selected")[0].getElementsByTagName("a");
//add listener to titlebar to acivate sidebar
document.getElementById("titlebar").addEventListener("click",function(){
if($(window).width() / parseFloat($("body").css("font-size"))<mobile_only && menu_state=="closed") {
//open sidebar
console.log(menu_state);
$(admin_sidebar).toggle("slide");
document.getElementById('overlay').style.display = 'inherit';
selected[0].href="javascript:void(0)";
menu_state = "open";
console.log(menu_state);
}
});
//enable sidebar closing;
admin_sidebar.addEventListener("click", function(event){
if($(window).width() / parseFloat($("body").css("font-size"))<mobile_only && menu_state == "open") {
if(event.target == admin_sidebar || event.target == selected[0]){
console.log(menu_state);
$(admin_sidebar).toggle("slide");
document.getElementById('overlay').style.display = 'none';
menu_state = "closed";
console.log(menu_state);
}
}
});
document.getElementById('overlay').addEventListener("click", function(event){
if($(window).width() / parseFloat($("body").css("font-size"))<mobile_only && menu_state == "open") {
console.log(menu_state);
$(admin_sidebar).toggle("slide");
document.getElementById('overlay').style.display = 'none';
menu_state = "closed";
console.log(menu_state);
}
});
});

112
themes/grav/scss/template/_admin.scss
View File

@@ -12,6 +12,12 @@ $update-height: 3rem;
background: $accent-bg; background: $accent-bg;
@include breakpoint(mobile-only) {
display: none;
width: 75%;
z-index: 999999;
}
a { a {
color: shade($accent-fg,20%); color: shade($accent-fg,20%);
&:hover { &:hover {
@@ -49,6 +55,10 @@ $update-height: 3rem;
@include transition(all 0.5s ease); @include transition(all 0.5s ease);
border-radius: 100%; border-radius: 100%;
float: left; float: left;
@include breakpoint(tablet-range){
float: none;
}
} }
&:hover img { &:hover img {
@@ -58,6 +68,10 @@ $update-height: 3rem;
.admin-user-names { .admin-user-names {
margin-left: 45px; margin-left: 45px;
@include breakpoint(tablet-range){
margin-left: 0;
}
h4, h5 { h4, h5 {
color: darken($accent-fg,10%); color: darken($accent-fg,10%);
margin: 0; margin: 0;
@@ -129,10 +143,18 @@ $update-height: 3rem;
color: lighten($accent-bg,65%); color: lighten($accent-bg,65%);
@include breakpoint(tablet-range){
padding-left: 20px;
}
i { i {
@include transition(all 0.2s ease); @include transition(all 0.2s ease);
color: lighten($accent-bg,55%); color: lighten($accent-bg,55%);
margin-right: 8px; margin-right: 8px;
@include breakpoint(tablet-range){
display: none;
}
} }
&:hover { &:hover {
@@ -153,6 +175,10 @@ $update-height: 3rem;
padding-left: 16px; padding-left: 16px;
border-left: 9px solid $secondary-accent-bg; border-left: 9px solid $secondary-accent-bg;
@include breakpoint(tablet-range){
padding-left: 11px;
}
i { i {
color: lighten($accent-bg,70%); color: lighten($accent-bg,70%);
} }
@@ -168,6 +194,11 @@ $update-height: 3rem;
#admin-main { #admin-main {
margin-left: $sidebar-width; margin-left: $sidebar-width;
@include breakpoint(mobile-only) {
width: 100%;
margin-left: 0;
}
.hint:after, [data-hint]:after { .hint:after, [data-hint]:after {
font-size: 0.9rem; font-size: 0.9rem;
width: 400px; width: 400px;
@@ -190,11 +221,21 @@ $update-height: 3rem;
h1 { h1 {
@extend %vertical-align; @extend %vertical-align;
@include breakpoint(mobile-only){
i:before {
content: "\f0c9";
}
}
} }
.button-bar { .button-bar {
@extend %vertical-align; @extend %vertical-align;
padding: 0; padding: 0;
@include breakpoint(mobile-only) {
display: none;
}
} }
.preview { .preview {
@@ -250,12 +291,41 @@ $update-height: 3rem;
&.grav { &.grav {
margin-top: 0; margin-top: 0;
@include transition (margin-top 0.15s ease-out); @include transition (margin-top 0.15s ease-out);
@include breakpoint(mobile-only){
position: absolute;
z-index: 9;
bottom: 0;
width: 100%;
p * {
display: none;
}
p {
font-size: 0;
button {
width: 95%;
display: inherit;
position: absolute;
top: 0;
left: 0;
margin-left: 2.5%;
margin-right: 2.5%;
padding-left: 0;
}
}
}
} }
} }
.grav-update.grav + .content-padding { .grav-update.grav + .content-padding {
top: $topbar-height + $update-height; top: $topbar-height + $update-height;
@include transition (top 0.15s ease-out); @include transition (top 0.15s ease-out);
@include breakpoint(mobile-only){
top: 5.2rem;
padding-bottom: 8rem;
padding-top: 0rem;
}
} }
.content-padding { .content-padding {
@@ -266,6 +336,10 @@ $update-height: 3rem;
right: 0; right: 0;
overflow-y: auto; overflow-y: auto;
padding: 2.5rem; padding: 2.5rem;
@include breakpoint(mobile-only) {
left: 0;
}
} }
.admin-block { .admin-block {
@@ -286,6 +360,16 @@ $update-height: 3rem;
.button-bar { .button-bar {
margin-right: $padding-default; margin-right: $padding-default;
@include breakpoint(mobile-only) {
width: 100%;
margin: -.5rem 0 1rem 0;
text-align: center;
.button {
width: 100%;
}
}
} }
} }
@@ -295,8 +379,19 @@ $update-height: 3rem;
height: 70px; height: 70px;
padding: 0 1rem; padding: 0 1rem;
float: none; float: none;
@include breakpoint(mobile-only){
height: auto;
padding: 2rem 1rem 0rem 1rem;
}
.button { .button {
@extend %vertical-align; @extend %vertical-align;
@include breakpoint(mobile-only) {
margin-left: 0 !important;
margin-bottom: .5rem;
width: 100%;
}
} }
} }
} }
@@ -336,6 +431,10 @@ $update-height: 3rem;
width: 50%; width: 50%;
margin-bottom: 2.5rem; margin-bottom: 2.5rem;
@include breakpoint(mobile-only) {
width: 100%;
}
> div { > div {
padding: 1rem 2rem; padding: 1rem 2rem;
} }
@@ -345,11 +444,19 @@ $update-height: 3rem;
.dashboard-left { .dashboard-left {
padding-right: 1.25rem; padding-right: 1.25rem;
@include breakpoint(mobile-only) {
padding-right: 0rem;
}
} }
.dashboard-right { .dashboard-right {
padding-left: 1.25rem; padding-left: 1.25rem;
@include breakpoint(mobile-only) {
padding-left: 0rem;
}
} }
#updates { #updates {
@@ -403,6 +510,11 @@ $update-height: 3rem;
.button { .button {
margin-left: 0.5rem; margin-left: 0.5rem;
@include breakpoint(tablet-range){
width: 49%;
padding: .3rem 0rem;
margin-left: 0;
}
} }
} }

6
themes/grav/scss/template/_gpm.scss
View File

@@ -46,6 +46,10 @@
margin-bottom: 3rem; margin-bottom: 3rem;
overflow: hidden; overflow: hidden;
@include breakpoint(mobile-only) {
word-wrap: break-word;
}
.gpm-item-icon { .gpm-item-icon {
color: darken($content-bg, 3%); color: darken($content-bg, 3%);
position: absolute; position: absolute;
@@ -136,4 +140,4 @@
font-weight: normal; font-weight: normal;
} }
} }
} }

15
themes/grav/scss/template/_pages.scss
View File

@@ -115,6 +115,11 @@
.page-filters { .page-filters {
width: 60%; width: 60%;
float: left; float: left;
@include breakpoint(mobile-only) {
width: 100%;
}
} }
.page-search { .page-search {
@@ -130,6 +135,16 @@
content: '\f002'; content: '\f002';
font-family: 'FontAwesome'; font-family: 'FontAwesome';
} }
@include breakpoint(mobile-only) {
width: 100%;
padding-top: 1rem;
padding-left: 0rem;
&:after {
top: 1.5rem;
}
}
} }
.page-shortcuts { .page-shortcuts {

13
themes/grav/scss/template/_tables.scss
View File

@@ -45,6 +45,15 @@ tr {
&:first-child { &:first-child {
padding-left: $padding-default; padding-left: $padding-default;
@include breakpoint(mobile-only) {
padding-left: .5rem;
.plugin-update-button {
float: left;
}
}
} }
&:last-child, &.gpm-actions { &:last-child, &.gpm-actions {
@@ -68,6 +77,10 @@ tr {
padding: 0; padding: 0;
background-color: #f7f7f7; background-color: #f7f7f7;
@include breakpoint(mobile-only){
word-wrap: break-word;
}
> .table-wrapper { > .table-wrapper {
display: none; display: none;

7
themes/grav/scss/template/_tabs.scss
View File

@@ -23,6 +23,13 @@ $tab-label-height:3.5em;
color: $content-fg; color: $content-fg;
} }
} }
@include breakpoint(mobile-only) {
width: 100%;
span, a {
width: 100%;
text-align: center;
}
}
} }
span, a { span, a {

3
themes/grav/templates/partials/base.html.twig
View File

@@ -45,6 +45,7 @@
{% do assets.addJs(theme_url~'/js/admin-all.js') %} {% do assets.addJs(theme_url~'/js/admin-all.js') %}
{% do assets.addJs(theme_url~'/js/dropdown.js') %} {% do assets.addJs(theme_url~'/js/dropdown.js') %}
{% do assets.addJs(theme_url~'/js/mobile.js') %}
{% do assets.addJs(theme_url~'/js/datepicker/kendo.custom.min.js') %} {% do assets.addJs(theme_url~'/js/datepicker/kendo.custom.min.js') %}
{% do assets.addJs(theme_url~'/js/datepicker/init.js') %} {% do assets.addJs(theme_url~'/js/datepicker/init.js') %}
@@ -74,7 +75,7 @@
{% endblock %} {% endblock %}
<section id="admin-main" > <section id="admin-main" >
<div class="titlebar secondary-accent"> <div id="titlebar" class="titlebar secondary-accent">
{% block titlebar %}{% endblock %} {% block titlebar %}{% endblock %}
</div> </div>