quad2 und quad3 Ansicht kombinieren

[Chefkoch81]

Hi,

Ich habe versucht meine Ansicht etwas zu optimieren. In meinem Anwendungsfall habe ich ein 16:10 Display für die Darstellung (ein Tablet an der Wand) und damit ich weniger scrollen muss habe ich versucht mein rooms_menu.html so anzupassen, dass pro Zeile 2 Buttons (Räume) dargestellt werden.

Das klappt auch so halbwegs, allerdings muss ich dazu etwas tricksen, also mit manuellen <br> Tags zB.

Auch schaffe ich es nicht, alles so genau auszurichten, dass keine Abstände zwischen den Listentrennern und den Buttons vorhanden sind.

Vielleicht hat ja jemand eine Idee. Angehängt noch ein Screenshot wie es aktuell mit folgendem Code aussieht:

<ul data-role="listview" data-dividertheme="c"> 
    <li data-role="list-divider">Fenster und Tueren</li>

           <li data-icon="false">
<span data-role="controlgroup" data-type="horizontal"> 
                  Haupteingang
                     {{ basic.symbol('overview.eg.vorraum.tuer_haupteingang1', 'eg.vorraum.tuer_haupteingang', '', icon1~'fts_door_open.png', 1) }}
                     {{ basic.symbol('overview.eg.vorraum.tuer_haupteingang0', 'eg.vorraum.tuer_haupteingang', '', icon0~'fts_door.png', 0) }}
                  &nbsp;&nbsp;&nbsp;Garage
                     {{ basic.symbol('overview.garage.garagentor1', 'garage.garagentor', '', icon1~'fts_garage.png', 1) }}
                     {{ basic.symbol('overview.garage.garagentor0', 'garage.garagentor', '', icon0~'fts_garage_door_100.png', 0) }}
                  &nbsp;&nbsp;&nbsp;Kellereingang
                     {{ basic.symbol('overview.kg.vorraum.tuer_haupteingang1', 'kg.vorraum.tuer_haupteingang', '', icon1~'fts_door_open.png', 1) }}
                     {{ basic.symbol('overview.kg.vorraum.tuer_haupteingang0', 'kg.vorraum.tuer_haupteingang', '', icon0~'fts_door.png', 0) }}
                  &nbsp;&nbsp;&nbsp;Balkontuer
                     {{ basic.symbol('overview.eg.wohnzimmer.balkontuer1', 'eg.wohnzimmer.balkontuer', '', icon1~'fts_door_open.png', 1) }}
                     {{ basic.symbol('overview.eg.wohnzimmer.balkontuer0', 'eg.wohnzimmer.balkontuer', '', icon0~'fts_door.png', 0) }}
                  &nbsp;&nbsp;&nbsp;Wohnzimmer
                     {{ basic.symbol('overview.eg.wohnzimmer.fenster_alle0', ['eg.wohnzimmer.fenster_links', 'eg.wohnzimmer.fenster_rechts'], '', icon0~'fts_window_2w.png', 0, 'and') }}
                     {{ basic.symbol('overview.eg.wohnzimmer.fenster_alle1', ['eg.wohnzimmer.fenster_links', 'eg.wohnzimmer.fenster_rechts'], '', icon1~'fts_window_2w_open_lr.png', 1, 'and') }}
                     {{ visubasic.symbol('overview.eg.wohnzimmer.fenster_links', ['eg.wohnzimmer.fenster_links', 'eg.wohnzimmer.fenster_rechts'], '', icon1~'fts_window_2w_open_l.png', 1, 'and', ['','not']) }}
                     {{ visubasic.symbol('overview.eg.wohnzimmer.fenster_rechts', ['eg.wohnzimmer.fenster_rechts', 'eg.wohnzimmer.fenster_links'], '', icon1~'fts_window_2w_open_r.png', 1, 'and', ['','not']) }}
                  &nbsp;&nbsp;&nbsp;Esszimmer
                     {{ basic.symbol('overview.eg.esszimmer.fenster_alle0', ['eg.esszimmer.fenster_links', 'eg.esszimmer.fenster_rechts'], '', icon0~'fts_window_2w.png', 0, 'and') }}
                     {{ basic.symbol('overview.eg.esszimmer.fenster_alle1', ['eg.esszimmer.fenster_links', 'eg.esszimmer.fenster_rechts'], '', icon1~'fts_window_2w_open_lr.png', 1, 'and') }}
                     {{ visubasic.symbol('overview.eg.esszimmer.fenster_links', ['eg.esszimmer.fenster_links', 'eg.esszimmer.fenster_rechts'], '', icon1~'fts_window_2w_open_l.png', 1, 'and', ['','not']) }}
                     {{ visubasic.symbol('overview.eg.esszimmer.fenster_rechts', ['eg.esszimmer.fenster_rechts', 'eg.esszimmer.fenster_links'], '', icon1~'fts_window_2w_open_r.png', 1, 'and', ['','not']) }}

