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. ;-)

[scripting]

@fmfernandes -- I tried that, it's in the current mobile.css, but it didn't appear on my machine to do anything to fix the problem.

This is where mobile.css is --

http://scripting.com/code/feedland/home/mobile.css

And this code is at the end.

You still have the feature that allows you to override any of the CSS.

For @scotthansonde, you can put the URL of a custom style sheet here -- localStorage.urlStartupStylesheet

If it exists on startup, FeedLand will load it in. So you can experiment with the CSS too. ;-)

[scripting]

@scotthansonde --

I believe I have fixed that problem that prevented your politics news from showing up.

https://feedland.org/?river=true&screenname=ScottHansonDE&catname=politics

[scotthansonde]

@scotthansonde --

I believe I have fixed that problem that prevented your politics news from showing up.

Yes, I can confirm this works for me. I can now make bookmarks for my category rivers and see them on mobile 👍

[cagrimmett]

While browsing on mobile, I came across some things that need to be adjusted:

1. Inconsistent padding to the left and right of the main river container.

2. Title length - we adjusted this for desktop river items, looks like it needs to be adjusted again for mobile.

3. 

4. The river for a readling list doesn't have a background color and border for its main container like the other rivers. I stumbled across this and can't help but think how much cleaner it looks on mobile without the background + border. Is it worth exploring removing the main container background and border?

[scripting]

1. the inconsistent padding is deliberate, meant to get the text to line up with the left edge of the feed title.
2. i agree with the title length for rivers on mobile. i don't recall what we did there, but i'll take a look.
3. i understand there's a difference there, but no -- bigger fish to fry

[cagrimmett]

@fmfernandes and I did a review of mobile on a call together and here is what we found:

• [ ] News: Small white border below each tab in the main news area, if you have tabs
• [ ] News: Tooltip on the date in river items show off the side of the screen
• [ ] News: When you expand a river item then collapse it again, a border-bottom is added.
• [x] News: Time and toolbar are not aligned. .divRiverItemFooter
• [x] Feed list page: Vertical Alignment of each of the items in the table is off.
• [x] Logged out: Sign up modal needs to be updated to be responsive to match the other modals
• [x] Feed list page: Feed title, if too long, needs to be shortened to show the tag
• [x] Recent Users: Make the Name column larger, started and latest smaller

@fmfernandes is looking at fixes for these items.

[fmfernandes]

I'll add here some snippets for the above issues that should fix them. Those snippets should be added to the mobile.css file.

• News: Time and toolbar are not aligned. .divRiverItemFooter

  .divRiverItemFooter .spRiverItemPermalink {
  line-height: unset;
  }

• Feed list page: Vertical Alignment of each of the items in the table is off.

  
  .divFeedListContainer .tdFeedTitle {
  vertical-align: middle;
  }

.divFeedListContainer .tdFeedUpdated { vertical-align: middle; }

