--}}
Новая тема
Вы не можете создавать новые темы.
Т.к. вы неавторизованы на сайте. Пожалуйста назовите себя или зарегистрируйтесь.
Список тем

Нужна помощь - проектирование интерфейса.

Серьёзная тема
27
18
С друзьями на NN.RU
В социальных сетях
Поделиться
Подскажите, пожалуйста! Делаю сайт, точнее панель управления своим проектом.

Пользователь логинится на сайте и по одной из ссылок заходит в список объектов (Компании).
У каждого из этих объектов множество свойств, которые было бы неплохо отобразить на экране.
То есть по сути - панель сводной информации (Бюджет и т.д.).
P.S. Также есть мысль поставить чекбокс совместимости с Законодательством РФ.
Она будет добавлять такие поля как ИНН, КПП и т.п.

Сложность ещё и в том, что каждый объект содержит ещё два списка объектов других типов (Сотрудники и Филиалы).
Поэтому есть мысль свойства самого объекта отобразить таким же виджетом, но отдельным.

И вот тут... Я использую AdminLTE, но нужного мне элемента нет - надо создавать самому.
А я пока не силён в адаптивной вёрстке. В общем, кто может подсказать, что почитать о проектировании интерфейсов?
P.S. Обращался в поиск гугла - предлагает использовать для виджета iframe и практически все виджеты - для ВК и ФБ.
alexeyweb
19.12.2016
откуда данные нужно взять? если база данных ваша зачем нужны iframe?!
если БД ваша, что мешает сделаешь запросы в базу и вывести результат, где нужно и оформить, как нужно?

предполагаю, что AdminLTE на Bootstrap 3,
официальная документация - getbootstrap.com
посмотрите примеры готовых классов, которые нужно добавлять в html-разметку, например, простая панелька для какой либо инфы - getbootstrap.com/components/#panels-heading
В том-то и дело, что виджет собственный и база тоже своя.
По поводу bootstrap - спасибо, я это уже знаю.

В том-то и проблема, что "простая панелька для инфы" меня не устроит.
Слишком много сводных данных, которые нужно отобразить.

И проблема не в том, чтобы отобразить эти данные.
Проблема в том, чтобы у виджета была адаптивная вёрстка.
Чтобы разметка виджета при просмотре на разных устройствах не поплыла.
... может быть, так понятнее будет.
Я зашёл на сайт под пользователем для просмотра списка компаний --->
(компания пока одна, окно сворачивается)
alexeyweb
19.12.2016
пишите, что про bootstrap знаете, тогда почему документацию не изучаете? там всё написано, смотрите адаптивную сетку (Grid system) - getbootstrap.com/css/#grid-options

например, так:
<div class="row">
<div class="col-sm-6">ТУТ ЗЕЛЁНЫЙ БЛОК</div>
<div class="col-sm-6">ТУТ ОРАНЖЕВЫЙ БЛОК</div>
</div>

используя класс .col-sm-6 для зелёного и оранжевого блоков они будут в один столбик на экранах с разрешением меньше или равно 768px (см. таблицу - Grid options).
Зелёный и оранжевый блок - НЕ СТРОКА. Это виджет. Прямоугольный. И в строке их НЕСКОЛЬКО.
Один только на телефоне (просто потому, что на экране мобильного больше не убирается).

В общем, как-то так --->

... если бы всё было так просто, я бы тут вопросов не задавал.
alexeyweb
19.12.2016
Афраний писал(а)
AdminLTE

этот шаблон используете? - usebootstrap.com/theme/adminlte
как я и думал он на bootstrap 3

Афраний писал(а)
Зелёный и оранжевый блок - НЕ СТРОКА. Это виджет.

какая разница, что там внутри дивов, если только ваш виджет не js-скриптом подгружается, так как js-скрипты могут свои стили задавать и конфликтовать с bootstrap.

