social timeline

pages/social.html

@@ -1,19 +1,36 @@
 ---
 title: Social elements
-page-header: Social elements
 done: true
+container-size: narrow
 ---
 
 <div class="row">
-	<div class="col-md-6">
-		{% include cards/feed-card.html feed=1 text="Suscipit integer egestas porta massa id sem fermentum vel et enim pulvinar ullamcorper dignissim at" %}
-		{% include cards/feed-card.html feed=3 %}
-		{% include cards/feed-card.html feed=5 %}
-		{% include cards/feed-card.html feed=7 %}
-	</div>
-	<div class="col-md-6">
-		{% include cards/feed-card.html feed=2 text="Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa cupiditate dolorem doloremque labore quisquam? Animi, blanditiis cupiditate dignissimos est ipsam maiores molestias nemo perferendis perspiciatis praesentium." %}
-		{% include cards/feed-card.html feed=4 %}
-		{% include cards/feed-card.html feed=6 %}
+	<div class="col">
+
+		<div class="card">
+			<div class="card-body">
+				<form class="mb-3">
+					{% include ui/form/textarea-autosize.html class="form-control-flush" placeholder="White a post..." %}
+				</form>
+				<div class="row align-items-center">
+					<div class="col text-muted small">
+						0/500
+					</div>
+					<div class="col-auto text-muted">
+						<div class="btn-list">
+							<a href="#" class="btn btn-link btn-icon link-secondary btn-sm" data-toggle="tooltip" title="Add photo">
+								{% include ui/icon.html icon="image" %}
+							</a>
+							<a href="#" class="btn btn-link btn-icon link-secondary btn-sm" data-toggle="tooltip" title="Attach file">
+								{% include ui/icon.html icon="file-plus" %}
+							</a>
+							<a href="#" class="btn btn-link btn-icon link-secondary btn-sm" data-toggle="tooltip" title="Share your position">
+								{% include ui/icon.html icon="map-pin" %}
+							</a>
+						</div>
+					</div>
+				</div>
+			</div>
+		</div>
 	</div>
 </div>