Tab menu component #17 #20

OniWithTheHoodie · 2024-10-08T14:24:44Z

Footer

tab menu component gemaakt met flexbox
mobile first
de tab component is bedoeld om de programma's, Dj's, plalist en frequenties weer te geven
volgende stap is het active state toevoegen

Testen

zitten zowel voor mobiel en desktop op 88%

resultaat voor mobiel

resultaat voor desktop

tab test

tabben door de tabs navigatie is ook mogelijk

Alt tag voor omschrijvingen

Welke testen heb ik uitgevoerd?

ik ben onze hele DOD afgegaan en heb de functionaliteit ook getest.

Code

Je code voldoet aan de afgesproken conventies
Je bent consistent met het gebruiken van tabs en enters
Je structureert je code met comments
Je legt ingewikkelde code uit met comments

Ontwerp

Het afgeronde component komt overeen met het ontwerp

Responsive

Het is responsive op alle schermen tot minstens 300px breed

Toegankelijkheid

Is te bedienen met toetsenbord
Heeft een duidelijke focus state
Er wordt gebruik gemaakt van semantische html (probeer divs te voorkomen)
Op alle buttons en overige klikbare elementen staat cursor: pointer
Je scoort minstens een 85% op Lighthouse voor zowel mobiel als desktop op toegankelijkheid
Bij afbeeldingen, buttons en links staan alt tags die kort en duidelijk beschrijven wat het doet
Je html komt door de html validator
Er is op meerdere browsers getest, minstens firefox en chrome

Performance

Alle afbeeldingen hebben een standaard hoogte en een standaard breedte meegekregen in de html
Het formaat van elke afbeelding is webp of svg
Je hebt geen onnodige / dubbele code
Je behaalt een 85% op de performance Lighthouse test op zowel mobiel als desktop

Mergen

[] Alle merge conflicts zijn opgelost
[] Minstens 1 persoon heeft je code beoordeeld en goedgekeurd

Wat moet er getest worden?

Ik zou graag willen dat er iemand extra controlleert of:

Alle functionaliteiten onder het kopje hoe werkt het, werken
Of alles volgens code conventies is
Of ik mij aan alle DOD's heb gehouden

- Global Style css - Link stylesheet in head Link #9

Ik heb de basic layout in html gemaakt, ook heb ik de styling voor mobile al gedaan. Ik doe deze commit omdat ik graag verder wil werken om mijn desktop. Daar zal ik weer per kleine commit werken.

Ik heb de flexbox goed gezet in deze commit. hierdoor flext hij altijd tot volledige breedte

Made general styling and variables in the style.css

Chaning of pathing

adapter

This reverts commit 8281ec6, reversing changes made to 20d0af0.

Deze commit is erg groot, dit omdat daan en ik een error hadden met de merge, dus heb ik alles handmatig gedaan

I made a button with a dynamic link and label, i also added some cool animations on it!

Set temp fonts in styleguide This is part of #32 & #9

Footer gemaakt -dit bestaat uit een grid layout -flexbox op de icons en links -images zijn enhanced en hebben een webP en Avif

Ik heb een hover effect aan de knop toegevoegd en een functie waarmee je de svg uit kan zetten op de knop zodat deze te hergebruiken is

-class op enhanced images verplaatst naar list -h4 veranderd naar h3 -.footer__header-footer veranderd naar .footer__h2 om benoeming in lijn te houden

added font files

-fonts has properly been added

Ik heb comments en alle kleuren custom variabelen gegeven

I made a variable that can turn off the transparant background at 600px

Removed javascript click animation for peformance

-cursor pointer voor incons en links -text-size toegevoegd voor copyright - cursor pointer voor links

In this push, is the html setup for the component

Started editing the css, this isnt finsished. but i want to work further from here

Heb de footer aangepast zodat het onderste gedeelte niet buiten de footer komt

Merge Header component #12

-Footer update responsiveness -desktop omgezet naar mobile first

- added small comment

Updated the readme

…client-case

- tabs nav

I forgot to commit earlier, this needs to be picked up by me. Now im going to refector this code.

Ik heb mijn html een refactor gegeven, zo is de code korter

tab component gemaakt

added small comments

Pull Request Mobile nav#42

-font has been changed and is currently working

- standard width en height mee gegeven aan de images

Footer component #31

- images toegevoegd die in de assets folder zit en toevegoed binnen de libs folder

…client-case

installed the missing packages

ik heb de enhanced images npm geinstalleerd

…client-case

PNG veranderd naar png

- footer turned off for mobile

footer

driezie and others added 30 commits September 23, 2024 15:06

JC - Setup project

99fa42d

- Global Style css - Link stylesheet in head Link #9

Commit 1 #12

4fe6e64

Ik heb de basic layout in html gemaakt, ook heb ik de styling voor mobile al gedaan. Ik doe deze commit omdat ik graag verder wil werken om mijn desktop. Daar zal ik weer per kleine commit werken.

Commit 2 #12

1b7c8c1

Ik heb de flexbox goed gezet in deze commit. hierdoor flext hij altijd tot volledige breedte

