A HUP mobilra optimalizált táblázatai szerintem…

Címkék

A HUP alapvetően három táblázatot használ, aminek a mobilos megjelenése sarokpont.

  1. főoldali fórum-blokk (ide tartozik a „150 legfrissebb fórumtéma” oldal is)
  2. tracker (globális és felhasználói)
  3. könyvjelzők

Ezek a mobilon alapvetően háromfélén viselkedhetnek:

  1. Kaphatnak külön szélességet, így az oldal méretétől függetlenül vízszintesen gördíthetőek lesznek. Ez van most is az oldalon.
  2. Elhagyhatunk belőlük oszlopokat (az ikonok már most is elrejtődnek), bár ez érdemben még nem garancia semmire
  3. Lehet okosítani javascripttel, pl. erre való a TableSaw.

Melyik módszert tudná a Hupper társadalom leginkább elfogadni?

…legyenek vízszintesen gördíthetőek (mint most)
31% (29 szavazat)
…tartalmazzanak kevesebb oszlopot
28% (26 szavazat)
…TableSaw-val legyenek megokosítva
41% (38 szavazat)
Összes szavazat: 93

Hozzászólások

Szerkesztve: 2019. 11. 11., h - 18:06

Egyeb: mint az atallas elott. Side scrollos threadek + min-width CSS a box-ra, hogy ne 2 pixel szeles legyen, mint most.

A kevesebb oszlop értelemszerűen azzal jár, hogy nem lehet minden funkciót vagy adatot elérni mobilról, amit asztali böngészőből igen.

„Egy jó kapcsolatban a társunkat az ő dolgában kell támogatni, nem a miénkben.”
rand() a lelke mindennek! :)
Szerinted…

Egyéb: én a régebbi verzión úgy próbáltam megcsinálni a táblázatokat mobilra (bár főleg a trackerre koncentráltam), hogy a 2. oszloptól kezdve egymás alá/fölé raktam a cellákat.

Így gyakorlatilag 4 oszlopnál 1 helyet (5-nél már 2-t) meg tudtam spórolni a cím/tárgy/tartalom javára.

Szerintem aránylag elfogadhatóan néz úgy ki, minden információ megmarad, nem kell scroll, és nincs szükség javascript varázslásra sem.

Ez miért probléma? Mobilon amúgy se árt, ha egy sor legalább 48px magas, hogy kényelmesen el lehessen találni. Két sorba rakva az információt szépen tálalható volna.

User -> Topicnév 15 (2 új)
Cím cím cím cím cím cím cím............................ 45 perce

Ez nyilván egy sornyi adatot jelent, esetleg érdemes váltakozó háttérszíneket használni ennek a kiemelésére. De a border ami most van az is teljesen jó. Nem tudom itt ábrázolni, de user topicnév és mondjuk az eltelt idő lehetne mondjuk kis fontmérettel, hogy a cím kitűnjön. 

A cím tud több sorba törni, így csak usernév + topicnév + count-nak kell kiférnie, az meg kifér. 

Táblázatnál a legjobb eszköz a reszponzivitásra ha az adatokat másképp tálaljuk. Se a szűkítés, se a kis helyre nyomorítás nem ideális.

Ezt múltkor úgy fogalmaztam meg egy webes form (kb ilyen adóbevallásra gondolj) szétszedésénél, hogy ha egy sakktáblát szét kell fűrészelnem de úgy, hogy minden mezője beleférjen egy csőbe akkor abból egy colstock lesz, ezvan.

nyilván a HUP törzsközönsége (velem együtt) öregszik, ami azt is jelenti, egyre nehezebben viseljük a változást - a vérmérsékletünk csak ennek a befolyásolását változtatja, a ténye az sajnos biológia.

A fórumblokkban a megoldás tényleg a listára váltás, max ha hosszú, kaphat egy “expand” gombot az alján. Közbe azon gondolkozom, hol van még táblázat.

A másik probléma nyilván a mobilkompatibilis hozzászóláskezelés, amely feladatért nem irigyellek, az szinte biztos, hogy kell egy minimumszélességet meghatározni, ott esetleg elképzelhető hogy ki kéne scrollozni oldalra. Nem tudom, nyilván ha nem létezne itt ez a hagyomány akkor az egész reply-to-reply-to-reply-t dobni kéne a francba... kérdés lehet-e pl reddites megoldást elővenni erős reputáció (nagy pluszegyezési aktivitás) nélkül...

Én a fölső menüt cserélném egy olyanra hogy [ hírfolyam és fórum friss | "Egyéb oldaldobozok" | Követett tartalmak ].

