mirror of
https://github.com/tabler/tabler.git
synced 2026-07-27 21:44:39 +04:00
social timeline
This commit is contained in:
codecalm
@@ -1,204 +0,0 @@
|
||||
{% assign person = site.data.people[0] %}
|
||||
{% assign id = 0 | random_id %}
|
||||
<div class="card">
|
||||
<div class="card-header d-flex">
|
||||
<a href="#">
|
||||
{% include ui/avatar.html person=person size="md" %}
|
||||
</a>
|
||||
<div class="mx-3">
|
||||
<a href="#">{{ person.full_name }}</a>
|
||||
<div class="text-muted text-sm">11 days ago</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
{% if include.text %}
|
||||
<div class="card-text mb-3">
|
||||
<p>{{ include.text }}</p>
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
{% if include.feed %}
|
||||
<div class="row row-sm">
|
||||
{% if include.feed == 1 %}
|
||||
<div class="col-6 mb-2">
|
||||
<div class="media media-2x1 rounded">
|
||||
<a class="media-content" style="background-image: url({{ site.base }}/static/photos/{{ site.data.photos[0].file }})"></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-6 mb-2">
|
||||
<div class="media media-2x1 rounded">
|
||||
<a class="media-content" style="background-image: url({{ site.base }}/static/photos/{{ site.data.photos[1].file }})"></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-4">
|
||||
<div class="media media-4x3 rounded">
|
||||
<a class="media-content" style="background-image: url({{ site.base }}/static/photos/{{ site.data.photos[2].file }})"></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-4">
|
||||
<div class="media media-4x3 rounded">
|
||||
<a class="media-content" style="background-image: url({{ site.base }}/static/photos/{{ site.data.photos[3].file }})"></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-4">
|
||||
<div class="media media-4x3 rounded">
|
||||
<a class="media-content" style="background-image: url({{ site.base }}/static/photos/{{ site.data.photos[4].file }})"></a>
|
||||
</div>
|
||||
</div>
|
||||
{% elsif include.feed == 2 %}
|
||||
<div class="col-12">
|
||||
<div class="media media-2x1 rounded">
|
||||
<a class="media-content" style="background-image: url({{ site.base }}/static/photos/{{ site.data.photos[5].file }})"></a>
|
||||
</div>
|
||||
</div>
|
||||
{% elsif include.feed == 3 %}
|
||||
<div class="col-6 d-flex">
|
||||
<div class="media flex-fill rounded">
|
||||
<a class="media-content" style="background-image: url({{ site.base }}/static/photos/{{ site.data.photos[6].file }})"></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-6">
|
||||
<div class="media media-2x1 mb-2 rounded">
|
||||
<a class="media-content" style="background-image: url({{ site.base }}/static/photos/{{ site.data.photos[7].file }})"></a>
|
||||
</div>
|
||||
<div class="row row-sm">
|
||||
<div class="col-6">
|
||||
<div class="media rounded">
|
||||
<a class="media-content" style="background-image: url({{ site.base }}/static/photos/{{ site.data.photos[8].file }})"></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-6">
|
||||
<div class="media rounded">
|
||||
<a class="media-content" style="background-image: url({{ site.base }}/static/photos/{{ site.data.photos[9].file }})"></a>
|
||||
<a class="media-overlay active bg-dark-overlay"><small class="text-white mx-auto">9+</small></a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% elsif include.feed == 4 %}
|
||||
<div class="col-6">
|
||||
<div class="media media-2x1 rounded">
|
||||
<a class="media-content" style="background-image: url({{ site.base }}/static/photos/{{ site.data.photos[10].file }})"></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-6">
|
||||
<div class="media media-2x1 rounded">
|
||||
<a class="media-content" style="background-image: url({{ site.base }}/static/photos/{{ site.data.photos[11].file }})"></a>
|
||||
</div>
|
||||
</div>
|
||||
{% elsif include.feed == 5 %}
|
||||
<div class="col-4">
|
||||
<div class="media media-4x3 rounded">
|
||||
<a class="media-content" style="background-image: url({{ site.base }}/static/photos/{{ site.data.photos[12].file }})"></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-4">
|
||||
<div class="media media-4x3 rounded">
|
||||
<a class="media-content" style="background-image: url({{ site.base }}/static/photos/{{ site.data.photos[13].file }})"></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-4">
|
||||
<div class="media media-4x3 rounded">
|
||||
<a class="media-content" style="background-image: url({{ site.base }}/static/photos/{{ site.data.photos[14].file }})"></a>
|
||||
</div>
|
||||
</div>
|
||||
{% elsif include.feed == 6 %}
|
||||
<div class="col-6 d-flex">
|
||||
<div class="media flex-fill rounded">
|
||||
<a class="media-content" style="background-image: url({{ site.base }}/static/photos/{{ site.data.photos[15].file }});"></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-6">
|
||||
<div class="row row-sm">
|
||||
<div class="col-6">
|
||||
<div class="media mb-2 rounded">
|
||||
<a class="media-content" style="background-image: url({{ site.base }}/static/photos/{{ site.data.photos[16].file }})"></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-6">
|
||||
<div class="media mb-2 rounded">
|
||||
<a class="media-content" style="background-image: url({{ site.base }}/static/photos/{{ site.data.photos[17].file }})"></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-6">
|
||||
<div class="media rounded">
|
||||
<a class="media-content" style="background-image: url({{ site.base }}/static/photos/{{ site.data.photos[18].file }})"></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-6">
|
||||
<div class="media rounded">
|
||||
<a class="media-content" style="background-image: url({{ site.base }}/static/photos/{{ site.data.photos[19].file }})"></a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{% elsif include.feed == 7 %}
|
||||
<div class="col-3 d-flex">
|
||||
<div class="media flex-fill rounded">
|
||||
<a class="media-content" style="background-image: url({{ site.base }}/static/photos/{{ site.data.photos[20].file }})"></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-6">
|
||||
<div class="row row-sm">
|
||||
<div class="col-6">
|
||||
<div class="media mb-2 rounded">
|
||||
<a class="media-content" style="background-image: url({{ site.base }}/static/photos/{{ site.data.photos[21].file }})"></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-6">
|
||||
<div class="media mb-2 rounded">
|
||||
<a class="media-content" style="background-image: url({{ site.base }}/static/photos/{{ site.data.photos[22].file }})"></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-6">
|
||||
<div class="media rounded">
|
||||
<a class="media-content" style="background-image: url({{ site.base }}/static/photos/{{ site.data.photos[23].file }})"></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-6">
|
||||
<div class="media rounded">
|
||||
<a class="media-content" style="background-image: url({{ site.base }}/static/photos/{{ site.data.photos[24].file }})"></a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-3 d-flex">
|
||||
<div class="media flex-fill rounded">
|
||||
<a class="media-content" style="background-image: url({{ site.base }}/static/photos/{{ site.data.photos[25].file }})"></a>
|
||||
</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
</div>
|
||||
<div class="card-footer">
|
||||
<div class="toolbar toolbar-mx">
|
||||
<a href="#" class="text-muted">
|
||||
{% include ui/icon.html icon="thumbs-up" %} 321 Likes
|
||||
</a>
|
||||
<a href="#feed-form-{{ id }}" class="text-muted" data-toggle="collapse">
|
||||
{% include ui/icon.html icon="message-square" %} 56 Comments
|
||||
</a>
|
||||
<a href="#" class="text-muted">
|
||||
{% include ui/icon.html icon="share-2" %}
|
||||
Share
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-footer pt-3 collapse" id="feed-form-{{ id }}">
|
||||
<form>
|
||||
<textarea class="form-control" rows="3"></textarea>
|
||||
<div class="d-flex pt-2">
|
||||
<div class="toolbar mt-1">
|
||||
<a href="#" class="text-muted">{% include ui/icon.html icon="image" %}</a>
|
||||
<a href="#" class="text-muted">{% include ui/icon.html icon="video" %}</a>
|
||||
<a href="#" class="text-muted">{% include ui/icon.html icon="map-pin" %}</a>
|
||||
<a href="#" class="text-muted">{% include ui/icon.html icon="paperclip" %}</a>
|
||||
</div>
|
||||
<button class="btn btn-sm btn-primary ml-auto">Post</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
@@ -37,7 +37,7 @@
|
||||
</li>
|
||||
|
||||
<li class="nav-item dropdown pl-3">
|
||||
<a href="#" class="nav-link d-flex lh-1 text-inherit p-0 text-left" data-toggle="dropdown">
|
||||
<a href="#" class="nav-link d-flex lh-1 text-reset p-0 text-left" data-toggle="dropdown">
|
||||
{% include ui/avatar.html person-id=1 %}
|
||||
<div class="d-none d-lg-block pl-2">
|
||||
<div>Paweł Kuna</div>
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
{% append_lib autosize %}
|
||||
|
||||
<textarea class="form-control" data-toggle="autosize" placeholder="{{ include.placeholder | default: 'Typing something…' }}"></textarea>
|
||||
<textarea class="form-control{% if include.class %} {{ include.class }}{% endif %}" data-toggle="autosize" placeholder="{{ include.placeholder | default: 'Typing something…' }}"{% if include.rows %} rows="{{ include.rows }}"{% endif %}></textarea>
|
||||
|
||||
{% capture_once scripts %}
|
||||
<script>
|
||||
|
||||
@@ -9,7 +9,7 @@ layout: base
|
||||
{% include layout/navbar-secondary.html %}
|
||||
|
||||
<div class="content">
|
||||
<div class="container{% if page.container-centered %} d-flex flex-column justify-content-center{% endif %}">
|
||||
<div class="container{% if page.container-size %}-{{ page.container-size }}{% endif %}{% if page.container-centered %} d-flex flex-column justify-content-center{% endif %}">
|
||||
{% if page-header %}
|
||||
{% include layout/page-header.html title=page-header description=page.page-header-description actions=page.page-header-actions pretitle=page.page-header-pretitle %}
|
||||
{% endif %}
|
||||
|
||||
+28
-11
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user