Logo mark Archiwum

Panel klienta 3.0 - wersja poglądowa frontendu

LVL UP
SystemZ
SystemZ Admin lvlup.pro

Powoli nadchodzi długo zapowiadany panel klienta 3.0 i chciałbym podzielić się z wami postępami w tej sprawie.

W większości użytkownicy kojarzą panel klienta po wyglądzie. Był już wątek przedstawiający projekt wyglądu: https://lvlup.rok.ovh/t/projekt-nowego-panelu-klienta-v3-0/541

Z tym projektem było kilka problemów.

  • kolorystyka która pasowałaby do lvlup.pro wymagała dużych zmian w kodzie stylów który pochodził od innych developerów
  • te własne zmiany w kodzie byłyby bardzo bolesne przy chęci aktualizacji tego frameworka CSS
  • mało gotowych do wykorzystania elementów wizualnych potrzebnych w panelu klienta co oznacza pisanie własnych, zajmuje to dużo czasu plus tworzenie ich zazwyczaj łamałoby ten już ustalony wcześniej styl co powodowałoby niespójny interfejs

Duże, bolesne i skomplikowane zmiany oznaczają dużo pracy a dość mało widocznych efektów co nie jest przyjazne ani dla was drodzy klienci ani dla mnie. Dużo lepiej jak czas jest przeznaczany na wprowadzanie nowych funkcji do panelu lub jeszcze lepszych ofert więc postanowiłem ugryźć to od innej strony.

Przedstawiam drugie podejście do tematu, tym razem projekt jest zbudowany z elementów inspirowanych Material Design. https://demomy.lvlup.pro/

Dane do logowania można uzyskać generując konto z losowymi danymi na poglądowej wersji API https://demoapi.lvlup.pro/v3/auth/register

Framework vuetify.js którego użyłem jest jeszcze bardzo świeży ale pokazuje dynamiczny rozwój a co też ważne, bardzo szybko tworzy się stronę z jego użyciem, to co wcześniej potrafiło zająć wiele linii teraz to tylko jedna, a aktualizacja do nowej wersji bibliotek nie powinna zająć dłużej niż kilka minut.

Sam fakt rozdzielenia frontendu czyli wyglądu panelu od backendu czyli całej mechaniki panelu takiej jak obsługa bazy danych, wysyłanie maili czy system płatności owocuje tym że kod wyglądu mogę śmiało umieścić publicznie a dzięki temu każdy będzie mógł skorzystać z tej wiedzy, stworzyć swój własny projekt na jego bazie oraz dodać funkcjonalność której sam potrzebuje w panelu a jeszcze jej nie ma.

Kod na licencji MIT dostępny na github: https://github.com/lvlup-pro/spawn-frontend-material

Mam do was bardzo gorącą prośbę o opinie na temat wyglądu, czy Material Design wam odpowiada czy wolelibyście jednak coś innego? Do mnie MD przemawia gdyż bardzo szybko się tworzy przy jego pomocy, a sam koncept znamy ze stron Google czy z aplikacji na Androidzie więc uważam że użytkownikom panelu łatwiej będzie znaleźć to czego szukają bo widzieli już wcześniej podobny interfejs.

To generalnie wczesna wersja i jeszcze nie nadszedł czas na zgłaszanie błędów, póki co prosiłbym o informacje co sądzicie na temat wyglądu na podstawie tego co jest.

luxDev
luxDev Pionier

Ja zbytnio nie jestem przekonany do tego wyglądu, moja opinia jest taka, że trochę jest to przesadzone z tym designem, aktualny Panel jest prostszy w obsłudze, bez zbędnych dodatków wizualnych (*może by dodać opcję wyłączenia ich?) i innych opcji, do tego trochę mi nie pasuje też ten pasek po lewo :f

Cały Panel różni się całkowicie od poprzednika, gdyby zaktualizować teraz Panel(wiem że nie jest gotowy) wielu użytkowników by się strasznie pogubiło :P

Ale i tak gratulacje, masa czasu włożonego w obecny wygląd i w ogóle.

SystemZ
SystemZ Admin lvlup.pro

Zanim będzie dostępny tylko panel v3, dalej będzie aktywny panel v2 jednocześnie przez jakiś czas dając czas na przestawienie się. Gdy pytałem o wygląd Aimpanel to sporej ilości się podobał, a też jest MD.

Timo
Timo Moderator forum.lvlup.pro

Wygląda fajnie, nowocześnie, tylko na tym panelu po lewej.. jest zbyt mało funkcji - chyba ze to chwilowo. Powciskał bym tam tak jak jest teraz zakładki serwerów, itp. Ogólnie podoba mi sie - jaki jest w użytkowaniu nie wiem, 'pierwszy rzut oka' wykonałem.

SystemZ
SystemZ Admin lvlup.pro

Względem panelu v2 faktycznie pozycji w menu po lewej jest dużo mniej jednak funkcjonalność nadal jest ta sama. Chcę maksymalnie uprościć obsługę i zamiast obecnych osobnych zakładek do usług, będzie po prostu jedna lista ze wszystkimi usługami.

Do lewego panelu dojdzie jeszcze zakładka z zamówieniami, cała reszta w zasadzie już jest :slight_smile:

anon82750602
anon82750602

Material? Obrzydliwie to wygląda...

Będzie możliwość wrócenia do starego wyglądu?

undefined

Wygląda źle + niezgodne z Material Guidelines

https://material.io/guidelines/components/buttons.html#buttons-flat-buttons

  • Przycisk ma być płaski
  • Przycisk powinien być bez ikony
  • Przycisk powinien być krótki i wyrównany do prawej.

Idziemy dalej...

Za duża czcionka, źle wymierzony bar, ogólnie zła struktura...

undefined

https://material.io/guidelines/layout/structure.html#structure-toolbars

Sam bar powinien być biały i nie powinien wyświetlać informacji jako elementy menu.

undefined

Paginacja.

undefined

Paginacja powinna być jednakowej wielkości, również płaska. Poza tym wystarczyłaby tylko jedna sztuka.

undefined

To wygląda naprawdę źle...

undefined

Tabela powinna być raczej płaska i mieć większy padding.

https://material.io/guidelines/components/data-tables.html#data-tables-interaction

690x330

anon10657637
anon10657637

Z tego co się orientuje, to przez pewien czas będzie można. Później wersja panelu 2.0 idzie zupełnie w odstawkę na rzecz 3.0.

