Add ranking view tabs and adminPageTabs styles

Author: safesploit

public/assets/css/style.css

@@ -529,7 +529,7 @@ Admin
 }
 
 .adminNav a,
-.rankingTabs a
+.adminPageTabs a
 {
 	display: inline-flex;
 	align-items: center;
@@ -545,14 +545,14 @@ Admin
 }
 
 .adminNav a:hover,
-.rankingTabs a:hover
+.adminPageTabs a:hover
 {
 	background: #eef2f7;
 	color: #111827;
 }
 
 .adminNav a.active,
-.rankingTabs a.active
+.adminPageTabs a.active
 {
 	background: #e8f0fe;
 	color: #1A73E8;
@@ -592,6 +592,17 @@ Admin
 	font-weight: bold;
 }
 
+.adminPageTabs
+{
+	display: inline-flex;
+	gap: 6px;
+	margin-bottom: 4px;
+	padding: 4px;
+	background: #ffffff;
+	border: 1px solid #dfe4ea;
+	border-radius: 10px;
+}
+
 .adminPanel
 {
 	margin-top: 18px;
@@ -693,6 +704,7 @@ Admin
 }
 
 .adminInputRow input,
+.adminSelect,
 .rankingWeights input
 {
 	width: 100%;
@@ -707,13 +719,35 @@ Admin
 }
 
 .adminInputRow input:focus,
+.adminSelect:focus,
 .rankingWeights input:focus
 {
 	border-color: #1A73E8;
 	box-shadow: 0 0 0 3px rgba(26, 115, 232, 0.14);
 }
 
-.adminPrimaryButton
+.adminSelectForm
+{
+	display: flex;
+	align-items: flex-end;
+	gap: 10px;
+	margin-bottom: 16px;
+}
+
+.adminSelectForm label
+{
+	margin-bottom: 7px;
+}
+
+.adminSelect
+{
+	min-width: 190px;
+	padding-right: 34px;
+	cursor: pointer;
+}
+
+.adminPrimaryButton,
+.adminSecondaryButton
 {
 	min-height: 42px;
 	padding: 0 16px;
@@ -732,6 +766,19 @@ Admin
 	border-color: #1765cc;
 }
 
+.adminSecondaryButton
+{
+	color: #334155;
+	background: #ffffff;
+	border-color: #cbd5e1;
+}
+
+.adminSecondaryButton:hover
+{
+	background: #f8fafc;
+	border-color: #94a3b8;
+}
+
 .adminStatGrid,
 .adminMetricStrip
 {
@@ -918,14 +965,6 @@ Admin
 	font-size: 13px;
 }
 
-.rankingTabs
-{
-	display: flex;
-	flex-wrap: wrap;
-	gap: 8px;
-	margin-bottom: 16px;
-}
-
 .rankingForm
 {
 	margin-top: 10px;

public/ranking.php

@@ -32,9 +32,11 @@
 $rankingSettings = new RankingSettings();
 $message = '';
 $error = '';
+$selectedView = selectedRankingView();
 $selectedType = selectedRankingType($rankingSettings);
 
 if ($_SERVER['REQUEST_METHOD'] === 'POST') {
+    $selectedView = 'controls';
     $postedType = isset($_POST['type']) ? (string) $_POST['type'] : 'sites';
     $selectedType = supportedRankingType($rankingSettings, $postedType);
     $token = isset($_POST['csrf_token']) ? (string) $_POST['csrf_token'] : null;
@@ -103,6 +105,13 @@ function requestIp(): string
     return (string) ($_SERVER['REMOTE_ADDR'] ?? 'unknown');
 }
 
+function selectedRankingView(): string
+{
+    $view = isset($_GET['view']) ? (string) $_GET['view'] : 'controls';
+
+    return in_array($view, ['controls', 'analytics'], true) ? $view : 'controls';
+}
+
 function selectedRankingType(RankingSettings $settings): string
 {
     $type = isset($_GET['type']) ? (string) $_GET['type'] : 'sites';
@@ -273,6 +282,17 @@ function renderWeightInputs(array $weights): string
                 </div>
             </section>
 
+            <nav class="adminPageTabs" aria-label="Ranking sections">
+                <a class="<?php echo $selectedView === 'controls' ? 'active' : ''; ?>"
+                   href="ranking.php?view=controls&type=<?php echo h($selectedType); ?>">
+                    Controls
+                </a>
+                <a class="<?php echo $selectedView === 'analytics' ? 'active' : ''; ?>"
+                   href="ranking.php?view=analytics&type=<?php echo h($selectedType); ?>">
+                    Analytics
+                </a>
+            </nav>
+
             <?php if ($message !== ''): ?>
                 <p class="adminAlert adminAlertSuccess"><?php echo h($message); ?></p>
             <?php endif; ?>
@@ -281,10 +301,11 @@ function renderWeightInputs(array $weights): string
                 <p class="adminAlert adminAlertDanger"><?php echo h($error); ?></p>
             <?php endif; ?>
 
-            <?php if ($analyticsError !== ''): ?>
+            <?php if ($selectedView === 'analytics' && $analyticsError !== ''): ?>
                 <p class="adminAlert adminAlertWarning"><?php echo h($analyticsError); ?></p>
             <?php endif; ?>
 
+            <?php if ($selectedView === 'controls'): ?>
             <section class="adminPanel">
                 <div class="adminPanelHeader">
                     <div>
@@ -293,15 +314,20 @@ function renderWeightInputs(array $weights): string
                     </div>
                 </div>
 
-                <div class="rankingTabs" role="list">
-                    <?php foreach ($rankingSettings->supportedTypes() as $type): ?>
-                        <a class="<?php echo $type === $selectedType ? 'active' : ''; ?>"
-                           href="ranking.php?type=<?php echo h($type); ?>"
-                           role="listitem">
-                            <?php echo h(ucfirst($type)); ?>
-                        </a>
-                    <?php endforeach; ?>
-                </div>
+                <form class="adminForm adminSelectForm" action="ranking.php" method="get">
+                    <input type="hidden" name="view" value="controls">
+                    <label for="ranking-type">Vertical</label>
+                    <select id="ranking-type" class="adminSelect" name="type" onchange="this.form.submit()">
+                        <?php foreach ($rankingSettings->supportedTypes() as $type): ?>
+                            <option value="<?php echo h($type); ?>" <?php echo $type === $selectedType ? 'selected' : ''; ?>>
+                                <?php echo h(ucfirst($type)); ?>
+                            </option>
+                        <?php endforeach; ?>
+                    </select>
+                    <noscript>
+                        <button class="adminSecondaryButton" type="submit">Load</button>
+                    </noscript>
+                </form>
 
                 <form action="ranking.php" method="post" class="adminForm rankingForm">
                     <input type="hidden" name="csrf_token" value="<?php echo h($csrfToken); ?>">
@@ -329,7 +355,9 @@ function renderWeightInputs(array $weights): string
                     </div>
                 </div>
             </section>
+            <?php endif; ?>
 
+            <?php if ($selectedView === 'analytics'): ?>
             <section class="adminPanel">
                 <div class="adminPanelHeader">
                     <div>
@@ -360,6 +388,7 @@ function renderWeightInputs(array $weights): string
                     </section>
                 </div>
             </section>
+            <?php endif; ?>
         </main>
     </div>
 </body>