- Logged out: Sign up modal needs to be updated to be responsive to match the other modals
```css
.divSignupDialog .modal {
  margin-left: 2.5%;
  width: 95%;
  left: unset;
}

.divSignupDialog .modal table td input {
  width: auto;
}

.divSignupDialog .spComment {
  word-wrap: break-word;
}

Remove fixed width from style in the input elements.

• Recent Users: Make the Name column larger, started and latest smaller:

  .divUsersList .tdUserLink {
  max-width: 200px;
  }

• Feed list page: Feed title, if too long, needs to be shortened to show the tag

  .divFeedListContainer .tdFeedTitle {
  overflow: initial;
  }

Full modified file for reference

Full mobile.css with the above fixes

```css @media screen and (max-width: 576px) { /* the official number used by bootstrap toolkit */ .divPageBody { width: 98%; margin-top: 65px; } .notDisplayedOnMobile, .divExplainRightColumn, .divOpmlLink, .divFeedlistOpmlLink { display: none; } .trHeaderRow th { font-size: 15px; } .divMenubar .container, .divFeedListContainer table { width: 100%; } .divMenubar #idMenuProductName { font-size: 24px; } .divMenubar .navbar .nav>li>a { font-size: 18px; padding-right: 0; } .divMenubar #idToolsMenu, .divMenubar #idCatsMenu, .divMenubar #idDocsMenu, .divMenubar .spShortUserName, .divMenubar #idMainMenu, .divMenubar #idMobileMainMenu { display: none; } .divMenubar .navbar .nav.pull-right { margin-top: -2px; } .divExplainText, .divFeedlistExplain { width: 100%; text-align: center; } .divExplainText h1, .divFeedlistExplain h1 { font-size: 30px; } .divExplainText p, .divFeedlistExplain p { font-size: 15px; } .divFeedListContainer { width: 96%; margin-left: auto; margin-right: auto; } .divFeedListContainer .divFeedListExplain { margin-bottom: -5px; } .divFeedListContainer th { font-size: 15px; padding-left: 4px; padding-right: 4px; } .divFeedListContainer td { padding-left: 4px; padding-right: 4px; } .divFeedListContainer .tdWedge { padding-left: 2px; padding-right: 10px; padding-top: 9px; width: 15px; } .divFeedListContainer .tdWedge i { font-size: 22px; } .divFeedListContainer .tdFeedCheckbox { width: 20px; padding-left: 0; padding-right: 0; padding-top: 10px; } .divFeedListContainer .tdFeedNumber { width: 25px; padding-left: 0; padding-right: 0; } .divFeedListContainer .tdFeedTitle { width: 80px; min-width: 80px; max-width: 230px; font-size: 16px; white-space: nowrap; overflow: initial; vertical-align: middle; } .divFeedListContainer .tdFeedUpdated { font-size: 14px; vertical-align: middle; } .divFeedListContainer .tdSubsCount { font-size: 16px; } .divFeedListContainer .trHeaderRow th { max-width: 80px; } .divFeedListContainer .tdInfoIcon, .divFeedListContainer .tdSubsCount { display: none; } .divUsersList { width: 96%; margin-left: auto; margin-right: auto; } .divUsersList table { width: 100%; } .divUsersList .tdUserLink { max-width: 200px; font-size: 16px; white-space: nowrap; overflow: hidden; } .divUsersList .spUpdateableTime { font-size: 16px; } .divFeedViewerPage { width: 96%; margin-left: auto; margin-right: auto; } .tableForFeedPage { display: block; width: 100%; } .tableForFeedPage tr { display: block; } .tableForFeedPage td { display: block; font-size: 16px; border-top: none; padding-left: 0; padding-right: 0; } .tableForFeedPage .tdLabel { text-align: left !important; font-weight: bold; padding-bottom: 0; } .tableForFeedPage .tdValue { overflow: hidden; } .divOneCategoryRiverDisplayContainer { width: 90%; padding-left: 25px; padding-right: 25px; padding-top: 1px; } .divRiverContent { width: 95%; padding-left: 8px; } .divRiverDisplay { width: 94%; margin-left: auto; margin-right: auto; } .divSubscriptionLogContainer { width: 94%; margin-left: auto; margin-right: auto; } .divSubscriptionLog table { margin-top: 0; } .divSubscriptionLog .tdFeedTitle { font-size: 16px; max-width: 200px; overflow: hidden; } .divSubscriptionLog .tdFeedSubscriber, .divSubscriptionLog .tdFeedUpdated { font-size: 16px; padding-left: 10px; } .divHotlistContainer .tdSubsCount { display: block; } .divNewsItemContainer { width: 96%; margin-left: auto; margin-right: auto; } .divNewsItemContainer p { font-size: 16px; line-height: 140%; } .divSearchBox input { font-size: 16px; height: 32px; } .divSearchBox button { height: 32px; } .divReadingLists { width: 96%; margin-left: auto; margin-right: auto; } .divReadingLists table { width: 100%; font-size: 16px; } .divSignonDialog { width: auto; } .divAlertDialog { margin-left: 2.5%; width: 95%; left: unset; } .divConfirmDialog .modal { margin-left: 2.5%; width: 95%; left: unset; } .divAskDialog .modal { margin-left: 2.5%; width: 95%; left: unset; } .divAskDialog input { width: 100%; } .divPrefsDialog .modal { margin: 0 auto; width: 99.5%; left: unset; } .divPrefsDialog li a { font-size: 15px; } .divPrefsDialog .tab-content { font-size: 15px; } .divPrefsDialog label { text-align: inherit; } .divPrefsDialog .xlarge { width: 100%; font-size: 15px; } .divPrefsDialog label { font-size: 15px; width: 0; } .divPrefsDialog .clearfix { margin-bottom: 10px; } .divOutlineDialog { margin-left: 2.5%; width: 95%; left: unset; } .divOutlineDialog .divOutlineDialogTitle { font-size: 16px; } .divCategoriesDialog .modal { margin-left: 5%; width: 90%; left: unset; } .divEditboxContainer { width: 98%; margin-left: auto; margin-right: auto; padding: 3px; } .divEditboxContainer .divEditorSection { width: 98%; margin-left: 1%; margin-right: 1%; padding: 2px; } .divEditboxContainer .spLeadingQuestion { font-size: 15px; } .divEditboxContainer .spSaveStatus { font-size: 10px; margin-bottom: 2px; } .divEditboxContainer .divBodyEditor { padding: 2px; font-size: 15px; } .divEditboxContainer .divUrlBox label.right { text-align: left; } .divEditboxContainer .divUrlBox input[type="text"] { display: block; width: 100%; margin-left: 0; margin-right: 0; } .divSignupDialog .modal { margin-left: 2.5%; width: 95%; left: unset; } .divSignupDialog .modal table td input { width: auto; } .divSignupDialog .spComment { word-wrap: break-word; } .divRiverItemFooter .spRiverItemPermalink { line-height: unset; } } ```