Reviewing CSS for mobile

[scripting]

First page to review.

https://blue.feedland.org/?username=dave

What's going on is I now have a way to range over the whole product without interfering with feedland.com or feedland.org.

I also have a way of working with the code that doesn't leave me with a hard integration when it's ready to go public with. I'm doing the work as I go, and get to test it completely, not in a mockup, but with the real software.

It also feels like I can make changes quickly without getting lost, which is what happened the last couple of days every time I approached it.

Anyway, please let's make this collaborative. It's clear you guys have experience with CSS that I don't have. It'll be nice to get this done right for once. ;-)

[cagrimmett]

Initial feedback on the feed list page: https://blue.feedland.org/?username=dave

1. Change the font size on the tdFeedUpdated to 13px (making it smaller)
2. Change the line height for the table items to 25px (currently 20) to make it a bit larger on mobile.

For usability, I think the tap targets for the arrows and the checkboxes need to be larger. I'd also expect to be able to tap the whole row to get it to drop down, but I know that would require some markup changes.

[scripting]

@cagrimmett --

1. I see what you mean about the click space. It would be easy to hit the checkbox when you meant to hit the wedge.
2. I played with sizes of things and positions, we're going to iterate over this for a while. ;-)

There's a nice way to browse the stories on a machine with a keyboard, you can use the arrow keys and Return to move up and down and toggle the expansion state. It'd be nice if there were some way to do that on a machine with no keyboard.

[scripting]

OK, here's the next page to look at.

https://blue.feedland.org/?feedurl=https%3A%2F%2Frss.firesky.tv%3Ffilter%3Dfrom%253Aemilynussbaum.bsky.social

Picked up all the pieces from the work we did yesterday.

BTW, I am adding things to DOM tree, but only when I absolutely have to, if there's no other way.

The big difference between today and yesterday is I have all the work organized so I don't have to worry about integration.

[scripting]

It's also a real confidence builder that when you click the links they work. ;-)

[cagrimmett]

https://blue.feedland.org/?feedurl=https%3A%2F%2Frss.firesky.tv%3Ffilter%3Dfrom%253Aemilynussbaum.bsky.social looks good to me! No feedback on this one right now.

[scripting]

Multi-tab river ready for review.

https://blue.feedland.org/?river=true&screenname=dave&catname=all

[scripting]

Here's a single category timeline.

https://blue.feedland.org/?river=true&screenname=dave&catname=tech

[cagrimmett]

On Multi-tab river:

1. divRiverInTab - remove the padding-left: 15px (set to 0 on mobile)
2. spFavicon - Set to display: none;

These will clean up the left side and make better use of that space.

I might also set divRiverItemFooter to display: none; - If people really want it we can bring it back, but I don't think it is needed. And once it is there it is hard to remove.

[scripting]

@cagrimmett --

i don't want to get rid of the favicons.

we'll do another round of review for the footers.

i want to cover all the areas first, once over.

[cagrimmett]

i don't want to get rid of the favicons.

Got it. Then instead of them being outside, I think they should be inline with the content to get rid of the left spacing. Valuable realestate on mobile.

On the single category timeline, I think the same comments from the Multi-tab river apply, at least in terms of the items in the river.

One piece of non-mobile feedback is that on category timelines I'd like a link to be able to see the list of feeds in that category. That link should live in the divExplainText. For this page, that would be https://blue.feedland.org/?username=dave&catname=tech

[scripting]

Mailboxes appear to work okay with no mods.

https://blue.feedland.org/?mailbox=https%3A%2F%2Frss.firesky.tv%3Ffilter%3Dfrom%253Atechmeme.com

[scripting]

Subscription log ready for review.

https://blue.feedland.org/?log

[scripting]

The hotlist.

https://blue.feedland.org/?hotlist

I wasn't able to figure out how to get the number column to be narrower.

[fmfernandes]

Subscription log ready for review.

https://blue.feedland.org/?log

