Neuer Style: f18

[DasQ]

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

[choetzu]

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?

[heikoh81]

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]

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.

[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...

[rudolfkoenig]

Braucht ihr apptime nicht?

Natuerlich nicht, ich habe sogar Schwierigkeiten, es zu bedienen

Ich 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]

<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)

Code: [Auswählen]

<!-- 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.

[choetzu]

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?

Code: [Auswählen]

@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;
}

[DasQ]

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.

Code: [Auswählen]

#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.

[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]

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..

[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.

[xanker]

- 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.

[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]

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