From c0e81698bbc1c2bc4f3ebb46d6b75c48f54d35c4 Mon Sep 17 00:00:00 2001 From: Ari Stathopoulos Date: Mon, 8 Apr 2024 14:05:46 +0300 Subject: [PATCH] Basic structure for popups --- assets/css/admin.css | 41 ++++++++++++++++++++++++------ classes/popups/class-badges.php | 30 ++++++++++++++++++++++ classes/popups/class-popup.php | 44 +++++++++++++++++++++++++++++++++ views/admin-page.php | 2 +- 4 files changed, 109 insertions(+), 8 deletions(-) create mode 100644 classes/popups/class-badges.php create mode 100644 classes/popups/class-popup.php diff --git a/assets/css/admin.css b/assets/css/admin.css index 381f87172..65c4a197a 100644 --- a/assets/css/admin.css +++ b/assets/css/admin.css @@ -60,6 +60,7 @@ color: var(--prpl-color-text); font-size: var(--prpl-font-size-base); line-height: 1.4 + position: relative; } /*------------------------------------*\ @@ -483,15 +484,13 @@ button.prpl-info-icon { } /*------------------------------------*\ - Popups. + Popups overlay. \*------------------------------------*/ -#prpl-popup-container, #prpl-popup-body-overlay { display: none; - position: fixed; -} - -#prpl-popup-body-overlay { + position: absolute; + margin-left: -20px; + padding-left: 20px; top: 0; left: 0; width: 100%; @@ -504,8 +503,36 @@ button.prpl-info-icon { display: block; } +/*------------------------------------*\ + Popups generic styles. +\*------------------------------------*/ +#prpl-popup-container { + display: none; + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + background: #fff; + border: 1px solid var(--prpl-color-gray-3); + border-radius: var(--prpl-border-radius); + padding: var(--prpl-padding); + z-index: 1001; + min-width: 300px; + min-height: 200px; +} + .prpl-popup-open #prpl-popup-container { display: block; z-index: 1001; } -/* prpl-popup-badges-details */ + +/*------------------------------------*\ + Popups generic styles. +\*------------------------------------*/ +#prpl-popup-badges-details { + display: none; +} + +body.prpl-popup-open.prpl-popup-badges-details #prpl-popup-badges-details { + display: block; +} diff --git a/classes/popups/class-badges.php b/classes/popups/class-badges.php new file mode 100644 index 000000000..0eaf60fc3 --- /dev/null +++ b/classes/popups/class-badges.php @@ -0,0 +1,30 @@ + + Test + render(); + } + + /** + * Render the widget content. + */ + public function render() { + ?> +
+ the_content(); ?> +
+
-
+