General styling and variables

20d0af0

Made general styling and variables in the style.css

Commit 3 #12

140e3a7

Chaning of pathing

svelte

7231bb1

adapter

Merge branch 'main' into Footer-component-#31

531e844

Merge branch 'Header-component-#12' into main

8281ec6

Revert "Merge branch 'Header-component-#12' into main"

6f410b7

This reverts commit 8281ec6, reversing changes made to 20d0af0.

push to merge

4a82cf8

Large commit 4 #12

fc4d496

Deze commit is erg groot, dit omdat daan en ik een error hadden met de merge, dus heb ik alles handmatig gedaan

Button dynamic linking and label + animations

a1f76b1

I made a button with a dynamic link and label, i also added some cool animations on it!

JC - Pushed all the fonts

6375f9a

Set temp fonts in styleguide This is part of #32 & #9

Footer-component-#31

136cae2

Footer gemaakt -dit bestaat uit een grid layout -flexbox op de icons en links -images zijn enhanced en hebben een webP en Avif

hover effect and svg hide / show function

878cd5b

Ik heb een hover effect aan de knop toegevoegd en een functie waarmee je de svg uit kan zetten op de knop zodat deze te hergebruiken is

Footer-component-#31 v0.1

45331ca

-class op enhanced images verplaatst naar list -h4 veranderd naar h3 -.footer__header-footer veranderd naar .footer__h2 om benoeming in lijn te houden

Footer-component-#31 v0.2

fd50253

added font files

Footer-component-#31 v0.3

1f726aa

-fonts has properly been added

comments and custon variables

de70427

Ik heb comments en alle kleuren custom variabelen gegeven

Transparent mediaquery toggle

35a500a

I made a variable that can turn off the transparant background at 600px

Removed javascript click animation

c5177f5

Removed javascript click animation for peformance

Merge branch 'main' into standaard-button-component-maken-16

8fc8741

Footer-component-#31 V0.3

9461ab6

-cursor pointer voor incons en links -text-size toegevoegd voor copyright - cursor pointer voor links

HTML setup

4a15ae2

In this push, is the html setup for the component

TD Start css #42

86a893c

Started editing the css, this isnt finsished. but i want to work further from here

commit #12

e5bf3b3

JC - Fixed height footer

209beb9

Heb de footer aangepast zodat het onderste gedeelte niet buiten de footer komt

Merge branch 'main' into Header-component-#12

7cc8673

commit with images

85fbe46

Merge pull request #43 from Daan645/Header-component-#12

75ad86d

Merge Header component #12

OniWithTheHoodie and others added 30 commits October 7, 2024 11:45

Footer v0.5

a6af53a

-Footer update responsiveness -desktop omgezet naar mobile first

Footer v0.06

626bc03

- added small comment

Update README.md

651e197

Updated the readme

Wrong background color removed

3bbe7cc

Merge branch 'main' of https://github.com/Daan645/lose-your-head-the-…

0f486de

…client-case

tabs

e44243c

- tabs nav

Large commit for mobile menu #42

d223516

I forgot to commit earlier, this needs to be picked up by me. Now im going to refector this code.

Commit Aria Labels #42

1afadc2

Refactor html structure #42

230f90f

Ik heb mijn html een refactor gegeven, zo is de code korter

Change of svg commit #42

57626e9

tab v0.01

fa7ab99

tab component gemaakt

last change before merging #42

fa7e6ad

comments

be4b168

added small comments

Merge branch 'main' into Mobile-nav#42

0f82883

Merge pull request #48 from Daan645/Mobile-nav#42

613a73d

Pull Request Mobile nav#42

Small margin commit

014e60f

footer font fix

de5a3cc

-font has been changed and is currently working

Merge branch 'main' into Footer-component-#31

3453ef4

images

751e08b

- standard width en height mee gegeven aan de images

Merge pull request #41 from Daan645/Footer-component-#31

ef20b90

Footer component #31

images enhancement

91ae434

- images toegevoegd die in de assets folder zit en toevegoed binnen de libs folder

Merge branch 'main' of https://github.com/Daan645/lose-your-head-the-…

e860573

…client-case

installed npm packages

347c9f4

installed the missing packages

enhanced images npm packages

dde8f68

ik heb de enhanced images npm geinstalleerd

JC - Changed test description

8ed85a1

Merge branch 'main' of https://github.com/Daan645/lose-your-head-the-…

01d3eab

…client-case

enhanced images

9a6091f

PNG veranderd naar png

footer

462bdcd

- footer turned off for mobile

Merge pull request #50 from Daan645/Footer-component-#31

891649e

footer

Merge branch 'main' into Tab-menu-component-#17

38f8575

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Tab menu component #17 #20

Tab menu component #17 #20

OniWithTheHoodie commented Oct 8, 2024

Tab menu component #17 #20

Are you sure you want to change the base?

Tab menu component #17 #20

Conversation

OniWithTheHoodie commented Oct 8, 2024

Testen

tab test

Alt tag voor omschrijvingen

Welke testen heb ik uitgevoerd?

Wat moet er getest worden?