Hauptmenü

Neuer Style: f18

Begonnen von rudolfkoenig, 07 Januar 2018, 14:51:18

Vorheriges Thema - Nächstes Thema

DasQ

#375
also ich bin ein kleines stückchen weiter.
und zwar ist der effekt nur bei plots die in einer "group" sind.
Tritt bei Android wie bei IOS handys auf.

und es wird so weit ich des seh, das css(style) aus dem svg verwendet, dann vom f18 css überschrieben aber bei switch von landscape auf portait klappt was nicht


btw. hab ich dafür gleich noch was neues entdeckt was aber browser spezifisch safarie betrifft, und zwar ist dort der + button oben zwischen eingabezeile und fhemsicon nicht fixed und schwimmt beim scrollen wundschön mit. (mal schaun was das genau ist)

ich merk schon da kommt noch mehr
Fhem on MacMini/Ubuntu.
Absoluter Befürworter der Konsequenten-Kleinschreibung https://de.wikipedia.org/wiki/Kleinschreibung
Infos zu Klimawandel http://www.globalcarbonatlas.org

choetzu

Zitat von: choetzu am 07 April 2019, 14:30:37
Hallo,

ich finde das f18 wirklich klasse. Gefällt mir gut, auch wenn ich leider kein CSS Experte bin. ich habe schon einiges "gelernt". Frage: wie habt ihr die Darstellung bei "apptime" gelöst? Bei mir kommt es leider es was "scheps" rüber, siehe Bild.

Und dann noch eine Frage: Was muss ich im CSS eingeben, damit das Width-handling des Contents analog dem dark-layout ist. Bei F18 ist es immer über die ganze Breite, dies will ich im Desktop Modus nicht.

Danke für die Hilfe

lg c.

Braucht ihr apptime nicht?
Raspi3, EnOcean, Zwave, Homematic

heikoh81

Zitat von: heikoh81 am 09 Januar 2019, 21:32:14
Aber: Ich habe mich in den letzten 5 Jahren an das alte Layout sehr gewöhnt, so dass ich vieles fast blind finde.

Update:
Ich habe nun wieder f18 aktiviert.
Das klassische Design verursacht bei mir seit Firefox 66.0.4 auf einem Nexus7 (2012) mit LineageOS (Android 7.irgendwas) Darstellungsprobleme.
Keine Probleme mit Chrome.
Und zwar, wenn ich auf das Menü heranzoome, um etwas auszuwählen, gehen meine Finger-Tipper ins Leere bzw. eine andere Group wird aufgerufen.

Zum Glück gibt es f18, so konnte ich die Darstellung wechseln und die funktioniert auch auf Firefox 66.0.4.
Keine Ahnung was die in der Rendering-Engine geändert haben, aber ich war wegen des Addon-Zertifikat-Problems zum Update von Firefox gezwungen...

Viele Grüße,
Heiko

choetzu

Zitat von: choetzu am 16 April 2019, 22:40:27
Braucht ihr apptime nicht?
Sorry, wenn ich so penetrant auf der Darstellung von apptime rumreite. Ich versuche es auch gerne selber zu lösen, jedoch weiss ich nicht wo genau der css code von apptime zu finden ist. Danke für die Hilfe.
Raspi3, EnOcean, Zwave, Homematic

DasQ

schon mal versucht das element zu analysieren? (Browser F12 --> Inspektor? (1 im screenshot))
da steht normalerweise welche css datei im augenblick zieht(2). grundvorrausgesetzt, man hat nenn plan von selektoren und ihrer wertigkeit...
Fhem on MacMini/Ubuntu.
Absoluter Befürworter der Konsequenten-Kleinschreibung https://de.wikipedia.org/wiki/Kleinschreibung
Infos zu Klimawandel http://www.globalcarbonatlas.org

rudolfkoenig

ZitatBraucht ihr apptime nicht?
Natuerlich nicht, ich habe sogar Schwierigkeiten, es zu bedienen :)

ZitatIch versuche es auch gerne selber zu lösen, jedoch weiss ich nicht wo genau der css code von apptime zu finden ist.
Ich gehe davon aus, das apptime keinen eigenen CSS Eintrag hat.

Rückgabewerte von FHEM Befehlen werden von FHEMWEB in <pre> ausgegeben, seit "immer", das ist nicht f18 spezifisch.
Grob vereinfacht ist <pre> "Terminal-Ausgabe", bei dir scheint der Font fuer <pre> proportional zu sein, deswegen schaut es "scheps" aus.
In meiner unmodifizierten f18 ist die Ausgabe mAn OK, font-family ist monospace.

DasQ

