Navigation

    Logo
    • Register
    • Login
    • Search
    • Recent
    • Tags
    • Unread
    • Categories
    • Unreplied
    • Popular
    • GitHub
    • Docu
    • Hilfe
    1. Home
    2. Deutsch
    3. Visualisierung
    4. [Projekt] MDCSS v2: Material Design CSS Version 2

    NEWS

    • Neuer Blog: Fotos und Eindrücke aus Solingen

    • ioBroker@Smart Living Forum Solingen, 14.06. - Agenda added

    • ioBroker goes Matter ... Matter Adapter in Stable

    [Projekt] MDCSS v2: Material Design CSS Version 2

    This topic has been deleted. Only users with topic management privileges can see it.
    • Uhula
      Uhula @mrFenyx last edited by

      @mrFenyx Klar, du musst es mit "mdui-noflex" nur aus der flex-Anordnung rausnehmen, dann kannst du es beliebig positionieren, z.B. mit: left=calc(100% - 40px). Kann auch weiterhin ein "mdui-navitem" sein, muss aber nicht.

      [{"tpl":"tplJquiIconNav","data":{"g_fixed":true,"g_visibility":false,"g_css_font_text":false,"g_css_background":false,"g_css_shadow_padding":false,"g_css_border":false,"g_gestures":false,"g_signals":false,"visibility-cond":"==","visibility-val":1,"visibility-groups-action":"hide","signals-cond-0":"==","signals-val-0":true,"signals-icon-0":"/vis/signals/lowbattery.png","signals-icon-size-0":0,"signals-blink-0":false,"signals-horz-0":0,"signals-vert-0":0,"signals-hide-edit-0":false,"signals-cond-1":"==","signals-val-1":true,"signals-icon-1":"/vis/signals/lowbattery.png","signals-icon-size-1":0,"signals-blink-1":false,"signals-horz-1":0,"signals-vert-1":0,"signals-hide-edit-1":false,"signals-cond-2":"==","signals-val-2":true,"signals-icon-2":"/vis/signals/lowbattery.png","signals-icon-size-2":0,"signals-blink-2":false,"signals-horz-2":0,"signals-vert-2":0,"signals-hide-edit-2":false,"class":"mdui-navitem  mdui-noflex ","text":"<i class='material-icons'>help</i>","nav_view":"pageDemoEx1","g_last_change":false,"lc-type":"last-change","lc-is-interval":true,"lc-is-moment":false,"lc-format":"","lc-position-vert":"top","lc-position-horz":"right","lc-offset-vert":0,"lc-offset-horz":0,"lc-font-size":"12px","lc-font-family":"","lc-font-style":"","lc-bkg-color":"","lc-color":"","lc-border-width":"0","lc-border-style":"","lc-border-color":"","lc-border-radius":10,"lc-zindex":0},"style":{"left":"calc(100% - 40px)","top":"0px","width":"40px","height":"39px","position":""},"widgetSet":"jqui"}]
      

      mrFenyx jpgorganizer 2 Replies Last reply Reply Quote 1
      • T
        Tirador last edited by

        Hallo,

        ich probiere nun auch meine ersten Gehversuche.
        Dabei versuche ich die "Grid-Struktur" mit mdui-cols-n umzusetzen.

        Ich hätte gerne das Responsive Design so, dass es sowohl im Quer- als auch Hochformat gut aussieht.

        Mein Handy hat die folgende Auflösung:

        • 396px im Hochformat
        • 766px im Querformat

        Im Hochformat passt prinzipiell nur eine Card auf den Schirm. Im Querformat könnte man zwei nebeneinander packen.

        Muss ich dann alles auf den kleinsten gemeinsamen Nenner ausrichten, d.h. 766 / 2 = 383 px?

        Ich habe gesehen das es im CSS für jede mdui-col-x Breite ein min-width und ein max-width gibt.
        Oder muss ich dann max-width auf 396 px einstellen und min-width auf 383 px?

        Die weitere Verkomplizierung.
        Es gibt nun noch ein Tablet, dass ich mit dem gleichen Design füttern wollen würde.

        Das Tablet hat die folgende Auflösung:

        • 587px im Hochformat
        • 939px im Querformat

        Ist das überhaupt mit einem responsive Design alles unter einen Hut zu zaubern?

        Dominik F. 1 Reply Last reply Reply Quote 0
        • Dominik F.
          Dominik F. @Tirador last edited by

          @Tirador
          Du musst dann mdui-cols-4-toc-5 einstellen, dann passt sich die Breite automatisch auf 320px-400px an. Beim quer sollten die sich dann nebeneinander anordnen. Du musst immer vom kleinsten ausgehen.

          1 Reply Last reply Reply Quote 0
          • mrFenyx
            mrFenyx @Uhula last edited by

            @Uhula Super, danke! 👍

            B 1 Reply Last reply Reply Quote 0
            • B
              BoehserWolf @mrFenyx last edited by BoehserWolf

              @Uhula

              Habe ein Problem mit dem Importieren der "Einstellungen" cards aus MD_Demo in MD_Simple.

              Die Idee war:

              • Export/Import der entsprechenden Cards aus MD_Demo, also cardConfig, cardConfigCards, cardConfigColors in ein neues Projekt auf Basis von MD_Simple
              • sowie Export/Import des nötigen Einstellungen Widgets aus lnav
              • Einstellungen im neuen Projekt nutzen

              Das haut leider nicht hin, die Einstellungen lassen sich nicht anpassen, es passiert einfach nichts im neuen Projekt.
              Habe ich parallel das importierte MD_Demo Projekt in einem anderen Browser Tab auf, werden die Einstellungen dieses Projekts angepasst.

              Alles klar dachte ich, dann ändere ich die Bezeichnungen der Object IDs in den Widgets von cardConfigCards, cardConfigColors von demo_config_xxx in einen anderen Namen.
              Bspw. in cardConfigCards das Widget zur Card-Darstell. hat als Object ID "demo_card_title_color", also geändert in "proj_card_title_color". Das habe ich analog für alle Widgets in den entsprechenden Cards vorgenommen. Dann kann ich jedoch nichts mehr konfigurieren.

              Habe schon alles Mögliche probiert um das zum Laufen zu bringen...

              Bin für jeden Tipp dankbar.

              Hinweis am Rande: Ein Verweis auf eine Übersicht aller Material Design Icons habe ich hier gefunden. Würde vorschlagen einen Hinweis in github zu setzen. Dann hat man schnell die Übersicht über die Icons gefunden ohne lange googeln zu müssen.

              P Uhula 2 Replies Last reply Reply Quote 0
              • P
                Pittini Developer @BoehserWolf last edited by

                @BoehserWolf sagte in [Projekt] Material Design CSS v2:

                Die Idee war:

                Export/Import der entsprechenden Cards aus MD_Demo, also cardConfig, cardConfigCards, cardConfigColors in ein neues Projekt auf Basis von MD_Simple
                sowie Export/Import des nötigen Einstellungen Widgets aus lnav
                Einstellungen im neuen Projekt nutzen

                Was in Deiner Auflistung auf jeden Fall fehlt sind die 3 Blöcke aus der abar. Hol die mal noch aus der MD_Demo rüber, dann sollte es klappen. Hab das auch in nem Projekt so gemacht und grundsätzlich klappt das auch.

                B 1 Reply Last reply Reply Quote 0
                • B
                  BoehserWolf @Pittini last edited by

                  @Pittini
                  Funktioniert einwandfrei bis auf das Select für Primary Color. Das Select reagiert einfach mal gar nicht. Da noch ne Idee?

                  P 1 Reply Last reply Reply Quote 0
                  • P
                    Pittini Developer @BoehserWolf last edited by

                    @BoehserWolf sagte in [Projekt] Material Design CSS v2:

                    Da noch ne Idee?

                    Beim ändern der Namen vertippt oder einen Eintrag vergessen? Entweder im Config Dialog, in einem der 3 abar Blöcke oder im Css.

                    B 1 Reply Last reply Reply Quote 0
                    • B
                      BoehserWolf @Pittini last edited by

                      @Pittini
                      So ähnlich. Der VIS Editor hatte scheinbar beim Ändern des Namens der Object ID die Werte und Texte verworfen - warum auch immer!?
                      Also View aus Demo nochmal exportiert und neu importiert. Beim Importieren die Namen der Widgets bereits korrekt angepasst. Jetzt funzt es.

                      Thx nochmal 👍

                      1 Reply Last reply Reply Quote 0
                      • Uhula
                        Uhula @BoehserWolf last edited by Uhula

                        @BoehserWolf Danke, der Link zu den Icons ist im MD_Demo in der Icon-Card drin - kann ich aber auch noch im readme mit aufnehmen.

                        Den Rest hat @Pittini ja schon mit dir geklärt - hätte ich nicht besser gekonnt 😉

                        1 Reply Last reply Reply Quote 0
                        • jpgorganizer
                          jpgorganizer @Uhula last edited by

                          @Uhula

                          Du hast weiter oben beschrieben, wie man etwas am rechten Rand ausrichtet. Das kannte ich zwar schon, aber das brachte wieder ein Thema bei mir hoch.

                          Ausgangsituation ist so, dass ich ein Widget am rechten Rand anheften will, in diesem Fall ein mdui-navitem, trifft aber bei allen Texten zu. Das mache ich so:
                          ff027729-aefa-45f2-bc75-d5c184611678-grafik.png

                          Das Problem ist die Breite (width). Im Beispiel steht hier 50px, da hier aktuell der angezeigte Text eben so reinpasst. Da meine Texte aber variabel sind, wird das über kurz oder lang eben zu klein oder zu groß sein. Im einen Fall wird dann abgeschnitten, im anderen Fall ist es nicht mehr rechts aussen.

                          Dazu müsste ich die tatsächlich notwendige Breite kennen. Also so eine Art text.length(). Oder eine ganz andere Lösung. Ich könnte mir auch vorstellen, dass ich einen maximale Breite verwende und dann innerhalb des Feldes rechtsbündig schreibe. Das habe ich aber bisher nicht hinbekommen. Hast du einen Tipp für mich?

                          Grüße
                          jpgorganizer

                          mrFenyx 1 Reply Last reply Reply Quote 0
                          • mrFenyx
                            mrFenyx @jpgorganizer last edited by

                            @jpgorganizer Die idee mit "max_length" sollte schon passen. Was du dann tun musst ist im "CSS Font & Text" Bereich das "text-align" zu "right" setzen. Wichtig ist dass du für dieses Element nicht "mdui-center(-v/-h)" benutzt denn dieses überschreibt das normale text-align. Kann sein dass auch andere mdui- Klassen das tun, weiß ich nicht. Hoffe es passt so.

                            jpgorganizer 1 Reply Last reply Reply Quote 0
                            • bilberry
                              bilberry last edited by

                              Ich hoffe nicht, dass ich die Antwort auf folgende Frage irgendwo schon überlesen habe:
                              Wenn ich mehrere Cards auf einer Seite darstelle (z.B. alle mit mdui-cols-4-toc-5) sind die auf dem Monitor schön nebeneinander und auf dem Smartphone wunderbar untereinander.
                              Aber, wenn ich die die letzte/unterste Card zusammenklappe (oder gar mit mdui-onload schon zusammengeklappt öffne), verschwindet Card die so weit hinter der tbar, dass man sie nicht mehr expandieren kann.

                              Hab's es soeben noch mal in der DEMO probiert, damit ihr nachvollziehen könnt, was ich meine. Für mich jetzt überraschend ist dort das Verhalten offenbar nicht so. Ein Seitenvergleich hat auf Anhieb keine Unterschiede gebracht. Hat jemand eine Idee, woran das bei mir liegen kann?

                              P 1 Reply Last reply Reply Quote 0
                              • P
                                Pittini Developer @bilberry last edited by

                                @bilberry sagte in [Projekt] Material Design CSS v2:

                                Hat jemand eine Idee, woran das bei mir liegen kann?

                                Ich würde vermuten dass Dein content Bereich zu groß ist. Wenn Du mit ner tnav arbeitest muss der content calc(100% - 3 * 40px) sein. Hast Du nur 2mal 40 abgezogen geht der content zu weit nach unten. Wär zumindest jetzt mein Verdacht.

                                bilberry 1 Reply Last reply Reply Quote 0
                                • bilberry
                                  bilberry @Pittini last edited by

                                  @Pittini Danke für den Tipp. Es könnte tatsächlich sein, dass ich ursprünglich einer Vorlage ohne bnav begonnen habe. Die Stelle schaue ich mir heute Abend noch mal genauer an .

                                  1 Reply Last reply Reply Quote 0
                                  • G
                                    GiuseppeS last edited by GiuseppeS

                                    @Uhula
                                    Du verwendest in Deinem Script einige Methoden wie z.B. ele.closest, ele.attr, removeAttr, usw.
                                    Sind das ioBroker-eigene Methoden oder gibt es dazu einen offiziellen Begriff wonach man googlen könnte?
                                    Habe nur folgendes gefunden, aber da stehen deine Methoden nicht drin:
                                    HTML DOM Element Object

                                    Evtl hast du ja eine Quelle für mich 🙂
                                    Danke

                                    Uhula 1 Reply Last reply Reply Quote 0
                                    • mrFenyx
                                      mrFenyx last edited by mrFenyx

                                      Weiß jemand was man tun muss so dass die Material Icons korrekt in der ioBroker Android App angezeigt werden? Ist das eigentlich möglich? Jetzt wird nur das "Text" angezeigt also werden die Font Dateien nicht gefunden.

                                      UPDATE: man muss einfach nur die komplette Adresse für den Font URL angeben, dann alles in der App reload / resync und es geht!

                                      1 Reply Last reply Reply Quote 0
                                      • Uhula
                                        Uhula @GiuseppeS last edited by

                                        @GiuseppeS Früher, im HTML-Mittelalter, gab es kaum elegante Methoden um sich browserseitig durch die DOM Elemente zu bewegen. Eine Bibliothek, jquery, bot hier viel bessere Möglichkeiten. Mittlerweile könnte man auf jquery verzichten, aber ioBroker nutzt es noch (wie >80% der WebSites). Info/API/Dok: jquery

                                        G 1 Reply Last reply Reply Quote 1
                                        • G
                                          GiuseppeS @Uhula last edited by

                                          @Uhula
                                          Hey Klasse, danke für den Hinweis und den Link. So kann ich mich dran versuchen ein paar eigene Ideen umzusetzen 🙂
                                          Wo ist eigentlich dein "Buy me a beer" - Link?

                                          1 Reply Last reply Reply Quote 0
                                          • D
                                            der-eine last edited by

                                            Guten Morgen,

                                            bin gerade dabei mir eine View für Pings zu erstellen. Wie könnte man das am schönsten im Material Design lösen?
                                            Habe mir mal die Tabellen angeschaut und die Bindings zu den Datenpunkten eingefügt. Somit müsste man nur
                                            im Ping Adapter das Gerät ändern und es wird automatisch in die VIS übernommen.
                                            Hab mich ein wenig mit Colspan gespielt und versucht die Überschriften der Spalten mittig über die Einträge zu bekommen
                                            aber leider nicht so hin bekommen wie ich das gerne hätte. Des weiteren wäre es noch interessant, den Status entweder mit
                                            einem Kreis in rot oder grün anzuzeigen oder zumindest true und false jeweils die Farbe ändern. Hat da jemand nen Tipp wie
                                            ich das bewerkstelligen könnte? Das wär top! 😀
                                            Oder hat jemand eine bessere Idee? 😬

                                            Bildschirmfoto 2020-03-04 um 02.34.44.png
                                            Bildschirmfoto 2020-03-04 um 02.36.31.png

                                            Uhula 1 Reply Last reply Reply Quote 0
                                            • First post
                                              Last post

                                            Support us

                                            ioBroker
                                            Community Adapters
                                            Donate

                                            827
                                            Online

                                            31.8k
                                            Users

                                            80.0k
                                            Topics

                                            1.3m
                                            Posts

                                            material css material ui vis
                                            74
                                            717
                                            141615
                                            Loading More Posts
                                            • Oldest to Newest
                                            • Newest to Oldest
                                            • Most Votes
                                            Reply
                                            • Reply as topic
                                            Log in to reply
                                            Community
                                            Impressum | Datenschutz-Bestimmungen | Nutzungsbedingungen
                                            The ioBroker Community 2014-2023
                                            logo