Suche Idee für kompakte Statuszeile

[Frank13]

Hallo allerseits!

Nachdem mir das aktuelle 2.5er Update meine mit Tabellen zusammengefrickelte Statuszeile ziemlich durcheinandergebracht hat, suche ich einen sauberen Ansatz für das Ganze.
Ich habe bereits oben links eine einfache Uhr und darunter die Pagetab-Navigation. Oben rechts neben der Uhr soll die "Titelzeile / Statuszeile" hin.
Diese besteht aus einem Abfallelement ganz rechts (bis hierhin funktioniert alles) und dem "Zwischenteil" mit Übersichtsdaten (Sonnenaufgang, Aussentemperatur u.ä.).

Dieses soll von links nach rechts verschiedene variable Objekte enthalten und zwar entweder ein Bild mit Bildunterschrift oder einen Datenblock (wie eine 2x2-Tabelle) mit Text und/oder Symbolen. Das Ganze soll ziemlich kompakt werden - also möglichst kleine Schrift mit kleinen Abständen dazwischen.

Hat da jemand eine Idee, wie ich das Ganze sauber hin bekomme? Meine Tabellenlösung war halt mal schnell hingefrickelt und ist (wahrscheinlich durch deutlich vergrößerte Tabellenränder oder anderen Abständen) komplett durcheinander.

Ich habe mal einen Teil meines bisherigen Codes angehängt.

Code Auswählen Erweitern


<div class="gridster">
<ul>
<!-- Uhr -->
<li data-row="1" data-col="1" data-sizex="2" data-sizey="1">
<div data-type="clock" data-format="d.m.y H:i:s" class="cell big"></div>
</li>

<!-- Kurz-Wetter obere Zeile -->
<li data-row="1" data-col="3" data-sizex="7" data-sizey="1">
<!-- Wetterbild -->
<div class="left cell">
      <table>
<tr>
<td>
<div data-type="link" data-url="#page_wetter.html" data-load="#content4"  data-active-pattern=".*#page_content4.html" class="prefetch fixcontent">
<div data-type="weather"
data-device="Wetter_Yahoo"
data-get="condition"
data-imageset="kleinklima"
style="width:60px;padding:0;margin:0;margin-bottom:-6px;">
</div>
</div>
</td>
</tr>
<tr>
<td colspan="3">
<div data-type="label"
data-device="Wetter_Yahoo"
data-get="condition"
class="tiny white">
</div>
</td>
</tr>
</table>
</div>

<!-- Unwetterbild -->
<div class="left cell">
<div data-type="label" data-device="Unwetterzentrale" data-get="WarnCount" data-limits='[0,1]' data-classes='["hide","show"]' class="fixedlabel inline">
<div data-type="link" data-url="#page_wetter.html" data-load="#content4"  data-active-pattern=".*#page_content4.html" class="prefetch fixcontent">
<div data-type="image" data-device="Unwetterzentrale" data-size="30px" data-url="./images/warnung_transparent.gif" class="cell"></div>
<div class="tiny white">Wetter-</div>
<div class="tiny white">warnung</div>
</div>
</div>
</div>

<!-- Mond -->
<div class="right cell">
<div data-type="image" data-size="55px" data-device="Mond" data-get="ftui"></div>
</div>

<!-- Datentabelle-->
<div class="cell">
          <table>
<tr>
<td>
          <div data-type="symbol" data-icon="1" class="meteocons inline" style="font-size:14px" data-off-color="#aa6900"></div>
<div data-type="label" data-device="Sonnenaufgang" data-get="state" class="inline"></div>
</td>
<td>
<div data-type="symbol" data-icon="'" class="meteocons" style="font-size:14px" data-off-color="#aa6900"></div>
</td>
<td>
<div data-type="popup" data-height="350px" data-width="800px" class="inline">
<div data-type="label" data-device="Aussensensor" data-get="temperature" data-limits="[-10,0,10,25,30,40]" data-colors='["#3030FF","#8080ff","#00ff00","#ff6900","#ff3333","#ff0000"]' data-unit=" %B0C%0A"></div>
<div class="dialog dialogTransparent">
<header>Aussensensor</header>
<div class="top-space">
<div data-type="chart"
data-logdevice='["FileLog_Aussensensor","FileLog_Aussensensor"]'
data-columnspec='["4:Aussensensor.temperature:","4:Aussensensor.humidity:"]'
data-style='["ftui l2","ftui l6"]'
data-ptype='["lines","histeps"]'
data-uaxis='["primary","secondary"]'
data-legend='["Temperatur","Feuchte"]'
data-yunit=" %B0C%0A"
data-ytext="Temperatur"
data-minvalue="-15"
data-maxvalue="45"
data-yunit_sec="%"
data-ytext_sec="Feuchte"
data-height="250"
data-yticks="auto"
data-minvalue_sec="0"
data-maxvalue_sec="100"
data-nofulldays="true"
data-cursorgroup="1"
data-scrollgroup="1"
data-xticks="auto">
</div>
                     </div>
                    </div>
        </div>

         
