Rooms-Menu -> Raumliste (Listview) zweispaltig

[lucipher]

Hallo Miguel,

ich habe jetzt mal deinen Ausschnitt in meinen Testaufbau mit eingefügt.

<ul data-role="listview" data-dividertheme="c">
 <li data-role="list-divider">Obergeschoss</li>
 <li data-icon="false" class="tilemenu">
  <a href="index.php?page=og_beleuchtung">
   <img class="icon" src="{{ icon0 }}light_light.png" />
   <h3>Flur</h3>

   <div class="ui-li-aside">
    {{ basic.symbol('erdgeschoss.flur.bodenlicht', ['erdgeschoss.flur.bodenlicht'], 'Bodenlicht', icon1~'light_light.png', 1, 'or') }}&nbsp;&nbsp;
    {{ basic.symbol('erdgeschoss.flur.treppenlicht', ['erdgeschoss.flur.treppenlicht'], 'Treppe', icon1~'light_light.png', 1, 'or') }}&nbsp;<br>
    {{ basic.symbol('obergeschoss.flur.licht.status', ['obergeschoss.flur.licht.status'], 'Licht ', icon1~'light_light.png', 1, 'or') }}&nbsp;<br>
    {{ basic.float('obergeschoss.flur.temperatur', 'obergeschoss.flur.temperatur', 'temp') }} &nbsp;
   </div>
  </a>
 </li>
 <li data-icon="false" class="tilemenu">
  <a href="index.php?page=og_schlafzimmer">
   <img class="icon" src="{{ icon0 }}scene_making_love.png" />
   <h3>Schlafzimmer</h3>

   <div class="ui-li-aside">
    {{ basic.symbol('obergeschoss.schlafzimmer.licht.status', ['obergeschoss.schlafzimmer.licht.status'], 'Schlafzimmer ', icon1~'light_light.png', 1, 'or') }}&nbsp;
    {{ basic.symbol('obergeschoss.ankleide.licht.status', ['obergeschoss.ankleide.licht.status'], 'Ankleide  ', icon1~'light_light.png', 1, 'or') }}&nbsp;<br>
    {{ basic.symbol('obergeschoss.schlafzimmer.fenster', ['obergeschoss.schlafzimmer.fenster'], 'Fenster geöffnet  ', icon1~'fts_window_2w_open.png', 1, 'or') }}&nbsp;<br>
    {{ basic.float('obergeschoss.schlafzimmer.temperatur', 'obergeschoss.schlafzimmer.temperatur', 'temp') }} &nbsp;
   </div>
  </a>
 </li>

 <li data-icon="false" class="tilemenu">
  <a href="index.php?page=kinderzimmer2">
   <img class="icon" src="{{ icon0 }}scene_childs_room.png" />
   <h3>Testraum</h3>

   <div class="ui-li-aside">
    {{ basic.symbol('obergeschoss.kindsued.licht.status', ['obergeschoss.kindsued.licht.status'], 'Deckenlicht', icon1~'light_light.png', 1, 'or') }}&nbsp;
    {{ basic.symbol('obergeschoss.kindsued.fenster', ['obergeschoss.kindsued.fenster'], 'Fenster geöffnet  ', icon1~'fts_window_2w_open.png', 1, 'or') }}&nbsp;<br>
    {{ basic.float('obergeschoss.kindsued.temperatur', 'obergeschoss.kindsued.temperatur', 'temp') }} &nbsp;
   </div>
  </a>
 </li>
 <li data-icon="false" class="tilemenu">
  <div class="ui-li-aside">
   &nbsp;
  </div>
 </li>
 &nbsp;
</ul>

