[MetroniX] – Шаблон оформления админки MODX Revo
Представляю вашему вниманию, не побоюсь этого слова, единственную в своем роде альтернативную тему оформления админки MODX Revolution 2.5.1. Мой долгострой, длившийся около полутора лет, наконец вышел на уровень, когда не стыдно показать.
Источником вдохновения послужил HTML-шаблон Metronic. Визуальное оформление шаблона было максимально точно перенесено на HTML-разметку админки MODX Revo. В процессе разработки темы ни одна часть этой разметки не пострадала и осталась в точности такой же, как в дефолтной теме версии 2.5.1. Это дает гарантию того, что тема не сломает какое-нибудь малоизвестное дополнение.
Тема MetroniX доступна в магазине MODSTORE
Протестировать дополнение можно на demo-сайте
Видео: MetroniX – Обзор шаблона админки MODX Revo
Скриншоты:
Источником вдохновения послужил HTML-шаблон Metronic. Визуальное оформление шаблона было максимально точно перенесено на HTML-разметку админки MODX Revo. В процессе разработки темы ни одна часть этой разметки не пострадала и осталась в точности такой же, как в дефолтной теме версии 2.5.1. Это дает гарантию того, что тема не сломает какое-нибудь малоизвестное дополнение.
Тема MetroniX доступна в магазине MODSTORE
Протестировать дополнение можно на demo-сайте
Видео: MetroniX – Обзор шаблона админки MODX Revo
Скриншоты:
17 октября 2016, 16:47
Комментарии: 172
Дело в том, что разметка, которую генерирует ExtJS, не очень подходит для подобных экспериментов. То тут, тот там приходилось идти на компромиссы и извращения, чтобы привести ее к нужной мне визуализации. Несколько раз я начинал с ноля. Один раз попробовал полностью отказаться от родного файла стилей. В итоге остановился на гибридном варианте.
Когда начнете раскрашивать в стиле Битрикс, все сами отлично поймете. Там .x-body через .x-header едет и .x-table погоняет. Зацепиться не за что. Кроме того, ExtJS для некоторых элементов прописывает стили прямо в разметке, что зачастую было абсолютно мне ни к чему.
Когда начнете раскрашивать в стиле Битрикс, все сами отлично поймете. Там .x-body через .x-header едет и .x-table погоняет. Зацепиться не за что. Кроме того, ExtJS для некоторых элементов прописывает стили прямо в разметке, что зачастую было абсолютно мне ни к чему.
Ну, все равно это же надо исправить, ибо добраться до файлов или документов без полосы прокрутки ни как не получается.
Слайды:
Лис
file.modx.pro/files/6/0/0/6006697d4f6653befcbb7b725c01c0ad.jpg
Хром
file.modx.pro/files/6/4/1/641e2f620e0290ff3f8628134e58c323.jpg
Слайды:
Лис
file.modx.pro/files/6/0/0/6006697d4f6653befcbb7b725c01c0ad.jpg
Хром
file.modx.pro/files/6/4/1/641e2f620e0290ff3f8628134e58c323.jpg
Кстати, надо отдать должное, особо ни чего не плывет, MetroniX [1.0.1-pl] как в древе так и в большинстве компонентов ведет себя хорошо. Автор потрудился ударно!
Ну, разве что padding какой нибудь и т.п. поправить, но на тестовом сайте я кучу накидал расширений и на локальной копии одного сайта попробовал, в принципе можно и ставить ее как основную тему админки. Css-ку чуть поправить только.
Лично мне такие цвета комфортнее. Спасибо автору.
Ну, разве что padding какой нибудь и т.п. поправить, но на тестовом сайте я кучу накидал расширений и на локальной копии одного сайта попробовал, в принципе можно и ставить ее как основную тему админки. Css-ку чуть поправить только.
Лично мне такие цвета комфортнее. Спасибо автору.
Вот, еще момент, в файле manager/templates/MetroniX/help.tpl не отображаются значения лексиконов, причем только кода я назначаю тему админки для одного пользователя. Если заменить этот шаблон дефолтным с тегами Smarty, то все отображается, но исчезают полосы прокрутки (это уже я накосячил, переустанавливал тему и затер в CSS изменения). Актуально только по лексиконам вызываемым тегами MODX
Но зачем использовать в шаблонах админки теги MODX? Не сочтите за занудство.
Но зачем использовать в шаблонах админки теги MODX? Не сочтите за занудство.
Эта ветка будет посвящена обсуждению полосы прокрутки left-bar
Прежде всего, я хочу объяснить свою позицию. По моему мнению, столбик серых пикселей (полоса прокрутки) не вписывается в дизайн темы. Если б была возможность избавится от него во всех браузерах, а не только в Хроме, я бы это сделал. Я считаю, что отсутствие полосы никак не влияет на функциональность. Ведь скролл происходит не из-за того, что по правой границе блока браузер пририсовал столбик пикселей. Полоса прокрутки отображает состояние скролла. Естественно, что если потянуть указателем мыши за бегунок полосы, произойдет прокрутка содержимого. Но скажите мне – Кто так поступает?! Мне на ум приходит только один юзеркейс – у вас нет мышки, и вы пользуетесь тачпадом и при этом не осилили прокрутку жестами. Но это ведь за пределами добра и зла!
Теперь про то, что у некоторых покупателей отсутсвие полосы прокрутки приводит к тому, что они не могут прокрутить содержимое и (или) у них «мышка, например, тупо «липнет» при скролле колесом». Не то чтобы я не доверял такому фидбеку, но всё-таки взгляните со стороны – есть моё слово против их слова. Причем в подтверждение моих слов есть видео, на котором видно, что содержимое лефтбара отлично скролится. Браузеры у всех одинаковые – Хромы – так из-за чего же может быть их проблема?
Давайте разберемся вместе. Прошу высказывать свои мысли в ответах к этому комментарию.
Прежде всего, я хочу объяснить свою позицию. По моему мнению, столбик серых пикселей (полоса прокрутки) не вписывается в дизайн темы. Если б была возможность избавится от него во всех браузерах, а не только в Хроме, я бы это сделал. Я считаю, что отсутствие полосы никак не влияет на функциональность. Ведь скролл происходит не из-за того, что по правой границе блока браузер пририсовал столбик пикселей. Полоса прокрутки отображает состояние скролла. Естественно, что если потянуть указателем мыши за бегунок полосы, произойдет прокрутка содержимого. Но скажите мне – Кто так поступает?! Мне на ум приходит только один юзеркейс – у вас нет мышки, и вы пользуетесь тачпадом и при этом не осилили прокрутку жестами. Но это ведь за пределами добра и зла!
Теперь про то, что у некоторых покупателей отсутсвие полосы прокрутки приводит к тому, что они не могут прокрутить содержимое и (или) у них «мышка, например, тупо «липнет» при скролле колесом». Не то чтобы я не доверял такому фидбеку, но всё-таки взгляните со стороны – есть моё слово против их слова. Причем в подтверждение моих слов есть видео, на котором видно, что содержимое лефтбара отлично скролится. Браузеры у всех одинаковые – Хромы – так из-за чего же может быть их проблема?
Давайте разберемся вместе. Прошу высказывать свои мысли в ответах к этому комментарию.
Я уже приводил другой «кейс» — у меня мышь «залипает» при скроллинге колесом (да, собственно, я и раньше колесом не скроллил — мне неудобно или непривычно, или просто не хочу, как не использую я скроллинг вшитый в мою клавиатуру).
Я не собираюсь перебивать своим словом твое слово — это, имхо, детский сад. Я говорю, что вот у меня такая проблема присутствует и было бы здорово, если бы можно было отключать твою фичу, не влезая в код. При этом и ты остаешься при своем аргументированном и уважаемом мнении и пользователи, имеющие проблемы аналогичные моим, пребывают в восторженном расположении духа. По-моему, это очевидно.
Видео с попыткой скроллить мышкой: youtu.be/t_R72miy9Fc
Вот, когда возникают странные паузы, когда ничего как бы не происходит — это я усиленно пытаюсь скроллить или вверх, или вниз. Вообще, цель была перейти вниз списка.
Я не собираюсь перебивать своим словом твое слово — это, имхо, детский сад. Я говорю, что вот у меня такая проблема присутствует и было бы здорово, если бы можно было отключать твою фичу, не влезая в код. При этом и ты остаешься при своем аргументированном и уважаемом мнении и пользователи, имеющие проблемы аналогичные моим, пребывают в восторженном расположении духа. По-моему, это очевидно.
Видео с попыткой скроллить мышкой: youtu.be/t_R72miy9Fc
Вот, когда возникают странные паузы, когда ничего как бы не происходит — это я усиленно пытаюсь скроллить или вверх, или вниз. Вообще, цель была перейти вниз списка.
Это обычная tv textarea (текстовая область) в ресурсе
Еще косяк — Контроль доступа yadi.sk/i/8-rQwDnzzfzQv
Может сделать так — yadi.sk/i/6C8O5zCAzg2mg
Еще косяк — Контроль доступа yadi.sk/i/8-rQwDnzzfzQv
Может сделать так — yadi.sk/i/6C8O5zCAzg2mg
Здрвствуйте в MIGX таблице есть прокрутка, prntscr.com/dkpv9s — показываю на скриншоте
Давай те я покажу, в другом ракурсе: prntscr.com/dl0syb
Когда я делаю Migx у меня блок с прокруткой.
Мое разрешение экрана prntscr.com/dl0wqe
Когда я делаю Migx у меня блок с прокруткой.
Мое разрешение экрана prntscr.com/dl0wqe
Еще один косячек в модуле collection prntscr.com/dli5eg — и еще внизу прокрутка.
)))
)))
Ну это не совсем так.
Скажем, это проблемы небольших мониторов
i.imgur.com/vLcDkKU.png
На новогодних каникулах планирую заняться адаптивной версией темы, вот тогда все эти вещи попробую как-то причесать. Основная беда в том, что эта строка с кнопками, как и многое остальное сделано таблицей
Скажем, это проблемы небольших мониторов
i.imgur.com/vLcDkKU.png
На новогодних каникулах планирую заняться адаптивной версией темы, вот тогда все эти вещи попробую как-то причесать. Основная беда в том, что эта строка с кнопками, как и многое остальное сделано таблицей
Проблема с Minishop2: информация о заказе выстроились в одну колонку, окно не влазит в экран
Проблема из-за flex-direction: column
Проблема из-за flex-direction: column
#modx-page-settings .x-column-inner .x-column-inner, .x-fieldset .x-column-inner {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
}
Еще проблема с migx таблицей (картинки кликабельны)
а должно быть так:
Мое решение:
а должно быть так:
Мое решение:
.modx-tv .modx-tv-form-element .x-grid3 {
max-width:1280px; /* Для моего разрешения экрана 1920х1080 */
}
#modx-tv-tabs .x-form-textarea {
width: 100% !important; /* для выравнивания textarea с другими полями */
}
prntscr.com/dmt7sm — я не могу добавить свой параметр. Как я понимаю это баг шкурки.
Супер!
Вот еще один: горизонтальный скролл: prntscr.com/dolbg3
Ну и незначительное: в modMonitor prntscr.com/dolczp
Еще немного странно работаю поля Цвета, Размеры, Теги в miniShop2. При вводе как-то дергается текст
Вот еще один: горизонтальный скролл: prntscr.com/dolbg3
Ну и незначительное: в modMonitor prntscr.com/dolczp
Еще немного странно работаю поля Цвета, Размеры, Теги в miniShop2. При вводе как-то дергается текст
TV Множественный выбор, при открытии списка появляется квадратик: prntscr.com/dolk6e
скриншот на я.диске
десктоп супер, конечно )
В мобильной версии диспетчер файлов не разворачивается, невозможно пользоваться :(
покупал как раз из-за адаптива
десктоп супер, конечно )
В мобильной версии диспетчер файлов не разворачивается, невозможно пользоваться :(
покупал как раз из-за адаптива
Вышла вторая версия темы. В ней появилось множество нововведений.
Во-первых, обновились стили некоторых элементов и добавденна полноценная поддержка планшетов и телефонов. Да-да! Теперь вы можете администрировать сайт с мобильного телефона.
Во-вторых, были доработаны некоторые скрипты админки, результатом чего стали доступны новые возможности, которыми можно управлять из настроек темы. Перейдя в системные настройки и выбрав раздел metronix, вы сможете управлять следующими опциями:
Во-первых, обновились стили некоторых элементов и добавденна полноценная поддержка планшетов и телефонов. Да-да! Теперь вы можете администрировать сайт с мобильного телефона.
Во-вторых, были доработаны некоторые скрипты админки, результатом чего стали доступны новые возможности, которыми можно управлять из настроек темы. Перейдя в системные настройки и выбрав раздел metronix, вы сможете управлять следующими опциями:
Нашел еще один баг в дополнении.
Немного коряво работает с tagElementPlugin, раньше такого не замечалось.
Пример:
У нас активирована тема, заходим в редактирование шаблона ресурса (установлен Ace), обязательно разворачиваем область редактирования кода на весь экран, после берем любой чанк, выделяем его (должен быть установлен tagElementPlugin) и при нажатии Ctrl+Enter должно всплыть окно редактирования чанка, оно всплывает, НО, увидеть его можно только если свернуть область редактирования шаблона.
Могу с уверенностью сказать, что на старой версии дополнения такого небыло, и, если отключить тему, то все начинает работать корректно.
Немного коряво работает с tagElementPlugin, раньше такого не замечалось.
Пример:
У нас активирована тема, заходим в редактирование шаблона ресурса (установлен Ace), обязательно разворачиваем область редактирования кода на весь экран, после берем любой чанк, выделяем его (должен быть установлен tagElementPlugin) и при нажатии Ctrl+Enter должно всплыть окно редактирования чанка, оно всплывает, НО, увидеть его можно только если свернуть область редактирования шаблона.
Могу с уверенностью сказать, что на старой версии дополнения такого небыло, и, если отключить тему, то все начинает работать корректно.
На демо-сайте metronix.adorazel.online/manager/ залогинился.
В dev tools Chorme включаю режим эмуляции iPhone 6s Plus, на главной странице
Uncaught TypeError: Cannot read property 'select' of null
at Styles (metronix.min.js?v=2.0.4-beta:1)
at metronix.min.js?v=2.0.4-beta:1
at ext-all-patched.min.js?v=2.0.4-beta:1
at h (ext-all-patched.min.js?v=2.0.4-beta:1)
В dev tools Chorme включаю режим эмуляции iPhone 6s Plus, на главной странице
Uncaught TypeError: Cannot read property 'select' of null
at Styles (metronix.min.js?v=2.0.4-beta:1)
at metronix.min.js?v=2.0.4-beta:1
at ext-all-patched.min.js?v=2.0.4-beta:1
at h (ext-all-patched.min.js?v=2.0.4-beta:1)
Здравствуйте, для нашего сайта необходима возможность для работы со смартфона — добавление / редактирование статей, записей в блогах и т.д. Чем проще и быстрее это будет, тем лучше.
Нашел Вашу тему, попробовал демо — очень долго загружает каждый пункт, даже при наличии оптоволокна, тормозит из-за демо хостинга или из-за кода ??
При попытке в демо статью загрузить фото — форма вся съежилась, но зайти в меню загрузки удалось.
Прошу Вас написать в почту или в личку, есть ли возможность адаптировать или доработать Вашу тему, при ее покупке, под наши задачи?
Нашел Вашу тему, попробовал демо — очень долго загружает каждый пункт, даже при наличии оптоволокна, тормозит из-за демо хостинга или из-за кода ??
При попытке в демо статью загрузить фото — форма вся съежилась, но зайти в меню загрузки удалось.
Прошу Вас написать в почту или в личку, есть ли возможность адаптировать или доработать Вашу тему, при ее покупке, под наши задачи?
Backend MODX использует фреймворк ExtJS не самой свежей версии. Если не ошибаюсь, то версии 3
В этой версии я не нашел и намека на возможность конструирования адаптивной разметки.
Эта возможность добавлена в более поздних версиях
Поэтому я не рекомендовал бы вам использовать modx с таким юзеркейсом, как администрирование сайта с телефона.
Я как мог с помощью стилей и нескольких изменений в ExtJS привел админку к более-менее удобоваримому состоянию. Но естественно там еще осталось много чего, что в телефоне выглядит не очень хорошо.
По поводу долгой загрузки.
Вы понимаете, что весь интерфейс, который вы видите в админке, создается на лету. То есть это не сервер его отдает, а клиент на своем процессоре создает? Отсюда вывод, если процессор медленный — будет медленная загрузка (читай создание при загрузки) элементов интерфейса. Это, кстати, еще один повод не использовать MODX для администрирования с телефона.
В этой версии я не нашел и намека на возможность конструирования адаптивной разметки.
Эта возможность добавлена в более поздних версиях
Поэтому я не рекомендовал бы вам использовать modx с таким юзеркейсом, как администрирование сайта с телефона.
Я как мог с помощью стилей и нескольких изменений в ExtJS привел админку к более-менее удобоваримому состоянию. Но естественно там еще осталось много чего, что в телефоне выглядит не очень хорошо.
По поводу долгой загрузки.
Вы понимаете, что весь интерфейс, который вы видите в админке, создается на лету. То есть это не сервер его отдает, а клиент на своем процессоре создает? Отсюда вывод, если процессор медленный — будет медленная загрузка (читай создание при загрузки) элементов интерфейса. Это, кстати, еще один повод не использовать MODX для администрирования с телефона.
Ну вы же понимаете, что просто поменять синий на малиновый, зеленый на салатовый, это не то, что вам бы хотелось.
За основу оформления была взята верстка Metronic. Она была адаптирована под разметку MODX.
Я наверно был бы не прочь добавить еще какую-то тему в дополнение, но достойной пока не встречал.
Как вариант, наверно можно было бы сделать набор джентльмена темная тема + светлая тема + основная
Но для этого нужен дизайн и время
Ну и вы понимаете, что в итоге цена дополнения повысится
За основу оформления была взята верстка Metronic. Она была адаптирована под разметку MODX.
Я наверно был бы не прочь добавить еще какую-то тему в дополнение, но достойной пока не встречал.
Как вариант, наверно можно было бы сделать набор джентльмена темная тема + светлая тема + основная
Но для этого нужен дизайн и время
Ну и вы понимаете, что в итоге цена дополнения повысится
Нет мне не понятно… Как раз цвет мне не нравится темный в этом шаблоне, лично мне бы хотелось настроить приевшийся цвет под себя на всей админке + какие нибудь фишки добавить — картинки и прочее. Иначе что нового несет ваша тема? Она что функционал админки меняет? Вносит новые плагины в MODx? Она изменяет цветовую палитру и работу с подсветкой редакторов. Изменяет некоторые стили и шрифты на страницах.
Поправьте если я ошибаюсь
Поправьте если я ошибаюсь
Авторизуйтесь или зарегистрируйтесь, чтобы оставлять комментарии.
Здесь упомянуты:
| Компонент | Текущая версия | Закачки |
| MetroniX | 2.2.3-pl от 18.02.2019 | 473 |
| AdminTools | 1.15.2-pl от 28.09.2020 | 3 491 |
| modDevTools | 1.2.1-pl от 27.02.2016 | 3 111 |
| miniShop2 | 4.4.0-pl от 06.08.2024 | 26 100 |
| SCSS | 2.0.4-pl от 25.06.2023 | 168 |
| dbAdmin | 1.1.3-pl от 30.06.2017 | 1 328 |
| tagElementPlugin | 1.3.1-pl от 29.03.2019 | 3 271 |
| Ace | 1.9.4-pl от 23.02.2024 | 14 713 |
| ms2Gallery | 2.0.12-pl от 25.09.2020 | 4 575 |
| easyComm | 3.3.0-pl от 04.01.2024 | 5 013 |
20 ноября 2024, 16:25
В сниппете rcv3_html достаточно отложить загрузку через setTimeout (хотя кто-то делает через onClick). Не думаю что мой вариант самый правильный и что...
19 ноября 2024, 10:51
Решил свою проблему через имя пользователя, но хотелось бы через права пользователя «Неограниченные права»
<?php
/**
* Системное событие OnMan...
19 ноября 2024, 09:09
Спасибо, тоже очень интерестное решение.
18 ноября 2024, 15:21
'where' => [
'Data.price:!='=>'0'
]
18 ноября 2024, 14:19
miniShop2.Order.add('extfld_delivery_price','100', function() {
miniShop2.Order.getcost();
})
Это вот работает, но чтобы увид...
18 ноября 2024, 10:11
Благодарю за ответы.
16 ноября 2024, 21:12
Спасибо. Работает.
