(incubator-answer) branch test updated: fix: Optimize the mobile style of QueryGroup component

[shuai]

This is an automated email from the ASF dual-hosted git repository.

shuai pushed a commit to branch test
in repository https://gitbox.apache.org/repos/asf/incubator-answer.git


The following commit(s) were added to refs/heads/test by this push:
     new a26aae63 fix: Optimize the mobile style of QueryGroup component
a26aae63 is described below

commit a26aae634854a28775b673d9140b06a83fd088a1
Author: shuai <lishuail...@sifou.com>
AuthorDate: Mon Nov 25 10:31:38 2024 +0800

    fix: Optimize the mobile style of QueryGroup component
---
 ui/src/components/QueryGroup/index.scss | 16 ++++++++++++++++
 ui/src/components/QueryGroup/index.tsx  | 10 +++++-----
 2 files changed, 21 insertions(+), 5 deletions(-)

diff --git a/ui/src/components/QueryGroup/index.scss 
b/ui/src/components/QueryGroup/index.scss
new file mode 100644
index 00000000..9ab5b36d
--- /dev/null
+++ b/ui/src/components/QueryGroup/index.scss
@@ -0,0 +1,16 @@
+.md-show {
+  display: flex !important;
+}
+.md-hide {
+  display: none;
+}
+
+
+@media screen and (max-width: 768px) {
+  .md-show {
+    display: none !important;
+  }
+  .md-hide {
+    display: block;
+  }
+}
diff --git a/ui/src/components/QueryGroup/index.tsx 
b/ui/src/components/QueryGroup/index.tsx
index 7f6a0f3e..52fca616 100644
--- a/ui/src/components/QueryGroup/index.tsx
+++ b/ui/src/components/QueryGroup/index.tsx
@@ -27,6 +27,8 @@ import classNames from 'classnames';
 import { REACT_BASE_PATH } from '@/router/alias';
 import { floppyNavigation } from '@/utils';
 
+import './index.scss';
+
 interface Props {
   data;
   i18nKeyPrefix: string;
@@ -80,9 +82,7 @@ const Index: FC<Props> = ({
 
   return (
     <>
-      <ButtonGroup
-        size="sm"
-        className={classNames('d-none d-sm-block', wrapClassName)}>
+      <ButtonGroup size="sm" className={classNames('md-show', wrapClassName)}>
         {normalBtnData.map((btn) => {
           const key = typeof btn === 'string' ? btn : btn.sort;
           const name = typeof btn === 'string' ? btn : btn.name;
@@ -132,8 +132,8 @@ const Index: FC<Props> = ({
       </ButtonGroup>
       <DropdownButton
         size="sm"
-        variant="secondary"
-        className="d-block d-sm-none"
+        variant="outline-secondary"
+        className="md-hide"
         title={t(currentSort)}>
         {data.map((btn) => {
           const key = typeof btn === 'string' ? btn : btn.sort;