jahumen
jahumen Pionier

Nowa wersja panelu mnie nie przekonuje, 2.0 jest znacznie ładniejsze i prostsze.

SystemZ
SystemZ Admin lvlup.pro

@anon82750602 Dzięki za bardzo szczegółową krytykę :slight_smile: Część rzeczy które omawiasz to kwestia zmian w bibliotece z której korzystam https://vuetifyjs.com/

Jest to nadal bardzo wczesna wersja (0.8.7) więc styl powinien być z wersji na wersję coraz bardziej zgodny z wytycznymi MD. W nowej wersji 0.8.8 do której muszę zaktualizować ma podobno już zgodne przyciski

https://github.com/vuetifyjs/vuetify/issues/123

Odnośnie moich błędów w kodzie, zapraszam do stworzenia forka i pull requesta który rozwiązuje błędy o których mówisz :slight_smile: Zmiany które przyjmę do głównej gałęzi postaram się oczywiście wynagrodzić.

Alternatywny wygląd panelu oczywiście jest możliwy, wymagałby tylko przekształcenia tego szablonu na SPA z obsługą API, jeśli jest ktoś chętny do utrzymywania takiego repozytorium to niech się zgłosi.

Odnośnie postępu prac, dziś wyszła wersja 3.0.0-alpha.2 która dodała przycisk do dynamicznej zmiany języka, wymaga jeszcze kilku poprawek ale już widać jak to działa https://demomy.lvlup.pro

LinGruby
LinGruby Pionier

Ja dodam tylko od siebie że górny panel powinien nieć kolor strzałki ( logo LVLUP )

a979e56e-50ef-4513-9cdb-aae4893d411b.pngundefined

SystemZ
SystemZ Admin lvlup.pro

Doceniam że zgłaszacie sporo błędów ale jak wspomniałem już w pierwszym poście - prosiłbym tylko o ogólne odczucia czyli czy to idzie w dobrą stronę, póki co jeszcze nie zbieram błędów gdyż to nie jest jeszcze nawet beta. Prosiłbym jeszcze z tym zaczekać.

Libter
Libter Developer

W porównaniu do panelu v2 oraz poprzedniego projektu v3 (http://demo.lvlup.pro/) zmiany idą jak najbardziej w dobrym kierunku. Nowy panel jest znacznie ładniejszy i bardziej przejrzysty od obecnego :)

Roshi
Roshi

lepiej sie zajmijcie suportem i dodajcie w końcu w panelu by można było system zmieniać, np z domyślnego na freebsd..

Nieznajomy11
Nieznajomy11 Moderator forum.lvlup.pro

A przycisk "reinstalacja" to co? :P

Roshi
Roshi

do dupy to

SystemZ
SystemZ Admin lvlup.pro

Roshi:

lepiej sie zajmijcie suportem

Rozwiń co masz na myśli, support jest świadczony zgodnie z informacją na stronie.

Roshi:

dodajcie w końcu w panelu by można było system zmieniać, np z domyślnego na freebsd..

Jak wejdzie nowy panel to wtedy będzie można pod niego podłączyć budowanie gotowych obrazów różnych systemów dla KVM, sądzę że FreeBSD także :slight_smile:

@Nieznajomy11

Instalator systemów na KVM w panelu klienta ma dostępne póki co niestety tylko Ubuntu 14.04. Gdy budowałem wtedy ten system reinstalacji to nie wymyśliłem nic lepszego. Dodatkowo wtedy było to projektowane na 50-100 VPSów które wtedy były a nie na ponad 400 tak jak teraz. Minęło trochę czasu i całe szczęście teraz wiem jak to rozbudować.

SystemZ
SystemZ Admin lvlup.pro

A post was merged into an existing topic: Podstawy serwera VPS KVM

Nieznajomy11
Nieznajomy11 Moderator forum.lvlup.pro

To wszystko wyjaśnia, nie próbowałem jeszcze reinstalacji z panelu lvlup dla vps KVM. :)

adminek153
adminek153 Moderator forum.lvlup.pro

Według mnie nowy panel prezentuje się naprawdę bardzo dobrze, jestem pozytywnie zaskoczony. Widzę, że zmiany idą w lepszą stronę, więc czekam na kolejne aktualizacje. Powodzenia :slight_smile:

DoreK
DoreK α-tester v3

Jak dla mnie koszmarnie. Mam wrażenie że cały panel jest jakby za wielki. Gdy go sobie pomniejszyłem (ctrl+scroll) zaczął wyglądać całkowicie inaczej. Bardzo lubię MD niestety ten panel mi nie podchodzi.

SystemZ
SystemZ Admin lvlup.pro

Masz na myśli jakieś konkretne elementy np. lewe menu, podstronę czy to takie ogólne odczucie odnośnie wszystkich elementów? A może po prostu silne przyzwyczajenie do obecnego panelu v2 ? :)

Strona z widokiem ticketa jest zdecydowanie inaczej zbudowana i używa całej dostępnej szerokości zamiast stawiać na prawy panel z pierwszą wiadomością. Ten prawy panel potrafił zmylić sporo klientów którzy dodawali jeszcze wiadomość oprócz samego zgłoszenia z tą samą treścią gdyż prawdopodobnie nie byli pewni jak to działa, tutaj jest wszystko w jedną stronę i od razu intuicyjnie widać jak to działa z chronologicznym ułożeniem jak na chacie.

Wyszła dziś wersja 3.0.0-alpha.3

  • Wysyłanie wiadomości w zgłoszeniach
  • Lepsze tłumaczenie, fix dla ikony z wylogowaniem, ładowanie wersji z package.json dzięki @Libter za wniesione poprawki :)
DoreK
DoreK α-tester v3

Raczej silnie przyzwyczajony nie jestem, bo troszkę świeżym klientem jestem, aczkolwiek mam że kolory do siebie nie pasują, zastosowałbym rozwiązanie jakie podał @LinGruby Kolor niebieski też bym zmienił na jakiś inny, albo na inną barwę.

Przycisk do wylogowania się powinień być trochę niżej, pod tym zielonym tłem. Wyglądało by to znacznie lepiej. 690x69

Pomniejszyłem stronę w przeglądarce do 80% - efekt: 690x325 Cały panel dzięki temu jest bardziej przejrzysty, menu nie jest takie wielkie. Powiększyć odrobinkę czcionkę, jakieś małe poprawki i będzie bardzo dobrze.