</span>
           </li>

    <li data-role="list-divider">Szenen</li>

           <li data-icon="false">
<span data-role="controlgroup" data-type="horizontal"> 
                     {{ basic.button('overview.szenen.tv', 'szenen', 'EG', icon0~'it_television.png', 0, 'midi') }}
<!--                     {{ visubasic.dual('overview.szenen.tv', 'szenen', 'EG', icon0~'it_television.png', icon0~'it_television.png', 0, 0, 'midi') }}-->
                    {{ visubasic.dual('overview.gruppe.hand.og_licht_alle', 'gruppe.hand.og_licht_alle', 'Licht', icon0~'control_building_s_og.png', icon1~'control_building_s_og.png', 0, 0, 'midi') }}
                    {{ visubasic.dual('overview.gruppe.hand.eg_licht_alle', 'gruppe.hand.eg_licht_alle', 'Licht', icon0~'control_building_s_eg.png', icon1~'control_building_s_eg.png', 0, 0, 'midi') }}
                    {{ visubasic.dual('overview.gruppe.hand.kg_licht_alle', 'gruppe.hand.kg_licht_alle', 'Licht', icon0~'control_building_s_kg.png', icon1~'control_building_s_kg.png', 0, 0, 'midi') }}
                     {{ basic.button('overview.garage.garagentor_aufzu', 'garage.garagentor_aufzu', 'Auf/Zu Garage', icon0~'fts_garage_door_100.png', 1, 'midi') }}

</span>
           </li>
           
