little css snippet to make the trisquel forum somewhat responsive
- Anmelden oder Registrieren um Kommentare zu schreiben
I wrote a little CSS snippet that makes the trisquel forum at least useable with tablets and smartphones.
All the site-admins have to do is copy the snippet at the end of the css theme file and it should work.
Here it is, feel free to modify or change at your wish:
@media(max-width: 1024px){
#navigation{
display:none;
}
#main{
margin-right: 0px;
width: 100%
}
td.replies, td.created{
display: none;
}
th.topic-replies, th.topic-created{
display: none;
}
#page{
width: 100%;
min-width: 400px
}
}
Here is a little modification that makes the indentation very slight and instead adds a subtile grey dotted border on the left to indicate that it's actually for a reply (the indentation makes nested replies impossible to read on tablets or smartphones).
@media(max-width: 1024px){
#navigation{
display:none;
}
#main{
margin-right: 0px;
width: 100%
}
td.replies, td.created{
display: none;
}
th.topic-replies, th.topic-created{
display: none;
}
#page{
width: 100%;
min-width: 400px
}
.indented{
margin-left: 3px;
border-left: dotted 5px rgba(0,0,0,0.2);
}
}
Hi! Thanks a lot for your contribution, although I'm not sure about the implementation.
The solution for the excessive indentation is nice and elegant (and I've already put it up in production) but I don't think we should hide the whole sidebar in a mobile view. I realize though that just for the purpose of using the forum your solution works great, but as you and adfeno both have said, we would have to put the contents of that area elsewhere, or made them available at a hide-able menu.
I'll look further into it, although with the plan to migrate to a better solution for the website & forum (which should take care of all these issues) we shouldn't probably invest a lot of effort on fixing the (admittedly not that minor) problems with the current layout.
Thanks again!
I am a member!
On Mon, 2017-12-04 at 13:28 +0100, name at domain wrote:
> I'll look further into it, although with the plan to migrate to a better
> solution for the website & forum (which should take care of all these issues)
Will it still be a mailing list? I love mailing lists! I never have to
log in and go through the interface!
Will you use Markdown instead of the wiki syntax, which isn't even
complete/compliant wiki syntax? (The code tag isn't usable
mid-sentence, for example, even though that's how it's used on wikis.)
--
Caleb Herbert
OpenPGP public key: http://bluehome.net/csh/pubkey
There'll be mailing lists :) I don't think the Trisquel GNU/Linux community would be the same without them. We're looking into using the great features of the newer versions of mailman to solve current issues of integration between the forum and list interfaces.
We're aware of the limitations of the current wiki syntax (which is also harder than it should to maintain) and will surely adopt a better one (hopefully automating the migration of the already written documentation) at the new site.
Hi David, what parts of the sidebar should be included in the mobile menu?
Is all the information neccessary? I would advice to hide the "recent donations" block and everything below.
But of course you decide.
I can't promise when I will be able to code the menu, but if i have some spare time, I will give it a shot.
Thinking about the percentage of time people spends at the forum vs. the other site's sections, I think most elements should still be visible in a mobile view.
We can, though, make some of them less prominent (i.e. putting them at the bottom of the page) and I'm thinking that to make that bit easier, I can separate the sidebar into two blocks that still look the same in the desktop view but can be easily separated in a mobile layout.
Thanks again for taking your time to look into this.
You're welcome! ;)
2017-12-04T13:28:43+0100 name at domain wrote:
> Hi! Thanks a lot for your contribution, although I'm not sure about
> the implementation.
>
> The solution for the excessive indentation is nice and elegant (and
> I've already put it up in production) but I don't think we should hide
> the whole sidebar in a mobile view. I realize though that just for the
> purpose of using the forum your solution works great, but as you and
> adfeno both have said, we would have to put the contents of that area
> elsewhere, or made them available at a hide-able menu.
>
> I'll look further into it, although with the plan to migrate to a
> better solution for the website & forum (which should take care of all
> these issues) we shouldn't probably invest a lot of effort on fixing
> the (admittedly not that minor) problems with the current layout.
>
> Thanks again!
Hi, I just subscribed to the trisquel-devel mailing list, and I wonder
if this is better discussed there?
I mean, we could discuss it there too (so that we could have two places
of discussion).
On a side note, please notice that I'm not a developer, so don't count
my opinion as any serious...
Finally, having considered all that I just said: my experience with
setting "display" to "none" (or to smething that equally hides it) in
regards to accessibility leads me to consider hiding not ideal. However,
in this case I don't see a problem. Although I would try to set their
display style to something along the lines of "block", or something that
forces the things to appear on a line of their own.
For example, in the case of the #navbar, if people access the page and
the style rule applies, then other people who write things to reference
to "that link in the bar to the right", will have to remember that the
bar deosn't exist for visitors with smaller screens.
2017-11-26T14:23:51+0100 name at domain wrote:
> I wrote a little CSS snippet that makes the trisquel forum at least
> useable with tablets and smartphones.
> All the site-admins have to do is copy the snippet at the end of the
> css theme file and it should work.
> Here it is, feel free to modify or change at your wish:
>
> @media(max-width: 1024px){
> #navigation{
> display:none;
> }
> #main{
> margin-right: 0px;
> width: 100%
> }
>
> td.replies, td.created{
> display: none;
> }
>
> th.topic-replies, th.topic-created{
> display: none;
> }
> #page{
> width: 100%;
> min-width: 400px
> }
> }
>
--
- https://libreplanet.org/wiki/User:Adfeno
- Palestrante e consultor sobre /software/ livre (não confundir com
gratis).
- "WhatsApp"? Ele não é livre. Por favor, veja formas de se comunicar
instantaneamente comigo no endereço abaixo.
- Contato: https://libreplanet.org/wiki/User:Adfeno#vCard
- Arquivos comuns aceitos (apenas sem DRM): Corel Draw, Microsoft
Office, MP3, MP4, WMA, WMV.
- Arquivos comuns aceitos e enviados: CSV, GNU Dia, GNU Emacs Org, GNU
GIMP, Inkscape SVG, JPG, LibreOffice (padrão ODF), OGG, OPUS, PDF
(apenas sem DRM), PNG, TXT, WEBM.
Of course this snippet does not provide a perfect responsive user experience. There are a lot of things that could be improved, for instance packing the navigation into a mobile menu and so on, but in my view my solution is better than no solution at all.
But then again, you're free to add and improve as you wish.
I'm afraid I can't take the effort to create a perfect responsive layout for this website, so I thought I want to share at least what I could achieve.
Don't worry, your suggestions and solution is very much appreciated (I'm
not a developer, but if I would be allowed to implement it, I would
gladly do so). ;)
Besides, I'll also see what I can do to also improve over it. ;)
2017-11-26T18:36:15+0100 name at domain wrote:
> Of course this snippet does not provide a perfect responsive user
> experience. There are a lot of things that could be improved, for
> instance packing the navigation into a mobile menu and so on, but in
> my view my solution is better than no solution at all.
> But then again, you're free to add and improve as you wish.
>
> I'm afraid I can't take the effort to create a perfect responsive
> layout for this website, so I thought I want to share at least what I
> could achieve.
>
The indentation is a huge improvement. Thank you.
You're welcome!
- Anmelden oder Registrieren um Kommentare zu schreiben