Voor mijn studie gebruikten wij een systeem genaamd Brightspace. Hierin stonden voor onze colleges alle documentatie en voor onze modules vonden we hier de opdrachten, maar ook de documentatie. Mijn gebruikservaring was echter zeer slecht omdat het systeem niet de interface schaalde met de grootte van mijn scherm. Hierom heb ik een extensie gebouwd die de webpagina van Brightspace aanpast en beter laad schalen. Deze gebruik ik niet alleen, want ook andere studenten gebruiken nu deze extensie.

Hoe we hier zijn gekomen

Aan het begin van het collegejaar 2024-2025 had ik een laptop met een 4k scherm. Dit scherm was niet alleen groter dan een gemiddeld scherm, maar ik stel ook mijn schermen in op een 100% zoom in plaats van de vaak gekozen 125% zoom voor laptops. Hierdoor is alles net iets meer uitgezoomd dan anders.

Dit brengt ook met zich mee dat ik websites zie zoals ze bedoeld zijn. Op zich niets mis mee, maar Brightspace dacht daar anders over. Deze website die we voor colleges gebruiken bedacht dat het handig was om lekker klein te blijven met de content. Zie hiervoor de screenshot.

Kleine sidenote: dit screenshot is genomen op een scherm van 1920×1200. Mijn oude laptop is kapot.

Wat je hier ziet is de basis layout. Je hebt de content rechts en de navigatie links. Over die navigatie wil ik het hebben. Die navigatie is SUPER smal! En elke keer dat je iets in de hiërarchie ergens onder plaatst krijg je een nog kortere titel. Op een gegeven moment kan je de titel niet eens meer lezen!

Wat is de oplosing

Het moet anders, maar wat moet er anders? Ik heb de HTML van Brightspace bekeken voor deze specifieke pagina en gekeken wat ze under-the-hood doen om dit zo neer te zetten.

Dit was nog niet zo simpel, want waar wij dit als een standaard webpagina interpreteren is de techniek van Brightspace heel slinks. Wat zij doen is, ze hebben de content sectie die wij bekijken een iframe gemaakt.

Ik had al een plan getrokken toen ik begon aan dit project. Het doel was een heel simpel script wat zichzelf injecteert in de pagina, vervolgens de pagina iets aanpast en andere styling toepast en dit rendered naar de gebruiker. Dit plan is grotendeels hetzelfde gebleven, ware het niet dat door dit iframe er een stapje bij kwam.

De code

De code

De code is qua logica eigenlijk erg simpel. Het komt uiteindelijk allemaal neer op één script dat stap voor stap de controle overneemt. Laat me je er doorheen praten.

Allereerst moeten we niet te vroeg juichen. Het script begint met wachten tot de hoofdwebpagina van Brightspace helemaal is ingeladen. Pas als dat klaar is, gaan we op zoek naar dat slinkse element waar ik het eerder over had: de d2l-fra-iframe container. Vinden we die niet? Dan gebeurt er niets en stopt het script.

Vinden we hem wel, dan pakken we het iframe dat daarin verstopt zit. Maar hier komt die extra stap om de hoek kijken: een iframe is letterlijk een webpagina binnen een webpagina. Dat betekent dat we wéér moeten wachten tot ook die binnenste pagina volledig is geladen. Hiervoor heb ik een kleine pauze-functie gebouwd (een Promise) die de browser vertelt: “wacht even tot dit specifieke iframe de status ‘complete’ afgeeft.”

Zodra we écht binnen zijn, halen we het document van het iframe op en zoeken we naar de originele styling van Brightspace (het app.css bestand). Vanaf dit moment nemen we de boel over.

Ik laat het script een nieuw stukje styling (CSS) aanmaken dat direct in de head van het iframe wordt geïnjecteerd. In deze styling gebruiken we overal !important om de regels van Brightspace genadeloos te overschrijven:

1. Meer ruimte: De grote wrapper (#root-wrapper) mag nu eindelijk 80% van het scherm in beslag nemen in plaats van zo’n klein compact blokje in het midden.
2. De verdeling: Ik geef die onleesbaar smalle navigatie aan de linkerkant nu een royale 30% van de ruimte. Het content-paneel krijgt de overige 70%. Weg met die afkapte titels!
3. Kleine schermen: Om te voorkomen dat het op kleinere laptops alsnog breekt, zit er een stukje responsiveness in. Is het scherm smaller dan 936 pixels? Dan trekken we alles naar 100% breedte en verbergen we de navigatieboom gewoon helemaal. Zo hou je tenminste ruimte over voor de inhoud.

Dit alles wordt automatisch uitgevoerd zodra je de pagina opent. Je merkt er niks van, behalve dat de pagina er ineens wel uitziet zoals het hoort.

Resultaat

Het resultaat? Zie de screenshots hieronder:

Vragen? Opmerkingen? Toevoegingen?

Maak een issue op Github of start een discussion.