Nyilván ennek megvan az a hátránya hogy főhelyen kint kell lennie bizonyos boxoknak a tulajdonos kérésére - gondolom én (álláshirdetések, hwsw hírek) amik megnehezítik ennek a kultúrált megvalósíását.

Viszont a linkelt táblafűrész egy agyrém.

Fogalmam sincs, mi az a tablesaw.

Nem lehet reszponzívnak elkészíteni, hogy a szélesség alapján először pl. rövidítést vagy szöveg helyett kis piktogrammot használjon a fejlécben, aztán ha még tovább csökken a szélesség, akkor elkezdje elhagyni a felesleges oszlopokat, pl. fórum és szerző.
Aztán lehet a maradék 3 oszlop tartalmával kezdeni valamit, pl. 10 (10 új) helyett lehet 10/10, 1 órája, 18 perce -> 1ó, 18p
Ezután meg a címet lehet vagy csonkolni, vagy elkezdeni több sorba törni, tetszés szerint.

A fenti három opció közül melyik csinálja ezt meg?

Szerkesztve: 2019. 11. 11., h - 22:20

Az activity és a könyvjelzők még elmegy úgy-ahogy, de a főoldalon nem lehetne összevonni a Válaszok és a Legutóbbi beküldés oszlopokat? Pl.

  Tárgy Válaszok
új / összes
Fórum Szerző
📫 TOSLINK furcsaságok 17 / 17 (0 perce) Hangkártyák tovis
📬 ilyet sem láttam még 29 / 68 (3 perce) Linux-security tovis
📭 Vírusírtó linuxra 0 / 28 (34 perce) Debian GNU/Linux Adamyno
📪 Ubuntu Touch -> BQ Aquaris M10 0 / 0 (8 órája) Android sigellef

Néhány egyéb változtatás, pl.

  • a "pár másodperce" helyett lehetne "0 perce", "<1 perce" vagy "most"
  • hasonlóan, az "egy órája" helyett "1 órája"
  • az új és frissült címkék jobb elhelyezése vagy leváltása, ez lehet CSS-sel, lehet egy keskeny oszloppal a boríték ikonok helyett (az amúgy is redundáns, nem?)

Mielőtt kiraktad a posztot, már elkezdtem rajzolni, én ilyenre gondolnék:

 

https://imgur.com/a/OXKsB7j?

 

(a felső kb az, ami most van, az alsó ugyanazok a posztok csak mobilra optimalizálva flexbox-szerűen)

Szerkesztve: 2019. 11. 11., h - 22:49

