Solved Bottom footer navbar button extend

[DownPW]

Small request for my forum or here @phenomlab

I would like the bottom bar of the site to be hidden with a button and for it to appear/disappear after a click or a mouseover with a small animation that doesn’t take too many resources.

It would also be nice if the setting was kept in the DOM session if possible so that the user doesn’t have to mess with it all the time.

We could imagine that it is active by default and if the user does not want it, he hides it. It will simply remain the button on the left or right side

Thanks

[phenomlab]

Instructions

1. Go to /admin/extend/widgets and locate the “Global Footer” widget
2. At the very top of the existing code you have in that widget, add

<div id="console-nav-tab"><i class="fa-solid fa-angles-left"></i></div>

3. Add this CSS

div#console-nav-tab {
position: fixed;
    bottom: 0px;
    z-index: 900;
    height: 30px;
    left: 0px;
}
div#console-nav-tab i {
    font-size: 16px;
    margin-left: 10px;
    line-height: 2.0 !important;
}
.toBottom {
   bottom: 0px !important;
}

Note, that you probably need to modify the existing CSS ID floatleft to accommodate the additional DIV and icon. For example

#floatleft {
    float: left;
    padding-left: 30px; /*additional left padding to support additional DIV and icon */
    font-size: 80%;
    line-height: 2.0;
    font-weight: 600;
    display: flex;
}

4. Go to /admin/appearance/customise#custom-js and add this block of code (bottom is fine, or wherever you want to place it)

$(document).ready(function() {
    $(window).on('action:ajaxify.end', function(data) {
        var getState = localStorage.getItem("footer");
        if (getState === "hidden") {
            $("#console-nav-footer").hide();
            $("#console-nav-tab i").addClass("fa-solid fa-angles-right");
            $('.pagination-block').addClass("toBottom");
        } else {
            $("#console-nav-tab i").addClass("fa-solid fa-angles-left");
            $('.pagination-block').removeClass("toBottom");
        }
        $("#console-nav-tab").click(function() {
            $("#console-nav-footer").toggle(250, function() {
                if ($("#console-nav-footer").is(":hidden")) {
                    localStorage.setItem("footer", "hidden");
                    $("#console-nav-tab i").addClass("fa-solid fa-angles-right");
                    $('.pagination-block').addClass("toBottom");
                } else {
                    localStorage.setItem("footer", "shown");
                    $("#console-nav-tab i").addClass("fa-solid fa-angles-left");
                    $('.pagination-block').removeClass("toBottom");
                }
            });
            $("i", this).toggleClass("fa-solid fa-angles-left fa-solid fa-angles-right");
        });
    });
});

5. Test, and make necessary modifications to suit your own environment

[phenomlab]

@DownPW said in Bottom footer navbar button extend:

We could imagine that it is active by default and if the user does not want it, he hides it. It will simply remain the button on the left or right side

So are you looking for a button on the footer that when clicked will remove from the screen with an animation, but leave just enough so that it can be clicked to make it reappear again with the same animation ?

[DownPW]

@phenomlab said in Bottom footer navbar button extend:

@DownPW said in Bottom footer navbar button extend:

We could imagine that it is active by default and if the user does not want it, he hides it. It will simply remain the button on the left or right side

So are you looking for a button on the footer that when clicked will remove from the screen with an animation, but leave just enough so that it can be clicked to make it reappear again with the same animation ?

Exactly

[phenomlab]

@DownPW Right. I’m on it (well, tomorrow now)

[DownPW]

@phenomlab hé hé

[phenomlab]

@DownPW said in Bottom footer navbar button extend:

Exactly

Something like this ?

[DownPW]

@phenomlab

clearly that ^^

[phenomlab]

@DownPW ok, good. Let me write the code to record the session state (in the same way that the theme engine works) and I’ll release the code, plus CSS.

[DownPW]

hell yeah
Simple to modify ?

Example: put the button on the left or right

[phenomlab]

@DownPW yes, that will be a simple CSS modification

[phenomlab]

@DownPW said in Bottom footer navbar button extend:

Example: put the button on the left or right

Looks better on the left I think - more natural

[DownPW]

@phenomlab yes

[phenomlab]

@DownPW I’ll make some small adjustments to the final code to accommodate this. Just need to write the session cookie data, then I’ll release the code.

[phenomlab]

@DownPW Can you let me know if you used the same code for the footer as what is here ? I think this is the case, but want to check. There needs to be some modifications to this code to support the footer toggle.

[phenomlab]

Updated position of collapse/expand so it’s on the left for a more natural feel

[DownPW]

Very great

[DownPW]

@phenomlab said in Bottom footer navbar button extend:

Can you let me know if you used the same code for the footer as what is here ?

yes Mark, with minor adjustement.

[phenomlab]

Instructions

1. Go to /admin/extend/widgets and locate the “Global Footer” widget
2. At the very top of the existing code you have in that widget, add

<div id="console-nav-tab"><i class="fa-solid fa-angles-left"></i></div>

3. Add this CSS

div#console-nav-tab {
position: fixed;
    bottom: 0px;
    z-index: 900;
    height: 30px;
    left: 0px;
}
div#console-nav-tab i {
    font-size: 16px;
    margin-left: 10px;
    line-height: 2.0 !important;
}
.toBottom {
   bottom: 0px !important;
}

Note, that you probably need to modify the existing CSS ID floatleft to accommodate the additional DIV and icon. For example

#floatleft {
    float: left;
    padding-left: 30px; /*additional left padding to support additional DIV and icon */
    font-size: 80%;
    line-height: 2.0;
    font-weight: 600;
    display: flex;
}

4. Go to /admin/appearance/customise#custom-js and add this block of code (bottom is fine, or wherever you want to place it)

$(document).ready(function() {
    $(window).on('action:ajaxify.end', function(data) {
        var getState = localStorage.getItem("footer");
        if (getState === "hidden") {
            $("#console-nav-footer").hide();
            $("#console-nav-tab i").addClass("fa-solid fa-angles-right");
            $('.pagination-block').addClass("toBottom");
        } else {
            $("#console-nav-tab i").addClass("fa-solid fa-angles-left");
            $('.pagination-block').removeClass("toBottom");
        }
        $("#console-nav-tab").click(function() {
            $("#console-nav-footer").toggle(250, function() {
                if ($("#console-nav-footer").is(":hidden")) {
                    localStorage.setItem("footer", "hidden");
                    $("#console-nav-tab i").addClass("fa-solid fa-angles-right");
                    $('.pagination-block').addClass("toBottom");
                } else {
                    localStorage.setItem("footer", "shown");
                    $("#console-nav-tab i").addClass("fa-solid fa-angles-left");
                    $('.pagination-block').removeClass("toBottom");
                }
            });
            $("i", this).toggleClass("fa-solid fa-angles-left fa-solid fa-angles-right");
        });
    });
});

5. Test, and make necessary modifications to suit your own environment

[DownPW]

why deleted ?

[phenomlab]

@DownPW Because it’s not finished. I forgot the session state…