From c74ceed6029195b2be47a532f0c47bc8bb340eda Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Miroslav=20=C5=A0ediv=C3=BD?= <sedivy.miro@gmail.com>
Date: Thu, 29 Dec 2016 23:07:22 +0100
Subject: [PATCH] Social box initial design

---
 index.php                |  54 ++++++++++++++---
 static/styles/design.css | 127 ++++++++++++++++++++++++++++++++++++---
 2 files changed, 164 insertions(+), 17 deletions(-)

diff --git a/index.php b/index.php
index f366769..32575f2 100644
--- a/index.php
+++ b/index.php
@@ -229,19 +229,53 @@ for($m=0;$m<=60;$m+=10){
 		
 		<!-- Post Row -->
 		<div class="b_post post_row">
-			<div class="b_header">
-				<img src="<?php echo Config::get("pic_small"); ?>" width="40" height="40" class="b_profile">
-				<div class="b_desc">
-					<div class="b_sharer">
-						<span class="b_name"><?php echo Config::get("name"); ?></span><span class="b_options"> - </span><span class="b_feeling"></span><span class="b_with"> with </span><span class="b_persons"></span><span class="b_here"> here: </span><span class="b_location"></span>
+			<div class="b_inner">
+				<div class="b_header">
+					<img src="<?php echo Config::get("pic_small"); ?>" width="40" height="40" class="b_profile">
+					<div class="b_desc">
+						<div class="b_sharer">
+							<span class="b_name"><?php echo Config::get("name"); ?></span><span class="b_options"> - </span><span class="b_feeling"></span><span class="b_with"> with </span><span class="b_persons"></span><span class="b_here"> here: </span><span class="b_location"></span>
+						</div>
+						<i class="pirvacy_icon"></i>
+						<a class="b_date"></a>
+						<a class="b_tools"></a>
 					</div>
-					<i class="pirvacy_icon"></i>
-					<a class="b_date"></a>
-					<a class="b_tools"></a>
 				</div>
+				<div class="b_text"></div>
+				<div class="b_content"></div>
+			</div>
+			<div class="b_socialbox">
+				<?php /*
+				<ul class="b_buttons">
+					<li><a class="active"><i class="like"></i>Like</a></li>
+					<li><a><i class="comment"></i>Comment</a></li>
+				</ul>
+				<div class="b_comments">
+					<div class="b_comment">
+						<img src="static/images/profile.jpg" width="32" height="32" class="b_profile" />
+						<div class="b_content">
+							<div class="b_input">
+								<input type="text" placeholder="Write comment ..." />
+							</div>
+						</div>
+					</div>
+					<ul>
+						<li class="b_comment">
+							<img src="static/images/profile.jpg" width="32" height="32" class="b_profile" />
+							<div class="b_content">
+								<span class="b_name">Max Mustermann</span> Sample Text
+								<a class="b_date">12 Oct 2016 07:59</a>
+							</div>
+							<a class="b_tools"></a>
+						</li>
+					</ul>
+					<div class="b_panel">
+						<a class="btn">Show more comments</a>
+						<span class="count">2 from 52</span>
+					</div>
+				</div>
+				*/ ?>
 			</div>
-			<div class="b_text"></div>
-			<div class="b_content"></div>
 		</div>
 		
 		<!-- Pirvacy Settings -->
diff --git a/static/styles/design.css b/static/styles/design.css
index 302d4a0..5e8140f 100644
--- a/static/styles/design.css
+++ b/static/styles/design.css
@@ -120,7 +120,6 @@ body {
   border-radius: 3px;
   background-color: #fff;
   margin-bottom: 10px;
-  padding: 12px;
   position: relative;
 }
 
@@ -128,6 +127,10 @@ body {
   padding: 0;
 }
 
+.b_inner {
+  padding: 12px;
+}
+
 .b_header {
   overflow: hidden;
 }
@@ -199,7 +202,6 @@ body {
 .b_tools:active,
 .b_tools:focus {
   cursor: pointer;
-  ;
   background: url(../images/B89i4luGsIu.png) no-repeat;
   background-position: 5px 6px;
 }
@@ -414,13 +416,124 @@ body {
   max-height: 470px;
 }
 
-.b_textarea {
+.b_socialbox {
+  
+}
+
+.b_buttons {
+  list-style-type: none;
+  margin: 0 12px;
+  padding: 5px 0;
+  border-top: 1px solid #e5e5e5;
+}
+
+.b_buttons li {
+  display: inline-block;
+}
+
+.b_buttons li a {
+  color: #7f7f7f;
+  display: inline-block;
+  font-size: 12px;
+  font-weight: bold;
+  line-height: 14px;
+  margin-right: 20px;
+  padding: 4px 4px 4px 0;
+  cursor: pointer;
+}
+
+.b_buttons li a:hover {
+  text-decoration: underline;
+}
+
+i.like, i.comment {
+  background: url(../images/tools.png) no-repeat;
+  display: inline-block;
+  height: 14px;
+  margin: 0 6px -2px 0;
+  width: 14px;
+}
+
+i.like {
+  background-position: 0px -62px;
+}
+
+i.comment {
+  background-position: 0px -47px
+}
+
+.b_buttons li a.active {
+  color: rgb(88, 144, 255);
+}
+
+.b_buttons li a.active i.like {
+  background-position: 0px -92px;
+}
+
+.b_comments {
+  border-top: 1px solid #e1e2e3;
+  background-color: #f6f7f9;
+  border-radius: 0 0 3px 3px;
+  color: #1d2129;
+  padding: 7px 0;
+}
+
+.b_comments .b_panel {
+  font-size: 13px;
+  overflow: hidden;
+  padding: 5px 12px;
+}
+
+.b_comments .b_panel .btn {
+  color: #365899;
+  text-decoration: none;
+  cursor: pointer;
+}
+
+.b_comments .b_panel .btn:hover {
+  text-decoration: underline;
+}
+
+.b_comments .b_panel .count {
+  float: right;
+  color: #9197a3;
+}
+
+.b_comments ul {
+  list-style-type: none;
+  margin: 0;
+  padding: 0;
+}
+
+.b_comment {
+  position: relative;
+  padding: 5px 12px;
+  overflow: hidden;
+}
+
+.b_comment .b_date {
+  display: block;
+}
+
+.b_comment .b_content {
+  font-size: 13px;
+  margin-left: 37px;
+}
+
+.b_comment .b_input {
+  height: 20px;
+  padding: 5px;
+  background-color: #fff;
+  border: 1px solid #dddfe2;
+}
+
+.b_comment .b_input input {
   width: 100%;
-  max-width: 100%;
-  min-width: 100%;
-  height: 200px;
-  min-height: 200px;
   border: 0;
+  padding: 0;
+  margin: 0;
+  outline: 0;
+  line-height: 20px;
 }
 
 .mask {