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

Nells

17 фев 2019 г., 19:26

Изменено

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. Проверяйте у себя

Прикрепленные файлы:

182

(5.51 KB)

1550420829bb.zip

Nells

17 фев 2019 г., 19:28

Скрин 1

Прикрепленные файлы:

289

(11.98 KB)

_20190217_182829.jpg

Nells

18 фев 2019 г., 13:12

Добавлено: 17.02.2019 / 19:29
Скрин 2

Добавлено: 18.02.2019 / 13:12
Так же легко сделать и для других версий, просто скопировать див классы с bbcode

Прикрепленные файлы:

269

(11.98 KB)

_20190217_182850.jpg

MAH9IK

18 фев 2019 г., 16:57

Nells, Можно отдельно строки кода для вставки или замены? Хочу в 5.*.* добавить себе

Nells

18 фев 2019 г., 17:10

Изменено

В начале 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 />';
        }