Nowa drobna zmiana na ANSI

Szedar · 2020-11-28 00:56:24

Jak pewnie zauważyliście dzisiaj pojawiła się mała aktualizacja na stronie głównej ANSI. Jestem autorem tego kodu, mam nadzieję że się wam podoba i że będzie to działać.
Chciałbym w tym wątku zebrać opinie czy taka forma wam odpowiada, a może coś zmienić (kolory, układ, dodać kolejną opcję - dwie kolumny jedna pod drugą). Starałem się zrobić tak żeby każdy mógł dostosować pod siebie łącznie z możliwością zostawienia pierwotnej formy. Zgłaszajcie też tutaj błędy, które zauważycie, będę się starał poprawiać jeśli wystąpią.

Jeśli chodzi o przyszłość to całkiem możliwe że pojawi się więcej takich małych aktualizacji, poprawiających funkcjonowanie strony. Obecnie wgryzam się w kod i myślę nad nowymi funkcjami. Uprzedzam że ewentualne przyszłe modyfikacje będą drobne, które nie będą wymagały przepisywania dużej części obecnego kodu. Jeśli macie jakieś propozycje to możecie napisać, może się rozpatrzy.

Diablo · 2020-11-28 01:04:25

W mojej ocenie poprawki wyglądają w porządku. Dobór barw jest estetyczny, poszczególne rodzaje napisów są wyraźnie rozróżnione, a i też każdy użytkownik może sobie dostosować wyświetlaną listę pod kątem preferencji. Błędów nie stwierdziłem żadnych.

Tensazen · 2020-11-28 01:06:19

Każda zmiana zawsze na plus, oby tak dalej smile

Szedar · 2020-11-28 01:22:19

Zapomniałem dodać że wasz wybór jest zapamiętywany, więc po ponownym wejściu na stronę powinno automatycznie przełączyć się na wasze preferencje. Chyba że ktoś nie odwiedzałby ANSI przez ponad 100 dni to wtedy będzie ustawienie domyślne.

kostek00 · 2020-11-28 01:35:38

Mam prośbę, mógłbyś napisać dokładnie co zostało dodane/zmienione? W ten sposób będę wiedział dokładnie w razie czego co mam poprawić w mojej skórce do strony głównej. Jak na razie to widziałem 3 rzeczy, które będę musiał poprawić.

Maku · 2020-11-28 01:43:33

Właśnie zaktualizowałem napisy i opis do: 100-man no Inochi no Ue ni Ore wa Tatte Iru ep01 i pojawia się tylko jako nowe.

kenem · 2020-11-28 01:46:00

Szedar napisał:

Zapomniałem dodać że wasz wybór jest zapamiętywany, więc po ponownym wejściu na stronę powinno automatycznie przełączyć się na wasze preferencje. Chyba że ktoś nie odwiedzałby ANSI przez ponad 100 dni to wtedy będzie ustawienie domyślne.

widziałem w kodzie, że oparte to jest o cookies - może warto dodać to do ustawień profilu, tak by po zalogowaniu automatycznie brało to ustawienie.

Szedar · 2020-11-28 03:03:15

Maku napisał:

Właśnie zaktualizowałem napisy i opis do: 100-man no Inochi no Ue ni Ore wa Tatte Iru ep01 i pojawia się tylko jako nowe.

Nie chce mi się teraz dokładnie sprawdzać, ale jak się zrobi aktualizację w mniej niż 24h od dodania to status napisów zostawiany jest jako nowe. W tym aspekcie nic nie było ruszane, takie coś już od dawna istniało. Wydaje mi się że to dobry system bo jak ktoś coś zapomni i zrobi aktualizacje po godzinie to napisy nie wylecą na drugą listę.

Szedar · 2020-11-28 03:11:02

kenem napisał:

widziałem w kodzie, że oparte to jest o cookies - może warto dodać to do ustawień profilu, tak by po zalogowaniu automatycznie brało to ustawienie.

Wersja z ciasteczkami była szybsza i prostsza w implementacji. Każdorazowe odwiedzenie strony głównej odświeża ciasteczko, więc dopiero jak ktoś nie będzie wchodził na główną przez 100 dni to ustawienie zresetuje się. Przełączanie i zapamiętanie ustawienia jest banalnie proste, niż wchodzenie w profil, jak komuś się zresetuje to tylko dwa kliknięcia.

kostek00 napisał:

