We need compact layout design for more space to browse content



  • Here is my simple CSS mod for this forum, i hope vivaldi forum dev will use it to improve the forum usability:

    // lower header menu visibility to 10% when browsing content
    #header-menu:not(:hover) {opacity: 0.1; transition: opacity 0.7s 0.3s;}
    
    // autohide main menu; show by mouseover header menu
    #header-menu .menuwrapper {visibility:hidden; transition: visibility 1s 0s;}
    #header-menu:hover .menuwrapper {visibility: visible;}
    
    // move pagination to right; position vertically
    div.text-center.pagination-container {position: fixed; top: 58.5%; right: 0; font-size: 90%; max-width: 38px; transform: translateY(-50%);}
    
    .pagination > li > a {border: none;}
    

    This mod provide maximum viewing space for content by hiding the header menu partially while preserve all functionality. Next, moving the pagination to the right-side user can switch page anytime without scrolling to the bottom.

    One thing i can't accomplish with pure CSS mod is always showing the header menu when the screen is on top-most position. Thus, i think this can only be done by the forum dev.

    Thanks for your support.



  • The pagination on the right is a bit messy right now, but a very interesting idea.



  • @luetage It suppose to look like this, well at least on my setup:

    0_1522473335755_9c54b623-5d77-4289-bcfc-9d5bf6b73a2b.png

    I guess my mod doesn't work on all setup, that's why it's best to be implant by forum dev natively.



  • mod update for new forum layout:

    /* off-white background color to protect eyes */
    body, .composer, .preview {background-color: rgb(204, 232, 207);}
    .form-control, .write {background-color: rgba(0,128,0,.1);}
    .form-control:focus-within, .write:focus-within {background-color: rgba(0,50,0,.1);}
    
    /* shrink header menu into icons when not needed */
    #nav-dropdown {visibility:visible; margin-right:-4%;}
    #header-menu {transition: 0.15s ease-out 0s;}
    #header-menu:not(:focus-within):not(:hover) {visibility:hidden; margin-top:-1%; opacity:0.1; transition: 0.3s 0.4s}
    #header-menu:not(:focus-within):not(:hover) ~ #submenu:not(:focus-within):not(:hover) { margin-top:-1%; opacity:0.1; visibility:hidden; transition: 0.2s 0.15s;}
    
    /* move pagination to right side */
    div.text-center.pagination-container { position: fixed; right: 0; font-size: 90%; max-width: 38px; top: 50%; transform: translateY(-50%);}
    .pagination > li:not(.active) > a:not(:hover) {background-color:transparent; border-color:transparent;}
    .pagination-container .fa {transform: rotate(90deg);}
    
    /* marker for voted post */
    .upvoted { box-shadow: 0 0 0 2px cornflowerblue inset;}
    .downvoted { box-shadow: 0 0 0 2px red inset; }
    


  • @dude99 This is very cool; thank you.

    I'm now "purplifying" my local copy of it. 😉


 

Looks like your connection to Vivaldi Forum was lost, please wait while we try to reconnect.