diff --git a/public/styles/shared.css b/public/styles/shared.css index f368fbd..bfdb79a 100644 --- a/public/styles/shared.css +++ b/public/styles/shared.css @@ -170,7 +170,7 @@ footer { } } -/* New panel */ +/* News panel */ .newsPanel { margin-left: 15px; flex: 1; @@ -179,6 +179,29 @@ footer { justify-content: flex-start; } +@media screen and (max-width: 480px) { + .newsPanel { + align-self: stretch; + width: auto; + } +} + +.table { + flex: 1; + display: flex; + flex-direction: column; + justify-content: flex-start; +} + +.row { + flex: 1; + display: flex; +} + +.col { + flex: 1; +} + /* bits and pieces */ .logoutButton { align-self: stretch; diff --git a/src/components/pages/profile.jsx b/src/components/pages/profile.jsx index 61d14c8..cad3a29 100644 --- a/src/components/pages/profile.jsx +++ b/src/components/pages/profile.jsx @@ -51,13 +51,47 @@ class Profile extends React.Component { if (this.state.username != '') { MainPanel = () => { return ( -
-

Username: {this.state.username}

-

Gold: {this.state.gold}

-

Recruits: {this.state.recruits}

-

Soldiers: {this.state.soldiers}

-

Spies: {this.state.spies}

-

Scientists: {this.state.scientists}

+
+
+

Username:

+

{this.state.username}

+
+
+
+ +
+

Gold:

+

{this.state.gold}

+
+
+
+ +
+

Recruits:

+

{this.state.recruits}

+ +
+ +
+

Soldiers:

+

{this.state.soldiers}

+ + +
+ +
+

Spies:

+

{this.state.spies}

+ + +
+ +
+

Scientists:

+

{this.state.scientists}

+ + +
); }