<ul data-role="listview" data-dividertheme="c">
 <li data-role="list-divider">Erdgeschoss</li>
 <li data-icon="false" class="tilemenu">
  <a href="index.php?page=wohnen">
   <img class="icon" src="{{ icon0 }}scene_livingroom.png" />
   <h3>Wohnbereich</h3>

   <div class="ui-li-aside">
    {{ basic.symbol('erdgeschoss.wohnzimmer.licht.status', ['erdgeschoss.wohnzimmer.licht.status'], 'Wohnzimmer  ', icon1~'light_light.png', 1, 'or') }}&nbsp;&nbsp;
    {{ basic.symbol('erdgeschoss.wohnzimmer.esstisch', ['erdgeschoss.wohnzimmer.esstisch'], 'Esstisch  ', icon1~'light_light.png', 1, 'or') }}&nbsp;&nbsp;
    {{ basic.symbol('erdgeschoss.wohnzimmer.ambiente.status', ['erdgeschoss.wohnzimmer.ambiente.status'], 'Ambiente  ', icon1~'light_light.png', 1, 'or') }}&nbsp;&nbsp;
    {{ basic.symbol('erdgeschoss.wohnzimmer.giebel.status', ['erdgeschoss.wohnzimmer.giebel.status'], 'Giebel  ', icon1~'light_light.png', 1, 'or') }}&nbsp;&nbsp;<br>
    {{ basic.symbol('erdgeschoss.wohnzimmer.terrassentuer', ['erdgeschoss.wohnzimmer.terrassentuer'], 'Terrasse Wohnzimmer geöffnet  ', icon1~'fts_window_2w_open.png', 1, 'or') }}&nbsp;&nbsp;
    {{ basic.symbol('erdgeschoss.essbereich.fenster', ['erdgeschoss.essbereich.fenster'], 'Terrasse Esstisch geöffnet  ', icon1~'fts_window_2w_open.png', 1, 'or') }}&nbsp;&nbsp;<br>
    {{ basic.float('erdgeschoss.wohnzimmer.temperatur', 'erdgeschoss.wohnzimmer.temperatur', 'temp') }} &nbsp;
   </div>
  </a>
 </li>
 <li data-icon="false" class="tilemenu">
  <div class="ui-li-aside">
   &nbsp;
  </div>
 </li>
 &nbsp;
</ul>

Das Ergebnis ist:
TestVisu.PNG

Dazu habe ich aber noch etwas eingefügt. Damit das funktioniert müssen in einer Zeile immer 2 Listenelemente vorhanden sein. Hierzu habe ich jeweils ein leeres Listenelement zu deinem HTML Code hinzugefügt.

 <li data-icon="false" class="tilemenu">
  <div class="ui-li-aside">
   &nbsp;
  </div>
 </li>

Hoffe das hilft weiter.

Gruß

[BlackCrow]

Super ,vielen lieben Dank!! Wirklich klasse :-)

Es funktioniert jetzt.

Liebe Grüße

Miguel

[lexxmm]

Hi,
Ich hätte es gerne, dass in der Startansicht die Räume zweispaltig dargestellt werden. Wenn man dann auf einen Raum geklickt hat und die Räume links aufgelistet werden wäre es besser das einspaltige Design zu haben. Bei meinem 8" Tablet passen sonst die Raumnamen und die Temperatur nicht in das Feld.

Hallo

hat das jemand hinbekommen?

Gruss, Micha

[masterjost]

Hallo Micha,

falls es noch benötigt wird, ich habs folgendermaßen gemacht. Grundsätzlich wie beschrieben über die CSS und dann noch folgenden Eintrag in die eigene VISU CSS

.tilemenu {
    border-right: 0 none;
    border-top: 0 none;
    box-sizing: border-box;
    display: block;
    float: left;
    /*height: 70px;*/
    margin: 0;
    overflow: hidden;
    padding: 0 5px 5px 0;
    position: relative;
    width: 100%;
}

/* some corrections for bigger displays */
@media all and (min-width: 900px) {
    .tilemenu {
        width: 50%;
    }
}

.tilemenu_1z {
    border-right: 0 none;
    border-top: 0 none;
    box-sizing: border-box;
    display: block;
    float: left;
    /*height: 70px;*/
    margin: 0;
    overflow: hidden;
    padding: 0 5px 5px 0;
    position: relative;
    width: 100%;
}

Er stellt das Menü also 1-spaltig dar, außer du hast ein Device, das mindestens 900Pixel Breite hat, dann wirds 2-spaltig.

Das tilemenu_1z steht bei mir für einzeilig. Bezieht sich aber nur auf das Raummenü, welches links auftaucht, wenn du einen Raum ausgewählt hast. Da das Menü recht schmal ist, wollte ich das auch 1-spaltig haben.
Jeder Raum bekommt dann ganz oben statt

{% extends "rooms.html" %}

ein

{% extends "rooms_1z.html" %}

. Die rooms_1z.html ist eine Kopie der rooms.html nur, dass ich bei dieser das

{% include 'rooms_menu.html' %}

durch ein

{% include 'rooms_menu_1z.html' %}

ersetzt habe. Die rooms_menu_1z.html ist wiederrum eine Kopie deiner eigenen rooms_menu.html, nur dass du alle einträge von

class="tilemenu

in

class="tilemenu_1z

abänderst.
Dadurch musst du zwar immer die rooms_menu UND die rooms_menu_1z aktuell halten, aber was "intelligentes" über css hab ich leider noch nicht hinbekommen und es funktioniert soweit erstmal bei mir.



