Pull request: 4815 fix table view of the query log modal

Updates AdguardTeam#4815 Squashed commit of the following: commit a547c54 Merge: 3c1e745 f5602d9 Author: Ildar Kamalov <ik@adguard.com> Date: Mon Oct 10 17:40:38 2022 +0300 Merge branch 'master' into 4815-tablet-view-fix commit 3c1e745 Author: Ildar Kamalov <ik@adguard.com> Date: Mon Oct 10 16:50:10 2022 +0300 fix mobile view commit a1d0b36 Author: Ildar Kamalov <ik@adguard.com> Date: Sun Oct 9 17:57:14 2022 +0300 client: fix styles commit f34f928 Author: Ildar Kamalov <ik@adguard.com> Date: Sun Oct 9 16:59:23 2022 +0300 client: fix table view of query log modal
ssrahul96 · Oct 10, 2022 · 0eba31c · 0eba31c
1 parent f5602d9
commit 0eba31c
Show file tree

Hide file tree

Showing 5 changed files with 41 additions and 17 deletions.
diff --git a/client/src/components/Logs/Cells/ClientCell.js b/client/src/components/Logs/Cells/ClientCell.js
@@ -121,7 +121,7 @@ const ClientCell = ({
                     {options.map(({ name, onClick, disabled }) => (
                         <button
                             key={name}
-                            className="button-action--arrow-option px-4 py-2"
+                            className="button-action--arrow-option px-4 py-1"
                             onClick={onClick}
                             disabled={disabled}
                         >

diff --git a/client/src/components/Logs/Cells/IconTooltip.css b/client/src/components/Logs/Cells/IconTooltip.css
@@ -50,9 +50,30 @@
 }
 
 @media (max-width: 1024px) {
-    .grid .key-colon, .grid .title--border {
+    .grid .title--border {
+        margin-bottom: 4px;
         font-weight: 600;
     }
+
+    .grid .key-colon {
+        margin-right: 4px;
+        color: var(--gray-8);
+    }
+
+    .grid__row {
+        display: flex;
+        align-items: flex-start;
+        flex-wrap: wrap;
+        margin-bottom: 2px;
+        font-size: 14px;
+        word-break: break-all;
+        overflow: hidden;
+    }
+
+    .grid__row .filteringRules__filter,
+    .grid__row .filteringRules {
+        margin-bottom: 0;
+    }
 }
 
 @media (max-width: 767.98px) {
@@ -100,7 +121,7 @@
 }
 
 .title--border {
-    padding-top: 2rem;
+    padding-top: 1rem;
 }
 
 .title--border:before {
@@ -109,7 +130,7 @@
     left: 0;
     border-top: 0.5px solid var(--gray-d8) !important;
     width: 100%;
-    margin-top: -1rem;
+    margin-top: -0.5rem;
 }
 
 .icon-cross {

diff --git a/client/src/components/Logs/Cells/index.js b/client/src/components/Logs/Cells/index.js
@@ -146,7 +146,7 @@ const Row = memo(({
                     type="button"
                     className={
                         classNames(
-                            'button-action--arrow-option',
+                            'button-action--arrow-option mb-1',
                             { 'bg--danger': !isBlocked },
                             { 'bg--green': isFiltered },
                         )}
@@ -158,13 +158,13 @@ const Row = memo(({
         );
 
         const blockForClientButton = <button
-                className='text-center font-weight-bold py-2 button-action--arrow-option'
+                className='text-center font-weight-bold py-1 button-action--arrow-option'
                 onClick={onBlockingForClientClick}>
             {t(blockingForClientKey)}
         </button>;
 
         const blockClientButton = <button
-                className='text-center font-weight-bold py-2 button-action--arrow-option'
+                className='text-center font-weight-bold py-1 button-action--arrow-option'
                 onClick={onBlockingClientClick}
                 disabled={processingSet || lastRuleInAllowlist}>
             {t(blockingClientKey)}

diff --git a/client/src/components/Logs/Logs.css b/client/src/components/Logs/Logs.css
@@ -312,8 +312,8 @@
     border: 0;
     display: block;
     width: 100%;
-    padding-top: 0.5rem;
-    padding-bottom: 0.5rem;
+    padding-top: 0.2rem;
+    padding-bottom: 0.2rem;
     text-align: center;
     font-weight: 700;
     color: inherit;

diff --git a/client/src/components/Logs/index.js b/client/src/components/Logs/index.js
@@ -47,17 +47,20 @@ const processContent = (data) => Object.entries(data)
             keyClass = '';
         }
 
-        return isHidden ? null : <div key={key}>
-            <div
+        return isHidden ? null : (
+            <div className="grid__row" key={key}>
+                <div
                     className={classNames(`key__${key}`, keyClass, {
                         'font-weight-bold': isBoolean && value === true,
-                    })}>
-                <Trans>{isButton ? value : key}</Trans>
-            </div>
-            <div className={`value__${key} text-pre text-truncate`}>
-                <Trans>{(isTitle || isButton || isBoolean) ? '' : value || '—'}</Trans>
+                    })}
+                >
+                    <Trans>{isButton ? value : key}</Trans>
+                </div>
+                <div className={`value__${key} text-pre text-truncate`}>
+                    <Trans>{(isTitle || isButton || isBoolean) ? '' : value || '—'}</Trans>
+                </div>
             </div>
-        </div>;
+        );
     });
 
 const Logs = () => {