Gridster <li> ausblenden

Begonnen von Eisix, 17 April 2018, 18:05:04

Vorheriges Thema - Nächstes Thema

Eisix

Hallo,

ich möchte den Inhalt der Spalten mit der activity des von hub ein/ausblenden.


<div class="gridster">
<ul>
<!-- 1 Spalte -->
        <li data-row="1" data-col="1" data-sizex="1" data-sizey="2" data-template="templates/tmp_LichtTerrasse.htm"></li>
        <li data-row="1" data-col="2" data-sizex="1" data-sizey="2" data-template="templates/tmp_LichtVR_mob.htm"></li>
        <li data-row="1" data-col="3" data-sizex="1" data-sizey="2" data-template="templates/tmp_Tueren.htm"></li>
        <li data-row="1" data-col="4" data-sizex="2" data-sizey="2" data-template="templates/tmp_Garagen.htm"></li>
        <li data-row="3" data-col="1" data-sizex="5" data-sizey="2" data-template="templates/tmp_Rolladen_mob.htm"></li>
        <li data-row="6" data-col="1" data-sizex="5" data-sizey="2" data-template="templates/tmp_Abfall.htm"></li>
        <li data-row="8" data-col="1" data-sizex="5" data-sizey="2" data-template="templates/tmp_Bose.htm"></li>
        <li data-row="10" data-col="1" data-sizex="5" data-sizey="2" data-template="templates/tmp_Multimedia_mob.htm"></li>
        <li data-row="12" data-col="1" data-sizex="5" data-sizey="2" data-template="templates/tmp_Homestatus_mob.htm"></li>

<!-- 2 Spalte -->
        <li data-row="1" data-col="6" data-sizex="5" data-sizey="12" data-template="templates/tmp_Sender.htm" style="background-color:#A9F5D0" data-type="html" data-class="hub:activity" data-map-class='{"Fernsehen":"show", ".*":"hide"}'></li>

        <li data-row="1" data-col="6" data-sizex="5" data-sizey="12" data-template="templates/tmp_AmazonPrime.htm" data-type="html" data-class="hub:activity" data-map-class='{"AmazonPrime":"show", ".*":"hide"}'><li>

<!-- 3 Spalte -->
        <li data-row="1" data-col="11" data-sizex="5" data-sizey="9" data-template="templates/tmp_Harmony.htm" data-type="html" data-class="hub:activity" data-map-class='{"Fernsehen":"show", ".*":"hide"}'></li>

        <li data-row="10" data-col="11" data-sizex="5" data-sizey="3" data-template="templates/tmp_Activity.htm" data-type="html" data-class="hub:activity" data-map-class='{"Fernsehen":"show", ".*":"hide"}'></li>

</ul>
</div>



Das ein/ausblenden funktioniert zwar aber irgendwie zerschießt es mir das Layout. Jemand einen Tip/Idee. Oder geht das so nicht?

Gruß
Eisix

Paul

Bei Spalte 2 hast du ein <li> nicht geschlossen. Vielleicht hilft das schon.
Cubietruck, HM-USB, CUL, FS20, FHT, HUE, Keymatic

Eisix

@Paul: Danke für den Codereview. Man ist dann doch einfach blind.

Das bring mich etwas weiter. Wenn ich nur die zweite Spalte im Code aktiv lasse werden die Templates angezeigt allerdings nicht übereinander sondern nebeneinander. Also wird das ausgeblendete zwar nicht angezeigt aber es erscheint als leeres Feld und das was aktiv ist wird in die 3 Spalte verschoben.

Sobald ich die 3 Spalte im Code aktiviere zerschießt es wieder alles.
Irgendwas passt da noch nicht.

Gruß
Eisix


dt2510

Ich sehe den Fehler zwar auch nicht, aber vielleicht kannst du mir beim html Widget weiterhelfen ...

Ich möchte abhängig vom Inhalt des Dummys ActiveMenu ein anderes Menü anzeigen

<div data-template="includes/menuMain.inc" data-type="html" data-class="ActiveMenu:state" data-map-class='{"main":"show",".*":"hide"}'></div>
<div data-template="includes/menuSubRooms.inc" data-class="ActiveMenu:state" data-map-class='{"subrooms":"show",".*":"hide"}'></div>


