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>

diff --git a/templates/repo/diff/box.tmpl b/templates/repo/diff/box.tmpl
index e72ac1eeaefee664c6da21d51df408aeb788cc05..1224bbe84c416aa90bd5f5dd3526a64ce3b459f3 100644 (file)
--- 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 6bddbe9ba560779b48cee8ecd802664861b49c4c..e37788505e673163473a5cb1e8bec017308a828b 100644 (file)
--- 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;