Nieznajomy11
Nieznajomy11 Moderator forum.lvlup.pro

Mi się podoba, szczególnie to ładnie wygląda: 190x38 :D

Ogólnie, to niby jest przy logowaniu "Username" ale akceptuje jedynie email :>

DoreK
DoreK α-tester v3

Ja logowałem się za pomocą nazwy użytkownika 😮

Nieznajomy11
Nieznajomy11 Moderator forum.lvlup.pro

Bunt maszyn!

SystemZ
SystemZ Admin lvlup.pro

Ok, kwestie wyskakującego menu dodałem już jako błąd, dzięki! :slight_smile:

https://github.com/lvlup-pro/spawn-frontend-material/issues/25

Co do koloru górnego paska, tu na screenie dałem kolor jak ze strzałki, sądzicie że tak jest lepiej? Szczerze to nie zwracałem za bardzo uwagi na kolory

690x302

Jeśli mowa o innych kolorach to czekam na propozycję hexów lub coś z tej palety https://vuetifyjs.com/css/colors

Nie jestem designerem więc muszę posłużyć się gotowymi kolorami, czasami marnowałem dni na wybór jednego odcienia i chcę tego uniknąć na przyszłość.

Co do skalowania, bardzo chciałbym uniknąć nadpisywania ustawień biblioteki vuetify, jeśli jednak miałbyś pomysł jak to rozwiązać w kodzie to śmiało twórz pull request i postaram się dodać aby każdy mógł sobie przestawić, tyle czy to ma sens jeśli każdy może to zrobić w 2sek używając Ctrl + rolka lub Ctrl + -/+ i dostosować do własnych upodobań? Wiele serwisów z których korzystam jest dla mnie zbyt małych i wolę powiększyć co by użyć pełnej szerokości. Tutaj zostawiłem wszystko domyślnie i taka jest domyślna "wielkość".

Nieznajomy11:

Ogólnie, to niby jest przy logowaniu "Username" ale akceptuje jedynie email :>

Można spokojnie używać maila lub username'a, oba działają, przed chwilą sprawdzałem. Identyczne zachowanie co w przypadku panelu v2.

Nieznajomy11:

Mi się podoba, szczególnie to ładnie wygląda: 😃

Postaram się aby można było w środowisku testowym sobie doładowywać konto za darmo co by jeszcze trochę cyferki podskoczyły :D

DoreK
DoreK α-tester v3

Niestety koderem to ja nie jestem :< Według mnie jest znacznie lepiej z tym kolorem, jeszcze zmienić odcień niebieskiego na jakiś jaśniejszy, podobny do tego zielonego i będzie dobrze. PS: to samo zmodyfikuj w ticketach :> PS2: to chociaż troszkę zmniejsz szerokość menu jak da radę i wielkość czcionki :)

LinGruby
LinGruby Pionier

SystemZ:

Co do koloru górnego paska, tu na screenie dałem kolor jak ze strzałki, sądzicie że tak jest lepiej?

No i jak dla mnie jest bardzo dobrze, a co do reszty to jak będzie się zbliżał termin wydania to się zobaczy ;-)

SystemZ
SystemZ Admin lvlup.pro

Dziś wyszła wersja 3.0.0-alpha.4 która zmienia dość dużo w kosmetyce przez upgrade biblioteki vuetify do 0.8.8. https://github.com/lvlup-pro/spawn-frontend-material/milestone/3?closed=1

Więcej elementów jest płaskich, przyciski są chyba już bliżej tego jak powinny finalnie wyglądać. Przełącznik stron wygląda bardziej "solidnie" a tytuł obecnej podstrony jest już mniejszy i lepiej mieści się na ekranie telefonu. Ikonkę kluczyka w przycisku logowania zostawiam póki co gdyż wydaje się bardziej intuicyjna a duża szerokość samego przycisku jest po to aby łatwiej i szybciej trafić palcem czy kursorem :slight_smile: Tutaj czekam na opinię @anon82750602 bo wydaje się najbardziej zorientowany w MD :slight_smile:

Trochę eksperymentowałem z widokiem ticketów, sami oceńcie czy jak jest bardziej ściśnięte a nick i data po dwóch różnych stronach to wygląda lepiej. Jest już dodawanie wiadomości w ticketach wraz z licznikiem znaków i wyraźnymi podpowiedziami co jest nie tak jeśli się nie wysyła.

Usunięty jest crash który czasami występował przy logowaniu i wylogowywaniu.

Podczas ładowania wyników w tabeli nie jest już chowana cała treść, paginacja się wyłącza i robi się szara, ale nie znika.

Błąd gdzie zalogowana sesja nie jest wykrywana na stronie Home też jest już usunięty.

Od razu też mówię że przycisk do wylogowania w prawym górnym rogu wyświetla się zawsze i wszędzie gdyż pełni on jednocześnie funkcję przywrócenia do fabrycznych ustawień, co by nie trzeba było czyścić przeglądarki użytkownika ręcznie, wystarczy tylko kliknąć wyloguj.

Ogólnie jestem bardzo zadowolony ze stabilności frontendu mimo dość wczesnej wersji. Sądzę że jest spora szansa aby klienci mogli już korzystać ze wstępnej wersji w pierwszych dniach marca.

Ponownie dziękuje @Libter za wniesione poprawki do kodu i zapraszam też innych do wspólnego kodowania gdzie można nabyć sporo doświadczenia z nowymi metodami tworzenia webaplikacji, poczuć satysfakcję gdy kod staje się narzędziem z którego będą korzystać setki klientów dziennie oraz może wziąć też ode mnie kilka złotówek ;) Jeśli będzie potrzeba utworzenia pokoju na gitterze czy discordzie aby wspólnie kodzić to dajcie znać.

DoreK
DoreK α-tester v3

U mnie dalej jest stary kolor na górze, a nie ten ze strzałki 😕 Przeniósłbym wiadomości z ticketów na bardziej lewą stronę niż na środku. Ogółem to jest lepiej niż poprzednio ;)

happi
happi

Nie wygląda mi to na material taki jak np. w aimpanelu, cienie różnią się mocno, a w niektórych momentach są źle ustawione. Póki co mogę powiedzieć tylko tyle, przysiądę przed panelem jak będę miał trochę więcej czasu.

SystemZ
SystemZ Admin lvlup.pro

DoreK:

U mnie dalej jest stary kolor na górze, a nie ten ze strzałki 😕

Jeszcze nie zdecydowałem, póki co skupiam się na innych rzeczach, kolory to jedna z tych rzeczy co może poczekać.

@happi Aimpanel korzysta z http://materializecss.com/ spawn-material korzysta z https://vuetifyjs.com/

SystemZ
SystemZ Admin lvlup.pro

Dziś wyszła wersja 3.0.0-alpha.5. Dokładny dziennik zmian można znaleźć tutaj:

https://github.com/lvlup-pro/spawn-frontend-material/blob/6e621fb19edd6a9944294787aaedbb6905e258b2/CHANGELOG.md

DoreK
DoreK α-tester v3

Kolejne błędy: przed zalogowaniem w prawym górnym rogu jest przycisk służący do wylogowania się 690x322 w liście usług są dwa paski do przesuwania strony, według mnie nie powinno ich tam być wcale 690x320

i zniknęły animacje po kliknięciu w przyciski z wyjątkiem "ZALOGUJ" chyba że to jest celowe.

Wracając do tematu kolorów, domyślny niebieski zmieniłbym na LIGHT-BLUE ACCENT-2 lub LIGHT-BLUE LIGHTEN-2, myślę że z tym kolorem strzałki by się nawet spasowało oczywiście jak już zajmiesz się nimi :slight_smile:

SystemZ
SystemZ Admin lvlup.pro

SystemZ:

Od razu też mówię że przycisk do wylogowania w prawym górnym rogu wyświetla się zawsze i wszędzie gdyż pełni on jednocześnie funkcję przywrócenia do fabrycznych ustawień, co by nie trzeba było czyścić przeglądarki użytkownika ręcznie, wystarczy tylko kliknąć wyloguj.

Dzięki za info o kolorach i paskach.

happi
happi

A można wiedzieć dlaczego wybrałeś właśnie ten framework? Materialize wygląda o wiele lepiej i chętnie bym zobaczył panel w takiej odsłonie.

SystemZ
SystemZ Admin lvlup.pro

Materialize używa jQuery które jest przestarzałe względem Vue.js i kompatybilność między nimi jest bardzo różna. Vue jest szybsze i lżejsze. Jest też szybciej kodzić, Aimpanel powstał w około 1-1,5msc tutaj w ciągu około 14dni mamy już coś z czego mogliby już korzystać klienci.

W Aimpanel używałem Vue.js i Materialize ale to ile włosów z głowy mi wyleciało to już nie wchodzę w to drugi raz. Za każdym razem znajdował się inny bug który zmieniał się w zależności od wersji biblioteki, koszmar.

SystemZ
SystemZ Admin lvlup.pro

Wyszła wersja 3.0.0-alpha.6

Zmiany

  • Poprawiono błąd związany z logowaniem na Firefox
  • Poprawiono błąd gdy w zgłoszeniu nie ma żadnej dodatkowej wiadomości
  • Widok zgłoszenia ma już widoczny jeden z trzech statusów:
    • Obsługa pracuje nad odpowiedzią
    • Czekamy na twoją odpowiedź
    • Sprawa zamknięta
Pantoflarz
Pantoflarz

Specjalnie założyłem konto aby się tu wypowiedzieć. Skoro juz korzystamy z usług to fajnie że bierzecie pod uwagę i nasze zdanie :slight_smile:

Teraz tak na temat:

Szczerze? Jakoś mi się nie spodobało. Wygląda troche klockowato, i wydaje sie po prostu za duże. Nie wiem czy to kwestia przyzwyczajenia czy coś, lecz może to być kwestia tego że nigdy nie byłem fanem MD pozostając przy bootstrapie tam gdzie mogę 😛

O tyle o ile jest to wielka poprawa jeśli chodzi o tę wersję którą pokazałeś nam wcześniej, to i tak wydaje mi się że to nie do końca jest to o czym "marzyłem" w kolejnej odsłonie panelu.

Nie rozumiem czemu te informacje o koncie są zrobione jako odnośniki - rozumiem że to kieruje na konkretne pod strony ale jak dla mnie to nie ładnie po prostu wygląda jak na to najeżdzam a to faluje itp.

Generalnie odniosłem wrażenie jakoby Panel był troche klockowaty. Tak jakoś nie potrafię tego określić ale albo to kwestia tego że panel po lewej jest zbyt duży i mało miejsca na content zostaje, albo dodatkowo nasuwa mi się kwestia czy ten header zielony musi być aż taki duży? Do czego zmierzam - odnosze wrażenie że te elementy sidebarowe i navbarowe zajmują zbyt dużo miejsca, i może to to potęguje wrażenie tzw. "overcluttering'u" co negatywnie wpływa na moje odczucia przy korzystaniu z nowej wersji panelu.

Paginacja na dole i na górze wogóle nie przypadła mi do gustu. Wystarczy w jednym miejscu, proponowałbym na dole.

Sory za spolszczanie angielskich nazw ale każdy chyba raczej wie o co mi chodzi, jeśli nie to mogę sprecyzować.

P.S to nie ma być tak ogólnie krytyczne - tak jak mówię, poprawa jest gigantyczna, lecz no te drobne elementy jednak ten efekt w mojej opinii psują.

Pozdrawiam i czekam na dalsze wersje alpha/beta :)

SystemZ
SystemZ Admin lvlup.pro

Pantoflarz:

Szczerze? Jakoś mi się nie spodobało. Wygląda troche klockowato, i wydaje sie po prostu za duże. Nie wiem czy to kwestia przyzwyczajenia czy coś, lecz może to być kwestia tego że nigdy nie byłem fanem MD pozostając przy bootstrapie tam gdzie mogę 😛

Mi za to totalnie się Bootstrap przejadł 😛 Jak już pewnie wcześniej wspominałem, Google to duża firma i wypuszczając wytyczne MD korzystam z tego że użytkownicy są już przyzwyczajeni do MD na stronach które codziennie widzą np. YouTube, Google czy większa część aplikacji na Androidzie.

Jedna z alternatyw - wymyślanie własnego stylu wiąże się też z masą pracy co wymaga czasu a niestety ze względu na specyfikę lvlup.pro nie mogę temu za dużo poświęcić, nie jestem też designerem aby wymyślać całą specyfikację wyglądu więc zaufam tu innym i skorzystam z gotowego rozwiązania gdzie muszę tylko dokodzić mechanizmy i pozmieniać trochę kolory czy rozmiary bo to potrafię zrobić lepiej nie ryzykując powstaniem designerskiego frankensteina :D

