- √ - Top-Navbar am Nexus 7 2013

[mclb]

Hi,

anbei ein Screenshot wie meine Visu gerade am Nexus 7 aussieht.
Frage: Kann ich die Icons irgendwie anpassen, dass sie nicht auf 3 Zeilen aufgeteilt werden? Wenn ja, wie?

Danke
Marcus

[MicHau]

Kannst du mal den Teil deiner Config posten? So eine Darstellung habe ich noch gar nicht gesehen, das sieht sehr seltsam aus!

[mclb]

Also am PC siehts auch anders aus, siehe Attachment in diesem Post.

Die Config zur Navbar:

      <navbar position="top" dynamic="true">
         <group name="Zentral">
            <layout colspan="1.5" />
            <pagejump target="Home">
               <layout colspan="0" />
               <label>
                  <icon name="control_building_modern_s_okg_all" />
                  Home
               </label>
            </pagejump>
            <pagejump target="Beschattung">
               <layout colspan="0" />
               <label>
                  <icon name="fts_shutter" />
                  Fenster
               </label>
            </pagejump>
            <pagejump target="Überwachung">
               <layout colspan="0" />
               <label>
                  <icon name="it_camera" />
                  Kamera
               </label>
            </pagejump>
         </group>
         <group name="Untergeschoß">
            <layout colspan="2" />
            <pagejump target="Spielzimmer">
               <layout colspan="0" />
               <label>
                  <icon name="scene_visit_guests" />
                  Spielzimmer
               </label>
            </pagejump>
            <pagejump target="Büro">
               <layout colspan="0" />
               <label>
                  <icon name="scene_office" />
                  Büro
               </label>
            </pagejump>
            <pagejump target="Wohnzimmer">
               <layout colspan="0" />
               <label>
                  <icon name="scene_livingroom" />
                  Wohnen
               </label>
            </pagejump>
            <pagejump target="Küche">
               <layout colspan="0" />
               <label>
                  <icon name="scene_dinner" />
                  Küche
               </label>
            </pagejump>
         </group>
         <group name="Obergeschoß">
            <layout colspan="3" />
            <pagejump target="Schlafzimmer">
               <layout colspan="0" />
               <label>
                  <icon name="scene_making_love_clean" />
                  Schlafen
               </label>
            </pagejump>
            <pagejump target="K1">
               <layout colspan="0" />
               <label>
                  <icon name="scene_baby" color="#00FF00" />
                  Elay
               </label>
            </pagejump>
            <pagejump target="Kind 2">
               <layout colspan="0" />
               <label>
                  <icon name="scene_childs_room" color="#0099FF" />
                  Kind 2
               </label>
            </pagejump>
            <pagejump target="Kind 3">
               <layout colspan="0" />
               <label>
                  <icon name="scene_childs_room" color="#ff0000" />
                  Masami
               </label>
            </pagejump>
            <pagejump target="Kinderbad">
               <layout colspan="0" />
               <label>
                  <icon name="scene_shower" />
                  Kinderbad
               </label>
            </pagejump>
            <pagejump target="Abstellraum">
               <layout colspan="0" />
               <label>
                  <icon name="scene_cubby" />
                  Abstellraum
               </label>
            </pagejump>
         </group>
         <group name="Außen">
            <layout colspan="1" />
            <pagejump target="Garten">
               <layout colspan="0" />
               <label>
                  <icon name="scene_garden" />
                  Garten
               </label>
            </pagejump>
            <pagejump target="Garage">
               <layout colspan="0" />
               <label>
                  <icon name="fts_garage" />
                  Garage
               </label>
            </pagejump>
         </group>
         <group name="Technik">
            <layout colspan="1" />
            <pagejump target="Temperaturen">
               <layout colspan="0" />
               <label>
                  <icon name="it_pc" />
                  Technik
               </label>
            </pagejump>
         </group>
      </navbar>

Ich muss wohl auch noch dazu sagen, dass ich einen Stand ca. 0.8.0 RC3 habe, was aber glaub ich für diese Frage nicht sooo arg relevant ist.

LG
Marcus

[MicHau]

Ah, alles klar. Du arbeitest im Top-Navbar mit Groups und die kriegen einen Header. Ich unterteile die Bereich im Top-Navbar mit Line-Elementen, habe dann aber auch noch einen Left-Navbar, in dem ich die Unterstrukturen darstelle.

