Move translations script to scripts folder

client/src/components/Dashboard/Statistics.js

@@ -25,7 +25,7 @@ class Statistics extends Component {
         return (
             <div className="row">
                 <div className="col-sm-6 col-lg-3">
-                    <Card bodyType="card-wrap">
+                    <Card type="card--full" bodyType="card-wrap">
                         <div className="card-body-stats">
                             <div className="card-value card-value-stats text-blue">
                                 {dnsQueries}
@@ -40,7 +40,7 @@ class Statistics extends Component {
                     </Card>
                 </div>
                 <div className="col-sm-6 col-lg-3">
-                    <Card bodyType="card-wrap">
+                    <Card type="card--full" bodyType="card-wrap">
                         <div className="card-body-stats">
                             <div className="card-value card-value-stats text-red">
                                 {blockedFiltering}
@@ -49,7 +49,7 @@ class Statistics extends Component {
                                 {getPercent(dnsQueries, blockedFiltering)}
                             </div>
                             <div className="card-title-stats">
-                                <Trans>blocked_by</Trans> <a href="#filters"><Trans>filters</Trans></a>
+                                <Trans>blocked_by</Trans><a href="#filters"> <Trans>filters</Trans></a>
                             </div>
                         </div>
                         <div className="card-chart-bg">
@@ -58,7 +58,7 @@ class Statistics extends Component {
                     </Card>
                 </div>
                 <div className="col-sm-6 col-lg-3">
-                    <Card bodyType="card-wrap">
+                    <Card type="card--full" bodyType="card-wrap">
                         <div className="card-body-stats">
                             <div className="card-value card-value-stats text-green">
                                 {replacedSafebrowsing}
@@ -76,7 +76,7 @@ class Statistics extends Component {
                     </Card>
                 </div>
                 <div className="col-sm-6 col-lg-3">
-                    <Card bodyType="card-wrap">
+                    <Card type="card--full" bodyType="card-wrap">
                         <div className="card-body-stats">
                             <div className="card-value card-value-stats text-yellow">
                                 {replacedParental}

client/src/components/Header/Header.css

@@ -88,6 +88,8 @@
     .nav-tabs .nav-link {
         width: auto;
         border-bottom: 1px solid transparent;
+        font-size: 13px;
+        white-space: nowrap;
     }
 
     .mobile-menu {
@@ -107,6 +109,15 @@
 
     .nav-version {
         padding: 0;
+    }
+}
+
+@media screen and (min-width: 1280px) {
+    .nav-tabs .nav-link {
+        font-size: 14px;
+    }
+
+    .nav-version {
         font-size: 0.85rem;
     }
 }

client/src/components/Header/Menu.js

@@ -17,14 +17,14 @@ class Menu extends Component {
 
     render() {
         const menuClass = classnames({
-            'col-lg mobile-menu': true,
+            'col-lg-6 mobile-menu': true,
             'mobile-menu--active': this.props.isMenuOpen,
         });
 
         return (
             <Fragment>
                 <div className={menuClass}>
-                    <ul className="nav nav-tabs border-0 flex-column flex-lg-row">
+                    <ul className="nav nav-tabs border-0 flex-column flex-lg-row flex-nowrap">
                         <li className="nav-item border-bottom d-lg-none" onClick={this.toggleMenu}>
                             <div className="nav-link nav-link--back">
                                 <svg className="nav-icon" fill="none" height="24" strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><path d="m19 12h-14"/><path d="m12 19-7-7 7-7"/></svg>

client/src/components/ui/Card.css

@@ -49,15 +49,14 @@
 }
 
 .card-title-stats {
+    font-size: 13px;
     color: #9aa0ac;
-    white-space: nowrap;
-    text-overflow: ellipsis;
-    overflow: hidden;
 }
 
 .card-body-stats {
     position: relative;
     flex: 1 1 auto;
+    height: calc(100% - 3rem);
     margin: 0;
     padding: 1rem 1.5rem;
 }
@@ -84,3 +83,17 @@
 .card-value-percent:after {
     content: "%";
 }
+
+.card--full {
+    height: calc(100% - 1.5rem);
+}
+
+.card-wrap {
+    height: 100%;
+}
+
+@media screen and (min-width: 1280px) {
+    .card-title-stats {
+        font-size: 14px;
+    }
+}

client/src/components/ui/Card.js

@@ -4,8 +4,8 @@ import PropTypes from 'prop-types';
 import './Card.css';
 
 const Card = props => (
-    <div className="card">
-        { props.title &&
+    <div className={props.type ? `card ${props.type}` : 'card'}>
+        {props.title &&
         <div className="card-header with-border">
             <div className="card-inner">
                 <div className="card-title">
@@ -33,6 +33,7 @@ Card.propTypes = {
     title: PropTypes.string,
     subtitle: PropTypes.string,
     bodyType: PropTypes.string,
+    type: PropTypes.string,
     refresh: PropTypes.node,
     children: PropTypes.node.isRequired,
 };