iOS 7 Stylesheet

[fhainz]

Hallo!

Ich hab mir heute ein passendes Stylesheet für das kommende iOS 7 gebastelt (Browser, Tablet, Smartphone mach ich noch). Bei Interesse stelle ich es gerne zu Verfügung.

Grüße

(siehe Anhang / see attachement)

[T.ihmann]

Cooles Design. Am besten per Update verteilen.

[fhainz]

Gibt's irgendwo eine Anleitung wie ich das mache? Hab schon gesucht aber wenig gefunden.

[UliM]

Gibt's irgendwo eine Anleitung wie ich das mache? Hab schon gesucht aber wenig gefunden.

Hi,
dazu müssen alle relevanten Dateien in SVN eingecheckt werden.
- SVN-user besorgen
- an Rudi mailen
- der Deinen user dann für den fhem-Bereich mit Schreibrechten versieht
- dann mit SVN-client hochladen

..oder per PN an mich, dann kann ich's einchecken - vorausgesetzt Du übernimmst "Wartung".

Gruß, Uli

PS: Sieht klasse aus :)

[Andi]

Top! Ich würde es gerne verwenden ;-)

[rudolfkoenig]

>  Bei Interesse stelle ich es gerne zu Verfügung.

Bitte hier posten, ich checke es dann ein.

[fhainz]

Freut mich das es euch gefällt.
Werde in den kommenden Tagen noch ein wenig dran arbeiten eventuell geht sich noch die smartphone version aus. Mal schauen im Job ist derzeit viel los. Ich poste es dann in ein paar Tagen hier!

Grüße

[fhainz]

Hallo!

Die erste Version ist fertig. Wenn euch etwas auffällt was noch nicht passt, bitte hier posten. Ich versuch das dann zu beheben.
Es gibt eigene Versionen für Browser, Tablet und Smartphone.

Die angehängten Fotos sind aus der iPhone/Smartphone Version unter iOS 7, oben findet ihr den Browser bzw Tablet Style.

Grüße


(siehe Anhang / see attachement)
(siehe Anhang / see attachement)

[rudolfkoenig]

Habe alles unter dem Namen ios7 eingecheckt.
Etwas problematisch finde ich, dass die links nicht vom normalen Text zu unterscheiden sind.

[fhainz]

Etwas problematisch finde ich, dass die links nicht vom normalen Text zu unterscheiden sind.

Das ist teils bewusst, teils nicht so einfach möglich da nicht jede(r) Link(gruppe) eine andere Klasse oder eine eigene id hat. Wenn jede Gruppe von Links eine eigene Klasse hätte (zB. <a class="menu">, <a class="block">, <a class="details"> <a class="editFiles">, etc.) dann wäre das Stylen um einiges leichter.

Das Menü, die Aktor Namen und on/off Links wollte ich nicht einfärben da mir das sonst auf weißem Hintergrund zu bunt ist. Die "Probably associated with" Links wollte ich einfärben klappt aber nicht da sie die gleiche table-class haben wie die on/off Links. Ansonsten hab ich Versucht alle Links blau einzufärben. zB Save fhem.cfg, Save as, Plot Links und in den Details sind fast alle Links färbig.

Aber du hast schon recht, Links die man nicht sofort als Link erkennt (zB Temp/Hum, text bei Temp Logs) sollten anders dargestellt werden. Ich gug mir das nochmal an, vielleicht kann ich da noch etwas optimieren.

Danke fürs einchecken!

Grüße

[rudolfkoenig]

> Wenn jede Gruppe von Links eine eigene Klasse hätte

Ich sehe keine Schwierigkeit allen Tabellen eine weitere eindeutige Klasse hinzuzufuegen, wenn Du alle aufzaehlst, die benoetigt werden. In der Raumansicht hat ja bereits jede Tabelle einen eindeutigen ID, das ist ein Uebrigbleibsel aus der Zeit, wo FHEMWEB bunter war.

[fhainz]

Hallo!

Danke, das find ich klasse!
Ich schreib mal meine Vorstellungen. Die Namen für die Klassen sind jetzt nicht die besten, ich weiß, wenn du Vorschläge hast die besser passen nur her damit!

Block:

<table>
<tr><td class="devType"><div class="devType">Licht</div></td></tr>
<tr><td>
<table class="block wide" id="TYPE_Licht">

<tr class="odd">
<td class="blockCol1"><a href="/fhem?detail=wzDeckenfluter"><div class="col1"><svg class="icon light_floor_lamp" ... </svg>&nbsp;Deckenfluter</div></a></td>
<td class="blockCol2" informId="wzDeckenfluter"><a onClick="FW_cmd('/fhem?XHR=1&cmd.wzDeckenfluter=set wzDeckenfluter on&room=1_Wohnzimmer')"> ... </a></td>
<td class="blockCol3"><a href="/fhem?cmd.wzDeckenfluter=set wzDeckenfluter on&amp;room=1_Wohnzimmer"><div class="col3">on</div></a></td>
<td class="blockCol4"><a href="/fhem?cmd.wzDeckenfluter=set wzDeckenfluter off&amp;room=1_Wohnzimmer"><div class="col3">off</div></a></td>
</tr>

Logs:

<td class="log" informId="FileLog_wzBalkonFenster"><table class="wide"><tr class=""><td class="logName"><div class="dname">wzBalkonFenster-2013.log</div></td><td class="logValue"><a href="/fhem?cmd=logwrapper FileLog_wzBalkonFenster fht80tf wzBalkonFenster-2013.log"><div class="dval"><div class="dval">Window</div></div></a></td><td class="logValue"><a href="/fhem?cmd=logwrapper FileLog_wzBalkonFenster text wzBalkonFenster-2013.log"><div class="dval"><div class="dval">text</div></div></a></td></tr></table></td>