Grüße

[masterjost]

1.jpg2.jpg

[Gue0411]

Hallo zusammen,
ich habe mich auch an der zweispaltigen Darstellung versucht.
Wenn ich das nach der letzten Anleitung einbaue, dann bekomme ich allerdings sowas hier zurück:
smartVISU_rooms_menu.png

mein Eintrag in der css sieht so aus:

.liste2fach {
    border-right: 0 none;
    border-top: 0 none;
    box-sizing: border-box;
    display: block;
    float: left;
    /*height: 70px;*/
    margin: 0;
    overflow: hidden;
    padding: 0 5px 5px 0;
    position: relative;
    width: 100%;
}
/* some corrections for bigger displays */
@media all and (min-width: 900px) {
    .liste2fach {
        width: 50%;
    }
}

und die rooms_menu sieht so aus:

<ul data-role="listview" data-dividertheme="c">
    <li data-role="list-divider">Infos</li>
    <li data-icon="false" class="liste2fach">
        <a href="index.php?page=infos_wetter">
            <img class="icon"' src='{{ icon0 }}weather_cloudy_light.svg'/><h3>Wetter</h3>
            <div class="ui-li-aside"></div>
        </a>
    </li>
    <li data-icon="false" class="liste2fach">
        <a href="index.php?page=infos_abfall">
            <img class="icon"' src='{{ icon0 }}message_garbage.svg'/><h3>Abfallkalender</h3>
            <div class="ui-li-aside"></div>
        </a>
    </li>
    <li data-icon="false" class="liste2fach">
        <a href="index.php?page=infos_telefon">
            <img class="icon"' src='{{ icon0 }}phone_ring.svg'/><h3>Telefonliste</h3>
            <div class="ui-li-aside"></div>
        </a>
    </li>
    <li data-icon="false" class="liste2fach">
        <a href="index.php?page=infos_lueftung">
            <img class="icon"' src='{{ icon0 }}vent_ventilation_level_0.svg'/><h3>Lüftung</h3>
            <div class="ui-li-aside"></div>
        </a>
    </li>
    <li data-icon="false" class="liste2fach">
        <a href="index.php?page=infos_waermepumpe">
            <img class="icon"' src='{{ icon0 }}sani_buffer_temp_all.svg'/><h3>Wärmepumpe</h3>
            <div class="ui-li-aside"></div>
        </a>
    </li>
    <li data-icon="false" class="liste2fach">
        <a href="index.php?page=infos_pv">
            <img class="icon"' src='{{ icon0 }}measure_photovoltaic_inst.svg'/><h3>PV</h3>
            <div class="ui-li-aside"></div>
        </a>
    </li>
    
    <li data-role="list-divider">Übersichten</li>
    <li data-icon="false">
        <a href="index.php?page=summary_rollos">
            <img class="icon"' src='{{ icon0 }}fts_shutter_40.svg'/><h3>Rollos</h3>
            <div class="ui-li-aside"></div>
        </a>
    </li>
    <li data-icon="false">
        <a href="index.php?page=summary_temperaturen">
            <img class="icon"' src='{{ icon0 }}temp_temperature.svg'/><h3>Temperaturen</h3>
            <div class="ui-li-aside"></div>
        </a>
    </li>
    
    <li data-role="list-divider">Spezial</li>
    <li data-icon="false">
        <a href="index.php?page=room_zentral">
            <img class="icon"' src='{{ icon0 }}control_building_s_okg_all.svg'/><h3>Zentralfunktionen</h3>
            <div class="ui-li-aside"></div>
        </a>
    </li>

[danny]

letzte Zeile fehlt ein </ul>?

<li data-role="list-divider">Spezial</li>
<li data-icon="false">
<a href="index.php?page=room_zentral">
<img class="icon"' src='{{ icon0 }}control_building_s_okg_all.svg'/><h3>Zentralfunktionen</h3>
<div class="ui-li-aside">
</div>
</a>
</li>
</ul>

Gruß Danny

[Maxthomas2001]

Hallo,
ich bin nach der Anleitung von Masterjost vorgegangen. Passt soweit.
Ich hätte allerdings gerne zwischen den Spalten einen Trenner. Oder einen kleinen Freiraum.
Also zwei nebeneinander angrenzende Räume sollen optisch etwas getrennt werden.

Hat jemand einen Tipp, wie man so etwas bewerkstelligen kann?

[Maxthomas2001]

Hallo,
hat jemand vielleicht einen Tipp, wie man die Schaltflächen nebeneinander auch optisch wie zwei Schaltflächen erscheinen lassen kann?