Kihagyás

Naptár készítés az alapoktól

Visual Studio Code

Használandó kiegészítők

A vscode-ot megnyitva bal oldalt találjuk meg a kiegészítőket (Extensions). Itt keressünk rá az alábbiakra és telepítsük őket:

  • Live Server
  • Auto Rename Tag
  • CSS Peek
  • HTML CSS Support

Gyorsgombok

Gyorsgomb Mit csinál?
CTRL+SHIFT+P Command Pallet megnyitása (parancsokra tudunk rákeresni és kiadni őket)
SHIFT+ALT+F Kód automatikus formázása

Projekthez szükséges fájlok

A naptár ekészítése során az alábbi fájlok fognak nekünk kelleni:

Struktúra

Az alábbi fájl/mappa struktúrához igazodjuk:

  • /
  • css/
    • layout.css
    • responsive.css
    • style.css
  • font/
    • Roboto-Regular.ttf
  • img/
    • rough_bg.jpg
  • index.html

1. index.html

Írjuk meg a HTML-t.

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link rel="stylesheet" href="css/layout.css">
        <link rel="stylesheet" href="css/style.css">
        <link rel="stylesheet" href="css/responsive.css">
        <title>Naptár</title>
    </head>
    <body>
        <main>
            <div class="time">
                <div class="dayName"></div>
                <div class="dayTimes">
                    <div class="dayTime">07:00</div>
                    <div class="dayTime">08:00</div>
                    <div class="dayTime">09:00</div>
                    <div class="dayTime">10:00</div>
                    <div class="dayTime">11:00</div>
                    <div class="dayTime">12:00</div>
                    <div class="dayTime">13:00</div>
                    <div class="dayTime">14:00</div>
                    <div class="dayTime">15:00</div>
                    <div class="dayTime">16:00</div>
                    <div class="dayTime">17:00</div>
                    <div class="dayTime">18:00</div>
                    <div class="dayTime">19:00</div>
                    <div class="dayTime">20:00</div>
                </div>
            </div>
            <div class="day">
                <div class="dayName">Hétfő</div>
                <div class="dayEvents">
                    <div class="event length--4" style="grid-row-start: 4;">
                        <div class="eventTitle">Kommunikációs hálózatok 2</div>
                        <div class="eventDetails">
                            <div class="eventTime">10:00-14:00</div>
                        </div>
                    </div>
                    <div class="event length--4" style="grid-row-start: 8;">
                        <div class="eventTitle">Kommunikációs hálózatok 2</div>
                        <div class="eventDetails">
                            <div class="eventTime">14:00-18:00</div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="day">
                <div class="dayName">Kedd</div>
                <div class="dayEvents">
                    <div class="event length--2" style="grid-row-start: 4;">
                        <div class="eventTitle">Algoritmus elmélet</div>
                        <div class="eventDetails">
                            <div class="eventTime">10:00-12:00</div>
                        </div>
                    </div>
                    <div class="event length--2" style="grid-row-start: 6;">
                        <div class="eventTitle">Szoftvertechnikák</div>
                        <div class="eventDetails">
                            <div class="eventTime">12:00-14:00</div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="day">
                <div class="dayName">Szerda</div>
                <div class="dayEvents">
                    <div class="event length--4" style="grid-row-start: 2;">
                        <div class="eventTitle">Operációs rendszerek</div>
                        <div class="eventDetails">
                            <div class="eventTime">08:00-12:00</div>
                        </div>
                    </div>
                    <div class="event length--2" style="grid-row-start: 6;">
                        <div class="eventTitle">Szoftver projekt laboratórium</div>
                        <div class="eventDetails">
                            <div class="eventTime">12:00-14:00</div>
                        </div>
                    </div>
                    <div class="event length--2" style="grid-row-start: 8;">
                        <div class="eventTitle">Menedzsment és vállalkozásgazdaságtan</div>
                        <div class="eventDetails">
                            <div class="eventTime">14:00-16:00</div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="day">
                <div class="dayName">Csütörtök</div>
                <div class="dayEvents">
                    <div class="event length--2" style="grid-row-start: 4;">
                        <div class="eventTitle">Operációs rendszerek</div>
                        <div class="eventDetails">
                            <div class="eventTime">10:00-12:00</div>
                        </div>
                    </div>
                    <div class="eventSubdivide length--2" style="grid-row-start: 6;">
                        <div class="event length--2" style="grid-row-start: 1;">
                            <div class="eventTitle">Algoritmus elmélet</div>
                            <div class="eventDetails">
                                <div class="eventTime">12:00-14:00</div>
                            </div>
                        </div>
                        <div class="event length--2" style="grid-row-start: 1;">
                            <div class="eventTitle">Kotlin alapú szoftverfejlesztés</div>
                            <div class="eventDetails">
                                <div class="eventTime">12:00-14:00</div>
                            </div>
                        </div>
                    </div>
                    <div class="event length--2" style="grid-row-start: 8;">
                        <div class="eventTitle">Kommunikációs hálózatok 2</div>
                        <div class="eventDetails">
                            <div class="eventTime">14:00-16:00</div>
                        </div>
                    </div>
                    <div class="event length--2" style="grid-row-start: 10;">
                        <div class="eventTitle">Menedzsment és vállalkozásgazdaságtan</div>
                        <div class="eventDetails">
                            <div class="eventTime">16:00-18:00</div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="day">
                <div class="dayName">Péntek</div>
                <div class="dayEvents">
                    <div class="event length--2" style="grid-row-start: 2;">
                        <div class="eventTitle">Grafika</div>
                        <div class="eventDetails">
                            <div class="eventTime">08:00-10:00</div>
                        </div>
                    </div>
                    <div class="event length--2" style="grid-row-start: 4;">
                        <div class="eventTitle">Operációs rendszerek</div>
                        <div class="eventDetails">
                            <div class="eventTime">10:00-12:00</div>
                        </div>
                    </div>
                    <div class="event length--2" style="grid-row-start: 6;">
                        <div class="eventTitle">Szoftvertechnikák</div>
                        <div class="eventDetails">
                            <div class="eventTime">12:00-14:00</div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="day">
                <div class="dayName">Szombat</div>
            </div>
            <div class="day">
                <div class="dayName">Vasárnap</div>
            </div>
        </main>
    </body>
