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

Szedar
Użytkownik
Dołączył: 2019-12-01

Nowa drobna zmiana na ANSI

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.

Offline

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

Diablo
Użytkownik
Dołączył: 2008-08-17

Odp: Nowa drobna zmiana na ANSI

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.


Nie jest umarłym ten, który spoczywa wiekami, nawet śmierć może umrzeć wraz z dziwnymi eonami

Życie jest spacerem cieni, biednych aktorów. Kroczą dumnie przez godzinę po scenie, a potem znikają i nikt już o nich nie słyszy.

250x50.png

Offline

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

Tensazen
Użytkownik
Skąd: Kielce
Dołączył: 2011-03-06

Odp: Nowa drobna zmiana na ANSI

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

Offline

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

Szedar
Użytkownik
Dołączył: 2019-12-01

Odp: Nowa drobna zmiana na ANSI

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.

Offline

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

kostek00
Użytkownik
Skąd: Lublin
Dołączył: 2009-01-22

Odp: Nowa drobna zmiana na ANSI

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ć.


Jestem słodki jak miód, człowiek - ciacho; genetyczny cud!  xD

Offline

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

Maku
Użytkownik
Dołączył: 2005-08-02

Odp: Nowa drobna zmiana na ANSI

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.

Offline

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

kenem
Użytkownik
Dołączył: 2016-11-18

Odp: Nowa drobna zmiana na ANSI

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.


g2qb5.gif

Offline

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

Szedar
Użytkownik
Dołączył: 2019-12-01

Odp: Nowa drobna zmiana na ANSI

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ę.

Offline

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

Szedar
Użytkownik
Dołączył: 2019-12-01

Odp: Nowa drobna zmiana na ANSI

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)

Offline

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

bodzio
Użytkownik
Skąd: Szczecin
Dołączył: 2006-05-18

Odp: Nowa drobna zmiana na ANSI

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?


wladza1.png

Offline

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

Hunter Killer
Moderator
Skąd: Zielona Góra
Dołączył: 2011-03-29

Odp: Nowa drobna zmiana na ANSI

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


155222.jpg zzsldjt.png

Offline

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

Szedar
Użytkownik
Dołączył: 2019-12-01

Odp: Nowa drobna zmiana na ANSI

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.

Offline

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

OtsukareSama
Użytkownik
Skąd: Nippon
Dołączył: 2016-04-12

Odp: Nowa drobna zmiana na ANSI

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
ANSI3png_qqwhrnh.png


【「能ある鷹爪隠す」  &「A skilled hawk hides its talons」】

Offline

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

SoheiMajin
Moderator
Skąd: Gdańsk
Dołączył: 2009-04-10

Odp: Nowa drobna zmiana na ANSI

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.

Offline

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

konata_i
Użytkownik
Dołączył: 2020-11-11

Odp: Nowa drobna zmiana na ANSI

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.

Offline

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

FAiM
Użytkownik
Skąd: Warszawa
Dołączył: przed 2004-07-25

Odp: Nowa drobna zmiana na ANSI

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);
}

function setShowSub()
{
  var cookies = getCookie(["showSub", "showIndex"]);
  cookies["showSub"] = localStorage.getItem("showSub");
  cookies["showIndex"] = localStorage.getItem("showIndex");
 
  var selectShowSub = document.getElementById("showSub");
  if(cookies["showSub"])
  {
    selectShowSub.value = cookies["showSub"];
    changeShowSub();
  }
 
  var checkboxShowIndex = document.getElementById("showIndex");
  if(cookies["showIndex"])
  {
    checkboxShowIndex.checked = JSON.parse(cookies["showIndex"]);
    changeShowIndex();
  }
}

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)...


K5Cqyo6.png?1

Offline

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

Szedar
Użytkownik
Dołączył: 2019-12-01

Odp: Nowa drobna zmiana na ANSI

@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.

Offline

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

FAiM
Użytkownik
Skąd: Warszawa
Dołączył: przed 2004-07-25

Odp: Nowa drobna zmiana na ANSI

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.


K5Cqyo6.png?1

Offline

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

pixpix
Użytkownik
Dołączył: 2004-08-20

Odp: Nowa drobna zmiana na ANSI

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...

Offline

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

Szedar
Użytkownik
Dołączył: 2019-12-01

Odp: Nowa drobna zmiana na ANSI

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 oczkod. 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.

Offline

Stopka forum

© Animesub.info 2024