Hoe het best een lessenrooster responsive weergeven.

[Jurgen1994]

Hey

Ik zit me af te vragen hoe ik het best een lessenrooster zou kunnen weergeven op desktop / mobiel. Hieronder de huidige situatie. Het is vooral belangrijk dat de rooster perfect te bekijken is op mobiele apparaten. Iemand een beter idee?




Dankje!

[Sircuri]

Ik snap je vraag niet. Je twee screenshots die je gegeven hebt, tonen toch een goede layout? Wat is je vraag precies?

[incaz]

Jup, dan zou ik iets doen als

5-5 '14 Computernetwerken III ......... [lokaal]
8:00 - 10:15, door Joeri

Samengevat: een meer natuurlijke layout maken door het over slechts 2 regels te verspreiden, de belangrijke informatie aan de randen van het scherm te plaatsen (datum + tijd aan de ene kant, lokaal aan de andere), het vak te benadrukken door het weer te geven in een iets groter font / bold / whatever, en de boel een beetje netjes aan elkaar te plakken. De docent is minder belangrijke info, en kan dus italic. Kolomtitels hoef je niet weer te geven, de info spreekt voor zichzelf.

Dit is voor het grootste deel mogelijk met css, interessant hiervoor zijn de diverse display-options (table, inline-block, en de float en absolute-properties), en de element::after{ content: "-" }.
Het verschuiven van de tijdkolommen is nog wel even een uitdaging trouwens. Ik zou niet zonder meer uit mijn mouw kunnen schudden hoe je de eerste content-volgorde naar de tweede layout krijgt, maar als het echt-echt-echt niet meer lukt heb je nog js en niet te vergeten good old display: none

[Jurgen1994]

Sircuri schreef op woensdag 25 juni 2014 @ 19:41:
Ik snap je vraag niet. Je twee screenshots die je gegeven hebt, tonen toch een goede layout? Wat is je vraag precies?

Dit is hoe het nu is, en ik zou graag eens polsen of iemand een betere manier weet .

incaz schreef op woensdag 25 juni 2014 @ 21:21:
Jup, dan zou ik iets doen als

5-5 '14 Computernetwerken III ......... [lokaal]
8:00 - 10:15, door Joeri

Samengevat: een meer natuurlijke layout maken door het over slechts 2 regels te verspreiden, de belangrijke informatie aan de randen van het scherm te plaatsen (datum + tijd aan de ene kant, lokaal aan de andere), het vak te benadrukken door het weer te geven in een iets groter font / bold / whatever, en de boel een beetje netjes aan elkaar te plakken. De docent is minder belangrijke info, en kan dus italic. Kolomtitels hoef je niet weer te geven, de info spreekt voor zichzelf.

Dit is voor het grootste deel mogelijk met css, interessant hiervoor zijn de diverse display-options (table, inline-block, en de float en absolute-properties), en de element::after{ content: "-" }.
Het verschuiven van de tijdkolommen is nog wel even een uitdaging trouwens. Ik zou niet zonder meer uit mijn mouw kunnen schudden hoe je de eerste content-volgorde naar de tweede layout krijgt, maar als het echt-echt-echt niet meer lukt heb je nog js en niet te vergeten good old display: none

Is misschien wel een goed idee, zal als ik even tijd heb dit eens proberen. Aangezien ik de tabel zelf opmaak vanuit php heb ik niet veel CSS nodig .

[emmerwater]

Je idee werkt al aardig goed, maar dat van incaz is nog net iets mooier. Dan worden het ook niet van die lange blokken.
Die laatste zin van jou snap ik niet helemaal. CSS heeft namelijk niks met php te maken en php niks met opmaak. Of check je met php wat voor cliënt/schermformaat er gebruikt wordt en bouw je aan de hand daarvan je html op? Dan zou ik toch echt liever het schermformaat checken met css en aan de hand daarvan je layout bepalen.