</html>

2. layout.css

Lépésről léprésre helyezzük el az elemeket.

Kapcsoljunk ki minden nem kellő tulajdonságot.

/* Minden elemen beállítjuk ezeket */
* { 
    margin: 0;
    padding: 0;
    box-sizing: border-box; /* Máshogy fog számolódni a Width és Height */
}

Helyezzük középre a <body> tartalmát.

body {
    min-height: 100vh; /* függőleges középhez kell */
    display: flex; /* egyszerű lesz az elrendezés */
    align-items: center; /* Függőlegesen középre rendezés */
    justify-content: center; /* Vízszintesen középre rendezés */
}

Rendezzük el a <main>-ben lévő "oszlopokat"

main {
    display: flex; /* Tudjon reszponzívan nyúlni */
    min-width: 0; /* Vékony kijelzőn nem lesz levágva az eleje */
}

Adjuk meg az idősávnak és a napoknak az elvárt szélességet.

.time {
    width: 60px;
}
.day {
    width: 180px;
}

Utána meg a napok neveit tegyük magasabbá és helyezzük el őket középen.

.dayName {
    height: 60px; 
    display: flex; /* Szeretjük a flexet, mert */
    align-items: center; /* könnyen lehet benne */
    justify-content: center; /* középre helyezni */
}

Adjuk meg az oszlopok megjelenítését, majd rendezzük el az eseményeket.

.dayTimes, .dayEvents {
    display: grid; /* Egyszerűen fogunk tudni 2D-ben dolgokat elhelyezni */
    /* 14 darab 60px magas sorunk lesz */
    grid-template-rows: repeat(14, 60px); /* Sorminta */
}
.event {
    margin: 1px; /* Minden irányban 1px margó, így 2px-es rések jönnek létre */
    padding: 15px 20px; /* Alul-felül 15px, jobbra-balra 20px kitöltés */
}