Pantoflarz:

Generalnie odniosłem wrażenie jakoby Panel był troche klockowaty. Tak jakoś nie potrafię tego określić ale albo to kwestia tego że panel po lewej jest zbyt duży i mało miejsca na content zostaje, albo dodatkowo nasuwa mi się kwestia czy ten header zielony musi być aż taki duży? Do czego zmierzam - odnosze wrażenie że te elementy sidebarowe i navbarowe zajmują zbyt dużo miejsca, i może to to potęguje wrażenie tzw. "overcluttering'u" co negatywnie wpływa na moje odczucia przy korzystaniu z nowej wersji panelu.

Odnośnie toolbara czyli ten górny pasek z tytułami - mogę zmienić jego rozmiar tylko obawiam się że zakłóci to trochę proporcje między lewym panelem który wtedy będzie wydawać się jeszcze większy a zmiana rozmiaru lewego panelu może być przyczyną sporych problemów i bugów w kodzie. Tak zwane piekło zależności :D Spróbuje w następnych wersjach odrobinę wpłynąć na wysokość toolbara, zobaczymy jakie będą wtedy odczucia.

Odnośnie sidebara czyli ten lewy panel - zajmuje on zdaje się 20% szerokości, nie wiem czy jest to dużo, w 1920x1080 wizualnie nie zajmuje jak dla mnie aż tak dużo miejsca. 80% na content brzmi dla mnie ok.

Pantoflarz:

Nie rozumiem czemu te informacje o koncie są zrobione jako odnośniki - rozumiem że to kieruje na konkretne pod strony ale jak dla mnie to nie ładnie po prostu wygląda jak na to najeżdzam a to faluje itp.

Chodzi o lewy panel menu tak? Generalnie założenie jest takie aby cała możliwa nawigacja była tylko i w jednym miejscu, na tym właśnie sidebarze. Animacja przy najechaniu daje użytkownikowi delikatną sugestie że da się kliknąć i uzyskać więcej informacji. Jeśli wszystko dałbym osobno to wtedy byłby clutter i niewygodne przewijan menu aby coś kliknąć ;)

Rozrzucenie nawigacji sprawia problemy dla użytkowników w v2 co widziałem po niektórych zgłoszeniach, dlatego chcę to maksymalnie uprościć. Przy korzystaniu z różnych funkcji panelu i przełączaniu się między podstronami łatwo załapać że musimy sięgnąć do nawigacji tylko po lewej bez zastanawiania co czyni pracę bardziej spójną i płynną, przynajmniej według mnie i moich scenariuszy testowania. W prawym górnym rogu na toolbarze będzie ikonka do odczytania powiadomień oraz rozwijane menu z rzadko używanymi opcjami np. "informacje o twórcach".

Pantoflarz:

P.S to nie ma być tak ogólnie krytyczne - tak jak mówię, poprawa jest gigantyczna, lecz no te drobne elementy jednak ten efekt w mojej opinii psują.

Spoko, dzięki za konstruktywną opinię :slight_smile: Jeśli zauważysz coś jeszcze to daj znać, z chęcią się temu przyjrzę. Przy wspólnej dyskusji sądzę że projekt może tylko zyskać.

DoreK
DoreK α-tester v3

Pod względem wielkości zgadzam się z Pantoflarzem. Należy zwrócić uwagę że nie każdy ma monitor w FHD więc na ekranach z mniejszą rozdzielczością wyglada to na prawdę słabiutko. Szczególnie to menu :slight_smile: Zauważyłem kolejny błąd, po kliknięciu w "Wyloguj" na stronie przycisk "Zaloguj" który wcześniej był na zielono zmienia swój kolor na biały. Chyba nie powinno tak być :P W miejscu do wpisywania swojego loginu pojawia się przykład z e-mail (bo tam chyba można wpisać tylko login?). Jak będzie wyglądało zamawianie usług w nowym panelu?

anon82750602
anon82750602

pod material używałbym raczej biblioteki od Google... https://getmdl.io/ - całkiem proste w użyciu, wygląda przyzwoicie, lecz brakuje niektórych elementów.

To może react i biblioteka od Google? http://www.material-ui.com/

Cały layout panelu jest do d...

Zrobiłbym raczej coś w tym stylu: 666x500

Postaram się coś zrobić przy użyciu jednej z tych dwóch bibliotek jeśli uważacie że powinno w tą stronę pójść i oczywiście gdy znajdę czas ;x

SystemZ
SystemZ Admin lvlup.pro

#3.0.0-alpha.7

Kolejna wersja, kolejne ulepszenia:

  • ikonki zaznaczenia zamiast tytułu w tabelach
  • tytuł statusu ticketa został umieszczony w wyskakującym dymku
  • napis płatności przy pozycji ze stanem konta w menu
  • usunięcie dolnej paginacji
  • wyrównanie tytułu w toolbarze do tego z Hello w na stronie home
  • wysokość toolbara zmniejszona z 64px do 60px
  • zwężenie sidebara z 300px do 250px gdy jest wysunięty na desktopie

@DoreK @Pantoflarz Co do szerokości lewego menu faktycznie muszę przyznać wam rację, większość serwisów ma węższe menu

Zerknąłem przy rozdzielczości 1366x768 i menu zajmowało więcej niż się spodziewałem. Dajcie znać z jakich rozdzielczości korzystacie, ze statystyk strony i panelu wynika że najwięcej osób ma 1920x1080 a zaraz potem jest 1366x768 czyli generalnie jeśli na tych dwóch będzie wyglądać dobrze to zadanie jest done.

YouTube w MD ma przykładowo sidebar o szerokości 230px, wziąłem też kilka pierwszych z brzegu szablonów z panelami admina, gdyż te bardzo często mają sidebar. Oto przykłady:

###230px https://colorlib.com/polygon/gentelella/index.html

###250px http://unix.htmlcooker.com/unix/ http://iarouse.com/dist-angular2-material/v1/ https://colorlib.com/polygon/metis/

###300px https://agileui.com/demo/delight/demo/admin-template/index.html

Z tego powodu póki co zmniejszyłem do 250px, jeśli nadal będzie za szeroki to pomyślę o zmianie do 230px.

Toolbar obniżyłem tylko o 4px, dajcie znać czy widać różnice i czy teraz panel jest mniej "klocowaty".

