Fix delegateList grid layout

LiskHQ · Feb 14, 2018 · eb4dc1a · eb4dc1a
1 parent 755387c
commit eb4dc1a
Show file tree

Hide file tree

Showing 3 changed files with 28 additions and 21 deletions.
diff --git a/src/components/delegateList/delegateList.css b/src/components/delegateList/delegateList.css
@@ -18,8 +18,7 @@
   --main-header-font-size-XL: 32px;
   --main-header-font-size-L: 28px;
   --main-header-font-size-XS: 24px;
-  --grid-padding-XL: 32px;
-  --grid-padding-L: 32px;
+  --grid-padding-L: 24px;
   --grid-padding-XS: 19px;
   --list-line-height: 25px;
   --grid-header-line-height: 60px;
@@ -123,16 +122,15 @@
   & ul {
     list-style-type: none;
     line-height: 48px;
-    margin-top: 0;
-    margin-bottom: 0;
+    margin: 0;
     padding-left: var(--grid-padding-L);
     padding-right: var(--grid-padding-L);
   }
 }
 
 .header {
   line-height: var(--header-line-height);
-  padding: 20px var(--grid-padding-XL);
+  padding: 20px var(--grid-padding-L);
 
   & h2 {
     margin-bottom: 0;
@@ -284,15 +282,20 @@
 .delegatesList {
   overflow-y: auto;
 
-  & .tableHead li {
-    color: var(--color-grayscale-dark) !important;
-    font-size: 15px !important;
-    transition: all ease 200ms;
-    font-weight: 500;
+  & .tableHead {
+    flex-wrap: nowrap;
+
+    & li {
+      color: var(--color-grayscale-dark) !important;
+      font-size: 15px !important;
+      transition: all ease 200ms;
+      font-weight: 700;
+    }
   }
 
   & .row {
     background: linear-gradient(90deg, var(--color-white) 0%, #f5f8fc 82%);
+    flex-wrap: nowrap;
 
     &:nth-child(2n) {
       background: var(--color-white);
@@ -310,6 +313,11 @@
   }
 }
 
+.username {
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
 .showChangeSummery {
   & .filters .filter:not(.search) {
     display: none;
@@ -424,7 +432,6 @@
 
     & .tableHead li {
       font-size: 12px !important;
-      font-weight: 700;
     }
   }
 

diff --git a/src/components/delegateList/delegateList.js b/src/components/delegateList/delegateList.js
@@ -157,11 +157,11 @@ class DelegateList extends React.Component {
         <section className={`${styles.delegatesList} delegate-list`}>
           <div className={styles.table}>
             <ul className={`${styles.tableHead} ${grid.row}`}>
-              <li className={`${grid['col-lg-1']} ${grid['col-xs-2']}`}>{this.props.t('Vote', { context: 'verb' })}</li>
-              <li className={`${grid['col-lg-1']} ${grid['col-xs-2']}`}>{this.props.t('Rank')}</li>
-              <li className={`${grid['col-lg-3']} ${grid['col-xs-5']}`}>{this.props.t('Name')}</li>
-              <li className={`${grid['col-lg-5']}}`}>{this.props.t('Lisk ID')}</li>
-              <li className={`${grid['col-lg-2']} ${grid['col-xs-3']}`}>{this.props.t('Productivity')}</li>
+              <li className={`${grid['col-md-1']} ${grid['col-xs-2']}`}>{this.props.t('Vote', { context: 'verb' })}</li>
+              <li className={`${grid['col-md-1']} ${grid['col-xs-2']}`}>{this.props.t('Rank')}</li>
+              <li className={`${grid['col-md-3']} ${grid['col-xs-5']}`}>{this.props.t('Name')}</li>
+              <li className={`${grid['col-md-5']}`}>{this.props.t('Lisk ID')}</li>
+              <li className={`${grid['col-md-2']} ${grid['col-xs-3']}`}>{this.props.t('Productivity')}</li>
             </ul>
             { this.getList(filteredList) }
           </div>

diff --git a/src/components/delegateList/votingRow.js b/src/components/delegateList/votingRow.js
@@ -30,18 +30,18 @@ class VotingRow extends React.Component {
   render() {
     const { data, voteStatus, voteToggled } = this.props;
     return (<ul className={`delegate-row ${styles.row} ${grid.row} ${setRowClass(voteStatus)}`}>
-      <li className={`${grid['col-lg-1']} ${grid['col-xs-2']}`}>
+      <li className={`${grid['col-md-1']} ${grid['col-xs-2']}`}>
         <Checkbox styles={styles}
           toggle={voteToggled}
           value={data.selected}
           status={voteStatus}
           data={data}
         />
       </li>
-      <li className={`${grid['col-lg-1']} ${grid['col-xs-2']}`}>{data.rank}</li>
-      <li className={`${grid['col-lg-3']} ${grid['col-xs-5']}`}>{data.username}</li>
-      <li className={`${grid['col-lg-5']}`}>{data.address}</li>
-      <li className={`${grid['col-lg-2']} ${grid['col-xs-3']}`}>{data.productivity} %</li>
+      <li className={`${grid['col-md-1']} ${grid['col-xs-2']}`}>{data.rank}</li>
+      <li className={`${grid['col-md-3']} ${grid['col-xs-5']} ${styles.username}`}>{data.username}</li>
+      <li className={`${grid['col-md-5']}`}>{data.address}</li>
+      <li className={`${grid['col-md-2']} ${grid['col-xs-3']}`}>{data.productivity} %</li>
     </ul>
     );
   }