Icons auf Buttons sind bei mir oben links orientiert (nicht mehr mittig)

[loeserman]

Hallo zusammen,
ja einer eine Idee, warum bei mir die Icons auf all meinen Buttons immer oben links orientiert sind? Die waren früher mal schön mittig.
Kam durch mein letztes Update der VISU auf 3.4. Ist aber schon etwas her.

2024-06-29 12_09_34-Loeserhome.jpg

Code ist eigentlich unverändert

{{ basic.stateswitch('', gad_prefix~'.REGLER.BETRIEBSMODUS', 'mini', [1,2], ['user_available.svg', 'user_away.svg'], '', ['icon1', 'icon0'], 'blink') }}
{{ basic.stateswitch('', gad_prefix~'.REGLER.BETRIEBSMODUS', 'mini', [2,2], ['scene_day.svg', 'scene_day.svg'], '', ['icon1', 'icon0'], 'blink') }}
{{ basic.stateswitch('', gad_prefix~'.REGLER.BETRIEBSMODUS', 'mini', [3,2], ['scene_night.svg', 'scene_night.svg'], '', ['icon1', 'icon0'], 'blink') }}
{{ basic.stateswitch('', gad_prefix~'.REGLER.BETRIEBSMODUS', 'mini', [3,2], ['weather_frost.svg', 'weather_frost.svg'], '', ['icon1', 'icon0'], 'blink') }}
{{ basic.stateswitch('', gad_prefix~'.REGLER.FENSTER_OFFEN', 'mini', [1,0], ['fts_window_1w_tilt.svg', 'fts_window_1w.svg'], '', ['icon1', 'icon0'], 'blink') }}
{{ basic.stateswitch('', gad_prefix~'.AKTOR.VENTIL_SPUELEN', 'mini', [1,0], ['sani_water_hot.svg', 'sani_water_hot.svg'], '', ['icon1', 'icon0'], 'blink') }}​

Smartvisu 3.4

Danke und Gruß
Christoph

[wvhn]

Moin Christoph,

auf der Doku-Seite Design->Buttons kannst Du erstmal prüfen, ob die Symbole richtig angezeigt werden. Wenn das der Fall ist, ist das Problem in Deinen eigenen Seiten zu suchen, z.B. in der visu.css. Wenn schon in der Doku Darstellungsfehler sind, würde ich nach CSS-Dateien in ./dropins und den Unterverzeichnissen suchen oder nach manuellen Änderungen in den <design>.css.

Am besten schaust Du mal mit den Developer-Tools des Browsers, welche CSS-Definition dies verursacht. Ich habe einfach Deinen Widget Code bei mir in den Widgetassistenten kopiert. Rechtsklick auf ein Symbol -> Element untersuchen und dann auf das SVG gehen. Im rechten Teil des Fensters siehst Du, welche CSS-Definitionen im Eingriff sind und kannst diese einzeln deaktivieren:

grafik.png

Gruß
Wolfram

[loeserman]

Ah super, das hat geholfen. Danke Dir Wolfram.
Da hatte sich doch tatsächlich in meiner visu.css noch etwas eingeschlichen, was das verursacht hat.

Das hier war noch drin

.cells .icon {
  margin: -2px 0 -2px 0;
}​

Habe es entfernt. Nun sieht es wieder prima aus.
Danke nochmal.

[loeserman]

Zu früh gefreut. Es ist immer noch da und kommt aus der base.css. Ich muss mal gucken, ob die orginal ist. Es liegt an diesem hier :

base.css

.ui-listview .ui-li-has-thumb > svg:first-child,
.ui-listview .ui-li-has-thumb>.ui-btn>svg:first-child,
.ui-listview .ui-btn>svg.icon
{
  position: absolute;
  left: 0;
  top: 0;
  max-height: 5em;
  max-width: 5em;
}​

Nachtrag: Ja ist die originale.

Kann das natürlich umgehen, wenn ich in meine visu.css das absolute durch relative ersetze. Mal sehen, ob das sonst negativen Einfluss hat.

visu.css

.ui-listview .ui-btn>svg.icon {
  position: relative;
}​