в предыдущем комментариях дал ссылки на сетку bootstrap, ничего сложного там нет, примеры, как работает сетка приведены, а внутрь блоков пихайте что угодно.

для чего дал эту ссылку - getbootstrap.com/css/#grid-options
там же написано, какие классы нужно применять для адаптации.

сразу же после таблицы с описанием классов сетки дан пример, см. "Example: Stacked-to-horizontal"

префиксы:
".col-xs-" - работает на экранах <768px
".col-sm-" - работает на экранах?768px
".col-md-" - работает на экранах ?992px
".col-lg-" - работает на экранах ?1200px

после префикса идёт цифра, которая указывает сколько занимать ячеек для ширины блок,
сетка разделена на 12 ячеек, если нужно два блока поместить в одну строку, то разметка будет такая:

<div class="row">
<div class="col-sm-6">ТУТ ЗЕЛЁНЫЙ БЛОК</div>
<div class="col-sm-6">ТУТ ОРАНЖЕВЫЙ БЛОК</div>
</div>

класс .col-sm-6 расшифровывается так - "col-sm-" растянуть блок на всю ширину когда разрешение станет меньше или равно 768px,
цифра "6" после префикса ".col-sm-" указывает на то, что блок при разрешении экрана более 768px будет занимать ширину равной шести ячейкам из 12-ти, ..т.е. половину.

Ну смотрите внимательнее таблицы "Grid options" и "Example: Stacked-to-horizontal" , поиграйтесь с размером экрана в режиме разработчика - F12 в браузере гугл-хром, в верхнем правом углу при изменении экрана увидите циферки-пиксели, сравните их с указанными в таблицах и следите, что происходит с примерами в "Example: Stacked-to-horizontal".

больше я не знаю, как объяснить, на самом деле ничего сложного, всё готово, только указывай правильные классы.

готовую html-разметку можно также посмотреть в том же шаблоне AdminLTE, посмотрите исходный код похожих блоков, которые наиболее подходят под вашу задачу, да и всё.
alexeyweb
19.12.2016
себя поправлю..
alexeyweb писал(а)
класс .col-sm-6 расшифровывается так - "col-sm-" растянуть блок на всю ширину когда разрешение станет меньше или равно 768px..

немного не так, при разрешении более 768px блок будет занимать половину экрана (6 частей из 12), а при ширине менее 768px, если больше никаких классов не указано, займёт всю ширину экрана,
ведь можно сразу несколько классов задавать.
alexeyweb писал(а)
Афраний писал(а)Зелёный и оранжевый блок - НЕ СТРОКА. Это виджет.
какая разница, что там внутри дивов, если только ваш виджет не js-скриптом подгружается, так как js-скрипты могут свои стили задавать и конфликтовать с bootstrap.
Большая. Эти div имеют разные значения свойства display.

По теме - спасибо, документацию читать я и сам умею. И про то, что можно задавать несколько классов - тоже знаю.
И готовую html-разметку я уже смотрел. Виджет пытался сделать по образу и подобию dashboard.
alexeyweb писал(а)
ничего, данный лишний див уже нарушает сетку bootstrap.
Вот! Тогда так...

<div class=row>
<div class=col-sm-3> // прямоугольник
<div style=width: 40%;>ТУТ ЗЕЛЁНЫЙ БЛОК с баблом</div>
<div style=width: 60%;>ТУТ ОРАНЖЕВЫЙ БЛОК с владельцем</div>
</div>
</div>

... а вообще посмотрев на таблицы я решил, что виджет тоже лучше верстать через div
Так проще, чем рисовать колонки и делать слева таблицу, а справа надписи.
-----------------------
В общем, спасибо, разобрался.
<div class="row">
<div class="прямоугольник">
<div class="col-sm-6">ТУТ ЗЕЛЁНЫЙ БЛОК с баблом</div>
<div class="col-sm-6">ТУТ ОРАНЖЕВЫЙ БЛОК с владельцем</div>
</div>
</div>