Statt des Hauptmenüs wird allerdings alles angezeigt, wenn ActiveMenu "main" ist !?

Eisix

Hallo,

in der zweiten Zeile fehlt  data-type='html"

Gruß
Eisix

dt2510

#5
danke  ::)

Jetzt funktioniert es - fast. Wenn die Seite gerade geladen wurde (dann setze ich im body onload den Inhalt von ActiveMenu auf "main") wird beim Click auf einen Menüpunkt der Inhalt von ActiveMenu geändert (s. Toast Message in Bild 1 - im FHEMWEB ist es auch geändert), aber das Menü erscheint erst nach einem erneuten Clicken des Icons. Bis zum nächsten reload funktioniert dann alles ...

drhirn

Was genau steht in der CSS-Klasse "hide"?

Du hast nämlich in CSS zwei Möglichkeiten, Objekte nicht anzuzeigen.

  • display:none - Das Objekt wird nicht angezeigt und auch kein Platz dafür reserviert
  • visibility:hidden - Das Objekt wird nicht angezeigt, es wird aber der benötigte Platz dafür reserviert

visibility wäre also in deinem Fall die Lösung, wenn ich dich richtig verstanden habe.

Eisix

Hallo,

habe mal beide Varianten in fhem-tablet-ui-user.css gepackt und getestet.


.myhidden {display:none}
.hidden {visibility:hidden}



        <li data-row="1" data-col="6" data-sizex="5" data-sizey="12" data-template="templates/tmp_Sender.htm" style="background-color:#A9F5D0" data-type="html" data-class="hub:activity" data-map-class='{"Fernsehen":"show", ".*":"myhidden"}'></li>

        <li data-row="1" data-col="6" data-sizex="5" data-sizey="12" data-template="templates/tmp_AmazonPrime.htm" data-type="html" data-class="hub:activity" data-map-class='{"PowerOff":"show", ".*":"myhidden"}'></li>

Sehe vom Verhalten her aber keinen Unterschied sieht immer so wie im screenshot aus. Habe ich was vergessen?

Gruß
Eisix



drhirn

Mir ist leider nicht ganz klar, wie das aussehen soll. Kannst du mir bitte einen Screenshot machen, in dem das Zeug eingeblendet ist? Und markieren, was ausgeblendet werden soll?

Eisix

Die Sachen auf der linken Seite sind die Standard Ansicht. Wenn der User über ein Circlemenu den Harmony Hub auf eine andere Aktion schaltet(reading für den Classchanger) soll rechts ein entsprechendes Fernbedienungslayout erscheinen. Der eigentliche Gridster ist 3 mal so breit wie der am Handy sichtbare Bildschirm, somit kann man dann durch die 3 spalten wischen.

Hoffe das ist so verständlich.

Gruß
Eisix

drhirn

Ok, hab's verstanden. Und gerade ausprobiert. Scheint nicht zu funktionieren. Das Gridster-HTML wird - wie's aussieht - aufgebaut, bevor du's manipulieren kannst. Um zu erreichen, was du machen möchtest, müsstest du wohl das HTML mit JavaScript manipulieren.
Oder, was wahrscheinlich erfolgsversprechender ist, ein Gridster-Element nehmen und darin <div>s austauschen.
Also zweite und dritte Spalte in einem <li> vereinen und den Inhalt der beiden bisherigen Spalten in ein <div class="inline"> umbauen.
Verstehst du, was ich meine? Bzw. hab ich verstanden, was du meinst?

Eisix

Also den Classchanger dann innerhalb des <li> laufen lassen wie es dt2510 bei seinem Menue hat?


drhirn

Ja, genau. Hab ich übersehen, dass er das so macht.

TWART016

@Eisix wie macht du die Icons mehrfarbig und nur grau?

Eisix

@TWART016

data-classes='["","faded"]



        <div class="round top-narrow grow-1 inline" data-type="image" data-device="rr_XXXX" data-state-get="state" data-states='["((home)|(gotosleep))","((absent)|(gone))"]' data-classes='["","faded"]' data-width="45" data-height="45" data-url="/fhem/images/Minion-Hello-icon.png"></div>



Gruß
Eisix