From e9e3bd170a3a896c05a27781da89943cd6d1324c Mon Sep 17 00:00:00 2001 From: Miquel Sabaté Solà Date: Mon, 10 Jun 2024 06:08:31 +0200 Subject: Fix the trix toolbar for smaller screens MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: Miquel Sabaté Solà --- app/assets/stylesheets/comment.css | 56 ++++++++++++++++++++++++++++++++++++++ 1 file changed, 56 insertions(+) (limited to 'app') diff --git a/app/assets/stylesheets/comment.css b/app/assets/stylesheets/comment.css index 4472c62..af2c897 100644 --- a/app/assets/stylesheets/comment.css +++ b/app/assets/stylesheets/comment.css @@ -25,3 +25,59 @@ .comment .comment-header .comment-header-actions { flex-grow: 0; } + +/* + * Tweaks on Trix's toolbar in the comment section: + * - Make it work on smaller screens. + * - Hide the history tools on the desktop. + */ + +trix-toolbar .trix-button-row { + display: grid; + grid-template-columns: repeat(1, 1fr); +} + +trix-toolbar .trix-button-group-spacer { + display: none; +} + +trix-toolbar .trix-button-group:not(:first-child) { + margin-left: 0px; +} + +trix-toolbar .trix-button-group { + border: none; +} + +/* + * Display the history-tools for small screens, where the undo/redo experience + * might actually be bad. + */ +trix-toolbar .trix-button-group--history-tools { + display: flex; +} + +@media (min-width: 600px) { + trix-toolbar .trix-button-row { + grid-template-columns: repeat(4, 1fr); + } + + trix-toolbar .trix-button-group-spacer { + display: none; + } + + trix-toolbar .trix-button-group:not(:first-child) { + margin-left: 0px; + } +} + +@media (min-width: 850px) { + /* I actually don't like the history-tools parts on the desktop. */ + trix-toolbar .trix-button-group--history-tools { + display: none; + } + + trix-toolbar .trix-button-group:not(:first-child) { + margin-left: 10px; + } +} -- cgit v1.2.3