What's the purpose of the checkboxes?

[scripting]

The checkbox indicates if you're subscribed to the feed. If you're viewing someone else's list you will probably see some unchecked boxes. When you check or uncheck a box the effect takes place immediately. One click to subscribe or unsubscribe.

http://docs.feedland.org/about.opml

[scripting]

These are all very much alike, so I'll just list them here.

https://blue.feedland.org/?category=tech&username=dave

https://blue.feedland.org/?hotlistnews=true

[scripting]

An item from a feed on its own page.

https://blue.feedland.org/?item=218538

[scripting]

This one worked with no mods. Might want to change the size of the text in the text entry box.

https://blue.feedland.org/?search=dave

[cagrimmett]

Overall Hotlist and Log look good.

I wasn't able to figure out how to get the number column to be narrower.

This is because the column takes the width of the largest element as the base, so the 3-digit 100. You can either use a smaller font size if you'd like, or move the numbers outside the table markup. Not a big deal though. Still readable.

[cagrimmett]

https://blue.feedland.org/?category=tech&username=dave

https://blue.feedland.org/?hotlistnews=true

https://blue.feedland.org/?search=dave

These look good, too! I know this is coming later, but I have a custom stylesheet that I load here that removes the toolbar for each item, and it looks much cleaner on mobile :)

---

For an item from a feed on its own page. (https://blue.feedland.org/?item=218538)

• Make the date font size smaller
• Put the feed title and date on separate lines, both aligned left.

[cagrimmett]

Here is what will get you in the right direction for the modals. Each one is implemented a little differently and have some of their own styles, but overriding the base Bootstrap styles helps a lot.

I tested this with the Subscribe to one feed dialog, and with the Settings dialog (which has extra width and left styles with another selector that need to be unset).

.modal {
   margin: 0 auto;
   width: 100%
   left: unset
}

The content of each of the modals is another story and needs to be handled individually.

[scripting]

How are we going to sweep all the loose-ends up when the first pass is complete? Maybe a hash tag, like #19

Thanks for the modal stuff. I've dug in there before -- i've been using Bootstrap as a UI toolkit for almost 10 years now. ;-)

Anyway, here's the first of the Reading List pages.

https://blue.feedland.org/?feedcorps=true

Have to start with FeedCorps. ;-)

[scripting]

And with that I'm done for the day. I'm pretty optimistic this will be done by the start of next week.

BTW, I had the wrong idea about this project at the beginning. The thing that zapped my mind in the right gear was a little project I did a couple of years ago to make Drummer work with the screen colors reversed. Didn't require any fancy engineering, it was just a puzzle. No risk of breakage. I think it took one day. I already had the process, so I just did it again. This is more work because Drummer has so many different pages. But it's relatively easy to do it without breaking too much stuff.

[scripting]

First conversion of the day.

https://blue.feedland.org/?userslist

[scripting]

A list info page for a reading list.

https://blue.feedland.org/?readinglist=https%3A%2F%2Flists.feedcorps.org%2Fartshow.opml

[scripting]

All the reading lists I'm subscribed to on this server.

https://blue.feedland.org/?readinglists=dave

[scripting]

And the user info page works.

https://blue.feedland.org/?userinfo=dave

I've now completed my first pass. There were a fair number of pages that had problems in the code.

[scripting]

I touched up the layout of feed lists so there's more space to the right of the wedge and the wedge is a few pixels bigger.

This makes it less likely you'll accidentally hit the checkbox when trying to click on the wedge.

I also think it should be easier to expand and collapse, the wedge is pretty ideal for desktop systems, but not for mouseless systems.

But I need to move on if I hope to get back to the real work -- of building products and communities with this stuff. I'm tired of talking I want to start doing. That was the whole point of FeedLand in the first place. ;-)

[scripting]

I'm working on dialogs now.

I added the CSS you recommended for "alert" dialogs.

