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}
+ + +