Merge pull request #13 from straysh/dev-local

 fixed #12 commit an aleph v0.2 UI

package.json

@@ -14,6 +14,7 @@
   ],
   "dependencies": {
     "@babel/polyfill": "^7.0.0-beta.51",
+    "babel-plugin-module-resolver": "^3.1.1",
     "bluebird": "^3.5.1",
     "body-parser": "^1.18.3",
     "classnames": "^2.2.6",

src/components/Button/index.js

@@ -9,19 +9,24 @@ class Buttons extends React.Component {
   render() {
     return (
       <div>
-        <ButtonToolbar>
-          <Button bsStyle="primary">国家</Button>
-        </ButtonToolbar>
+        <div>
+          <ButtonToolbar>
+            <Button bsStyle="primary">国家</Button>
+          </ButtonToolbar>
+        </div>
         <p />
-        <ButtonToolbar>
-          <Button bsStyle="primary">所有</Button>
-          <Button>亚洲</Button>
-          <Button>欧洲</Button>
-          <Button>非洲</Button>
-          <Button>美洲</Button>
-          <Button>南极洲</Button>
-          <Button>大洋洲</Button>
-        </ButtonToolbar>
+        <div>
+          <ButtonToolbar>
+            <Button bsStyle="primary">所有</Button>
+            <Button>亚洲</Button>
+            <Button>欧洲</Button>
+            <Button>非洲</Button>
+            <Button>北美洲</Button>
+            <Button>南美洲</Button>
+            <Button>大洋洲</Button>
+            <Button>南极洲</Button>
+          </ButtonToolbar>
+        </div>
       </div>
     );
   }

src/components/Header/Header.css

@@ -14,7 +14,7 @@
 }
 
 .root {
-  background: #373277;
+  background: #fff;
   color: #fff;
 }
 
@@ -61,4 +61,4 @@
 @keyframes App-logo-spin {
   from { transform: rotate(0deg); }
   to { transform: rotate(360deg); }
-}
+}

src/components/Header/Header.js

@@ -14,6 +14,7 @@ import Navbar from 'react-bootstrap/lib/Navbar';
 import Nav from 'react-bootstrap/lib/Nav';
 import NavItem from 'react-bootstrap/lib/NavItem';
 import Badge from 'react-bootstrap/lib/Badge';
+import Button from 'react-bootstrap/lib/Button';
 import NavDropdown from 'react-bootstrap/lib/NavDropdown';
 import MenuItem from 'react-bootstrap/lib/MenuItem';
 import history from '../../history';
@@ -23,52 +24,66 @@ import { User } from '../../actions';
 import s from './Header.css';
 import Link from '../Link';
 import Alerts from '../Alerts';
