Tablet UI - responsive Design (flexbox)

Begonnen von jemu75, 06 September 2017, 14:37:10

Vorheriges Thema - Nächstes Thema
Drucken
Nach unten Seiten 1 ... 5 6 7 8 9 ... 12
Benutzer-Aktionen

somansch

#90
05 November 2017, 16:39:08
@holle75,

du bist ein Held, hat geklappt  :).

Habe noch eine Sektion für 25% eingebaut. Damit hat man dann alle Möglichkeiten...

Vielen Dank,
Andreas

holle75

#91
05 November 2017, 16:44:08
hatte noch einen Fehler im content, jetzt berichtigt

somansch

#92
08 November 2017, 19:08:03
Hat jemand inzwischen einen Workaround für die fehlerhafte Darstellung von "warn" in Verbindung mit "compressed" gefunden?

Hier der Code:
Code Auswählen
<section>
<div class="row">
<div class="cell left-align left-space">
<div data-type="symbol"
data-device="Geburtstagskalender"
data-get="t_001_daysleft"
data-get-on='["0","1","2"]'
data-get-warn='([0|1|2])'
data-on-colors='["blue","blue","blue"]'
class="big warn compressed"
data-icons='["fa-birthday-cake fa-spin","fa-birthday-cake shake","fa-birthday-cake"]'>
</div>
</div>
<div class="cell-80 left-align white">
<div data-type="link" data-url="#content2_birthday.html" data-load="#content2_birthday" data-fade-duration="0">
<div class="big white left-align">Geburtstage</div>
</div>
<div data-type="label" class="inline">N&auml;chster:&nbsp;</div>
<div data-type="label" data-device="Geburtstagskalender" data-get="t_001_bdate" class="inline"></div>
<div data-type="label" data-device="Geburtstagskalender" data-get="t_001_summary" class="inline"></div>
</div>
<div class="cell"></div>
<div class="cell">
<div data-type="link" data-url="#content2_birthday.html" data-load="#content2_birthday" data-fade-duration="0">
<div data-type="symbol" data-color="gray" data-icon="mi-chevron_right" class="compressed"></div>
</div>
</div>
</div>
</section>

Ohne "compressed" ist die Dartsellung in Ordnung, jedoch sind dann die Sections zu hoch, sodass nicht sehr viele auf eine Seite passen  :(

setstate

#93
08 November 2017, 19:58:10
css/fhem-tablet-ui.css

Zeile 2599 ändern in
i#warn-back {
    font-size: 80% !important;
    margin-left: 0.65em;
    margin-top: -0.82em;
    color: #aa2200;
}

somansch

#94
08 November 2017, 20:34:06
Danke, hat funktioniert :). Wird es ein ofizielles Update geben?

setstate

#95
09 November 2017, 01:03:45
ja, das kommt dann "offiziell" mit

GeoCeKid

#96
26 November 2017, 13:42:05
Hallo alle zusammen,

hier mal meine "user-tablet-ui.css", warscheinlich alles falsch gemacht ;) aber es funzt.

Änderungen: (sind mit GeoCeKid + was es macht markiert)

  • fehlendes Stück am oberen Bildschirmrand gefixt
  • vbox Breite auf 350px fixiert + halbe Breite hinzugefügt
  • bei großem Menu scrollt dieses nun

Änderungen:
Code Auswählen

/* GeoCeKid Korrektur der Seitenleiste */
body {
position: relative !important;
}

.menu {
position: absolute !important;
height: unset !important;
min-height: fit-content !important;
bottom: 0 !important;
}

html, body, main, .page {
height: unset !important;
min-height: 100vh;
}

.page .vbox {
    justify-content: initial;
}

/* GeoCeKid vbox Breite Fixieren und umbrechen + neue halbe Breite */
.vbox.phone-width {
min-width: 350px;
    max-width: 350px;
}
/* Halbe Breite */
.vbox.phone-width.half {
min-width: 175px;
max-width: 175px;
}