Zu deinem eigentlichen Problem. Das geht sicherlich irgendwie mit CSS, aber da bin ich leider echt überfragt. CSS ist zwar keine Welt mit 7 Siegeln mehr, aber 4-5 werden es noch sein. Vielleicht kann peuter, der Autor des Metal-Designs weiterhelfen. Ich konnte keine CSS-Einstellung finden, die das irgendwie behoben hätte.
Sorry!

[peuter]

Kannst Du in Deinem Nexus mal, die Darstellung in der Mobil-Variante erzwingen mit ?forceDevice=mobile. Auf kleinen Bildschirmen soll die Top-Navbar nicht auf mehrere Zeilen umgebrochen werden sondern einfach hozizontal scrollbar sein.
Wenn die Darstellung damit funktioniert, kannst Du Dir den CSS-Teil eventuell auch in Deine custom.css packen. Das müssten folgende Zeilen sein:

/* prevent top/bottom navbar wrapping, use scrolling instead, if necessary */
#navbarTop > .navbar > div, #navbarTop > .navbar > hr {
    display: inline-block;
    float: none;
}
#navbarTop > .navbar , #navbarBottom > .navbar {
    overflow-y: hidden;
    overflow-x: auto;
    white-space: nowrap;
    height: 3.6em;
}

[mclb]

Danke, das sieht schon viel besser aus. Nur die Groups werd ich wohl weglassen. Hab ich jetzt geändert, dass zwischen den Gruppen Linien sind, nur tut auch das nicht so wirklich wie ich mir das erwarten würde.

Hier nochmal der aktuelle Code:

    <navbar position="top" dynamic="true">
      <pagejump target="Home">
        <layout colspan="0" />
        <label>
          <icon name="control_building_modern_s_okg_all" />
          Home
        </label>
      </pagejump>
      <line/>
      <pagejump target="Beschattung">
        <layout colspan="0" />
        <label>
          <icon name="fts_shutter" />
          Fenster
        </label>
      </pagejump>
      <pagejump target="Überwachung">
        <layout colspan="0" />
        <label>
          <icon name="it_camera" />
          Kamera
        </label>
      </pagejump>
      <line/>
      <pagejump target="Spielzimmer">
        <layout colspan="0" />
        <label>
          <icon name="scene_visit_guests" />
          Spielzimmer
        </label>
      </pagejump>
      <pagejump target="Büro">
        <layout colspan="0" />
        <label>
          <icon name="scene_office" />
          Büro
        </label>
      </pagejump>
      <pagejump target="Wohnzimmer">
        <layout colspan="0" />
        <label>
          <icon name="scene_livingroom" />
          Wohnen
        </label>
      </pagejump>
      <pagejump target="Küche">
        <layout colspan="0" />
        <label>
          <icon name="scene_dinner" />
          Küche
        </label>
      </pagejump>
      <line/>
      <pagejump target="Schlafzimmer">
        <layout colspan="0" />
        <label>
          <icon name="scene_making_love_clean" />
          Schlafen
        </label>
      </pagejump>
      <pagejump target="K1">
        <layout colspan="0" />
        <label>
          <icon name="scene_baby" color="#00FF00" />
          Elay
        </label>
      </pagejump>
      <pagejump target="Kind 2">
        <layout colspan="0" />
        <label>
          <icon name="scene_childs_room" color="#0099FF" />
          Kind 2
        </label>
      </pagejump>
      <pagejump target="Kind 3">
        <layout colspan="0" />
        <label>
          <icon name="scene_childs_room" color="#ff0000" />
          Masami
        </label>
      </pagejump>
      <pagejump target="Kinderbad">
        <layout colspan="0" />
        <label>
          <icon name="scene_shower" />
          Kinderbad
        </label>
      </pagejump>
      <pagejump target="Abstellraum">
        <layout colspan="0" />
        <label>
          <icon name="scene_cubby" />
          Abstellraum
        </label>
      </pagejump>
      <line/>
      <pagejump target="Garten">
        <layout colspan="0" />
        <label>
          <icon name="scene_garden" />
          Garten
        </label>
      </pagejump>
      <pagejump target="Garage">
        <layout colspan="0" />
        <label>
          <icon name="fts_garage" />
          Garage
        </label>
      </pagejump>
      <line/>
      <pagejump target="Temperaturen">
        <layout colspan="0" />
        <label>
          <icon name="it_pc" />
          Technik
        </label>
      </pagejump>
    </navbar>

