Description

Hiding panels - Motivation

MVP Requirements

1. Each user should be able to hide or show the panels independently from other users.
2. The choice of showing or hiding the panels should be kept (when the user refreshes the page, the choice still remains).
3. The buttons responsible for showing/hiding should be visible in the interface only if the page layout contains at least one column.
4. The buttons' text & look would change when clicked.

Look

Version 1 - A button for each panel

The left and right buttons for hiding the panels are pretty discrete, staying above the panels (on large screens).

The left side panel being hidden:

The right side panel being hidden:

Version 2 - A button that controls both panels

We would be talking about a Focus mode (top-left). This is how it would look before it's clicked:

Implementation ideas & issues

Idea 1: One button for both panels + display:none;

# not ideal    # easiest

If there was only one button that would control both panels (version 2), an idea of implementation is the following:

<button id="hidePanelsButton">Hide Panels</button>

<script type="text/javascript">
// Initialize the boolean variable
var showPanels = true;

// Function to hide/show the panels and update the button text
function togglePanels() {
    var leftPanels = document.getElementById('leftPanels');
    var rightPanels = document.getElementById('rightPanels');
    var button = document.getElementById('hidePanelsButton');

    if (showPanels) {
        leftPanels.classList.add('hidden');
        rightPanels.classList.add('hidden');
        button.textContent = "Show Panels";
    } else {
        leftPanels.classList.remove('hidden');
        rightPanels.classList.remove('hidden');
        button.textContent = "Hide Panels";
    }

    // Toggle the showPanels variable
    showPanels = !showPanels;
}

// Attach the click event to the button
document.getElementById('hidePanelsButton').addEventListener('click', togglePanels);
</script>

Idea 2: Two Buttons + visibility:none;

# ideal   # working    # not responsive

This works the best on large screens, but on small screens there will be a lot of space remaining at the end of the page.

The button for showing or hiding the left panels would have the code something like this:

<button id="toggleButton">Hide Left Panels</button>
    
    <script>
        // Initial state
        var showLeftPanels = true;

        // Function to toggle the panel's visibility and change button text
        function togglePanel() {
            var panel = document.getElementById("leftPanels");
            var toggleButton = document.getElementById("toggleButton");
            
            if (showLeftPanels) {
                panel.style.visibility = "hidden";
                toggleButton.textContent = "Show Left Panels";
            } else {
                panel.style.visibility = "visible";
                toggleButton.textContent = "Hide Left Panels";
            }
            
            showLeftPanels = !showLeftPanels; // Toggle the boolean value
        }
        
        // Attach the function to the button click event
        var toggleButton = document.getElementById("toggleButton");
        toggleButton.addEventListener("click", togglePanel);
    </script>

Idea 3: Two Buttons + display:none;

# ideal      # css issue ?  

This might be the best one if it worked right, because it doesn't make the page very long on small screens.

Issues

If we set display:none; to the leftPanels, the left panels dissapear, but the right ones shift weirdly:

If we set display:none to the rigthPanels, the right panels dissapear & nothing bad happens to the left side panels.

This might be because of the HTML structure & CSS (float:left)

Further development - Full Requirements - Minimizing panels

It would be nice for users to change easily and individually their page layout between all the 4 categories already existent, keeping the MVP idea of minimizing the panels in case there is at least a column.

To switch easily between the 4 categories, we'd need only one user prefference value that takes 4 values.

We'd need 4 small buttons (one for each layout)

When clicking on one of the buttons, the behaviour from the current page on configuring panels  happens:

This wouldn't control the size of the panels (but it could if we are able to do this easily).

Look