Oldjuk meg az ütközés helyes megjelenését

.event {
    margin: 1px; /* Minden irányban 1px margó, így 2px-es rések jönnek létre */
    padding: 15px 20px; /* Alul-felül 15px, jobbra-balra 20px kitöltés */
    /* Ha valami oknál fogva tovább akarna nyúlni, akkor ne */
    max-width: 178px;
}

.eventSubdivide {
    /* Szeretjük a flexet */
    display: flex;
}
.eventSubdivide .event {
    max-width: 88px; /* Ha valami oknál fogva tovább akarna nyúlni, akkor ne */
}

Most egy csomó minden nem úgy működik ahogyan szeretnénk. Egészítsük ki az eventet és a felosztott eventet is.

.event {
    margin: 1px; /* Minden irányban 1px margó, így 2px-es rések jönnek létre */
    padding: 15px 20px; /* Alul-felül 15px, jobbra-balra 20px kitöltés */
    /* Ha valami oknál fogva tovább akarna nyúlni, akkor ne */
    max-width: 178px;
}
.eventSubdivide {
    /* Szeretjük a flexet */
    display: flex;
}
.eventSubdivide .event {
    max-width: 88px; /* Ha valami oknál fogva tovább akarna nyúlni, akkor ne */
}

3. style.css

Első lépésként "importáljuk" az előre letöltött fájlokat a projektbe és használjuk fel őket egyből.

@font-face {
    font-family: 'Roboto'; /* Ezen a néven fogunk tudni rá hivatkozni */
    src: url('../font/Roboto-Regular.ttf') format('truetype'); /* Hol található és típusa */
    /* Figyeljünk a címzésre!!! */
}
body {
    font-family: 'Roboto'; /* A fentebb 'létrehozott' betűtípust használjuk fel */
    background-image: url('../img/rough_bg.jpg'); /* Beállítjuk a letöltött hátteret */
}

Különítsük el a naptárat a háttértől.

main {
    background-color: white; /* legyen fehér a háttér */
    /* Ezt csak másoljuk le */
    box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
}

Emeljük ki a legfelső sort, adjunk neki egy szürkés színt, legyen nagyobb a betűtípusa és más a szövegszín. Csináljunk egy ehhez hasonlót az első oszloppal is.

.dayName {
    background-color: rgb(234,234,234); /* szürke háttérszín */
    font-size: large; /* betű méret */
    color: rgb(110,110,110); /* szövegszín */
}
.dayTime {
    font-size: medium;
    color: rgb(110,110,110);
    text-align: center; /* Középre igazítjuk a szöveget */
}

Most az eseményeknek adjunk stílust. Nézzük meg mi lenne, ha kikapcsolnánk a max-width tulajdonságot. Figyeljünk oda arra is, hogy esemény méretétől függően törjön a cím.

.event {
    background-color: rgb(23,166,151);
    border-radius: 5px; /* lekerekítjük a négy sarkát */
    color: white;
    /* Fogadjuk el, hogy ez van */
    box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
}
.eventTitle {
    font-size: medium;
    font-weight: 400; /* Mennyire legyen félkövér */
    word-wrap: break-word; /* Ha kell, akkor törd szét a szót, hogy ne lógjon túl */
}
/* Csak az 1 óra hosszú, vagy az ütköző eseményeknél lesz aktiválva */
.eventSubdivide .eventTitle, .length--1 .eventTitle {
    overflow: hidden; /* Elrejtjük a görgetősávat */
    white-space: nowrap; /* Szóköznél nem kezdünk új sort ha nincs elég hely */
}
.eventTime {
    font-size: small; /* Az idő legyen kisebb */
    font-weight: 300; /* Ne legyen annyira vastag */
}

És végül, amitől hoszabbak lesznek.

.length--1 {
    /* Mennyi cellát foglaljon el */
    grid-row-end: span 1; /* 1, azaz 1 cellát foglaljon el */
}
.length--2 {
    grid-row-end: span 2; /* 2, azaz 2 cellát foglaljon el */
}
.length--4 {
    grid-row-end: span 4; /* 4, azaz 4 cellát foglaljon el */
}