[wvhn]

Wie kommt denn ui-listview da hinein? Hast Du die Buttons in einer Menü-Schaltfläche positioniert?

[wvhn]

Moin Christoph loeserman,

Dein Workaround sorgt in meinen Tests dafür, dass die Icons im Kalenderwidget und in status.activelist nicht mehr richtig positioniert sind. Das kann man durch folgende Änderung in der visu.css verhindern:

/**
* Workaround for buttons on listviews in smartVISU v3.4 - remove in later versions
*/
.ui-listview:not(.activelist-container) .ui-btn>svg.icon {
  position: relative;
}​​

Ich möchte das in der base.css richtig stellen. Deshalb wäre es wichtig zu wissen, in welchem Kontext Du den Fehler festgestellt hast. Befinden sich die Widgets in einer Menüschaltfläche, oder wo sind sie sonst positioniert?

Gruß
Wolfram

[loeserman]

Hi Wolfram,
ja das ist nicht so ganz einfach, aber für Dich sicherlich kein Problem. Ich habe mir viele kleine Module geschrieben und mir im Wesentlichen zwei Visualisierungen so zurecht-"gebastelt". Vielleicht ist das auch mega blöd, wie ich das gemacht habe und das geht viel besser. Dann freue ich mich über Hinweise und werde es umbauen

Visu1: Für die Tablets im Haus mit einer Gesamtübersicht
2024-06-30 13_16_47-Loeserhome1.jpg

Visu2: Detail Sichten mit zum Teil ausklappbaren Listen (für eben die Details oder auch die Anzeige auf dem Handy)
2024-06-30 13_17_39-Loeserhome.png

Visu2: Ich kann die gleichen Zeilen aber auch in ausklappbaren Listen anzeigen. Beispiel: Ich habe Seiten für jeden einzelnen Raum, oder auch für ein ganzes Stockwerk (diese hat dann die Räume als ausklappbare Liste)
2024-06-30 13_18_38-Loeserhome.png

Visu2: So sieht es dann auf dem Handy aus
2024-06-30 13_18_52-Loeserhome.png

Egal ob auf den Detailseiten (Visu2) oder auf der Tabletseite (Visu1). Wenn ich auf die Icons klicke und das ein normales ist, dann wird sofort geschaltet. Ist es eins von meinen, so öffnet sich in der Regel ein Popup, welches ein paar Details anzeigt, die ich auch auf den Tablets einsehen können möchte.

2024-06-30 14_02_18-Loeserhome1.png

Hierzu habe ich mir folgenden Aufbau überlegt

1. [widget_my_texts.html]
   Ich habe mir eine Textliste erstellt, auf die ich referenziere, um immer wieder gleiche Texte zu zeigen für die Objekte
2. [widget_my.html]
   Ich erstelle Icons mit Popups für Detaildaten (die werden direkt in der Visu1 genutzt, aber auch in Visu2)
3. [widget_my_objecttemplates.html]
   Ich erstelle mir ganze Zeilen für Visu2 mit immer dem gleichen Aufbau (links das Icon aus Punkt 2, dann Detailinfos und rechts dann so etwas wie UZSU)
   Diese sind aber noch abhängig vom Item, was übergeben wird. So muss ich für Licht dieses nur einmal erstellen
4. [widget_my_objectdetails.html]
   Ich instanziiere die Zeilen aus Punkt 3
5. [cat_room_r02.html], oder alle anderen Seiten
   In den eigentlichen Pages rufe ich dann nur noch die instanziierten Zeilen aus Punkt 4 auf.

Ich weiß, es ist etwas verwirrend. Ich versuche es mal etwas genauer zu zeigen anhand des Codes


Beispiel für einen exemplarischen Modulaufbau:

Punkt 1: Texte
[widget_my_texts.html]

