Odsazování v diskusích s reakcemi

Školení, která pořádám

Diskuse s reakcemi je možné zobrazovat pomocí odsazení (k vidění např. i na těchto stránkách). Pro odsazení je možné použít buď vnořené HTML seznamy nebo jednoduché nastavení levého okraje pomocí stylu.

Problém nastane tehdy, když se diskuse příliš zanoří – přílišné odsazení může způsobit zúžení rámečku s diskusním příspěvkem do odpudivé úzké nudle. Jak se tento problém dá řešit?

  1. První možností je nastavit maximální hloubku odsazení. Problém s tímto přístupem spočívá v tom, že sled reakcí po dosažení tohoto maxima není vidět.
  2. Druhou možností je postupně zmenšovat velikost odsazení. Toho se dá dosáhnout např. použitím logaritmické funkce.

Výpočet odsazování na tomto blogu jsem změnil z min(30, 3*$hloubka) na 10 * log(3 + $hloubka) - 10 (v jednotkách ex). Dříve maximálního odsazení 30 při hloubce 10 by se tedy nyní dosáhlo až při hloubce 51 (doufám, že se to nerozhodnete v diskusi vyzkoušet).

Jakub Vrána, Řešení problému, 9.3.2009, diskuse: 95 (nové: 0)

Diskuse

juneau:

No ... ale proč to nevyzkoušet? Co je to za ukázku bez praktického příkladu? :) Reagujte!

MArtin:

správně. ukázka kódu bez ukázky výsledku nemá smysl..

MArtin:

ano

MArtin:

správně

MArtin:

přesně tak

MArtin:

uff

MArtin:

klikyty klik

MArtin:

blah mlah

MArtin:

tudle mudle

MArtin:

jsem spamer

MArtin:

huhly muhly

MArtin:

už nemám sil..

bzuK:

Příště článek na téma - jak ztížit přístup spamerům

bzuK:

úroveň 14

Rival:

Zatím to vychází hezky, moc pěkné Jakube ;)

RoW:

Zatiaľ to funguje! :-)

Lukyer:

Pekne pekne

fido:

super, asi take zavedu

kesspess:

Další reakce aneb pokračování ve grafu logaritmické funkce :)

MArtin:

Jenže jsme ve dvacáté úrovni a už začíná být patrná hlavní nevýhoda tohoto řešení - některé úrovně začínají být nerozlišitelně odsazené.

MArtin:

Dívejte se...

MArtin:

pokus

d:

dalsi pokus

Fry:

a dalsi

Pavel:

Ještě pár zanoření :)

Pavel:

Ještě pár zanoření :)

Pavel:

Ještě pár zanoření :)

Tom:

Ještě kousek!

frantisek:

a jeste!

VasaB:

Pořád to vypadá dobře :)

tomh:

Přitlačíme...

ikona david@grudl.com:

Tak kde to vázne?

A:

Chi Chi

Mirek:

Nový den ... tak jedem :o)

kodl:

no taky jsem zvedavy

Andrew:

Tak jaká je limita.

Mirek:

limita ... řekl bych 1em + 10px

Mirek:

.. ahh .. omlouvám se ... padá to jinam ... ach já nemehlo ... můžete to prosím smazat? tedy od Nikdo? :o) Díky

Mirek:

šmakote 8-O

ondrg:

Vypadá to, že to funguje výborně, díky za tip na řešení :-).

f:

f

dlouhá reakce:

Есть у нас на работе инженер Андрюша. И вот как-то вечером Андрюша
нарезался вдрызг. И уже утром, листая список набранных номеров, с ужасом
и больной головой видит, что он звонил начальнику. Он ему перезванивает,
и между ними состоялся диалог:
- Константинович, я вам вчера звонил?
- Звонил.
- И что я хотел?
- Не знаю. Я по-инопланетянски не понимаю.

Давно это было, лет 10 назад, не меньше - сейчас "ручными" насосами для
подкачки колес почти уже никто не пользуется...
Еду я как-то вечерком по Питеру не спеша, движения почти нет. На
противоположной стороне широкого проспекта 2 дамы возле стоящей машины
"качают колесо" ручным насосом. Чувствую, что-то не так...
останавливаюсь... подхожу - качают так, как будто сопротивления воздуха
нет вообще. Извиняюсь, спрашиваю, хорошо ли они знакомы с этим
процессом, т. к. мне кажется, что у них неисправен насос. Они говорят,
что "раньше не пробовали, но не видят в этом ничего сложного". Прошу
разрешения осмотреть насос - насос в порядке. Но в вентиле - нет
золотника!!! Говорю, что "вентиль - не в порядке, сейчас принесу новый
золотник". Принес, вкрутил, начал качать - "процесс пошел", радуюсь, что
так удачно для них все обошлось. Вдруг подходит мужик и на ухо мне
говорит: "Да я пока в магазин ходил, специально золотник выкрутил
незаметно, чтобы теща с женой немного потрепались, а то достали уже
своими советами!".

