mobile UI in desktop?

[rezad1393]

is there any option to set the UI view on firefox desktop to appear as mobile view like my tablet? I like the simple and wide view of mobile view.

[Frenzie]

Not exactly, it just appears when the window is smaller than a certain width. This can be achieved by resizing the window or zooming in.

But of course you can just copy the relevant styles into your CustomCSS extension without the @media part (there are likely some more in whichever theme you're using): https://github.com/FreshRSS/FreshRSS/blob/4ddd1821bb0fc1186937551d59100294b8833727/p/themes/base-theme/base.css#L877-L944

[rezad1393]

while mobile view does work with a zoom in page approach the font increase is not good. also I get mobile view on my firefox tablet but when I use desktop mode on firefox on my tablet(android) I get the desktop mode. so some thing other than width seems to affect that view switch too.

now I use reader mode (for favorites) so this option is not at important to me anymore. but thanks you for the good answer.

[Frenzie]

Desktop mode on your tablet would be the equivalent of zooming out (i.e., more width).

[rezad1393]

Not exactly, it just appears when the window is smaller than a certain width. This can be achieved by resizing the window or zooming in.

But of course you can just copy the relevant styles into your CustomCSS extension without the @media part (there are likely some more in whichever theme you're using):

https://github.com/FreshRSS/FreshRSS/blob/4ddd1821bb0fc1186937551d59100294b8833727/p/themes/base-theme/base.css#L877-L944

sorry for late reply. how can I use this ? i copy and pasted this in the extension setting but nothing happened.

[Frenzie]

The surrounding @media (max-width: 840px) { limits in which conditions it applies.

On Fri, Dec 11, 2020, 04:11 rezad notifications@github.com wrote:

Not exactly, it just appears when the window is smaller than a certain width. This can be achieved by resizing the window or zooming in.

But of course you can just copy the relevant styles into your CustomCSS extension without the @media part (there are likely some more in whichever theme you're using):

https://github.com/FreshRSS/FreshRSS/blob/4ddd1821bb0fc1186937551d59100294b8833727/p/themes/base-theme/base.css#L877-L944

sorry for late reply. how can I use this ? i copy and pasted this in the extension setting but nothing happened.

— You are receiving this because you commented. Reply to this email directly, view it on GitHub https://github.com/FreshRSS/FreshRSS/issues/2792#issuecomment-742937116, or unsubscribe https://github.com/notifications/unsubscribe-auth/AABRQBM4CSFKNXY6ODU2AMTSUGEUVANCNFSM4KQW663Q .

[rezad1393]

I understand that but when I input that in "Custom CSS (0.2) — Enabled " I dont see any difference. I still need to zoom to the high zoom of 170% to get it to be like my tablet. or higher or lower values for that matter.

[Frenzie]

Other CSS files contain similar styles. It all depends on the theme you're using. https://github.com/FreshRSS/FreshRSS/blob/c700fd370c93d31626460100f5b7903906511f82/p/themes/base-theme/template.css#L1242-L1358

https://github.com/FreshRSS/FreshRSS/blob/c700fd370c93d31626460100f5b7903906511f82/p/themes/Origine/origine.css#L1126-L1217

[rezad1393]

again I dont understand what I need to do to make my normal zoom use mobile ui. I use dark theme (the 4th from 11 themes) So I copied this in the customCSS : `/=== MOBILE / /===========/

@media (max-width: 840px) { .form-group .group-name { padding-bottom: 0; text-align: left; }

.box .box-title .configure,
.box .box-content .item .configure {
    visibility: visible;
}

.aside {
    transition: width 200ms linear;
}

.aside .toggle_aside,
#panel .close {
    background: #111;
    display: block;
    width: 100%;
    height: 50px;
    border-bottom: 1px solid #333;
    line-height: 50px;
    text-align: center;
}

.aside.aside_feed {
    padding: 0;
}

.nav_menu .btn {
    margin: 5px 10px;
}

.nav_menu .stick {
    margin: 0 10px;
}

.nav_menu .stick .btn {
    margin: 5px 0;
}

.nav_menu .search {
    display: inline-block;
    max-width: 97%;
}

.nav_menu .search input {
    max-width: 97%;
    width: 90px;
}

.nav_menu .search input:focus {
    width: 400px;
}

.day .name {
    font-size: 1.1rem;
}

.pagination {
    margin: 0 0 3.5em;
}

.notification {
    border-top: none;
    border-right: none;
    border-left: none;
    border-radius: 0;
}

.notification a.close {
    display: block;
    left: 0;
}

.notification a.close:hover {
    opacity: 0.5;
}

.notification a.close .icon {
    display: none;
}

.post {
    padding-left: 15px;
    padding-right: 15px;
}

#close-slider.active {
    background: #111;
    border-bottom: 1px solid #333;
}

} `

and then changed the 840 to 300 and 1600 but nothing changed in each case.

[Frenzie]

You need all that apply. In this case that's probably base, template and dark.

[rezad1393]

thanks I added all three and make the max width parameter bigger than my laptop width and it seemed to work. and if I need the original theme I just zoom out some.

thank you for your help.

[rezad1393]

sorry to bother you again. if I only want to hide the side panel what should I put in the css? I dont want to hide the other stuff, just the left side panel?

[Frenzie]

Just .aside {display: none;} might suffice to do that depending on what you're looking for.

[rezad1393]

.aside {display: none;}

if I do that it is completely gone. I just want to hide it so that I can access it with an icon or hovering on left side.

[Frenzie]

In that case you're most likely looking to apply everything while ignoring only a few choice properties. Particularly these lines (from near the top).

    .item.date, .day .date, 
    .dropdown-menu > .no-mobile, 
    .no-mobile { 
        display: none; 
    } 

While experimenting you could comment things out with /* commented out */ if that's easier.

    .item.date, .day .date, 
    .dropdown-menu > .no-mobile, 
    .no-mobile { 
        /*display: none;*/
    } 

[rezad1393]

I did that but I cant get it to show the feed title (website main title) to show like in desktop mode. so that I can click on it and go to post of that feed. whatever I do I cant just hide the side panel. sorry if this is too much to ask.

can you test it yourself and see if you can just hide the side panel but have a way to access it? when I use the ".aside" panel I lose the panle button (the one that look like a folder and is first from left.

if not then not to worry and you can close this issue.

[Frenzie]

There's another one of those in template.css, specifically that .item.website span.

.header, .flux_header .item.website span, .item.date, .day .date, .dropdown-menu > .no-mobile, .no-mobile {
    display: none;
}

[rezad1393]

I dont think I said my issue in cleat terms. I just need to hide the side channel but be able to access it. I dont want to lose the date and website title when going to mobile mode. I think the issue is that when it goes in mobile mode (which can be tested without using this customcss and zooming in a lot) the website title and date and so on are hidden (display none). but if I remove those line I think dont get the website title. I get the date but not the website (main feed) title.

[rezad1393]

update: removed this and it worked. .flux_header .item.website { width: 40px; }

thanks. but I seems to have enabel something that makes freshrss to show MyLabes at top on panel. what did I do to get that? it is empty.

[Frenzie]

I'm not quite sure what you mean. My Labels seems to work the same in regular and mobile mode?

[rezad1393]

it doesnt seem to be mobile related. it just seems that when I refresh (ctrl+f5 for sure) I get the item mylabes. and when I am testing custom css it go away (i dont know when) but refreshing make it come back. I can ignore it so I am going to close this issue. thank you.

[rezad1393]

hi again after 3 years. I removed custom css because of a bug it had. now I added it again but I forgot my css that I added to get mobile view on normal desktop zoom

can you help me again? I have first theme enabled (alt dark)