Mar 21 2021 at 21:08

Делаем phpMyAdmin удобнее

Invite pending

Приветствую уважаемых пользователей phpMyAdmin!

Все мы прекрасно узнаем стандартный вид окна PMA выборки из таблицы:

Внимательному взгляду будет заметно, что значительную часть строки с данными занимают кнопки с действиями "изменить", "копировать", "удалить". Что в общем-то довольно неудобно и расточительно.

Хотя PMA в стандартной комплектации дает нам совсем немного возможностей для кастомизации, однако, как мы знаем, мы можем вовсе отключить эти кнопки.

А для тех кто не знает - в корне PMA есть файл "config.inc.php", а если его нет, то точно должен быть "config.sample.inc.php", который надо скопировать или переименовать в "config.inc.php". В этом файле надо где-нибудь вставить строчку

$cfg['RowActionLinks'] = false;

Теперь выглядит вроде лучше:

Но. Все-таки эти кнопочки бывают нужны, особенно галочка и кнопочка "удалить". И тут опять мы можем воспользоваться родными настройками PMA и вместо "RowActionsLinks" поменять другой параметр в "config.inc.php" (точнее добавить строку, потому что в стандартном "config.inc.php" такой параметр отсутствует:

$cfg['RowActionType'] = 'icons';

Теперь есть кнопочки-иконки без текста^

Места они стали занимать меньше, но все равно как-то много для таких небольших иконок. К тому же вместо того чтобы жаться к левому краю при любом размере окна браузера, они норовят расползаться вслед за шириной таблицы. Это не очень правильно.

И вот после многих лет бездумного взирания на это безобразие, я решил его поправить. И поделиться тут как это сделать. Придется совсем немного покопаться в коде PMA, но совсем чуть-чуть. Сразу предупреждаю, что все исправления тестировались только на PMA версии 5.1.0.

Так как указанные кнопочки по умолчанию не имеют никакого специфического css-класса, нам надо его добавить. Кнопочки эти создаются в файле "\templates\display\results\checkbox_and_links.twig". Просто добавляем наш класс (в данном случае "n_chl_width", назовите как угодно) каждому тэгу "" в этом файле - не ошибетесь. Например строку

<td class="text-center print_ignore edit_row_anchor{{ not edit.clause_is_unique ? ' nonunique' }}">

меняем на

<td class="text-center print_ignore n_chl_width edit_row_anchor{{ not edit.clause_is_unique ? ' nonunique' }}">

Класс мы добавили. Теперь его надо прописать где-нибудь в css-файле. Практически все стили PMA (ну кроме библиотечных) хранятся в файле "\themes\pmahomme\css\theme.css" (вместо "pmahomme" может быть название другой темы, видимо, если используется нестандартная). Но этот файл в версии 5.1 является скомпилированным из очень большого количества всяких scss, причем как PMA, так и сторонних. Разбираться из чего он там собран и собирать его заново, править какой-либо из стандартных scss или сам уже собранный "theme.css" мне показалось неправильным и излишним. Правильнее было бы сделать свой стилевой файл. Я назвал его немудрённо "custom.css" и положил в корень PMA. Осталось его подключить и ключи у нас в кармане. Сделаем это в файле "\templates\header.twig", где подключаются все остальные стилевые файлы. Просто вставляем строчку после подключения "printview.css":

<link rel="stylesheet" type="text/css" href="{{ base_dir }}custom.css?{{ version }}">

Теперь мы можем настраивать довольно много всего, несмотря на то что PMA не любит добавлять специфические классы к различным элементам. Например, добавив в "custom.css" такой код:

 .n_chl_width {
  width            : 18px;
  padding-left     : 0 !important;
  padding-right    : 0 !important;
}

мы делаем наши кнопочки маленькими и со статическим размером в 18px:

Но для лучшего визуального выделения таблицы с данными на довольно плохо читаемом экране PMA я решил добавить вот такой код:

 .n_chl_width {
  width            : 18px;
  padding-left     : 0 !important;
  padding-right    : 0 !important;
  background-color : #CCCCCC;
}
.table_results > tbody > tr > td:nth-child(5) {
  border-left      : 2px solid black;
}
.table_results > tbody > tr > td:last-child {
  border-right     : 2px solid black;
}
.table_results > tbody > tr:first-child > td:nth-child(n+5) {
  border-top       : 2px solid black;
}
.table_results > tbody > tr:last-child > td:nth-child(n+5) {
  border-bottom    : 2px solid black;
}
.table_results > tbody > tr > td:nth-child(n+5):not(:last-child) {
  border-right     : 2px solid silver;
}

И теперь наша табличка читается вполне приемлемо:

При желании в "custom.css" теперь можно менять довольно много во внешнем виде PMA. А при необходимости всегда можно добавить специфические классы к нужным элементам в каком-нибудь twig в папке "template".

Надеюсь, кому-нибудь будет полезна такая небольшая доделка PMA.

Всем хорошего настроения.

Nikitos I

Hubs:

MySQL