jsuto · tanc · Oct 2, 2026 · Oct 3, 2026
@@ -31,10 +31,12 @@
    * Apply theme to document
    */
   function applyTheme(theme) {
+    // Bootstrap 5.3 native colour mode. Bootstrap themes every component from
+    // this attribute, so piler.css only needs the brand-specific overrides.
     if (theme === THEME_DARK) {
-      document.documentElement.setAttribute('data-theme', 'dark');
+      document.documentElement.setAttribute('data-bs-theme', 'dark');
     } else {
-      document.documentElement.removeAttribute('data-theme');
+      document.documentElement.removeAttribute('data-bs-theme');
     }
 
     // Update icon

@@ -1,23 +1,52 @@
-const resizer = document.querySelector('.resizer');
-const upperPane = document.querySelector('.pane-upper');
-const lowerPane = document.querySelector('.pane-lower');
-const containerPanes = document.querySelector('.container-panes');
-
-let isResizing = false;
-
-resizer.addEventListener('mousedown', (e) => {
-  isResizing = true;
-  document.body.classList.add('no-select');
-});
-
-document.addEventListener('mousemove', (e) => {
-  if (!isResizing) return;
-  let offsetY = e.clientY - containerPanes.getBoundingClientRect().top;
-  upperPane.style.height = `${offsetY}px`;
-  lowerPane.style.height = `calc(100% - ${offsetY + resizer.offsetHeight}px)`;
-});
-
-document.addEventListener('mouseup', () => {
-  isResizing = false;
-  document.body.classList.remove('no-select');
-});
+/* Drag handle between the result list and the preview pane.
+   The panes live in a column flex container; once the user drags we take them
+   out of the flex-grow distribution (flex: 0 0 auto) and give each an explicit
+   height, otherwise the flex algorithm recalculates the inline height away and
+   the drag has no visible effect. */
+(function () {
+  const resizer = document.querySelector('.resizer');
+  const upperPane = document.querySelector('.pane-upper');
+  const lowerPane = document.querySelector('.pane-lower');
+  const containerPanes = document.querySelector('.container-panes');
+
+  if (!resizer || !upperPane || !lowerPane || !containerPanes) return;
+
+  const MIN_PANE = 120;
+  let isResizing = false;
+
+  resizer.addEventListener('mousedown', (e) => {
+    isResizing = true;
+    document.body.classList.add('no-select');
+    e.preventDefault();
+  });
+
+  document.addEventListener('mousemove', (e) => {
+    if (!isResizing) return;
+
+    const containerRect = containerPanes.getBoundingClientRect();
+    const resizerRect = resizer.getBoundingClientRect();
+
+    // The handle has vertical margins too; count them so the explicit pane
+    // heights sum to exactly the container height.
+    const cs = getComputedStyle(resizer);
+    const marginTop = parseFloat(cs.marginTop) || 0;
+    const marginBottom = parseFloat(cs.marginBottom) || 0;
+    const resizerTotal = resizerRect.height + marginTop + marginBottom;
+
+    let upperHeight = e.clientY - containerRect.top - marginTop;
+    const maxUpper = containerRect.height - resizerTotal - MIN_PANE;
+
+    upperHeight = Math.max(MIN_PANE, Math.min(upperHeight, maxUpper));
+    const lowerHeight = containerRect.height - upperHeight - resizerTotal;
+
+    upperPane.style.flex = '0 0 auto';
+    lowerPane.style.flex = '0 0 auto';
+    upperPane.style.height = upperHeight + 'px';
+    lowerPane.style.height = lowerHeight + 'px';
+  });
+
+  document.addEventListener('mouseup', () => {
+    isResizing = false;
+    document.body.classList.remove('no-select');
+  });
+})();
@@ -40,12 +40,12 @@
               <input type="hidden" name="order" id="order" value="0" />
               <input type="hidden" name="ref" id="ref" value="" />
               <input type="hidden" name="prefix" id="prefix" value="" />
-              <input type="text" class="form-control" id="_search" name="_search" placeholder="<?php print $text_enter_search_terms; ?>" />
+              <input type="text" class="form-control" id="_search" name="_search" placeholder="<?php print $text_enter_search_terms; ?>" aria-label="<?php print $text_enter_search_terms; ?>" />
             </div>
           </div>
           <div class="col<?php if(!FULL_GUI) { ?>-2<?php } ?> me-0 pe-0">
-            <div class="d-flex align-items-center justify-content-start">
-              <button id="button_search" class="btn btn-large btn-danger btn-search" onclick="Piler.expert(this); return false;"><i class="bi bi-search"></i><?php if(FULL_GUI) { print '&nbsp;' . $text_search; } ?></button>
+            <div class="d-flex align-items-center justify-content-start searchbuttons">
+              <button id="button_search" class="btn btn-large btn-success btn-search" onclick="Piler.expert(this); return false;"><i class="bi bi-search"></i><?php if(FULL_GUI) { print '&nbsp;' . $text_search; } ?></button>
               <?php if(FULL_GUI) { ?>
               <button id="button_expert" class="btn btn-large btn-secondary btn-search" data-bs-toggle="modal" data-bs-target="#advancedSearchModal"><?php print $text_advanced_search; ?></button>
 

@@ -21,9 +21,7 @@
 
 <?php include_once DIR_BASE . 'templates/common/common.tpl'; ?>
 
-<div id="menu">
-    <?php print $menu; ?>
-</div>
+<?php print $menu; ?>
 
 <div class="searchcontainer text-center">
 

@@ -4,8 +4,8 @@
          <div class="col">
           <div class="d-flex align-items-center">
 
-          <?php if(FULL_GUI) { ?>
-           <a class="menulink"<?php if($settings['branding_url']) { ?> target="_blank" href="<?php print $settings['branding_url']; ?>" title="<?php print $settings['branding_text']; ?>"<?php } ?>><?php if($settings['branding_logo']) { ?><img class="branding_logo" src="<?php print $settings['branding_logo']; ?>" alt="<?php print $settings['branding_text']; ?>"/><?php } ?></a>
+          <?php if(FULL_GUI && ($settings['branding_logo'] || $settings['branding_url'])) { ?>
+            <a class="menulink"<?php if($settings['branding_url']) { ?> target="_blank" href="<?php print $settings['branding_url']; ?>" title="<?php print ($settings['branding_text'] ? $settings['branding_text'] : SITE_NAME); ?>"<?php } ?>><?php if($settings['branding_logo']) { ?><img class="branding_logo" src="<?php print $settings['branding_logo']; ?>" alt="<?php print ($settings['branding_text'] ? $settings['branding_text'] : SITE_NAME); ?>"/><?php } ?></a>
           <?php } ?>
 
         <?php if($admin_user) { ?>
@@ -59,7 +59,7 @@
            <button id="theme-toggle" class="menulink" title="Toggle Dark Mode" aria-label="Toggle Dark Mode">
              <i class="bi bi-moon-fill" id="theme-icon"></i>
            </button>
-           <a href="<?php print PATH_PREFIX; ?>logout.php" class="menulink" title="<?php print $text_logout; ?>"><i class="bi bi-door-open"></i></a>
+           <a href="<?php print PATH_PREFIX; ?>logout.php" class="menulink" title="<?php print $text_logout; ?>" aria-label="<?php print $text_logout; ?>"><i class="bi bi-door-open"></i></a>
           </div>
          </div>
        </div>

@@ -1,6 +1,6 @@
 <div class="container text-start">
   <div class="row">
-    <div class="col mb-5 d-flex align-items-center" style="background: #d9edf7; color: #3a87ad; height: 40px;">
+    <div class="col mb-5 d-flex align-items-center health-refresh">
       <strong><?php print $text_refresh_period; ?>:</strong>&nbsp;<?php print HEALTH_REFRESH; ?> sec
     </div>
   </div>

@@ -35,12 +35,12 @@
             <input type="hidden" name="relocation" value="<?php if(isset($_GET['route']) && !preg_match("/^login/", $_GET['route']) ) { if(isset($_SERVER['REDIRECT_URL'])) { print $_SERVER['REDIRECT_URL']; } else { print $_SERVER['QUERY_STRING']; } } ?>" />
 
             <div class="form-floating">
-              <input name="username" type="email" class="form-control" id="username" placeholder="name@example.com" required autofocus>
-              <label for="floatingInput"><?php print $text_email; ?></label>
+              <input name="username" type="email" class="form-control" id="username" placeholder="name@example.com" autocomplete="username" required autofocus>
+              <label for="username"><?php print $text_email; ?></label>
             </div>
             <div class="form-floating">
-              <input name="password" type="password" class="form-control" id="password" placeholder="Password">
-              <label for="floatingPassword"><?php print $text_password; ?></label>
+              <input name="password" type="password" class="form-control" id="password" placeholder="Password" autocomplete="current-password">
+              <label for="password"><?php print $text_password; ?></label>
             </div>
 
         <?php if(CAPTCHA_FAILED_LOGIN_COUNT > 0 && $failed_login_count > CAPTCHA_FAILED_LOGIN_COUNT) { ?>

@@ -131,7 +131,7 @@
                 <a href="#" class="btn btn-link" data-bs-toggle="modal" data-bs-target="#deleteModal" title="<?php print $text_remove; ?>"><i class="bi bi-trash text-danger"></i></a>
             <?php } ?>
 
-                <input type="text" id="tag_value" name="tag_value" class="tagtext" />
+                <input type="text" id="tag_value" name="tag_value" class="tagtext form-control form-control-sm" aria-label="<?php print $text_tag_selected_messages; ?>" />
                 <a href="#" class="btn btn-link" onclick="Piler.tag_search_results('<?php print $text_tagged; ?>');" title="<?php print $text_tag_selected_messages; ?>"><i class="bi bi-tags tag" title="Tag"></i></a>
 
           </div>