</td>

<td>
<div data-type="symbol" data-icon="fa-tint" style="font-size:14px" data-off-color="#aa6900"></div>
</td>
<td>
<div data-type="label" data-device="Aussensensor" data-get="humidity" data-limits="[0,40,60]" data-colors='["#9999ff","#aa6900","#ff6900"]' data-unit=" %"></div>
</td>

</tr>

<tr>
<td>
    <div data-type="symbol" data-icon="B" class="meteocons inline" style="font-size:14px" data-off-color="#aa6900"></div>
<div data-type="label" data-device="Sonnenuntergang" data-get="state" class="inline" ></div>
</td>
<td>
                    <div data-type="label" data-device="Wetter_Yahoo" data-get="pressure" data-unit=" hPa" data-limits="[0,950,1000]" data-colors='["#ff9999","#aa6900","#9999ff"]'></div>
</td>
<td>
<div data-type="symbol" data-device="Wetter_Yahoo" data-get="pressure_trend_sym" data-get-on='["+", "-"]' data-icons='["fa-chevron-up", "fa-chevron-down"]' style="font-size:12px"></div>
</td>
<td colspan="2">
<div data-type="label" data-device="Sternzeichen" data-get="state"></div>
</td>
</tr>

</table>
            </div>     
                     

</li>
         <!-- Abfall -->
<li data-row="1" data-col="8" data-sizex="3" data-sizey="1">

<!-- Restmuell -->
            <div data-type="popup" data-height="120px" data-width="450px" class="inline">
    <div data-type="label" data-device="Abfall" data-get="Restabfall_tage" data-limits='[0,2]' data-classes='["show","hide"]' class="fixedlabel inline">
<div data-type="symbol" data-device="Abfall" data-get="Restabfall_tage" data-icons='["fa-trash warn fa-spin","fa-trash warn"]' data-on-colors='["black","black"]' data-get-on='["0","1"]' class="cell"></div>
<div class="tiny white">Restm&uuml;ll</div>
</div>
               <div class="dialog dialogTransparent">
<header>Abfall&uuml;bersicht</header>
<div class="top-space">
<div class="inline">
<div data-type="symbol" data-device="Abfall" data-get="Restabfall_tage" data-icons='["fa-trash warn fa-spin","fa-trash warn"]' data-on-colors='["black","black"]' data-get-on='["0","2"]' class="cell"></div>
<div data-type="label" class="">Restm&uuml;ll</div>
</div>
<div class="inline">
<div data-type="symbol" data-device="Abfall" data-get="Bioabfall_tage" data-icons='["fa-trash warn fa-spin","fa-trash warn"]' data-on-colors='["green","green"]' data-get-on='["0","2"]' class="cell"></div>
<div data-type="label" class="">Biotonne</div>
</div>
<div class="inline">
<div data-type="symbol" data-device="Abfall" data-get="Papiertonne_tage" data-icons='["fa-trash warn fa-spin","fa-trash warn"]' data-on-colors='["blue","blue"]' data-get-on='["0","2"]' class="cell"></div>
<div data-type="label" class="">Papiertonne</div>
</div>
<div class="inline">
<div data-type="symbol" data-device="Abfall" data-get="Wertstoff_tage" data-icons='["fa-trash warn fa-spin","fa-trash warn"]' data-on-colors='["yellow","yellow"]' data-get-on='["0","2"]' class="cell"></div>
<div data-type="label" class="">Wertstoff</div>
</div>
<div class="inline">
<div data-type="symbol" data-device="Abfall" data-get="Weihnachtsbaum_tage" data-icons='["fa-tree warn fa-spin","fa-tree warn","fa-tree warn"]' data-on-colors='["yellow","yellow","green"]' data-get-on='["0","4","8"]' class="cell autohide"></div>
<div data-type="label" class="autohide" data-device="Abfall" data-get="Weihnachtsbaum_tage">Weihnachtsbaum</div>
</div>
</div>
</div>
</div>


