From mboxrd@z Thu Jan 1 00:00:00 1970 Return-Path: <zxce3@gnuweeb.org> X-Spam-Checker-Version: SpamAssassin 3.4.6 (2021-04-09) on gnuweeb.org X-Spam-Level: X-Spam-Status: No, score=-1.2 required=5.0 tests=ALL_TRUSTED,DKIM_SIGNED, DKIM_VALID,DKIM_VALID_AU,DKIM_VALID_EF,URIBL_BLOCKED autolearn=ham autolearn_force=no version=3.4.6 DKIM-Signature: v=1; a=rsa-sha256; c=relaxed/simple; d=gnuweeb.org; s=default; t=1682710509; bh=ZLIYx/KM7jhF9wt6XubXuSamTFyCdTyYWCyFRJD5sQE=; h=From:To:Cc:Subject:Date:In-Reply-To:References; b=jSM2Nx+RT0ddgpGNy81wTlvVHb6PQwk8Xzpr2nEUPGEbVBQ5v85v27VBAB4BjujLB 0e+VVdPNZYhbdMDqBr/1h7YFRPW/SOKPEFlRH3qKIUA4jZ+20lK9TaFermAEXczfVx D05z302hUGhaNIWkqTwUDv8dNuwPcCWoS/viql6MH3tCvhCLhCVpSb6GxKE9tIMM1A XrMMYZjj9tU7zH18vufJheTU8/dkFcgCI7h2cthtyuRr79G83B02leoFhPXRVNbYX6 /RYWIe9YBc1hFwrqOMvwbxNe9nL17lBukV3PFIE1xrnLVZdXSxYTm4di17dR8aAlRf v0XftXsf+58NA== Received: from localhost.localdomain (unknown [114.125.26.160]) by gnuweeb.org (Postfix) with ESMTPSA id A46F0245A6A; Sat, 29 Apr 2023 02:35:07 +0700 (WIB) From: Memet Zx <zxce3@gnuweeb.org> To: Ammar Faizi <ammarfaizi2@gnuweeb.org> Cc: Memet Zx <zxce3@gnuweeb.org>, GNU/Weeb Mailing List <gwml@vger.gnuweeb.org>, Memet Zx <memetpea25@gmail.com> Subject: [PATCH gwspamd 1/3] gwspamd: web: Refactor Settings Page Layout and UI Date: Sat, 29 Apr 2023 02:34:56 +0700 Message-Id: <20230428193458.366546-2-zxce3@gnuweeb.org> X-Mailer: git-send-email 2.34.1 In-Reply-To: <20230428193458.366546-1-zxce3@gnuweeb.org> References: <20230428193458.366546-1-zxce3@gnuweeb.org> MIME-Version: 1.0 Content-Transfer-Encoding: 8bit List-Id: <gwml.vger.gnuweeb.org> The previous layout consisted of a table with a list of settings options, while the new layout includes a sidebar with a list of settings options and a larger content area to display the selected option. The code also includes new CSS classes to style the UI, and the JavaScript functions were updated to handle the new layout. Additionally, the default selected option was changed to "profile" if no section is specified in the URL. Link: https://t.me/GNUWeeb/742183 Link: https://t.me/GNUWeeb/742193 Signed-off-by: Memet Zx <zxce3@gnuweeb.org> --- web/views/pages/settings.php | 42 +++++++++++++++++------------------- 1 file changed, 20 insertions(+), 22 deletions(-) diff --git a/web/views/pages/settings.php b/web/views/pages/settings.php index e37ebfc..dd52d7a 100644 --- a/web/views/pages/settings.php +++ b/web/views/pages/settings.php @@ -26,50 +26,48 @@ if (isset(SECTIONS[$section])) { } } </script> - -<div id="main-box" class="content"> - <h1 class="content-title">Settings</h1> - <div id="back-to-menu-box" style="display:none;"> - <a class="btn btn-action" onclick="load_section_url('default', event);" href="?">Back to settings</a> - </div> - <table style="display:none;" id="set-default"> +<div class="row"> +<div class="col-lg-3"> + <div class="content"> + <h2 class="content-title">Settings</h2> <?php foreach (SECTIONS as $sec => $title) : ?> - <tr> - <td> - <a class="btn btn-action mt-5" onclick="load_section_url('<?= $sec; ?>', event);" href="?section=<?= e($sec); ?>"><?= e($title); ?></a> - </td> - </tr> + <a class="btn sidebar-link mt-5 setting-btn" id="btn-<?= e($sec); ?>" onclick="load_section_url('<?= $sec; ?>', event);" href="?section=<?= e($sec); ?>"><?= e($title); ?></a> <?php endforeach; ?> - </table> + </div> +</div> +<div class="col-lg-9"> <?php foreach (SECTIONS as $key => $title) : ?> - <div class="setting-box" style="display:none;" id="set-<?= e($key); ?>"> + <div class="content" style="display:none;" id="set-<?= e($key); ?>"> <?php require __DIR__ . "/settings/{$key}.php"; ?> </div> <?php endforeach; ?> </div> - +</div> <script> - const sections = <?= json_encode(array_merge(array_keys(SECTIONS), ["default"])); ?>; - const back = gid("back-to-menu-box"); + const sections = <?= json_encode(array_keys(SECTIONS)); ?>; function hide_all_sections() { - back.style.display = "none"; for (let i = 0; i < sections.length; i++) gid("set-" + sections[i]).style.display = "none"; + let settings_btn = document.getElementsByClassName("setting-btn"); + for (let i = 0; i < sections.length; i++) + settings_btn[i].classList.remove("btn-primary"); } function load_section(section) { hide_all_sections(); gid("set-" + section).style.display = ""; - back.style.display = (section === "default") ? "none" : ""; + gid("btn-" + section).classList.add("btn-primary"); } function load_section_url(section, e = null) { - if (e !== null) - e.preventDefault(); load_section(section); + if (e !== null) { + e.preventDefault(); + e.target.classList.add("btn-primary"); + } history.pushState(null, null, "?section=" + section); } - load_section("<?= isset(SECTIONS[$section]) ? $section : "default" ?>"); + load_section("<?= isset(SECTIONS[$section]) ? $section : "profile" ?>"); </script> -- Memet Zx