-import Navigation from '../Navigation';
-import logoUrl from './logo-small.png';
-import logoUrl2x from './[email protected]';
+import ethOffline from './eth_offline.svg';
+import ethOnline from './eth_online.svg';
 
 class Header extends React.Component {
   _gotoTokens(e) {
     e.preventDefault();
     e.stopPropagation();
     history.replace('/tokens');
   }
+
   render() {
     const { user } = this.props;
     return (
-      <Navbar inverse collapseOnSelect>
-        <Navbar.Header>
-          <Navbar.Brand>
-            <Link className={s.brand} to="/">
-              <img
-                src={logoUrl}
-                width="32"
-                height="32"
-                alt="EchoWallet"
-                className={s.App_logo}
-              />
-            </Link>
-            <span>加密国家</span>
-          </Navbar.Brand>
-          <Navbar.Toggle />
-        </Navbar.Header>
-        <Navbar.Collapse>
-          <Nav pullRight>
-            <NavItem href="/dapp">市井</NavItem>
-            <NavItem href="/myitems">
-              我的国家 <Badge>4</Badge>
-            </NavItem>
-            <NavItem href="#">D46202</NavItem>
-            <NavItem href="#" onClick={this._gotoTokens} title="Connected:xxx">
-              {user.address || 'Online'}
-            </NavItem>
-            {/* <NavDropdown title={mapLocalesName()} id="language-you-choose"> */}
-            {/* <MenuItem href="?lang=en-us">English</MenuItem> */}
-            {/* <MenuItem href="?lang=zh-cn">CN</MenuItem> */}
-            {/* </NavDropdown> */}
-          </Nav>
-        </Navbar.Collapse>
-      </Navbar>
+      <div className={s.root}>
+        <div className={s.container}>
+          <Navbar
+            fluid
+            collapseOnSelect
+            style={{ backgroundColor: '#fff', borderColor: '#fff' }}
+          >
+            <Navbar.Header>
+              <Navbar.Brand>
+                加密国家
+              </Navbar.Brand>
+              <Navbar.Toggle />
+            </Navbar.Header>
+            <Navbar.Collapse>
+              <Nav pullRight>
+                <NavItem href="/dapp">市井</NavItem>
+                <NavItem href="/myitems">
+                  MY ITEMS &nbsp;<Badge>4</Badge>
+                </NavItem>
+                <NavItem href="#">
+                  <Button bsStyle="primary" bsSize="xsmall">
+                    D46202
+                  </Button>
+                </NavItem>
+                <NavItem
+                  href="#"
+                  onClick={this._gotoTokens}
+                  title="Connected:xxx"
+                >
+                  {user.address || (
+                    <img
+                      src={ethOffline}
+                      width="35"
+                      height="35"
+                      alt=""
+                    />
+                  )}
+                </NavItem>
+                {/* <NavDropdown title={mapLocalesName()} id="language-you-choose"> */}
+                {/* <MenuItem href="?lang=en-us">English</MenuItem> */}
+                {/* <MenuItem href="?lang=zh-cn">CN</MenuItem> */}
+                {/* </NavDropdown> */}
+              </Nav>
+            </Navbar.Collapse>
+          </Navbar>
+        </div>
+      </div>
     );
   }
 }

src/components/List/Item/Item.scss

