Thread Rating:

  • 0 Vote(s) - 0 Average
  • 1
  • 2
  • 3
  • 4
  • 5
BuG goes responsive
Heart 
De laatste tijd ben ik bezig geweest met het omzetten van het BuG thema voor het forum.
In plaats van een vaste layout die er niet uit zag op tablets en op telefoons, heb ik deze nu omgebouwd naar full responsive.
De eerste vraag die ik kreeg was, "Wat is er nou eigenlijk anders?".
En eerlijk is eerlijk, als je niet weet waar je precies naar moet kijken, dan zijn de verschillen inderdaad niet meteen zichtbaar.
Maar als je weet waar je moet kijken, dan zijn de verschillen opeens wel heel erg groot.
Daarnaast zijn er ook verschillen die je niet ziet, die zitten voornamelijk in de html.
Tabellen zijn divjes geworden en de opbouw is hier en daar anders. Zo zit het BuG logo nu niet alleen in de bovenste balk van het menu,
maar overlapt hij beide balken. Daarbij lopen de balken ook niet meer helemaal tot de zijkant van het scherm, maar zijn deze net zo breed als het forum zelf. Op de achtergrond is het menu zelfs helemaal opnieuw opgebouwd.
Voor het gemak heb ik even wat screenshots gemaakt van het oude en het nieuwe thema in verschillende situaties want plaatjes zeggen veel meer dan woorden!

Meteen ook even een disclaimer: ik heb het thema live gezet omdat het naar mijn idee voldoende werkbaar is. Dit betekent echter niet dat ik al klaar ben, er is nog een hoop wat omgebouwd moet worden en van jullie hoor ik graag waar jullie tegen aan lopen en wat jullie het belangrijkst vinden om als eerste aan te pakken.


Let's start with the obvious. De index pagina:

Oud:
[Image: 1ZWY0se.png] 

nieuw:
[Image: r9IlPcl.png]

Als je naar beneden scrollt, blijft de menubalk in beeld, dat had ik in het oude thema als eens ingebouwd maar het logo zit er nu ook in:
Oud:
[Image: 9TJhyxF.png]

Nieuw:
[Image: 7XOAspV.png]

En omdat het nu responsive is, past de pagina zich aan naar hoe groot je scherm is ipv dat alles buiten beeld gaat:
Nieuw index page:
[Image: IKoQi7e.png] [Image: u09kMdA.png]

Nieuw topiclist:
[Image: PYvak6I.png][Image: 3OLLAU9.png]

Oud index page en topiclist:
[Image: 5BQQW0r.png][Image: W0HHlyd.png]

Ook het lezen van een topic is onder handen genomen (preview van filmpjes :
Nieuw:
Full width/tablet width/mobile width
[Image: IG94a51.png][Image: PnmvLwf.png][Image: kgarpfc.png]

Oud:
[Image: zxjmerz.png]

En ook de popup met de alerts is aangepakt:
Oud:
[Image: fVLWrEH.png]

Nieuw:
[Image: oCLCxwG.png]
Cool man. Ziet er  netjes uit op mobiel.
Goed bezig! Ziet er netjes uit allemaal!
Niet alles ziet er netjes uit. De edit knop bij berichten is niet voorzien van styling omdat hij onder "post_bit_buttons" in een eigen div zit itt de rest van de knoppen.

Op mobiel zie ik geen recente posts, of ik kan het niet vinden.
(30-11-2015, 16:52)yrew Wrote: Niet alles ziet er netjes uit. De edit knop bij berichten is niet voorzien van styling omdat hij onder "post_bit_buttons" in een eigen div zit itt de rest van de knoppen.

Op mobiel zie ik geen recente posts, of ik kan het niet vinden.

Klopt, is iets waar ik mee bezig ben omdat de positionering van de dropdown niet goed gaat.
(30-11-2015, 17:23)Fonta Wrote:
(30-11-2015, 16:52)yrew Wrote: Niet alles ziet er netjes uit. De edit knop bij berichten is niet voorzien van styling omdat hij onder "post_bit_buttons" in een eigen div zit itt de rest van de knoppen.

Op mobiel zie ik geen recente posts, of ik kan het niet vinden.

Klopt, is iets waar ik mee bezig ben omdat de positionering van de dropdown niet goed gaat.

Heb nu iig de styling weer goed gezet. Vanavond weer verder met de positionering van de dropdown.
Zie nu pas dat de edit knop het niet doet. Maar hij ziet er wel goed uit
(01-12-2015, 10:04)yrew Wrote: Zie nu pas dat de edit knop het niet doet. Maar hij ziet er wel goed uit

De knop deed het wel, maar opende op een vreemde plek.
De positie van het dropdown menutje wordt berekend door javascript en werd op de een of andere manier te ver naar beneden en te ver naar rechts neergezet op dit manier.
Heb nu de opbouw van de html aangepast en hij opent nu weer waar hij hoort.
[Image: 819c566e30.png]
Check, gaat hier ook goed nu.
(01-12-2015, 13:08)yrew Wrote: Check, gaat hier ook goed nu.

Mooi!

Is dat in ieder geval geregeld Smile

Vandaag ook een nog een aantal andere zaken aangepakt:
  • De pagina voor het aanmaken van een nieuw bericht
  • De pagina voor het bewerken van een bericht
  • De pagina voor het aanmaken van een nieuw topic
  • De hoofdpagina van het UserCP
  • De smilie popup
[Image: d6b1f460a8.png]
Users browsing this thread: 1 Guest(s)
Top