Viele Grüße

Frank

[drhirn]

Hast du zufällig einen Screenshot von der alten Version, den du anhängen könntest? Dann kann man sich vielleicht besser was drunter vorstellen.

[Frank13]

Hi!

Von der alten Version habe ich leider keinen Screenshot - ich habe mal den aktuellen (nach ein paar Versuchen mit der Tabelle) angehängt.

Da sieht mal die Verschiebungen recht gut: Das "Sonnenaufgang"-Symbol sollte direkt neben der Zeitangabe sitzen, die 3,6°C direkt neben dem Thermometer und die 2. Zeile ist komplett nach unter verschoben...

Viele Grüße

Frank

[drhirn]

Hmm, bleib einfach bei der "Tabellen"-Lösung, mach's aber nach dem "sheet-row-cell"-Verfahren.

Code Auswählen Erweitern


<div class="sheet"><!-- gesamte Statusleiste-->
<div class="row">
  <div class="cell">
   <div class="uhr"><!-- die Uhr --></div>
   <div class="wetter"><!-- das Wetter -->
    <div class="sheet">
     <div class="row">
      <div class="cell"><!--Wetterbild--></div>
      <div class="cell"><!--Wettertext--></div>
      <div class="cell"><!--Mond--></div>
     </div>
</div>
   </div>
   <div class="abfall"><!-- Abfall --></div>
  </div>
</div>
</div>


So ungefähr.

[Frank13]

Hi!

Die Idee "Tabelle ohne Tabelle" ist nicht schlecht. Damit konnte ich einiges bereinigen. Jetzt sind "nur" noch ein paar Baustellen geblieben.
Kann es sein, dass die Symbole (siehe unten) extrem viel Platz brauchen? Wenn ich die größer mache, habe ich sehr viel Freiraum drum rum und wieder ziemliche Verschiebungen...

Code Auswählen Erweitern


<div data-type="symbol" data-icon="1" class="meteocons inline" style="font-size:6px" data-off-color="#aa6900"></div>


Viele Grüße

Frank

[drhirn]

Ja, ist leider so.
Da müsstest du wahrscheinlich händisch das CSS anpassen, damit das besser wird.

[setstate]

Wird es mit class="compress" beim Symbol besser?

[drhirn]

Code Auswählen Erweitern

class="compressed", oder?

Cool, kannte ich noch gar nicht

[setstate]

Beides möglich. Imperativ und Präteritum. 

[drhirn]

Beides möglich. Imperativ und Präteritum. 

Hehe, aja, tatsächlich

In der Dokumentation hab ich nur Präteritum gefunden, dewegen

[Frank13]

Hi!

compress macht es deutlich besser - Danke!

Und gleich die nächste Frage: Ich habe beiden Elemente (symbol und label) in einer hbox (geht auch mit class="row") nebeneinander. Wie kann ich die enger zusammen rücken?
Hinweis: Die linken Angaben (Sonnen und Zeiten) sind mit sheet>row erstellt, die rechten mit vbox>hbox wie im Code unten. Ist halt noch im Aufbau und muß vom Hausvorstand abgesegnet werden...

Code Auswählen Erweitern


<div class="cell">
  <div class="vbox">
    <div class="hbox">
<div data-type="symbol" data-icon="1" class="meteocons inline compress" style="font-size:14px" data-off-color="#aa6900"></div>
<div data-type="label" data-device="Sonnenaufgang" data-get="state" class="inline"></div>
    </div>
    <div class="hbox">
      <div data-type="symbol" data-icon="B" class="meteocons inline compress" style="font-size:14px" data-off-color="#aa6900">/div>
      <div data-type="label" data-device="Sonnenuntergang" data-get="state" class="inline"></div>
    </div>
  </div>
</div>



Kann ich irgendwie den Mond rechts und des Rest links ausrichten?

Viele Grüße

Frank