SystemZ | 2017-02-10 20:51:06 UTC | #1
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://forum.lvlup.pro/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 | 2017-02-10 21:08:18 UTC | #2
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 | 2017-02-10 21:58:23 UTC | #3
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 | 2017-02-10 22:17:11 UTC | #4
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 | 2017-02-10 22:48:16 UTC | #5
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:
SystemZ | 2017-02-11 13:19:10 UTC | #6
anon82750602 | 2017-02-11 14:59:22 UTC | #7
Material? Obrzydliwie to wygląda…
Będzie możliwość wrócenia do starego wyglądu?
Wygląda źle + niezgodne z Material Guidelines
https://material.io/guidelines/components/buttons.html#buttons-flat-buttons
Idziemy dalej…
Za duża czcionka, źle wymierzony bar, ogólnie zła struktura…
https://material.io/guidelines/layout/structure.html#structure-toolbars
Sam bar powinien być biały i nie powinien wyświetlać informacji jako elementy menu.
Paginacja.
Paginacja powinna być jednakowej wielkości, również płaska.
Poza tym wystarczyłaby tylko jedna sztuka.
To wygląda naprawdę źle…
Tabela powinna być raczej płaska i mieć większy padding.
https://material.io/guidelines/components/data-tables.html#data-tables-interaction
anon10657637 | 2017-02-11 14:37:58 UTC | #8
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 | 2017-02-11 15:17:54 UTC | #9
Nowa wersja panelu mnie nie przekonuje, 2.0 jest znacznie ładniejsze i prostsze.
SystemZ | 2017-02-11 18:05:10 UTC | #10
@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 | 2017-02-11 18:50:10 UTC | #11
Ja dodam tylko od siebie że górny panel powinien nieć kolor strzałki ( logo LVLUP )
SystemZ | 2017-02-11 20:07:23 UTC | #12
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 | 2017-02-11 20:45:51 UTC | #13
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 | 2017-02-11 22:55:14 UTC | #14
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 | 2017-02-11 22:58:27 UTC | #15
A przycisk “reinstalacja” to co? :P
Roshi | 2017-02-11 22:59:31 UTC | #16
do dupy to
SystemZ | 2017-02-11 23:03:58 UTC | #17
[quote=”Roshi, post:14, topic:1870”]
lepiej sie zajmijcie suportem
[/quote]
Rozwiń co masz na myśli, support jest świadczony zgodnie z informacją na stronie.
[quote=”Roshi, post:14, topic:1870”]
dodajcie w końcu w panelu by można było system zmieniać, np z domyślnego na freebsd..
[/quote]
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 | 2017-02-11 23:58:38 UTC | #18
A post was merged into an existing topic: Podstawy serwera VPS KVM
Nieznajomy11 | 2017-02-12 01:10:39 UTC | #19
To wszystko wyjaśnia, nie próbowałem jeszcze reinstalacji z panelu lvlup dla vps KVM. :)
adminek153 | 2017-02-12 13:08:29 UTC | #20
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 | 2017-02-12 18:46:01 UTC | #21
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 | 2017-02-12 19:44:04 UTC | #22
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
DoreK | 2017-02-12 19:56:10 UTC | #23
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.
Pomniejszyłem stronę w przeglądarce do 80% - efekt:
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 | 2017-02-12 20:51:58 UTC | #24
Mi się podoba, szczególnie to ładnie wygląda:
:D
Ogólnie, to niby jest przy logowaniu “Username” ale akceptuje jedynie email :>
DoreK | 2017-02-12 20:57:04 UTC | #25
Ja logowałem się za pomocą nazwy użytkownika :open_mouth:
Nieznajomy11 | 2017-02-12 21:00:01 UTC | #26
Bunt maszyn!
SystemZ | 2017-02-12 21:04:10 UTC | #27
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
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ść”.
[quote=”Nieznajomy11, post:24, topic:1870”]
Ogólnie, to niby jest przy logowaniu “Username” ale akceptuje jedynie email :>
[/quote]
Można spokojnie używać maila lub username’a, oba działają, przed chwilą sprawdzałem.
Identyczne zachowanie co w przypadku panelu v2.
[quote=”Nieznajomy11, post:24, topic:1870”]
Mi się podoba, szczególnie to ładnie wygląda: :smiley:
[/quote]
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 | 2017-02-12 21:14:59 UTC | #28
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 | 2017-02-12 21:17:09 UTC | #29
[quote=”SystemZ, post:27, topic:1870”]
Co do koloru górnego paska, tu na screenie dałem kolor jak ze strzałki, sądzicie że tak jest lepiej?
[/quote]
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 | 2017-02-13 16:45:10 UTC | #30
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 :slightsmile:
Tutaj czekam na opinię @anon82750602 bo wydaje się najbardziej zorientowany w MD :slightsmile:
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 | 2017-02-14 07:11:31 UTC | #31
U mnie dalej jest stary kolor na górze, a nie ten ze strzałki :confused:
Przeniósłbym wiadomości z ticketów na bardziej lewą stronę niż na środku.
Ogółem to jest lepiej niż poprzednio ;)
happi | 2017-02-14 12:31:38 UTC | #32
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 | 2017-02-14 15:26:31 UTC | #33
[quote=”DoreK, post:31, topic:1870”]
U mnie dalej jest stary kolor na górze, a nie ten ze strzałki :confused:
[/quote]
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 | 2017-02-14 20:43:29 UTC | #34
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 | 2017-02-15 10:23:54 UTC | #35
Kolejne błędy: przed zalogowaniem w prawym górnym rogu jest przycisk służący do wylogowania się
w liście usług są dwa paski do przesuwania strony, według mnie nie powinno ich tam być wcale
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 | 2017-02-15 10:47:16 UTC | #36
[quote=”SystemZ, post:30, topic:1870”]
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.
[/quote]
Dzięki za info o kolorach i paskach.
happi | 2017-02-15 12:06:32 UTC | #37
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 | 2017-02-15 14:21:08 UTC | #38
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 | 2017-02-15 15:32:06 UTC | #39
Wyszła wersja 3.0.0-alpha.6
Zmiany
Pantoflarz | 2017-02-15 23:17:10 UTC | #40
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ę :stuckouttongue:
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 | 2017-02-16 00:35:43 UTC | #41
[quote=”Pantoflarz, post:40, topic:1870”]
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ę :stuckouttongue:
[/quote]
Mi za to totalnie się Bootstrap przejadł :stuckouttongue:
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
[quote=”Pantoflarz, post:40, topic:1870”]
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.
[/quote]
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.
[quote=”Pantoflarz, post:40, topic:1870”]
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.
[/quote]
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”.
[quote=”Pantoflarz, post:40, topic:1870”]
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ą.
[/quote]
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 | 2017-02-16 14:04:06 UTC | #42
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 | 2017-02-16 21:36:08 UTC | #43
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:
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 | 2017-02-16 22:22:07 UTC | #44
Kolejna wersja, kolejne ulepszenia:
@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:
https://colorlib.com/polygon/gentelella/index.html
http://unix.htmlcooker.com/unix/
http://iarouse.com/dist-angular2-material/v1/
https://colorlib.com/polygon/metis/
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”.
[quote=”anon82750602, post:43, topic:1870”]
Zrobiłbym raczej coś w tym stylu:
[/quote]
Możesz zrobić i pokazać, nie obrażę się :slight_smile:
[quote=”anon82750602, post:43, topic:1870”]
Cały layout panelu jest do d…
[/quote]
Biorę pod uwagę krytykę klientów ale tylko konstruktywną, w tym zdaniu zdecydowanie brakuje konkretów.
[quote=”anon82750602, post:43, topic:1870”]
To może react
[/quote]
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 | 2017-02-17 07:08:57 UTC | #45
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 | 2017-02-18 09:10:34 UTC | #46
Osobiście mam rozdzielczość 1366x768 gdyż jednak to stary laptop i jakoś nigdy nie zwróciłem na to uwagi :smiley:
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 :stuckouttongue:
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 :stuckouttongue:
DoreK | 2017-02-18 13:04:24 UTC | #47
W trakcie włączania się strony przez chwilę pokazuje się to a potem jest normalnie.
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)
Kiedy dodasz panel serwerów Minecraft do panelu v3?
SystemZ | 2017-02-18 20:33:06 UTC | #48
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 | 2017-02-19 11:32:28 UTC | #49
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 | 2017-02-19 11:37:51 UTC | #50
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 | 2017-02-19 12:05:37 UTC | #51
Ooo tak, również się zgłaszam.
Nieznajomy11 | 2017-02-19 12:22:34 UTC | #52
[quote=”SystemZ, post:48, topic:1870”]
Od środy będę zbierał chętnych
[/quote]
:stuckouttongue:
DBanaszewski | 2017-02-21 23:04:15 UTC | #53
Pierwsza minuta środy :D Chętny! Zgłaszam się do testów :smiley:
Nieznajomy11 | 2017-02-22 07:00:35 UTC | #54
Też napiszę - zgłaszam się!
(ciekawe czy to wystarczy xD)
Timo | 2017-02-22 11:56:47 UTC | #55
Heh, no faktycznie.
@SystemZ
Zgłaszam się ja również :)
Pantoflarz | 2017-02-22 21:13:17 UTC | #56
Również się zgłaszam :P
SystemZ | 2017-02-22 23:18:28 UTC | #57
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 | 2017-02-22 23:59:00 UTC | #58
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.
#luxDev | 2017-02-23 12:59:26 UTC | #59
Można się jeszcze zgłosić do tych testów Panelu? chętnie bym przetestował :P
SystemZ | 2017-02-23 19:12:19 UTC | #60
Wersja 3.0.0-alpha.9 została wydana.
Jest dostępna na produkcji i demo.
@luxDev szczegóły wysłałem na PM
SystemZ | 2017-02-23 19:26:29 UTC | #61
A post was merged into an existing topic: Wasze zapytania o dostępność VPS - KVM i OpenVZ
DoreK | 2017-02-23 19:57:52 UTC | #62
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 | 2017-02-23 20:40:58 UTC | #63
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 | 2017-02-23 20:43:11 UTC | #64
Pobrać się nie da, ale projekt jest na Githubie ;)
Glupikocz | 2017-02-23 20:43:30 UTC | #65
a moge do tego jakiegoś dokładnego linka?
Glupikocz | 2017-02-23 20:45:39 UTC | #66
dobra mam a jak go zainstalować XD
koweq | 2017-02-24 09:38:18 UTC | #67
A to da się wogóle zalogować do tego panelu?
DBanaszewski | 2017-02-24 09:39:44 UTC | #68
Tak, tylko @SystemZ musi z tobą porozmawiać na priv ;) (nwm czy moge napisać, lecz napiszę: whitelista jest ;) )
koweq | 2017-02-24 09:42:20 UTC | #69
A to ja nie będę Systemowi zaprzątał głowy :P.
anon82750602 | 2017-02-24 14:07:32 UTC | #70
@SystemZ też chętnie chciałbym dojść do testów ;)
SystemZ | 2017-02-24 18:15:51 UTC | #71
W zasadzie jest już komplet, więcej osób będzie mijać się z celem na te 3-5 dni :stuckouttongue:
1 marca sobie wszyscy sami obczaicie już publicznie dostępną betę ;)
SystemZ | 2017-02-25 16:50:45 UTC | #72
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 | 2017-02-26 23:19:49 UTC | #73
3.0.0-alpha.11 już jest!
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 | 2017-02-27 10:23:27 UTC | #74
W demo sieć i obecna prędkośc zapisu/odczytu dysku już pokazuje poprawne wartości.
Pantoflarz | 2017-02-27 19:15:38 UTC | #75
Mi dalej nie dziala dostep do panelu - na priv napisalem ale ani be ani me :(
DoreK | 2017-02-27 19:47:03 UTC | #76
mam to samo, po prostu mobilny internet mam i zmienia mi się ip, a żadnego kontaktu na priv :c
DBanaszewski | 2017-02-27 20:17:51 UTC | #77
Dlatego mam VPNa na VPSie :) Stały adres IP ;)
luxDev | 2017-02-27 20:35:16 UTC | #78
W marcu otwarty będzie dla wszystkich :)
Pantoflarz | 2017-02-27 21:42:42 UTC | #79
Najlepsze jest to ze IP mam dalej to samo od 1 tygodnia, wiec pozdrawiam xDD
SystemZ | 2017-02-27 23:48:14 UTC | #80
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
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 | 2017-02-28 15:43:44 UTC | #81
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 | 2017-02-28 15:53:12 UTC | #82
Chwilowo nie działało API, już powinno być ok.
Pantoflarz | 2017-02-28 15:54:44 UTC | #83
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 | 2017-02-28 16:11:35 UTC | #84
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 | 2017-02-28 17:46:25 UTC | #85
[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”,
“ticketinit”: “Ticket”,
“ticket”: “Ticket #{id}”,
“tickets”: “Tickets”,
“vpsinit”: “VPS”,
“vps”: “VPS #{id}”,
“payments”: “Pagos”,
“profile”: “Perfil”
},
“table”: {
“id”: “ID”,
“ip”: “IP”,
“name”: “Nombre”,
“service”: “Servicio”,
“subject”: “Tema”,
“amount”: “Cantidad”,
“status”: “Estado”,
“createdat”: “Creado”,
“payedto”: “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”: “[email protected]”,
“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”,
“responsetime”: “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”,
“msgtoolong”: “El mensaje es demasiado largo”,
“msgtooshort”: “El mensaje es demasiado corto”,
“msgduplicate”: “Mensaje enviado (duplicar)”
},
“vps”: {
“control”: “Controlar”,
“resources”: “Recursos”,
“networkall”: “Red (since boot)”,
“networkrt”: “Red (real-time)”,
“disk”: “Disco”,
“diskall”: “Disco (since boot)”,
“diskrt”: “Disco (real-time)”,
“turnon”: “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”,
“panelpreview”: “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 | 2017-02-28 17:54:43 UTC | #86
[quote=”Nieznajomy11, post:85, topic:1870”]
“lang”: “Idioma”,
[/quote]
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 :flushed:
SystemZ | 2017-02-28 18:17:57 UTC | #87
Ostatnia alfa właśnie wyszła
Zmiany w 3.0.0-alpha.13
@Nieznajomy11 Dzięki za tłumaczenie, dodałem do kodu :slight_smile:
SystemZ | 2017-02-28 23:27:23 UTC | #88
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://forum.lvlup.pro/t/panel-klienta-v3-0-otwarte-betatesty/2030
SystemZ | 2017-02-28 23:27:29 UTC | #89