feat: add sidebar logo

graffie · Dec 27, 2015 · 9f0a06e · 9f0a06e
1 parent 7709cb6
commit 9f0a06e
Show file tree

Hide file tree

Showing 7 changed files with 56 additions and 20 deletions.
diff --git a/index.html b/index.html
@@ -1,7 +1,7 @@
 <!DOCTYPE html>
 <html lang="en">
   <head>
-    <title>Mill</title>
+    <title></title>
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <link rel="stylesheet" href="//birdman.qiniudn.com/normalize.css" />

diff --git a/src/app.js b/src/app.js
@@ -29,6 +29,7 @@ class App extends React.Component {
       error: false,
       loading: true,
       posts: [],
+      appLogo: '',
     };
   }
 
@@ -37,6 +38,9 @@ class App extends React.Component {
   }
 
   componentDidMount() {
+    this.client.getUser().then(user => {
+      this.setState({appLogo: user.avatar_url});
+    });
     this.listPosts();
   }
 
@@ -52,9 +56,14 @@ class App extends React.Component {
     return (
       <div id='mill-app'>
         <div id='sidebar'>
-          <h2 className='mill-title'>
-            <a href='javascript:;'>{this.props.config.title}</a>
-          </h2>
+          <div id='sidebar-content'>
+            <a className='app-logo' href='/#/'>
+              <img src={this.state.appLogo} alt='{this.props.config.title}' />
+            </a>
+            <h2 className='app-title'>
+              <a href='/#/'>{this.props.config.title}</a>
+            </h2>
+          </div>
         </div>
         <main>{React.cloneElement(this.props.children, props)}</main>
       </div>

diff --git a/src/client.js b/src/client.js
@@ -77,6 +77,11 @@ Client.prototype.listPosts = function(args) {
   });
 };
 
+Client.prototype.getUser = function() {
+  let url = this.getUrl(`/users/${this.owner}`);
+  return this.request(url);
+};
+
 /**
  * Expose `Client`
  */

diff --git a/src/detail.js b/src/detail.js
@@ -21,6 +21,7 @@ export default class Detail extends React.Component {
     this.state = {
       post: post
     };
+    document.title = post.title || '';
   }
 
   fetchPost(postId, posts) {
@@ -36,6 +37,7 @@ export default class Detail extends React.Component {
   componentWillReceiveProps(nextProps) {
     let post = this.fetchPost(nextProps.params.id, nextProps.posts);
     this.setState({post: post});
+    document.title = post.title || '';
   }
 
   render() {

diff --git a/src/index.js b/src/index.js
@@ -28,6 +28,11 @@ class ListItem extends React.Component {
 };
 
 export default class Index extends React.Component {
+
+  componentDidMount() {
+    document.title = this.props.config.title || 'Mill';
+  }
+
   render() {
     return (
       <div className='mill-index'>

diff --git a/style.css b/style.css
@@ -1,19 +1,11 @@
-* {
-  -webkit-box-sizing: border-box;
-     -moz-box-sizing: border-box;
-          box-sizing: border-box;
-}
-*:before,
-*:after {
-  -webkit-box-sizing: border-box;
-     -moz-box-sizing: border-box;
-          box-sizing: border-box;
-}
 html,
 body {
   height: 100%;
   width: 100%;
   font-size: 62.5%;
+  font-family: sans-serif;
+  -webkit-text-size-adjust: 100%;
+      -ms-text-size-adjust: 100%;
 }
 body {
   max-height: 100%;
@@ -61,14 +53,36 @@ h2 {
   text-shadow: 0px 1px 3px rgba(0,0,0,0.3);
   overflow-y: auto;
 }
-#mill-app .mill-title {
+#mill-app #sidebar-content {
+  position: relative;
+  top: 4rem;
+  width: 80%;
+  margin: 0 auto;
+}
+#mill-app #sidebar .app-logo img {
+  display: block;
+  height: 100px;
+  width: 100px;
+  margin: 0 auto 10px auto;
+  line-height: 0;
+  border: 3px solid #fff;
+  border-radius: 50%;
+  -webkit-transition: opacity .3s ease-in-out;
+          transition: opacity .3s ease-in-out;
+  -webkit-box-shadow: 0 0 3px 3px rgba(0,0,0,.3),inset 0 0 40px 2px rgba(0,0,0,.3);
+          box-shadow: 0 0 3px 3px rgba(0,0,0,.3),inset 0 0 40px 2px rgba(0,0,0,.3);
+  -webkit-backface-visibility: hidden;
+      -ms-backface-visibility: hidden;
+          backface-visibility: hidden;
+}
+#mill-app .app-title {
   margin: 0 0 10px 0;
   font-weight: bold;
   text-shadow: 0 1px 6px rgba(0,0,0,0.1);
   text-indent: 0px;
   text-align: center;
 }
-#mill-app .mill-title a {
+#mill-app .app-title a {
   color: white;
   text-decoration: none;
 }

diff --git a/webpack.config.production.js b/webpack.config.production.js
@@ -1,7 +1,8 @@
-/*
+/**!
  * mill - webpack.config.production.js
- * Copyright(c) 2015 xeodou <[email protected]>
- * MIT Licensed
+ *
+ * Authors:
+ *   xeodou <[email protected]>
  */
 
 'use strict';