Fix CSS.

2026-07-11 08:50:45 +08:00 · 2017-03-20 12:37:21 -07:00
parent ac8c73c4e9
commit 9e76ca5d27
6 changed files with 119 additions and 71 deletions
@@ -138,15 +138,21 @@

 .listItem {
  border-bottom: 1px solid #e0e0e0;
-  font-size: 16px;
+  font-size: 18px;
  width: 100%;
  max-width: 660px;
  min-width: 400px;
  margin: 0 auto;
-  padding: 16px 14px;
  position: relative;
-  transition: box-shadow 200ms;
+  transition: all 200ms;
+  padding: 10px 0 0;
+  min-height: 220px;

+  .container {
+    display: block;
+    padding: 0 14px;
+    min-height: 180px;
+  }

  &:hover {
     box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
@@ -156,6 +162,14 @@
    border-bottom: none;
  }

+  .context {
+    a {
+      color: #f36451;
+      text-decoration: underline;
+      float: right;
+    }
+  }
+
   .sideActions {
     position: absolute;
     right: 0;
@@ -166,18 +180,30 @@
   }

  .itemHeader {
-    display: inline;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;

    .author {
-      font-size: 24px;
-      min-width: 50px;
-      align-items: left;
-      margin-bottom: 15px;
+      min-width: 230px;
+      display: flex;
+      align-items: center;
    }
  }

  .itemBody {
-    display: block;
+    display: flex;
+    justify-content: space-between;
+  }
+
+  .avatar {
+    margin-right: 16px;
+    height: 40px;
+    width: 40px;
+    border-radius: 50%;
+    background-color: #757575;
+    font-size: 40px;
+    color: #fff;
  }

  .created {
@@ -186,11 +212,18 @@
    margin-left: 40px;
  }

+  .actionButton {
+    transform: scale(.8);
+    margin: 0;
+  }
+
  .body {
-    margin-top: 20px;
+    margin-top: 0px;
    flex: 1;
-    font-size: 0.88em;
    color: black;
+    max-width: 500px;
+    word-wrap: break-word;
+    font-weight: 300;
  }

  .flagged {
@@ -89,7 +89,10 @@ class CommunityContainer extends Component {
          error={community.errorPeople}
          totalPages={community.totalPagesPeople}
          page={community.pagePeople}
-          {...this}
+          onKeyDown={this.onKeyDownHandler}
+          onChange={this.onChangeHandler}
+          onHeaderClickHandler={this.onHeaderClickHandler}
+          onNewPageHandler={this.onNewPageHandler}
        />
      );
    }
@@ -104,7 +107,6 @@ class CommunityContainer extends Component {
          approveUser={props.approveUser}
          suspendUser={props.suspendUser}
          showSuspendUserDialog={props.showSuspendUserDialog}
-          {...this}
        />
        <BanUserDialog
          open={community.banDialog}
@@ -4,7 +4,7 @@ import {Dialog, Button} from 'coral-ui';
 import styles from './SuspendUserDialog.css';

 import I18n from 'coral-framework/modules/i18n/i18n';
-import translations from '../../../translations.json';
+import translations from 'coral-admin/src/translations.json';

 const lang = new I18n(translations);

@@ -16,53 +16,63 @@ const User = props => {
  // Do not display unless the user status is 'pending' or 'banned'.
  // This means that they have already been reviewed and approved.
  return (userStatus === 'PENDING' ||  userStatus === 'BANNED') &&
-    <li tabIndex={props.index} className={`mdl-card mdl-shadow--2dp ${styles.listItem} ${props.isActive && !props.hideActive ? styles.activeItem : ''}`}>
-      <div className={styles.itemHeader}>
-        <span className={styles.author}>{user.username}</span>
-        <ActionButton
-          className={styles.banButton}
-          type='BAN'
-          user={user}
-          showBanUserDialog={props.showBanUserDialog}
-        />
-      </div>
-      <div className={styles.itemBody}>
-        <div className={styles.flaggedByCount}>
-          <i className="material-icons">flag</i><span className={styles.flaggedByLabel}>Flags({ user.actions.length })</span>:
-            { user.action_summaries.map(
-            (action, i ) => {
-              return <span className={styles.flaggedBy} key={i}>
-                {lang.t(`community.${action.reason}`)} ({action.count})
-              </span>;
-            }
-          )}
+    <li tabIndex={props.index} className={`mdl-card ${props.selected ? 'mdl-shadow--8dp' : 'mdl-shadow--2dp'} ${styles.listItem} ${props.isActive && !props.hideActive ? styles.activeItem : ''}`}>
+      <div className={styles.container}>
+        <div className={styles.itemHeader}>
+          <div className={styles.author}>
+            <span>
+              {user.username}
+            </span>
+            <ActionButton
+              className={styles.banButton}
+              type='BAN'
+              user={user}
+              showBanUserDialog={props.showBanUserDialog}
+            />
+          </div>
        </div>
-        <div className={styles.flaggedReasons}>
-          {user.actions.map(
-            (action, i) => {
-              return <span key={i}>
-                {action.reason}
-                {/* action.user.username */}
-              </span>;
-            }
-          )}
-        </div>
-        <div className={styles.sideActions}>
-          <div className={`actions ${styles.actions}`}>
-            {modActionButtons.map(
+
+        <div className={styles.itemBody}>
+          <div className={styles.body}>
+            <div className={styles.flaggedByCount}>
+              <i className="material-icons">flag</i><span className={styles.flaggedByLabel}>Flags({ user.actions.length })</span>:
+                { user.action_summaries.map(
+                (action, i ) => {
+                  return <span className={styles.flaggedBy} key={i}>
+                    {lang.t(`community.${action.reason}`)} ({action.count})
+                  </span>;
+                }
+              )}
+            </div>
+            <div className={styles.flaggedReasons}>
+            {user.actions.map(
              (action, i) => {
-                return <ActionButton
-                  type={action.toUpperCase()}
-                  key={i}
-                  user={user}
-                  approveUser={props.approveUser}
-                  suspendUser={props.suspendUser}
-                  showSuspendUserDialog={props.showSuspendUserDialog}
-                  />;
+                return <span key={i}>
+                  {action.id}
+                  {action.reason}
+                  {action.user  && action.user.username}
+                </span>;
              }
            )}
          </div>
        </div>
+          <div className={styles.sideActions}>
+            <div className={`actions ${styles.actions}`}>
+                {modActionButtons.map(
+                  (action, i) => {
+                    return <ActionButton
+                      type={action.toUpperCase()}
+                      key={i}
+                      user={user}
+                      approveUser={props.approveUser}
+                      suspendUser={props.suspendUser}
+                      showSuspendUserDialog={props.showSuspendUserDialog}
+                      />;
+                  }
+                )}
+            </div>
+          </div>
+        </div>
      </div>
    </li>;
 };
@@ -141,7 +141,6 @@ span {
      position: fixed;
      bottom: 60px;
      left: 25%;
-      margin: 0 auto;
      display: flex;
      justify-content: space-around;
      width: 50%;
@@ -156,16 +155,20 @@ span {

 .listItem {
  border-bottom: 1px solid #e0e0e0;
-  font-size: 16px;
+  font-size: 18px;
  width: 100%;
  max-width: 660px;
  min-width: 400px;
  margin: 0 auto;
-  padding: 16px 14px;
  position: relative;
-  transition: box-shadow 200ms;
-  margin-top: 0;
+  transition: all 200ms;
+  padding: 10px 0 0;
+  min-height: 220px;

+  .container {
+    padding: 0 14px;
+    min-height: 180px;
+  }

  &:hover {
     box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
@@ -233,10 +236,10 @@ span {
  .body {
    margin-top: 0px;
    flex: 1;
-    font-size: 0.88em;
    color: black;
    max-width: 500px;
    word-wrap: break-word;
+    font-weight: 300;
  }

  .flagged {
@@ -21,19 +21,19 @@ const Comment = ({actions = [], ...props}) => {
  const links = linkify.getMatches(props.comment.body);
  const actionSummaries = props.comment.action_summaries;
  return (
-    <li tabIndex={props.index} className={`mdl-card ${props.selected ? 'mdl-shadow--8dp' : 'mdl-shadow--2dp'} ${styles.Comment} ${styles.listItem} ${props.selected ? styles.selected : ''}`}>
+    <li tabIndex={props.index} className={`mdl-card ${props.selected ? 'mdl-shadow--8dp' : 'mdl-shadow--2dp'} ${styles.Comment} ${styles.listItem}`}>
      <div className={styles.container}>
        <div className={styles.itemHeader}>
          <div className={styles.author}>
-          <span>
-            {props.comment.user.name}
-          </span>
-          <span className={styles.created}>
-            {timeago().format(props.comment.created_at || (Date.now() - props.index * 60 * 1000), lang.getLocale().replace('-', '_'))}
-          </span>
-          <BanUserButton user={props.comment.user} onClick={() => props.showBanUserDialog(props.comment.user, props.comment.id, props.comment.status !== 'REJECTED')} />
-          <CommentType type={props.commentType} />
-        </div>
+            <span>
+              {props.comment.user.name}
+            </span>
+            <span className={styles.created}>
+              {timeago().format(props.comment.created_at || (Date.now() - props.index * 60 * 1000), lang.getLocale().replace('-', '_'))}
+            </span>
+            <BanUserButton user={props.comment.user} onClick={() => props.showBanUserDialog(props.comment.user, props.comment.id, props.comment.status !== 'REJECTED')} />
+            <CommentType type={props.commentType} />
+          </div>
          {props.comment.user.status === 'banned' ?
            <span className={styles.banned}>
              <Icon name='error_outline'/>