Oliver2
January 27, 2025, 7:33pm
493
Hi c_r,
Please see here:
I talked offline with @florian-h05 about your ideas. How about creating one github issue for each of these components?
oh-page
oh-grid-cells
oh-cells
oh cell expanded card
oh-button
oh-list
miscellaneous (of course this is too generic)
I would recommend though, that for each of the ideas more details should be provided, so it is clear what and how this should be implemented (from a users and UI perspective)-
From there individual topics can be discussed and pull request could then be deriv…
and here:
opened 06:51PM - 26 Jan 25 UTC
enhancement
main ui
## The problem
This ticket refers to Florian's proposal to improve MainUI's widg… ets.
See here https://community.openhab.org/t/examples-of-dashboards/160927/30?u=oliver2
This ticket is about collecting concrete ideas what to improve as suggested by Stefan here:
https://community.openhab.org/t/examples-of-dashboards/160927/47?u=oliver2
## oh-page
The following list covers properties of an oh-page (f7-page) which are somehow available by config properties or css styles, but they are not visible and easy to set as they do not appear in any config dialog box.
The idea here is to create a dialog box where you can set all relevant properties for an oh-page:
### Hide navbar (top bar of the page):
```
config:
hideNavbar: true
style:
--f7-navbar-height: 0 (was required earlier - might be outdated now)
```
and regain remaining space of first block (shift the whole conent a little bit up to save precious space)
```
stylesheet: |
.block:first-child {
margin-top: 6px;
margin-bottom: 0px;
}
```
### Configure space on left and right side of the page:
```
style:
--f7-block-padding-horizontal: 8px
```
### Configure gaps between columns, rows and cells
...
### Configure block titles:
color:
...
size:
...
font-weight:
...
alignment:
...
spacing around block titles:
```
stylesheet: |
.block-title {margin-bottom: 0px;}
```
### Background color
```
style:
--f7-page-bg-color: fff
```
### Hide sidebar icon:
```
config:
hideSidebarIcon: true
```
### Hide full screen icon:
```
config:
showFullscreenIcon: false
```
### Start page in kiosk mode
Currently you need to write a manifest file and run this page from an icon on your mobile phone's home screen.
Maye there is an easier way or at least the index file and html file could be created automatically.
Additionally NavBar, SideBar, Sidebar Icon, Full screen icon also need to be hidden.
There are more tickets to come. Each of them focussing on separate GUI components.
2 Likes