.divAlertDialog {
    margin: 0 auto;
    width: 100%;
    left: unset;
    }

It fits on the screen, but the left margin looks to be 1 pixel and the right margin 0. I'd like the width to be 96% with equal margins on left and right.

[scripting]

The internal function askDialog now works. To try it, choose Search Feeds from the menu.

You should see a dialog that looks like this.

Enter a string like scripting and click OK. You should get a list.

The dialog doesn't appear to come to the front correctly, will have to come back to that.

PS: A lot of commands use this dialog, as with alertDialog and others. There are a number of custom dialogs. It appears the conversion is pretty simple.

[scripting]

I'm done with the Settings dialog for now. The Misc panel is out of whack because the label part which is empty for checkboxes has a width of 130px. I'd like to set that to 0, but that would force the labels for the inputs to wrap and force the dialog elements section to scroll. I'm okay with leaving this as-is but would welcome simple workaround.

[scripting]

@fmfernandes -- i have one last big problem remaining on my list -- the hierarchic menus don't get revealed when i click on them in the mobile version. everything is exactly the same as in the desktop version. any idea where to look, how to proceed?

[fmfernandes]

@scripting, what do you mean by hierarchic menus? I can see them opening up, though, a bit offscreen.

https://github.com/scripting/a8c-FeedLand-Support/assets/24195829/eba6316c-b107-4dc6-beba-33482e7a7e53

They work a bit better on my cellphone but still opening outside the viewport.

[fmfernandes]

I've added:

right:0;
left: auto;

to the ul element inside idSpecialPagesSubmenu (the Special pages... submenu) and it now opens inside the viewport. Might be able to play with margins.

[scripting]

@fmfernandes -- those are hierarchic menus.

i can't get them to open up that way on Chrome on my Pixel Pro phone or in the browser emulating a phone. How are you doing it?

[scripting]

@fmfernandes -- anyway -- don't worry about it for now. i think i have a way to work around it that's a win-win. i'll pick this up again tomorrow.

[fmfernandes]

i can't get them to open up that way on Chrome on my Pixel Pro phone or in the browser emulating a phone. How are you doing it?

On Safari on iPhone they open as you'd expect. On that recording, I had to keep the left button pressed so the underlying menu would show up in the browser emulating a phone.

[scripting]

Just completed my next pass over the menubar with a bunch of changes.

1. No hierarchic menus, so no problem figuring out how to make them work. :smile:
2. The main menu is much abbreviated, for the better imho for mobile users.
3. Instead of saying "Menu" -- we use the three vertical dots which is basically the standard icon for "main menu". Now all three menus are iconic so all of a sudden there's a vast amount of horizontal space available.
4. Changed the text of "Search feeds" to Search feed titles, which is much more accurate. I have been getting questions from people who thought that was the core feature of FeedLand, I can see why they thought that, because of its position in the menu and the command title. It is still a very useful command for finding a feed, I use it all the time. I also moved it to the end of the list to give it less prominence, thought of removing it all together, but it's too useful.

There is a problem, the blue icon for a person is somehow too low, and I spent 1/2 hour trying to understand why. I wonder if someone else can spot it.

I'm moving on. Next area is the signon dialog.

[scripting]

Two dialogs now work in addition to the ones I got yesterday.

1. confirmDialog -- a standard dialog to confirm something like logging off.
2. signonDialog -- the dialog that signs you on. at first the wordpress sign on button wasn't showing up, but it wasn't a CSS thing, blue.feedland.org predates wordpress signon. I set it up so it was hooked up and now it works.

[scripting]

@cagrimmett -- i'm going through some of the comments here.

I have a custom stylesheet that I load here that removes the toolbar for each item, and it looks much cleaner on mobile :)

i think by "toolbar" you mean the icons below the body of each post in the timeline.

I like the toolbar, esp the things we're going to do with it. At one point I had a menu, and one icon the three vertical dots. But then I wanted to add Like, and poping up a menu to do that is just wrong. I want this to feel like a social media app, and if you look at their timelines, they all have functionality in that spot.