@media screen {
    .hbox,
    .vbox,
    .box,
    .card {
        flex-wrap: wrap;
        height: auto;
    }
    .v100,
    .full-height,
    .height-100 {
        height: auto;
        min-height: 100vh;
    }
    .card>.box.horizontal,
    .card>.hbox {
        margin-top: 1em;
        margin-bottom: 1em;
    }
    .hbox.nowrap,
    .box.nowrap,
    .card.nowrap {
        flex-wrap: nowrap;
    }
}

SirMarco

#97
26 November 2017, 14:41:53 Letzte Bearbeitung: 26 November 2017, 14:48:12 von SirMarco
Geniales Design  :)

Passe meins auch gerade an. Mit einer Dropdown auswahl habe ich gerade optische Probleme. Vielleicht kann jemand helfen.
Der "<section>" Bereich wird nicht gross genug beim öffnen des Dropdown


Code Auswählen
<!DOCTYPE html>
<html>
<head></head>
<body>
<div class="page" id="content_wohnzimmer">
<div class="hbox">
<div class="vbox phone-width">
<div class="card lift">
<header>Christmas</header>
<section>
<div class="sheet">
<div class="row">
<div class="cell-1-2">
<div class="left-align left-space" onclick="if ($('#dropturm').is(':hidden')) { $('#dropturm').slideDown(250); $('#dropdownturm > i.fa').addClass('fa-rotate-180'); } else { $('#dropturm').slideUp(250); $('#dropdownturm > i.fa').removeClass('fa-rotate-180'); }"
id="dropdownturm">Turm
<i class="fa fa-angle-double-down big cell"></i>
</div>
</div>
<div class="cell-1-4 small right-align"
data-type="push"
data-device="Turm"
data-set="ct"
data-set-on="380"
data-icon="fa-paint-brush"
data-off-background-color="#FFFFFF">
</div>
<div class="cell-1-4">
<div class="small right-align right-space"
data-type="switch"
data-device="Turm"
data-get="state"
data-get-on="!off"
data-get-off="off"
data-set-on="on"
data-set-off="off"
data-on-color="#eee"
data-off-color="#eee">
</div>
</div>
</div>
</div>
<div id="dropturm">
<div class="sheet">
<div class="row">
<div class="cell-12">
<div data-type="push"
data-set="rgb"
data-device="Turm"
data-set-on="D6FF6D"
data-icon="fa-paint-brush"
data-off-background-color="#D6FF6D"
class="tiny">
</div>
</div>
<div class="cell-12">
<div data-type="push"
data-set="rgb"
data-device="Turm"
data-set-on="B28CFD"
data-icon="fa-paint-brush"
data-off-background-color="#B28CFD"
class="tiny">
</div>
</div>
<div class="cell-12">
<div data-type="push"
data-set="rgb"
data-device="Turm"
data-set-on="99D2EF"
data-icon="fa-paint-brush"
data-off-background-color="#99D2EF"
class="tiny">
</div>
</div>
<div class="cell-12">
<div data-type="push"
data-set="rgb"
data-device="Turm"
data-set-on="6795FC"
data-icon="fa-paint-brush"
data-off-background-color="#6795FC"
class="tiny">
</div>
</div>
<div class="cell-12">
<div data-type="push"
data-set="rgb"
data-device="Turm"
data-set-on="FFC12B"
data-icon="fa-paint-brush"
data-off-background-color="#FFC12B"
class="tiny">
</div>
</div>
<div class="cell-12">
<div data-type="push"
data-set="rgb"
data-device="Turm"
data-set-on="ct"
data-icon="fa-paint-brush"
data-off-background-color="#FFFFFF"
class="tiny">
</div>
</div>
</div>
<div class="row">
<div class="cell-12">
<div class="tiny">Grün</div>
</div>
<div class="cell-12">
<div class="tiny">Lila</div>
</div>
<div class="cell-12">
<div class="tiny">Blau</div>
</div>
<div class="cell-12">
<div class="tiny">Türkis</div>
</div>
<div class="cell-12">
<div class="tiny">Gelb</div>
</div>
<div class="cell-12">
<div class="tiny">Kaltweiss</div>
</div>
</div>
<div class="row">
<div class="cell-12">
<div data-type="push"
data-device="HUEDevice4"
data-set="bri"
data-set-on="90"
data-set-on="6795FC"
data-get-off="!on"
data-on-color="green"
data-icon="white"
data-off-background-color="#6795FC"
class="tiny white">
<div data-type="label" class="tiny white">30</div>
</div>
</div>
<div class="cell-12">
<div data-type="push"
data-device="HUEDevice4"
data-set="bri"
data-set-on="140"
data-set-on="6795FC"
data-get-off="!on"
data-on-color="green"
data-icon="transparent"
data-off-background-color="#6795FC"
class="tiny">50
<div data-type="label" class="tiny white">60</div>
</div>
</div>
<div class="cell-12">
<div data-type="push"
data-device="HUEDevice4"
data-set="bri"
data-set-on="200"
data-set-on="6795FC"
data-get-off="!on"
data-on-color="green"
data-icon="transparent"
data-off-background-color="#6795FC"
class="tiny">75
<div data-type="label" class="tiny white">75</div>
</div>
</div>
<div class="cell-12">
<div class="tiny">Türkis</div>
</div>
<div class="cell-12">
<div class="tiny">Gelb</div>
</div>
<div class="cell-12">
<div class="tiny">Kaltweiss</div>
</div>
</div>
</div>
</div>
</section>
</div>
<div class="card lift">
<header>Wetter</header>
</div
</div>
</div>
</body>
</html>

