search

bootiful-media-mogul / mogul-client

0 stars 0 forks source link

make the panels on the right have an optional full screen modal mode #7

Closed joshlong closed 1 month ago

joshlong commented 1 month ago

so imagine you want to dive into the transcriptiion stuff. click the button and it appears in the trasncripts panel on the right. click the modal and now the panel animates into a fully rounded (not just top left and top right) centered panel in the middle of the page, with everything under neath it turned obscured by a black 100% x 100% div with like 50% opacity. click the button again and it animates back into the panel on the right.

joshlong commented 1 month ago

i drew some icons in illustrator (attached)

Image Image Image Image Image Image

joshlong commented 1 month ago

a proposed solution:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Maximizable Panel</title>
    <style>
        /* Grid layout */
        .grid-container {
            display: grid;
            grid-template-columns: 1fr 300px;  /* Main content and a sidebar on the right */
            height: 100vh;
            padding: 10px;
        }

        /* Normal panel style (in the grid, flush right) */
        .panel {
            background-color: #f0f0f0;
            padding: 20px;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
            transition: all 0.5s ease;  /* Smooth transition */
            z-index: 1;
            border-radius: 8px;
        }

        /* Maximized (modal-like) state */
        .panel.maximized {
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 80%;
            height: 80%;
            box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
            z-index: 1000; /* Bring it to the front */
            border-radius: 10px;
        }
    </style>
</head>
<body>

<div class="grid-container">
    <div id="panel" class="panel">
        <button id="maximize-btn">Maximize</button>
        <!-- Panel content goes here -->
        <p>Some content inside the panel. Resize me!</p>
    </div>
</div>

<script>
    document.getElementById('maximize-btn').addEventListener('click', function() {
        const panel = document.getElementById('panel');

        if (panel.classList.contains('maximized')) {
            // Restore to original state
            panel.classList.remove('maximized');
            this.textContent = 'Maximize';
        } else {
            // Maximize the panel
            panel.classList.add('maximized');
            this.textContent = 'Restore';
        }
    });
</script>

</body>
</html>