left column on small screens / mobile devices

Tue, 01 Aug 2023 11:30:40 +0200

adminsforum@hubzilla.org

𝓒𝓱𝓻𝓲𝓼 wrote the following post Tue, 01 Aug 2023 11:30:36 +0200

left column on small screens / mobile devices

The default HZ template has a 3 column layout. If you look at it on a small screen / mobile device the left column can be seen by clicking on the arrow in the nav bar. If you click on the exclamation mark the notification widget is shown but but how to show all the other widgets which may be placed in the right column? Is there a way?
It would be nice if the items from the right column would "jump" to the left site in mobile device view

show all 9 comments

Sun, 13 Aug 2023 12:42:41 +0200

Scott M. Stolz

scott@loves.tech

@hubzillar I've been playing around with themes, and have made some limited documentation.

#^https://github.com/WisTex/Neuhub

If you want to create your own theme, or just modify aspects of Redbasic, then using Redbasic Child might be a good starting point.

#^https://github.com/WisTex/Neuhub/tree/main/view/theme/redbasic-child

It's not perfect, but it's a start.

Be sure to check out the README.md file for instructions.

Mon, 14 Aug 2023 08:50:28 +0200

𝓒𝓱𝓻𝓲𝓼

chris@im.allmendenetz.de

@Scott M. Stolz so how to edit the the redbasic theme so that items from the right column would "jump" to the left site in mobile device view ? It is probably more css needed, right?

Mon, 14 Aug 2023 15:56:17 +0200

Scott M. Stolz

scott@loves.tech

@𝓒𝓱𝓻𝓲𝓼 Yeah, that is more complicated, but it can be done with Bootstrap classes and a weird workaround of having two versions of the widget, showing each version in a different column, one visible on mobile and the other visible if not on mobile... and it does not work for the notifications widget. I tried. You can't have the JS twice on the page. It's more hassle that it is worth.

It's one of the reasons why I am creating new themes. This aspect of Redbasic makes the theme unworkable for websites I make.

Most of my themes are two column, but I am working on one that has a third navigation column, tentatively called Red Tab.

You can see an example here: #^https://dev.neuhub.org/page/documentation/home

It has some bugs, but I am hoping to release this one soon.

Tue, 15 Aug 2023 08:54:01 +0200

𝓒𝓱𝓻𝓲𝓼

chris@im.allmendenetz.de

@Scott M. Stolz Your Red Tab Theme looks really promising
___

the notifications widget works fine for me on its place...

it can be done with Bootstrap classes and a weird workaround of having two versions of the widget, showing each version in a different column, one visible on mobile and the other visible if not on mobile...

Ok that is how it could work and actually i should work like that in the standard redbasic theme. So if you can make is work like that this changes should be part of the core hz repro

Wed, 16 Aug 2023 04:20:04 +0200

Scott M. Stolz

scott@loves.tech

@𝓒𝓱𝓻𝓲𝓼 Unfortunately, I am not a developer, per se. I can play around with Bootstrap, and do simple things like query the database to get data, but adding this sort of functionality is currently out of my league.

If we were using the existing infrastructure (the layout system) to place widgets. being able to pass an html class that wraps around the widget would work well. Then you can customize it as much as you want, and you don't have to rewrite any of the widgets.

For example, let's say you call the following in the layout editor:

[widget=slugfish][class="d-none d-xl-block"][/class][var=count]3[/var][/widget]

The d-none d-xl-block makes it only visible on XL screens, hidden on mobile and tablets.

When Hubzilla displays the widget, it would surround the widget's output with a div tag like this:

<div class="">
<!-- output of the widget -->
</div>

If you specified [class="d-none d-xl-block"][/class] then it would be:

<div class="d-none d-xl-block">
<!-- output of the widget -->
</div>

Of course, there are more fun ways to do this, like have a drag and drop widget interface that allows you to select whether a widget is visible on mobile, large screens, or both. This is just a quick hack to the existing Hubzilla code which would enable such functionality without rewriting the entire layout system in core, and without rewriting any of the widgets. It's also extremely flexible, since you can put any class you want in there.

I'm not familiar enough with the core codebase to even know where begin. And I don't know PHP enough to modify it if I did know which file to edit.

This is something a developer would need to add to the core.

Reference: #^https://getbootstrap.com/docs/5.3/utilities/display/

Wed, 16 Aug 2023 04:50:07 +0200

Scott M. Stolz

scott@loves.tech

Another way would be to rewrite /view/php/default.php so that it uses a Responsive Offcanvas, which was introduced in Bootstrap v5.2.0, for the third column.

#^https://getbootstrap.com/docs/5.3/components/offcanvas/#responsive

This would mean that on a large screen it appears as another column, but on mobile it can be accessed via an icon, similar to how the hamburger menu works.

But this would mean that there would be changes to Redbasic's navigation, which I think would need to be approved by @Mario Vavti before being changed.

And there are some downsides to this approach. The biggest downside is that it adds a second offcanvas, which could be confusing to users.

I attempted something like this in my early attempts at a theme (before responsive offcanvas even existed), and I did not really like the results.

Maybe someone can figure out how to put both sidebar columns into the same offcanvas, one on top of each other. That would be less confusing for users, but I am not sure how to achieve this. If anyone knows, this would be a useful trick to know how to do.

Wed, 16 Aug 2023 08:50:02 +0200

𝓒𝓱𝓻𝓲𝓼

chris@im.allmendenetz.de

@Scott M. Stolz

[class="d-none d-xl-block"][/class]

class is not supported jet - right ?

Tue, 22 Aug 2023 18:57:09 +0200

Scott M. Stolz

scott@loves.tech

@𝓒𝓱𝓻𝓲𝓼

class is not supported jet - right ?

Yeah, this is just something I dreamed up. It is just a suggested way of programming that into core. There are dozens of other ways of implementing such a feature.

Another way would be to pass a variable [var=class]d-none d-xl-block[/var] but the widgets and their templates would need to be modified to use that variable.

Sun, 14 Jan 2024 17:20:16 +0100

Scott M. Stolz

scott@loves.tech

@hubzillar We are working on the documentation. And Federated Works (Neuhub) is creating new themes. We will document our themes so it is easier to make your own.