Commit b6a51cc4 authored by vertighel's avatar vertighel
Browse files

feat: footer log resizable via drag handle 



Footer uses flex-column layout; log terminal fills remaining height
dynamically. Drag handle (⠿) next to Clear updates footer height,
body padding-bottom and toast margin in sync.

Co-Authored-By: default avatarClaude Sonnet 4.6 <noreply@anthropic.com>
parent 4383bd62

noctua/web/pages/base.html

+58 −22
Original line number Diff line number Diff line
@@ -39,7 +39,6 @@ 
            <span class="navbar-toggler-icon"></span>

        </button>



        

        <!-- Nav links -->

        <div class="collapse navbar-collapse" id="mainNav">

            <ul class="navbar-nav ms-3 gap-1">
@@ -57,7 +56,6 @@ 
                  </a>

                </li>



                

                <li class="nav-item">

                    <a class="nav-link {% if request.endpoint == 'web.status_monitor' %}active{% endif %}"

                       href="{{ url_for('web.status_monitor') }}">
@@ -102,7 +100,7 @@ 
                            </a>

                        </li>

                    </ul>



                </li>



                <li>

                  <a class="nav-link {% if request.endpoint == 'web.webcam' %}active{% endif %}"
@@ -119,11 +117,6 @@ 
                </li>



            </ul>



            <!-- <div class="ms-auto d-none d-md-block" style="opacity:0.08; pointer-events:none;"> -->

            <!--     <img src="{{ url_for('web.static', filename='img/noctua.svg') }}" -->

            <!--          width="100" height="100" alt=""> -->

            <!-- </div> -->

        </div>

    </nav>
@@ -138,22 +131,65 @@ 
         style="z-index:1100; margin-bottom:160px;"></div>



    <!-- ── Sticky footer log terminal ────────────────────────────────────── -->

    <footer class="footer fixed-bottom bg-black border-top border-secondary shadow-lg"

    <footer id="log-footer"

            class="fixed-bottom bg-black border-top border-secondary shadow-lg d-flex flex-column"

            style="height:160px;">

        <div class="d-flex justify-content-between align-items-center px-3 py-1 bg-dark border-bottom border-secondary">



        <!-- Header row: labels + resize handle + controls -->

        <div class="d-flex justify-content-between align-items-center px-3 bg-dark border-bottom border-secondary"

             style="flex-shrink:0; height:32px;">

            <small class="text-muted fw-bold">SYSTEM LOGS</small>

            <div class="d-flex gap-3 align-items-center">

                <small id="ws-status" class="text-muted">connecting…</small>

                <button class="btn btn-sm text-muted"

                        onclick="document.getElementById('log-terminal').innerHTML=''">&times; Clear</button>

                <!-- Resize handle -->

                <span id="footer-resize-handle"

                      title="Trascina per ridimensionare"

                      style="cursor:ns-resize; color:#555; font-size:1.1rem;

                             line-height:1; user-select:none; padding:0 2px;">⠿</span>

                <button class="btn btn-sm text-muted p-0"

                        onclick="document.getElementById('log-terminal').innerHTML=''">

                    &times; Clear

                </button>

            </div>

        </div>



        <!-- Log content: fills remaining height via flex -->

        <div id="log-terminal"

             class="p-2 overflow-auto"

             style="height:125px; font-family:'Courier New',monospace; font-size:0.75rem;">

             class="p-2 overflow-auto flex-grow-1"

             style="min-height:0;">

        </div>

    </footer>



    <script>

    (function () {

        const handle = document.getElementById('footer-resize-handle');

        const footer = document.getElementById('log-footer');

        const toasts = document.getElementById('notification-container');

        let startY, startH;



        handle.addEventListener('mousedown', function (e) {

            startY = e.clientY;

            startH = footer.offsetHeight;

            e.preventDefault();



            function onMove(e) {

                // Dragging up → larger footer.

                const newH = Math.max(32, Math.min(window.innerHeight * 0.7,

                                                    startH + startY - e.clientY));

                footer.style.height        = newH + 'px';

                document.body.style.paddingBottom = newH + 'px';

                toasts.style.marginBottom         = newH + 'px';

            }

            function onUp() {

                window.removeEventListener('mousemove', onMove);

                window.removeEventListener('mouseup',   onUp);

            }

            window.addEventListener('mousemove', onMove);

            window.addEventListener('mouseup',   onUp);

        });

    }());

    </script>



    <!-- Prima i fogli di utilità principali caricati come moduli -->

    <script type="module" src="{{ url_for('web.static', filename='js/ui-core.js') }}"></script>

    <script type="module" src="{{ url_for('web.static', filename='js/ui.js') }}"></script>