</ul>&nbsp;<br><br>
           <ul data-role="listview" data-dividertheme="c">
               <li data-role="list-divider">Erdgeschoss</li>
 </ul><br>&nbsp;&nbsp;
    <ul data-role="listview" data-dividertheme="c" class="tiles">
    
           <li data-icon="false">
               <a href="#popup_eg_vorraum" data-rel="popup">
                  <img class="icon"' src='{{ icon0 }}scene_hall.png'/><h3>Vorraum</h3>
                  <div class="ui-ri-aside">
                     {{ basic.symbol('overview.eg.vorraum.brand1', 'eg.vorraum.brand', '', icon1~'secur_smoke_detector.png', 1, 'mini') }}
                     {{ basic.float ('overview.eg.vorraum.temperatur.ist', 'eg.vorraum.temperatur.ist', '°C' ) }}
                     {{ basic.symbol('overview.eg.vorraum.lichtoff', ['eg.vorraum.licht', 'eg.vorraum.wandlicht_haupteingang'], '', icon0~'light_light.png', '0', 'and') }}
                     {{ basic.symbol('overview.eg.vorraum.lichton' , ['eg.vorraum.licht', 'eg.vorraum.wandlicht_haupteingang'], '', icon1~'light_light.png') }}
                  </div>
               </a>
           </li>

           <li data-icon="false">
               <a href="#popup_eg_wc" data-rel="popup">
                  <img class="icon"' src='{{ icon0 }}scene_toilet.png'/><h3>WC</h3>
                  <div class="ui-ri-aside">
                     {{ basic.symbol('overview.eg.wc.brand1', 'eg.wc.brand', '', icon1~'secur_smoke_detector.png', 1, 'mini') }}
                     {{ basic.float ('overview.eg.wc.temperatur.ist', 'eg.wc.temperatur.ist', '°C' ) }}
                     {{ basic.symbol('overview.eg.wc.lichtoff', ['eg.wc.licht', 'eg.wc.spiegellicht'], '', icon0~'light_light.png', '0', 'and') }}
                     {{ basic.symbol('overview.eg.wc.lichton' , ['eg.wc.licht', 'eg.wc.spiegellicht'], '', icon1~'light_light.png') }}
                  </div>
               </a>
           </li>

           <li data-icon="false">
               <a href="#popup_eg_arbeitsraum" data-rel="popup">
                  <img class="icon"' src='{{ icon0 }}scene_laundry_room_fem.png'/><h3>Arbeitsraum</h3>
                  <div class="ui-ri-aside">
                     {{ basic.symbol('overview.eg.arbeitsraum.brand1', 'eg.arbeitsraum.brand', '', icon1~'secur_smoke_detector.png', 1, 'mini') }}
                     {{ basic.float ('overview.eg.arbeitsraum.temperatur.ist', 'eg.arbeitsraum.temperatur.ist', '°C' ) }}
                     {{ basic.symbol('overview.eg.arbeitsraum.lichtoff', 'eg.arbeitsraum.licht', '', icon0~'light_light.png', '0', 'and') }}
                     {{ basic.symbol('overview.eg.arbeitsraum.lichton' , 'eg.arbeitsraum.licht', '', icon1~'light_light.png') }}
                     {{ basic.symbol('overview.eg.arbeitsraum.stellwertoff', 'eg.arbeitsraum.temperatur.stellwert', '', icon0~'sani_floor_heating.png', '0') }}
                     {{ visubasic.symbol('overview.eg.arbeitsraum.stellwerton' , 'eg.arbeitsraum.temperatur.stellwert', '', icon1~'sani_floor_heating.png', '0', 'not') }}
                  </div>
               </a>
           </li>

           <li data-icon="false">
               <a href="#popup_eg_essen_kueche" data-rel="popup">
                  <img class="icon"' src='{{ icon0 }}scene_dinner.png'/><h3>Esszimmer und Kueche</h3>
                  <div class="ui-ri-aside">
                     {{ basic.float ('overview.eg.esszimmer.temperatur.ist', 'eg.esszimmer.temperatur.ist', '°C' ) }}
                     {{ basic.symbol('overview.eg.esszimmer.lichtoff', ['eg.speis.licht', 'eg.kueche.licht', 'eg.kueche.licht_spots', 'eg.esszimmer.licht_vitrine', 'eg.esszimmer.licht'], '', icon0~'light_light.png', '0', 'and') }}
                     {{ basic.symbol('overview.eg.esszimmer.lichton' , ['eg.speis.licht', 'eg.kueche.licht', 'eg.kueche.licht_spots', 'eg.esszimmer.licht_vitrine', 'eg.esszimmer.licht'], '', icon1~'light_light.png') }}
                     {{ basic.symbol('overview.eg.esszimmer.stellwertoff', 'eg.esszimmer.temperatur.stellwert', '', icon0~'sani_floor_heating.png', '0') }}
                     {{ visubasic.symbol('overview.eg.esszimmer.stellwerton' , 'eg.esszimmer.temperatur.stellwert', '', icon1~'sani_floor_heating.png', '0', 'not') }}
                  </div>
               </a>
           </li>

           <li data-icon="false">
               <a href="#popup_eg_wz" data-rel="popup">
                  <img class="icon"' src='{{ icon0 }}scene_livingroom.png'/><h3>Wohnzimmer</h3>
                  <div class="ui-ri-aside">
                     {{ basic.symbol('overview.eg.wohnzimmer.brand1', 'eg.wohnzimmer.brand', '', icon1~'secur_smoke_detector.png', 1, 'mini') }}
                     {{ basic.float ('overview.eg.wohnzimmer.temperatur.ist', 'eg.wohnzimmer.temperatur.ist', '°C' ) }}
                     {{ basic.symbol('overview.eg.wohnzimmer.lichtoff', ['eg.wohnzimmer.licht', 'eg.wohnzimmer.wandlicht_nord', 'eg.wohnzimmer.wandlicht_sued'], '', icon0~'light_light.png', '0', 'and') }}
                     {{ basic.symbol('overview.eg.wohnzimmer.lichton' , ['eg.wohnzimmer.licht', 'eg.wohnzimmer.wandlicht_nord', 'eg.wohnzimmer.wandlicht_sued'], '', icon1~'light_light.png') }}
                     {{ basic.symbol('overview.eg.wohnzimmer.stellwertoff', 'eg.wohnzimmer.temperatur.stellwert', '', icon0~'sani_floor_heating.png', '0') }}
                     {{ visubasic.symbol('overview.eg.wohnzimmer.stellwerton' , 'eg.wohnzimmer.temperatur.stellwert', '', icon1~'sani_floor_heating.png', '0', 'not') }}

                  </div>
               </a>
           </li>
          <li data-icon="false"></li>
