| Autor | Zpráva | ||
|---|---|---|---|
| sjiamnocna Profil |
#1 · Zasláno: 7. 2. 2018, 22:01:28
Ahoj.
Řeším program festivalu. Festival má několik míst, kde se konají přednášky, workshopy a koncerty. V jednom čase se může konat více akcí. V systému mám o každém programu název, jméno organizátora, místo, čas zahájení a čas konce. Bloky by měly být široké podle délky trvání. Chci nějakou časovou osu - nahoře časy, třeba po 2 hodinách od začátku dne. Místnosti by měly tvořit řádky, jednotlivé bloky (začátek a konec) by měly být zarovnány s časy v hlavičce programu (nemusí být zcela přesně) a místa mohou mít třeba jen jeden blok někde uprostřed, nebo na konci. Je to menší akce, takže první program v 8 - 10 a poslední cca v 20 - 22. Každý blok bude obsahovat nějaké doplňující údaje, takže bude trochu větší. Ilustrační obrázek :): 
Jak to jen s HTML + CSS vytvořit? Napadly mě flexy, ale nevím, nakolik jsou dnes již použitelné... Dále bootstrap, ale ten má jen 12 sloupců. Nějaké nápady? Předem děkuji |
||
| Bubák Profil |
Pokud by byla zapotřebí sémantika, tak UL, LI, případně i A, po kliknutí by se otevřela stránka s podrobnostmi.
V CSS absolutně pozicované blokové elementy, pozice left podle začátku, Zkusím něco spáchat a dám tu odkaz. |
||
| Keeehi Profil |
#3 · Zasláno: 7. 2. 2018, 23:44:06
+ pokud se na pozicování použijí procenta, tak to bude i gumové
|
||
| Bubák Profil |
#4 · Zasláno: 8. 2. 2018, 00:07:46
Živá ukázka
Odkaz Časová osa by asi šla udělat elegantněji, ale teď mě elegantní řešení nenapadá. Je to dělané tak, že 1 minuta odpovídá 3 pixelům, pozici a rozměry jsem počítal jsem v tabulkáči. Keeehi: „+ pokud se na pozicování použijí procenta, tak to bude i gumové“ I tak by to šlo. |
||
| sjiamnocna Profil |
#5 · Zasláno: 8. 2. 2018, 11:35:00
@Bubák: Vypadá to dobře
Vyzkouším to s těmi procenty. Díky :) |
||
| Kajman Profil |
#6 · Zasláno: 8. 2. 2018, 12:52:43
Když bude nadřazený div 100%=25 hodin, tak ty bloky pak mohou používat v left a width 1%=15 minut.
Nepotřebné hodiny ráno a večer by se schovaly kombinací zoomu (width>100%) a záporného left. Když by se pak přidalo něco před současný začátek nebo za současný konec, nemuselo by to celé přepočítávat a stačí spočítat jen ten zoom a posun. |
||
| sjiamnocna Profil |
#7 · Zasláno: 8. 2. 2018, 18:17:23
@Kajman: To první jsem pochopil, ale co je to s tím zoomem? Že mi skončí jeden event v 13.00 a další je až v 16.00, tak se místo mezi nimi jakoby smaže?
Jak se smaže? Nechápu to |
||
| Keeehi Profil |
#8 · Zasláno: 8. 2. 2018, 18:51:49
sjiamnocna:
Zoom je jenom potřeba, aby vycházely pěkně procenta. Pokud by byl celý program 25 hodiny, pak jedno procento odpovídá 15minutám. Což jsou hezká čísla. Ovšem ty nepotřebuješ 25 hodin. Takže použiješ zoom a s ním ořízneš přebytečné okraje. Nebo se vykašleš na zoom a hezká procenta a spočítáš si, že pro třeba osmihodinovou akci 5 minut je 0,96% a budeš počítat s trochu ošklivějšími čísly. |
||
| Kajman Profil |
Ne, myslel jsem to ještě trochu jinak.
Máte blok, který má 25 hodin (aby se to lépe dělilo) a nezajímá Vás prvních 10 hodin a posledních 10 (15-24 + 1 bonusová). Takže těch 5 hodin (10-15) můžete roztáhnout na plnou šířku rodiče. Tedy width bude 500% (100*25/5). Ten blok bude v prvku, co má overflow:hidden, tak se přesahy nebudou zobrazovat. A aby byla desátá hodina na začátku nadřazeného boku, vypočítáte si ještě left nebo margin-left a tím ten zvětšený blok posunete doleva díky -50% (10*25/5). |
||
| Kajman Profil |
#10 · Zasláno: 9. 2. 2018, 00:31:46
A pokud vlastně bude ten blok 100 hodin místo 25, tak 1% bude jedna hodina a ty barevné přednášky a koncerty se budou počítat ještě snadněji. Pokud to bude začítat v 10:15, tak left:10.25% (10 a čtvrt hodiny).
Živá ukázka Odkaz Pro hodně úzké zobrazení je možné ještě doplnit podmíněné kaskádové styly pro velikost písma. Velikost písma podle šířky |
||
|
Časová prodleva: 6 let
|
|||
0