Compatibility check and testing for Responsive Design (materialize)

[ioBroker-Bot]

Notification from ioBroker Check and Service Bot

Dear Adapter developer,

ioBroker should be fully usable and operable on mobile devices

So please check your Materialize or React based Adapter for Responsive Design. You can perform these tests in the developer console of your browser (F12).

Future additions and corrections to this issue will be published at the responsive-design-initiative repository. Please check https://github.com/iobroker-community-adapters/responsive-design-initiative?tab=readme-ov-file#responsive-design-initiative for updates.

---

For adapters in the Materialize design, important classes for the correct resolution should also be used for mobile devices.

List of classes for different display sizes:

• lx - width in 1/12 of screen on large screens (1200px <= width < 1536px)
• mx - width in 1/12 of screen on middle screens (900px <= width < 1200px)
• sx - width in 1/12 of screen on small screen (600px <= width < 900px)

The recommended values for a <div> are as follows:

<div class="col s12 m6 l4">

The classes s,m and l must be configured in each <div>.

Custom css for the mobile resolution

If you use your own CSS styles in your adapters, you should define the necessary values for the mobile resolution in the area. The area must be listed as follows in the CSS:

/* Style for small Screens */
@media screen and (max-width: 768px) {
  here your input...
}

/* Style for very small Screens */
@media screen and (max-width: 600px) {
  here your input...
}

Integration of css and js files

It is also important that the following js and css files are included in index_m.html or tab_m.html

<!-- Load ioBroker scripts and styles -->
<link rel="stylesheet" type="text/css" href="../../lib/css/fancytree/ui.fancytree.min.css" />
<link rel="stylesheet" type="text/css" href="../../css/adapter.css" />
<link rel="stylesheet" type="text/css" href="../../lib/css/materialize.css">

<script type="text/javascript" src="../../lib/js/jquery-3.2.1.min.js"></script>
<script type="text/javascript" src="../../socket.io/socket.io.js"></script>

<script type="text/javascript" src="../../lib/js/materialize.js"></script>
<script type="text/javascript" src="../../lib/js/jquery-ui.min.js"></script>
<script type="text/javascript" src="../../lib/js/jquery.fancytree-all.min.js"></script>

<script type="text/javascript" src="../../js/translate.js"></script>
<script type="text/javascript" src="../../js/adapter-settings.js"></script>
<script type="text/javascript" src="words.js"></script>

Adapter-settings.js and adapter.css are very important for a responsive design. These files are provided and maintained by the admin.

---

Please close the issue after you checked it.

Feel free to contact me (@iobroker-bot) if you have any questions.

And THANKS A LOT for maintaining this adapter from me and all users.
Let's work together for the best user experience.

your
ioBroker Check and Service Bot

@simatec for evidence

Note: If you added Responsive Design tests already, simply close this issue.

[github-actions[bot]]

This issue is stale because it has been open for 7 days with no activity.

[mcm1957]

is still to be done

[github-actions[bot]]

This issue is stale because it has been open for 7 days with no activity.

[mcm1957]

No, its not processed only.

[SKB-CGN]

Checked and updated!

[simatec]

Your adapter still has bugs in the mobile views. I have created a PR with the fix for you

[SKB-CGN]

Will have a look into it. - for me it was looking ok.

[simatec]

Your current version has the following problems:

• No margins in the config
• Scrolling not possible in the mobile view

without adjustments from PR

With adjustments from PR

We are trying to get ioBroker into a unified picture, where all developers should help a little bit

[SKB-CGN]

Will catch that up later this week. I think, i need to replace some of the boxes.

[SKB-CGN]

@simatec Can you please have a look again, with the current Git-Version? From my point of view it looks pretty ;)

[simatec]

Why did you close my PR? Scrolling in the mobile view is still not possible

[SKB-CGN]

I closed your PR, because i updated the whole document, to have it nicely.

Please install the current Github Version and test. This Screenshot looks different from the current version. Scrolling is also possible!

[simatec]

Your Admin Version is not the current v7.2.6 In v7.2.6 there were decisive changes for a responsive design, especially for Materialize adapters

[SKB-CGN]

I have Admin 7.1.5, which is the last official release. Now, i have to swap to beta Admin, to test those things?

[simatec]

Yes, the change will follow shortly in the stable and are a preparation for the Responsive Design Initiative of ioBroker

[SKB-CGN]

Ok, may i ask you, how to install only admin beta? It cant be installed via Github.

Edit:

iobroker@ioBroker-master:/opt/iobroker$ iob upgrade admin@7.2.6
Would you like to upgrade admin from @7.1.5 to @7.2.6 now? [(y)es, (n)o]: y

did the Trick ;)

Will check it now.

[SKB-CGN]

Why is:

@media screen and (max-width: 768px) {
  .adapter-body {
    overflow: auto;
  }
}

Not standard?

[simatec]

Because your scrolling didn't work on mobile screens

[SKB-CGN]

Yeah, but it should be a standard in the adapter.css file or not?

[simatec]

But at the end of the day it is no problem to have this in the style.css as well.

[SKB-CGN]

I think that should!

Now, i changed things on the page - iob upload energiefluss does not work anymore and i dont know why. Holy bible - what action.

[simatec]

Hence my question as to why you didn't simply release the PR. It was adapted to all resolutions and worked

[SKB-CGN]

Not with the document before.

