feat(admin): integrasi tooltip panduan dan shortcut navigasi langsung ke menu CPT
This commit is contained in:
Mas Budi Kusuma
+104
-22
@@ -159,15 +159,58 @@ function edukarsa_settings_page_html() {
|
||||
<style>
|
||||
.edukarsa-admin-wrap { margin-top: 15px; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, sans-serif; }
|
||||
.edukarsa-admin-layout { display: grid; grid-template-columns: 1fr 320px; gap: 25px; align-items: start; }
|
||||
.edukarsa-card { background: #fff; border: 1px solid #e2e8f0; border-radius: 10px; box-shadow: 0 4px 6px -1px rgba(0,0,0,0.05); margin-bottom: 25px; overflow: hidden; }
|
||||
.edukarsa-card-header { padding: 16px 24px; border-bottom: 1px solid #f1f5f9; background: #fafafa; display: flex; justify-content: space-between; align-items: center; }
|
||||
.edukarsa-card { background: #fff; border: 1px solid #e2e8f0; border-radius: 10px; box-shadow: 0 4px 6px -1px rgba(0,0,0,0.05); margin-bottom: 25px; overflow: visible; }
|
||||
.edukarsa-card-header { padding: 16px 24px; border-bottom: 1px solid #f1f5f9; background: #fafafa; display: flex; justify-content: space-between; align-items: center; border-radius: 10px 10px 0 0; }
|
||||
.edukarsa-card-header h2 { margin: 0; font-size: 16px; font-weight: 700; color: #1e293b; display: flex; align-items: center; gap: 8px; }
|
||||
.edukarsa-card-body { padding: 24px; }
|
||||
|
||||
.switch-row { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 8px; margin-bottom: 12px; }
|
||||
.switch-row-inline { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; margin-bottom: 15px; }
|
||||
.switch-label { font-weight: 600; font-size: 13px; color: #334155; }
|
||||
.edukarsa-switch { position: relative; display: inline-block; width: 42px; height: 22px; margin: 0; }
|
||||
.switch-row-inline { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; margin-bottom: 15px; }
|
||||
.switch-label-wrap { display: flex; flex-direction: column; gap: 5px; }
|
||||
.switch-label { font-weight: 700; font-size: 13px; color: #334155; display: inline-flex; align-items: center; gap: 6px; }
|
||||
|
||||
/* Shortcut Badge Link */
|
||||
.cpt-shortcut-link { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; font-weight: 700; color: #0b4a8e; text-decoration: none; background: #e0f2fe; padding: 2px 9px; border-radius: 12px; width: fit-content; transition: all 0.2s ease; border: 1px solid #bae6fd; }
|
||||
.cpt-shortcut-link:hover { background: #0b4a8e; color: #ffffff !important; border-color: #0b4a8e; }
|
||||
|
||||
/* Tooltip Native CSS */
|
||||
.tooltip-hint { position: relative; cursor: help; display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; border-radius: 50%; background: #94a3b8; color: #fff; font-size: 10px; font-weight: 800; }
|
||||
.tooltip-hint:hover { background: #0b4a8e; }
|
||||
.tooltip-hint .tooltip-text {
|
||||
visibility: hidden;
|
||||
opacity: 0;
|
||||
position: absolute;
|
||||
bottom: 140%;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
background-color: #0f172a;
|
||||
color: #ffffff;
|
||||
text-align: left;
|
||||
padding: 8px 12px;
|
||||
border-radius: 6px;
|
||||
font-size: 11px;
|
||||
font-weight: 500;
|
||||
line-height: 1.45;
|
||||
white-space: normal;
|
||||
width: 220px;
|
||||
z-index: 1000;
|
||||
box-shadow: 0 10px 25px rgba(0,0,0,0.2);
|
||||
transition: opacity 0.2s ease, visibility 0.2s ease;
|
||||
pointer-events: none;
|
||||
}
|
||||
.tooltip-hint .tooltip-text::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 100%;
|
||||
left: 50%;
|
||||
margin-left: -5px;
|
||||
border-width: 5px;
|
||||
border-style: solid;
|
||||
border-color: #0f172a transparent transparent transparent;
|
||||
}
|
||||
.tooltip-hint:hover .tooltip-text { visibility: visible; opacity: 1; }
|
||||
|
||||
.edukarsa-switch { position: relative; display: inline-block; width: 42px; height: 22px; margin: 0; flex-shrink: 0; }
|
||||
.edukarsa-switch input { opacity: 0; width: 0; height: 0; }
|
||||
.slider-round { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: #cbd5e1; transition: .25s; border-radius: 22px; }
|
||||
.slider-round:before { position: absolute; content: ""; height: 16px; width: 16px; left: 3px; bottom: 3px; background-color: white; transition: .25s; border-radius: 50%; box-shadow: 0 1px 2px rgba(0,0,0,0.2); }
|
||||
@@ -231,14 +274,26 @@ function edukarsa_settings_page_html() {
|
||||
|
||||
<div class="switch-row-inline" style="margin-top: 20px;">
|
||||
<div class="switch-row">
|
||||
<span class="switch-label">Tampilkan Slider Atas</span>
|
||||
<div class="switch-label-wrap">
|
||||
<div class="switch-label">
|
||||
<span>Tampilkan Slider Atas</span>
|
||||
<span class="tooltip-hint">?<span class="tooltip-text">Gambar & URL link banner dikelola pada modul 🌟 Slider Banner.</span></span>
|
||||
</div>
|
||||
<a href="<?php echo admin_url('edit.php?post_type=slider'); ?>" class="cpt-shortcut-link">Kelola Slider ↗</a>
|
||||
</div>
|
||||
<label class="edukarsa-switch">
|
||||
<input type="checkbox" name="edukarsa_tampil_slider" value="1" <?php checked(1, get_option('edukarsa_tampil_slider', 1)); ?>>
|
||||
<span class="slider-round"></span>
|
||||
</label>
|
||||
</div>
|
||||
<div class="switch-row">
|
||||
<span class="switch-label">Tampilkan 3 Kotak Statistik</span>
|
||||
<div class="switch-label-wrap">
|
||||
<div class="switch-label">
|
||||
<span>Tampilkan 3 Kotak Statistik</span>
|
||||
<span class="tooltip-hint">?<span class="tooltip-text">Konfigurasi teks, angka capaian, dan ikon diatur langsung pada form di bawah.</span></span>
|
||||
</div>
|
||||
<span style="font-size: 11px; color: #64748b;">Form Pengaturan Bawah ↓</span>
|
||||
</div>
|
||||
<label class="edukarsa-switch">
|
||||
<input type="checkbox" class="section-toggle" data-target="#stats-settings-box" name="edukarsa_tampil_stats" value="1" <?php checked(1, get_option('edukarsa_tampil_stats', 1)); ?>>
|
||||
<span class="slider-round"></span>
|
||||
@@ -317,34 +372,59 @@ function edukarsa_settings_page_html() {
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 3. Program, Milestone & Keunggulan -->
|
||||
<!-- 3. Program, Milestone & Keunggulan (DENGAN TOOLTIP & SHORTCUT) -->
|
||||
<div class="edukarsa-card">
|
||||
<div class="edukarsa-card-header">
|
||||
<h2>⭐ 3. Program, Milestones, & Keunggulan</h2>
|
||||
</div>
|
||||
<div class="edukarsa-card-body">
|
||||
<div class="switch-row-inline">
|
||||
|
||||
<!-- Milestone Switch & Shortcut -->
|
||||
<div class="switch-row">
|
||||
<span class="switch-label">Tampilkan 4 Milestone</span>
|
||||
<div class="switch-label-wrap">
|
||||
<div class="switch-label">
|
||||
<span>Tampilkan 4 Milestone</span>
|
||||
<span class="tooltip-hint">?<span class="tooltip-text">Data angka prestasi & capaian diisi melalui menu 🏆 Milestone di sidebar admin.</span></span>
|
||||
</div>
|
||||
<a href="<?php echo admin_url('edit.php?post_type=milestone'); ?>" class="cpt-shortcut-link">Kelola Milestone ↗</a>
|
||||
</div>
|
||||
<label class="edukarsa-switch">
|
||||
<input type="checkbox" name="edukarsa_tampil_milestone" value="1" <?php checked(1, get_option('edukarsa_tampil_milestone', 1)); ?>>
|
||||
<span class="slider-round"></span>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<!-- Program Switch & Shortcut -->
|
||||
<div class="switch-row">
|
||||
<span class="switch-label">Tampilkan Program (3 Grid)</span>
|
||||
<div class="switch-label-wrap">
|
||||
<div class="switch-label">
|
||||
<span>Tampilkan Program (3 Grid)</span>
|
||||
<span class="tooltip-hint">?<span class="tooltip-text">Daftar jurusan & program kurikulum dikelola melalui menu 📚 Program Kami di sidebar admin.</span></span>
|
||||
</div>
|
||||
<a href="<?php echo admin_url('edit.php?post_type=program'); ?>" class="cpt-shortcut-link">Kelola Program ↗</a>
|
||||
</div>
|
||||
<label class="edukarsa-switch">
|
||||
<input type="checkbox" name="edukarsa_tampil_program" value="1" <?php checked(1, get_option('edukarsa_tampil_program', 1)); ?>>
|
||||
<span class="slider-round"></span>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<!-- Keunggulan Switch & Shortcut -->
|
||||
<div class="switch-row">
|
||||
<span class="switch-label">Tampilkan Keunggulan (9 Grid)</span>
|
||||
<div class="switch-label-wrap">
|
||||
<div class="switch-label">
|
||||
<span>Tampilkan Keunggulan (9 Grid)</span>
|
||||
<span class="tooltip-hint">?<span class="tooltip-text">9 butir keunggulan institusi dikelola melalui menu ⭐ Keunggulan di sidebar admin.</span></span>
|
||||
</div>
|
||||
<a href="<?php echo admin_url('edit.php?post_type=keunggulan'); ?>" class="cpt-shortcut-link">Kelola Keunggulan ↗</a>
|
||||
</div>
|
||||
<label class="edukarsa-switch">
|
||||
<input type="checkbox" name="edukarsa_tampil_keunggulan" value="1" <?php checked(1, get_option('edukarsa_tampil_keunggulan', 1)); ?>>
|
||||
<span class="slider-round"></span>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="form-grid-2" style="margin-top: 15px;">
|
||||
@@ -429,14 +509,23 @@ function edukarsa_settings_page_html() {
|
||||
<div class="edukarsa-card-body">
|
||||
<div class="switch-row-inline">
|
||||
<div class="switch-row">
|
||||
<span class="switch-label">Tampilkan CTA Banner</span>
|
||||
<div class="switch-label-wrap">
|
||||
<span class="switch-label">Tampilkan CTA Banner</span>
|
||||
<span style="font-size: 11px; color: #64748b;">Pengaturan Khusus PPDB</span>
|
||||
</div>
|
||||
<label class="edukarsa-switch">
|
||||
<input type="checkbox" class="section-toggle" data-target="#cta-settings-box" name="edukarsa_tampil_cta" value="1" <?php checked(1, get_option('edukarsa_tampil_cta', 1)); ?>>
|
||||
<span class="slider-round"></span>
|
||||
</label>
|
||||
</div>
|
||||
<div class="switch-row">
|
||||
<span class="switch-label">Tampilkan Berita Kampus</span>
|
||||
<div class="switch-label-wrap">
|
||||
<div class="switch-label">
|
||||
<span>Tampilkan Berita Kampus</span>
|
||||
<span class="tooltip-hint">?<span class="tooltip-text">Berita otomatis diambil dari menu 'Pos' bawaan WordPress.</span></span>
|
||||
</div>
|
||||
<a href="<?php echo admin_url('edit.php'); ?>" class="cpt-shortcut-link">Kelola Berita ↗</a>
|
||||
</div>
|
||||
<label class="edukarsa-switch">
|
||||
<input type="checkbox" name="edukarsa_tampil_news" value="1" <?php checked(1, get_option('edukarsa_tampil_news', 1)); ?>>
|
||||
<span class="slider-round"></span>
|
||||
@@ -478,14 +567,12 @@ function edukarsa_settings_page_html() {
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 6. FOOTER LENGKAP & FLEKSIBEL (UPGRADED) -->
|
||||
<!-- 6. Footer & Kontak -->
|
||||
<div class="edukarsa-card">
|
||||
<div class="edukarsa-card-header">
|
||||
<h2>📞 6. Pengaturan Footer & Media Sosial Lengkap</h2>
|
||||
</div>
|
||||
<div class="edukarsa-card-body">
|
||||
|
||||
<!-- Identitas Footer -->
|
||||
<div class="form-grid-2">
|
||||
<div class="form-field-group">
|
||||
<label>Logo Footer (Opsional, kosongkan jika pakai logo header)</label>
|
||||
@@ -502,7 +589,7 @@ function edukarsa_settings_page_html() {
|
||||
|
||||
<div class="form-field-group">
|
||||
<label>Deskripsi Singkat Kampus / Visi Ringkas (Kolom 1)</label>
|
||||
<textarea name="edukarsa_footer_desc" rows="3" placeholder="Deskripsi singkat mengenai institusi..."><?php echo esc_textarea(get_option('edukarsa_footer_desc', 'Institusi pendidikan terakreditasi unggul yang berdedikasi mencetak lulusan berkarakter, inovatif, dan berdaya saing global.')); ?></textarea>
|
||||
<textarea name="edukarsa_footer_desc" rows="3" placeholder="Deskripsi singkat mengenai institusi..."><?php echo esc_textarea(get_option('edukarsa_footer_desc', 'Institusi pendidikan terakreditasi unggul yang berdedikasi mencetak generasi berkarakter cerdas, kompetitif, dan berintegritas.')); ?></textarea>
|
||||
</div>
|
||||
|
||||
<div class="form-field-group">
|
||||
@@ -528,7 +615,6 @@ function edukarsa_settings_page_html() {
|
||||
|
||||
<h4 style="margin: 25px 0 12px; font-size:14px; color:#0b4a8e; border-bottom:1px solid #e2e8f0; padding-bottom:8px;">Jaringan Media Sosial Resmi</h4>
|
||||
|
||||
<!-- FB -->
|
||||
<div class="switch-row">
|
||||
<span class="switch-label">Facebook</span>
|
||||
<div style="display:flex; align-items:center; gap:12px; width:70%;">
|
||||
@@ -540,7 +626,6 @@ function edukarsa_settings_page_html() {
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- IG -->
|
||||
<div class="switch-row">
|
||||
<span class="switch-label">Instagram</span>
|
||||
<div style="display:flex; align-items:center; gap:12px; width:70%;">
|
||||
@@ -552,7 +637,6 @@ function edukarsa_settings_page_html() {
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- YT -->
|
||||
<div class="switch-row">
|
||||
<span class="switch-label">YouTube</span>
|
||||
<div style="display:flex; align-items:center; gap:12px; width:70%;">
|
||||
@@ -564,7 +648,6 @@ function edukarsa_settings_page_html() {
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- TikTok -->
|
||||
<div class="switch-row">
|
||||
<span class="switch-label">TikTok</span>
|
||||
<div style="display:flex; align-items:center; gap:12px; width:70%;">
|
||||
@@ -576,7 +659,6 @@ function edukarsa_settings_page_html() {
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- X / Twitter -->
|
||||
<div class="switch-row">
|
||||
<span class="switch-label">X (Twitter)</span>
|
||||
<div style="display:flex; align-items:center; gap:12px; width:70%;">
|
||||
|
||||
Reference in New Issue
Block a user