Improving Selfoss Usability for Mouse and Small Screens with user.css

Selfoss works very well using keyboard shortcuts, but some people prefer to use their mouse. For those of us we can add some css to user.css to make the toolbar visible in our feeds list view. The first step is to create a user.css file in the Selfoss root folder. Then add this to it:

/*
Show toolbar in listview
*/
.entry:not(.expanded) .entry-toolbar {
    display: block;
    padding: 0px;
    background: inherit;
    border: 0;
    margin-top: -2px;
}

This is for the in progress, unreleased Selfoss 2.19 (as of this writing). 2.19 is recommended, but it will work on 2.18, perhaps with a couple of glitches. Earlier versions are not tested. For 2.18 it is slightly different, add this:

/*
Show toolbar in listview
*/
.entry-toolbar {
    display: block;
    padding: 0px;
    background: inherit;
    border: 0;
    margin-top: -2px;
}

The result will be something like this:

To make this work requires 1 line of javascript in selfoss/assets/js/selfoss.events.entries.js. For 2.18 the file is selfoss/public/js/selfoss.events.entries.js. Find this right at the top of the file.

selfoss.events.entries = function() {
    $('.entry, .entry-title').unbind('click');
    // add the following line
    selfoss.events.entriesToolbar();

It will not be necessary to do this at some point as this reportedly will be added to the code(https://github.com/SSilence/selfoss/issues/1159#issuecomment-569475689). Also, as of 2.19 when you add code, you must open a terminal in Selfoss and run:

npm run build

All those toolbars in the listview are noisy visually so you can make it so that toolbar is visible only on mouseover. This will work on a tablet or smartphone too with a not quite longpress, but it is awkward, so this will activate only on larger screens with the following:

/* makes the toolbar come up on mouse hover -- big screens only */
@media screen and (min-width: 641px) {
    .entry:not(.expanded) .entry-toolbar {
        display: block;
        padding: 0px;
        background: inherit;
        border: 0;
        margin-top: -2px;
        opacity: 0.0;
    }
    .entry:not(.expanded) .entry-toolbar:hover {
        opacity: 1.0;
    }
}