</ul>&nbsp;<br>
           <ul data-role="listview" data-dividertheme="c">
               <li data-role="list-divider">Obergeschoss</li>
 </ul><br>&nbsp;&nbsp;
    <ul data-role="listview" data-dividertheme="c" class="tiles">

           <li data-icon="false">
               <a href="#popup_og_kz_nicolas" data-rel="popup">
                  <img class="icon"' src='{{ icon0 }}scene_childs_room.png'/><h3>Zimmer Nicolas</h3>
                  <div class="ui-ri-aside">
                     {{ basic.symbol('overview.og.kz_nicolas.brand1', 'og.kz_nicolas.brand', '', icon1~'secur_smoke_detector.png', 1, 'mini') }}
                     {{ basic.float ('overview.og.kz_nicolas.temperatur.ist', 'og.kz_nicolas.temperatur.ist', '°C' ) }}
                     {{ basic.symbol('overview.og.kz_nicolas.lichtoff', ['og.kz_nicolas.li_sued', 'og.kz_nicolas.li_nord'], '', icon0~'light_light.png', '0', 'and') }}
                     {{ basic.symbol('overview.og.kz_nicolas.lichton' , ['og.kz_nicolas.li_sued', 'og.kz_nicolas.li_nord'], '', icon1~'light_light.png') }}
                     {{ basic.symbol('overview.og.kz_nicolas.stellwertoff', 'og.kz_nicolas.temperatur.stellwert', '', icon0~'sani_floor_heating.png', '0') }}
                     {{ visubasic.symbol('overview.og.kz_nicolas.stellwerton' , 'og.kz_nicolas.temperatur.stellwert', '', icon1~'sani_floor_heating.png', '0', 'not') }}

                  </div>
               </a>
           </li>

           <li data-icon="false">
               <a href="#popup_og_kz_eric" data-rel="popup">
                  <img class="icon"' src='{{ icon0 }}scene_childs_room.png'/><h3>Zimmer Eric</h3>
                  <div class="ui-ri-aside">
                     {{ basic.symbol('overview.og.kz_eric.brand1', 'og.kz_eric.brand', '', icon1~'secur_smoke_detector.png', 1, 'mini') }}
                     {{ basic.float('overview.og.kz_eric.temperatur.ist', 'og.kz_eric.temperatur.ist', '°C' ) }}
                     {{ basic.symbol('overview.og.kz_eric.lichtoff', ['og.kz_eric.li_sued', 'og.kz_eric.li_nord'], '', icon0~'light_light.png', '0', 'and') }}
                     {{ basic.symbol('overview.og.kz_eric.lichton' , ['og.kz_eric.li_sued', 'og.kz_eric.li_nord'], '', icon1~'light_light.png') }}
                     {{ basic.symbol('overview.og.kz_eric.stellwertoff', 'og.kz_eric.temperatur.stellwert', '', icon0~'sani_floor_heating.png', '0') }}
                     {{ visubasic.symbol('overview.og.kz_eric.stellwerton' , 'og.kz_eric.temperatur.stellwert', '', icon1~'sani_floor_heating.png', '0', 'not') }}

                  </div>
               </a>
           </li>

           <li data-icon="false">
               <a href="#popup_og_schlafzimmer" data-rel="popup">
                  <img class="icon"' src='{{ icon0 }}scene_sleeping.png'/><h3>Schlafzimmer</h3>
                  <div class="ui-ri-aside">
                     {{ basic.symbol('overview.og.schlafzimmer.brand1', 'og.schlafzimmer.brand', '', icon1~'secur_smoke_detector.png', 1, 'mini') }}
                     {{ basic.float('overview.og.schlafzimmer.temperatur.ist', 'og.schlafzimmer.temperatur.ist', '°C' ) }}
                     {{ basic.symbol('overview.og.schlafzimmer.lichtoff', ['og.schlafzimmer.licht', 'og.schlafzimmer.wandlicht1', 'og.schlafzimmer.wandlicht2', 'og.schlafzimmer.wandlicht3'], '', icon0~'light_light.png', '0', 'and') }}
                     {{ basic.symbol('overview.og.schlafzimmer.lichton' , ['og.schlafzimmer.licht', 'og.schlafzimmer.wandlicht1', 'og.schlafzimmer.wandlicht2', 'og.schlafzimmer.wandlicht3'], '', icon1~'light_light.png') }}
                     {{ basic.symbol('overview.og.schlafzimmer.stellwertoff', 'og.schlafzimmer.temperatur.stellwert', '', icon0~'sani_floor_heating.png', '0') }}
                     {{ visubasic.symbol('overview.og.schlafzimmer.stellwerton' , 'og.schlafzimmer.temperatur.stellwert', '', icon1~'sani_floor_heating.png', '0', 'not') }}

                  </div>
               </a>
           </li>

           <li data-icon="false">
               <a href="#popup_og_buero" data-rel="popup">
                  <img class="icon"' src='{{ icon0 }}scene_office.png'/><h3>Buero</h3>
                  <div class="ui-ri-aside">
                     {{ basic.symbol('overview.og.buero.brand1', 'og.buero.brand', '', icon1~'secur_smoke_detector.png', 1, 'mini') }}
                     {{ basic.float('overview.og.buero.temperatur.ist', 'og.buero.temperatur.ist', '°C' ) }}
                     {{ basic.symbol('overview.og.buero.lichtoff', ['og.buero.licht', 'og.buero.wandlicht'], '', icon0~'light_light.png', '0', 'and') }}
                     {{ basic.symbol('overview.og.buero.lichton' , ['og.buero.licht', 'og.buero.wandlicht'], '', icon1~'light_light.png') }}
                     {{ basic.symbol('overview.og.buero.stellwertoff', 'og.buero.temperatur.stellwert', '', icon0~'sani_floor_heating.png', '0') }}
                     {{ visubasic.symbol('overview.og.buero.stellwerton' , 'og.buero.temperatur.stellwert', '', icon1~'sani_floor_heating.png', '0', 'not') }}

                  </div>
               </a>
           </li>

           <li data-icon="false">
               <a href="#popup_og_badezimmer" data-rel="popup">
                  <img class="icon"' src='{{ icon0 }}scene_bathroom.png'/><h3>Badezimmer</h3>
                  <div class="ui-ri-aside">
                     {{ basic.float('overview.og.badezimmer.temperatur.ist', 'og.badezimmer.temperatur.ist', '°C' ) }}
                     {{ basic.symbol('overview.og.badezimmer.lichtoff', ['og.badezimmer.li_allg_wc', 'og.badezimmer.li_badewanne', 'og.badezimmer.li_dusche', 'og.badezimmer.li_spiegelschrank', 'og.badezimmer.li_led_badewanne'], '', icon0~'light_light.png', '0', 'and') }}
                     {{ basic.symbol('overview.og.badezimmer.lichton' , ['og.badezimmer.li_allg_wc', 'og.badezimmer.li_badewanne', 'og.badezimmer.li_dusche', 'og.badezimmer.li_spiegelschrank', 'og.badezimmer.li_led_badewanne'], '', icon1~'light_light.png') }}
                  </div>
               </a>
           </li>

           <li data-icon="false"></li>