magentouser

#98
04 Dezember 2017, 14:47:12
hallo, erst mal vielen dank für die arbeit, habe soweit auch alles gut eingebaut.

aber wie schaffe ich es das wenn ich die index aufrufe das dort z.b. content_home direkt aufgerufen wird?

eppi

#99
04 Dezember 2017, 19:06:15
Zitat von: magentouser am 04 Dezember 2017, 14:47:12
aber wie schaffe ich es das wenn ich die index aufrufe das dort z.b. content_home direkt aufgerufen wird?
Ich mache das so:
Code Auswählen
http://192.168.x.x:808x/fhem/ftui/index.html#content_home.html

choetzu

#100
04 Dezember 2017, 22:31:54
hallo, ich bin begeistert und hab schon einiges umgebaut ;)

gibt es eine Möglichkeit, dass auch bei Tablets resp. Desktop die Menuleiste links nur eingeblendet wird, wenn man darauf klickt. Also wie in der Mobile Version?
Raspi3, EnOcean, Zwave, Homematic

magentouser

#101
05 Dezember 2017, 07:51:34
@eppi

derzeit auch, bzw ohne index /fhem/ftui/#content_.. aber schöner wäre der direkte Aufruf nur über die Index.

choetzu

#102
05 Dezember 2017, 12:33:12
Zitat von: eppi am 04 Dezember 2017, 19:06:15
Ich mache das so:
Code Auswählen
http://192.168.x.x:808x/fhem/ftui/index.html#content_home.html

ich mache es so, indem ich im class ein "default" hinzufüge

Code Auswählen
<div data-type="link" data-url="#content_home.html"
data-color="white"
data-active-color="blue"
data-width="115"
data-load="#content_home"
data-text-align="left"
data-active-pattern="(.*index.html|.*#content_home.html)"
data-icon="fa-home" class="large default"><span>Home</span></div>
</li>


friendly reminder: wie schalte ich die nav bar links aus bei Tablet und Desktop... Analog iphone
Raspi3, EnOcean, Zwave, Homematic

Standarduser

#103
05 Dezember 2017, 21:36:03
Zitat von: choetzu am 05 Dezember 2017, 12:33:12
friendly reminder: wie schalte ich die nav bar links aus bei Tablet und Desktop... Analog iphone

Die genaue Lösung habe ich gerade nicht parat, aber ich meine das geht über einen Wert im CSS. Dabei wird eingestellt, ab welcher Bildschirmbreite das Menü immer angezeigt wird. Diesen Wert müsstest du vergrößern.
Vielleicht hilft Dir das ja schon weiter.

eppi

#104
06 Dezember 2017, 19:48:04
Zitat von: choetzu am 05 Dezember 2017, 12:33:12
ich mache es so, indem ich im class ein "default" hinzufüge
Sehr elegante Lösung, Danke für den Hint!
Drucken
Nach oben Seiten 1 ... 5 6 7 8 9 ... 12
Benutzer-Aktionen