Вот что поставить в "прямоугольник", чтобы зелёный и оранжевый блоки не распадались и вёрстка не ехала?
И чтобы высота была одинаковой...
alexeyweb
19.12.2016
ничего, данный лишний див уже нарушает сетку bootstrap.
см. ответ выше
Pashtet
20.12.2016
Я думаю, если вы не можете сверстать элементарную страницу, вам не надо этим заниматься, а тем более делать панель управления.
Есть такой замечательный инструмент, Google называется, и уж если вы и тут не справляетесь я тогда не знаю...
C@H
20.12.2016
ну человек учится, все когда то учились, тут ведь стоит один раз понять принцип, а дальше только опыт набирается и делаешь как по накатанной. и вроде как форумы созданы чтоб помогать, а на нюре порой и спросить то страшно.
Элементарную страницу я как раз сверстать могу.
Но в то время, когда я верстал, не то что смартфонов - мобильных телефонов ещё не было.
И про адаптивную вёрстку тогда ещё не слышали.

А теперь мне надо создать виджет, который будет подчиняться правилам адаптивной вёрстки.
И если Вы умеете читать, то увидите, что гугл я уже допрашивал. С пристрастием.
C@H
20.12.2016
ну вам же подсказали, что все "свое" должно быть внутри сетки класс "row" не должен ничем разделятся и после него должны быть блоки именно с ячейками, общая сумма которых должна быть 12, а вот потом вы можете вставлять любую другую разметку, главное без класса "row", иначе бутстрап подумает, что это новая сетка. Для каждого экрана у одного блока вы можите повесить разные классы, это какраз и будет управлять "шириной" и расположением ваших блоков. увы в бутстрапе идет жесткая привязка и например нельзя без костылей вырвать блоки из сетки. Я лично адаптив делаю сам, да, мороки больше, но четко понимаешь куда ты хочешь переместить свои элементы.
Спасибо. Это я уже понял.
И то, что мороки больше - это я тоже понял :-)
Новая тема
Вы не можете создавать новые темы.
Т.к. вы неавторизованы на сайте. Пожалуйста назовите себя или зарегистрируйтесь.
Список тем
Последние темы форумов
Форум Тема (Автор) Последний ответ Ответов
Медицина Феринжект   -  LOE-NN 08.09.2024 в 18:38:45 3
Прибор -цифровой мультиметр BENNING MM11

Цифровой мультиметр BENNING MM11 Отправка в регионы после оплаты. Made in Germany - Германия. Цена 19000 руб. ТОРГА...
Цена: 19 000 руб.

Прибор Мультиметр Chauvin Arnoux c.A 5260

Мультиметр "chauvin arnoux c.A 5260"- франция Производитель: chauvin arnoux, франция гост реестр рф: 20275-07 лежал в...
Цена: 18 000 руб.

Конденсaтoр АЕRОVОХ 4400 мкф х 350 вольт

Конденсaтoр АЕRОVОХ 4400 мкф x350 вольт 2штуки ТOpгa HHeтт Отправка в региoны пoсле оплаты сразу-Только- Оба Ценa 1800...
Цена: 1 800 руб.

лазерная резка металла

Команда специалистов ООО БАРТОН предоставляет качественные услуги лазерной резки металла в Нижнем Новгороде на профессиональном...

Продавец-консультант (г. Нижний Новгород) Розничная сеть МТС
38000 -
51000 руб.
Среднее образование, без опыта, полная занятость
Продавец-консультант (Нижний Новгород, Советский р-н) Розничная сеть МТС
38000 -
51000 руб.
Среднее образование, без опыта, полная занятость
Оператор на телефоне, call-центр Билайн
от 23 500 руб.
Среднее образование, без опыта, полная занятость
Продавец-консультант (Нижний Новгород, ТЦ Седьмое Небо) Розничная сеть МТС
38000 -
51000 руб.
Среднее образование, без опыта, полная занятость