</ul>&nbsp;<br>
           <ul data-role="listview" data-dividertheme="c">
               <li data-role="list-divider">Keller</li>
 </ul><br>&nbsp;&nbsp;
    <ul data-role="listview" data-dividertheme="c" class="tiles">

           <li data-icon="false">
               <a href="#popup_keller" data-rel="popup">
                  <img class="icon"' src='{{ icon0 }}control_building_s_kg.png'/><h3>Gesamt</h3>
                  <div class="ui-ri-aside">
                     {{ basic.symbol('overview.kg.partyraum.brand1', 'kg.partyraum.brand', '', icon1~'secur_smoke_detector.png', 1, 'mini') }}
                     {{ basic.float ('overview.kg.partyraum.temperatur.ist', 'kg.partyraum.temperatur.ist', '°C' ) }}
                     {{ basic.symbol('overview.kg.lichtoff', 'gruppe.hand.kg_licht_alle_rm', '', icon0~'light_light.png', '0') }}
                     {{ basic.symbol('overview.kg.lichton' , 'gruppe.hand.kg_licht_alle_rm', '', icon1~'light_light.png') }}
                     {{ basic.symbol('overview.kg.partyraum.stellwertoff', 'kg.partyraum.temperatur.stellwert', '', icon0~'sani_floor_heating.png', '0') }}
                     {{ visubasic.symbol('overview.kg.partyraum.stellwerton' , 'kg.partyraum.temperatur.stellwert', '', icon1~'sani_floor_heating.png', '0', 'not') }}
                  </div>
               </a>
           </li>

</ul> 

Es sind auf ein paar Eigenbauwidgets enthalten, die kann mana uch einfach rausnehmen.

Für Verbesserungsvorschläge wäre ich dankbar.

lg