@@ -0,0 +1,104 @@
+.card {
+  cursor: pointer;
+  border-radius: 5px;
+  border: 1px solid #ccc;
+  margin-bottom: 20px;
+
+}
+.countryCardBg{
+  border-top-left-radius: 5px;
+  border-top-right-radius: 5px;
+  display: block;
+  background-color: #000;
+  padding: 10px;
+}
+.flagImg{
+  float: left;
+  width: 60px;
+  border-radius: 5px;
+}
+.countryCardName{
+  float: right;
+  text-align: right;
+  color: #fff!important;
+  font-weight: 700!important;
+  font-size: 1.2em!important;
+  letter-spacing: 1px;
+  overflow: hidden;
+  -o-text-overflow: ellipsis;
+  text-overflow: ellipsis;
+  white-space: pre;
+}
+.countryImg{
+  //margin: 5px;
+}
+.countryCardOwner{
+  font-weight: normal;
+  font-size: 14px;
+  height: 30px;
+  line-height: 30px;
+  background-color: rgb(59, 43, 200);
+  color: rgb(255, 255, 255);
+  text-align: center;
+}
+.content {
+  padding: 10px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+.column{
+  display: block;
+  float: left;
+  width: 50%;
+  margin-bottom: 5px;
+  //padding-top: 1rem;
+  //padding-bottom: 1rem;
+}
+.listitem{
+  display: list-item;
+  table-layout: fixed;
+  padding: .21428571em 0;
+  line-height: 1.14285714em;
+  font-weight: 800!important;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: pre;
+  box-sizing: inherit;
+}
+.header{
+  display: block;
+  margin: 0;
+  font-weight: 500!important;
+  color: #999!important;
+  font-size: .9em!important;
+  overflow: hidden;
+  -o-text-overflow: ellipsis;
+  text-overflow: ellipsis;
+  white-space: pre;
+  box-sizing: inherit;
+}
+.purchase{
+  margin-top: 10px;
+  border-top: 1px solid #ccc;
+  box-sizing: inherit;
+  overflow: hidden;
+  -o-text-overflow: ellipsis;
+  text-overflow: ellipsis;
+  clear: both;
+  a {
+    padding: 7px 7px;
+    align-items: center;
+    font-size: 1em;
+    border: 1px solid #ccc;
+    border-color: rgba(34,36,38,.15);
+    border-top-left-radius: 5px;
+    border-bottom-left-radius: 5px;
+    vertical-align: baseline;
+    font-weight: 500;
+  }
+  a:hover,a:visited,a:link{
+    text-decoration: none;
+    color: #000;
+  }
+}

src/components/List/Item/index.css

@@ -0,0 +1,17 @@
+.card {
+   display: block;
+   content: " ";
+   height: 0;
+   clear: both;
+   overflow: hidden;
+   visibility: hidden;
+ }
+.country-card {
+
+}
+.content {
+
+}
+.btcss {
+  border: 1px solid #ccc;
+}

src/components/List/Item/index.js

@@ -1,13 +1,14 @@
 /* eslint-disable import/first,no-unused-vars,prefer-destructuring */
 import React from 'react';
+import withStyles from 'isomorphic-style-loader/lib/withStyles';
 import Link from '../../Link';
 import Col from 'react-bootstrap/lib/Col';
-import Thumbnail from 'react-bootstrap/lib/Thumbnail';
+import Image from 'react-bootstrap/lib/Image';
 import Button from 'react-bootstrap/lib/Button';
 import ImageUrl from '../../../../public/countries/au.svg';
 import ImageUrl2 from '../../../../public/countries/au.png';
-
 import ModalCompoent from '../../../components/Modal';
+import s from './Item.scss';
 
 class Item extends React.Component {
   constructor(props, context) {
@@ -16,38 +17,40 @@ class Item extends React.Component {
 
   render() {
     const data = this.props.data;
+    const name = this.props.data.owner;
+    const c =  name.slice(name.length - 6).toUpperCase();
+    const i = parseInt(c, 16) > 8388607.5 ? "#FFF" : "#000";
+    const bgcolor = "#" + c;
     return (
       <Col xs={6} md={3}>
-        <Thumbnail
-          src={ImageUrl}
-          alt="242x200"
-          className="hehe"
-          style={{ backgroundColor: '#000000' }}
-        >
-          <div>
-            <img src={ImageUrl2} style={{ height: '40px' }} />
+        <div className={s.card}>
+          <a href={`/country/${data.id}`} className={s.countryCardBg}>
+            <Image src={ImageUrl2} responsive className={s.flagImg} />
+            <div className={s.countryCardName}><span>{data.name}</span></div>
+            <Image src={ImageUrl} responsive className={s.countryImg} />
+          </a>
+          <div className={s.countryCardOwner} style={{color: i, backgroundColor: bgcolor}}><span>OWNER: {data.owner}</span></div>
+          {/* <Link to={`/country/${data.id}`}>OWNER:{data.owner}</Link> */}
+          <div className={s.content}>
+            <div className={s.column}>
+              <div className={s.listitem}><div className={s.header}>首都</div>{data.capital}</div>
+              <div className={s.listitem}><div className={s.header}>人口</div>{data.population}</div>
+            </div>
+            <div className={s.column}>
+              <div className={s.listitem}><div className={s.header}>语言</div>{data.language}</div>
+              <div className={s.listitem}><div className={s.header}>货币</div>{data.currency}</div>
+            </div>
           </div>
-          <div style={{ color: '#FFFFFF' }}>
-            <h4>{data.name}</h4>
-            {/* <Link to={`/country/${data.id}`}>OWNER:{data.owner}</Link> */}
-            <p>OWNER:{data.owner}</p>
-            <p>首都，语言</p>
-            <p>
-              {data.capital},{data.language}
-            </p>
-            <p>人口，货币</p>
-            <p>
-              {data.population},{data.currency}
-            </p>
-            <p>
-              <span>{data.price}</span>
-            </p>
+          <div className={s.purchase}>
+            <div className={s.content}>
+              <a href="javascript:;">{data.price} ETH</a>
+              <ModalCompoent countryData={data} />
+            </div>
           </div>
-          <ModalCompoent countryData={data} />
-        </Thumbnail>
+        </div>
       </Col>
     );
   }
 }
 
-export default Item;
+export default withStyles(s)(Item);

src/components/List/List.scss

@@ -0,0 +1,3 @@
+.rank {
+  margin-bottom: 20px;
+}