Az van amúgy, hogy a fórumtárgynak mobilon kell kb a teljes oldalszélesség, kész, semmi értelme törni. Most kb. a harmadát kapja, de háromszor ennyi kell neki, még a HUP amúgy nem épp lórúgás méretű betűivel is :( szerintem.

nem utogetek entereket.

2 entert utok: az elso a soremeles, a masodik az uj bekezdes.

Ez minden hol igy mukodik, kodolaskor,

de barmelyik online wysiwyg editorban is.

https://en.m.wikipedia.org/wiki/WYSIWYG

Saying a programming language is good because it works on all platforms is like saying anal sex is good because it works on all genders....

Jah, itt már majdnem jól csináltad. Mutatom a különbséget forráskód szinten:

<p>Mar megint nincs "egyeb" opcio a szavazasnal.</p>

<p>&nbsp;</p>

<p>Pl. erre van a colspan kitalalva:</p>

<p>https://html.com/tables/rowspan-colspan/#Using_colspan_for_multi-column_headings</p>

vs.

<p>nem utogetek entereket.</p>

<p>2 entert utok: az elso a soremeles, a masodik az uj bekezdes.</p>

<p>Ez minden hol igy mukodik, kodolaskor,</p>

<p>de barmelyik online wysiwyg editorban is.</p>

<p>https://en.m.wikipedia.org/wiki/WYSIWYG</p>

<p>&nbsp;</p>

Azt kellene elérni, hogy ezek az &nbsp;-k ne legyenek. Márpedig azok Enter-re születnek. Szerintem.

trey @ gépház

wyiswyg. Amikor irom, nalam jol jelenik meg.

 

Mondjuk az kicsit zavaro, amikor az egyik sor betumerete nagyobb a tobbinel. Kicsit megzavar a terkoz felismereseben.

https://m.imgur.com/a/SoHj7ed

Saying a programming language is good because it works on all platforms is like saying anal sex is good because it works on all genders....

Abban a kommentben nincs Enter, értem miről beszélsz, csak annak semmi köze ehhez a témához:

<p>A nagy liberális demokráciákban, PC-világban ez hol lenne "törvényes"? Milyen alapon?</p>

<p>Mi lehetett az indok? Elolvasva a cikket nekem az jött le, hogy jól végezte a munkáját. Ha pedig a McDonald's nem volt elégedett, akkor törvényes / jogszerű / etikus volt-e erre&nbsp; hivatkozva elküldeni? Meg merték volna csinálni? Nem hiszem. Amilyen képmutatónak én megismertem a McDonald's-t, simán elhiszem, hogy le van náluk írva, hogy tilos.</p>

 Ellenben barátunk újabb kommentjében:

<p>&gt; Ez nem kötelező.</p>

<p>&nbsp;</p>

<p>Jah, aztan amint a tobbsegnel turkalnak a kisebbseg le lesz szarva.</p>

<p>Lasd kotelezo bankszamla lete, de millio pelda van, hogy valamit bevezetnek aztan amikor elterjed mar nem hagynak kibujni belole.</p>

<p>&nbsp;</p>

<p>En orulok, hogy akkora atlagember vagy, hogy semmifele takargatni valod sincs.</p>

<p>Igy tovabb.</p>

Érdemes lenne különbséget tenni az user által feleslegesen bevitt Enter és a kirendereléskor odatett sortörés közt. Utóbbi ha szándékosan (fejlesztői döntés) vagy hiba (Drupal bug) került oda, azt javítani kell. Az előzővel meg az user tud mit kezdeni.

trey @ gépház

Nem a felhasználó viszi be a nem törő szóközt. Vagy eleve szar a CKEditor, vagy szarul lett beállítva. Nyomok négy entert a színes-szagos szerkesztőben, és folytatom:

 

 

 

Ennyi. A böngészők emberemlékezet óta elrejtik az üres bekezdéseket. Itt ez a szokásos/szabványos működés lett felülbaszva. Egyébként vicces, hogy ha forráskód nézetben viszek be egy valóban üres bekezdést, előnézetkor vagy másik szerkesztő-nézetre váltáskor belerak egy nem törő szóközt. Faszság a felhasználót vegzálni, miközben a ti hibátok, hogy szarul működik a szerkesztő.

Természetesen a folyó szövegben megjelenő nem törő szóköz egy másik hiba.

:)

Két entert ütsz. Azért szúrja be, mert feltételezi, hogy te oda szándékosan egy üres paragrafust akartál, és nem csak hülyeségből nem volt elég egy.

Miért raksz oda egy üres paragrafust, és várod el hogy a böngésző elrejtse? Miért nem elég egy entert nyomni a sor végén a paragrafus lezárásához?

Légyszi akkor, mert nem gondolnám annak. Ütsz egy entert a sor végén, lezárja a pargarfust. Ütsz mégegyet, lezárja azt is, és azért, hogy ott is maradjon, belerak egy nbsp-t. Ez történik, és ez a működés amit megszokhattál volna más hasonló szerkesztőbe. Lehet baromnak hívni, a tényeken nem változtat.

Nem, ez csak egy workaround egy olyan problémára, ami wordön nem létezik.

Igazából mivel van a probléma? A nem törő szóközzel, vagy azzal, hogy nagyon nagy paragrafustávok vannak az írásaidban? Szerintem egyik se vészes probléma. Ideális esetben az ember nem akar üres paragrafusokat hagyni. Ha pedig akar, jó hogy van opció rá. 

A működés pedig (nem a szóköz, hanem a leütendő enterek száma) konzisztens más vizuális szerkesztővel.

[quote]Nem, ez csak egy workaround egy olyan problémára, ami wordön nem létezik.[/quote]

Nem, ez maga a probléma.

[quote]Igazából mivel van a probléma? A nem törő szóközzel, vagy azzal, hogy nagyon nagy paragrafustávok vannak az írásaidban?[/quote]

He? Az írásaim formailag közel tökéletesen szerkesztettek. Ha üres bekezdést akarok, megoldom, ahogy kedvemre való.

[quote]Ideális esetben az ember nem akar üres paragrafusokat hagyni. Ha pedig akar, jó hogy van opció rá.[/quote]

Jaja, add el a hibát funkciónak.

[quote]A működés pedig (nem a szóköz, hanem a leütendő enterek száma) konzisztens más vizuális szerkesztővel.[/quote]

Ez sosem volt kérdés. Felesleges volt leírnod. (Ezt is.)

Nincs előnézet gomb. Mi lesz itt két-három év múlva... :D

(BBCode zombi)

:)

