phpwcms Support Forum

Bei der Nutzung vom "Frontend Edit" finde ich es immer lästig, wenn Front- und Backend in verschiedenen Tabs sind und man umständlich zwischen beiden hin und her klickt.
Daher habe ich mir mal eine kleine HTML-Datei gebastelt um beides bequem im Blick haben zu können. Wer es ausprobieren möchte kann einfach den folgenden Code in in eine neue HTML-Datei kopieren und ins Wurzelverzeichnis seiner phpwcms-Seite packen:

Code: Select all

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>phpwcms Frontend Editor</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="robots" content="noindex">
<style type="text/css">
html, body { 
	margin: 0;
	padding: 0;
	height: 100%;
	overflow: hidden;
}
nav {
	display: block;
	position: absolute;
	z-index: 50000;
	height: 1px;
	width: 100%;
	top: 0;
	text-align: right;
	box-sizing: border-box;
	padding-right: 60px;
}
iframe {
	position: relative;
	width: 100%;
	height: 100%;
}
div {
	position: absolute;
	height: 100%;
	border: none;
	top: 0;
	-webkit-transition: width 500ms ease-out;
	-moz-transition: width 500ms ease-out;
	-ms-transition: width 500ms ease-out;
	transition: width 500ms ease-out;
}
div#backendbereich {
	right: 0;
	width: 55%;
}
div#frontendbereich {
	width: 45%;
}
#frontendschalter:checked ~ div#backendbereich {
	width: 0%;
}
#frontendschalter:checked ~ div#frontendbereich {
	width: 100%;
}
label {
	border: solid 1px #999;
	display: block;
	width: 22px;
	height: 22px;
	box-sizing: border-box;
	position: absolute;
	right: 20px;
	top: 7px;
	border-radius: 3px;
	box-shadow: 2px 2px 2px rgba(0,0,0,0.1);
	color: rgba(0,0,0,0);
	-webkit-transition: margin-top 500ms ease-in-out 1s;
	-moz-transition: margin-top 500ms ease-in-out 1s;
	-ms-transition: margin-top 500ms ease-in-out 1s;
	transition: margin-top 500ms ease-in-out 1s;
}
label#bschalter {
	right: 50px;
	background: url(data:image/gif;base64,R0lGODlhEAAQAMQfACROFdzy00yoLbDhnUSVKFe+OV3CPMXpuLPioitfGordWnfRTXTLXLzmqX3UUYTaVjyDJGTEQaPdjI/gXXDLSc7sw2rKRdjwz9PuyVG6NTRzH4zUc9/z2H3OZf///////yH5BAEAAB8ALAAAAAAQABAAAAWH4CeOXumNKOkJLFGm4ipwXHARbrrSzaQMmArkFJtVJj7Fw4E4aIg75MSzXFCcp1WgoVCUHFbLppEoES6Ph8kUMZDNGIdjXTIUEGUPpCKxlixtBQwIAFkQBxaAHgZ2GYRQGgcSbXYFGRsDhSQaDQ0dGRkMA5lEJAkJCAijAJowJaysLzAqsighADs=) no-repeat center center #ddf;
}
label#fschalter {
	background: url(data:image/gif;base64,R0lGODlhEAAQAMQWAP+OkP9pXMhIPn8vKP+ZnZo5MPhiUP/IxP/b2f7Nyq5ANv5/dv+TivRgTP+2sf+zr//Avv/i3+FTRmglIP/V0v///wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAEAABYALAAAAAAQABAAAAV/oCWOVVmNKFlJrFCm4ipFNCK46UpDBPFQCcUpNktQegQAxXEoDHWUylEpbZ5WCF6Usl0wIIOSAAEoR6WLQAAsppQXZ4ra4AhXFIkHXLo1LBwTVwoHW2pbgE8FBz9zBhQMD4EkBRAQCw0NCw+RQyQDAw4OmxOSMCWkpC8wKqooIQA7) no-repeat center center #fff;
}
label#bschalter:hover {
	background-color: #8c8c;
}
label#fschalter:hover {
	background-color: #fcc;
}
#backendschalter:checked ~ nav > label#bschalter,
#frontendschalter:checked ~ nav > label#fschalter {
	margin-top: -50px;
}
input {
	margin-top: -50px;
	position: absolute;
}

/* Anpassungen für zu schmale Browserbreiten */

@media screen and (max-width: 1024px) {
	div#backendbereich {
		width: 100%;
	}
	div#frontendbereich {
		width: 100%;
	}
	#frontendschalter:checked ~ div#backendbereich {
		width: 0%;
	}
	#frontendschalter:checked ~ div#frontendbereich {
		width: 100%;
	}
}
</style>
</head>

<body>
<input type="radio" name="umschalter" value="leer" id="backendschalter" checked="checked">
<input type="radio" name="umschalter" value="leer" id="frontendschalter">
<nav>
  <label id="bschalter" for="backendschalter"> </label>
  <label id="fschalter" for="frontendschalter"> </label>
</nav>
<div id="frontendbereich">
  <iframe name="frontend" src="./"></iframe>
</div>
<div id="backendbereich">
  <iframe name="backend" src="./login.php"></iframe>
</div>
</body>
</html>

Oben rechts gibt es auch einen Schalter um das Backend auszublenden um die Seite in voller Breite sehen zu können.

Was haltet ihr davon?

Edit: Ich habe den Frame für das Backend mal von phpwcms.php nach login.php geändert.

Hallöchen top,

habs gleich mal getestet und das ist ein Klasse Idee, vorallem beim arbeiten mit 'nem 27 Zoll iMac passt das gut.

Vielen Dank!

Olli mags mir verzeihen, aber ich habe mir auch bereits die phpwcms.php etwas angepasst. Zum einen packe ich den Newslink mit oben in die Navi rein, sodass man nicht über Artikel gehen muss.
Und zum zweiten gibt es ja immernoch keine Möglichkeit, Links über die Link ID zu verknüpfen, daher habe ich mir einfach ein Pop Over mit der Artikel Struktur gebastelt, damit ich darin bei Mouse Over die ID des zu verlinkenden Menüpunkt oder Artikel sehen kann.
Ist eigentlich das Datei Popup, worin nun die Seitenstruktur angezeigt wird.

Einfach nach dem <body> Tag einsetzen:

Code: Select all

<!-- special link -->
<div style="position:fixed;z-index:999999999;left:0;top:200px;width:80px;height:80px;background: rgba(255, 255, 255, 0.9);text-align: center;display: table">
	<a href="#" onclick="openFileBrowser('phpwcms.php?do=articles');return false;" style="width:80px;height:80px;display:table-cell;vertical-align: middle" title="Nur Id's von Menupunkten oder Artikel auswählen">Struktur<br />einblenden</a>
</div>
<!-- //special link -->

Vielleicht hilfts etwas ;o)

Vg Andreas

Schön, dass es gefällt.

Ich habe jetzt ergänzend in /include/inc_lib/admin.functions.inc.php an zwei Stellen das target="_blank" mit target="frontend" ersetzt.

So öffnen die Preview-Links der Seitenstruktur nicht mehr im neuem Tab, sondern im linken iFrame. Das ist praktisch wenn man Seiten noch nicht öffentlich verlinkt hat und trotzdem in der geteilten Ansicht öffnen möchte.

phpwcms Support Forum

pimp my frontend edit

pimp my frontend edit

Re: pimp my frontend edit

Re: pimp my frontend edit