jrenslin/md-cms
Archived
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Added editing function for pages (using tinymce).

Browse Source 
Added editing pages for footer, banner, aside.
Added page overview.
Added public page.
Added settings page.
Added generator for embed pseudocodes.
This commit is contained in:
Joshua Ramon Enslin
2018-06-13 20:07:24 +02:00
committed by Stefan Rohde-Enslin
parent 227c91963e
commit a49746ab10
114 changed files with 4422 additions and 47 deletions
Download Patch File Download Diff File Expand all files Collapse all files

117
edit/themes/default/default.css
View File

@ -2,7 +2,6 @@
* Default theme for the backend of md:cms.
*/
/****************************
* Load fonts
*/
@ -49,10 +48,26 @@ textarea:focus,
input:focus { background: #FFF; box-shadow: 1px 1px 3px #607D8B; }
input[type="range"] { background: inherit; border: 0; }
.mceEditor { min-height: calc(80vh - 10em); }
.mce-container, .mcePanel { box-sizing: border-box !important; }
table { width: 100%; border-collapse: collapse; }
th { text-align: left; }
.noPadding { padding: 0 0 0 0 !important; }
.invisible { display: none !important; }
input.h1Input { display: block; width: 100%; font-size: 1.5em; border-radius: 0; }
#inputSection > * { display: block; width: 100%; }
.withAside { display: table; width: 100%; }
.withAside > * { display: table-cell; vertical-align: top; }
.withAside > aside { width: 300px; border: 1px solid #D6D6D6; border-width: 0 0 1px 1px; }
fieldset { margin: 1em 0 0 0; padding: 1em; border: 1px solid #D6D6D6; }
fieldset > legend { color: #AAA; font-style: italic; }
fieldset:empty { display: none; }
/************
* Tables for providing an overview.
*/
@ -60,11 +75,11 @@ th { text-align: left; }
table.overviewtable { height: auto; }
table.overviewtable thead { position: sticky; top: 0px; border-bottom: 3px solid #D6D6D6; }
table.overviewtable th,
table.overviewtable th,
table.overviewtable td { padding: .35em; }
table.overviewtable tr th:first-child,
table.overviewtable tr th:first-child,
table.overviewtable tr td:first-child { padding-left: .7em; }
table.overviewtable tr th:last-child,
table.overviewtable tr th:last-child,
table.overviewtable tr td:last-child { padding-right: .7em; text-align: right; }
table.overviewtable tr { transition: background .4s; }
@ -108,6 +123,19 @@ table.obj_cha_maintable td.shortInputLong input:nth-child(2) { width: calc(100%
.helpToolTip:before { content: "?"; }
.helpToolTip:hover { background: #C0CA33; color: #FFF; }
/************
* Indented lists.
*/
#indentedList ul { margin: 0; padding: 0; list-style: none; }
#indentedList li a { display: block; width: 100%; padding: .7em 1.2em;
border-bottom: 1px solid #D6D6D6; transition: background .4s; }
#indentedList li a:hover { background: #F2F2F2; }
#indentedList ul ul li > *:first-child { padding-left: 2.4em; }
#indentedList ul ul ul li > *:first-child { padding-left: 3.6em; }
.notPublic { background: linear-gradient(to left, #666 5%, white , white, white, white, white, white 90%); }
/************
* Edit line
*/
@ -122,7 +150,6 @@ p.changesStored { background: #7CB342; color: #FFF; }
p.changesDeleted { background: #E53935; color: #FFF; }
p.changesAborted { background: #C62828; color: #FFF; }
/****************************
* Main Structuring Elements
*/
@ -132,7 +159,7 @@ p.changesAborted { background: #C62828; color: #FFF; }
* Displays current position and offers access
*/
#mainHeader { display: table; width: 100%; border-bottom: 1px solid #D6D6D6; }
#mainHeader { display: table; width: 100%; border-bottom: 1px solid #D6D6D6; box-shadow: 2px 2px 4px #D6D6D6; }
#mainHeader > * { display: table-cell; padding: .5rem; color: #666; vertical-align: middle; }
#mainHeader h1 { color: #333; }
@ -144,6 +171,7 @@ p.changesAborted { background: #C62828; color: #FFF; }
#mainHeader #toggleNavigation:before { content:'\2630'; }
#mainHeader #uploadFile:before { content:'\2630'; }
#mainHeader #logoutLink:before { content:'\01F6B6'; }
/************
* Main wrapper
@ -153,30 +181,34 @@ p.changesAborted { background: #C62828; color: #FFF; }
div#mainWrapper { display: block; }
@media screen and (min-width: 75em) {
div#mainWrapper { display: table; width: 100%; }
div#mainWrapper { display: table; width: 100%; }
div#mainWrapper > * { vertical-align: top; }
}
/************
* Main navigation
*/
#mainNav { display: block; border: 1px solid #D6D6D6; border-width: 0; }
#mainNav { display: block; background: #FCFCFC; border: 1px solid #D6D6D6; border-width: 0; }
#mainNav > * { display: block; border-bottom: 1px solid #D6D6D6; }
#mainNav > * > span { display: block; padding: .7em 1em; font-weight: bold; transition: background .2s; }
#mainNav > * > span:hover { background: #F2F2F2; }
#mainNav > * > div { position: relative; }
#mainNav > * > div > *:first-child { position: relative; display: block; padding: .7em 1em; font-weight: bold; transition: background .2s; }
#mainNav > * > div > *:first-child:hover { background: #F2F2F2; }
#mainNav > * > div > *:not(:first-child) { position: absolute; right: 1em; top: 50%; transform: translate(0, -50%);
display: block; padding: .1em .5em; background: #EEE; color: #888; border-radius: 100%;
transition: background .4s, color .4s; }
#mainNav > * > div > *:not(:first-child):hover { background: #AAA; color: #000; }
#mainNav > * > div > *:nth-child(2) { right: 1em; }
#mainNav > * > div > *:nth-child(3) { right: 3em; }
#mainNav > * > div > *:first-child { position: relative; display: block; padding: .7em 1em; transition: background .2s; }
#mainNav > * > div > *:first-child:hover { background: #F2F2F2; }
@media screen and (min-width: 75em) {
#mainNav { display: table-cell; width: 250px; border-width: 0 1px 0 0; }
#mainNav { display: table-cell; width: 250px; border-width: 0 1px 1px 0; }
}
/************
@ -184,3 +216,64 @@ div#mainWrapper { display: block; }
*/
main { padding: .5em 5em 3em 3em; }
/************
* Editing Static Pages
*/
#staticPageOptions > * { display: block; padding: .5em 1rem; }
#staticPageOptions > .labelLine { display: table; width: 100%; }
#staticPageOptions .helpToolTip { width: 2em; text-align: center; }
#staticPageOptions > .labelLine > * { display: table-cell; }
#staticPageOptions label { font-weight: bold; }
#staticPageOptions select { display: block; width: 100%; }
#staticPageOptions button { display: block; width: 100%; background: #0277BD; color: #FFF; transition: background .4s; }
#staticPageOptions button:hover { background: #039BE5; }
#pageTools > #embedGenerator { display: block;
margin-bottom: 1em; padding-bottom: 1em;
box-sizing: content-box; border-bottom: 1px solid #D6D6D6; }
#embedGenerator > * { display: block; width: 100%; }
#embedGenerator .buttonLike { cursor: pointer; }
#pageTools > * { padding: 0 1rem; }
/************
* Login Page
*/
#loginPage body { position: absolute; left: 50%;
width: 400px; max-width: 100%; transform: translate(-50%); }
#loginPage form > * { display: block; width: 100%; }
#errorMsg { display: block; padding: .8em; text-align: center;
background: #E53935; color: #FFF; box-shadow: 1px 1px 3px #757575; }
/************
* Error page.
*/
#errorPage body { position: absolute; left: 50%; top: 50%;
width: 400px; max-width: 100%; transform: translate(-50%, -50%); }
#errorPage body > * { display: block; padding: 2em; background: #212121; color: #FFF;
font-weight: bold; text-align: center; border-radius: .5em; }
/************
* Overlays (activated with JS)
*/
.overlay { position: fixed; left: 0; top: 0; display: table; width: 100%; height: 100%;
background: rgba(0, 0, 0, .8); color: #FFF;
animation: fade-in .4s; }
.overlay > * { display: table-cell; padding: 0 5em; vertical-align: middle; }
form[action="files.php"] > * { display: block; }
/****************************
* Animations
*/
@keyframes fade-in {
from { opacity: 0.4; }
to { opacity: 1.0; }
}

14
edit/themes/imports.css
View File

@ -1,14 +1,16 @@
/* ========
| Notifications
|= ======== */
@import 'slider.css';
/**************
* Notifications
*/
p.notifLine { animation: fade-in-and-vanish 2.4s; position: fixed; left: 0; top: 0; display: block; width: 100%;
margin: 0; background: rgba(0,0,0,.8); color: #FFF; text-align: center; font-weight: bold; opacity: 0;
box-sizing: border-box; box-shadow: 0 1.5px 2px rgba(0,0,0,.06),0 1.5px 1.5px rgba(0,0,0,.06); z-index: 0; }
/* ========
| New tooltip
|= ======== */
/**************
* New tooltip
*/
.newToolTip { position: fixed; display: none !important; min-width: 300px !important; max-width: 600px;
background: #FFF !important; text-align: left; font-size: .95rem;

47
edit/themes/slider.css Normal file
View File

@ -0,0 +1,47 @@
/* Switches */
/* The switch - the box around the slider */
.switch {
position: relative; display: inline-block; width: 70px; height: 30px;
}
/* Hide default HTML checkbox */
.switch input {display:none;}
/* The slider */
.slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #CCC;
transition: .4s;
}
.slider:before { position: absolute; content: ""; height: 24px; width: 24px; left: 4px; bottom: 3px; background-color: white; transition: .4s; }
input:checked + .slider { background-color: #2196F3; }
input:focus + .slider { box-shadow: 0 0 1px #2196F3; }
input:checked + .slider:before { left: calc(100% - 30px); }
/* Rounded sliders */
.slider.round { border-radius: 17px; }
.slider.round:before { border-radius: 50%; }
.radioSliderYN { position: relative; display: inline-block; width: 30px; height: 17px; }
.radioSliderYN input { display: none; }
.radioSliderYN input:checked + label { display: block; }
.sliderOn,
.sliderOff { position: relative; display: inline-block; width: 30px; height: 17px; background-color: #CCC; }
.sliderOff { background: #D50000; }
.sliderOn { background: #00C853; }
.sliderOn:before { transform: translateX(13px); }
.sliderOn:before,
.sliderOff:before { position: absolute; content: ""; height: 10px; width: 10px; left: 4px; bottom: 20%; background-color: white; transition: .4s; }