Feedback restyling knoppen

[boenkeijer]

Zoals in het .plan van iteratie #159 aangekondigd is dit topic voor het melden van knoppen die niet goed worden weergegeven na de restyling van de knoppen.

Als je een complicatie hebt gevonden:

1. Controleer of de knop en locatie nog niet gemeld is.
2. Zet de url in een comment
3. Geef wat meer context: desktop/mobile? Browser? Plaats een screenshot indien mogelijk

Onder de melders verloten we een Mako Driver Kit. Je maakt kans om te winnen als jouw complicatie nog niet eerder vermeld is, de knop niet in een iFrame zit en als het probleem niet door custom-css komt. De win-actie loopt tot 26 juli en de winnaar wordt random geselecteerd.

Bedankt voor jullie hulp!

[ Voor 11% gewijzigd door boenkeijer op 02-07-2019 11:57 ]

[Zvennn]

Zijn hier nog een aantal knoppen die niet de '>>' hebben.
https://tweakers.net/pricewatch/

[Xav]

Dit is bewust, knoppen voor een 'actieve' actie worden niet voorzien van een >>

[P1nGu1n]

De unsorted sectie in de Pricewatch, hier heeft de 'Zoek' knop geen styling:


Eigenlijk ziet deze hele pagina er als 2009 uit

---

De 'clear' knop in je profielinstellingen begint niet met een hoofdletter en is in het Engels:

[ Voor 5% gewijzigd door P1nGu1n op 02-07-2019 17:23 ]

[Fiber]

Zie screenshot:



Het rechthoekje om de tekst schaalt dus niet mee. Boven- en onderaan de pagina in 'Mijn topics' en in 'Actieve topics'

MacOS 10.13.6, Safari 12.1.1

[crisp]

@Fiber even je melding hierheen verplaatst

Ik kan het overigens in Firefox niet reproduceren...

[Fiber]

crisp schreef op dinsdag 2 juli 2019 @ 18:45:
@Fiber even je melding hierheen verplaatst

Ik kan het overigens in Firefox niet reproduceren...

Prima,

Dan is het wellicht een MacOS en/of Safari dingetje...

En, wat ik al eerder zei, het is een schaling dingetje, op 100 procent zijn ze wel goed.

[ Voor 14% gewijzigd door Fiber op 02-07-2019 18:53 ]

[XWB]

Fotoalbum; album met pagination:



Desktop, Chrome versie 75.

[ Voor 47% gewijzigd door XWB op 02-07-2019 18:54 ]

[Reinier]

Hoe moeten we weten welke afwijkende knoppen gemeld moeten/kunnen worden? Ik zie namelijk best veel varianten: blauwe knoppen met witte tekst, witte knoppen met blauwe tekst en rand, grijzige knoppen met een grijze rand (of vinden jullie dit geen knoppen? ):



Deze wijken duidelijk af:

[crisp]

Reinier schreef op dinsdag 2 juli 2019 @ 19:12:
Hoe moeten we weten welke afwijkende knoppen gemeld moeten/kunnen worden? Ik zie namelijk best veel varianten: blauwe knoppen met witte tekst, witte knoppen met blauwe tekst en rand, grijzige knoppen met een grijze rand

Dit zijn de variaties die we hebben:

(of vinden jullie dit geen knoppen? ):

[Afbeelding]

Dat is meer een soort knoppenbalk Maar het valt niet onder deze definitie van knoppen/buttons...

Deze wijken duidelijk af:

[Afbeelding]

Dat is een stukje legacy, maar mag inderdaad ook wel een keer opgefrist worden

[Reinier]

Thanks @crisp!

Dat stukje legacy is onlangs volgens mij qua functionaliteit opgefrist, want het scherm sluit nu vanzelf. Da's volgens mij nieuw. En grappig: ik denk dat een jaar of 10 geleden ook werd gezegd dat die pagina flink vernieuwd zou worden