/** ------------------------------------------------------------------------------------------------------------------------------- **/
/** Texte / Bezeichner ------------------------------------------------------------------------------------------------------------ **/
/** ------------------------------------------------------------------------------------------------------------------------------- **/
{% macro ITEMTEXT(gad, texttype) %}

    {% if texttype == 'longtext' %}
        {% if False %}                                                      <!-- Langtexte mit Raumnummer -->
        {% elseif gad == 'DUMMY' %}                                         ###

        {% elseif False %}                                                  <!-- R01 -->
        {% elseif 'R01.LICHT.DECKE' in gad  %}                              R01 - Treppenhaus KG/EG Licht Decke
        {% elseif 'R01.LICHT.TREPPE' in gad %}                              R01 - Treppenhaus KG/EG Licht Wand
        
        {% elseif False %}                                                  <!-- R02 -->
        {% elseif 'R02.LICHT.DECKE' in gad %}                               R02 - Anschlussraum Licht Decke
        {% elseif 'R02.STECKDOSE.WASCHMASCHINE' in gad %}                   R02 - Anschlussraum Waschmaschine
        {% elseif 'R02.STECKDOSE.TROCKNER' in gad %}                        R02 - Anschlussraum Trockner
        {% elseif 'R02.STECKDOSE.HEBEANLAGE' in gad %}                      R02 - Anschlussraum Hebeanlage
        {% elseif 'R02.STECKDOSE.SERVERBRETT' in gad %}                     R02 - Anschlussraum Serverbrett
        {% elseif 'R02.FENSTER' in gad %}                                   R02 - Anschlussraum Fenster
        {% elseif 'R02.SM1' in gad %}                                       R02 - Anschlussraum SmartMeter
        {% elseif 'R02' in gad %}                                           R02 - Anschlussraum
        
        ...
        
        {% else %}                                                          ###
        {% endif %}
    {% elseif texttype == 'longtext_without_roomno' %}
        {% if False %}                                                      <!-- Langtexte ohne Raumnummer -->
        {% elseif gad == 'DUMMY' %}                                         ###
        {% elseif 'R02.FENSTER' in gad %}                                   Anschlussraum Fenster

        ...

        {% else %}                                                          ###
        {% endif %}
    {% else %}
        {% if False %}                                                      <!-- Verwendung des Icontextes -->
        {% elseif gad == 'DUMMY' %}                                         ###
        
        {% elseif False %}                                                  <!-- R01 -->
        {% elseif 'R01.LICHT.DECKE' in gad  %}                              Decke
        {% elseif 'R01.LICHT.TREPPE' in gad %}                              Wand
        {% elseif 'R01.HEIZUNG' in gad %}                                   KG/EG
        {% elseif 'R01' in gad %}                                           KG/EG
        
        {% elseif False %}                                                  <!-- R02 -->
        {% elseif 'R02.LICHT.DECKE' in gad %}                               Decke
        {% elseif 'R02.STECKDOSE.WASCHMASCHINE' in gad %}                   Waschmaschine
        {% elseif 'R02.STECKDOSE.TROCKNER' in gad %}                        Trockner
        {% elseif 'R02.STECKDOSE.HEBEANLAGE' in gad %}                      Hebeanlage
        {% elseif 'R02.STECKDOSE.SERVERBRETT' in gad %}                     Serverbrett
        {% elseif 'R02.FENSTER' in gad %}                                   Anschlussraum
        {% elseif 'R02.SM1' in gad %}                                       SmartMeter
        {% elseif 'R02' in gad %}                                           Anschlussraum
        
        ...

        {% else %}                                                          ###
        {% endif %}
    {% endif %}
{% endmacro %}

Punkt 2: Eigene Widgets (in der Regel mit Popup)
Objekte, die ich sowohl in Visu1 als auch Visu2 nutze. Hier ein Beispiel für eine schaltbare Steckdose mit Strommessung. Die Daten kann ich mir dann im Popup ansehen (sowohl in Visu1 als auch Visu2)

[widget_my.html]

/** #######################################################################################################
 *  Eigene Widgets
 *  ####################################################################################################### **/