Вчера на огонек заглянула подруга. В какой-то момент разговор зашел про дачу. Она меня и спрашивает, мол, я тебе не рассказывала, как однажды пропалывала помидоры? Нет, грю. Далее от 1-го лица:
- Прошлым летом было. Приехали с матерью на дачу, она мне и говорит, мол, доча, иди поухаживай за помидорными кустиками. Они там - в середине огорода, всего 4 куста. Ну я и пошла искать эти помидоры, а сама не помню хоть убей, как они выглядят... Наконец нашла что-то похожее, потерла пальцами листик - запах специфический, ну, думаю - то самое. И давай их там окучивать и пропалывать, кустики подвязывать... Смотрю по ходу дела, а их там далеко не четыре - кустов 13 -15-надцать. Копаюсь, значит, потею... Минут через 40, слышу мать орет:- Ну ты чего та копаешься? Уже давно закончить должна была... Отвечаю, что кустов тут далеко не 4 штуки, а гораздо больше. Мать, видимо сильно удивившись, отправила ко мне брата, посмотреть, что я делаю. А тот пришел и упал ржать. Оказалось я час про@балась над... пятаком дикорастущей конопли... Помидоры были дальше...

Реальность поражает. Американская компания, ведущая
строительство стены на границе США с Мексикой с целью остановить
нелегальную иммиграцию, был оштрафована за использование труда
нелегальных мексиканских иммигрантов.

RoW:

A este sa raz pridavam k testovaniu :-)

mach:

bim bam

pojízdná kočka:

místo pravítka by mohlo být použito pozadí se svislými čarami (viz dále - aneb, toto je reakce na příspěvek o 2 úrovně pod tím mým (tedy, alespoň v době vložení :-/ )).

cars:

Nějak to tu začíná vymírat, není to škoda?

cars:

No vida, zrovinka jsem narazil na subpixelovou limitu ;-) Že by jsem byl už ponořen pod hloubku 51? Nechce se mi to počítat...

ikona Jakub Vrána OpenID:

Nenarazil, jen jsi omylem reagoval na macha a ne na pojízdnou kočku. Mimochodem, vzhledem k tomu, že jednotky jsou relativní (ex), tak subpixelová limita neexistuje (záleží jen na zvětšení). A hloubka 51 není maximální, jen odpovídá dřívějšímu maximu.

XX:

XX

XX:

sddsds

XX:

sddsd

XX:

sdsdsdd

ggg:

:-))) invisible steps, perfect

nice one:

test

nice one one more time:

again

rofl:

No neke

ikona Martin OpenID:

test

Otas:

Pokus2

Pavel Zbytovský:

Ten graf je fakt hezký! Výborný nápad :-)
A to varování je jak v obecné škole, což? :-P

Mirek:

vzal jsem si pravítko, abych se podíval, k čemu to byla reakce

Mirek:

možná by to řešilo vkládáná rámečků do sebe

Mirek:

pak ale stačilo držet se stálé hodnoty odsazování bez ohledu na hloubku (o 2-3px), rámešky mohou mít staále tmavší podklad (jen o stupínek), ale to ani není nutné ... co je asi nutné, aby rámeček vzkazu, na který bylo více přímých rakcí (uzel větvení) byl výraznější (černý) a ostatní méně ... anebo víte co? Vždyť u souvislého řetězce vlastně není odstupňování nutné - stačí to, jak jsou řazeny za sebou - odstupňování je vlastně nutné jen v místě větvení vlákna

ikona Jakub Vrána OpenID:

Odstupňování je nutné proto, aby se rozpoznala reakce na reakci od reakce na stejného rodiče.

pojízdná kočka:

u takhle rozsáhlých diskuzí by možná stálo za to zaznamenávat nejen odsazení, ale i na koho kdo reaguje a poskytnout to čtenáři ve formě anchoru.

ggg:

bingo

Martin:

Zajímavější by byl příklad, jak toto řazení udělat co nejefektivněji v PHP / MySQL

ikona Jakub Vrána OpenID:

Je to popsané v odkázaném článku. Použít se dá buď struktura (pořadí, hloubka) nebo traverzování kolem stromu.

ja:

reaguju

bzuK:

Dobrý nápad, jsem také pro praktické vyzkoušení :-)

Adam:

Třeba tady u bzuka není moc poznat, na koho reaguje :)

pmg:

Jak by to asi vypadalo se sinusoidou? :-)

Mirek:

asi jako každý JO-JO

kapcus:

velmi dobry a jednoduchy napad! diky

ikona Zaachi:

Heh. S timhle jsem si lamal taky hlavu, nakonec jsem se vyhnul matematice a proste omezil pocet vnoreni, jak pises jako prvni moznost.

Tomáš Fejfar:

Jednoduše geniální !

Juraj:

Zdravím,
diskusie s reakciami OK, odsadzovanie OK, ale ako by ste teoreticky riešili stránkovanie? Mne napr. vadí na mnohých servroch že je jedno vlákno rozdelené do viacero podstránok. Máte niekto nejaký dobrý nápad?

ikona xsuchy09:

