Input gewenst! Frontpage linkjes: "en drie andere downloads"

[Inspector]

Hoi RWD testers,

Ondanks dat we lekker op dreef zijn met het responsive maken van alle pagina's zijn er nog wat kleine dingetjes die ons storen. Een daarvan zijn de "en x andere" linkjes op de frontpage. Indien er meer downloads of video's zijn verschijnen deze achter de laatste download of video in de nieuwslisting.

Op grade D ziet dat er momenteel als volgt uit:



Het zinnetje "en drie andere downloads" zweeft nu een beetje onsamenhangend in de ondergelegen witruimte. Graag hoor ik wat jullie ideeen of oplossingen zijn om dit wat netter en duidelijker op te zetten.

[MuddyMagical]

Het linkje in tweeën splitsen?
In de eerste link kan je dan het nummer bijwerken en kan je direct naar het overzicht van de downloads van die dag en met de tweede link naar de specifieke download.

[url=Softwaredownloads]Software-updates(3)[/url] - [url=MusicBee2.2]MusicBee 2.2[/url]

Edit: Net even gekeken, maar deze oplossing werkt goed op de resolutie van de iPhone 4S.

[ Voor 13% gewijzigd door MuddyMagical op 18-11-2013 13:12 ]

[Elfjes]

misschien zoiets:

code:

table.highlights a.showMoreItems {
  background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAJCAYAAADgkQYQAAAAK0lEQVR42mNgQANMzhkNDIQAUNF/GisCuQMkiQU3EFLYQMhE/D4kKgiwAQB4Gh15z+8gUAAAAABJRU5ErkJggg==") no-repeat scroll 0px 4px rgba(0, 0, 0, 0);
  padding-left: 10px;
  padding-top: 0px;
}

om regelafstand iets kleiner te maken en aan te geven dat er meer achter zit

Overigens denk ik dat C gewoon de normale (A) layout kan gebruiken. Dat lijkt wel goed te komen.

[ Voor 8% gewijzigd door Elfjes op 18-11-2013 15:39 ]

[Inspector]

MuddyMagical schreef op maandag 18 november 2013 @ 13:10:
Het linkje in tweeën splitsen?
In de eerste link kan je dan het nummer bijwerken en kan je direct naar het overzicht van de downloads van die dag en met de tweede link naar de specifieke download.

[url=Softwaredownloads]Software-updates(3)[/url] - [url=MusicBee2.2]MusicBee 2.2[/url]

Edit: Net even gekeken, maar deze oplossing werkt goed op de resolutie van de iPhone 4S.

Ik vind dit een heel mooie oplossing maar niet erg praktisch. Het wordt ofwel alles in JavaScript uit elkaar trekken en opnieuw opbouwen of al aan de PHP kant twee versies renderen en met een display: none en display:block gaan werken. Beide hebben niet mijn voorkeur

[nickb90]

Ik vind de oplossing van Elfjes wel een mooie oplossing.

[MuddyMagical]

Inspector schreef op maandag 18 november 2013 @ 16:23:
[...]


Ik vind dit een heel mooie oplossing maar niet erg praktisch. Het wordt ofwel alles in JavaScript uit elkaar trekken en opnieuw opbouwen of al aan de PHP kant twee versies renderen en met een display: none en display:block gaan werken. Beide hebben niet mijn voorkeur

Je vroeg om een idee, niet om een technische implementatie..

Met de optie van Elfjes heb je nog steeds dat het blokje er een beetje bijhangt. Probleem is als je hem dichterbij de regel erboven brengt dat die dan niet meer klikbaar is.

[Inspector]

MuddyMagical schreef op maandag 18 november 2013 @ 17:12:
[...]

Je vroeg om een idee, niet om een technische implementatie..

Met de optie van Elfjes heb je nog steeds dat het blokje er een beetje bijhangt. Probleem is als je hem dichterbij de regel erboven brengt dat die dan niet meer klikbaar is.

Klopt Ik heb het momenteel even zo gedaan. Door het toevoegen van een extra lijn en die niet helemaal door te laten lopen zweeft het item niet meer en is toch de relatie nog zichtbaar. Zo doen?

[TERW_DAN]

Dat heeft op zich wel wat.
Al zou ik het pijltje vervangen door een ander icoontje als het gaat om videootjes (maar dat zijn natuurlijk details).

[Inspector]

