refactor StaffCredits

src/client/js/components/StaffCredit/Contributor.js

@@ -1,35 +1,66 @@
 const contributors = [
   {
     sectionName: 'GROWI VILLAGE',
-    additionalClass: 'col-md-12 my-5',
+    sectionAdditionalClass: 'staff-credit-mt-10',
+    memberAdditionalClass: 'col-md-12 my-4',
     members: [
+      { position: 'Founder', name: 'yuki-takei' },
       { position: 'Soncho 1st', name: 'mizozobu' },
       { position: 'Soncho 2nd', name: 'yusuketk' },
-      { name: 'ryu-sato' },
-      { name: 'TatsuyaIse' },
-      { name: 'haruhikonyan' },
-      { name: 'kaishuu0123' },
-      { name: 'kouki-o' },
+    ],
+  },
+  {
+    hideSectionName: true,
+    sectionName: 'GROWI VILLAGE 2',
+    sectionAdditionalClass: 'staff-credit-mb-10',
+    memberAdditionalClass: 'col-md-6 my-4',
+    members: [
       { name: 'utsushiiro' },
-      { name: 'Yuchan4342' },
       { name: 'mayumorita' },
+      { name: 'TatsuyaIse' },
+      { name: 'shinoka7' },
+      { name: 'SeiyaTashiro' },
       { name: 'itizawa' },
       { name: 'TsuyoshiSuzukief' },
-      { name: 'SeiyaTashiro' },
+      { name: 'Yuchan4342' },
+      { name: 'ryu-sato' },
+      { name: 'haruhikonyan' },
+      { name: 'KazuyaNagase' },
+      { name: 'kaishuu0123' },
+      { name: 'kouki-o' },
       { name: 'Angola' },
-      { name: 'okas' },
     ],
   },
   {
-    sectionName: 'ISSUE CONTRIBUTER',
-    additionalClass: 'col-md-12 my-5',
+    sectionName: 'CONTRIBUTER',
+    sectionAdditionalClass: 'staff-credit-mt-10 staff-credit-mb-10',
+    memberAdditionalClass: 'col-md-4',
     members: [
+      { name: 'shield-9' },
       { name: 'yaodingyd' },
+      { name: 'hitochan777' },
+      { name: 'ttaka66' },
+      { name: 'watagashi' },
+      { name: 'nt-7' },
+      { name: 'hideo54' },
+      { name: 'wadahiro' },
+      { name: 'shaminmeerankutty' },
+      { name: 'fumitti' },
+      { name: 'fmy' },
+      { name: 'yaamai' },
+      { name: 'ta2yak' },
+      { name: 'ryo33' },
+      { name: 'rabitarochan' },
+      { name: 'r-tateshina' },
+      { name: 'nekoruri' },
+      { name: 'kmyk' },
+      { name: 'aximov' },
     ],
   },
   {
     sectionName: 'SPECIAL THANKS',
-    additionalClass: 'col-md-12 my-5',
+    sectionAdditionalClass: 'staff-credit-mt-10 staff-credit-mb-10',
+    memberAdditionalClass: 'col-md-4',
     members: [
       { name: 'Crowi Team' },
       { position: 'Ambassador', name: 'Tsuyoshi Suzuki' },

src/client/js/components/StaffCredit/StaffCredit.jsx

@@ -61,32 +61,35 @@ export default class StaffCredit extends React.Component {
   renderContributors() {
     if (this.state.isShown) {
       const credit = contributors.map((contributor) => {
-        const section = <p key={contributor.sectionName} className="dev-team my-5">{contributor.sectionName}</p>;
+        // construct members elements
         const members = contributor.members.map((member) => {
-          const name = <p className="dev-name mb-5" key={member.name}>{member.name}</p>;
-          if (member.position) {
-            return (
-              <React.Fragment key={member.position}>
-                <span className="dev-position">{member.position}</span>
-                {name}
-              </React.Fragment>
-            );
-          }
-          return name;
+          return (
+            <div className={contributor.memberAdditionalClass} key={`${member.name}-container`}>
+              <span className="dev-position" key={`${member.name}-position`}>
+                {/* position or '&nbsp;' */}
+                { member.position || '\u00A0' }
+              </span>
+              <p className="dev-name" key={member.name}>{member.name}</p>
+            </div>
+          );
         });
         return (
-          <React.Fragment key={contributor.sectionName}>
-            <div className={contributor.additionalClass}>
-              {section}
+          <React.Fragment key={`${contributor.sectionName}-fragment`}>
+            <div className={`row ${contributor.sectionAdditionalClass}`} key={`${contributor.sectionName}-row`}>
+              { !contributor.hideSectionName && (
+                <h2 className="col-md-12 dev-team mt-5 staff-credit-mb-10" key={contributor.sectionName}>{contributor.sectionName}</h2>
+              ) }
               {members}
             </div>
+            <div className="clearfix"></div>
           </React.Fragment>
         );
       });
       return (
         <div className="text-center credit-curtain" onClick={this.deleteCredit}>
           <div className="credit-body">
-            <p className="title my-5">Growi Contributor</p>
+            <h1 className="staff-credit-mb-10">Growi Staff Credits</h1>
+            <div className="clearfix"></div>
             {credit}
           </div>
         </div>

src/client/styles/scss/_staff_credit.scss

@@ -2,6 +2,17 @@
 #staff-credit {
   font-family: 'Press Start 2P', $basefont1;
   color: white;
+
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6 {
+    font-family: 'Press Start 2P', $basefont1;
+    color: white;
+  }
+
   $credit-length: -200em;
 
   .credit-curtain {
@@ -33,12 +44,12 @@
     }
   }
 
-  .title {
-    font-size: 2.5em;
+  h1 {
+    font-size: 3em;
   }
 
-  .dev-team {
-    font-size: 1.5em;
+  h2 {
+    font-size: 2.2em;
   }
 
   .dev-position {
@@ -48,4 +59,12 @@
   .dev-name {
     font-size: 1.8em;
   }
+
+  .staff-credit-mt-10 {
+    margin-top: 6rem;
+  }
+
+  .staff-credit-mb-10 {
+    margin-bottom: 6rem;
+  }
 }