4. responsive.css

Ha túl keskeny a kijelző, akkor nem a legjobb a megjelenés. Ezt javítsuk ki azzal, hogy még jobban reszponzívvá tesszük a naptárat.

Kezdjük azzal, hogy megkeressük azt a pontot, ahol megtörni látszik a megjelenés.

/* 1380px vagy annál keskenyebb a kijelző, akkor aktiválódik */
@media only screen and (max-width: 1380px) {
    /* ide írjuk a további módosításokat */
}

Ha nem tud a teljes naptár egészében megjelenni a kijelzőn, akkor legyen napi nézet.

main {
    display: block; /* blokként jelenjen meg a tartalma */
    max-width: 800px; /* Maximum eddig nyoljon szét a tartalom */
    /* Helyezzük középre, de most használjunk valami régit */
    margin-left: auto;
    margin-right: auto;
}
body {
    display: block; /* flexel nem fog működni, így visszatérünk blockra */
}

Rejtsük el az idő oszlopot, nem kell az nekünk.

.time {
    display: none; /* Nem fog megjelenni */
}

Apránként oldjuk meg, hogy minden szétnyúljon ebben a nézetben.

/* Ez mindennek a konténere, ha nem nyúlik szét, akkor semmi sem fog */
.day {
    width: 100%; /* Reszponzívan próbáld kitölteni a szabad helyet */
}
/* gridről térjünk át flexre, de oszlopos legyen a megjelenés */
.dayEvents {
    display: flex;
    flex-direction: column;
}
.event {
    margin: 5px 10px;
    max-width: 100%; /* Használjuk fel az összes szabad helyet */
}

Most már csak az ütköző elemekkel van probléma. Ehhez használjuk ki azt, hogy elég csak az egyiknek belső margót megadni. Így itt is marad a 10 pixel belső távolság.

/* Csak az ütköző eseményekre alkalmazzuk */
.eventSubdivide .event {
    /* Ezzel fogják fele-fele arányban elfoglalni a helyet */
    min-width: calc(50% - 15px); /* Kiszámoljuk, mennyi legyen a minimális szélesség */
}
/* Elég csak az elsőnek a belső margoját módosítani */
.eventSubdivide .event:first-child {
    margin-right: 0;
}

Hogyan csíkozzuk be?

Vegyük észre, hogy a vízszintes csíkozás lehetetlen. A függőleges még éppen, hogy lehetséges.

De mi most mégis megoldjuk a vízszintes csíkozást a repeating-linear-gradient használva.

/* Unortodox csíkozás */
main {
    background: repeating-linear-gradient(0deg, white, white 59px, rgb(234,234,234) 1px, rgb(234,234,234) 60px);
}
.day {
    border-left: 1px solid rgb(234,234,234);
}

Csak ne felejtsük el kikapcsolni mobil nézetben.

@media only screen and (max-width: 1380px) {
    main {
        background: white;
    }
    .day {
        border-left: none;
    }
}

Házi feladat

A workshopon való jelenlét megszerzéséhez szükséges a házi feladatnak az elkészítése. Ehhez használd nyugodtan azt a kódot, amit a workshop ideje alatt készítettél, vagy az itt található mintakódot.

Feladatok

  1. Legyen egyszerűen sötét témájúvá váltható a naptár!
    Hint: lehet érdemes külön css fájlt és (1 db) osztályt létrehozni
  2. Legyen több esemény stílus!
    Hint: most minden esemény ugyan olyan, lehessen pl. színt, szövegtípust stb. választani.
  3. Legyen CSS változón keresztül módosítható a naptár tetejének és időoszlopának a színe!
    Hint: nézz utána hogyan kell CSS változót létrehozni és ügyelj arra, hogy jó helyen hozd őket létre.

Beadni a *Nem lehet már beadni 😢* email címre lehet.
Tárgynak add meg, hogy [Webfejlesztés alapok HF].

  • Határidő: 2021.03.03. 19:00