Если Ваш Moodle-сайт оформляется темой Essential, то Вы могли наверняка заметить, что блоки значков категорий у Вас разной высоты, если название категории достаточно длинное и состоит из нескольких слов. Однако, хотелось бы видеть эти блоки одинаковой высоты. Что делать? Ответ один: править код темы!
Отключаем значок загрузки при клике на категорию.
Открываем файл core_course_renderer.php в папке classes темы.
Находим coursecat_include_js() и комментируем весь блок if:
// if (intval($CFG->version) >= 2013111800) {
// Make sure JS file to expand category content is included.
// $this->coursecat_include_js();
// }
Для чего это сделано? Для того, чтобы значок загрузки не мешал выравниванию блоков. Иначе будет возникать ошибка JSON. И также теперь обращений к серверу меньше )
Добавляем файл скрипта, выравнивающего блоки
В этом же файле добавим ещё одну строку в функции public function __construct(moodle_page $page, $target):
после
$theme = theme_config::load('essential');
вставим строчку
print "<script type='text/javascript' src='/theme/essential/javascript/hei.js'></script>";
Таким образом мы подключим к блокам категорий курсов скрипт, позволяющий выравнивать блоки. Скрипт напишем позже.
Вся функция будет выглядеть вот так:
public function __construct(moodle_page $page, $target) {
parent::__construct($page, $target);
static $theme;
if (empty($theme)) {
$theme = theme_config::load('essential');
print "<script type='text/javascript' src='/theme/essential/javascript/hei.js'></script>";
}
$this->enablecategoryicon = (!empty($theme->settings->enablecategoryicon)) ? $theme->settings->enablecategoryicon : false;
}
Обратите внимание на название файла скрипта: hei.js и его расположение: /theme/essential/javascript/
Создаём скрипт hei.js
window.onload = function() {
setTimeout(function() {
var subcatDivs = document.getElementsByClassName("categoryname");
var maxHCat = 0;
for (var cat_h = 0; cat_h < subcatDivs.length; ++cat_h) {
if (maxHCat < subcatDivs[cat_h].clientHeight) {
maxHCat = subcatDivs[cat_h].clientHeight;
}
}
for (var cat_h = 0; cat_h < subcatDivs.length; ++cat_h) {
subcatDivs[cat_h].style.height = maxHCat + "px";
}
}, 100);
}
Задержка в скрипте нужна, чтобы после загрузки страницы было время для расчёта высоты блоков. Сохраняем данный файл в /theme/essential/javascript/.
Костыли хака
Во время использования хака заметил следующее: изменяется размер некоторых полей ввода. Необходимо их поправить. Файл essential.css в папке style. К сожалению, структура файла минимизирована, поэтому нам нужно будет выполнять поиск в файле (не привязываясь к строкам).
Ищем login_password. Добавляем в строку (выделено полужирным): login_password,.block_login input#login_username{width:95%; height:30px}
Ищем coursesearchbox. Добавляем в строку: coursesearchbox label{display:inline}#coursesearchbox{height:30px}
Ищем adminsearchquery. Добавляем в строку: #adminsearchquery{max-width:92%; height:30px}
Замечание: при обновлении темы Вам придётся повторять те же операции с файлами вновь и вновь.
Отключаем значок загрузки при клике на категорию.
Открываем файл core_course_renderer.php в папке classes темы.
Находим coursecat_include_js() и комментируем весь блок if:
// if (intval($CFG->version) >= 2013111800) {
// Make sure JS file to expand category content is included.
// $this->coursecat_include_js();
// }
Для чего это сделано? Для того, чтобы значок загрузки не мешал выравниванию блоков. Иначе будет возникать ошибка JSON. И также теперь обращений к серверу меньше )
Добавляем файл скрипта, выравнивающего блоки
В этом же файле добавим ещё одну строку в функции public function __construct(moodle_page $page, $target):
после
$theme = theme_config::load('essential');
вставим строчку
print "<script type='text/javascript' src='/theme/essential/javascript/hei.js'></script>";
Таким образом мы подключим к блокам категорий курсов скрипт, позволяющий выравнивать блоки. Скрипт напишем позже.
Вся функция будет выглядеть вот так:
public function __construct(moodle_page $page, $target) {
parent::__construct($page, $target);
static $theme;
if (empty($theme)) {
$theme = theme_config::load('essential');
print "<script type='text/javascript' src='/theme/essential/javascript/hei.js'></script>";
}
$this->enablecategoryicon = (!empty($theme->settings->enablecategoryicon)) ? $theme->settings->enablecategoryicon : false;
}
Обратите внимание на название файла скрипта: hei.js и его расположение: /theme/essential/javascript/
Создаём скрипт hei.js
window.onload = function() {
setTimeout(function() {
var subcatDivs = document.getElementsByClassName("categoryname");
var maxHCat = 0;
for (var cat_h = 0; cat_h < subcatDivs.length; ++cat_h) {
if (maxHCat < subcatDivs[cat_h].clientHeight) {
maxHCat = subcatDivs[cat_h].clientHeight;
}
}
for (var cat_h = 0; cat_h < subcatDivs.length; ++cat_h) {
subcatDivs[cat_h].style.height = maxHCat + "px";
}
}, 100);
}
Задержка в скрипте нужна, чтобы после загрузки страницы было время для расчёта высоты блоков. Сохраняем данный файл в /theme/essential/javascript/.
Костыли хака
Во время использования хака заметил следующее: изменяется размер некоторых полей ввода. Необходимо их поправить. Файл essential.css в папке style. К сожалению, структура файла минимизирована, поэтому нам нужно будет выполнять поиск в файле (не привязываясь к строкам).
Ищем login_password. Добавляем в строку (выделено полужирным): login_password,.block_login input#login_username{width:95%; height:30px}
Ищем coursesearchbox. Добавляем в строку: coursesearchbox label{display:inline}#coursesearchbox{height:30px}
Ищем adminsearchquery. Добавляем в строку: #adminsearchquery{max-width:92%; height:30px}
Замечание: при обновлении темы Вам придётся повторять те же операции с файлами вновь и вновь.
Комментариев нет:
Отправить комментарий