Einträge sortieren
bearbeitet von AugeHallo
> Die Sortierlinks haben bei mir typisches "link-Verhalten". Die schon besuchten sind offenbar farblich anders (hellgrau) als die noch nicht besuchten (blau) und die aktiven (dunkelgrau). Das find ich nicht unbedingt geschickt... Die Sortierpfeile sind Bedienelemente und während es sinnvoll ist, den aktiven deutlich zu markieren (das deutlich auffälligere blau der unbesuchten Links fände ich hier angebracht) erscheint es mir nicht sinnvoll, bei Bedienelementen visuell zwischen schon besuchten und noch nicht besuchten zu unterscheiden. Das sollte imho noch so geändert werden, dass besuchte und unbesuchte exakt gleich dargestellt werden (wobei ich meine aus dem CSS herauszulesen, dass das auch irgendwie so gedacht war, oder irre ich mich?).
Da die meisten Bedienelemente hier im Forum optisch als Buttons dargestellt werden, sollte das auch für die Sortierer gelten. Ich habe mir die CSS-Regeln für die Hauptnavigation des Forums („neuen Beitrag verfassen“, „Hauptseite“, etc.) rausgesucht und sie auf die Sortierer übertragen. Ob jede der Angaben, die ursprünglich getrennt für die Li-Elemente und die A-Elemente gelten, in der hiesigen Kombination der Angaben sinnvoll ist [^1], sei dahingestellt.
Getestet habe ich das allerdings nur auf dem Desktopbrowser (Firefox).
![Entwurf der Sortierbuttons](/images/917a9693-4b7f-44fa-a530-9887e5141569.png)
~~~css
th a.sortable {
background-color: #f1f3f4;
border: 1px solid #d5d5d5;
border-radius: 0 0.4em 0.4em;
display: inline-block;
font-size: 80%;
font-weight: normal;
margin-top: 0.3em;
padding: 0;
color: #3481cd;
line-height: 2em;
padding: 0.1em 0.3em; /* gegenüber den Originalangaben verkleinert, war mir zu massiv */
}
th a.sortable.active {
background-color: #2c7dd3;
border: 0 none;
color: #fff;
font-weight: bold;
}
~~~
**[edit]**Wie ich gerade sehe, habe ich die Angaben für `a:focus`{: .language-css}, `a:hover`{: .language-css} und, falls vorhanden `a:active`{: .language-css} nicht gesetzt. Wird nachgeliefert.**[/edit]**
Tschö, Auge
[^1]: Da ist z.B. in `th a.sortable`{: .language-css} einmal `padding: 0;`{: .language-css} aus den Angaben für `nav ul li`{: .language-css} und einmal das Derivat `padding: 0.1em 0.3em;`{: .language-css} aus den Angaben für `nav ul a:link`{: .language-css} (ursprünglich `padding: 0.4em 0.6em;`{: .language-css}).
--
Es schimmerte ein Licht am Ende des Tunnels und es stammte von einem Flammenwerfer.
Terry Pratchett, „Gevatter Tod“
Einträge sortieren
bearbeitet von AugeHallo
> Die Sortierlinks haben bei mir typisches "link-Verhalten". Die schon besuchten sind offenbar farblich anders (hellgrau) als die noch nicht besuchten (blau) und die aktiven (dunkelgrau). Das find ich nicht unbedingt geschickt... Die Sortierpfeile sind Bedienelemente und während es sinnvoll ist, den aktiven deutlich zu markieren (das deutlich auffälligere blau der unbesuchten Links fände ich hier angebracht) erscheint es mir nicht sinnvoll, bei Bedienelementen visuell zwischen schon besuchten und noch nicht besuchten zu unterscheiden. Das sollte imho noch so geändert werden, dass besuchte und unbesuchte exakt gleich dargestellt werden (wobei ich meine aus dem CSS herauszulesen, dass das auch irgendwie so gedacht war, oder irre ich mich?).
Da die meisten Bedienelemente hier im Forum optisch als Buttons dargestellt werden, sollte das auch für die Sortierer gelten. Ich habe mir die CSS-Regeln für die Hauptnavigation des Forums („neuen Beitrag verfassen“, „Hauptseite“, etc.) rausgesucht und sie auf die Sortierer übertragen. Ob jede der Angaben, die ursprünglich getrennt für die Li-Elemente und die A-Elemente gelten, in der hiesigen Kombination der Angaben sinnvoll ist [^1], sei dahingestellt.
Getestet habe ich das allerdings nur auf dem Desktopbrowser (Firefox).
![Entwurf der Sortierbuttons](/images/917a9693-4b7f-44fa-a530-9887e5141569.png)
~~~css
th a.sortable {
background-color: #f1f3f4;
border: 1px solid #d5d5d5;
border-radius: 0 0.4em 0.4em;
display: inline-block;
font-size: 80%;
font-weight: normal;
margin-top: 0.3em;
padding: 0;
color: #3481cd;
line-height: 2em;
padding: 0.1em 0.3em; /* gegenüber den Originalangaben verkleinert, war mir zu massiv */
}
th a.sortable.active {
background-color: #2c7dd3;
border: 0 none;
color: #fff;
font-weight: bold;
}
~~~
Tschö, Auge
[^1]: Da ist z.B. in `th a.sortable`{: .language-css} einmal `padding: 0;`{: .language-css} aus den Angaben für `nav ul li`{: .language-css} und einmal das Derivat `padding: 0.1em 0.3em;`{: .language-css} aus den Angaben für `nav ul a:link`{: .language-css} (ursprünglich `padding: 0.4em 0.6em;`{: .language-css}).
--
Es schimmerte ein Licht am Ende des Tunnels und es stammte von einem Flammenwerfer.
Terry Pratchett, „Gevatter Tod“