From 84b60ab5d7c4b7f932f8ebe2b34f98e112a109bc Mon Sep 17 00:00:00 2001
From: codecalm <codecalm@gmail.com>
Date: Sun, 29 Dec 2019 14:00:57 +0100
Subject: [PATCH] profile timeline fixes

---
 pages/_includes/cards/profile-timeline.html | 68 ++++++++++++---------
 pages/_includes/ui/button.html              |  3 +-
 pages/music.html                            | 12 ++++
 scss/ui/_cards.scss                         |  4 ++
 4 files changed, 57 insertions(+), 30 deletions(-)
 create mode 100644 pages/music.html

diff --git a/pages/_includes/cards/profile-timeline.html b/pages/_includes/cards/profile-timeline.html
index 174983785..8d1dd116f 100644
--- a/pages/_includes/cards/profile-timeline.html
+++ b/pages/_includes/cards/profile-timeline.html
@@ -3,20 +3,20 @@
       <div class="input-group">
          <input type="text" class="form-control" placeholder="Message">
          <div class="input-group-append">
-            <button type="button" class="btn btn-secondary">
-               <i class="fe fe-camera"></i>
-            </button>
+            {% include ui/button.html icon="camera" icon-only=true color="secondary" %}
          </div>
       </div>
    </div>
    <ul class="list-group card-list-group">
       <li class="list-group-item py-4">
-         <div class="media">
-            <div class="media-object avatar avatar-md mr-4" style="background-image: url({{ site.data.people[4].photo }})"></div>
-            <div class="media-body">
-               <div class="media-heading">
+         <div class="d-flex">
+            <div>
+               {% include ui/avatar.html person-id=5 class="mr-3" %}
+            </div>
+            <div class="flex-fill">
+               <div>
                   <small class="float-right text-muted">4 min</small>
-                  <h4 class="font-semibold">{{ site.data.people[4].first_name }} {{ site.data.people[4].last_name }}</h4 class="font-semibold">
+                  <h4>{{ site.data.people[4].first_name }} {{ site.data.people[4].last_name }}</h4>
                </div>
 
                <div>
@@ -25,18 +25,22 @@
                   nascetur ridiculus mus.
                </div>
 
-               <ul class="media-list">
-                  <li class="media mt-4">
-                     <div class="media-object avatar mr-4" style="background-image: url({{ site.data.people[7].photo }})"></div>
-                     <div class="media-body">
+               <ul class="list-unstyled">
+                  <li class="d-flex mt-4">
+                     <div>
+                        {% include ui/avatar.html person-id=8 class="mr-3" %}
+                     </div>
+                     <div class="flex-fill">
                         <strong>{{ site.data.people[7].first_name }} {{ site.data.people[7].last_name }}: </strong>
                         Donec id elit non mi porta gravida at eget metus. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Donec ullamcorper nulla non metus
                         auctor fringilla. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Sed posuere consectetur est at lobortis.
                      </div>
                   </li>
-                  <li class="media mt-4">
-                     <div class="media-object avatar mr-4" style="background-image: url({{ site.data.people[9].photo }})"></div>
-                     <div class="media-body">
+                  <li class="d-flex mt-4">
+                     <div>
+                        {% include ui/avatar.html person-id=10 class="mr-3" %}
+                     </div>
+                     <div class="flex-fill">
                         <strong>{{ site.data.people[9].first_name }} {{ site.data.people[9].last_name }}: </strong>
                         Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit
                         amet risus.
@@ -47,12 +51,14 @@
          </div>
       </li>
       <li class="list-group-item py-4">
-         <div class="media">
-            <div class="media-object avatar avatar-md mr-4" style="background-image: url({{ site.data.people[4].photo }})"></div>
-            <div class="media-body">
-               <div class="media-heading">
+         <div class="d-flex">
+            <div>
+               {% include ui/avatar.html person-id=11 class="mr-3" %}
+            </div>
+            <div class="flex-fill">
+               <div>
                   <small class="float-right text-muted">12 min</small>
-                  <h4 class="font-semibold">{{ site.data.people[4].first_name }} {{ site.data.people[4].last_name }}</h4 class="font-semibold">
+                  <h4>{{ site.data.people[10].first_name }} {{ site.data.people[10].last_name }}</h4>
                </div>
                <div>
                   Donec id elit non mi porta gravida at eget metus. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Cum sociis natoque penatibus et magnis dis
@@ -62,12 +68,14 @@
          </div>
       </li>
       <li class="list-group-item py-4">
