Adapt better to narrow screens

gwicke commented 8 years ago

Narrow screens are common on mobile, and when using vector in a narrow sidebar-style window on a desktop. Here are some styling ideas that could help to maximize the content visible on small screens:

Completely hide the user list by default.
Hide user icons in chat messages, and reduce margins around messages to a bare minimum. Possibly, set off user names / message boundaries slightly by making them left-bound, and indenting messages a couple of pixels.

gwicke commented 8 years ago

Rough sample styles:

/* Hide link previews (TODO: switch them off) */
.mx_LinkPreviewWidget {
    display: none
}
@media screen and (max-width: 800px) {
    /* Reduce spacing */
    .mx_EventTile_avatar {
        display: none
    }
    .mx_EventTile {
        margin-left: 0;
        margin-top: 5px;
    }
    .mx_EventTile_line {
        margin-left: 12px;
        margin-right: 10px;
    }
    .mx_MatrixChat_middlePanel {
        padding-right: 0px !important;
        padding-left: 5px !important;
    }
    .mx_RoomView_statusAreaBox {
        min-height: 0;
    }
    .mx_RoomStatusBar {
        margin-top: 0;
        min-height: 0;
    }
    .mx_RightPanel {
        display: none;
    }
    .mx_MessageComposer_avatar {
        padding-right: 10px;
        padding-left: 10px;
    }
    .mx_MessageComposer_upload,
    .mx_MessageComposer_voicecall,
    .mx_MessageComposer_videocall {
        padding-left: 3px;
        padding-right: 3px;
    }
}

ara4n commented 8 years ago

Thanks - totally agreed we need a narrower mode; will look at incorporating this. Thanks!

gwicke commented 8 years ago

Render with styles above:

ara4n commented 8 years ago

completely hiding the userlist has now landed on /develop. we're working on compact CSS for the timeline itself.

JasonLocklin commented 7 years ago

Things have improved, but are still not quite usable at very small window size. It would be nice to be able to put, for instance, a 1:1 chat in a small window to the side of the work are on the desktop.

Current state of Riot web (develop), with "compact layout" enabled, with a small window: smallwindow

Note that the composer is unusably narrow, and margins around the message list text make it display very inefficiently.

Here is a comparison with glowingbear, at a similar text size, at an even smaller window size. Note that glowingbear is completely usable at this size and riot is completely unusable. smallscreen2

I think the message list and the composer area should have a minimum width specified so that they are preserved in a usable state as long as possible -at the expense of whitespace margins and other areas. As an example, with a min-width of 400px for .mx_RoomView_messageListWrapper and .mx_MessageComposer_wrapper:

The Attachment/Voip buttons are off to the side (note the scroll bar), but could be their own div, and could pop (wrap) down to a second row when the window is too narrow for both the compose area and those buttons.

Overall, there is still room in various whitespace areas to more efficiently fill a small window. For the message list, most of the gain would come from changing the way the text flows around/below user icons/read receipts. For instance, paragraphs could be wrapped as wide as the whole message list like this:

| (O) User: () () () ()  |<- read recipts
| Text that is the full  |
| message list  width... |

drue commented 6 years ago

Link summaries should probably float below the thumbnail.

lpar commented 5 years ago

To add to the previous comment, here's what my system alerts looked like when I logged in just now:

Selection_001

aaronraimist commented 4 years ago

Example of how bad Riot is right now with the memberlist: https://twitter.com/Obijuan_cube/status/1239860893539864576

tredondo commented 4 years ago

Quoting totally kills the width.

MadLittleMods commented 3 years ago

Compact link previews is tracked by https://github.com/vector-im/element-web/issues/7897

Related issues:

element-hq / element-web

Adapt better to narrow screens #1633