Enhance content path feature (#2778)

- Add a maintenance section to be able to clear cache and force reload a feed.
- Add an icon next to path field to show a pop-up with the result of the content path.

Co-authored-by: Frans de Jonge <fransdejonge@gmail.com>
Co-authored-by: Alexandre Alapetite <alexandre@alapetite.fr>
Co-authored-by: Marien Fressinaud <dev@marienfressinaud.fr>

1 files changed, 96 insertions, 0 deletions

diff --git a/p/themes/base-theme/template.css b/p/themes/base-theme/template.css
index 04bc37bcb..5c67099fe 100644
--- a/p/themes/base-theme/template.css
+++ b/p/themes/base-theme/template.css
@@ -772,6 +772,73 @@ br {
 	vertical-align: middle;
 }
 
+/*=== Popup */
+#popup {
+	display: none;
+	position: fixed;
+	z-index: 1;
+	left: 0;
+	top: 0;
+	width: 100%;
+	height: 100%;
+	overflow: auto;
+	background-color: #eee;
+	background-color: rgba(0,0,0,0.4);
+}
+
+#popup-content {
+	margin: 5rem auto;
+	display: table;
+	width: 80%;
+	height: 80%;
+	overflow: hidden;
+	background-color: #fafafa;
+	border-radius: .25rem;
+	box-shadow: 0 0 1px #737373, 1px 2px 3px #4a4a4f;
+}
+
+.popup-row {
+	display: table-row;
+	width: 100%;
+}
+
+#popup-close {
+	float: right;
+	width: 27px;
+	height: 27px;
+	padding-bottom: 5px;
+	color: #aaa;
+	font-size: 28px;
+	font-weight: bold;
+}
+
+#popup-close:hover,
+#popup-close:focus {
+	color: #000;
+	text-decoration: none;
+	cursor: pointer;
+}
+
+#popup-txt {
+	display: none;
+	height: 100%;
+}
+
+#popup-iframe-container {
+	display: none;
+	height: 100%;
+}
+
+#popup-iframe-sub {
+	padding: 10px;
+	height: 100%;
+}
+
+#popup-iframe {
+	width: 100%;
+	height: 100%;
+}
+
 /*=== Navigation menu (for articles) */
 #nav_entries {
 	background: #fff;
@@ -1214,3 +1281,32 @@ pre.enclosure-description {
 		font-style: italic;
 	}
 }
+
+/*=== PREVIEW */
+/*===========*/
+.preview_controls {
+	margin-left: auto;
+	margin-right: auto;
+	padding: 1rem;
+	max-width: 1000px;
+	text-align: center;
+	background-color: #eee;
+	border: 1px solid #e0e0e0;
+	border-radius: .25rem;
+}
+
+.preview_controls label {
+	display: inline;
+}
+
+.preview_controls label input[type="radio"] {
+	margin-top: -4px;
+}
+
+.preview_controls label + label {
+	margin-left: 1rem;
+}
+
+.preview_background {
+	background-color: transparent;
+}