[Hero of Time]

boenkeijer schreef op dinsdag 2 juli 2019 @ 10:08:
Je maakt kans om te winnen als jouw complicatie nog niet eerder vermeld is, de knop niet in een iFrame zit en als het probleem niet door custom-css komt.

Aw, bummer. Maar opvolgend daarvan:

crisp schreef op dinsdag 2 juli 2019 @ 19:30:
[...]

Dit zijn de variaties die we hebben:
[Afbeelding]

Waarom is er voor de 'witte' knoppen gekozen voor een transparante achtergrond? Mensen zoals ik die met custom css een donker thema maken, hebben hierdoor onleesbare knoppen waar die wordt ingezet (denk aan navigatie met 'volgende', 'vorige' e.d. Voorbeeld:

Kan de styling dan op z'n minst consistent gemaakt worden vergeleken met de andere knoppen door gewoon een achtergrondkleur op te geven? Maakt het voor ons custom css'ers ook iets duidelijker.

[crisp]

Hero of Time schreef op dinsdag 2 juli 2019 @ 20:49:
[...]

Aw, bummer. Maar opvolgend daarvan:

[...]

Waarom is er voor de 'witte' knoppen gekozen voor een transparante achtergrond? Mensen zoals ik die met custom css een donker thema maken, hebben hierdoor onleesbare knoppen waar die wordt ingezet (denk aan navigatie met 'volgende', 'vorige' e.d. Voorbeeld:
[Afbeelding]
Kan de styling dan op z'n minst consistent gemaakt worden vergeleken met de andere knoppen door gewoon een achtergrondkleur op te geven? Maakt het voor ons custom css'ers ook iets duidelijker.

De transparante achtergrond van de buttons is intentioneel; we willen niet dat ze wit afsteken in een grijs vlak zoals bijvoorbeeld bij een product. Het is overigens eenvoudig om ze in je custom css anders te stylen

[Hero of Time]

crisp schreef op dinsdag 2 juli 2019 @ 20:59:
[...]

De transparante achtergrond van de buttons is intentioneel; we willen niet dat ze wit afsteken in een grijs vlak zoals bijvoorbeeld bij een product. Het is overigens eenvoudig om ze in je custom css anders te stylen

Dat het eenvoudig is, is overduidelijk. Maar het valt nu half weg mbt de tekst. Eerst was het netjes een blauwe knop met witte tekst. Prima leesbaar en geen extra aanpassingen nodig. Nu is de achtergrond an sich prima, maar door de blauwe tekst is het contrast erg slecht. Als er een degelijke achtergrondkleur wordt opgegeven, is er voldoende contrast om 't te kunnen lezen en steekt het ook duidelijk af om er iets aan/mee te doen.

De keuze begrijp ik. Maar de uitwerking is nu niet zo mooi.

Btw, over welke knoppen heb je het precies voor de witte vs grijze achtergrondkleur dat er voor transparant is gekozen?

De 'Willen' en 'Hebben' knoppen weet ik dat het niet helemaal lekker gaat, daar heb ik 't ook niet over. Maar bedoelde je het verschil tussen 'Laatste productfilter' en 'prijs volgen'/'vergelijk'?

[ Voor 18% gewijzigd door Hero of Time op 02-07-2019 21:18 ]

[Koozza]

Weet niet of deze uberhaupt in de nieuwe stijl horen te zijn maar: https://tweakers.net/info/advertising/adverteren/ (Zowel desktop als mobiel)

[crisp]

Hero of Time schreef op dinsdag 2 juli 2019 @ 21:05:
[...]

Btw, over welke knoppen heb je het precies voor de witte vs grijze achtergrondkleur dat er voor transparant is gekozen?
[Afbeelding]
De 'Willen' en 'Hebben' knoppen weet ik dat het niet helemaal lekker gaat, daar heb ik 't ook niet over. Maar bedoelde je het verschil tussen 'Laatste productfilter' en 'prijs volgen'/'vergelijk'?

Ja, zowel 'Laatste productfilter' als 'prijs volgen' en 'vergelijk' staan daar (zonder je custom css ) op een grijze achtergrond. Als de button dan een witte achtergrond zou hebben zou die teveel afsteken. Daarom is er gekozen voor een transparante achtergrond voor de secondary buttons zodat deze 'blenden' met de achtergrond. Bij een donkere achtergrond zou de tekstkleur van de button dan aangepast moeten worden, iets als:

Cascading Stylesheet:

.ctaButton.secondary {
  color: #fff;
  border-color: #fff;
}
.ctaButton.unselected {
  color: #d9d9d9;
}

[MrThompson]

In de actieve topics pagina hebben de "<< Vorige pagina" en "Volgende pagina >>" knoppen wel een underline bij mouseover, maar in een topic hebben die knoppen dat niet.

En een ander klein mierendingetje: de onderlijning onder de '>>' staat 1 pixel lager dan onder de rest van de tekst in de knop. Komt door het symbooltje, snap ik wel, maar toch

[Stoelpoot]

Feedback op de Secondary's: Ik vind de :hover niet echt prettig. Over het algemeen, maar zeker in vergelijking met de Primary knoppen, zou ik liever de knop een achtergrondkleur zien krijgen als ik er overheen ga met de muis. Voorbeeld zijn de Bootstrap Outline knoppen. Niet dat het op bootstrap hoeft te lijken, puur het :hover gedrag.

Verder zie ik de "laatste" knop niet actief als ik op een /last pagina op het forum zit, wat wel zo is bij de nummers en ook zo was in oude opmaak.

Beide punten zijn te zien in [ZT] [Slowchat] Het grote cryptocurrency slowchat topic #9

[Femme]

Reinier schreef op dinsdag 2 juli 2019 @ 19:12:
Hoe moeten we weten welke afwijkende knoppen gemeld moeten/kunnen worden? Ik zie namelijk best veel varianten: blauwe knoppen met witte tekst, witte knoppen met blauwe tekst en rand, grijzige knoppen met een grijze rand (of vinden jullie dit geen knoppen? ):

[Afbeelding]

Het filter zou eigenlijk de selected/unselected cta moeten krijgen om het consistent te maken met de rest van de site. De groene kleur van het geselecteerde filter is goed, de ongeselecteerde opties zouden een witte transparante achtergrond moeten krijgen.

[XWB]

P1nGu1n schreef op dinsdag 2 juli 2019 @ 17:21:
De unsorted sectie in de Pricewatch, hier heeft de 'Zoek' knop geen styling:

[Afbeelding]
Eigenlijk ziet deze hele pagina er als 2009 uit

Is dat een gradient? Om spontaan rillingen van te krijgen!

[crisp]

XWB schreef op woensdag 3 juli 2019 @ 11:45:
[...]


Is dat een gradient? Om spontaan rillingen van te krijgen!

oldskool

[alex3305]

Op de Actieve Topics en MyReact pagina's hebben de vorige / volgende pagina knoppen de underline aanstaan bij hover:



Kleine edit: dit is niet op de andere pagina's en hoort volgens mij ook niet.

[ Voor 16% gewijzigd door alex3305 op 04-07-2019 14:33 ]

[sanzut]

Weet niet of het hier hoort, maar op Safari op iOS is op het forum de link in de pagination naar “laatste” niet langer zichtbaar?

Bijvoorbeeld hier
Apple Pay in Nederland

[ikloon]

sanzut schreef op woensdag 3 juli 2019 @ 23:27:
Weet niet of het hier hoort, maar op Safari op iOS is op het forum de link in de pagination naar “laatste” niet langer zichtbaar?

Op de mobiele weergave tonen we die knop inderdaad niet. Dat was al zo. Maar nu mobiele schermen groter zijn/worden kunnen we wel kijken of we de 'Laatste' knop ook op mobiel kunnen tonen.

[Hero of Time]

ikloon schreef op donderdag 4 juli 2019 @ 10:54:
[...]

Op de mobiele weergave tonen we die knop inderdaad niet. Dat was al zo. Maar nu mobiele schermen groter zijn/worden kunnen we wel kijken of we de 'Laatste' knop ook op mobiel kunnen tonen.

Wees daar voorzichtig mee, want je blijft mensen houden die een kleinere telefoon hebben. Net zoals mensen niet allemaal met 30" 4k schermen zitten zijn er ook mensen die geen (behoefte aan een) 5,5"+ telefoon hebben, al dan niet met super hoge resolutie.

[Freeaqingme]

https://tweakers.net/productcollectie/converteer/1976220/

Edit: Denk dat het niet relevant is, maar omdat de TS het vroeg: Het betreft een Ubuntu desktop op Firefox.

[ Voor 25% gewijzigd door Freeaqingme op 07-07-2019 19:18 ]

[alex3305]

alex3305 schreef op woensdag 3 juli 2019 @ 13:22:
Op de Actieve Topics en MyReact pagina's hebben de vorige / volgende pagina knoppen de underline aanstaan bij hover:

[Afbeelding]

Kleine edit: dit is niet op de andere pagina's en hoort volgens mij ook niet.

Aangezien er nog geen reactie op bovenstaande post was, was ik benieuwd of het inderdaad een bug betreft?

[crisp]

alex3305 schreef op dinsdag 9 juli 2019 @ 20:14:
[...]

Aangezien er nog geen reactie op bovenstaande post was, was ik benieuwd of het inderdaad een bug betreft?

Jup, dat is een bug. We noteren alles en proberen zo veel mogelijk te fixen voor de aankomende release

[Hero of Time]

De navigatieknoppen in DMs zijn niet gestyled, terwijl dat bij topics op 't forum wel is. De knoppen voor volgende/vorige pagina en de huidige pagina worden niet met een mooie achtergrond weergegeven.

[.Redman.]

Niet zeker of dit valt onder de restyling van de knoppen...

Op de frontpage (desktop) is de sectie 'Nu op het forum' verplaatst naar de rechter kolom. Sindsdien is de link 'Meer actieve topics >>' incorrect.

Deze verwijst naar 'https://tweakers.net/forum/list_activetopics' i.p.v. 'https://gathering.tweakers.net/forum/list_activetopics'

[crisp]

.Redman. schreef op donderdag 11 juli 2019 @ 10:05:
Niet zeker of dit valt onder de restyling van de knoppen...

Op de frontpage (desktop) is de sectie 'Nu op het forum' verplaatst naar de rechter kolom. Sindsdien is de link 'Meer actieve topics >>' incorrect.

Deze verwijst naar 'https://tweakers.net/forum/list_activetopics' i.p.v. 'https://gathering.tweakers.net/forum/list_activetopics'

Dat is volgens mij onderdeel van een A/B test. @ikloon ?

[ikloon]

crisp schreef op donderdag 11 juli 2019 @ 10:18:
[...]

Dat is volgens mij onderdeel van een A/B test. @ikloon ?

Ja, dat is onderdeel van een lopende test. Dank voor de opmerkzaamheid. Gaan we naar kijken.

[Femme]

.Redman. schreef op donderdag 11 juli 2019 @ 10:05:
Niet zeker of dit valt onder de restyling van de knoppen...

Op de frontpage (desktop) is de sectie 'Nu op het forum' verplaatst naar de rechter kolom. Sindsdien is de link 'Meer actieve topics >>' incorrect.

Deze verwijst naar 'https://tweakers.net/forum/list_activetopics' i.p.v. 'https://gathering.tweakers.net/forum/list_activetopics'

De link is aangepast naar de juiste url.

[Xav]

Hero of Time schreef op dinsdag 2 juli 2019 @ 20:49:
Kan de styling dan op z'n minst consistent gemaakt worden vergeleken met de andere knoppen door gewoon een achtergrondkleur op te geven? Maakt het voor ons custom css'ers ook iets duidelijker.

Done

[ Voor 17% gewijzigd door Xav op 16-07-2019 13:45 ]

[Xav]

Als het goed is zijn alle gemelde issues zojuist opgelost met onze laatste release! \o/
Kom je alsnog wat tegen, meld dit dan svp hier.

[Fiber]

Fiber schreef op dinsdag 2 juli 2019 @ 18:41:
Zie screenshot:

[Afbeelding: forum bug]

Het rechthoekje om de tekst schaalt dus niet mee. Boven- en onderaan de pagina in 'Mijn topics' en in 'Actieve topics'

MacOS 10.13.6, Safari 12.1.1

crisp schreef op dinsdag 2 juli 2019 @ 18:45:
@Fiber even je melding hierheen verplaatst

Ik kan het overigens in Firefox niet reproduceren...

Fiber schreef op dinsdag 2 juli 2019 @ 18:49:
[...]

Prima,

Dan is het wellicht een MacOS en/of Safari dingetje...

En, wat ik al eerder zei, het is een schaling dingetje, op 100 procent zijn ze wel goed.

Niet wereldschokkend, maar is nog niet opgelost...

[crisp]

Fiber schreef op dinsdag 16 juli 2019 @ 14:07:
[...]


[...]


[...]

Niet wereldschokkend, maar is nog niet opgelost...

Scaling issues doen we doorgaans weinig mee, zeker als het ook alleen maar in 1 specifieke browser is...

[DoubleP38]

Hi,

gebruik Windows10 // Chrome browser

Hetgeen mij opvalt is het volgende.

Als ik via deze link (Feedback restyling knoppen) de tweakers pagina laad, zie ik het volgende

pagina nummers // Button "volgende" //Button "Laatste"

Klik ik op "volgende" zie ik :

Button "Vorige" // pagina nummers // Button "Laatste"

Klik ik op "Laatste" zie ik :

alleen pagina nummers en zijn de buttons verdwenen tevens is de kleur van Blauw/wit veranderd naar volledig groen.

Is dit met opzet ?

[crisp]

DoubleP38 schreef op dinsdag 16 juli 2019 @ 15:24:
Hi,

gebruik Windows10 // Chrome browser

Hetgeen mij opvalt is het volgende.

Als ik via deze link (Feedback restyling knoppen) de tweakers pagina laad, zie ik het volgende

pagina nummers // Button "volgende" //Button "Laatste"

Klik ik op "volgende" zie ik :

Button "Vorige" // pagina nummers // Button "Laatste"

Klik ik op "Laatste" zie ik :

alleen pagina nummers en zijn de buttons verdwenen tevens is de kleur van Blauw/wit veranderd naar volledig groen.

Is dit met opzet ?

De 'huidige' pagina is weergegeven met een groene achtergrond. De 'laatste' pagina is een beetje een uitzondering; dat toont de altijd de laatste xx (waarbij xx het aantal posts per pagina van je instellingen is) posts van een topic en is als zodanig niet een fysieke 'pagina'. Daarom heeft deze ook geen 'vorige'.

[Toxic_Dreams]

Fiber schreef op dinsdag 16 juli 2019 @ 14:07:
[...]


[...]


[...]

Niet wereldschokkend, maar is nog niet opgelost...

Dit komt waarschijnlijk door de overflow: hidden die op de bovenliggende div staat.

Mocht het jezelf storen en je een oplossing willen; onderstaande code toevoegen aan je custom CSS zou het moeten verhelpen ( niet getest ).

Cascading Stylesheet:

html div.pagenav {
  overflow: visible;
}
html .ctaButton {
  height: auto;
  overflow: hidden;
}