Plot Steuerung:

<div class="plotControl">
&nbsp;&nbsp;<a href="/fhem?room=1_Wohnzimmer&amp;pos=zoom=qday;off=0"><svg class=" Zoom-in" version="1.0" xmlns="http://www.w3.org/2000/svg"  width="468pt" height="470pt" viewBox="0 0 468 470"  preserveAspectRatio="xMidYMid meet"> <metadata> Created by potrace 1.8, written by Peter Selinger 2001-2007 </metadata> ...
</div>

Plots:

<div class="plot">
<br><a href="/fhem?detail=weblink_fhtWohnzimmer">Plot Heizung Wohnzimmer</a><br> ...
</div>

Wetter:

<table class="weather"><tr><th width=87></th><th></th></tr><tr><td class="weatherIcon" width=87><img src="/fhem/icons/weather/mostlycloudy" width=87 alt="mostlycloudy"></td><td class="weatherValue">überwiegend wolkig<br>25°C  57%<br>Wind: O 13 km/h</td></tr><tr><td class="weatherIcon" width=87><img src="/fhem/icons/weather/heavyrain" width=87 alt="heavyrain"></td><td class="weatherValue">Mi: Gewitterregen<br>min 18°C max 27°C</td></tr><tr><td class="weatherIcon" width=87><img src="/fhem/icons/weather/partly_cloudy" width=87 alt="partly_cloudy"></td><td class="weatherValue">Do: teilweise wolkig<br>min 17°C max 31°C</td></tr><tr><td class="weatherIcon" width=87><img src="/fhem/icons/weather/scatteredthunderstorms" width=87 alt="scatteredthunderstorms"></td><td class="weatherValue">Fr: einzelne Gewitter<br>min 19°C max 32°C</td></tr><tr><td class="weatherIcon" width=87><img src="/fhem/icons/weather/partly_cloudy" width=87 alt="partly_cloudy"></td><td class="weatherValue">Sa: teilweise wolkig<br>min 19°C max 33°C</td></tr><tr><td class="weatherIcon" width=87><img src="/fhem/icons/weather/sunny" width=87 alt="sunny"></td><td class="weatherValue">So: sonnig<br>min 20°C max 37°C</td></tr></table>

FileList:

<div id="content"><table><tr><td>
<div class="fileType">config file</div><br>
<table class="block fileList">
<tr class="even">
<td class="fileList"><a href="/fhem?cmd=style edit fhem.cfg"><div>fhem.cfg</div></a></td>
</tr>
</table>
<br>
<div class="fileType">Own modules and helper files</div><br>
...
...
...

Menü:

<tr><td><table class="room roomSave">
<tr><td><a href="/fhem?cmd=save"><div>
...
...
<tr><td><table class="room roomSpacer">
</table></td></tr>

<tr><td><table class="room roomBlock1">
<tr><td class="roomBlock1"><a href="/fhem?room=1_Wohnzimmer"><div><svg ...
...
...
<tr><td><table class="room roomBlock2 ">
<tr><td class="roomBlock2"><a href="/fhem?cmd=logwrapper%20Logfile%20text%20fhem-2013-07.log"><div>...
..
...
<tr><td><table class="roomBlock3">
<tr><td class="roomBlock3">  Eigene Links ....

So.. ich denke das war's :D Was meinst du dazu?

Grüße

[rudolfkoenig]

> Ich schreib mal meine Vorstellungen

ist mehr als ich dachte, und exakt umzusetzen wuerde unverhaeltnissmaessig viel Aufwand bedeuten. Ich habe aber eine Runde hinter mir, ich hoffe es hilft schon mal weiter.

Block:
Danke fuer den indirekten Hinweis, da war ein Bug. Statt td a div muss es natuerlich td div a heissen, und da die divs meist eine Klasse haben, kann man die a's ueber den Vater-Div einfaerben. Ich vermute das loest einige der nachfolgenden Probleme auch.

Logs:
Die Tabelle hat eine Klasse FileLog bekommen, zusammen mit dem div/a Umkehr sollte das reichen.

Plot Steuerung:
die Klasse heisst plotEditor

Plot:
die Klasse nennt sich SVGplot

Wetter:
ist nicht meine Baustelle, bitte den Modulauthor (Boris) ansprechen

FileList:
Ueberschrift hat jetzt auch ein div fileList (wie die Tabelle), der Rest ist mAn nicht notwendig, da in der fileList Tabelle.

Menue:
roomBlock habe ich eingefuegt, save kann FHEMWEB nicht einfach unterscheiden, ist aber normalerweise roomBlock1. Die Trennertabelle war bug, ist rausgeflogen.

[fhainz]

Es ging mir jetzt primär nicht nur um die Links einfärben. Ich will auch gewissen spalten einen Rahmen zuweisen, gewissen spalten nicht.  zB will ich in der Block Ansicht bei den Logs, der Spalte in verschachtelten Tabelle keinen rahmen zuweisen. Sieht derzeit nicht so gut aus. Deswegen die ganzen Klassen in den <td>'s. Hatte mir dabei schon etwas überlegt ;)

Aber danke erstmal für deine Mühe, ich schau mir das heut wenn ich zuhause bin nochmal an. Vielleicht schaffen wir da noch etwas ;)


Viele Grüße
Fabian

[Dr. Boris Neubert]

Wetter:
ist nicht meine Baustelle, bitte den Modulauthor (Boris) ansprechen

Ich wußte, daß Du das sagen würdest ;-)

Es steht schon auf meiner Todo-Liste, genauso wie die horizontale Variante des Wettervorhersage-Weblinks.

Viele Grüße
Boris