-         <div class="media">
-            <div class="media-object avatar avatar-md mr-4" style="background-image: url({{ site.data.people[4].photo }})"></div>
-            <div class="media-body">
-               <div class="media-heading">
+         <div class="d-flex">
+            <div>
+               {% include ui/avatar.html person-id=15 class="mr-3" %}
+            </div>
+            <div class="flex-fill">
+               <div>
                   <small class="float-right text-muted">34 min</small>
-                  <h4 class="font-semibold">{{ site.data.people[4].first_name }} {{ site.data.people[4].last_name }}</h4 class="font-semibold">
+                  <h4>{{ site.data.people[14].first_name }} {{ site.data.people[14].last_name }}</h4>
                </div>
 
                <div>
@@ -75,10 +83,12 @@
                   venenatis vestibulum. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui.
                </div>
 
-               <ul class="media-list">
-                  <li class="media mt-4">
-                     <div class="media-object avatar mr-4" style="background-image: url({{ site.data.people[5].photo }})"></div>
-                     <div class="media-body">
+               <ul class="list-unstyled">
+                  <li class="d-flex mt-4">
+                     <div>
+                        {% include ui/avatar.html person-id=6 class="mr-3" %}
+                     </div>
+                     <div class="flex-fill">
                         <strong>{{ site.data.people[5].first_name }} {{ site.data.people[5].last_name }}: </strong>
                         Donec id elit non mi porta gravida at eget metus. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Donec ullamcorper nulla non metus
                         auctor fringilla. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Sed posuere consectetur est at lobortis.
diff --git a/pages/_includes/ui/button.html b/pages/_includes/ui/button.html
index c30015e21..becb5f5d2 100644
--- a/pages/_includes/ui/button.html
+++ b/pages/_includes/ui/button.html
@@ -1,9 +1,10 @@
 {% removeemptylines %}
 {% assign spinner-class = false %}
+{% assign color = include.color | default: 'secondary' %}
 {% assign provider = include.provider | default: 'fe' %}
 {% if include.text %}{% assign spinner-class="mr-2" %}{% endif %}
 {% assign e = include.element | default: 'a' %}
-<{{ e }}{% if e == 'a' %} href="{% if include.href %}{{ site.base }}/{{ include.href }}{% else %}#{% endif %}"{% endif %}{% if include.type %} type="{{ include.type }}"{% endif %} class="btn{% if include.height %} btn-{{ include.height }}{% endif %}{% if include.color %} btn-{% if include.outline %}outline-{% endif %}{{ include.color }}{% endif %}{% if include.disabled %} disabled{% endif %}{% if include.square %} btn-square{% endif %}{% if include.pill %} btn-pill{% endif %}{% if include['size'] %} btn-{{ include['size'] }}{% endif %}{% if include.class %} {{ include.class }}{% endif %}{% if include.block %} btn-block{% endif %}{% if include.link %} btn-link{% endif %}{% if include.icon-only %} btn-icon{% endif %}">
+<{{ e }}{% if e == 'a' %} href="{% if include.href %}{{ site.base }}/{{ include.href }}{% else %}#{% endif %}"{% endif %}{% if include.type %} type="{{ include.type }}"{% endif %} class="btn{% if include.height %} btn-{{ include.height }}{% endif %}{% if color %} btn-{% if include.outline %}outline-{% endif %}{{ color }}{% endif %}{% if include.disabled %} disabled{% endif %}{% if include.square %} btn-square{% endif %}{% if include.pill %} btn-pill{% endif %}{% if include['size'] %} btn-{{ include['size'] }}{% endif %}{% if include.class %} {{ include.class }}{% endif %}{% if include.block %} btn-block{% endif %}{% if include.link %} btn-link{% endif %}{% if include.icon-only %} btn-icon{% endif %}">
 {% if include.spinner %}
 {% include ui/spinner.html color=false size="sm" class=spinner-class element="span" %}{% endif %}
 {% if include.icon %}{% include_cached ui/icon.html icon=include.icon use-svg=true %}{% endif %}
diff --git a/pages/music.html b/pages/music.html
new file mode 100644
index 000000000..904bcec32
--- /dev/null
+++ b/pages/music.html
@@ -0,0 +1,12 @@
+---
+title: Music components
+page-title: Music components
+---
+
+<div class="card">
+	{% for track in site.data.tracks %}
+		<div class="card-body">
+			{{ track.name }}
+		</div>
+	{% endfor %}
+</div>
diff --git a/scss/ui/_cards.scss b/scss/ui/_cards.scss
index 492c9c9a9..98399d260 100644
--- a/scss/ui/_cards.scss
+++ b/scss/ui/_cards.scss
@@ -185,6 +185,10 @@
   > :last-child {
     margin-bottom: 0;
   }
+
+  & + & {
+    border-top: 1px solid $border-color;
+  }
 }
 
 .card-body-scrollable {