anon82750602:

Zrobiłbym raczej coś w tym stylu:

Możesz zrobić i pokazać, nie obrażę się :slight_smile:

anon82750602:

Cały layout panelu jest do d...

Biorę pod uwagę krytykę klientów ale tylko konstruktywną, w tym zdaniu zdecydowanie brakuje konkretów.

anon82750602:

To może react

Nie, wybacz ale uważam że JSX to pomyłka, nie po to tyle lat pracy nad standardem CSS prowadzono aby teraz mieszać go z JSem w ten sposób. Ekosystem React jest też za mało spójny i ciężko uzyskać szybkie efekty jak przy użyciu Vue, ale to tylko moje osobiste zdanie.

DoreK
DoreK α-tester v3

Jest bardzo dobrze po zmniejszeniu tego menu, ja bym już go nie zmieniał, 230px to już trochę za mało i do tego panelu nie do końca by pasował wg. mnie :slight_smile: A widzisz, mówiłem że zajmuje za dużo miejsca przy 1366x768 ;) Przyjrzałbym się przy HD ale w HD raczej problemów nie powinno być tak więc jest dobrze. Tak więc do naprawy jeszcze ten błąd co podałem i jeszcze to, że w przypadku gdy cpu jest powyżej 50/60% i powyżej 80% nie zmienia się kolor w panelu.

Pantoflarz
Pantoflarz

Osobiście mam rozdzielczość 1366x768 gdyż jednak to stary laptop i jakoś nigdy nie zwróciłem na to uwagi 😃

Jak tak teraz patrzę, wygląda to o wiele lepiej jak jest zmniejszony do 250px. Mniejszego bym raczej nie robił.

Ogólnie bardziej mi się teraz podoba 😛

Co to tego baru zielonego na górze, w sumie może se zostać, nie rzuca mi się aż tak w oczy jak poprzednio, może właśnie ze względu na zmniejszenie sidebara i tego paska.

Parę bugów znalazłem więc jak będziesz chciał to Ci je podam lecz wiem że narazie zajmujesz się bardziej ogólnym feel'em oraz wyglądem owego panelu.

Zaczekam aż dodasz zakładki na np. serwery MC i wtedy wypowiem się konkretniej, bo to nie fair jeśli zacznę oceniać w pół skończony produkt 😛

DoreK
DoreK α-tester v3

W trakcie włączania się strony przez chwilę pokazuje się to a potem jest normalnie. 690x318

Po najechaniu myszką na status ticketa tekst jest bardzo rozmazany, to białe coś po lewej to moja sprawka (jakiś program miałem włączony xd) 690x323

Kiedy dodasz panel serwerów Minecraft do panelu v3?

SystemZ
SystemZ Admin lvlup.pro

MC w obecnej wersji jako takie zostanie w v2, nie będzie go w v3. Oferta MC będzie działać na innej zasadzie i będzie zmieniona gdy panel v2 będzie w trakcie wycofywania. Reszta obecnych usług czyli VPS, WWW, domeny oraz nowe które dojdą będą w v3.

Od środy będę zbierał chętnych na przetestowanie panelu v3 na danych produkcyjnych. Oznacza to że osoba która będzie w tym programie testowym będzie mogła zalogować się i korzystać z v3 danymi z v2 zanim jeszcze panel v3 oficjalnie wejdzie do użycia w marcu.

Timo
Timo Moderator forum.lvlup.pro

To ja już wstępnie się zgłaszam :)

Czy panel v3 będzie jakoś ładnie wyglądał z urządzeń mobilnych? Chyba nikt nie poruszył tutaj takiego wątku, a byłoby to ciekawe. Czy nie ma na to czasu?

Nieznajomy11
Nieznajomy11 Moderator forum.lvlup.pro

Na telefonie wygląda dobrze, jedynie co bym zmienił to ukrył nazwę vps w usługach. O jedno pole w tabeli za dużo.

DoreK
DoreK α-tester v3

Ooo tak, również się zgłaszam.

Nieznajomy11
Nieznajomy11 Moderator forum.lvlup.pro

SystemZ:

Od środy będę zbierał chętnych

😛

DBanaszewski
DBanaszewski α-tester v3

Pierwsza minuta środy :D Chętny! Zgłaszam się do testów 😃

Nieznajomy11
Nieznajomy11 Moderator forum.lvlup.pro

Też napiszę - zgłaszam się!

(ciekawe czy to wystarczy xD)

Timo
Timo Moderator forum.lvlup.pro

Heh, no faktycznie. @SystemZ Zgłaszam się ja również :)

Pantoflarz
Pantoflarz

Również się zgłaszam :P

SystemZ
SystemZ Admin lvlup.pro

Dzięki, szczegóły poszły do 6 osób na PM :slight_smile: Jest to dostęp na wyłączność do końca tego miesiąca, w planach są publiczne testy w marcu. Zapraszam do zgłaszania błędów w nowej kategorii:

https://forum.lvlup.pro/c/hosting-lvl-up-propozycje-i-uwagi/panel-v3-bledy

Jeśli ktoś jest bardziej zorientowany w temacie można też zgłaszać swoje błędy po ang. https://github.com/lvlup-pro/spawn-frontend-material/issues

SystemZ
SystemZ Admin lvlup.pro

Wersja 3.0.0-alpha.8 została wydana. Póki co jest to wydanie z największą ilością zmian "pod maską". Nowa wersja jest już dostępna zarówno dla demo jak i produkcji.

  • Pliki językowe w jednym miejscu zamiast w poszczególnych komponentach
  • Tytuły i meta tagi w końcu działają już prawie jak trzeba
  • Wszystkie tabele mają wąską kolumnę z polem do zaznaczenia
  • Wszystkie ID mają prefiks #
  • Obsługa błędów żądań do API w jednym miejscu
  • Mniejszy górny pasek ładowania
  • Zwykły kursor przy tabeli płatności
  • Kolorowe kwoty w tabeli płatności
  • Lepsza strona ze statusem VPSa
  • Udoskonalone skrypty dla programistów oraz do wrzucania na produkcję
  • Biblioteka Vuetify w wersji 0.8.10
luxDev
luxDev Pionier

Można się jeszcze zgłosić do tych testów Panelu? chętnie bym przetestował :P

SystemZ
SystemZ Admin lvlup.pro