A question -- do you also hide the right-justified permalink? It's the only way to get to the actual post. If you don't turn that off you're not getting back the vertical space.

[scripting]

Actually I think I'm not doing any of those things now unless they're bugs. There's been a long development process for this product, and the decisions were made a long time ago and there were tradeoffs for all of them. And reasons for doing it the way it is being done.

And the clock is ticking. I love programming, but this is dragging, and I also love having a winning product, and now it's time for that mode to kick in. ;-)

[scripting]

Good morning!

I did the switchover on feedland.com and feedland.org a few minutes ago.

First thing I noticed that didn't show up in the Blue testing was too many tabs on the main news page.

So I went with the best answer I had come up with, a limit of four tabs on the main news page.

This is how I determine if it's running on a mobile device, checking to be sure this is a good way to do it.

function isMobileDevice () { //12/10/23 by DW
    return (window.innerWidth <= 576);
    }

Also raised feedlandHome's version number to 0.6.0 -- this seemed like a moment to bump the version. Previous was 0.5.11.

[scotthansonde]

@scripting Thank you so much for the mobile layout! I do most of my reading on the iPhone, and this is so much nicer! 😃

I was trying to make bookmarks for my category rivers, and I think I found a bug in the mobile layout. A url like https://feedland.org/?river=true&screenname=ScottHansonDE&catname=politics shows white space under the tabs in the mobile layout.

I confirmed this on the desktop. When I set my browser wider than 576 pixels, the link works. When I set my browser to narrower than 576 pixels and reload, I see the white space similar as on iOS.

[scripting]

@scotthansonde -- glad to see you here! ;-)

it's in my queue, hope to get to it today.

and keep em coming.

[fmfernandes]

This is how I determine if it's running on a mobile device, checking to be sure this is a good way to do it.

You can also search on the User-Agent string for the word Mobi. Reference here.

You should also be aware that window.innerWidth might change in case a user tries to resize the window while on desktop. An example: I tried to load @scotthansonde's link in a browser window and resizing it to less than 576px did nothing, because probably that function was already called. If I load the page again, the tabs changed and if resizing to bigger widths, again, nothing changed (which is what I'd expect for a responsive layout).

Depending on the use case, you might want to listen to the resize event as well to return true on isMobileDevice.

[scripting]

@fmfernandes -- thanks for the response, that's what i was hoping for.

right now the only thing i use isMobileDevice for is to determine the number of tabs are in the main news page.

everything else is done with CSS.

[fmfernandes]

@scripting you can hide those with CSS, too. Something link this:

@media (max-width: 575px) {
    #idRiverTabs ul.nav.nav-tabs li:nth-child(n+5) {
      display: none;
    }
}

[scripting]

@fmfernandes -- thank you. if you reload you'll see it works the CSS way, which is better.

[scripting]

it turns out the fix to the issue @scotthansonde reported interferes with the issue @fmfernandes reported.

the problem is that the politics tab is in his list of categories, but it wasn't in the first four. so it's trying to show it, but it has a display value of none.

i tried checking to see if the nth tab had a display value of none, but at the time that matters, the list doesn't exist yet.

to get it to exist is a fairly major restructuring of the code, and at this stage likely to introduce similar problems.

so i might undo the previous change, and accept that resizing the window doesn't show and hide elements. it wasn't doing it in the right way anyway.

we'll figure something out here, it's obviously unacceptable for it not to display the Politics category.

[fmfernandes]

Hey @scripting, sorry about that. I didn't notice at first that the Politics tab was active.

The following code should fix that:

@media (max-width: 575px) {
    #idRiverTabs ul.nav.nav-tabs li:nth-child(n+4):not(.active) {
      display: none;
    }
}

I've added the :not selector so we do not hide the current .active tab and decreased n+5 to n+4 to account for the active tab.