Improving appearance of home page and dashboard for mobile devices.

Author: krulis-martin

src/components/Users/UsersName/usersName.less

@@ -5,6 +5,12 @@
   vertical-align: bottom;
 }
 
+@media (max-width: 767px) {
+  .wrapper {
+    white-space: initial;
+  }
+}
+
 .avatar {
   margin-right: 8px;
   vertical-align: text-top;

src/containers/App/recodex.css

@@ -6,6 +6,18 @@
  * these styles tend to cover other ReCodEx-specific situations.
  */
 
+ @media (max-width: 767px) {
+  :root {
+    font-size: 85%;
+  }
+}
+
+@media (max-width: 575px) {
+  :root {
+    font-size: 70%;
+  }
+}
+
 /*
  * Additional text modifications
  */

src/pages/Home/Home.js

@@ -24,6 +24,8 @@ import { isSupervisorRole } from '../../components/helpers/usersRoles.js';
 import { getConfigVar, URL_PATH_PREFIX } from '../../helpers/config.js';
 import { getLocalizedName, getLocalizedDescription } from '../../helpers/localizedData.js';
 
+import * as styles from './Home.less';
+
 const BASIC_HTML = {
   strong: content => <strong>{content}</strong>,
   em: content => <em>{content}</em>,
@@ -37,7 +39,7 @@ const Home = ({ effectiveRole, instance = null, intl: { locale } }) => (
       <hr />
       <Row>
         <Col lg={12} xl={6}>
-          <Image src={`${URL_PATH_PREFIX}/public/logo.png`} className="text-center m-5" />
+          <Image src={`${URL_PATH_PREFIX}/public/logo.png`} className={styles.logo} />
         </Col>
         <Col lg={12} xl={6}>
           <div className="m-5">

src/pages/Home/Home.less

@@ -0,0 +1,16 @@
+img.logo {
+  text-align: center;
+  margin: 3rem;
+}
+
+@media (max-width: 767px) {
+  img.logo {
+    max-width: calc(100vw - 4rem);
+    margin: 1rem;
+  }
+}
+
+@media (max-width: 575px) {
+  max-width: calc(100vw - 2rem);
+  margin: 0;
+}