Wersja 3.0.0-alpha.9 została wydana. Jest dostępna na produkcji i demo.

  • Strona o panelu po kliknięciu w wersję pod logiem
  • Przycisk wylogowania na lewym panelu
  • Więcej informacji o VPS - dysk i sieć, poprawione wyświetlanie stanu
  • Kolorowy pasek dla %CPU w VPS, dodano też niebieski kolor
  • README ma teraz informacje o zależnościach w bibliotekach a także stanie kompilowania obecnej wersji
  • Integracja z Travis CI

@luxDev szczegóły wysłałem na PM

SystemZ
SystemZ Admin lvlup.pro

A post was merged into an existing topic: Wasze zapytania o dostępność VPS - KVM i OpenVZ

DoreK
DoreK α-tester v3

Na stronie Usługi powinien być stan np. vps tzn. czy jest włączony albo wyłączony, a gdy wejdzie się już w dany serwer powinno pokazywać ile ramu jest użyte, np. 10MB/1024MB. Na demomy "wyłącz" chyba nie działa. Dodatkowo strona nie jest w pełni spolszczona, np. w Index albo nazwa strony na karcie przeglądarki. /a tak, zapomniałem napisać to w dziale Błędy. Wybacz

Glupikocz
Glupikocz

Siema gdzie można pobrać Panel V3 @SystemZ kiedyś mi obiecałes na pw XD :D Pozdrowienia i kończ go dalej bo dobry jest ze zdj :D

DBanaszewski
DBanaszewski α-tester v3

Pobrać się nie da, ale projekt jest na Githubie ;)

Glupikocz
Glupikocz

a moge do tego jakiegoś dokładnego linka?

Glupikocz
Glupikocz

dobra mam a jak go zainstalować XD

koweq
koweq

A to da się wogóle zalogować do tego panelu?

DBanaszewski
DBanaszewski α-tester v3

Tak, tylko @SystemZ musi z tobą porozmawiać na priv ;) (nwm czy moge napisać, lecz napiszę: whitelista jest ;) )

koweq
koweq

A to ja nie będę Systemowi zaprzątał głowy :P.

anon82750602
anon82750602

@SystemZ też chętnie chciałbym dojść do testów ;)

SystemZ
SystemZ Admin lvlup.pro

W zasadzie jest już komplet, więcej osób będzie mijać się z celem na te 3-5 dni 😛 1 marca sobie wszyscy sami obczaicie już publicznie dostępną betę ;)

SystemZ
SystemZ Admin lvlup.pro

Dzisiejsze wydanie 3.0.0-alpha.10 zawiera:

+ Poprawne wykrywanie wygasłej sesji

  • Poprawiony błąd z błędnymi wiadomościami w zgłoszeniach
  • Testowe nowe statystyki VPS
  • Szkic strony rejestracji nowego konta
  • Takie same nazwy tytułu strony i na pasku
  • Upgrade webpacka do v2.2.1
SystemZ
SystemZ Admin lvlup.pro

3.0.0-alpha.11 już jest!

  • Nowy wygląd strony VPS
  • Włączanie/wyłaczanie VPS już działa
  • Więcej informacji o VPS
  • Podstawowa obsługa języka niemieckiego (dzięki @anon10657637 !)
  • Wyświetlanie waluty PLN w tabeli płatności

W demo została wprowadzona emulacja VPS czyli mimo że nie ma VPSa to można go włączać, wyłączać a także sprawdzać dość realistyczne statystyki, brakuje jeszcze tylko działających statystyk dla dysku i sieci w tym przypadku. Umożliwia to łatwe testowanie i sprawdzanie panelu bez konieczności korzystania z realnego konta na produkcji.

SystemZ
SystemZ Admin lvlup.pro

W demo sieć i obecna prędkośc zapisu/odczytu dysku już pokazuje poprawne wartości.

Pantoflarz
Pantoflarz

Mi dalej nie dziala dostep do panelu - na priv napisalem ale ani be ani me :(

DoreK
DoreK α-tester v3

mam to samo, po prostu mobilny internet mam i zmienia mi się ip, a żadnego kontaktu na priv :c

DBanaszewski
DBanaszewski α-tester v3

Dlatego mam VPNa na VPSie :) Stały adres IP ;)

luxDev
luxDev Pionier

W marcu otwarty będzie dla wszystkich :)

Pantoflarz
Pantoflarz

Najlepsze jest to ze IP mam dalej to samo od 1 tygodnia, wiec pozdrawiam xDD

SystemZ
SystemZ Admin lvlup.pro

Wybaczcie za brak responsywności na PM ale bardzo zależy mi na tym aby panel w publiczną betę wszedł z możliwie jak najmniejszą liczbą błędów a została niecała doba :slight_smile:

W najnowszym wydaniu 3.0.0-alpha.12

  • walidacja pól dla formularzy logowania i rejestracji
  • wyrównanie elementów dla strony rejestracji i logowania
  • pokazywanie adresu IP w zakładce VPS
  • nowsze wersje bibliotek
  • załatany błąd z chowaniem się paska przy przekroczeniu wartości 100% na stronie VPS
  • dymek informacyjny o stanie ticketa wyświetla się już poprawnie na urządzeniach mobilnych

Jeśli wszystko pójdzie zgodnie z planem to jeszcze dziś zostanie wydana wersja 3.0.0-alpha.13 a 1 marca 3.0.0-beta.1

Timo
Timo Moderator forum.lvlup.pro

Coś pewnie z tymi polami, bo nie mogę sie zalogować - "logowanie nieudane" - IP nie zmieniło mi się, próbowałem również w trybie incognito, oraz w innej przeglądarce - przez co również nie powiem ci czy pasek już się naprawił. Do panelu v2 loguję się normalnie. Możliwe że to chwilowe, lecz zgłaszam,

SystemZ
SystemZ Admin lvlup.pro

Chwilowo nie działało API, już powinno być ok.

Pantoflarz
Pantoflarz

Potwierdzam chyba chwilowe problemy bo wszystkie subdomeny pod nowy panel przestały mi odpowiadać. Cóż, przynajmniej się można skupić na kodowaniu a nie bawieniu xD

P.S zmieniłem trochę angielskie tłumaczenie, niby drobnostka ale dopiero dzisiaj ogarnąłem się na tyle by cokolwiek zrobić więc sorki że mało ale mam nadzieję że zawsze coś. Zrobiłem to tylko dlatego że na blazingu strasznie wkurzało mnie polskie tłumaczenie i wiem jak to jest jak jest coś zle tłumaczone, więc nie krytykuję lecz chce na swój sposób pomóc :P

