mirrors/AdGuardHome
1
0
Fork 0
mirror of https://github.com/AdguardTeam/AdGuardHome.git synced 2024-11-22 04:55:33 +03:00
Code Issues Projects Releases Packages Wiki Activity

Fix tooltip width

Browse source
This commit is contained in:
Ildar Kamalov 2018-10-08 18:55:30 +03:00
parent 6de0871f2c
commit 5718f55b9a
5 changed files with 22 additions and 11 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

14
client/src/components/Dashboard/Counters.js
View file

@ -4,6 +4,8 @@ import PropTypes from 'prop-types';
import Card from '../ui/Card';
import Tooltip from '../ui/Tooltip';
const tooltipType = 'tooltip-custom--narrow';
const Counters = props => (
<Card title="General statistics" subtitle="in the last 24 hours" bodyType="card-table" refresh={props.refreshButton}>
<table className="table card-table">
@ -11,7 +13,7 @@ const Counters = props => (
<tr>
<td>
DNS Queries
<Tooltip text="A number of DNS quieries processed in the last 24 hours" />
<Tooltip text="A number of DNS quieries processed in the last 24 hours" type={tooltipType} />
</td>
<td className="text-right">
<span className="text-muted">
@ -22,7 +24,7 @@ const Counters = props => (
<tr>
<td>
Blocked by filters
<Tooltip text="A number of DNS requests blocked by filters" />
<Tooltip text="A number of DNS requests blocked by filters" type={tooltipType} />
</td>
<td className="text-right">
<span className="text-muted">
@ -33,7 +35,7 @@ const Counters = props => (
<tr>
<td>
Blocked malware/phishing
<Tooltip text="A number of DNS requests blocked" />
<Tooltip text="A number of DNS requests blocked" type={tooltipType} />
</td>
<td className="text-right">
<span className="text-muted">
@ -44,7 +46,7 @@ const Counters = props => (
<tr>
<td>
Blocked adult websites
<Tooltip text="A number of adult websites blocked" />
<Tooltip text="A number of adult websites blocked" type={tooltipType} />
</td>
<td className="text-right">
<span className="text-muted">
@ -55,7 +57,7 @@ const Counters = props => (
<tr>
<td>
Enforced safe search
<Tooltip text="A number of DNS requests to search engines for which Safe Search was enforced" />
<Tooltip text="A number of DNS requests to search engines for which Safe Search was enforced" type={tooltipType} />
</td>
<td className="text-right">
<span className="text-muted">
@ -66,7 +68,7 @@ const Counters = props => (
<tr>
<td>
Average processing time
<Tooltip text="Average time in milliseconds on processing a DNS request" />
<Tooltip text="Average time in milliseconds on processing a DNS request" type={tooltipType} />
</td>
<td className="text-right">
<span className="text-muted">

4
client/src/components/Settings/Settings.css
View file

@ -14,3 +14,7 @@
.form-control--textarea {
min-height: 110px;
}
.form-control--textarea-large {
min-height: 240px;
}

4
client/src/components/ui/Card.css
View file

@ -40,11 +40,11 @@
background-size: 14px;
background-position: center;
background-repeat: no-repeat;
background-image: url('data:image/svg+xml;base64,PHN2ZyBmaWxsPSJub25lIiBoZWlnaHQ9IjI0IiBzdHJva2U9IiM0NjdmY2YiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgc3Ryb2tlLXdpZHRoPSIyIiB2aWV3Qm94PSIwIDAgMjQgMjQiIHdpZHRoPSIyNCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJtMjMgNHY2aC02Ii8+PHBhdGggZD0ibTEgMjB2LTZoNiIvPjxwYXRoIGQ9Im0zLjUxIDlhOSA5IDAgMCAxIDE0Ljg1LTMuMzZsNC42NCA0LjM2bS0yMiA0IDQuNjQgNC4zNmE5IDkgMCAwIDAgMTQuODUtMy4zNiIvPjwvc3ZnPg==');
background-image: url("data:image/svg+xml;base64,PHN2ZyBmaWxsPSJub25lIiBoZWlnaHQ9IjI0IiBzdHJva2U9IiM0NjdmY2YiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgc3Ryb2tlLXdpZHRoPSIyIiB2aWV3Qm94PSIwIDAgMjQgMjQiIHdpZHRoPSIyNCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJtMjMgNHY2aC02Ii8+PHBhdGggZD0ibTEgMjB2LTZoNiIvPjxwYXRoIGQ9Im0zLjUxIDlhOSA5IDAgMCAxIDE0Ljg1LTMuMzZsNC42NCA0LjM2bS0yMiA0IDQuNjQgNC4zNmE5IDkgMCAwIDAgMTQuODUtMy4zNiIvPjwvc3ZnPg==");
}
.card-refresh:hover,
.card-refresh:not(:disabled):not(.disabled):active,
.card-refresh:focus:active {
background-image: url('data:image/svg+xml;base64,PHN2ZyBmaWxsPSJub25lIiBoZWlnaHQ9IjI0IiBzdHJva2U9IiNmZmYiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgc3Ryb2tlLXdpZHRoPSIyIiB2aWV3Qm94PSIwIDAgMjQgMjQiIHdpZHRoPSIyNCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJtMjMgNHY2aC02Ii8+PHBhdGggZD0ibTEgMjB2LTZoNiIvPjxwYXRoIGQ9Im0zLjUxIDlhOSA5IDAgMCAxIDE0Ljg1LTMuMzZsNC42NCA0LjM2bS0yMiA0IDQuNjQgNC4zNmE5IDkgMCAwIDAgMTQuODUtMy4zNiIvPjwvc3ZnPg==');
background-image: url("data:image/svg+xml;base64,PHN2ZyBmaWxsPSJub25lIiBoZWlnaHQ9IjI0IiBzdHJva2U9IiNmZmYiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgc3Ryb2tlLXdpZHRoPSIyIiB2aWV3Qm94PSIwIDAgMjQgMjQiIHdpZHRoPSIyNCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJtMjMgNHY2aC02Ii8+PHBhdGggZD0ibTEgMjB2LTZoNiIvPjxwYXRoIGQ9Im0zLjUxIDlhOSA5IDAgMCAxIDE0Ljg1LTMuMzZsNC42NCA0LjM2bS0yMiA0IDQuNjQgNC4zNmE5IDkgMCAwIDAgMTQuODUtMy4zNiIvPjwvc3ZnPg==");
}

8
client/src/components/ui/Tooltip.css
View file

@ -17,14 +17,14 @@
display: block;
position: absolute;
bottom: calc(100% + 12px);
left: calc(50% - 103px);
width: 206px;
left: 50%;
padding: 10px 15px;
font-size: 0.85rem;
text-align: center;
color: #fff;
background-color: #585965;
border-radius: 3px;
transform: translateX(-50%);
visibility: hidden;
opacity: 0;
}
@ -48,3 +48,7 @@
visibility: visible;
opacity: 1;
}
.tooltip-custom--narrow:before {
width: 206px;
}

3
client/src/components/ui/Tooltip.js
View file

@ -4,11 +4,12 @@ import PropTypes from 'prop-types';
import './Tooltip.css';
const Tooltip = props => (
<div data-tooltip={props.text} className="tooltip-custom"></div>
<div data-tooltip={props.text} className={`tooltip-custom ${props.type}`}></div>
);
Tooltip.propTypes = {
text: PropTypes.string.isRequired,
type: PropTypes.string,
};
export default Tooltip;