Und im Anhang der Screenshot dazu ... wieso ist da so ein großer Abstand nach der Linie?

Danke
Marcus

[swiss]

Eine Antwort darauf habe ich auch nicht gerade. Aber eine andere Frage... Hast du darauf geachtet, dass der Editor mit dem du die Config bearbeitest auf UTF-8 eingestellt ist? Die fehlerhaften Umlaute würden dafür sprechen und das kann auch dazu führen das die config falsch interpetiert wird, was zu Fehlfunktionen führen kann.

[MicHau]

wieso ist da so ein großer Abstand nach der Linie?

Das Line-Element muss auch ein Layout-Child haben, also so:

<line><layout colspan="0" /></line>

[mclb]

Dann stimmt aber das Handbuch nicht, zumindest bei der Demo-Config von haeger80

Dort wird nämlich aus der Config

<navbar position="top" dynamic="true">
  <pagejump target="Übersicht">
    <layout colspan="1" />
    <label>
      <icon name="control_home" />
      Home
    </label>
  </pagejump>
  <line />
  <line />
  <line />
  <line />
  <pagejump target="Untergeschoss">
    <layout colspan="1.1" />
    <label>
      <icon name="control_building_empty" />
      Wohnen Essen/Küche
    </label>
  </pagejump>
  <line />
  <pagejump target="Schlafzimmer">
    <layout colspan="0.8" />
    <label>
      <icon name="scene_sleeping" />
      Schlafen
    </label>
  </pagejump>
  <pagejump target="Bad" name=" ">
    <layout colspan="0.8" />
    <label>
      <icon name="scene_bathroom" />
      Bad
    </label>
  </pagejump>
  <pagejump target="Arbeits-/Gästezimmer">
    <layout colspan="0.8" />
    <label>
      <icon name="scene_office" />
      Arbeiten Gast
    </label>
  </pagejump>
  <pagejump target="Treppenhaus/Windfang">
    <layout colspan="0.8" />
    <label>
      <icon name="scene_hall" />
      Treppe Eingang
    </label>
  </pagejump>
  <line />
  <line />
  <line />
  <line />
  <pagejump target="Pelletskessel">
    <layout colspan="0.8" />
    <label>
      <icon name="sani_boiler_temp" />
      Pellets- kessel
    </label>
  </pagejump>
  <pagejump target="Fußbodenheizung">
    <layout colspan="0.8" />
    <label>
      <icon name="sani_floor_heating" />
      Fußboden- heizung
    </label>
  </pagejump>
  <pagejump target="Heizkörper">
    <layout colspan="0.8" />
    <label>
      <icon name="sani_heating" />
      Heiz- körper
    </label>
  </pagejump>
  <pagejump target="Warmwasser">
    <layout colspan="0.8" />
    <label>
      <icon name="sani_water_tap" />
      Warm- wasser
    </label>
  </pagejump>
  <pagejump target="Fenster - Jalousien/Rolladen">
    <layout colspan="0.8" />
    <label>
      <icon name="fts_shutter" />
      Fenster Rolladen
    </label>
  </pagejump>
  <pagejump target="Wetter">
    <layout colspan="0.8" />
    <label>
      <icon name="scene_day" />
      Wetter
    </label>
  </pagejump>
  <line />
  <pagejump target="Einstellungen">
    <layout colspan="0.8" />
    <label>
      <icon name="message_service" />
      Einstellungen
    </label>
  </pagejump>
</navbar>

die Navbar im Anhang ... da ist auch überall nur ein <line/> drin, ohne layout.

LG
Marcus

[mclb]

Aber nur um das noch zu schreiben, funktioniert und sieht jetzt so aus, wie ichs haben will.

Danke für die Hilfe!

[MicHau]

Dann stimmt aber das Handbuch nicht, zumindest bei der Demo-Config von haeger80

Stimmt, ich habe sie gerade mal auf den neuesten Stand gebracht.