SystemZ
SystemZ Admin lvlup.pro

Super, dzięki za PR, twoje zmiany zostały właczone do głównej gałęzi, do końca dnia będą już live :) Cała idea wydania frontendu jako open source była po to aby inni mogli poprawić błędy które widzą i aby lepiej korzystało się z panelu.

Nieznajomy11
Nieznajomy11 Moderator forum.lvlup.pro

[code]{ "sidebar": { "panel": "Panel de clientes", "account": "Cuenta", "register": "Registro", "login": "Iniciar sesión", "logout": "Cerrar sesión", "profile": "{email}", "payments": "Pagos ({balance})", "menu": "Menú", "home": "Casa", "services": "Servicios", "help": "Ayuda", "lang": "Idioma", "selectlang": "Seleccione el idioma" }, "header": { "home": "Casa", "credits": "Créditos", "login": "Iniciar sesión", "register": "Registro", "services": "Servicios", "ticket_init": "Ticket", "ticket": "Ticket #{id}", "tickets": "Tickets", "vps_init": "VPS", "vps": "VPS #{id}", "payments": "Pagos", "profile": "Perfil" }, "table": { "id": "ID", "ip": "IP", "name": "Nombre", "service": "Servicio", "subject": "Tema", "amount": "Cantidad", "status": "Estado", "created_at": "Creado", "payed_to": "Caduca" }, "validation": { "required": "Este campo es requerido.", "email": "Enter correct e-mail address.", "repeatpassword": "Las contraseñas no coinciden." }, "auth": { "no": "Inicie sesión primero", "already": "Logged in already", "success": "Inicio de sesión exitoso", "fail": "Error de inicio de sesion", "invalidsession": "La sesión ha caducado, vuelva a iniciar sesión", "register": { "success": "Registro exitoso", "fail": "Registro fallido" } }, "user": { "id": "ID", "username": "Nombre de usuario", "email": "E-mail", "password": "Contraseña", "repeatpassword": "Repite la contraseña", "fullname": "Nombre completo", "placeholder": { "username": "j.doe", "email": "john.doe@example.com", "password": "********", "fullname": "John Doe" }, "login": { "header": "I already have a lvlup.pro account", "button": "Iniciar sesión" }, "register": { "header": "I don't have a lvlup.pro account yet", "button": "Registro" } }, "ticket": { "status": { "waiting": { "long": "En espera de su respuesta", "medium": "Esperando cliente", "short": "Esperando" }, "working": { "long": "El personal está trabajando en una respuesta", "medium": "En progreso", "short": "Tratamiento" }, "closed": { "long": "El personal ya no está trabajando en este caso", "medium": "Caso cerrado", "short": "Cerrado" }, "open": { "long": "Hacer clic ticket para descubrir mas", "short": "Abierto" } }, "subject": "Tema", "response_time": "Dear customer, a response to your query may take up to 48h to reach you", "client": "Tú", "staff": "lvlup.pro Personal", "textarea": "Ingrese el contenido de su mensaje", "send": "Enviar", "msg_too_long": "El mensaje es demasiado largo", "msg_too_short": "El mensaje es demasiado corto", "msg_duplicate": "Mensaje enviado (duplicar)" }, "vps": { "control": "Controlar", "resources": "Recursos", "network_all": "Red (since boot)", "network_rt": "Red (real-time)", "disk": "Disco", "disk_all": "Disco (since boot)", "disk_rt": "Disco (real-time)", "turn_on": "Encender", "info": "Información", "state": "Estado", "ips": "Direcciones IP", "virtualization": "Virtualización", "uptime": "Corriendo desde", "days": "días", "cpu": "CPU", "ram": "RAM", "on": "En", "off": "Apagado", "lockedfrom": "Sin pagar de", "activeto": "Pagado para", "createdat": "Creado", "active": "Pagado", "locked": "No pagado", "disable": { "header": "¿Seguro que quieres desactivar VPS #{id}?", "description": "Hard stop, may cause unsaved data loss (like pulling power plug from PC)!", "cancel": "Cancelar", "submit": "Apagar" }, "reboot": { "header": "¿Seguro que quieres reiniciar VPS #{id}?", "description": "Hard reboot, may cause unsaved data loss (like pulling power plug from PC)!", "cancel": "Cancelar", "submit": "Reiniciar" } }, "credits": { "contributors": "Colaboradores", "poweredby": "Energizado por", "changelog": "Registro de cambios" }, "loading": "Cargando", "panel_preview": "This preview version of customer panel only shows VPS servers", "network_error": "Error de red detectado!" }[/code]

Nie umiem używać GitHuba, więc daje tutaj. (es.json) Plik nie jest w pełni ukończony, mogą występować drobne błędy, ale aż tak zle myślę, że nie jest :D

Aylin
Aylin ex-admin forum.lvlup.pro

Nieznajomy11:

"lang": "Idioma",

A nie lepiej było lengua? Mój hiszpański jest niskich lotów, ale to tak mi średnio pasuje, tak jak to casa, przy czym tutaj nie wiem czy jest coś lepszego. Zaczynam żałować że za mało czasu poświęcam na hiszpański 😳

SystemZ
SystemZ Admin lvlup.pro

Ostatnia alfa właśnie wyszła

Zmiany w 3.0.0-alpha.13

  • więcej informacji w zakładce VPS
  • poprawna informacja o ważności usługi na liście usług
  • zielony pasek adresu w niektórych mobilnych przeglądarkach
  • ładniejszy pasek przewijania menu dla przeglądarek z webkit i kompatybilnych
  • uproszczenie części kodu
  • bardziej poprawne tłumaczenie EN dzięki @Pantoflarz
  • poprawki stylistyczne na stronie rejestracyjnej

@Nieznajomy11 Dzięki za tłumaczenie, dodałem do kodu :slight_smile:

SystemZ
SystemZ Admin lvlup.pro

Zgodnie z zapowiedziami, udostępniłem pierwszą betę, bardzo dziękuję wszystkim którzy się do tego przyczynili oraz za pomocne zgłoszenia błędów :slight_smile:

Zapraszam do dalszej dyskusji w nowym wątku: https://lvlup.rok.ovh/t/panel-klienta-v3-0-otwarte-betatesty/2030