TERW_DAN schreef op woensdag 20 november 2013 @ 15:56:
Dat heeft op zich wel wat.
Al zou ik het pijltje vervangen door een ander icoontje als het gaat om videootjes (maar dat zijn natuurlijk details).

Het pijltje geeft niet zozeer weer dat het om downloads gaat maar dat het een uitklap menu betreft. Zou dat duidelijker kunnen?

[Misha]

Het zou nog een klipklappijltje kunnen zijn?

[TERW_DAN]

Inspector schreef op woensdag 20 november 2013 @ 16:06:
[...]


Het pijltje geeft niet zozeer weer dat het om downloads gaat maar dat het een uitklap menu betreft. Zou dat duidelijker kunnen?

Mjah, dan had ik eerder een pijltje verwacht zoals dat naast m'n naam staat bovenin de balk, dus gewoon een driehoekje.

Een pijltje zoals dat er nu staat doet mij denken dat het gaat om iets dat te downloaden is, niet zo zeer iets dat opengeklapt kan worden.

[Maxustiti]

Ik vind de oplossing van elfje er goed uitzien. Die streep in het midden geeft mij meer het gevoel dat het dan niet meer bij dat kopje er boven hoort. Dus dat je eigenlijk weer een nieuw artikel heb.

Eventueel zou je als je de streep gebruikt de tekst aanpassen door het woord "en" toe te voegen. Dan krijg je : en elf andere downloads. Dat geeft meer het idee dat het bij elkaar hoort.

[WoutervOorschot]

Ik vind het pijltje heel netjes staan, maar misschien is het mooier wanneer er geen lijn tussen staat, en de regelafstand wat kleiner is tussen 'meer' en '[eerste download]'.

[Elfjes]

of je kan natuurlijk een iets ander pijltje gebruiken, al is deze wel wat licht. Maar dat is misschien maar goed ook, want ik vond die eerste net wat teveel aandacht vragen, en dat doet deze zeker niet.

code:

.showMoreItems:before {
    display: none;
}

table.highlights a.showMoreItems {
  background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAHCAYAAADam2dgAAAAQUlEQVR42mNgIAacOH1aBIifA/F/LPgPEFvDFDpBBdAVVaOb2IKmYC82a5mB+ABUwWsglsTlPkmoAndCHpFGFwMAh01cUdv/49oAAAAASUVORK5CYII=") no-repeat scroll 0 4px rgba(0, 0, 0, 0);
  padding-left: 13px;
  padding-top: 0px;
}

Ik heb geprobeerd de padding-bottom van het eerste video-item te verkleinen zodat de "showMoreItems" wat dichter erop kan, maar het lukt me niet hem goed te selecten zonder alle items mee te pakken. Dan kan ook het tussenlijntje wat beter geplaatst worden.

[sfranken]

Ik vind de oplossing met de lijn onder het 1e item wel een goeie. Voor mij was dan meteen duidelijk dat het een nieuw item was maar toch bij de parent (downloads) hoorde.

Eventueel een pijltje zoals hierboven aangegeven kan ook geen kwaad; maar dan moet het niet te veel worden anders is het zo druk denk ik.

[offtopic]
Ik wilde dit net als bug gaan melden maar het is dus geen bug ;-)

[Inspector]

Thnx! Het is uiteindelijk het volgende geworden.



Een mooie mix van alle input dus

[Misha]

Sweet

[Elfjes]

mooi pijltje!

Ik vind zelf de afstand tussen de twee items nog wat groot, maar dat is maar een klein dingetje.

[Misha]

Welke 2 items bedoel je? Tussen Software-update & elf andere downloads?

Ik vind dat die elf andere downloads aan de onderkant nog wel ff wat extra ruimte mag hebben om hem nog beter afzonderlijk te zetten

[Elfjes]

ja die twee items bedoel ik. Als je de tussenruimte met 8px verkleint (4px aan beide kanten van de separator) krijg je dit



zo heb je ook nog 8px extra witruimte na de "elf andere downloads", die misschien ook wel wat minder kan, 4 px eraf missschien?

[hylke94]

Elfjes schreef op maandag 25 november 2013 @ 15:12:
ja die twee items bedoel ik. Als je de tussenruimte met 8px verkleint (4px aan beide kanten van de separator) krijg je dit

[afbeelding]

zo heb je ook nog 8px extra witruimte na de "elf andere downloads", die misschien ook wel wat minder kan, 4 px eraf missschien?
[afbeelding]

Die laatste ziet er prima uit !