#381
<pre> ist vorformartierter Text


ach ja das mit dem zerhagelten SVG Plot kommt aus den plots selber.
id="gr_bg" wird verbogen


nach dem drehen des devices. (handy, tablet, whatever)

<!-- will be included in each svg plot -->
<defs>
  <linearGradient id="gr_bg" x1="0%" y1="0%" x2="0%" y2="100%">
    <stop offset="0%" style="stop-color:#FFFFF7; stop-opacity:1"/>      <----------------- HIER
    <stop offset="100%" style="stop-color:#FFFFC7; stop-opacity:1"/>  <----------------- HIER
  </linearGradient>

  <linearGradient id="gr_0" x1="0%" y1="0%" x2="0%" y2="100%">
    <stop offset="0%" style="stop-color:#f00; stop-opacity:.6"/>
    <stop offset="100%" style="stop-color:#f88; stop-opacity:.4"/>
  </linearGradient>

  <linearGradient id="gr_1" x1="0%" y1="0%" x2="0%" y2="100%">
    <stop offset="0%" style="stop-color:#291; stop-opacity:.6"/>
    <stop offset="100%" style="stop-color:#8f7; stop-opacity:.4"/>
  </linearGradient>

  <linearGradient id="gr_2" x1="0%" y1="0%" x2="0%" y2="100%">
    <stop offset="0%" style="stop-color:#00f; stop-opacity:.6"/>
    <stop offset="100%" style="stop-color:#88f; stop-opacity:.4"/>
  </linearGradient>

  <linearGradient id="gr_3" x1="0%" y1="0%" x2="0%" y2="100%">
    <stop offset="0%" style="stop-color:#f0f; stop-opacity:.6"/>
    <stop offset="100%" style="stop-color:#f8f; stop-opacity:.4"/>
  </linearGradient>

  <linearGradient id="gr_4" x1="0%" y1="0%" x2="0%" y2="100%">
    <stop offset="0%" style="stop-color:#ff0; stop-opacity:.6"/>
    <stop offset="100%" style="stop-color:#ff8; stop-opacity:.4"/>
  </linearGradient>

  <linearGradient id="gr_5" x1="0%" y1="0%" x2="0%" y2="100%">
    <stop offset="0%" style="stop-color:#0ff; stop-opacity:.6"/>
    <stop offset="100%" style="stop-color:#8ff; stop-opacity:.4"/>
  </linearGradient>

  <linearGradient id="gr_6" x1="0%" y1="0%" x2="0%" y2="100%">
    <stop offset="0%" style="stop-color:#000; stop-opacity:.6"/>
    <stop offset="100%" style="stop-color:#ccc; stop-opacity:.4"/>
  </linearGradient>

  <pattern id="gr0_stripe" width="4" height="4" patternUnits="userSpaceOnUse" patternTransform="rotate(-45 2 2)">
      <path d="M -1,2 l 6,0" stroke="#f00" stroke-width="0.5"/>
  </pattern>

  <pattern id="gr1_stripe" width="4" height="4" patternUnits="userSpaceOnUse" patternTransform="rotate(45 2 2)">
      <path d="M -1,2 l 6,0" stroke="green" stroke-width="0.5"/>
  </pattern>

  <linearGradient id="gr0_gyr" x1="0%" y1="0%" x2="0%" y2="100%">
    <stop offset="0%" style="stop-color:#f00; stop-opacity:.6"/>
    <stop offset="50%" style="stop-color:#ff0; stop-opacity:.6"/>
    <stop offset="100%" style="stop-color:#0f0; stop-opacity:.6"/>
  </linearGradient>


so wie auf den screenshot sollte es sein.
Fhem on MacMini/Ubuntu.
Absoluter Befürworter der Konsequenten-Kleinschreibung https://de.wikipedia.org/wiki/Kleinschreibung
Infos zu Klimawandel http://www.globalcarbonatlas.org

choetzu

Zitat von: rudolfkoenig am 30 Mai 2019, 09:16:27
Natuerlich nicht, ich habe sogar Schwierigkeiten, es zu bedienen :)
Ich gehe davon aus, das apptime keinen eigenen CSS Eintrag hat.

Rückgabewerte von FHEM Befehlen werden von FHEMWEB in <pre> ausgegeben, seit "immer", das ist nicht f18 spezifisch.
Grob vereinfacht ist <pre> "Terminal-Ausgabe", bei dir scheint der Font fuer <pre> proportional zu sein, deswegen schaut es "scheps" aus.
In meiner unmodifizierten f18 ist die Ausgabe mAn OK, font-family ist monospace.

