refactored using flex-box

geosolutions-it · Feb 15, 2017 · 7dcf6c4 · 7dcf6c4
1 parent 2a6f9f6
commit 7dcf6c4
Show file tree

Hide file tree

Showing 2 changed files with 33 additions and 16 deletions.
diff --git a/web/client/components/manager/users/UserCard.jsx b/web/client/components/manager/users/UserCard.jsx
@@ -48,27 +48,18 @@ const UserCard = React.createClass({
        </div>);
     },
     renderGroups() {
-        return (<div key="groups" style={this.props.innerItemStyle}><div><strong><Message msgId="users.groupTitle"/></strong></div>
-        <div style={{
-            width: "260px",
-            maxHeight: "100px",
-            overflowY: "auto",
-            overflowX: "visible"
-        }}>{this.props.user && this.props.user.groups ? this.props.user.groups.map((group) => (<div style={{
-            maxWidth: "240px",
-            overflowX: "hidden",
-            textOverflow: "ellipsis"
-          }}key={"group-" + group.id}>{group.groupName}</div>)) : null}</div>
+        return (<div key="groups" className="groups-container" style={this.props.innerItemStyle}><div><strong><Message msgId="users.groupTitle"/></strong></div>
+    <div className="groups-list">{this.props.user && this.props.user.groups ? this.props.user.groups.map((group) => (<div className="group-item" key={"group-" + group.id}>{group.groupName}</div>)) : null}</div>
 
      </div>);
     },
     renderRole() {
-        return (<div key="role" style={this.props.innerItemStyle}><div><strong><Message msgId="users.roleTitle"/></strong></div>
+        return (<div key="role" className="role-containter" style={this.props.innerItemStyle}><div><strong><Message msgId="users.roleTitle"/></strong></div>
             {this.props.user.role}
         </div>);
     },
     renderAvatar() {
-        return (<div key="avatar" style={this.props.innerItemStyle} ><Button bsStyle="primary" type="button" className="square-button">
+        return (<div key="avatar" className="avatar-containter" style={this.props.innerItemStyle} ><Button bsStyle="primary" type="button" className="square-button">
             <Glyphicon glyph="user" />
             </Button></div>);
     },
@@ -77,9 +68,11 @@ const UserCard = React.createClass({
            <GridCard className="user-thumb" style={this.props.style} header={this.props.user.name}
                 actions={this.props.actions}
                >
-            {this.renderAvatar()}
-            {this.renderRole()}
-             {this.renderGroups()}
+            <div className="user-data-container">
+                {this.renderAvatar()}
+                {this.renderRole()}
+                {this.renderGroups()}
+            </div>
              {this.renderStatus()}
            </GridCard>
         );

diff --git a/web/client/components/manager/users/style/usercard.css b/web/client/components/manager/users/style/usercard.css
@@ -12,7 +12,31 @@
 .user-thumb .gridcard-tools,.group-thumb .gridcard-tools {
     right: 0
 }
+.user-data-container {
+    display: flex;
+    width: 100%;
+}
+.user-thumb .role-containter{
+    width: 50px;
+}
+.user-thumb .avatar-containter{
+    width: 50px;
+}
+.user-thumb  .groups-container {
+    white-space: nowrap;
+    overflow: hidden;
+}
+.user-thumb  .groups-container .groups-list{
+    width: 100%;
+    max-height: 100px;
+    overflow-y: auto;
+    overflow-x: hidden;
+}
 
+.user-thumb .groups-container .groups-list .group-item {
+    overflow-x: hidden;
+    text-overflow: ellipsis;
+}
 .group-thumb .group-thumb-description {
     /* ellipsis for description */
     margin: 10px;