верстка для 6 страниц визарда создания нового хостела

[mstdmstd]

Всем привет,
Кому не сложно, просмотрите, пожалуйста верстку для 6 страниц визарда создания нового хостела.

login
test_admin@mail.com 1S8cXGW9

1я страница визарда
hostelstep1

При открытии новой страницы должны быть заполнены данными по дефолту
На странице с картинками(Step 5) загрузите несколько картинок
также кроме введенных данных также, плиз, кликните сохранить с инвалидными данными, чтобы увидеть отображение ошибок...

также index страница админки dashboard

Это бутстрап - я делал для айпадов, но чтобы работало и на смартфонах.
Я понимаю, что сделать админку для смартфона сложно - но один из моих предыдущих клиентов просих делать и для смартфонов - чтобы можно
было при необходимости зайти и что-то отредактировать из смартфона ...

Спасибо !
=============

[Джулия]

смотрю страницу Login в мозиле
там,где меню - навигация при нажатии Calendar, hostels  - нет бэкграунда у появляющегося блока - смотрится странновато

чекбокс+Remember me должен быть выровнен по вертикали и выравнивала бы по правому краю,чтобы инпут и remember me оканчивались на одном уровне
строка Forgot Password? Not Member? Sign Up   - переходит на другую строку,думаю,так не должно быть

наведение на нижнюю навигацию - About us, contact us - не должны надписи скакать

много нюансов по странице,на самом деле..и при уменьшении ширины браузера - тоже править надо некоторые моменты

 

[mstdmstd]

Спасибо, но можно ли немного о страницах визарда в админке? Эти страницы доделаны - остальные пока не надо --я еще буду над ними работать...

В систему нормальо вошли под данным логином?

[Джулия]

да,зарегестрировалась и нормально зашла в систему )

[mstdmstd]

1 час назад, Джулия сказал:

да,зарегестрировалась и нормально зашла в систему )

И по страницам визарда  никаких коментариев? Все так хорошо илои все так плохо?

[Джулия]

когда захожу в Featured Hostels и Active Hostels выдаёт много ошибок - A PHP Error was encountered.
Новый хостел создаётся нормально)

новый тур тоже создаётся,но с ошибками php

[mstdmstd]

В самом 1ом сообщении были ссылки страниц что я просил посмотреть 

http://dev4.softreactor.com/admin/hostel/hostelstep1

и

http://dev4.softreactor.com/admin/dashboard/index

Edited June 28, 2016 by mstdmstd

[Джулия]

если смотреть конкретно только эти страницы - то те же скачки происходят при наведении на ссылки и на лого(у картинке надо бэкграунд сделать прозрачным,а то сейчас она на белом фоне).
страница http://dev4.softreactor.com/admin/dashboard/index В таблице Hostel Listings и Tour Listings - наведение на строку срабатывает только на чётных строках..так должно быть?и эти таблицы не ровные,ячейки разные(почему-то у заголовка Hostel Listings нижний паддинг равен 0).И выпадающие списки вверху в меню серого цвета фона..плохо смотрится.
по странице http://dev4.softreactor.com/admin/hostel/hostelstep1

разные отступы слева в инпутах с текстом и инпутах селект