Mam prośbę, mógłbyś napisać dokładnie co zostało dodane/zmienione? W ten sposób będę wiedział dokładnie w razie czego co mam poprawić w mojej skórce do strony głównej. Jak na razie to widziałem 3 rzeczy, które będę musiał poprawić.

Z graficznego punku widzenia to niewiele:

- pole select (id="showSub")
- checkbox (id="showIndex")
- napisy "Wyświetl" i "Pokaż indeksy" (class="NewNag" - tak klasa już istniała)
- indeksy dolne "NOWE", "AKT..." (class="indexDown" - tylko tutaj każdy ma tą samą klasę, więc nie wiem jak z indywidualną zmianą koloru)

Tylko że nic nie było modyfikowane w css. Nie było tego wiele, więc zostało wrzucone w znacznik "style' html'u.

Ostatnio edytowany przez Szedar (2020-11-28 03:20:41)

bodzio · 2020-11-28 09:38:20

Jedna uwaga, chociaż nie wiem, czy pisać o niej w tym wątku... w skórce 'zielony' informacja 'nowe' jest w kolorze żółtym... na białym tle, więc wygląda to dziwnie (w stylu 'nowoczesny' jest dobrze). Może trzeba by zmienić to na czerwony dla kontrastu?

Hunter Killer · 2020-11-28 10:48:09

Swoją drogą proponuję wrzucić ten panel wyboru do profilu. Każdy sobie ustawi i potem nie będzie go już widział na głównej. Kwestia estetyki i zbędnych menusów zachowana smile

Szedar · 2020-11-28 12:45:58

bodzio napisał:

Jedna uwaga, chociaż nie wiem, czy pisać o niej w tym wątku... w skórce 'zielony' informacja 'nowe' jest w kolorze żółtym... na białym tle, więc wygląda to dziwnie (w stylu 'nowoczesny' jest dobrze). Może trzeba by zmienić to na czerwony dla kontrastu?

Słuszna uwaga, pracowałem na jednym stylu i nawet tego nie uwzględniłem. Przerzucę definiowanie kolorów do css, zamiast robić to na sztywno i ustawię coś bardziej kontrastowego.

Co do przerzucenia opcji do ustawień profilu to rozważę, ale panel na głównej powinien zostać do szybkiego przełączania.

OtsukareSama · 2020-11-28 13:21:40

Szedar napisał:

[...] Chciałbym w tym wątku zebrać opinie czy taka forma wam odpowiada, a może coś zmienić (kolory, układ, dodać kolejną opcję - dwie kolumny jedna pod drugą). [...] Zgłaszajcie też tutaj błędy, które zauważycie, będę się starał poprawiać jeśli wystąpią. [...]

Tak właściwie to wszystko o czym pisałem tutaj. Ale jeśli chodzi samą listę napisów na głównej stronie, to:

3. Na stronie głównej ograniczenie pola newsów do tytułów i ich skrótów do komentarzy, a w powstałe miejsce, rozszerzenie go o pole boczne z napisami.

Może coś na wzór:

Pokaż spoiler

SoheiMajin · 2020-11-28 14:29:14

Szedar napisał:

Co do przerzucenia opcji do ustawień profilu to rozważę, ale panel na głównej powinien zostać do szybkiego przełączania.

Moim zdaniem wystarczyłoby dodać możliwość ukrywania tego panelu i odkrywania po kliknięciu w jakiś nierzucający się w oczy znaczek.

konata_i · 2020-11-28 14:36:17

Bardzo dobra zmiana, dałoby się jeszcze zrobić możliwość wyboru ilości napisów, czasem by się przydało więcej niż 40?

Dobrze by też było aby takie same opcję były w Archiwum, to głównie tam sprawdzam napisy.

FAiM · 2020-11-28 16:05:29

Po pierwsze, skoro ustawienia nie są w żaden sposób wykorzystywane przez serwer, to wywaliłbym je z ciasteczek i wrzucił do localStorage (dodatkowo zniknie problem wygaśnięcia ciasteczka).

Druga sprawa, teraz w kodzie strony mamy 120 ostatnich napisów (40 nowych/zaktualizowanych, 40 nowych i 40 zaktualizowanych).
Patrząc na to odnoszę wrażenie, że po stronie serwera są to po prostu 3 zapytania do bazy danych...
A przecież wystarczyło by wypluć 40 nowych i 40 zaktualizowanych.

Dodatkowo całe "indexy" wrzuciłbym co css-a - żeby dało radę łatwo to dopasować do innych skórek.

