Скользящая панель BB кодов

966
.
Nells
For JohnCms 6.2.2

Всем привет, вот короче решил сделать такую фичу, бб панель как в мобильном клиенте 4PDA.
Графику не менял. Только реализация.

Установка:
Скачать архив и распаковать в корень сайта с заменой
Скопировать код ниже и вставить в style.css своей темы или тем
nav-scroller { position: relative; z-index: 2; height: 2.75rem; overflow-y: hidden; } .nav-scroller .nav { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: nowrap; flex-wrap: nowrap; padding-bottom: 1rem; margin-top: -1px; overflow-x: auto; color: rgba(255, 255, 255, .75); text-align: center; white-space: nowrap; -webkit-overflow-scrolling: touch; }
.nav-underline .nav-link { padding-top: .75rem; padding-bottom: .75rem; font-size: .875rem; color: var(--secondary); } .nav-underline .nav-link:hover { color: var(--blue); } .nav-underline .active { font-weight: 500; color: var(--gray-dark); }


PS. У меня стоял фрейм bootstrap. Проверяйте у себя
Прикрепленные файлы:
.
Скрин 1
Прикрепленные файлы:
.
Добавлено: 17.02.2019 / 19:29
Скрин 2

Добавлено: 18.02.2019 / 13:12
Так же легко сделать и для других версий, просто скопировать див классы с bbcode
Прикрепленные файлы:
.
Nells, Можно отдельно строки кода для вставки или замены? Хочу в 5.*.* добавить себе
.
Nells
В начале nav и div классы, в конце закрытие этих классов и перенос строки.
В каждую ссылку добавить клас "nav-link"
<div class="nav-scroller bg-white box-shadow"> <nav class="nav nav-underline">
            <a class="nav-link" href="javascript:tag(\'\', \'\')"><img style="border: 0;" src="' . self::$system_set['homeurl'] . '/images/bb/bold.gif" alt="b" title="' . self::$lng['tag_bold'] . '" /></a>
            <a class="nav-link" href="javascript:tag(\'\', \'\')"><img style="border: 0;" src="' . self::$system_set['homeurl'] . '/images/bb/italics.gif" alt="i" title="' . self::$lng['tag_italic'] . '" /></a>
            <a class="nav-link" href="javascript:tag(\'\', \'\')"><img style="border: 0;" src="' . self::$system_set['homeurl'] . '/images/bb/underline.gif" alt="u" title="' . self::$lng['tag_underline'] . '" /></a>
            <a class="nav-link" href="javascript:tag(\'\', \'\')"><img style="border: 0;" src="' . self::$system_set['homeurl'] . '/images/bb/strike.gif" alt="s" title="' . self::$lng['tag_strike'] . '" /></a>
            <a class="nav-link" href="javascript:tag(\'\', \'\')"><img style="border: 0;" src="' . self::$system_set['homeurl'] . '/images/bb/list.gif" alt="s" title="' . self::$lng['tag_list'] . '" /></a>
            <a class="nav-link" href="javascript:tag(\'[spoiler=]\', \'[/spoiler]\');"><img style="border: 0;" src="' . self::$system_set['homeurl'] . '/images/bb/sp.gif" alt="spoiler" title="Спойлер" /></a>
            <a class="nav-link" href="javascript:tag(\'
\', \'
\')"><img style="border: 0;" src="' . self::$system_set['homeurl'] . '/images/bb/quote.gif" alt="quote" title="' . self::$lng['tag_quote'] . '" /></a> <a class="nav-link" href="javascript:tag(\'[url=]\', \'[/url]\')"><img style="border: 0;" src="' . self::$system_set['homeurl'] . '/images/bb/link.gif" alt="url" title="' . self::$lng['tag_link'] . '" /></a> <a class="nav-link" href="javascript:show_hide(\'code\');"><img style="border: 0;" src="' . self::$system_set['homeurl'] . '/images/bb/php.gif" title="Code" alt="Code" /></a> <a class="nav-link" href="javascript:show_hide(\'color\');"><img style="border: 0;" src="' . self::$system_set['homeurl'] . '/images/bb/color.gif" title="' . self::$lng['color_text'] . '" alt="color" /></a> <a class="nav-link" href="javascript:show_hide(\'bg\');"><img style="border: 0;" src="' . self::$system_set['homeurl'] . '/images/bb/color_bg.gif" title="' . self::$lng['color_bg'] . '" alt="bg color" /></a>'; if (self::$user_id) { $out .= ' <a class="nav-link" href="javascript:show_hide(\'sm\');"><img style="border: 0;" src="' . self::$system_set['homeurl'] . '/images/bb/smileys.gif" alt="sm" title="' . self::$lng['smileys'] . '" /></a><br /> <div id="sm" style="display:none">' . $bb_smileys . '</div></nav></div>'; } else { $out .= '</nav></div><br />'; }
.
Nells, Спасибо
.
¯\_(ツ)_/¯
Хороший мод
.
# PaRtiZzaN (18.02.2019 / 20:58)
Хороший мод
Спасибо)
Я его ещё давно делал, потом удалил все нароботки, а сейчас заново делаю, то и выложил чтобы не потерять)
.
Nells, есть линк на живой пример?
.
# ДоХтор (18.02.2019 / 22:05)
Nells, есть линк на живой пример?
https://for-people.pp.ua
Всего: 24