A legtöbb szövegszerkesztőben egy enter a paragrafustörés, sortörésre a shift-enter való. Itt is, de más vysiwyg szerkesztőben is, amit használtam.

A linkedet megnéztem, de TLDR, hol írja, hogy ez kötelező érvényűen így van. Amit te írsz, az a plaintext szerkesztőkre jellemző. Ez nem az. A wysisyg szerkesztők jellemzően nem azok. Ez a működés pedig szimplán nem hiba.

A főoldali fórumblokkal az a baj -szerintem-, hogy mobil nézetben a leglényegesebb információnak (a topikok címe) jut a legkevesebb hely, míg ott  van mellette 4 másik oszlop, ami tök lényegtelen. Tudjuk, hogy itt mindig a legfrissebb témák vannak, miért kell kiírni, hogy 5 perce vagy 1 órája szólt hozzá valaki? Nem mindegy? Meg lehet jelölni valahogy (ikon, flag, szín(!)) hogy van új hozzászólás. 
Ennek nem is táblázatnak kéne lennie, hanem mondjuk egy unordered listnek, benne divekkel. Akkor meg lehetne így csinálni, hogy a topik cím mobil nézetben is teljes szélességű legyen, a többi infó (ha már kell) lehetne a cím alatt egy sorban egy másodlagos színnel és betűmérettel.

Valami ilyesmit tudnék elképzelni:
https://imgur.com/TAUQ9Zt
 

De ha már táblázat, magán a táblázaton is lehetne csiszolni, én pl mindent balra igazítanék (fejléceket is) és a sorok közé mindenképp tennék még paddingot (mert a topik címek mobil nézetben összefolynak), illetve becsíkoznám (egyik sor egy árnyalattal világosabb, másik sötétebb háttérrel). A felesleges infókat meg mobil nézetben akár teljesen eltüntetném a topik címek javára, mint pl a mobilarénán.

 

Valami ilyesmit tudnék elképzelni:
https://imgur.com/TAUQ9Zt

Ez pont a colspan hozzaszolasom.

Ha unordered list-et csinalsz, akkor a subheader cellai nem lesznek ilyen szepen oszlopokba rendezve.

Saying a programming language is good because it works on all platforms is like saying anal sex is good because it works on all genders....

"Ha unordered list-et csinalsz, akkor a subheader cellai nem lesznek ilyen szepen oszlopokba rendezve."

Ez csak CSS kérdése, hogy a subhaderben lévő divek hogy vannak egymás mellé rendezve. Sok ilyet csináltam anno.

Én a táblázatos elrendezésed nem tudom elképzelni. Ami dekstop nézetben egymás _melletti_ oszlopokban van infó (a topik cím mellett még 4db td), az hogy fog egymás alá kerülni mobil nézetben, ha egyszer maga a html szerkezet ugyanaz?

en mindenhol (desktop, mobil), igy kepzelnem el,

hogy elso sor a topik cime, a masodik sor (akar masik hatterszinnel) pedig

a kiegeszito infok.

Mindegy, a kep amit posztoltal, ugy kellene kineznie.

Saying a programming language is good because it works on all platforms is like saying anal sex is good because it works on all genders....

Nekem a tieddel az a bajom hogy az még az én féllapát telefonomhoz képest is túl széles, de az irány azonos.

Abban egyetértünk, hogy a topic címének kell egy full sor. 

Abban is egyetértünk, hogy ez minimum 2 soros sztori innentől kezdve (a második sor a meta)

Hogy a metából mi a fontos, azt nem tudom. Talán a fórumkategória, és az, hogy érkezett-e új hozzászólás amióta ránéztem (most le lett véve az "új" badge, de ha végiggondoljuk, a "15 hozzászólás (3 új)" is ugyanezt a célt szolgálja). 

Hogy desktopon kell-e kétsoros azt nem tudom, lehet hogy ott a hagyományörző testületek fellázadnak és marad a táblázat.

Én azt támogatnám ha mobilon a táblázat egy kvázi hírfolyammá változna. Mondjuk 2 block / képernyő és akkor abba belefér minden információ.

Az egy irányú "lapozás" mobilon nem gond,egy kézzel is gyorsan fel le pörget az ember egy oldalt de ha oldalra is kell mozgatni hogy megtudj mindent akkor az már nagyon kényelmetlen.

// Hocus Pocus, grab the focus
winSetFocus(...)

http://c2.com/cgi/wiki?FunnyThingsSeenInSourceCodeAndDocumentation

Táblafűrész 4 EVER!!!!

"Csak webfejlesztést ne..." -ismeretlen eredetű szállóige-