How can I get this mobile interface?

fakruzaruret

How can I get this discussion listing style on mobile? Do you have any CSS idea?

CNMathon

fakruzaruret It likes cool! I think flarum need more theme, because it will make flarum more customized in style! 😃

wumix

I like this tooo

clarkwinkelmann

It's definitely doable. Maybe it would require a bit of javascript to change the order of some items if it's too complex for flexbox.

Is the screenshot an actual website or is it a mockup ? If it's a real website, you can check how they did it.

How familiar are you with CSS ? I suppose with some flexbox it should be doable. Have you started anything and can we can help you with specific details ?

fakruzaruret

clarkwinkelmann

I wrote this for mobile but I cant carry views and comment numbers to bottom without using display: absolute

@media (max-width: 767px) {

.DiscussionListItem-info .item-excerpt {
    display: inherit!important;
    overflow: hidden!important;
    white-space: nowrap!important;
    text-overflow: ellipsis!important;
}

.DiscussionListItem-content {

border-radius: 4px;
padding-bottom: 10px;
border:0px solid #dbdfe6!important;
-webkit-box-shadow: 0px 4px 4px 3px rgba(84,102,134,0.05) !important;
box-shadow: 0px 4px 4px 3px rgba(84,102,134,0.05) !important;}


.DiscussionListItem {
position: relative;
padding-right: 0;
padding-left: 0;
border-radius: 4px;
margin-top:5px;

}


.DiscussionListItem-info li{

display: block;

}



.DiscussionListItem-info {
    white-space: nowrap;
     overflow: unset !important; 
    text-overflow: ellipsis;
}

}

mekici

clarkwinkelmann Yes, this is a real website. 😀 https://flarumtr.com

tolgaaaltas

clarkwinkelmann This screenshot from FlarumTR.

[deleted]

Have a look at https://discuss.infosecforge.io and let me know if this is what you are looking for. It's all CSS, and there is also a post here somewhere that has the CSS.

fakruzaruret

[deleted] Firstly thank you very much your reply, Your design is very good. Comment, vote and discuss view's position is good but category tag's location is narrow. I think it is not good for my website because I use sub categories much and I use categories more than one(up to two). I can't select just sub category. I have to select it with together its main category. for instance, There is fruits category and there apple, peach, and cherry sub catagories and I cant select just apple or cherry. System forces me to select it with together its main category fruit. So that I need more length area for category tag.

[deleted]

fakruzaruret that's not technically an issue. Still very workable with CSS.

Cathas9lives

[deleted] could you share your css codes? I think that is what I'm looking for.

[deleted]

Cathas9lives Have a look at this as a reference point
https://discuss.flarum.org/d/21092-modern-theme-for-flarum

Cathas9lives

[deleted] thanks !

Velany

has similar look on this site https://insurgencytr.com

fakruzaruret

Velany Yes it is similar but how can we get css code

fakruzaruret

Velany im mobile version category tags overflowing on icons of discussion and comments

[deleted]

fakruzaruret it's not hard. In your browser (I'm using Chrome here as an example) you can load the site, press F12 to open the developers console, then right click the particular element you are interested in, then choose inspect with the left mouse button.

This will allow the CSS applied to that particular element. Also, the link I posted above has a good portion of the CSS you need.

[deleted]

fakruzaruret This ought to fix that

@media (max-width: 767px) {
.TagLabel {
    padding: .1em .3em;
}
}