update template

src/application/controller/api/image.php

@@ -5,5 +5,5 @@ if (isset($_GET['hash'])) {
   $icon = new Icon();
 
   header("Content-Type: image/jpeg");
-  echo  $icon->generateImageResource(md5($_GET['hash']), 26, 36, false);
+  echo $icon->generateImageResource(md5($_GET['hash']), 42, 42, false);
 }

src/application/controller/home.php

@@ -0,0 +1,15 @@
+<?php
+
+if (!isset($_SESSION['username'])) {
+
+  header('Location: ' . PROJECT_HOST . '/login', true, 302);
+}
+
+$metaTitle = _('Home | Twisterarmy Cloud');
+
+$followingUsersTotal = 0;
+foreach ((array) $_twister->getFollowing($_SESSION['username']) as $followingUserName) {
+  $followingUsersTotal++;
+}
+
+require(PROJECT_DIR . '/application/view/home.phtml');

src/application/controller/index.php

@@ -1,10 +0,0 @@
-<?php
-
-if (!isset($_SESSION['username'])) {
-
-  header('Location: ' . PROJECT_HOST . '/login', true, 302);
-}
-
-$metaTitle = _('Home | Twisterarmy Cloud');
-
-require(PROJECT_DIR . '/application/view/home.phtml');

src/application/view/following.phtml

@@ -9,13 +9,13 @@
         <?php if ($followingUsersTotal) { ?>
           <span><?php echo $followingUsersTotal ?></span>
         <?php } ?>
-      </a><a class="item" href="bookmarks" title="<?php echo _('Bookmarks') ?>">
+      </a><a class="item" href="#todo" title="<?php echo _('Bookmarks') ?>">
         <i class="bi bi-bookmarks"></i>
-      </a><a class="item" href="mentions" title="<?php echo _('Mentions') ?>">
+      </a><a class="item" href="#todo" title="<?php echo _('Mentions') ?>">
         <i class="bi bi-at"></i>
-      </a><a class="item" href="messages" title="<?php echo _('Messages') ?>">
+      </a><a class="item" href="#todo" title="<?php echo _('Messages') ?>">
         <i class="bi bi-envelope"></i>
-      </a><a class="item" href="settings" title="<?php echo _('Messages') ?>">
+      </a><a class="item" href="#todo" title="<?php echo _('Settings') ?>">
         <i class="bi bi-gear"></i>
       </a>
     </div>
@@ -25,10 +25,8 @@
           @<?php echo $followingUser['name'] ?>
         </div>
       <?php } ?>
+      <h2><?php echo _('Following suggestions') ?></h2>
     </div>
   </div>
   <div class="side"></div>
 </div>
-<div class="footer">
-  <?php include(PROJECT_DIR . '/application/controller/common/footer/user.php') ?>
-</div>

src/application/view/home.phtml

@@ -1,61 +1,49 @@
 <?php include(PROJECT_DIR . '/application/controller/common/header/user.php') ?>
 <div class="container">
-  <div class="main">
+  <div class="left">
     <div class="menu">
       <a class="item active" href="<?php echo PROJECT_HOST ?>" title="<?php echo _('Home') ?>">
         <i class="bi bi-house"></i>
-      </a>
+      </a><a class="item" href="following" title="<?php echo _('Following') ?>">
-      <a class="item" href="following" title="<?php echo _('Following') ?>">
         <i class="bi bi-person"></i>
-        <span>12</span>
+        <?php if ($followingUsersTotal) { ?>
-      </a>
+          <span><?php echo $followingUsersTotal ?></span>
-      <a class="item" href="bookmarks" title="<?php echo _('Bookmarks') ?>">
+        <?php } ?>
+      </a><a class="item" href="#todo" title="<?php echo _('Bookmarks') ?>">
         <i class="bi bi-bookmarks"></i>
-        <span>4</span>
+      </a><a class="item" href="#todo" title="<?php echo _('Mentions') ?>">
-      </a>
-      <a class="item" href="mentions" title="<?php echo _('Mentions') ?>">
         <i class="bi bi-at"></i>
-      </a>
+      </a><a class="item" href="#todo" title="<?php echo _('Messages') ?>">
-      <a class="item" href="messages" title="<?php echo _('Messages') ?>">
         <i class="bi bi-envelope"></i>
-      </a>
+      </a><a class="item" href="#todo" title="<?php echo _('Settings') ?>">
-      <a class="item" href="settings" title="<?php echo _('Messages') ?>">
         <i class="bi bi-gear"></i>
       </a>
     </div>
-    <form action="<?php echo PROJECT_HOST ?>" method="POST" name="post" class="post">
+  </div>
-      <div>
+  <div class="right">
+    <div class="post">
+      <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...') ?>"></textarea>
         </div>
+        <div class="action">
           <!--<span>220</span>-->
           <button><?php echo _('Send') ?></button>
+        </div>
       </form>
+    </div>
     <div class="content">
       <div class="item">
