By Danny Malouin on Saturday, 30 March 2019
Posted in General Issues
Replies 7
Likes 0
Views 525
Votes 0
Hi,
I would like to render our page streams in 1, 2 or 3 columns depending on the media resolution
I would like to build the page stream using a UIKIT grid
Can you point me to which file the Page stream is built in and which file is the stream module (I'll want to do the same here).
My dev team will figure out how to make sure this is conditional to pages if it's all the same file(s)
Thanks
Danny
Actually, strike this ...

I can apparently acheive this with CSS !

Re:
-moz-column-count: 4;
-moz-column-gap: 20px;
-webkit-column-count: 4;
-webkit-column-gap: 20px;
column-count: 4;
column-gap: 20px;

Thoughts ?
Danny
·
Saturday, 30 March 2019 05:02
·
0 Likes
·
0 Votes
·
0 Comments
·
I guess this should work but not too sure if the height would be messed up though.

To be honest, I never liked the idea of using columns to render activity streams. This is why I never use Google+ and probably why most other's don't. It may look fancy but it's not practical and user friendly at all.

It's just my opinion though. I think activity stream should always be in a proper linear reading position.
·
Saturday, 30 March 2019 13:31
·
0 Likes
·
0 Votes
·
0 Comments
·
Hi
Thanks
I'm not using it to render a normal stream; i'm using this page to render video albums from external sources.
EasySocial can be used for more than just regular social communities ;-)
Danny
·
Saturday, 30 March 2019 19:18
·
0 Likes
·
0 Votes
·
0 Comments
·
I see, not sure which particular page is this but you should check if the height varies and if it would cause any issues to the layout when the height of each media item varies.
·
Saturday, 30 March 2019 23:02
·
0 Likes
·
0 Votes
·
0 Comments
·
Hi

For sharing purposes; here is the Custom CSS I generated to split the page links into 3 columns with even heights


@media only screen and (max-width: 768px) {
div.tm-page ul.es-stream-list li {width:99%;}
}

@media only screen and (min-width: 769px) and (max-width: 1024px) {
div.tm-page ul.es-stream-list li {width:49%;}
div.tm-page li.es-stream-item div.es-stream-embed {min-height:300px;}
}

@media only screen and (min-width: 1025px) {
div.tm-page ul.es-stream-list li {width:32%;}
div.tm-page li.es-stream-item div.es-stream-embed {min-height:330px;}
}

div.tm-page ul.es-stream-list li {float:left; margin-right:5px;}

div.tm-page ul.es-stream-list>li+li {
margin-top: 0px !important;
padding-top: 0px !important;
border-top: none !important;
}

div.tm-page div.es-stream-meta,
div.tm-page div.es-stream-content,
div.tm-page div.es-stream-embed__meta,
div.tm-page div.es-actions,
div.tm-page div.es-stream-login-box {
display:none !important;
}


As you can tell, I ended up not using the flex concept. I also stripped a few stream elements from the page view.

This is my first run at it so there's more improvements I can to for sure. This code works nicely in the module render too.

Danny
·
Sunday, 31 March 2019 03:06
·
0 Likes
·
0 Votes
·
0 Comments
·
Thanks for sharing Danny
·
Sunday, 31 March 2019 15:23
·
0 Likes
·
0 Votes
·
0 Comments
·
View Full Post