Review styles changes

AdguardTeam · Jun 16, 2020 · 9323ce3 · 9323ce3
1 parent e0faa04
commit 9323ce3
Show file tree

Hide file tree

Showing 8 changed files with 42 additions and 16 deletions.
diff --git a/client/src/__locales/en.json b/client/src/__locales/en.json
@@ -67,7 +67,8 @@
     "filters": "Filters",
     "filter": "Filter",
     "query_log": "Query Log",
-    "empty_log": "Query log is empty",
+    "compact": "Compact",
+    "nothing_found": "Nothing is found",
     "faq": "FAQ",
     "version": "Version",
     "address": "Address",

diff --git a/client/src/components/Logs/Cells/getClientCell.js b/client/src/components/Logs/Cells/getClientCell.js
@@ -73,11 +73,11 @@ const getClientCell = ({
         <div className="logs__row o-hidden h-100">
             {processedData && getHintElement({
                 className: hintClass,
-                columnClass: 'grid',
-                tooltipClass: 'px-5 pb-5 pt-4',
+                columnClass: 'grid grid--limited',
+                tooltipClass: 'px-5 pb-5 pt-4 mw-75',
                 dataTip: true,
                 xlinkHref: 'question',
-                contentItemClass: 'text-pre text-truncate key-colon',
+                contentItemClass: 'text-truncate key-colon',
                 title: 'client_details',
                 content: processedData,
                 place: 'bottom',

diff --git a/client/src/components/Logs/Cells/getDomainCell.js b/client/src/components/Logs/Cells/getDomainCell.js
@@ -62,14 +62,19 @@ const getDomainCell = (props) => {
         source_label: source && <a href={`//${source}`} className="link--green">{source}</a>,
     };
 
-    const renderGrid = (content) => <div key={nanoid()}
-                                         className='text-pre text-truncate key-colon o-hidden'>{typeof content === 'string' ? t(content) : content}</div>;
+    const renderGrid = (content) => {
+        const preparedContent = typeof content === 'string' ? t(content) : content;
+        const className = classNames('text-truncate key-colon o-hidden', {
+            'word-break--break-all white-space--normal': preparedContent.length > 100,
+        });
+        return <div key={nanoid()} className={className}>{preparedContent}</div>;
+    };
 
     const getGrid = (contentObj, title, className) => [
         <div key={title}
              className={classNames('pb-2 grid--title', className)}>{t(title)}</div>,
         <div key={nanoid()}
-             className="grid">{React.Children.map(Object.entries(contentObj), renderGrid)}</div>,
+             className="grid grid--limited">{React.Children.map(Object.entries(contentObj), renderGrid)}</div>,
     ];
 
     const requestDetails = getGrid(requestDetailsObj, 'request_details');
@@ -78,7 +83,7 @@ const getDomainCell = (props) => {
 
     const trackerHint = getHintElement({
         className: privacyIconClass,
-        tooltipClass: 'pt-4 pb-5 px-5',
+        tooltipClass: 'pt-4 pb-5 px-5 mw-75',
         dataTip: true,
         xlinkHref: 'privacy',
         contentItemClass: 'key-colon',
@@ -101,7 +106,7 @@ const getDomainCell = (props) => {
                 <div className="text-truncate" title={domain}>{domain}</div>
                 {details && isDetailed
                 && <div className="detailed-info d-none d-sm-block text-truncate"
-                     title={details}>{details}</div>}
+                        title={details}>{details}</div>}
             </div>
         </div>
     );

diff --git a/client/src/components/Logs/Logs.css b/client/src/components/Logs/Logs.css
@@ -63,6 +63,11 @@
     white-space: normal;
 }
 
+.logs__text--nowrap {
+    line-height: 1.4;
+    white-space: nowrap;
+}
+
 .logs__text--whois {
     line-height: 1.2;
 }

diff --git a/client/src/components/Logs/Table.js b/client/src/components/Logs/Table.js
@@ -1,6 +1,6 @@
 import React, { useEffect } from 'react';
 import PropTypes from 'prop-types';
-import { useTranslation } from 'react-i18next';
+import { useTranslation, Trans } from 'react-i18next';
 import ReactTable from 'react-table';
 import classNames from 'classnames';
 import endsWith from 'lodash/endsWith';
@@ -27,6 +27,7 @@ import {
 
 } from '../../helpers/helpers';
 
+
 const Table = (props) => {
     const {
         setDetailedDataCurrent,
@@ -147,15 +148,19 @@ const Table = (props) => {
                     {<span>
                         <svg
                             className={`icons icon--small icon--active mr-2 cursor--pointer ${plainSelected}`}
-                            onClick={() => toggleDetailedLogs(false)}>
+                            onClick={() => toggleDetailedLogs(false)}
+                        >
+                            <title><Trans>compact</Trans></title>
                             <use xlinkHref='#list' />
                         </svg>
                     <svg
                         className={`icons icon--small icon--active cursor--pointer ${detailedSelected}`}
-                        onClick={() => toggleDetailedLogs(true)}>
+                        onClick={() => toggleDetailedLogs(true)}
+                    >
+                        <title><Trans>default</Trans></title>
                         <use xlinkHref='#detailed_list' />
                     </svg>
-                    </span>}
+                        </span>}
                 </div>;
             },
             accessor: 'client',
@@ -225,18 +230,20 @@ const Table = (props) => {
             loadingText={t('loading_table_status')}
             rowsText={t('rows_table_footer_text')}
             noDataText={!processingGetLogs
-            && <label className="logs__text logs__text--bold">{t('empty_log')}</label>}
+            && <label className="logs__text logs__text--bold">{t('nothing_found')}</label>}
             pageText=''
             ofText=''
             showPagination={logs.length > 0}
             getPaginationProps={() => ({ className: 'custom-pagination custom-pagination--padding' })}
             getTbodyProps={() => ({ className: 'd-block' })}
             previousText={
                 <svg className="icons icon--small icon--gray w-100 h-100 cursor--pointer">
+                    <title><Trans>previous_btn</Trans></title>
                     <use xlinkHref="#arrow-left" />
                 </svg>}
             nextText={
                 <svg className="icons icon--small icon--gray w-100 h-100 cursor--pointer">
+                    <title><Trans>next_btn</Trans></title>
                     <use xlinkHref="#arrow-right" />
                 </svg>}
             renderTotalPagesCount={() => false}
@@ -314,7 +321,8 @@ const Table = (props) => {
                             known_tracker: hasTracker && 'title',
                             table_name: hasTracker && tracker.name,
                             category_label: hasTracker && tracker.category,
-                            tracker_source: hasTracker && tracker_source && <a href={`//${source}`} className="link--green">{tracker_source}</a>,
+                            tracker_source: hasTracker && tracker_source && <a href={`//${source}`}
+                                                                               className="link--green">{tracker_source}</a>,
                             response_details: 'title',
                             install_settings_dns: upstream,
                             elapsed: formattedElapsedMs,

diff --git a/client/src/components/Logs/Tooltip/ReactTooltip.css b/client/src/components/Logs/Tooltip/ReactTooltip.css
@@ -14,6 +14,10 @@
     white-space: normal !important;
 }
 
+.word-break--break-all {
+    word-break: break-all !important;
+}
+
 .grid {
     display: grid;
     grid-template-columns: repeat(2, min-content);

diff --git a/client/src/components/Logs/index.js b/client/src/components/Logs/index.js
@@ -84,6 +84,9 @@ const Logs = (props) => {
     const mediaQuery = window.matchMedia(`(max-width: ${smallScreenSize}px)`);
     const mediaQueryHandler = (e) => {
         setIsSmallScreen(e.matches);
+        if (e.matches) {
+            toggleDetailedLogs(false);
+        }
     };
 
     useEffect(() => {

diff --git a/client/src/helpers/formatClientCell.js b/client/src/helpers/formatClientCell.js
@@ -34,7 +34,7 @@ export const formatClientCell = (row, t, isDetailed = false) => {
 
         if (name) {
             nameContainer = isDetailed ? <small title={client}>{client}</small>
-                : <div className="logs__text logs__text--wrap"
+                : <div className="logs__text logs__text--nowrap"
                        title={`${name} (${client})`}>
                     {name}
                     <small>{`(${client})`}</small>