From e31c6cfe6e30341c502302d1c0a03138f8bf5c9f Mon Sep 17 00:00:00 2001 From: sebastian-sauer <sauer.sebastian@gmail.com> Date: Fri, 17 Nov 2023 19:35:51 +0100 Subject: [PATCH] Fix Show/hide filetree button on small displays (#27881) the gt-df's display:flex !important did override the display:none on small displays --------- Co-authored-by: wxiaoguang <wxiaoguang@gmail.com> --- templates/repo/diff/box.tmpl | 4 ++-- web_src/css/repo.css | 20 -------------------- 2 files changed, 2 insertions(+), 22 deletions(-) diff --git a/templates/repo/diff/box.tmpl b/templates/repo/diff/box.tmpl index e72ac1eeae..1224bbe84c 100644 --- a/templates/repo/diff/box.tmpl +++ b/templates/repo/diff/box.tmpl @@ -3,7 +3,7 @@ <div class="diff-detail-box diff-box"> <div class="gt-df gt-ac gt-fw"> {{if $showFileTree}} - <button class="diff-toggle-file-tree-button gt-df gt-ac not-mobile" data-show-text="{{ctx.Locale.Tr "repo.diff.show_file_tree"}}" data-hide-text="{{ctx.Locale.Tr "repo.diff.hide_file_tree"}}"> + <button class="diff-toggle-file-tree-button not-mobile btn interact-fg" data-show-text="{{ctx.Locale.Tr "repo.diff.show_file_tree"}}" data-hide-text="{{ctx.Locale.Tr "repo.diff.hide_file_tree"}}"> {{/* the icon meaning is reversed here, "octicon-sidebar-collapse" means show the file tree */}} {{svg "octicon-sidebar-collapse" 20 "icon gt-hidden"}} {{svg "octicon-sidebar-expand" 20 "icon gt-hidden"}} @@ -89,7 +89,7 @@ {{end}} <div id="diff-container"> {{if $showFileTree}} - <div id="diff-file-tree" class="gt-hidden"></div> + <div id="diff-file-tree" class="gt-hidden not-mobile"></div> <script> if (diffTreeVisible) document.getElementById('diff-file-tree').classList.remove('gt-hidden'); </script> diff --git a/web_src/css/repo.css b/web_src/css/repo.css index 6bddbe9ba5..e37788505e 100644 --- a/web_src/css/repo.css +++ b/web_src/css/repo.css @@ -2743,26 +2743,6 @@ tbody.commit-list { overflow-y: auto; } -.diff-toggle-file-tree-button { - background: none; - border: none; - user-select: none; - color: inherit; -} - -.diff-toggle-file-tree-button:hover { - color: var(--color-primary); -} - -@media (max-width: 991.98px) { - #diff-file-tree { - display: none !important; - } - .diff-toggle-file-tree-button { - display: none !important; - } -} - .ui.message.unicode-escape-prompt { margin-bottom: 0; border-radius: 0;