make event list more compact on mobile

[marcelkalveram]

This is a relatively simple, initial approach to making the mobile site more compact.

I didn't let the image float next to the title because I think it gives the title too little space. Especially with longer titles, they'll wrap to the next line, making it look more awkward.

Happy to hear your suggestions to improve this further.

Here are two screenshots for preview:

iPhone X: https://www.dropbox.com/s/tub1pb849kkzz12/Screenshot%202019-10-08%2022.57.51.png?dl=0

Pixel XL: https://www.dropbox.com/s/9pdtgor68vlauyr/Screenshot%202019-10-08%2022.58.04.png?dl=0

[hell03610]

I'm more inclined for a list for small screens with a design more like the one in the mobile app (maintaining the general styles of the web for links, separators, etc), but that will probably require also some changes in the html strucutre, so that the medium/large screens dont get affected.

But all in all, your proposal is a better design than the one we currently have, so if you want to go with it, go ahead after solving the code change suggested. Thanks a lot!!

[hell03610]

instead of dividing, try it with @space-medium -

VLCTechHub-site/data/assets/css/abstract/_variables.scss

Line 12 in a6e7015

$space-medium: rem(20);

[hell03610]

same here, try with $space-medium in both or medium - large instead of the divisions, thx!

[marcelkalveram]

Thanks for the feedback @hell03610 . I'll fix the two comments.

Agree that it would be good to be consistent, but playing a bit with the layout, I realised that I actually like the idea of having the avatar sitting on top of the title.

I'll give that another try and get back to you here.

[marcelkalveram]

Would you rather prefer something like this?

I personally don't dislike it, but I find it a tiny bit too squeezed, given the horizontal margin which doesn't exist in this way in the app.

[hell03610]

I like it! I would try with smaller avatars and slightly less margin around the separator line, so there is more space for the title - but I like it!!

[marcelkalveram]

I've pulled in the latest master branch and applied the changes (smaller avatar, less margin). I'm not sure I understood the idea about reducing the margin around the separator line. I guess you're referring to the <hr> and vertical margins around it?

What do we do with the new badge? (hoy, esta semana). I think it could go above the title, but as a smaller text, maybe?

[hell03610]

Thanks @marcelkalveram! Yes, the today/this week label was a pr this week. I would simply hide it in mobile for now and go ahead with this pull request. I'm really looking to merging it, the design looks very nice!

[marcelkalveram]

@hell03610 done!

[hell03610]

Interface looks very nice, but the current codebase does not use floats and I'd like to keep it that way, could you rephrase it to use flex or grid instead? thx!

[hell03610]

could you use flex instead of float?

[marcelkalveram]

I'll work on that this week. I think because of the nesting, float was the easier solution, but I'll see if we can use flexbox instead.

[marcelkalveram]

Sorry, I can't get this done easily because I'd need to change the HTML structure. Right now, I don't have lots of time, so I don't think it'll be possible in the next 1-2 weeks.

[hell03610]

I hope that with flex/grid instead of float this margin-left is not needed. But if it is truly needed, could you move it to https://github.com/VLCTechHub/VLCTechHub-site/blob/master/data/assets/css/abstract/_variables.scss in kebab-case?

[marcelkalveram]

I'll take a look as soon as the float issue is resolved