-        Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make
+        <div class="avatar">
+          <img src="<?php echo PROJECT_HOST ?>/api/image?hash=<?php echo $_SESSION['username'] ?>" alt="" />
         </div>
-      <div class="item">
+        <div class="message">
           Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make
         </div>
       </div>
     </div>
-  <div class="side">
-
-    <!-- todo
-      <form action="<?php echo PROJECT_HOST ?>" method="POST" name="search" class="search">
-        <input type="text" value="" placeholder="Search...">
-      </form>
-    -->
-
-    <div class="suggestions">
-      <h4><?php echo _('Who to follow') ?></h4>
-      <h4><?php echo _('New users') ?></h4>
-      <h4><?php echo _('Last activity') ?></h4>
-      <h4><?php echo _('Related posts') ?></h4>
-    </div>
-
   </div>
 </div>
-<div class="footer">
-  <?php include(PROJECT_DIR . '/application/controller/common/footer/user.php') ?>
-</div>

src/public/css/user.css

@@ -19,44 +19,26 @@ a:active {
   overflow: hidden
 }
 
-.container .side  {
+.container > .left {
   float: left;
-  width: 30%;
+  max-width: 420px;
-  padding-right: 16px
+  padding-right: 10px
 }
 
-.container .side form input {
+.container > .right {
-  height: 36px;
-  width: 100%;
-  padding: 16px 8px;
-  border-radius: 3px;
-  margin-bottom: 16px;
-  font-family: Roboto-Regular, Sans-Serif, Verdana;
-  font-size: 14px;
-  background: rgb(56, 65, 78);
-  color: #dfe8f4;
-  outline: none;
-}
-
-.container .side .suggestions {
-  padding: 16px 8px;
-}
-
-.container .side .suggestions h4 {
-  text-align: center;
-  text-transform: uppercase
-}
-
-.container .main  {
   float: left;
-  width: 70%
+  width: 60%
 }
 
-.container .main .menu {
+.container {
+  margin-bottom: 64px
+}
+
+.container .menu {
   margin-bottom: 6px
 }
 
-.container .main .menu .item {
+.container .menu .item {
   display: inline-block;
   background: rgba(39, 46, 57, 0.28);
   /* background: rgba(101, 114, 134, 0.28); */
@@ -67,46 +49,70 @@ a:active {
   margin: 2px
 }
 
-.container .main .menu .item.active,
+.container .menu .item.active,
-.container .main .menu .item:hover {
+.container .menu .item:hover {
   background: #272E39;
 }
 
-.container .main .menu .item span {
+.container .menu .item span {
   font-size: 12px;
   margin: 0 8px
 }
 
-.container .main .post {
+.container .post {
   margin-bottom: 10px;
-  padding: 16px;
   background: #272E39;
   border-radius: 3px;
-  overflow: hidden
+  overflow: hidden;
+  position: relative;
 }
 
-.container .main .post textarea {
+.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;
-  margin-bottom: 16px;
   font-family: Roboto-Regular, Sans-Serif, Verdana;
   font-size: 14px;
   /*background: rgba(101, 114, 134, 0.28);*/
-  background: rgba(255, 255, 255, 0.18);
+  /*background: rgba(255, 255, 255, 0.18);*/
+  background: rgb(77, 86, 102);
   color: #dfe8f4;
   outline: none
 
 }
 
-.container .main .post textarea:focus {
+.container .post textarea:focus {
-  height: 120px;
+  height: 80px;
-  /*background: rgb(79, 90, 107);*/
+  background: rgb(79, 90, 107);
-  background: rgb(103, 112, 126);
+  /*background: rgb(103, 112, 126);*/
 }
 
-.container .main .post button {
+.container .post button {
   float: right;
   padding: 8px 16px;
   border-radius: 3px;
@@ -116,26 +122,39 @@ a:active {
   border: 0
 }
 
-.container .main .post button:hover {
+.container .post button:hover {
   background-color: #437baa
 }
 
-.container .main .post .content {
+.container .post .content {
   background: rgb(89,99,116);
   border-radius: 3px;
   padding: 16px;
 }
 
-.container .main .content .item {
+.container .content .item {
   padding: 16px;
   margin-bottom: 8px;
   /*background: rgba(101, 114, 134, 0.28);*/
-  /*background: rgba(255, 254, 254, 0.04);*/
+  background: rgba(255, 254, 254, 0.04);
-  background: rgba(255, 255, 255, 0.18);
+  /*background: rgba(255, 255, 255, 0.18);*/
   border-radius: 3px;
-  color: #dfe8f4
+  color: #dfe8f4;
+
 }
 
-.container .main .footer {
+
-  margin: 36px 0
+.container .content .item .avatar {
+  position: absolute;
+  top: 19px;
+  left: 19px;
+}
+
+.container .content .item .avatar img {
+  border-radius: 50%;
+  border: 2px #fff solid;
+}
+
+.container .content .item .message {
+  padding-left: 65px;
 }