/**
 * Widget für den Aktor mit Strommessung
 * @param     unique id for this widget
 * @param     text for headline (like: R02 - Waschmaschine)
 */
{% macro icon_and_popup_actorwithpowermeter(uid, gad, icon_off, icon_on) %}
  {% import "@widgets/basic.html" as basic %}
  {% import "widget_my_texts.html" as widget_my_texts %}
  {% import "widget_my_basic.html" as widget_my_basic %}
  
  <a href="#{{ uid }}-popup_actorwithpowermeter" data-rel="popup" style="text-decoration: none; font-weight: normal;">
    {{ basic.symbol('', gad~'.STROMWERT.ICON_STATUS', '', [icon_on, icon_on, icon_off], [2,1,0], '', ['icon1', '#00FF00', 'icon0']) }}
    <br>
    {{ basic.print('', gad~'.STROMWERT', 'float3') }} A
    <br>
    {{ widget_my_texts.ITEMTEXT(gad) }}
  </a>
  <div id="{{ uid }}-popup_actorwithpowermeter" data-role="popup">
    <div class="lPopupHeader">
      &nbsp;&nbsp;&nbsp;{{ widget_my_texts.ITEMTEXT(gad, 'longtext') }}&nbsp;&nbsp;&nbsp;
    </div>
    <a href="#" data-rel="back" data-role="button" data-icon="delete" data-iconpos="notext" class="ui-btn-right">Close</a>
    <table>
      <tr>
        <td align="left" valign="center">
          {{ basic.print('', gad~'.STROMWERT', 'float3') }} A
          <br>
          &nbsp;
        </td>
        <td align="left" valign="center">
          Aktueller Strommesswert
          <br>
          &nbsp;
        </td>
        <td align="right" valign="center">
          {{ basic.symbol('', gad~'.KONTAKTFEHLER', ['Kontaktfehler erkannt', 'Kontakt okay'], '', [1,0], '', ['icon0', 'icon0']) }}
          <br>
          &nbsp;
        </td>
      </tr>
      <tr>
        <td align="left" valign="center">
          {{ basic.stateswitch('', gad, 'mini', [1,0], [icon_on, icon_off], '', ['#00FF00', '#FF0000'], 'blink') }}
        </td>
        <td align="left" valign="center">
          Freigabe (Normalerweise immer aktiv)
        </td>
      </tr>
    </table>
  </div>
{% endmacro %}

