Post box on mobile

010101

This is very serious feedback. Seriously. Before going to “stable” think about how extensions add stuff to the post form on mobile. Right now, every new extension will add its own row at the top. So, polls has a row all to itself. The new drafts extension has a row all by itself. The private posts extension. That’s right. A row to itself. And sadly, the mason amazing extension can never be used. Because on mobile, it takes up too much space.

Shouldn’t we think about how to make all of these additions work on mobile?

A quick fix for many of these (minus mason) would be to ensure all extensions add something to the same row. So, on mobile, I should see: [poll] [private] [draft] all on one line/row versus them all being incredibly lonely on their own row.

jordanjay29

010101 Do you have any screenshots of these multiple extensions in action so we can see clearly how it impacts the mobile experience?

010101

And, to clarify what I’m proposing, the mobile experience should be something like:

[save draft icon] [add poll] [recipient] [another]
Discussion Title
etc.

This is my post. Ain’t it great?

—

I’m sometimes shocked by what CSS alone can do. So, if I think about it one evening soon, I’ll see what can be done by simply tweaking the CSS.

010101

jordanjay29 Sure. I’ve been too tired to sit and inspect the CSS. But, there could be a simple CSS fix. To move some of these things to one line on mobile.

[deleted]

010101 thats crying out for the below CSS

First item should be display: inline-block;
Subsequent items should be float: left;

Guessing this of course until I can get back in front of a pc and test but I don't think I'm too far off.

[deleted]

EDIT - small change to prevent li.item.polls from bleeding the border onto the next line...now clear: right; instead of float: none;

And, here it is

@media (max-width: 767px) {

@media (max-width: 767px) {
li.item-polls {
    clear: right;
}
li.item-tags,
li.item-recipients,
li.item-save-draft {
    float: left;
}
li.item-save-draft {
    padding: 2px 0px 0px 15px;
}
}

I have this active on my site over at https://discuss.infosecforge.io if you want to see what it looks like "in person" 🙂. The only issue I can see with this is that as you add more to the top row, the spacing between them may be a little "off" - needs experimentation, but certainly a foundation to begin with.

luceos

Instead of using floats it might be better to use flexbox.. Having said that, maybe we need to push some of these controls into a hamburger?

datitisev

luceos Flexbox only has partial support on IE 11 because of "large amount of bugs present". See https://caniuse.com/#feat=flexbox.

~~can't we just drop IE support~~

[deleted]

luceos Agreed, but if we use a hamburger, that may detract the user experience somewhat. My view, anyway.

And @datitisev - I'm with you on dropping IE 🙂

010101

datitisev can't we just drop IE support

I know a large platform like Flarum realistically probably can't drop IE support... yet... but, yeah, I don't worry about IE anymore with my small projects. If you want to use IE, that's your problem. Muhahaha! 🙂

Another thought. But, I don't know if I like it or not. Go with all icons, like the save draft extension is doing. Just for mobile maybe? So, choose tags becomes just a tag icon. I like icon only situations sometimes; but then I think... will every potential user/member out there "get it"?

Or, should the post box on mobile work completely differently? The issue now is, the top part is stuck in place. What if, you could show/hide the top part? I guess that's essentially the @luceos hamburger idea I'm thinking about. Or, if on mobile, the post box was scrollable? Some way to push the top part out of the way so that you can get to the content of the post.

010101

010101 Or, if on mobile, the post box was scrollable? Some way to push the top part out of the way so that you can get to the content of the post.

Just quoting myself real quick to say, I tested this and it is another option. Although, I also like @[deleted]'s CSS to get certain things on one row. So, one could use that, plus...

@media (max-width: 767px) {
.Composer {
overflow-y: scroll;
overflow-x: hidden;
}
}

I haven't tested this in particular, but I'm thinking, this would make the mason extension usable on mobile. If you have extra fields, now you can scroll the post box to get to them. But, if someone tests this further and sees an issue, please share.

...and slight tweak. I'm not sure why this extra margin space exists. But, by making this margin 0, it horizontally aligns better.

.DiscussionComposer-changeTags {
    /* margin-right: 15px; */ <-- change to 0 (and you have to add !important)
    vertical-align: 2px;
}

It just looks a tiny bit better:

Full CSS to plug into your custom CSS box:

@media (max-width: 767px) {
li.item-polls {
    clear: right;
}
li.item-tags,
li.item-recipients,
li.item-save-draft {
    float: left;
}
li.item-save-draft {
    padding: 2px 0px 0px 15px;
}
.DiscussionComposer-changeTags {
    margin-right: 0px !important;
    vertical-align: 2px;
}
}

again, optionally, add in the...

.Composer {
overflow-y: scroll;
overflow-x: hidden;
}

matteocontrini

010101 If you want to use IE, that's your problem

It's not that people want to use it, there are situations where there are no alternatives, specifically enterprises where legacy software that runs in the browser needs to be supported. In these cases the easiest thing is to keep using IE, also because it's tightly integrated with Windows administrator tools like group policies.

Now that Windows 7 is near end of life I think we can expect more businesses to switch to Windows 10, where they can at least allow Edge and enable IE mode for legacy websites only

010101

Update to the CSS above. First, the exact CSS will depend on which extensions you are using. But also, if you use the CSS posted above, then it also affects the tags in the discussions list. And so suddenly on mobile, your discussion list won't look quite right. The post date/author will be misaligned. To solve this, the CSS just needs to be a little more specific. So, add .ComposerBody-header to the beginning of most of the rules so that the rules only affect the Composer, aka post box.

Also, this didn't happen in emulated mobile view mode in Chrome. But, in Chrome iOS, there was an extra border and things were misaligned. To fix that you'll see I added a border-bottom: 0; rule, and adding some padding-top to one part as well to get them perfectly aligned.

I went from this:

To this:

However, still in desktop Chrome, simulating mobile view, the polls button is not 100% vertically aligned. But, as you can see, in a real iOS Chrome browser, it is aligned...

The code:

@media (max-width: 767px) {
.ComposerBody-header li.item-polls {
    clear: right;
    padding-bottom: 10px;
}
.ComposerBody-header li.item-tags,
.ComposerBody-header li.item-recipients,
.ComposerBody-header li.item-save-draft {
    float: left;
    border-bottom: 0;
    padding-top: 14px;
}
.ComposerBody-header li.item-save-draft {
    padding: 2px 0px 0px 15px;
}
.DiscussionComposer-changeTags {
    margin-right: 0px !important;
    vertical-align: 2px;
}
}

010101

And, this may be better. It's way shorter/easier, and probably more compatible across browsers:

@media (max-width: 767px) {
.ComposerBody-header li:nth-child(n+2):nth-child(-n+4) {
    display: inline-block;
    border-bottom: 0;
    margin-right: -15px;
}
}

display: inline-block does the magic; it takes the place of the floating.
border-bottom: 0... is because with this CSS the bottom border won't stretch all the way across. But, is a bottom border truly needed here?
margin-right: -15px... this is optional. I felt like there was too much space in between buttons. This is one way to reduce that space.