Poniżej mój kod:

Pokaż spoiler css

.subNew a:after {
content: 'NOWE';
color: rgb(255, 234, 0);
font-size: 9px;
display: inline-block;
vertical-align: super;
}

.subUpdate a:after {
content: 'AKT...';
color: rgb(0, 166, 147);
font-size: 9px;
display: inline-block;
vertical-align: super;
}

.subNew.hideIndex a:after, .subUpdate.hideIndex a:after {
display: none;
}

Pokaż spoiler showSub.js

function changeStyle(elements, name, value)
{
for (var elem of elements) {
elem.style[name] = value;
}
}

function addClass(elements, name)
{
for (var elem of elements) {
elem.classList.add(name);
}
}

function removeClass(elements, name)
{
for (var elem of elements) {
elem.classList.remove(name);
}
}

function changeShowSub()
{
var selectShowSub = document.getElementById("showSub");
var SubNew = document.getElementsByClassName("subNew");
var SubUpdate = document.getElementsByClassName("subUpdate");
var SubMix = document.querySelectorAll('.subNew, .subUpdate');
var NewData = document.getElementsByClassName("NewData");
var UpdateOnlyDat = document.getElementsByClassName("UpdateOnlyDat");
var NewOnlyData = document.getElementsByClassName("NewOnlyData");

localStorage.setItem("showSub", selectShowSub.value);

switch(selectShowSub.value)
{
case "new":
changeStyle(NewData,"display","");
changeStyle(UpdateOnlyDat,"display","none");
changeStyle(SubMix,"display","none");
changeStyle(SubNew,"display","");
break;

case "update":
changeStyle(NewData,"display","");
changeStyle(NewOnlyData,"display","none");
changeStyle(SubMix,"display","none");
changeStyle(SubUpdate,"display","");
break;

case "mix":
changeStyle(NewData,"display","");
changeStyle(SubMix,"display","none");
changeStyle(Array.prototype.slice.call( SubMix, 0, 40),"display","");
break;
}
}

function changeShowIndex()
{
var checkboxShowIndex = document.getElementById("showIndex");
var SubMix = document.querySelectorAll('.subNew, .subUpdate');

if(checkboxShowIndex.checked)
removeClass(SubMix, "hideIndex");
else
addClass(SubMix, "hideIndex");

localStorage.setItem("showIndex", checkboxShowIndex.checked);
}

window.addEventListener("DOMContentLoaded", setShowSub);

Jednak aby to działało, po stronie serwera musi wypluwać w ten sposób:
nowe napisy:

<span class="subNew">- <a href="/szukaj.php?ID=71987" class="MBNN" title="Autor: AniTranslators">Enen no Shouboutai: Ni no Shou ep22 </a></span>

zaktualizowane napisy:

<span class="subUpdate">- <a href="/szukaj.php?ID=71936" class="MBNN" title="Autor: Sakus">Ikebukuro West Gate Park ep07</a></span>

Oraz dodatkowo daty tylko z nowymi napisami muszą mieć klasę "NewOnlyData", natomiast te z tylko zaktualizowanymi - "UpdateOnlyDat".

Dzięki czemu unikniemy wysyłania przez serwer zdublowanych danych oraz możemy ograniczyć ilość zapytań do bazy danych (jeśli rzeczywiście zostało to zrobione po najmniejszej linii oporu)...

Szedar · 2020-11-28 17:05:39

@FAiM

Generowane są trzy tabelki, więc z poziomu html'a masz 120 wpisów dublujących się i w zależności od opcji są ukrywane. Zapytanie do bazy miało być jedno (80 napisów), ale ze względów technicznych (sortujących) zostały dwa (40 + 80).

Kwestia przerzucenia indeksów do css już jest prawie gotowa.

FAiM · 2020-11-28 17:34:01

Szedar napisał:

Generowane są trzy tabelki, więc z poziomu html'a masz 120 wpisów dublujących się i w zależności od opcji są ukrywane.

Wiem jak to obecnie działa oczkod . W mojej wersji wystarczy jedna tabelka z 80 wpisami - resztą zajmuje się już przeglądarka.
Jedyną "trudnością" może być ustalenie "NewOnlyData" i "UpdateOnlyDat" - ale bez kodu strony to mogę jedynie wróżyć z fusów oczkod .

Zapytanie do bazy miało być jedno (80 napisów), ale ze względów technicznych (sortujących) zostały dwa (40 + 80).