Punkt 3: Ganze Zeilen für Visu2 (unabhängig vom Item)
Anschließend erstelle ich mir ganze Zeilen für Visu2, die ich immer wieder nutzen kann mit unterschiedlichen Items. Hier am Beispiel von einer normalen Lampe (diese nutzt das normal widget von SH) und einer Steckdose mit Strommessung (eigenes widget mit Popup (siehe hierüber)

[widget_my_objecttemplates.html]

/** ------------------------------------------------------------------------------------------------------------------------------- **/
/** Licht ------------------------------------------------------------------------------------------------------------------------- **/
/** ------------------------------------------------------------------------------------------------------------------------------- **/
{% macro LICHT(gad, uzsu_available) %}
  {% import "widget_my_texts.html" as widget_my_texts %}
  {% import "@widgets/basic.html" as basic %}
  {% import "@widgets/device.html" as device %}
  
  <!-- Internal tags -->
  {% set longext = widget_my_texts.ITEMTEXT(gad, 'longtext') %}
  
  <!-- Schaltbares Licht -->
  <li data-icon="false" style="padding-left: 1em">
    <div class="cells">
      <div class="lcell20 lcellcenter">
        {{ basic.stateswitch('', gad, 'icon', [1,0], ['light_light_dim_100.svg', 'light_light_dim_100.svg'], '', ['icon1', 'icon0'], 'blink') }}
        <br>
        {{ basic.symbol('', gad, ['An', 'Aus'], '', [1, 0]) }}
        <br>
        {{ widget_my_texts.ITEMTEXT(gad) }}
      </div>
      <div class="lcell60 lcellleft" >
        Licht ist {{ basic.symbol('', gad, ['an', 'aus'], '', [1, 0]) }}
      </div>
      <div class="lcell20 lcellright">
        {% if uzsu_available %}
          {{ device.uzsuicon('', gad~'.UZSU', longext, 'time_clock.svg', 'time_clock.svg', 'bool', ['An','Aus'], 'icon1', 'icon0') }}
        {% endif %}
      </div>
    </div>
  </li>
{% endmacro %}


/** ------------------------------------------------------------------------------------------------------------------------------- **/
/** Steckdose --------------------------------------------------------------------------------------------------------------------- **/
/** ------------------------------------------------------------------------------------------------------------------------------- **/
{% macro STECKDOSE_AMPEREMETER(gad, uzsu_available, extended_view) %}
  {% import "widget_my_texts.html" as widget_my_texts %}
  {% import "widget_my.html" as widget_my %}
  {% import "@widgets/basic.html" as basic %}
  {% import "@widgets/plot.html" as plot %}
  {% import "@widgets/device.html" as device %}
  
  <!-- Internal tags -->
  {% set descrtext = widget_my_texts.ITEMTEXT(gad) %}
  {% set uidstring = gad|replace({'.': ""}) %}
  {% if gad == 'R02.STECKDOSE.TROCKNER' %}
    {% set icon_on = 'scene_clothes_dryer.svg' %}
    {% set icon_off = 'scene_clothes_dryer.svg' %}
  {% elseif gad == 'R02.STECKDOSE.WASCHMASCHINE' %}
    {% set icon_on = 'scene_washing_machine.svg' %}
    {% set icon_off = 'scene_washing_machine.svg' %}
  {% elseif gad == 'R02.STECKDOSE.HEBEANLAGE' %}
    {% set icon_on = 'sani_pump.svg' %}
    {% set icon_off = 'sani_pump.svg' %}
  {% elseif gad == 'R02.STECKDOSE.SERVERBRETT' %}
    {% set icon_on = 'it_pc.svg' %}
    {% set icon_off = 'it_pc.svg' %}

  ...

  {% else %}
    {% set icon_on = 'message_socket.svg' %}
    {% set icon_off = 'message_socket.svg' %}
  {% endif %}
  
  <!-- Steckdose mit Strommessung -->
  <li data-icon="false" style="padding-left: 1em">
    <div class="cells">
      <div class="lcell20 lcellcenter">
        {{ widget_my.icon_and_popup_actorwithpowermeter(uidstring, gad, icon_on, icon_off) }}
      </div>
      <div class="lcell60 lcellleft" >
        {{ widget_my_texts.ITEMTEXT(gad) }} ist {{ basic.symbol('',  gad, ['freigegeben', 'gesperrt'], '', [1, 0]) }}
        <br>
        Aktueller Stromwert {{ basic.print('', gad~'.STROMWERT', 'float3') }} A
        <br>
        {{ basic.symbol('',  gad~'.KONTAKTFEHLER', ['Kontakt erkannt', 'Kontaktfehler okay'], '', [1, 0]) }} <br>
        <br>
        Funktionen<br>
        {{ basic.stateswitch('', gad, 'mini', [1,0], [icon_on, icon_off], '', ['#00FF00', '#FF0000'], 'blink') }} {{ basic.symbol('',  gad, ['Freigegeben', 'Gesperrt'], '', [1, 0]) }}<br>
      </div>
      <div class="lcell20 lcellright">
        {% if uzsu_available == 'true' %}
          {{ device.uzsuicon('', gad~'.UZSU', longext, 'time_clock.svg', 'time_clock.svg', 'bool', ['An','Aus'], 'icon1', 'icon0') }}
        {% endif %}
      </div>
    </div>
    {% if extended_view == 'true' %}
      <div class="cells">
        <div class="lcell100 lcellcenter">
          {{ plot.period(gad~'objecttemplates_plot_period', [gad~'.STROMWERT'], '', '1d', '', '0', '', '10000', [''], ['#F9A028'], ['stair'], ['','Strom [A]'], '1h') }}
        </div>
      </div>
    {% endif %}
  </li>
{% endmacro %}

Punkt 4: Instanziierte Zeilen (enthalten dann das Item)
Diese ganzen Zeilen instanziiere ich dann mit verschiedenen Items. Diese kann ich dann auf allen möglichen Pages einfach hernehmen

[widget_my_objectdetails.html]

/**
 * Zusammenhang:
 *
 * HTML Seite verwendet "widget_my_objectdetails", damit die Darstellung der Detailzeilen immer einheitlich ist
 * "widget_my_objectdetails" verwendet "widget_my_texts", damit die Texte immer einheitlich sind
 * "widget_my_objectdetails" verwendet "widget_my", damit die Bedienicons und Popups immer einheitlich sind
 * "widget_my" verwendet "widget_my_texts", damit die Texte immer einheitlich sind
 *
 */

/** R01 - Treppe KG/EG ----------------------------------------------------------------------------------------------------------------------- **/

{% macro R01_LICHT_DECKE() %}
  {% import "widget_my_objecttemplates.html" as widget_my_objecttemplates %}
  {{ widget_my_objecttemplates.LICHT('R01.LICHT.DECKE', 'uzsu_available_true') }}
{% endmacro %}

...

/** R02 - Anschlussraum ----------------------------------------------------------------------------------------------------------------------- **/

{% macro R02_LICHT_DECKE() %}
  {% import "widget_my_objecttemplates.html" as widget_my_objecttemplates %}
  {{ widget_my_objecttemplates.LICHT('R02.LICHT.DECKE', 'uzsu_available_true') }}
{% endmacro %}

{% macro R02_STECKDOSE_TROCKNER(extended_view) %}
  {% import "widget_my_objecttemplates.html" as widget_my_objecttemplates %}
  {{ widget_my_objecttemplates.STECKDOSE_AMPEREMETER('R02.STECKDOSE.TROCKNER', false, extended_view) }}
{% endmacro %}

{% macro R02_STECKDOSE_WASCHMASCHINE(extended_view) %}
  {% import "widget_my_objecttemplates.html" as widget_my_objecttemplates %}
  {{ widget_my_objecttemplates.STECKDOSE_AMPEREMETER('R02.STECKDOSE.WASCHMASCHINE', false, extended_view) }}
{% endmacro %}

{% macro R02_STECKDOSE_HEBEANLAGE(extended_view) %}
  {% import "widget_my_objecttemplates.html" as widget_my_objecttemplates %}
  {{ widget_my_objecttemplates.STECKDOSE_AMPEREMETER('R02.STECKDOSE.HEBEANLAGE', false, extended_view) }}
{% endmacro %}

{% macro R02_STECKDOSE_SERVERBRETT(extended_view) %}
  {% import "widget_my_objecttemplates.html" as widget_my_objecttemplates %}
  {{ widget_my_objecttemplates.STECKDOSE_AMPEREMETER('R02.STECKDOSE.SERVERBRETT', false, extended_view) }}
{% endmacro %}

...

Punkt 5: Normale SmartVisu Seiten, die dann auf die Instanzen von Punkt 4 zurückgreifen.
Beispielseiten, die sich dann entsprechend der objectdetails bedie

Beispiel: Raumseite
[cat_room_r02.html]

/**
* -----------------------------------------------------------------------------
* cat_room_r02.html
* -----------------------------------------------------------------------------
* CATEGORY - Rooms - Room02
* Anschlussraum
*
* Hauptrücksprung: index.html
* -----------------------------------------------------------------------------
*/

{% extends "base.html" %}

{% block sidebar %}

  <!-- Navigationspunkt room -->  
  {% import "navigation/nav.html" as nav %}
  {{ nav.navigate('room', 'r0x') }}

{% endblock %}

{% block content %}

  <!-- Rücksprung -->  
  {% import "navigation/nav.html" as nav %}
  {{ nav.navigate('room_detail') }}

  <!-- Import Breich für Widgets, andere Vorlagen, usw. -->
  {% import "widget_my_texts.html" as widget_my_texts %}
  {% import "widget_my_objectdetails.html" as widget_my_objectdetails %}

  <!-- Content-Datenbereich -->
  <ul data-role="listview" data-dividertheme="c">

    <li data-role="list-divider">{{ widget_my_texts.ITEMTEXT('R02', 'longtext') }}</li>

    {{ widget_my_objectdetails.R02_LICHT_DECKE() }}

    {{ widget_my_objectdetails.R02_STECKDOSE_SERVERBRETT(urlparam_extended_view) }}
    {{ widget_my_objectdetails.R02_STECKDOSE_TROCKNER(urlparam_extended_view) }}
    {{ widget_my_objectdetails.R02_STECKDOSE_WASCHMASCHINE(urlparam_extended_view) }}

    ...

    <li data-role="list-divider" style="margin-bottom: +15px;">Zurück</li>
  </ul>

  <!-- Rücksprung -->  
  {{ nav.navigate('room_detail') }}

{% endblock %}

Beispiel: Geschoss (hier Keller)
[cat_room_r0x.html]

/**
* -----------------------------------------------------------------------------
* cat_room_r0x.html
* -----------------------------------------------------------------------------
* CATEGORY - Rooms - Room0x
* Kellergeschoss
*
* Hauptrücksprung: index.html
* -----------------------------------------------------------------------------
*/

{% extends "base.html" %}

{% block sidebar %}

  <!-- Navigationspunkt room -->  
  {% import "navigation/nav.html" as nav %}
  {{ nav.navigate('room', 'level') }}

{% endblock %}

{% block content %}

  <!-- Rücksprung -->  
  {% import "navigation/nav.html" as nav %}
  {{ nav.navigate('room_detail') }}

  <!-- Import Breich für Widgets, andere Vorlagen, usw. -->
  {% import "widget_my_texts.html" as widget_my_texts %}
  {% import "widget_my_objectdetails.html" as widget_my_objectdetails %}

  <!-- Content-Datenbereich -->
  <ul data-role="listview" data-dividertheme="c">

    <li data-role="list-divider">{{ widget_my_texts.ITEMTEXT('R01', 'longtext') }}</li>

    {{ widget_my_objectdetails.R01_LICHT_DECKE() }}
    {{ widget_my_objectdetails.R01_LICHT_TREPPE() }}
    {{ widget_my_objectdetails.Rx1_KRAN(urlparam_extended_view) }}
    {{ widget_my_objectdetails.R01_HEIZUNG() }}

    <li data-role="list-divider">{{ widget_my_texts.ITEMTEXT('R02', 'longtext') }}</li>

    {{ widget_my_objectdetails.R02_LICHT_DECKE() }}
    {{ widget_my_objectdetails.R02_STECKDOSE_TROCKNER(urlparam_extended_view) }}
    {{ widget_my_objectdetails.R02_STECKDOSE_WASCHMASCHINE(urlparam_extended_view) }}
    {{ widget_my_objectdetails.R02_STECKDOSE_HEBEANLAGE(urlparam_extended_view) }}
    {{ widget_my_objectdetails.R02_STECKDOSE_SERVERBRETT(urlparam_extended_view) }}

    ...

    <li data-role="list-divider" style="margin-bottom: +15px;">Zurück</li>
  </ul>

  <!-- Rücksprung -->  
  {{ nav.navigate('room_detail') }}

{% endblock %}

CSS Datei dazu
Nun sieht man, dass ich oft mit lcell20, lcell25, lcell30, ... arbeite. Diese habe ich mir in meiner visu.css definiert, da mir nichts besseres eingefallen ist. So kann ich mir das quasi immer schön wie eine Tabelle zusammenbauen

[visu.css]

...

.lcell05, .lcell10, .lcell15, .lcell20, .lcell25, .lcell30, .lcell35, .lcell40, .lcell45, .lcell50, .lcell55, .lcell60, .lcell65, .lcell70, .lcell75, .lcell80, .lcell85, .lcell90, .lcell95, .lcell100 {
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  height: 44px;
  text-align: left;
  text-overflow: ellipsis;
  border-top: 0;
  border-right: 0;
  display: table-cell;
  vertical-align: top;
  font-weight: normal;
}

.lcellleft {
  text-align: left;
}

.lcellcenter {
  text-align: center;
  margin-left:-5px;
}

.lcellright {
  text-align: right;
}

.lcellvtop {
  vertical-align: top;
}

.lcellvmiddle {
  vertical-align: middle;
}

.lcellvbottom{
  vertical-align: bottom;
}

.lcell05 {
  width: 5%;
}

.lcell10 {
  width: 10%;
}

.lcell15 {
  width: 15%;
}

.lcell20 {
  width: 20%;
}

...

Ich hoffe das erklärt es, was ich hier so Wirres mache und warum da Listviews in Spiel kommen ;-)

