- 5/22/2025
Category
đ
LearningTranscript
00:00Das war's fĂŒr heute.
00:01Bis zum nÀchsten Mal.
00:02TschĂŒss.
00:31Wie besprochen, fĂŒr die Woche eine EinfĂŒhrung in das neue Assignment, Assignment 6.
00:39Insgesamt gibt es dann noch ein letztes Assignment nach dem fĂŒr die Lehrveranstaltung.
00:47Und wir starten in das Layoutieren von dem Taskboard, das was wir im Assignment 05, die FunktionalitÀt, hergestellt haben.
00:56Ist jetzt nicht tragisch, wenn irgendwer das nicht geschafft hat oder irgendwo nicht ganz fertig geworden ist.
01:01Also die Assignments sind eigentlich unabhÀngig voneinander.
01:04Nichtsdestotrotz hÀtte ich gerne, dass ihr einfach mit dem GitHub Repository weitertut.
01:09Und das nachher am Ende nochmal committed und pushed auf GitHub, damit ich mir das anschauen kann.
01:19Im zeitlichen Jahr, wir sehen uns vor der Deadline nochmal nÀchste Woche.
01:24Aber wir steigen heute echt schon sehr tief ein.
01:27Und es gibt dann nicht mehr so Kleinigkeiten oder ein paar Sachen, die ich offen lasse.
01:33Inhaltlich haben wir die Themen besprochen.
01:37Aber es geht darum, dass wir sie mal anwenden.
01:41Vom Projekt her, wir haben bei unserem Assignment 05, da drinnen ist die Index HTML.
01:47Und wenn das gar nicht funktioniert oder keine Farben sind, nehmt ihr das Static HTML her und speichert es in euren Projektordner rein.
01:57Also der Index und das Static HTML.
02:02Und wartet euch den Projektordner an.
02:08Und wenn ihr das reinkopiert habt, dann seht ihr quasi, da drinnen ist schon definiert, dass StyleSheet mit styles.css importiert wird und eines mit styles2.css.
02:27Das gleiche mĂŒsst ihr dann, wenn ihr in eurem Projekt bleibt, auch fĂŒr die Index HTML lösen.
02:34Und damit wir die StyleSheet dann auch definieren können, mĂŒssen wir eine neue Datei erstellen mit dem Namen styles2.css.
02:45Zwei StyleSheets, die in beide Dateien importiert werden.
02:50Wir können dann wieder den Node-Server starten.
02:55Und den aktuellen Status von der Seite anschauen.
03:04Das ist jetzt quasi mein Projekt, das ist nicht so weit fertig wie bei 5er.EICH.
03:09Und wenn ich dann dieses Static HTML anschaue, das war dann quasi, wenn man irgendwo Schwierigkeiten hat, dann arbeitet ihr einfach mit denen und schaut euch an, wie euer Layout auf der Seite aussieht.
03:21Da drinnen haben wir jetzt diese Buttons mit ein paar Farben hinterlegt.
03:26Und unsere Aufgabe ist jetzt, dass wir das styles2.css so umschreiben, dass das Static HTML und auch das Index HTML so ausschaut, wie in dem Screenshot da.
03:39Wenn man auf Bearbeiten drĂŒckt, geht unten bei uns ein Fenster auf.
03:44Abrunden und vom Layout her haben wir da einen Header und einen Main-Bereich.
03:50Und das werden wir jetzt gemeinsam ein bisschen umsetzen anfangen.
03:55Dann, was haben wir noch?
03:58Wir haben Requirements und die gehen wir jetzt einfach Schritt fĂŒr Schritt durch.
04:05Erster Schritt ist globale Front definieren.
04:09Jeder Browser hat ein User-Agent-Style-Sheet definiert.
04:13Wir ĂŒberschreiben das jetzt.
04:16Was ist definiert? Wir sollten eine Schriftart ohne Serifen wĂ€hlen und das Taskbar sollte von der ĂberschriftengröĂe her large sein.
04:26Das heiĂt, wenn wir uns ein globaler Schriftart definieren, das legen wir jetzt einfach auf den Body von unserem Dokument und gehen dann her und sagen, dass die Front-Family irgendwas ohne Serifen ist.
04:45Das zweite, was noch definiert war, ist, dass diese Taskbar-Ăberschrift xlarge ist.
04:54Die ist jetzt drinnen unter Element-Header, gibt es ja Element-H1, das möchte ich ansprechen.
05:04Wir haben bei Element-Header und darin haben wir Element-H1, direkt das Kind von Header-H1.
05:17Dies hier wollen wir Font-Size-X-Large, glaube ich, definieren.
05:31Also, die Schriftart hat sich geÀndert und oben die Schriftart ist gesetzt worden.
05:36Ihr könnt es euch anschauen, Header-H1, Font-Size-X-Large.
05:40Und was da drinnen definiert ist, haben wir letztes Mal besprochen in der Lehrveranstaltung.
05:46Wenn ihr euch Styles CSS anschaut, dann haben wir da oben den Bereich mit dem Root Borderbox Inheritance.
05:57Also Borderbox wird definiert fĂŒr den Root und wird ĂŒber Inherit an alle Sub-Elemente vererbt.
06:05Quasi, dass die GröĂe auf Basis von der Box inklusive Rahmen gerechnet wird.
06:13Also, den ersten Punkt mit den Fonts haben wir gelöst.
06:18Der zweite Punkt ist, wir sollten eine Top-Bar erstellen mit einer Hintergrundfarbe.
06:24Die Top-Bar ist bei uns der Header.
06:38Im Header drinnen haben wir eine Ăberschrift und ein Formular.
06:41Und nachdem wir jetzt quasi nur einen Header haben und unter bei diesem mit Main quasi den Hauptbereich.
06:48Wenn ihr euch zurĂŒck erinnert, ein Header ist ein Block-Element.
06:51Ein Block-Element nimmt immer die ganze Breite vom Viewport ein.
06:55Das heiĂt, wenn ich dem Header jetzt eine Breite gebe und eine Hintergrundfarbe, dann sollte das trotzdem die gesamte Breite einnehmen.
07:05Je nachdem wie breit man das definiert und die Hintergrundfarbe sollte sichtbar sein.
07:09Das probieren wir aus.
07:11Wir sagen jetzt an unser Header, Block-Element kann man Breite geben.
07:16Breite sollte immer das ganze Fenster sein, weil der Header oben quasi die ganze Breite einnimmt.
07:24Header, Live, 100%.
07:27Das zweite was definiert ist, ist eine Hintergrundfarbe und eine Textfarbe.
07:32Die Hintergrundfarbe ist ein Hexcode, 20, 20, 20.
07:37Das heiĂt, Background-Color, Rot, GrĂŒn, Blau, ist 20.
07:46Und die Front-Color war mit WeiĂ definiert.
07:55Wie schaut das dann aus?
07:58Wir haben hier ein Task-Board, nimmt die ganze Breite ein, weil es ein Block-Element ist.
08:05Und das Formular nimmt auch die ganze Breite ein, weil es auch ein Block-Element ist.
08:08Innerhalb vom Header, der auf die ganze Breite gerechnet wird.
08:13Was man jetzt sieht, ich weiĂ nicht, ob man es im Video so gut erkennt, wo wir jetzt mal darĂŒber geredet haben,
08:18ist in Gelb dargestellt, oder rechts, da sieht man es ganz gut.
08:22StandardmĂ€Ăig ist rund um den Body eine Margin definiert, 8 Pixel in dem Fall.
08:28Wenn wir gerne hĂ€tten, dass da nirgendwo ein Rand ist, mĂŒssen wir hergehen und mĂŒssen fĂŒr den Body den Rand nach auĂen auf 0 setzen.
08:39Margin 0.
08:41Dann haben wir, da oben ist nirgendwo was, aber mĂŒssen wir schauen, was es ist.
08:54Schaut gut nur so aus, glaube ich.
09:04Auf alle FĂ€lle haben wir jetzt den Rand auf 0 gesetzt.
09:11Irgendwo haben wir dann einen Rand oben drinnen.
09:20Schauen wir dann, wann der weggeht.
09:23Links und rechts haben wir es eliminiert.
09:26Und jetzt ist die Aufgabe, dass das Taskboard ganz links steht und der Formularbereich ganz rechts.
09:34Das ist jetzt ein klassisches Beispiel fĂŒr einen Flexcontainer.
09:38Das heiĂt, diesen Header machen wir zu einem Flexcontainer und dann die H1 und das Form darin layoutieren ĂŒber den Flexcontainer.
09:49Das heiĂt, der erste Schritt ist, dass wir hergehen und den Header vom Block-Element auf ein Flex-Element umstellen.
10:03Schaut dann so aus. StandardmĂ€Ăig haben wir einen Zeilen-Layout.
10:08Und jetzt können wir den Content innerhalb anordnen ĂŒber einen Befehl.
10:17Da gibt es dann einen Befehl, der heiĂt Justify-Content.
10:22Da sind die ganzen Optionen da.
10:25Wir hĂ€tten gerne Space-Between. Das heiĂt, das erste Element ganz links und das letzte ganz rechts.
10:31Und der Abstand dazwischen passt sich an.
10:34Space-Between.
10:37Jetzt haben wir das erste Element ganz links.
10:40Der Platz dazwischen.
10:42Und der Rest teilt sich an.
10:44Jetzt ist der Rand auch weggegangen.
10:47So, der Rand passt sich an.
10:50Also der Platz in der Mitte passt sich an.
10:58Wenn ihr ein paar Befehle nicht mehr wisst, ich habe die wichtigsten CSS-Regeln da drinnen, Selektoren usw. zusammen kopiert.
11:08Zum Thema Flexbox habt ihr da die einzelnen Regeln.
11:12Und könnt draufklicken und kommt auf MDN.
11:18Die nÀchste Aufgabe.
11:23Also, wir haben jetzt einen Hintergrund gesetzt.
11:29Wir haben die RĂ€nder eliminiert.
11:32Taskbar ist links-aligned und Add-Form ist right-aligned.
11:38Dieses Taskbar hier sollte einen Abstand haben.
11:44Also 5rem links und rechts zum Formular.
11:53Dieses Spacing, wenn wir das anschauen, das ist der Bereich hier links und der Bereich hier rechts.
12:01Das ist jetzt Padding-Left-Right.
12:04Padding ist der Abstand innerhalb vom Container zu den Elementen.
12:11Okay, schauen wir, Header.
12:14Und dann sagen wir Padding-Left.
12:205rem, wenn wir da richtig sind.
12:23Wenn wir da richtig sind.
12:30So, haben wir jetzt 5root.ems-Abstand.
12:34Und dann rechts das gleiche.
12:39Padding-Right ebenfalls 5root.ems-Book-Designer.
12:54NĂ€chste Angabe. Wir gehen jetzt Schritt fĂŒr Schritt durch.
13:07Left, there is tallest, which will likely be the Add-Form.
13:14Above and below, jetzt hÀtten wir es eigentlich zusammenschreiben können.
13:20Das heiĂt, wir hĂ€tten gerne unter und oben auch noch 0,5rem-Abstand.
13:26Das passt eh ganz gut.
13:28Jetzt kombinieren wir das Ganze in eine Short-Hand.
13:32Und zwar, wenn ich es jetzt mal gerne unter und oben und rechts und links definieren möchte,
13:37dann ist zuerst oben und unten eine Zahl.
13:415rem und links und rechts.
13:45Wenn wir es zuschreiben, 0,5rem.
13:52Jetzt gilt das fĂŒr oben und unten und das andere fĂŒr links und rechts.
14:03Short-Hand.
14:08Sonst ist es genau verdreht.
14:12Es ist genau verdreht erwischt.
14:15Der erste Wert ist fĂŒr links und rechts und der zweite Wert fĂŒr oben und unten.
14:30Und jetzt hÀtten wir gerne, dass die Bar da vertikal noch zentriert ist.
14:41Das haben wir gemacht.
14:48Der ist nötig, soweit das Board herringt.
14:51Das Board ist links und rechts.
14:54So, dann können wir schauen, ob wir das ĂŒber die Flexbox regeln können.
15:13Justify Content und dann haben wir noch Align Items.
15:25Schauen wir mal, ob wir da schnell herkommen.
15:28Da können wir dann quasi sagen, wie es in der SekundÀrachse angeordnet ist.
15:35Jetzt sehen wir, dass es mit einem Befehl gegangen ist.
15:38Align Items.
15:40Die SekundÀrachse Center, sagen wir jetzt.
15:44Also, wir haben die Hauptachse.
15:54Da haben wir gesagt, erstes Element ganz links und ganz rechts.
15:57Das war das Justify Content.
15:59Und dann die SekundÀrachse.
16:01In dem Fall war das jetzt die vertikale Achse.
16:03Da haben wir gesagt, Align Items Center.
16:06Und dann rĂŒckt uns das Formular hinten mit nĂ€her.
16:10Wenig Befehle und wir haben das super leiten können.
16:15Und, was auch positiv ist, das Ganze passt sich zumindest bis zu einem gewissen Bereich an die Viewport-Breite an.
16:33Also, Punkt 2 erledigt.
16:36Punkt 3.
16:44Dieses Formular.
16:46Schauen wir mal ganz kurz, ob das Punkte sind, die ihr selber lösen könnt.
16:55Ich glaube, das schafft ihr dann selber.
16:57Breiten definieren, Hintergrundform definieren, AbstÀnde definieren.
17:04Das sind jetzt alles Themen, die was im Layout auf das Form gehen, mit der ID Add Card.
17:14Da drinnen haben wir Input-Elemente, ein Button und das ist jetzt layoutieren.
17:22Mit den Angaben, die was in Punkt 3 definiert sind.
17:29Ein bisschen interessanter fĂŒr uns, also bitte das selbststĂ€ndig machen, ist der Punkt 4.
17:34Das ist das Mainboard mit unseren drei Task-Kategorien.
17:42To do, Doing und Done.
17:46Und dieses Board sollte die gesamte Breite vom Screen annehmen.
17:54Innerhalb haben wir dann wieder unsere Elemente, die wir layoutieren wollen.
17:59Ăhnlich wie beim Header können wir diesen Container in der Mitte, dieses Main mit der ID-Board, zu einem Flex-Container machen.
18:11Da drinnen haben wir unsere Kategorien mit Section und die verteilen wir ĂŒber die Breite.
18:25Das heiĂt, wir haben hier einen Container mit der ID-Board, auf den wir Regeln anlegen wollen.
18:32Die ID-Board machen wir jetzt zu einem Flex-Container.
18:41Das passt jetzt auch wieder, weil diese drei Spalten sollten sich verteilen ĂŒber die Zeile.
18:49Das heiĂt, die Richtung sollte passen.
18:53Dann sieht man, die Richtung hat sich geÀndert.
18:57Die Block-Elemente hÀtten immer unten wieder angedruckt, vertikal.
19:01Jetzt haben wir diesen Main-Container auf Flex gestellt und dann haben wir hier diese drei Spalten, To do, Doing und Done.
19:10Jetzt mĂŒssen wir nur schauen, dass sie gleich groĂ werden.
19:15Das heiĂt, wir haben Display flexed und da haben wir die Breite von dem Ganzen noch definiert.
19:20100% sollte dieser Container machen.
19:34Und dann haben wir hier diese drei Spalten, To do, Doing und Done.
19:41Und dann haben wir unsere drei Container drinnen.
19:47Schauen wir in der Angabe nochmal, ob noch mehr definiert ist.
19:54Links und rechts 5REM, das ist das Padding, weil es nach innen geht.
20:00Das machen wir gleich mit.
20:04Das heiĂt, Padding.
20:16Der erste Wert war oben und unten, damit sind wir auf Null gesetzt.
20:21Und links und rechts sind wir auf 5REM.
20:25Top left, oben und unten lassen wir auf Null.
20:30Dann rucken unsere Karten ein bisschen in die Mitte rein.
20:45Und jetzt können wir an unsere Container ein Hintergrundfarbe geben.
20:55To do, Done Columns.
20:59To do, Done Columns.
21:02Have a background color of F0.
21:10To do und Done.
21:13Jetzt gehen wir hier und sprechen die an ĂŒber die ID.
21:19Hashtag to do.
21:24Hashtag done.
21:28Background color F0.
21:37Und die Doing Column hat Hintergrundfarbe WeiĂ.
21:45Und die Doing Column hat Hintergrundfarbe WeiĂ.
22:07Der nÀchste Punkt ist, dass man diese drei Flex-Items gleich groà macht.
22:14Und zwar muss man da auf die Flex-Items direkt Regeln belegen und nicht auf den Flex-Container,
22:23wie Sie die in der GröĂe verhalten sollten.
22:26Diese Flex-Items in unserem Beispiel sind vom Container-Typ her,
22:36haben wir unseren Flex-Container mit der ID Board und da drinnen haben wir Section-Container.
22:43Also ID Board und dann Section-Elemente.
22:47Das heiĂt, wir sprechen die an ĂŒber die ID und dann ĂŒber den Element-Selector.
22:58Und da braucht man das Zusammenspiel von drei Eigenschaften.
23:04Die erste ist die Basis, wie groĂ ein Element sein soll.
23:08Und wir machen da jetzt ein bisschen ein Hack.
23:12Und zwar eins ist quasi die Standard-GröĂe, was man da hat, was man braucht.
23:17Und dann kommt das nĂ€chste Element und die GröĂe und dann kann man den Platz noch aufteilen oder so.
23:22In unserem Beispiel ist es dann so, dass wir haben drei Container und die sollten alle drei gleich groĂ werden.
23:32Jetzt definiere ich am Anfang einmal keine Basis und sage, die GröĂe ergibt sich ĂŒber zwei andere Eigenschaften,
23:38und zwar ĂŒber das Flex-Grow.
23:41Das heiĂt, wenn ein Platz ist, dann sollen sich die Container quasi gleich verteilen in der GröĂe.
23:49Eins. Und das Gleiche gilt auch, wenn kein Platz mehr ist,
23:54dann sollten sich alle drei Container im gleichen GröĂenverhĂ€ltnis schrumpfen.
24:06Zuerst sind sie alle neu und dann sollten sie im gleichen VerhÀltnis wachsen, wenn Platz ist.
24:11Und das Gleiche gilt auch, wenn der Flex-Container kleiner wird, dann sollten sie im gleichen VerhÀltnis schrumpfen.
24:19Basis ist quasi nichts und dann...
24:24So, jetzt haben wir da quasi die drei Container mit links, rechts, mit dem Rand.
24:30Und dann haben wir dieses VerhÀltnis da, wo die einfach mitwachsen und schrumpfen.
24:39In der Beschreibung...
24:43Hintergrundfarbe haben wir schon gemacht, links, rechts.
24:48Das schafft ihr selber.
24:51Beim Kalumnteitel die GröĂen setzen.
24:57Und wir finden keinen vertikalen Platz zwischen Kalumnteilen.
25:05Vertikalen Platz zwischen Kalumnteilen und dem Header haben.
25:12Wenn man es bei uns gut ausschaut, ja, momentan korrekt.
25:19Container gehen dann bis ganz nach oben.
25:23Ja.
25:32In der Beschreibung, das lese ich euch, schafft ihr Kalums & Karts.
25:42Wir haben jetzt unsere Karten, unsere Tasks, innerhalb von einer Spalte.
25:53Und...
25:57Die sollten auch wieder den ganzen Platz aufbrauchen.
26:01Schauen wir uns ganz kurz das da oben an, ob wir es richtig verstanden haben.
26:07To do, doing done...
26:13Sind ein Beispiel...
26:16In der Höhe können wir es nachpassen, dann unser Element.
26:26Aber das passt von der GröĂe her.
26:37Die Beschreibung nochmal durchlesen.
26:46Ja, Atoms inside.
26:52Das mit dem Spacing lasse ich euch ĂŒber.
26:56Border Radius.
27:00Das können wir noch schnell machen.
27:02Jede Karte sollte ein bisschen einen Rand haben.
27:06Die Karten sind vom Typ her...
27:12Articles.
27:16Also im Mainboard drinnen sind alle Articles.
27:21Also in Board drinnen, Hashtag Board ID.
27:25Da dann sollten alle Elemente mit dem Typ Articles...
27:30hÀtten wir gern an...
27:37hÀtten wir gern an Border Radius.
27:41Vor 0,5 Atoms.
27:46Border Radius 0,5 Atoms.
27:58Das ist nicht richtig umgesprochen da.
28:05Nein.
28:11Falls ich es falsch geschrieben habe.
28:21Achso, wenn man das gröĂere Zeichen nimmt, dann muss es direkt das Kind sein.
28:26Ansonsten, also bei dem Section oben, können wir nur die direkten Kinder ansprechen.
28:31Unten, egal wie weit verschochtelt das ist, alle Articles.
28:35Schauen wir nochmal.
28:38Jetzt haben wir den Rand drinnen.
28:40Also den Border Radius.
28:42Die RĂ€nde nach innen macht es ihr noch.
28:49Ihr schaut dann in die Beschreibung nochmal.
28:56Card Buttons.
28:58Das sollte man nicht sehen.
29:00AuĂer die Maus fĂ€hrt drĂŒber.
29:05Edit, Move, Delete, Hidden.
29:07AnlÀsst die Maus, ist Inside the Card.
29:10Das können wir dann auch gemeinsam machen.
29:13Wie man das sichtbar und unsichtbar machen kann.
29:16Wir haben...
29:19bei jeder Karte...
29:21haben wir...
29:24bei jeder Karte...
29:26haben wir...
29:32haben wir unseren Bereich mit den Buttons.
29:35Und die Buttons sollten nur sichtbar sein, wenn man mit der Maus drĂŒber fĂ€hrt.
29:39Das heiĂt, dieser Container, TIF Container mit der Klasse Buttons,
29:42der ist prinzipiell unsichtbar.
29:45Jetzt schauen wir mal, ob wir irgendwo schon so eine Regel haben.
29:48Wahrscheinlich in den Styles drinnen.
29:51Da haben wir...
29:53Display None,
29:55wenn wir irgendwas mit der Klasse Hidden belegen.
30:00Jetzt können wir das aber nicht machen, weil...
30:03wir sollten ja unser...
30:07unser...
30:10HTML nicht verÀndern.
30:12Das heiĂt, damit wir die mal prinzipiell unsichtbar machen können,
30:16gehen wir her und dann...
30:19alle...
30:22Elemente mit der Klasse Buttons unsichtbar machen.
30:25Von Haus aus.
30:27Das heiĂt,
30:29in unseren CSS Styles 2,
30:32gehen wir her und sagen, alles was die Klasse Buttons hat,
30:38sagen wir Display...
30:40Doppelpunkt None.
30:50Jetzt sind die weg.
30:53Und erst, wenn wir...
30:55mit der Maus drĂŒber fahren, ĂŒber die Karten,
30:58dann sollten die wieder sichtbar werden.
31:04Also, wir wollen, dass...
31:06wenn wir...
31:08im Main Container...
31:12mit der Maus auf eine Section drauf fahren,
31:16also Maus, Section,
31:19dann haben wir...
31:22da...
31:25Section.
31:27Und da drinnen haben wir dann diese...
31:29Karten.
31:32Mit der Klasse Card.
31:34Eigentlich können wir es gleich auf alle mit der Klasse Card anwenden.
31:38Machen wir es ein bisschen einfacher auf Punkt Card.
31:42Wenn wir da drĂŒber fahren mit der Maus,
31:46dann hÀtten wir gern, dass...
31:48alle...
31:51Elemente mit der Klasse Buttons...
31:57folgende Regel kriegen.
31:59Display, Doppelpunkt...
32:03Block.
32:06Also, wenn eine Karte gehauert wird mit der Maus,
32:09dann sollten die Buttons wieder sichtbar werden.
32:15Schauen wir nach.
32:20Passt.
32:30Das mit die...
32:34Das mit die...
32:36AbstÀnde macht ihr bitte selber.
32:40Jetzt hÀtten wir gern, dass die Spalten...
32:45diese drei Kategorien dann die ganze Höhe einnehmen.
32:50Mit ein bisschen Anleitung...
32:53gehen wir es durch.
32:55Und zwar, wir hÀtten gern, dass der Body ein Flex-Container ist.
32:59Gehen wir es schrittweise durch.
33:03Der Body, den setzen wir auf...
33:06Der Body, den setzen wir auf...
33:09Display...
33:11Flex.
33:19Dann solltet ihr die ganze Höhe der Body einnehmen.
33:23Das heiĂt, Head...
33:27100% Viewport Head.
33:31Wird das schon einmal 100% auch gehen.
33:37Ganz unten hÀtten wir gern ein bisschen Platz.
33:44Das heiĂt, Padding...
33:48Bottom...
33:55Padding Bottom ist 3rem.
34:01Und ganz wichtig, wir hĂ€tten ja gern jetzt noch einmal spaltenmĂ€Ăige Leitungen.
34:05Ganz oben ist dann mehr oder weniger unser...
34:09unser Header.
34:12Und unten ist dann dieser Main-Container.
34:16Dann...
34:22sagen wir...
34:25Flex-Direction...
34:30setzen wir auf Column.
34:36Dann schauen wir, wie das Resultat dann nachher ist.
34:47Also fĂŒr uns hat sich nicht viel geĂ€ndert jetzt.
34:54Aber was wir noch gern hÀtten, ist, dass die Container dann...
34:58ganz oben gehen.
35:00Jetzt mĂŒssen wir ein paar Schritte erledigen.
35:03Weil, wenn man sich die GröĂe der Container bisher anschaut...
35:08dann stellt man folgendes fest, dass der Body...
35:12selber nicht die ganze Viewport-Höhe einnimmt.
35:16Wir machen jetzt folgenden Trick.
35:20Und zwar gehen wir her und dann den Body auf Flex-Layout umstellen.
35:25MĂŒssen wir bedenken, dass normalerweise das Layout zeilenmĂ€Ăig ist.
35:29Und wir stellen es jetzt auf Flex und Richtung Column um.
35:34So, unser Body, die Regel ist ganz oben.
35:38Gehen wir her und sagen Flex-Container.
35:43Und die Richtung...
35:46ist...
35:49Column.
35:53Und die GröĂe von den Containern...
35:56ist 100 Viewport-Höhe.
36:01In der Beschreibung drinnen gibt es dann noch einen Punkt, glaube ich, dass...
36:06unten sollte er ran sein, mit 3 RM.
36:12Das heiĂt, den machen wir gleich mit rein.
36:16Padding-Bottom.
36:20Und dann...
36:22Padding-Bottom...
36:293 RM.
36:39So, der Body nimmt jetzt den ganzen Platz da rein.
36:43Jetzt haben wir noch das Thema, dass...
36:46im Body haben wir einen Header drinnen.
36:48Der nimmt jetzt schon die GröĂe ein, die er braucht.
36:52Und dann haben wir da unser Main-mit-ID-Board.
36:55Und da hÀtten wir jetzt gerne, dass das dynamisch mitwÀchst.
36:58Je nachdem, wie viel Platz verfĂŒgbar ist.
37:03Gehen wir her und...
37:06gehen wir bei unserem Board hinein.
37:09Und dann sagen wir das Board an sich,
37:12dieser Flex-Container unter Flex-Item in 1.
37:15Und dann sagen wir da Flex-Grow.
37:191. Sollte wachsen.
37:26So, jetzt haben wir gesagt,
37:29diese Elemente drinnen sollten wachsen.
37:33Aber sie schrumpfen nicht so weit zusammen,
37:36dass der Content verloren gegangen ist.
37:44Passt.
37:49Ich hÀtte...
37:52Ja, also wenn wir jetzt irgendwo Breiten
37:55bei den Flex-Items definiert haben vom Body,
37:58zum Beispiel der Header,
38:01braucht jetzt in dem Fall keine Breite mehr,
38:05weil das eher Flex-Item ist,
38:08und wir also das Column-Layout haben.
38:13Welche Punkte sind denn offen?
38:18Ja.
38:24Wir haben ein paar AbstÀnde nicht definiert.
38:29Die bitte noch machen.
38:36Wir haben das Formular oben nicht formatiert.
38:41Und den Move-Here-Button haben wir auch nicht.
38:48Le-Ortiert.
38:54Genau.
38:58Move-Here, da schauen wir einfach,
39:01dass der in die Mitte geht,
39:04und dass das so Àhnlich ausschaut,
39:07wie auf der Scheite spezifiziert.
39:10Genau.
39:13Ein paar andere Sachen,
39:15die mir noch wichtig sind.
39:23Es ist nicht alles ganz genau beschrieben.
39:34Sachen, die drinnen nicht beschrieben sind,
39:37aber die, was man oben im Screenshot sieht,
39:40die bauen wir einfach so nach,
39:42wie man es oben ansehen kann.
39:45Zum Beispiel, wenn eine Karte selektiert ist,
39:49mit der Klasse Moving, glaube ich,
39:52dann sollte ein schwarzer Rand rundherum sein.
39:55Aber ich glaube,
39:58warum das nicht beschrieben ist,
40:01ist, weil es im letzten Assembly schon spezifiziert war,
40:04dass das so sein sollte.
40:07Somit sollte das gut lösbar sein fĂŒr euch,
40:09wenn es irgendwo Fragen gibt,
40:12bitte einfach ĂŒber Blackboard bei mir melden.
Recommended
3:23
|
Up next
1:18
4:37
0:54
1:02:06
1:07:43
36:22
0:46
2:11
11:13
1:00