improve css, html-templates

inside85 · Aug 3, 2015 · cfff672 · cfff672
1 parent 7d5d2a8
commit cfff672
Show file tree

Hide file tree

Showing 3 changed files with 25 additions and 7 deletions.
diff --git a/lib/components.css b/lib/components.css
@@ -242,6 +242,21 @@ a:hover {
     list-style: none;
     min-height: 70px;
     margin-top: 1.5em;
+    max-width: 500px;
+    display: table-row;
+}
+.comment-ico {
+    width: 50px;
+    display: table-cell;
+}
+.comment-ico .user-icon {
+    position: absolute;
+
+}
+.comment-body {
+    max-width: 500px;
+    display: table-cell;
+    padding-bottom: 2em;
 }
 
 /******* user icon *********/

diff --git a/lib/pages/Comment.jsx b/lib/pages/Comment.jsx
@@ -2,11 +2,11 @@ var Comment = $class({
     render: function() {
         var element = this.props.element;
         return(
-            <div className="comment media">
-                <div className="media-left">
+            <div className="comment">
+                <div className="comment-ico">
                     <UserIcon user={element.author} />
                 </div>
-                <div className="media-body">
+                <div className="comment-body">
                     <a name={element.name} />
                     <UserName user={element.author} /> &nbsp;
                     <span className="datetime">{element.datetime()}</span>
@@ -21,10 +21,11 @@ var Comment = $class({
 var CommentNew = $class(Form, {
     render: function() {
         return (
-            <form onSubmit={this.submit} className="row">
-                <div className="col-sm-1">
+            <form onSubmit={this.submit} className="comment">
+                <div className="comment-ico">
+                    &nbsp;
                 </div>
-                <div className="col-sm-7">
+                <div className="comment-body">
                     <div className="form-group">
                         {this.$inputText("text", {placeholder: "New comment"})}
                     </div>

diff --git a/lib/pages/MainPage.jsx b/lib/pages/MainPage.jsx
@@ -97,7 +97,9 @@ var MainPage = $class(Page, {
         return (
         <div className="container">
             <div className="row">
-                {this.children().map(this.$ChildItem)}
+                {this.children().sort(function(a, b){
+                    return a.name > b.name
+                }).map(this.$ChildItem)}
             </div>
             {this.isAvailableToAdd() &&
             <div className="row">