Tutaj również się nie wypowiem, bo nie wiem jak wygląda baza danych, ale myślę, że przy mojej wersji dałoby się ograniczyć do jednego zapytania.

Kwestia przerzucenia indeksów do css już jest prawie gotowa.

Gotowca masz już wyżej oczkod .

pixpix · 2020-11-28 17:44:49

Witam
Mogę prosić o poszerzenie prawej strony z nowymi/zaktualizowanymi napisami.
W tej chwili większość napisów nie mieści się w jednej linii i ogarnięcie tytułów sprawia mi problem. A może nie tylko mi...

Szedar · 2020-11-28 18:34:34

FAiM napisał:

Szedar napisał:
Generowane są trzy tabelki, więc z poziomu html'a masz 120 wpisów dublujących się i w zależności od opcji są ukrywane.
Wiem jak to obecnie działa . W mojej wersji wystarczy jedna tabelka z 80 wpisami - resztą zajmuje się już przeglądarka.

Wiem o co ci chodzi, pierwotnie miałem podobne założenie. Chciałem zrobić listę 80 wpisów i w zależności od opcji ukrywać lub je pokazywać. Tylko nie udało mi się ułożyć takiego zapytania do bazy aby otrzymać posortowane wpisy od daty dlatego zmieniłem koncepcje. Jeśli chodzi o bazę to dostaję listę 80 napisów, ale jest to lista 40 nowych (sort od daty) + 40 update (sort od daty). Generowana wtedy lista wyglądała że było 40 napisów nowych, a pod nimi 40 napisów aktualizowanych. Sortowanie tego dodatkowo trochę komplikowałoby kod.
Miało być jeszcze tak że opcja "Wszystkie" wyświetlała 40 nowych, a pod nimi 40 aktualizacji. Wtedy było tylko 80 wpisów w kodzie, ale chciałem zachować też pierwotną koncepcję, dlatego jest dodatkowa tabelka z 40 wpisami. Generowanie 80 wpisów vs 120, myślę że serwer od tego nie umrze smile_big . Jak uda mi się wygenerować inne zapytanie do bazy to pewnie to poprawię.

Jeśli komuś to potrzebne to można dodać 4 opcję "Dwie tabele", wyświetlałaby 40 nowych, a pod nimi 40 aktualizacji.

P.S. @FAiM nie zrobiłem to starannie, ale wrzuciłem ten kod co napisałeś na testowy serwer. Nie wiem czemu ale wpisy są ukrywane, ale już nie przesuwane i w efekcie wygląda to tak że zostaje puste pole na 40 wpisów.

Forum AnimeSub.info

#1 2020-11-28 00:56:24

Nowa drobna zmiana na ANSI

#2 2020-11-28 01:04:25

Odp: Nowa drobna zmiana na ANSI

#3 2020-11-28 01:06:19

Odp: Nowa drobna zmiana na ANSI

#4 2020-11-28 01:22:19

Odp: Nowa drobna zmiana na ANSI

#5 2020-11-28 01:35:38

Odp: Nowa drobna zmiana na ANSI

#6 2020-11-28 01:43:33

Odp: Nowa drobna zmiana na ANSI

#7 2020-11-28 01:46:00

Odp: Nowa drobna zmiana na ANSI

#8 2020-11-28 03:03:15

Odp: Nowa drobna zmiana na ANSI

#9 2020-11-28 03:11:02

Odp: Nowa drobna zmiana na ANSI

#10 2020-11-28 09:38:20

Odp: Nowa drobna zmiana na ANSI

#11 2020-11-28 10:48:09

Odp: Nowa drobna zmiana na ANSI

#12 2020-11-28 12:45:58

Odp: Nowa drobna zmiana na ANSI

#13 2020-11-28 13:21:40

Odp: Nowa drobna zmiana na ANSI

#14 2020-11-28 14:29:14

Odp: Nowa drobna zmiana na ANSI

#15 2020-11-28 14:36:17

Odp: Nowa drobna zmiana na ANSI

#16 2020-11-28 16:05:29

Odp: Nowa drobna zmiana na ANSI

#17 2020-11-28 17:05:39

Odp: Nowa drobna zmiana na ANSI

#18 2020-11-28 17:34:01

Odp: Nowa drobna zmiana na ANSI

#19 2020-11-28 17:44:49

Odp: Nowa drobna zmiana na ANSI

#20 2020-11-28 18:34:34

Odp: Nowa drobna zmiana na ANSI

Stopka forum