From b9aa969a56c94a9b121254729c781045d006e858 Mon Sep 17 00:00:00 2001
From: Ildar Kamalov <ik@adguard.com>
Date: Sat, 1 Aug 2020 17:12:29 +0300
Subject: [PATCH 1/2] - client: fix guide tab styles
---
client/src/components/SetupGuide/Guide.css | 14 ++++++++++++++
client/src/components/SetupGuide/index.js | 4 ++--
client/src/components/ui/Tabs.css | 17 ++++++++++++++++-
3 files changed, 32 insertions(+), 3 deletions(-)
diff --git a/client/src/components/SetupGuide/Guide.css b/client/src/components/SetupGuide/Guide.css
index 821f1798..86d3070b 100644
--- a/client/src/components/SetupGuide/Guide.css
+++ b/client/src/components/SetupGuide/Guide.css
@@ -13,3 +13,17 @@
margin-bottom: 20px;
font-size: 15px;
}
+
+.guide__address {
+ display: block;
+ margin-bottom: 7px;
+ font-size: 13px;
+ font-weight: 700;
+}
+
+@media screen and (min-width: 768px) {
+ .guide__address {
+ display: list-item;
+ font-size: 15px;
+ }
+}
diff --git a/client/src/components/SetupGuide/index.js b/client/src/components/SetupGuide/index.js
index c6d9c47d..4de6dd2c 100644
--- a/client/src/components/SetupGuide/index.js
+++ b/client/src/components/SetupGuide/index.js
@@ -24,8 +24,8 @@ const SetupGuide = ({
<div className="mt-1">
<Trans>install_devices_address</Trans>:
</div>
- <div className="mt-2 font-weight-bold">
- {dnsAddresses.map((ip) => <li key={ip}>{ip}</li>)}
+ <div className="mt-3">
+ {dnsAddresses.map((ip) => <li key={ip} className="guide__address">{ip}</li>)}
</div>
</div>
<Guide dnsAddresses={dnsAddresses} />
diff --git a/client/src/components/ui/Tabs.css b/client/src/components/ui/Tabs.css
index 871f399a..837cf3d8 100644
--- a/client/src/components/ui/Tabs.css
+++ b/client/src/components/ui/Tabs.css
@@ -2,8 +2,16 @@
display: flex;
justify-content: space-between;
margin-bottom: 15px;
- padding: 15px 0;
+ padding: 10px 0;
border-bottom: 1px solid #e8e8e8;
+ overflow: auto;
+}
+
+@media screen and (min-width: 768px) {
+ .tabs__controls {
+ padding: 15px 0;
+ overflow: initial;
+ }
}
.tabs__controls--form {
@@ -26,11 +34,18 @@
align-items: center;
min-width: 70px;
font-size: 13px;
+ white-space: nowrap;
color: #555555;
cursor: pointer;
opacity: 0.6;
}
+@media screen and (min-width: 768px) {
+ .tab__control {
+ white-space: normal;
+ }
+}
+
.tab__control:hover,
.tab__control:focus {
opacity: 1;
From 9fecab8675b3496cb6fa5f03084e0be7c364a263 Mon Sep 17 00:00:00 2001
From: Ildar Kamalov <ik@adguard.com>
Date: Sat, 1 Aug 2020 17:13:48 +0300
Subject: [PATCH 2/2] - client: fix log filters styles
---
client/src/components/Logs/Filters/index.js | 2 +-
client/src/components/Logs/Logs.css | 13 +++++++++++++
client/src/components/Settings/Dns/Cache/Form.js | 2 +-
client/src/components/ui/PageTitle.css | 12 +++++++++---
client/src/helpers/constants.js | 5 -----
5 files changed, 24 insertions(+), 10 deletions(-)
diff --git a/client/src/components/Logs/Filters/index.js b/client/src/components/Logs/Filters/index.js
index d89771b2..89901001 100644
--- a/client/src/components/Logs/Filters/index.js
+++ b/client/src/components/Logs/Filters/index.js
@@ -9,7 +9,7 @@ const Filters = ({ filter, refreshLogs, setIsLoading }) => (
<Trans>query_log</Trans>
<button
type="button"
- className="btn btn-icon--green ml-3 bg-transparent"
+ className="btn btn-icon--green logs__refresh"
onClick={refreshLogs}
>
<svg className="icons icon--24">
diff --git a/client/src/components/Logs/Logs.css b/client/src/components/Logs/Logs.css
index 6623f626..13d4cb88 100644
--- a/client/src/components/Logs/Logs.css
+++ b/client/src/components/Logs/Logs.css
@@ -539,3 +539,16 @@
.loading__text {
transform: translateY(3rem);
}
+
+.logs__refresh {
+ position: relative;
+ top: 3px;
+ display: inline-flex;
+ align-items: center;
+ justify-content: center;
+ width: 40px;
+ height: 40px;
+ padding: 0;
+ margin-left: 15px;
+ background-color: transparent;
+}
diff --git a/client/src/components/Settings/Dns/Cache/Form.js b/client/src/components/Settings/Dns/Cache/Form.js
index 64efc9e3..c7b2d6ed 100644
--- a/client/src/components/Settings/Dns/Cache/Form.js
+++ b/client/src/components/Settings/Dns/Cache/Form.js
@@ -53,7 +53,7 @@ const Form = ({
{INPUTS_FIELDS.map(({
name, title, description, placeholder, validate, max,
}) => <div className="col-12" key={name}>
- <div className="col-7 p-0">
+ <div className="col-12 col-md-7 p-0">
<div className="form__group form__group--settings">
<label htmlFor={name}
className="form__label form__label--with-desc">{t(title)}</label>
diff --git a/client/src/components/ui/PageTitle.css b/client/src/components/ui/PageTitle.css
index c9d1095b..8e0e2d32 100644
--- a/client/src/components/ui/PageTitle.css
+++ b/client/src/components/ui/PageTitle.css
@@ -6,18 +6,24 @@
.page-header--logs {
flex-direction: row;
align-items: flex-end;
- margin: 2rem 0 3rem;
+ margin: 2rem 0 2.8rem;
+}
+
+.page-header--logs .page-title {
+ display: inline-flex;
+ align-items: center;
}
@media (max-width: 991px) {
.page-header--logs {
flex-direction: column;
align-items: center;
- margin-bottom: 1.5rem;
+ margin: 1.1rem 0;
}
.page-header--logs .page-title {
- padding-bottom: 2.5rem;;
+ margin-bottom: 1.1rem;
+ font-size: 1.8rem;
}
}
diff --git a/client/src/helpers/constants.js b/client/src/helpers/constants.js
index 2856b156..8153be6d 100644
--- a/client/src/helpers/constants.js
+++ b/client/src/helpers/constants.js
@@ -337,11 +337,6 @@ export const RESPONSE_FILTER = {
query: 'processed',
label: 'show_processed_responses',
},
- SPACE: {
- query: 'all',
- label: '',
- disabled: true,
- },
BLOCKED: {
query: 'blocked',
label: 'show_blocked_responses',