separate module post

src/application/controller/common/module/post.php

@@ -0,0 +1,3 @@
+<?php
+
+require(PROJECT_DIR . '/application/view/common/module/post.phtml');

src/application/view/common/header/user.phtml

@@ -10,6 +10,7 @@
   <link rel="stylesheet" type="text/css" href="css/mobile.css" />
   <link rel="stylesheet" type="text/css" href="css/app.css" />
   <link rel="stylesheet" type="text/css" href="css/module/menu.css" />
+  <link rel="stylesheet" type="text/css" href="css/module/post.css" />
   <script src="js/jquery.js"></script>
   <script src="js/home.js"></script>
 </head>

src/application/view/common/module/post.phtml

@@ -0,0 +1,13 @@
+<div class="modulePost">
+  <form action="/" method="POST" name="post">
+    <div class="avatar">
+      <img src="<?php echo PROJECT_HOST ?>/api/image?hash=<?php echo $_SESSION['userName'] ?>" alt="" />
+    </div>
+    <div class="message">
+      <textarea name="post" placeholder="<?php echo _('Enter your post...') ?>" id="message"></textarea>
+    </div>
+    <div class="action">
+      <div class="button" onclick="Home.post.add('#feed', '#message')"><?php echo _('Send') ?></div>
+    </div>
+  </form>
+</div>

src/application/view/home.phtml

@@ -4,19 +4,7 @@
     <?php include(PROJECT_DIR . '/application/controller/common/module/menu.php') ?>
   </div>
   <div class="right">
-    <div class="post">
+    <?php include(PROJECT_DIR . '/application/controller/common/module/post.php') ?>
-      <form action="<?php echo PROJECT_HOST ?>" method="POST" name="post">
-        <div class="avatar">
-          <img src="<?php echo PROJECT_HOST ?>/api/image?hash=<?php echo $_SESSION['userName'] ?>" alt="" />
-        </div>
-        <div class="message">
-          <textarea name="post" placeholder="<?php echo _('Enter your post...') ?>" id="message"></textarea>
-        </div>
-        <div class="action">
-          <div class="button" onclick="Home.post.add('#feed', '#message')"><?php echo _('Send') ?></div>
-        </div>
-      </form>
-    </div>
     <div class="feed" id="feed"></div>
   </div>
 </div>

src/public/css/app.css

@@ -33,78 +33,6 @@ a:active {
   margin-bottom: 64px
 }
 
-.container .post {
-  margin-bottom: 14px;
-  background: #272E39;
-  border-radius: 3px;
-  overflow: hidden;
-  position: relative;
-}
-
-.container .post .avatar {
-  position: absolute;
-  top: 19px;
-  left: 19px;
-}
-
-.container .post .avatar img {
-  border-radius: 50%;
-  border: 2px #fff solid;
-}
-
-.container .post .message {
-  padding-left: 82px;
-  padding-right: 16px;
-  padding-top: 16px;
-  padding-bottom: 16px;
-}
-
-.container .post .action {
-  border-top: 1px #4d5666 solid;
-  padding: 16px;
-  overflow: hidden;
-}
-
-.container .post .message textarea {
-  height: 52px;
-  width: 100%;
-  padding: 16px 8px;
-  border-radius: 3px;
-  font-family: Roboto-Regular, Sans-Serif, Verdana;
-  font-size: 14px;
-  background: rgb(238, 238, 238);
-  color: #1c1d1e;
-  outline: none;
-  letter-spacing: 0.2px;
-  font-size: 13px;
-  border: 1px #181818 solid;
-}
-
-.container .post textarea:focus {
-  height: 80px;
-}
-
-.container .post .button {
-  float: right;
-  padding: 6px 16px;
-  border-radius: 3px;
-  cursor: pointer;
-  background-color: #337ab7;
-  color: #fff;
-  border: 0;
-  font-size: 13px;
-}
-
-.container .post .button:hover {
-  background-color: #437baa
-}
-
-.container .post .content {
-  background: rgb(89,99,116);
-  border-radius: 3px;
-  padding: 16px;
-}
-
 .container .feed .item {
   padding: 16px;
   margin-bottom: 2px;

src/public/css/module/post.css

@@ -0,0 +1,71 @@
+.modulePost {
+  margin-bottom: 14px;
+  background: #272E39;
+  border-radius: 3px;
+  overflow: hidden;
+  position: relative;
+}
+
+.modulePost .avatar {
+  position: absolute;
+  top: 19px;
+  left: 19px;
+}
+
+.modulePost .avatar img {
+  border-radius: 50%;
+  border: 2px #fff solid;
+}
+
+.modulePost .message {
+  padding-left: 82px;
+  padding-right: 16px;
+  padding-top: 16px;
+  padding-bottom: 16px;
+}
+
+.modulePost .action {
+  border-top: 1px #4d5666 solid;
+  padding: 16px;
+  overflow: hidden;
+}
+
+.modulePost .message textarea {
+  height: 52px;
+  width: 100%;
+  padding: 16px 8px;
+  border-radius: 3px;
+  font-family: Roboto-Regular, Sans-Serif, Verdana;
+  font-size: 14px;
+  background: rgb(238, 238, 238);
+  color: #1c1d1e;
+  outline: none;
+  letter-spacing: 0.2px;
+  font-size: 13px;
+  border: 1px #181818 solid;
+}
+
+.modulePost textarea:focus {
+  height: 80px;
+}
+
+.modulePost .button {
+  float: right;
+  padding: 6px 16px;
+  border-radius: 3px;
+  cursor: pointer;
+  background-color: #337ab7;
+  color: #fff;
+  border: 0;
+  font-size: 13px;
+}
+
+.modulePost .button:hover {
+  background-color: #437baa
+}
+
+.modulePost .content {
+  background: rgb(89,99,116);
+  border-radius: 3px;
+  padding: 16px;
+}