diff --git a/app/Helpers/Bbcode.php b/app/Helpers/Bbcode.php index fcd9ef9a9..9ddbaa797 100755 --- a/app/Helpers/Bbcode.php +++ b/app/Helpers/Bbcode.php @@ -183,8 +183,8 @@ class Bbcode 'code' => [ 'openBbcode' => '/^\[code\]/i', 'closeBbcode' => '[/code]', - 'openHtml' => '
',
-            'closeHtml'   => '
', + 'openHtml' => '
',
+            'closeHtml'   => '
', 'block' => true, ], 'pre' => [ diff --git a/resources/js/app.js b/resources/js/app.js index 4b1239e8e..d3076f37b 100644 --- a/resources/js/app.js +++ b/resources/js/app.js @@ -41,6 +41,7 @@ import { Livewire, Alpine } from '../../vendor/livewire/livewire/dist/livewire.e // Custom AlpineJS Components import './components/alpine/chatbox'; import './components/alpine/checkboxGrid'; +import './components/alpine/clipboardButton'; import './components/alpine/dialog'; import './components/alpine/dislikeButton'; import './components/alpine/likeButton'; diff --git a/resources/js/components/alpine/clipboardButton.js b/resources/js/components/alpine/clipboardButton.js new file mode 100644 index 000000000..c0def17b9 --- /dev/null +++ b/resources/js/components/alpine/clipboardButton.js @@ -0,0 +1,12 @@ +document.addEventListener('alpine:init', () => { + Alpine.data('clipboardButton', () => ({ + button: { + ['x-on:click']() { + let text = this.$root + .querySelector('pre > code') + .innerHTML.replace(/
/g, '\r\n'); + navigator.clipboard.writeText(text); + }, + }, + })); +}); diff --git a/resources/sass/base/_reset.scss b/resources/sass/base/_reset.scss index 0d34b2ccf..909b4b6cd 100644 --- a/resources/sass/base/_reset.scss +++ b/resources/sass/base/_reset.scss @@ -25,7 +25,13 @@ a { code, pre { - font-family: 'Roboto Mono', Menlo, Monaco, Consolas, 'Courier New', + font-family: + ui-monospace, + SFMono-Regular, + SF Mono, + Menlo, + Consolas, + Liberation Mono, monospace; font-size: 12px; line-height: 1.46666667; diff --git a/resources/sass/components/_bbcode-rendered.scss b/resources/sass/components/_bbcode-rendered.scss index 48c4552d6..f672f8b9d 100644 --- a/resources/sass/components/_bbcode-rendered.scss +++ b/resources/sass/components/_bbcode-rendered.scss @@ -229,12 +229,12 @@ ol, dl, table, - pre, .bbcode-rendered__center, .bbcode-rendered__left, .bbcode-rendered__right, .bbcode-rendered__alert, - .bbcode-rendered__note { + .bbcode-rendered__note, + .bbcode-rendered__clipboard { margin-top: 12px; margin-bottom: 12px; } @@ -383,17 +383,15 @@ } pre { - background-color: var(--bbcode-rendered-neutral-muted); - color: var(--bbcode-rendered-fg-default); border: revert; - border-radius: 6px; font-size: 12px; word-wrap: normal; - overflow: visible; + overflow: auto; line-height: inherit; word-break: break-word; overflow-wrap: anywhere; white-space: pre-wrap; + margin: 0; padding: 12px; } @@ -402,7 +400,7 @@ margin: 0; word-break: normal; overflow-wrap: anywhere; - white-space: normal; + white-space: break-spaces; font-size: 13px; background-color: var(--bbcode-rendered-neutral-muted); border-radius: 6px; @@ -421,7 +419,9 @@ } pre > code { - white-space: pre-wrap; + word-break: normal; + white-space: pre; + background-color: transparent; } pre code { @@ -429,11 +429,36 @@ padding: 0; overflow: visible; line-height: inherit; + word-wrap: normal; overflow-wrap: anywhere; background-color: transparent; border: 0; } + .bbcode-rendered__clipboard { + display: flex; + justify-content: space-between; + background-color: var(--bbcode-rendered-neutral-muted); + color: var(--bbcode-rendered-fg-default); + border-radius: 6px; + position: relative; + overflow: auto; + } + + .bbcode-rendered__clipboard-button { + display: block; + background: transparent; + border: none; + margin: 6px; + color: var(--bbcode-rendered-fg-muted); + cursor: pointer; + } + + .bbcode-rendered__clipboard-button:hover, + .bbcode-rendered__clipboard-button:focus { + color: var(--bbcode-rendered-fg-default); + } + /* Markdown Extra footnotes */ sup { diff --git a/resources/sass/components/_mediainfo.scss b/resources/sass/components/_mediainfo.scss index 50218e19c..6e0cd4473 100644 --- a/resources/sass/components/_mediainfo.scss +++ b/resources/sass/components/_mediainfo.scss @@ -79,3 +79,15 @@ .mediainfo__encode-settings { flex-basis: 100%; } + +.mediainfo__encode-settings pre, +.torrent-mediainfo-dump pre { + padding: 12px; + background-color: var(--bbcode-rendered-neutral-muted); + color: var(--bbcode-rendered-fg-default); + border-radius: 6px; + font-size: 12px; + white-space: pre-wrap; + word-break: break-word; + overflow-wrap: anywhere; +} diff --git a/resources/views/torrent/partials/mediainfo.blade.php b/resources/views/torrent/partials/mediainfo.blade.php index 76f6bd767..14a189a1d 100644 --- a/resources/views/torrent/partials/mediainfo.blade.php +++ b/resources/views/torrent/partials/mediainfo.blade.php @@ -22,7 +22,7 @@
-
+
{{ $torrent->mediainfo }}
@@ -151,9 +151,7 @@ @isset($videoElement['encoding_settings'])

#{{ $key }}

-
-
{{ $videoElement['encoding_settings'] ?? __('common.unknown') }}
-
+
{{ $videoElement['encoding_settings'] ?? __('common.unknown') }}
@endisset @endforeach