по цветовой гамме смотрите сами,но зелёный цвет форм и шагов(#7b9f35) смотрится не очень..я бы поменяла на синий(#337ab7) - на сайте не должно быть очень много разных цветов.

и по шрифту посмотрите: если используете Helvetica, то подгружайте его для пользователей,иначе у меня,например, в системе не установлен этот шрифт и шрифт меняется на ваш указанный вторым - Arial.

[mstdmstd]

В 6/28/2016 в 14:08, Джулия сказал:

если смотреть конкретно только эти страницы - то те же скачки происходят при наведении на ссылки и на лого(у картинке надо бэкграунд сделать прозрачным,а то сейчас она на белом фоне).
страница http://dev4.softreactor.com/admin/dashboard/index В таблице Hostel Listings и Tour Listings - наведение на строку срабатывает только на чётных строках..так должно быть?и эти таблицы не ровные,ячейки разные(почему-то у заголовка Hostel Listings нижний паддинг равен 0).И выпадающие списки вверху в меню серого цвета фона..плохо смотрится.
по странице http://dev4.softreactor.com/admin/hostel/hostelstep1

разные отступы слева в инпутах с текстом и инпутах селект

по цветовой гамме смотрите сами,но зелёный цвет форм и шагов(#7b9f35) смотрится не очень..я бы поменяла на синий(#337ab7) - на сайте не должно быть очень много разных цветов.

и по шрифту посмотрите: если используете Helvetica, то подгружайте его для пользователей,иначе у меня,например, в системе не установлен этот шрифт и шрифт меняется на ваш указанный вторым - Arial.

Спасибо за помощь!

>>>если смотреть конкретно только эти страницы - то те же скачки происходят при наведении на ссылки и на лого(у картинке надо бэкграунд сделать прозрачным,а то сейчас она на белом фоне).
скачки убрал  и картинку поменял с прозрачным бэкграундом
>>>страница http://dev4.softreactor.com/admin/dashboard/index
>>>В таблице Hostel Listings и Tour Listings - наведение на строку срабатывает только на чётных строках..так должно быть?
Видимо да так как в настройках таблицы заданы классы "table table-striped table-bordered table-hover table-condensed"
Если убрать класс table-striped - то подсвечиваются все строки но тогда ВСЕ строки одного цвета

>>>и эти таблицы не ровные,ячейки разные(почему-то у заголовка Hostel Listings нижний паддинг равен 0).
Убрал

И еще подскажите пожалуйста а как лучше к сделать строку состояния вверху "You have 3 Active Operators  No operator selected (You are watching data of )"

Там выводятся какие-то общие сообщения для залогинившегося юзера. не знаю как сделать лучше - то что сейчас не очень нравится...

 

>>>И выпадающие списки вверху в меню серого цвета фона..плохо смотрится.
Для выпадающего подменю сделал бордюр и подменю немного светлей. стало лучше?

>>>по странице http://dev4.softreactor.com/admin/hostel/hostelstep1

>>>разные отступы слева в инпутах с текстом и инпутах селект
Это не понятно Я лейблы прижимал справо к инпуту Можно ли принтскрин где Вы полагаете отступы должны быть другими?
Или Вы имеете в виду чо лейблы лучше выравнивать слева?

>>>по цветовой гамме смотрите сами,но зелёный цвет форм и шагов(#7b9f35) смотрится не очень..я бы поменяла на синий(#337ab7) - на сайте не должно быть очень много разных цветов.
Поменял. Теперь фон стал как и топ заголовок с тектсом "Hostel Management->New Hostel : Step 1". Думаете так лучше?
И можно чуть подробнее о "на сайте не должно быть очень много разных цветов" Может, ссылку где это описано... Подобрать цвета на сайт довольно сложно...

>>>и по шрифту посмотрите: если используете Helvetica, то подгружайте его для пользователей,иначе у меня,например, в системе не установлен этот шрифт и шрифт меняется на ваш указанный вторым - Arial.
А какой набор шрифтов Вы бы предложили чтобы меньше заморачиваться со шрифтами на данном этапе?
Я добавил для всей страницы
body {
    ...
    font-family: "MS Sans Serif", Geneva, sans-serif ;
}
...
 

PS.  И Вы не могли бы проверить в айфоне или айпаде?

Edited June 30, 2016 by mstdmstd

[Джулия]

скачки убрали) - отлично стало.Теперь посмотрите на Лого - надо ли наведение такое же как и у всех ссылок..по-моему не надо

по поводу наведения на строки - можно цвет наведения просто изменить(не делать его цветом нечётных строк,сделать соовсем другим) и тогда наведение можно применить к каждой строке.(для наведения используйте псевдоклассы (nth-of-type(even) и nth-of-type(odd) - чётные и нечётные строки).
в вашем случае .table-hover > tbody > tr:hover:nth-of-type(odd),.table-hover > tbody > tr:hover:nth-of-type(even) {background: #цвет;}

>>>И выпадающие списки вверху в меню серого цвета фона..плохо смотрится.
Для выпадающего подменю сделал бордюр и подменю немного светлей. стало лучше? - я бы сделала цвет бордера зелёным #5cb85c, и вообще,сделала,что-то типо такого http://prntscr.com/bn1noo

 

по странице http://dev4.softreactor.com/admin/hostel/hostelstep1

>>>разные отступы слева в инпутах с текстом и инпутах селект - вот это я имею ввиду,небольшие отличия,но они заметы http://prntscr.com/bn1cba

>>>по цветовой гамме смотрите сами,но зелёный цвет форм и шагов(#7b9f35) смотрится не очень..я бы поменяла на синий(#337ab7) - на сайте не должно быть очень много разных цветов. -
Поменял. Теперь фон стал как и топ заголовок с тектсом "Hostel Management->New Hostel : Step 1". Думаете так лучше? - поменяйте ещё на белый цвет текста.

И можно чуть подробнее о "на сайте не должно быть очень много разных цветов" Может, ссылку где это описано... Подобрать цвета на сайт довольно сложно... - я так думаю,что макет вам никто не делал,а вы сразу сами верстаете сайт..Часто составляется мудборд-картинки,описывающие тематику сайта.Посоветовала бы выбрать несколько картинок и закинуть в https://color.adobe.com и программа сама подберёт цветовую гамму либо посмотрите ещё https://vc.ru/p/colorise-it

>>>и по шрифту посмотрите: если используете Helvetica, то подгружайте его для пользователей,иначе у меня,например, в системе не установлен этот шрифт и шрифт меняется на ваш указанный вторым - Arial.
А какой набор шрифтов Вы бы предложили чтобы меньше заморачиваться со шрифтами на данном этапе? - часто в вебе используется шрифт Roboto(https://www.google.com/fonts) - найдите его,скачайте и конвертируйте для всех браузеров (https://everythingfonts.com/font-face)

 

И еще подскажите пожалуйста а как лучше к сделать строку состояния вверху "You have 3 Active Operators  No operator selected (You are watching data of )".Там выводятся какие-то общие сообщения для залогинившегося юзера. не знаю как сделать лучше - то что сейчас не очень нравится... - не вижу,где эти состояния,пришлите скрин.

 

 

 

[mstdmstd]

PS. Эта опция недоступна для оператора Зайдите в систему под админом что я давал в самом начале...

Edited July 1, 2016 by mstdmstd

[Джулия]

16 часов назад, mstdmstd сказал:

PS. Эта опция недоступна для оператора Зайдите в систему под админом что я давал в самом начале...

возможно,как-то так) http://prntscr.com/bndksd

[mstdmstd]

Спасибо за помощь!
Верхнее меню подправил но
1) Не нашел где прописан синий цвет для бордюра кликнутого верхнего пункта меню и
2) как сделать чтобы облать между верхним меню и нижним списком была без бордюров как на ваших списках

Использовал псеводклассы для списков в http://dev4.softreactor.com/admin/dashboard/index (также можно посмотреть тут http://dev4.softreactor.com/admin/tour/index/page/1)

Да сайт верстаю сам на основе моего прошлого проекта


Мне ранее попадались статьи о правильном подборе цветов для сайта со ссылкой на color.adobe.com сайт
Открыв этот сайт и выбрав для триады светло-серый цвет #E3E3E3(для фона сайта) в цетральную ячейку и поелозив мышкой я получил цвета которые показалсь мне приятными:


или ссылка
https://color.adobe.com/create/color-wheel/?base=2&rule=Triad&selected=1&name=My Color Theme&mode=rgb&rgbvalues=0.780392156862745,0.17332578104025564,0.5923143880811694,0.8901960784313725,0.7744120109851202,0.13141021019512342,0.8901960784313725,0.8901960784313725,0.8901960784313725,0.6901960784313725,0.7591813102962898,0.7607843137254902,0.11286346640324883,0.5793562294004106,0.5901960784313725&swatchOrder=0,1,2,3,4

Взникли вопросы:
1) А собственно почему 5 цветов? Понятие триада как бы подразумевает 3 ?
2) Как лучше использовать выбранные цвета для элементов сайта ? В данном случае для админке есть
  Списки с данными
    с заголовком
    строка с заголовком таблицы
    непосредственно таблица с данными с 3 альтерантивными цветами для разных строк и строкой под мышкой
    кнопки привязанные к списку(создание нового элемента и фильтра)
    строка сообщений списка/редактора
    строка с ссылками паджинации

Выглядит так:

Редактор
    поля ввода с лейблами
    сообщения об ошибках ввода
    табы для больших редакторов
    подсписки с данными и попап окнами для редактирования



Также общие элеиенты строка сообщений, меню, заголовок, футер.

Поделитесь как использовать 3(или 5) выбранных ранее цветов для этих элементов(и других более мелких)?
Получается чтобы не было много цветов - надо все элементы группировать по 3(5?) цветам?

Я перезалил базу и поменял логин админа dev4.softreactor.com/main/login
test_admin@mail.com    M1R1vizk

Или пересоздать аккаунт для оператора ии ЕЩЕ ВОПРОС А вАМ ПРИШЕЛ ЕМЕЙЛ ПРИ РЕГИСТРАЦИИ ? тАМ

[mstdmstd]

Посмотрите, пожалуйста, еще несколько страниц в админке :
Интересует верстка на различных устройствах. Функционально работает не все - но это не важно...

Вход http://dev4.softreactor.com/main/login как

test_admin@mail.com  88iT8106

список и редактор банеров http://dev4.softreactor.com/admin/banner/index/ + редактор
Паджинация, сортировка кликом на заголовке списка, добавление, редактирования, удаление данных. Вывод ошибок при вводе неправильных данных.
 

список и редактор туров

http://dev4.softreactor.com

/admin/tour/index

Паджинация, сортировка кликом на заголовке списка, добавление, редактирования, удаление данных. Вывод ошибок при вводе неправильных данных.
Список имеет кнопку фильтра с попапом для выбора фильтров.
Для работы с редактором сначала нужно выбрать оператора. Например "Operator_2"- он с данными.
Редактор состоит из нескольких закладок - для редактирования http://dev4.softreactor.com/admin/tour/edit/26/page/1/filter_feature/F/filter_status/A
На закладке "Information & Highlights" можно добавить/удалить Highlights.
На закладке "Image Gallery" можно добавить/удалить картинки без перегрузки страницы .
На закладках "Tour Enquiries" и "Tour Reviews" можно просмотреть/удалить элементы без создания новых .

список и редактор прользователей http://dev4.softreactor.com/admin/contributor/index
Паджинация, сортировка кликом на заголовке списка, добавление, редактирования, удаление данных. Вывод ошибок при вводе неправильных данных.
Список имеет кнопку фильтра с попапом для выбора фильтров.

Редактр профайла http://dev4.softreactor.com/myprofile/index