Herzlichen Dank. D.h. Es hängt also an der Schrift. Ist es die Schrift an sich oder so wie ich es konfiguriert habe?

@import url('https://fonts.googleapis.com/css?family=Roboto:300,300i,400,400i,500,500i,700,700i,900,900i');

html, body, html * {
  font-family: 'Roboto';
}

@font-face {
  font-style: normal;
  font-weight: 300;
}
Raspi3, EnOcean, Zwave, Homematic

DasQ

Zitat von: DasQ am 07 April 2019, 15:15:10
btw. hab ich dafür gleich noch was neues entdeckt was aber browser spezifisch safarie betrifft, und zwar ist dort der + button oben zwischen eingabezeile und fhemsicon nicht fixed und schwimmt beim scrollen wundschön mit. (mal schaun was das genau ist)

Lösung:
also mit fixed schwimmt der button nicht mehr.
#textInput { position: fixed; top:6.5px; left:40px; width:32px; height:32px; }
zeile 15 in f18style.css

jetzt muss ich mal schaun in wieweit sich das wo anders auswirkt.
Fhem on MacMini/Ubuntu.
Absoluter Befürworter der Konsequenten-Kleinschreibung https://de.wikipedia.org/wiki/Kleinschreibung
Infos zu Klimawandel http://www.globalcarbonatlas.org

rudolfkoenig

textInput hat in f18style.css im Block ab Zeile 222 gefehlt, das habe ich jetzt hinzugefuegt.
Gemerkt habe ich es jetzt nur beim uebermaessiges nach oben scrollen im Safari.

choetzu

Zitat von: rudolfkoenig am 30 Mai 2019, 09:16:27
Grob vereinfacht ist <pre> "Terminal-Ausgabe", bei dir scheint der Font fuer <pre> proportional zu sein, deswegen schaut es "scheps" aus.
In meiner unmodifizierten f18 ist die Ausgabe mAn OK, font-family ist monospace.

bei mir sieht es auch mit font-family "monospace" ziemlich "scheps" aus...  naja, irgendwo muss der Uebeltäter sitzen.. Da ich z.Z. mein System ziemlich stark überwache (Sonos eiert rum), schau ich regelmässig auf Apptime...

EDIT: und im übrigen auch, wenn ich gar kein additional CSS mache... komisch..
Raspi3, EnOcean, Zwave, Homematic

willib

Ich bin nicht sicher ob das an f18 liegt.
Ich bekomme wenn ich auf einem meiner mobilen Geräte unter Chrome in den def editor tippe sehr häufig folgende Meldung.
FHEM in Debian 10 LXC unter Proxmox auf NUC, Homematic, Hue, Intertechno, Jeelink, RFXTRX, Harmony Hub, VU+ Uno 4K, Sonos, AMAD

xanker

#387
Zitat von: rudolfkoenig am 07 Januar 2018, 14:51:18
- im commandref werden die Farben nicht angewendet
Das liegt daran, dass beim Commandref die JS Dateien nicht geladen werden. Könnte man das noch ins FHEMWEB einbauen? Bräuchte ich nämlich auch für meinen Style.
Maintainer vom flex Style.
Intel NUC mit fhem in Docker Container | Homematic | SIGNALduino 433MHz | HUE Bridge | Harmony HUB | lepresenced | alexa-fhem ...

rudolfkoenig

Dass es daran liegt, ist offensichtlich, und auch f18 wuerde den Hintergrund gerne setzen, der Aufwand war mir aber bisher nicht Wert.

Bei einer Anpassung muss man bedenken:
- commandref.html und commandref_modular sind fuer FHEMWEB "normale" Dateien, die per streaming ausgeliefert werden.
- der Code muss auch fuer die statische Varianten (fhem.de/commandref.html) und fuer Styles ohne .js funktionieren.

xanker

Zitat von: rudolfkoenig am 27 Juli 2019, 12:12:49
Dass es daran liegt, ist offensichtlich, und auch f18 wuerde den Hintergrund gerne setzen, der Aufwand war mir aber bisher nicht Wert.

Bei einer Anpassung muss man bedenken:
- commandref.html und commandref_modular sind fuer FHEMWEB "normale" Dateien, die per streaming ausgeliefert werden.
- der Code muss auch fuer die statische Varianten (fhem.de/commandref.html) und fuer Styles ohne .js funktionieren.
Danke für die Antwort, ich kann auch so damit leben, da ich die lokale commandref eh nie nutze :)
Maintainer vom flex Style.
Intel NUC mit fhem in Docker Container | Homematic | SIGNALduino 433MHz | HUE Bridge | Harmony HUB | lepresenced | alexa-fhem ...