Pokud někomu vadí délka diskuze, ale nechce stránkovat, může diskuzi uzavřít do HTML elementu, kterému nastaví max. výšku a vertikální scroll. Jinak se asi stránkování či jinému druhu skrývání části příspěvků nevyhneš.
Jinak funkce pro změnu odsazení moc hezká ... pro změnu v případě odsazovaného a zanořovaného seznamu (ul ...) - tedy potřeba postupně menšího odsazování od nadřazeného seznamu - doporučuji např. použití fce y/x (kdy y je zvolená konstanta a x je hloubka zanoření s případnými úpravami - např. používám pro první dvě zanoření 2.5em a dále dle hloubky zanoření 5/(x - 1) - tedy pro třetí zanoření taktéž 2.5em a dále stále více se blížící k nule.
<?php
if ((int)$hloubka > 2) {
    $margin = 5 / ((int)$hloubka - 1);
} else {
    $margin = 2.5;
}
echo
'<ul style="margin-left: ' . $margin . 'em;">' . "\n";
?>
Samozřejmě je důležité nastavit i odsazování samotných prvků vnořených seznamů - nejlépe na 0 (odsazování nechat pouze na samotném zanořování a nastavení u ul). Možností a matematických funkcí s podobnou limitou či jinou s podobným využitím je samozřejmě více a záleží na každém co a jakým stylem použije ;)

bukowski:

A dalsi problem je pri strankovani aby se zobrazovali od nejnovejsich na to vypis podle sloupce poradi taky nejde.

Pavel:

A jak teda na stránkování pokud bych se rozhodl použít takovou strukturovanou diskusi

ikona xsuchy09:

Neměl bys porušit strukturu či když už jí porušit, tak na další stránce začít tak, aby bylo jasné, na co je reagováno. To je na další zamyšlení, zda strukturovanou diskuzi a jakým způsobem vůbec oddělovat. Pro podobný účel je možná vhodnějším řešením buď daný element s nastavenou max. výškou (ne šířkou, jak jsem psal v noci :) ), nebo výpis bez struktury s odkazy na příspěvky, na které je reagováno. Osobně doporučuji používat i u strukturované diskuze na co je reagováno, protože i zde je vidět, že hlubším odsunutím příspěvku se poté ztrácí návaznost (jak je v diskuzi zmíněno, není např. moc jasné na co reaguje bzuK (http://php.vrana.cz/odsazovani-v-diskusich-….php#d-7804).

Mirek:

nikdo?

Mirek:

nechce ...

Mirek:

pokračovat?

Mirek:

jsem

Mirek:

snad

Mirek:

jediný

Mirek:

kdo

bukowski:

pokračuje

pmg:

Kdybych byl článek nečetl, myslel bych si, že se něco dává zadarmo. :-)

marek:

ale jo, výborné rady přece...   :)

pojízdná kočka:

1. A je to (sémanticky) tak, že reakce na hlouběji zanořený příspěvek je „méně významná”?
2. A druhá otázka, na kterou bych se položila, je tato - Není lepší udělat:
<style type="text/css">/*<![CDATA[*/
<?php
for($i=0;$i<=99;$i++){
$x=10 * log(3 + $i) - 10;
echo
".indent-$i{margin-left:".round($x,4)."ex;}\n";
}
?>
/*]]>*/</style>
...
<div class="diskuse indent-1">MArtin: ano</div>
<div class="diskuse indent-2">MArtin: správně</div>
<div class="diskuse indent-3">MArtin: přesně tak</div>
<div class="diskuse indent-4">MArtin: uff</div>

Chtěla bych znát váš názor, jestli dávat odsazení přímo do style="" nebo takto přes kaskádové styly.
Na první pohled je zřejmé, že nevýhoda tohoto způsobu je v přidaném kódu, naopak výhoda v tom, že (za určitých okolností) by se daly boxy s příspěvky přestylovat, právě proto, že u nich není style použit explicitně.
Co si o tom myslíte?

lix:

podle me je to uplne jedno, hlavne ze to funguje a plni ucel.

Denis:

Myslim ze je to dobry napad

Michal Kleiner:

Co by spíš mohlo být zajímavé tak předávat si nějakou css pseudotřídu s ID rodiče a umožnit rozbalit/sbalit všechny děti pomocí jednoduchého js, pak by se i v dlouhé struktuře dalo lépe orientovat.

Pavel:

Na vláknu jako je toto musím být jedním z testujících uživatelů :-)

Vložit příspěvek

Používejte diakritiku. Vstup se chápe jako čistý text, ale URL budou převedeny na odkazy a PHP kód uzavřený do <?php ?> bude zvýrazněn. Pokud máte dotaz, který nesouvisí s článkem, zkuste raději diskusi o PHP, zde se odpovědi pravděpodobně nedočkáte.

Jméno: URL:

avatar © 2005-2016 Jakub Vrána. Publikované texty můžete přetiskovat pouze se svolením autora. Ukázky kódu smíte používat s uvedením autora a URL tohoto webu bez dalších omezení Creative Commons. Můžeme si tykat. Skripty předpokládají nastavení: magic_quotes_gpc=Off, magic_quotes_runtime=Off, error_reporting=E_ALL & ~E_NOTICE a očekávají předchozí zavolání mysql_set_charset. Skripty by měly být funkční v PHP >= 4.3 a PHP >= 5.0.