I want the boxes to appear correctly.

But more important is now, why the upload of the adapter does not work anymore.

Is there again a change I am not aware of?

[simatec]

No, there are no changes to the upload

[SKB-CGN]

Great. Why is it not working anymore? Even deleting the document makes it it's still there 🤷

[simatec]

I don't quite understand? Which document?

[SKB-CGN]

I upload the modified "index_m.html" to the admin folder. Enter iob upload energiefluss the routine runs - but the document is the same as before.

Edit: Sorry, for confusing - its not the same document, but the style classes are replaced somehow. Why?

I want to have the search icon behind the field, but my classes are replaced.

The row for this is:

<div class="row">
    <div class="input-field col m11 s10">
        <input class="value" id="label_production" type="text" />
        <label for="label_production" class="translate" data-lang="label">Label:</label>
        <span class="translate" data-lang="ex_label">label inside the element</span>
    </div>
    <div class="input-field col m11 s10">
        <input class="value dp" id="production" type="text" />
        <label for="production" class="translate" data-lang="state_production">Production state:</label>
        <span class="translate" data-lang="ex_production">Data point of your photovoltaic
            production</span>
    </div>
    <div class="input-field col m1 s1">
        <a class="btn-floating waves-effect waves-light blue table-button-add input-field datasource datasource"><i
                class="material-icons">search</i></a>
    </div>
</div>

So, how to place the waves button behind the input field?

[SKB-CGN]

So, please check the adapter again. I have uploaded a new version to github.

[simatec]

The responsive design on the different screen sizes looks good.

What I have noticed, however, is that your table bar is not fixed. In the ioBroker standard, this should always be accessible, regardless of the scroll position you are currently in.

Here is an example of your and another adapter

[SKB-CGN]

Ah, ok. Will check that.

Installing ShutterControl 1.8.3 also hides the table bar.

View:

Scrolled:

[simatec]

No, the statement is not correct. See gif

What I see here is an additional scroll, which is definitely not present in the current v1.8.3 (see screenshots)

[SKB-CGN]

Did you perhaps patch the admin on your local install? On my installation, there is no fixed menubar - even with shuttercontrol.

[simatec]

Shuttercontrol was just an example. Furthermore, Shuttercontrol has always had a fixed table bar, just like the iobroker standard. This is the case with Admin v7.2.6 (current beta) as well as with stable versions of Admin.

[SKB-CGN]

Well, i installed Shuttercontrol 1.8.2 and checked. On my end with Admin 7.2.6 there is no fixed table bar.

Can you inspect the table bar and check, where the CSS is defined?

[simatec]

Please show a complete screenshot with full resolution. Which admin version is installed? Has anything been patched manually? Which browser are you using?

[SKB-CGN]

Admin 7.2.6 is installed. Nothing is manually Patched.

Using Firefox 128.4.0esr (64-Bit)

Screenshots: Not scrolled:

Scrolled:

[simatec]

Before we search around for a long time, take another Materialze adapter for comparison... I'll have to have a look at the peculiarities of Firefox when I get the chance.

The Feiertage adapter is a pretty good reference for the table bar

[SKB-CGN]

You ask me now, to install the second adapter, to have a look, whats in there?!

I think, the best solution would be, to provide the example code for the sticky menu bar including the necessary classes, instead of letting install one adapter the other.

This is always so annoying with ioBroker - things are implemented and there is no information about any change. All things, that occur after an update is the job of the maintainer to search for things, why some functions, layouts or other things are not working anymore or don't work as expected.

As all adapters should look the same, it should also be included in the adapter creator, where my adapter was created with 2 years ago.

[SKB-CGN]

The only thing, which is missing here is:

height: 100%;

in the first row. This could also be implemented in the CSS delivered by admin.

[simatec]

I didn't ask you to install one or two adapters, I just pointed out that your table bar is not fixed.

This has nothing to do with an update from the admin or anything like that, it's an error in your HTML/CSS.

You know, to be honest... I took on the initiative and try to help everyone. But all I get here are accusations and allegations from you, which I have absolutely no desire to deal with.

Either you fix the display problems or just allow PRs. But that's not the kind of communication I/we want.

I'm out at this point. When you fix it, I'll add the adapter as Responsive Ready, otherwise it will stay on the list of missing responsive!

[SKB-CGN]

It was definitely not my intention to blame you or your help - I really appreciate your commitment. My feedback was more related to the general documentation and the updates in the ioBroker system.

Unfortunately, the frustration regarding the lack of documentation and communication about changes and standards has become quite large. I understand that this seems out of place here and I apologize if it was misunderstood.

On the subject of the table and the fixed menu bar: Please reinstall the current version of Github - that should solve everything!

[simatec]

Looks very good...

[SKB-CGN]

Okay, so everything is completed here?

May I close the issue or is there something else, which needs to be done?

[simatec]

I think it looks responsive and is also easy to use on a smartphone. I'll add it to the list of responsive ready adapters and the issue can be closed.

If you have the time and inclination, take a look at jsonConfig and think about changing your adapter. This makes the configuration much easier than messing around with html / css.

[github-actions[bot]]

This issue is stale because it has been open for 7 days with no activity.

[mcm1957]

This issue should not be considered stale as it is not yet processed.

[SKB-CGN]

It is processed and ready inside repository!

[mcm1957]

OK, thanks for processing.

Feel free to close the Issue if nothing is open.