Bei Fragen einfach melden.
Bei "Hände über den Kopf schlagen" auch.
Bin allerdings bisher mit dem Konzept recht gut gefahren, auch was die Wartung anbetrifft.

Schöne Grüße
Christoph

[wvhn]

Wow. Das sieht klasse aus - und auch nach viel Arbeit.

Wenn ich das richtig sehe, brauchst Du die listviews eigentlich nur für die Optik, um die list-divider mit den Überschriften anzuzeigen. Dafür handelst Du Dir die genannten Probleme ein, weil die listviews bisher nur für die Menüs, calendar.list, phone.*list und status.activelist konzipiert und getestet sind. Jede künftige Änderung in dem Bereich kann zu negativen Auswirkungen auf Deine Seiten führen.

Ich sehe hierzu zwei Abhilfemöglichkeiten:

• die <ul> und <li> überall dort rauswerfen, wo sie nicht als Funktion gebraucht werden (z.B. wenn das <li> noch ein <a>-Tag enthält). Die list divider kann man auch wie folgt anzeigen, ohne die Darstellung der Widgets zu beeinflussen:
  

  	<ul data-role="listview" data-dividertheme="c">
  	      <li data-role="list-divider">Überschrift</li>
  	</ul>​

• alternativ eine zusätzliche Klasse für die listviews angeben. Damit kannst Du dann in der visu.css die CSS-Eigenschaften unabhängiger von künftigen Änderungen machen:
  

  	 <ul data-role="listview" data-dividertheme="c" class="meineoptik">

  	.listview.meineoptik ui-btn>svg{
  	    position: relative,
  	    ....
  	}

