OsiDark theme for smartphone, tablet and desktop [v0.5]

[osiris]

I am working on a new Domoticz theme called OsiDark.

You can download the development version of this theme from https://github.com/basvdijk/domoticz-osidark-theme

Main targets:

• Simplicity / Clean layout
• Optimized for smartphone, tablet and desktop
• Larger tap area's for buttons on smartphone
• Flat design

Know issues / todo:

• Sliders overlap content
• Sliders not styled

Some screenshots of my work in progress (v0.5)

Smartphone dashboard:


Smartphone settings:


Tablet:


Desktop:

[Heisenberg]

I like it!

[G3rard]

Looking good! Let me know if you need some help with testing the skin.

[osiris]

There are some bugs I need to fix first. After this you are more than welcome to test

[blackdog65]

Hiya,

I'd like to be a tester too!

[DXXPublic]

I would love to test this one out. Looks very nice and clean!

[osiris]

I have added the download link to the first post. Please keep in mind that you are going to use a development version

[G3rard]

I have added the download link to the first post. Please keep in mind that you are going to use a development version

Looking good!!!

Some first remarks.
For desktop (Chrome):
1) On the Dashboard tab the groups are still shown in the old default style (switches, temp have the new style).
On my iPhone (Dashboard mode for Mobile in Settings) this is shown correctly though.
2) On the Switches tab, blinds are still shown in the old style.
3) On the Switches tab, slider button overlaps with the buttons below.
4) Setup drop down menu: pictures and text are not alligned.

For iPad:
1) Sliders overlap with text on Dashboard tab.
2) Sliders overlap with buttons on Switches tab.
3) The 4 buttons don't fit on one rule on Switches tab.

For iPhone:
1) On Off buttons on Dashboard tab (Light/Switch Devices) are not shown on 1 line.

Keep up the good work!

[osiris]

Thanks for the feedback. Most issues are fixed in v0.2. I still need to look into the slider overlapping content. What kind of iPhone are you using?

Also fixed the dropdown menu for mobile. It turned out the dropdown menu falls out of the screen with the default theme.

[Mati24]

Hello, thanks for this theme.
I have a problem with an iPad in landscape mode, I don't see the top of elements because menus are on two lines

Thank you

ImageUploadedByTapatalk1433504965.465295.jpg (58.63 KiB) Viewed 9710 times

[osiris]

Fixed your overlapping problem in v0.3. Unfortunately to fix this the navbar stays on top of the screen i.e. while scrolling it does not stick to the top of your screen.

[TimmiT]

Nice theme! I found some issues doh,

Blinds don't display correct.

The "dot" on the slider is a bit big (goes in front of the text).
The blue "filling" of the slider is rounded at the start (perhaps a minor issue but it bugs me... .

The tekst in the electra box issen't displaying correct.

Keep up the good work!

Tim

[G3rard]

Thanks for the feedback. Most issues are fixed in v0.2. I still need to look into the slider overlapping content. What kind of iPhone are you using?

Also fixed the dropdown menu for mobile. It turned out the dropdown menu falls out of the screen with the default theme.

I am using an iPhone 5s.

[osiris]

@Timmit could you please post a screenshot of your problem with the electra box? The slider is not displaying correct because it has not been styled. See the first post for "know issues".

@G3rard I test this theme on a 4S do you still see iPhone specific issues in v0.3?

[TimmiT]

@Timmit could you please post a screenshot of your problem with the electra box? The slider is not displaying correct because it has not been styled. See the first post for "know issues".

I posted some screenshot are they not showing? I guest i missed the slider thing...

Also when i go to "setting -> more options" they display over the setting menu end not beside it. And long test won't fit in the textbox (example for me in dutch "gebruikersinstellingen")
All report consider chrome desktop btw.

[osiris]

Please try to post screenshots along. It is quite hard to understand from a textual description what is exactly ment

[G3rard]

@Timmit could you please post a screenshot of your problem with the electra box? The slider is not displaying correct because it has not been styled. See the first post for "know issues".

@G3rard I test this theme on a 4S do you still see iPhone specific issues in v0.3?

iPhone issues:
* doesn't fit on screen, you can scroll to the right, this seems to be cause by navbar
* dashboard: status of contact (in example below closed) is shown on button, which doesn't fit
* when opening Setup menu, you have to scroll to the right to see the menu. The menu is shown directly under the Setup button instead to the left of it

See the screenshots.

IMG_2424.png (121.63 KiB) Viewed 9552 times

IMG_2425.png (66.53 KiB) Viewed 9552 times

[osiris]

Thanks for the screenshots! On the emulator I can not reproduct your menu problem. This is what the menu looks like on the emulator:

[TimmiT]

I add some screenshots,

chrome desktop:

The tekst in the electra box issen't displaying correct,

electra

domoticz3.png (7.79 KiB) Viewed 9529 times

Blinds don't display correct.

Blinds

domoticz1.png (11.94 KiB) Viewed 9529 times

"setting -> more options" they display over the setting menu end not beside it. And long text won't fit in the textbox (example for me in dutch "gebruikersinstellingen")

settings

domoticz4.png (36.37 KiB) Viewed 9529 times

Tim

[TimmiT]

And some for chrome on android,

Same issue as G3rard posted,

iPhone issues:
* doesn't fit on screen, you can scroll to the right, this seems to be cause by navbar

srcoll

Screenshot_2015-06-07-10-58-51.png (163.98 KiB) Viewed 9236 times

buttons blinds and dimmer (%) don't fit on the dashbord.

blinds and dimmer

Screenshot_2015-06-07-08-52-00.png (108.63 KiB) Viewed 9236 times

Weather displays incorrect

weather

Screenshot_2015-06-07-08-52-49.png (237.57 KiB) Viewed 9236 times