diff --git a/css/admin.css b/css/admin.css index b548a67..eafddcd 100644 --- a/css/admin.css +++ b/css/admin.css @@ -1,63 +1,215 @@ .so_qmp-tab-content { - margin-top: 20px; + margin-top: 20px; } .nav-tab-wrapper { - margin-bottom: 20px; + margin-bottom: 20px; } #page-translations-table { - width: 100%; - border-collapse: collapse; + width: 100%; + border-collapse: collapse; } #page-translations-table th, #page-translations-table td { - padding: 10px; - border: 1px solid #ccc; + padding: 10px; + border: 1px solid #ccc; } #page-translations-table th { - background-color: #f1f1f1; - font-weight: bold; + background-color: #f1f1f1; + font-weight: bold; } .page-mapping-row select { - width: 100%; + width: 100%; } /* QML Premium "Number of Languages" control (disabled upsell). */ .so_qmp-premium-field { - position: relative; - display: inline-block; + position: relative; + display: inline-block; } .so_qmp-premium-field .so_qmp-faded { - opacity: 0.4; + opacity: 0.4; } .so_qmp-premium-overlay { - position: absolute; - top: 50%; - left: 50%; - transform: translate(-50%, -50%); - padding: 2px 10px; - font-size: 12px; - font-weight: 600; - color: #2271b1; - background: #f0f6fc; - border: 1px solid #72aee6; - border-radius: 4px; - white-space: nowrap; + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + padding: 2px 10px; + font-size: 12px; + font-weight: 600; + color: #2271b1; + background: #f0f6fc; + border: 1px solid #72aee6; + border-radius: 4px; + white-space: nowrap; } /* Grouped per-language field labels (General Settings tab). */ .so_qmp-field-label { - display: block; - margin: 0 0 4px; - font-weight: 600; + display: block; + margin: 0 0 4px; + font-weight: 600; } .so_qmp-field-label:not(:first-child) { - margin-top: 10px; + margin-top: 10px; +} + +/* Lang-reference paragraph styled to match h2 */ +p.so_qmp-lang-ref-link { + font-size: 1.3em; + font-weight: 600; +} + +/* ------------------------------------------------------- + Page title with inline logo +------------------------------------------------------- */ +.so_qmp-page-title { + display: flex; + align-items: center; + gap: 8px; +} + +.so_qmp-title-logo { + width: 32px; + height: 32px; + flex-shrink: 0; +} + +/* ------------------------------------------------------- + Two-column layout: main content + Premium sidebar +------------------------------------------------------- */ +.so_qmp-content-with-sidebar { + display: flex; + align-items: flex-start; + gap: 24px; +} + +.so_qmp-main-content { + flex: 1 1 auto; + min-width: 0; +} + +/* ------------------------------------------------------- + Premium sidebar panel +------------------------------------------------------- */ +.so_qmp-premium-sidebar { + flex: 0 0 240px; + width: 240px; +} + +.so_qmp-sidebar-inner { + background: #fff; + border: 1px solid #c3c4c7; + border-radius: 4px; + padding: 16px; +} + +.so_qmp-sidebar-header { + display: flex; + align-items: center; + gap: 10px; + margin-bottom: 12px; +} + +.so_qmp-sidebar-logo { + width: 64px; + height: 64px; + flex-shrink: 0; +} + +.so_qmp-sidebar-title { + font-weight: 600; + font-size: 0.95em; + line-height: 1.3; +} + +.so_qmp-sidebar-features { + margin: 0 0 16px 0; + padding: 0 0 0 1.2em; +} + +.so_qmp-sidebar-features li { + margin-bottom: 6px; + font-size: 0.9em; +} + +.so_qmp-sidebar-btn { + display: block; + text-align: center; +} + +/* ------------------------------------------------------- + Inline Premium teaser (Number of Languages row) +------------------------------------------------------- */ +.so_qmp-premium-teaser { + display: inline-flex; + align-items: center; + gap: 10px; + margin-left: 12px; + vertical-align: middle; +} + +.so_qmp-teaser-logo { + width: 24px; + height: 24px; + flex-shrink: 0; +} + +.so_qmp-teaser-text { + font-size: 0.9em; + line-height: 1.4; +} + +.so_qmp-teaser-text strong { + display: block; +} + +.so_qmp-upgrade-btn .dashicons { + font-size: 18px; + width: 16px; + height: 14px; + margin-right: 3px; +} + +/* ------------------------------------------------------- + Language table: N/A cell and lang-ref row +------------------------------------------------------- */ +.so_qmp_table.form-table th { + padding: 15px 10px; + width: 150px; +} +.so_qmp-na-cell { + vertical-align: middle; +} + +.so_qmp-na { + color: #787c82; + font-style: italic; +} + +.so_qmp-lang-ref-row td { + font-size: 1.2em; + font-style: italic; + font-weight: 600; +} + +/* ------------------------------------------------------- + General Settings: constrain language input width so the + folder column and Premium sidebar are not pushed out. +------------------------------------------------------- */ +.so_qmp_table .regular-text { + max-width: 200px; +} + +/* Push the Premium sidebar down */ +.so_qmp-premium-sidebar { + margin-top: 170px; } diff --git a/images/.gitkeep b/images/.gitkeep new file mode 100644 index 0000000..e69de29 diff --git a/images/qml-free-64.png b/images/qml-free-64.png new file mode 100644 index 0000000..bbdf2ec Binary files /dev/null and b/images/qml-free-64.png differ diff --git a/images/qml-premium-48.png b/images/qml-premium-48.png new file mode 100644 index 0000000..04f1088 Binary files /dev/null and b/images/qml-premium-48.png differ diff --git a/images/qml-premium-64.png b/images/qml-premium-64.png new file mode 100644 index 0000000..0c3a7c2 Binary files /dev/null and b/images/qml-premium-64.png differ diff --git a/src/Admin/SettingsPage.php b/src/Admin/SettingsPage.php index e8e3d98..b4e8e5f 100644 --- a/src/Admin/SettingsPage.php +++ b/src/Admin/SettingsPage.php @@ -30,9 +30,20 @@ public function render(): void { return; } settings_errors( 'so_qmp_messages' ); + + // __FILE__ is src/Admin/SettingsPage.php; dirname twice reaches the src dir, + // and plugin_dir_url() takes its dirname (the plugin root) and appends a slash. + $images_url = plugin_dir_url( dirname( dirname( __FILE__ ) ) ) . 'images/'; ?>
-

+ +

+ + +

+

@@ -41,101 +52,139 @@ public function render(): void { -
-

here.', 'quick-multilingual' ), - [ 'a' => [ 'href' => [], 'target' => [] ] ] - ), - 'https://gist.github.com/JamieMason/3748498' - ); - ?>

+
-
- - - - - - - - - - - - - - - - - - - - - - - - - - -
-
+ + + + + + - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ + +
+ + + +
+
+
+ + +
+ + + + + +
+
+ + +