Ich passe jetzt mal die Einstellungen für Buttons in Menü-Schaltflächen an, weil die definitiv fehlerhaft sind bzw. aktive Elemente in den Menü-Schaltflächen bisher nicht vorgesehen waren. Danach kannst Du ja nochmal testen, ob dies für Deine Anwendung auch so passt.

Gruß
Wolfram

[wvhn]

Nach einigen Tests scheint mir dieser Eintrag in die visu.css am besten geeignet, weil er alle Widgets innerhalb von listviews betrifft, die Buttons darstellen.
loeserman, kannst Du das auch mal testen? Ich würde das dann so in die base.css übernehmen.

/**
* Workaround for buttons on listviews in smartVISU v3.4 - remove in later versions
*/​
.ui-listview [data-widget].ui-btn>svg.icon,
.ui-listview [data-widget] .ui-btn>svg.icon {
     position: unset;
}​

Gruß
Wolfram

[loeserman]

Hi Wolfram,
probiere ich gern, komme aber erst nächste Woche dazu. Melde mich dann.

Danke und Gruß
Christoph

[loeserman]

Moin Wolfram,
habe mich für deine Alternative entschieden mit der eigenen Klasse. Klappt wunderbar. Bisher ist mir noch nichts Schlimmes aufgefallen.
Danke für den Tipp.

Der Workaround ging auch, bis auf eine Stelle aber die ist bei mir in Visu1 unten rechts mit den Kalendereinträgen. Ist aber auch mit Link. Also schon sehr speziell. Mit Deiner Alternative bekomme ich aber auch in den Griff.

Gruß
Christoph

[wvhn]

Moin Christoph,

Danke fürs Testen. Die Visu1 sieht so aus, als ob Du das Kalender-Widget auch innerhalb eines listview Elements platziert hast. Das führt dann mit dem Workaround dazu, dass die icons in der Kalenderliste nicht mehr richtig positioniert werden. Diesen Sonderfall werde ich tatsächlich nicht explizit in der base.css abfangen. An der Stelle empfehle ich Dir, das listview vor dem Kalender zu beenden und den letzten list-divider einzeln in ein <ul> zu setzen, wie oben beschrieben.

Gruß
Wolfram