mirror of
https://github.com/tabler/tabler.git
synced 2025-12-21 17:34:25 +04:00
Profile components
This commit is contained in:
mrszympek
29
pages/_includes/cards/profile-2.html
Normal file
29
pages/_includes/cards/profile-2.html
Normal file
@@ -0,0 +1,29 @@
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<div class="media">
|
||||
{% include ui/avatar.html person-id=8 size="xl" %}
|
||||
<div class="media-body ml-4">
|
||||
<h3 class="font-medium m-0">{{ site.data.people[20].first_name }} {{ site.data.people[20].last_name }}</h3>
|
||||
<p class="text-muted mb-0">{{ site.data.people[20].job_title }}</p>
|
||||
|
||||
<ul class="social-links list-inline mb-0 mt-2">
|
||||
<li class="list-inline-item">
|
||||
<a href="javascript:void(0)" title="Facebook" data-toggle="tooltip">
|
||||
{% include ui/icon.html icon="facebook" %}
|
||||
</a>
|
||||
</li>
|
||||
<li class="list-inline-item">
|
||||
<a href="javascript:void(0)" title="Twitter" data-toggle="tooltip">
|
||||
{% include ui/icon.html icon="twitter" %}
|
||||
</a>
|
||||
</li>
|
||||
<li class="list-inline-item">
|
||||
<a href="javascript:void(0)" title="1234567890" data-toggle="tooltip">
|
||||
{% include ui/icon.html icon="phone" %}
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
76
pages/_includes/cards/profile-edit-big.html
Normal file
76
pages/_includes/cards/profile-edit-big.html
Normal file
@@ -0,0 +1,76 @@
|
||||
<form class="card">
|
||||
<div class="card-body">
|
||||
<h3 class="card-title">Edit Profile</h3>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-md-5">
|
||||
<div class="form-group">
|
||||
<label class="form-label">Company</label>
|
||||
<input type="text" class="form-control" disabled="" placeholder="Company" value="Creative Code Inc.">
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-sm-6 col-md-3">
|
||||
<div class="form-group">
|
||||
<label class="form-label">Username</label>
|
||||
<input type="text" class="form-control" placeholder="Username" value="michael23">
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-sm-6 col-md-4">
|
||||
<div class="form-group">
|
||||
<label class="form-label">Email address</label>
|
||||
<input type="email" class="form-control" placeholder="Email">
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-sm-6 col-md-6">
|
||||
<div class="form-group">
|
||||
<label class="form-label">First Name</label>
|
||||
<input type="text" class="form-control" placeholder="Company" value="Chet">
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-sm-6 col-md-6">
|
||||
<div class="form-group">
|
||||
<label class="form-label">Last Name</label>
|
||||
<input type="text" class="form-control" placeholder="Last Name" value="Faker">
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-12">
|
||||
<div class="form-group">
|
||||
<label class="form-label">Address</label>
|
||||
<input type="text" class="form-control" placeholder="Home Address" value="Melbourne, Australia">
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-sm-6 col-md-4">
|
||||
<div class="form-group">
|
||||
<label class="form-label">City</label>
|
||||
<input type="text" class="form-control" placeholder="City" value="Melbourne">
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-sm-6 col-md-3">
|
||||
<div class="form-group">
|
||||
<label class="form-label">Postal Code</label>
|
||||
<input type="number" class="form-control" placeholder="ZIP Code">
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-5">
|
||||
<div class="form-group">
|
||||
<label class="form-label">Country</label>
|
||||
<select class="form-control custom-select">
|
||||
<option value="">Germany</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-12">
|
||||
<div class="form-group mb-0">
|
||||
<label class="form-label">About Me</label>
|
||||
<textarea rows="5" class="form-control" placeholder="Here can be your description" value="Mike">Oh so, your weak rhyme
|
||||
You doubt I'll bother, reading into it
|
||||
I'll probably won't, left to my own devices
|
||||
But that's the difference in our opinions.</textarea>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-footer text-right">
|
||||
<button type="submit" class="btn btn-primary">Update Profile</button>
|
||||
</div>
|
||||
</form>
|
||||
39
pages/_includes/cards/profile-edit.html
Normal file
39
pages/_includes/cards/profile-edit.html
Normal file
@@ -0,0 +1,39 @@
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h3 class="card-title">My Profile</h3>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<form>
|
||||
<div class="row mb-3">
|
||||
<div class="col-auto">
|
||||
<span class="avatar avatar-lg" style="background-image: url({{ site.data.people[11].photo }})"></span>
|
||||
</div>
|
||||
<div class="col">
|
||||
<div class="form-group">
|
||||
<label class="form-label">Email-Address</label>
|
||||
<input class="form-control" placeholder="your-email@domain.com"/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label class="form-label">Bio</label>
|
||||
<textarea class="form-control" rows="5">Big belly rude boy, million dollar hustler. Unemployed.</textarea>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label class="form-label">Email-Address</label>
|
||||
<input class="form-control" placeholder="your-email@domain.com"/>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label class="form-label">Password</label>
|
||||
<input type="password" class="form-control" value="password"/>
|
||||
</div>
|
||||
|
||||
<div class="form-footer">
|
||||
<button class="btn btn-primary btn-block">Save</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
92
pages/_includes/cards/profile-timeline.html
Normal file
92
pages/_includes/cards/profile-timeline.html
Normal file
@@ -0,0 +1,92 @@
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<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>
|
||||
</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">
|
||||
<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">
|
||||
</div>
|
||||
|
||||
<div>
|
||||
Aenean lacinia bibendum nulla sed consectetur. Vestibulum id ligula porta felis euismod semper. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Cras
|
||||
justo odio, dapibus ac facilisis in, egestas eget quam. Vestibulum id ligula porta felis euismod semper. Cum sociis natoque penatibus et magnis dis parturient montes,
|
||||
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">
|
||||
<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">
|
||||
<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.
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</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">
|
||||
<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">
|
||||
</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
|
||||
parturient montes, nascetur ridiculus mus. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
|
||||
</div>
|
||||
</div>
|
||||
</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">
|
||||
<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">
|
||||
</div>
|
||||
|
||||
<div>
|
||||
Donec ullamcorper nulla non metus auctor fringilla. Vestibulum id ligula porta felis euismod semper. Aenean eu leo quam. Pellentesque ornare sem lacinia quam
|
||||
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">
|
||||
<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.
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
17
pages/_includes/cards/profile.html
Normal file
17
pages/_includes/cards/profile.html
Normal file
@@ -0,0 +1,17 @@
|
||||
<div class="card card-profile">
|
||||
<div class="card-header" style="background-image: url({{ site.base }}/img/photos/{{ site.data.photos[22].file }});"></div>
|
||||
<div class="card-body text-center">
|
||||
<img class="card-profile-img" src="{{ site.data.people[4].photo }}">
|
||||
|
||||
<h2 class="mb-3">{{ site.data.people[4].first_name }} {{ site.data.people[4].last_name }}</h2>
|
||||
|
||||
<p class="mb-4">
|
||||
Big belly rude boy, million dollar hustler. Unemployed.
|
||||
</p>
|
||||
|
||||
<button class="btn btn-outline-primary btn-sm">
|
||||
{% include ui/icon.html icon="twitter" %}
|
||||
Follow
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
17
pages/profile.html
Normal file
17
pages/profile.html
Normal file
@@ -0,0 +1,17 @@
|
||||
---
|
||||
title: Profile
|
||||
---
|
||||
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-lg-4">
|
||||
{% include cards/profile.html %}
|
||||
{% include cards/profile-2.html %}
|
||||
{% include cards/profile-edit.html %}
|
||||
</div>
|
||||
<div class="col-lg-8">
|
||||
{% include cards/profile-timeline.html %}
|
||||
{% include cards/profile-edit-big.html %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -217,3 +217,48 @@ Card Aside
|
||||
border-bottom-left-radius: 3px;
|
||||
background: no-repeat center/cover;
|
||||
}
|
||||
|
||||
/*
|
||||
Card profile
|
||||
*/
|
||||
.card-profile {
|
||||
.card-header {
|
||||
height: 9rem;
|
||||
background-size: cover;
|
||||
}
|
||||
}
|
||||
|
||||
.card-profile-img {
|
||||
max-width: 6rem;
|
||||
margin-top: -5rem;
|
||||
margin-bottom: 1rem;
|
||||
border: 3px solid #fff;
|
||||
border-radius: 100%;
|
||||
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
/*
|
||||
Card list group
|
||||
*/
|
||||
.card-list-group {
|
||||
.card-body + & {
|
||||
border-top: 1px solid $border-color;
|
||||
}
|
||||
|
||||
.list-group-item {
|
||||
border-right: 0;
|
||||
border-left: 0;
|
||||
border-radius: 0;
|
||||
|
||||
padding-left: $card-spacer-x;
|
||||
padding-right: $card-spacer-x;
|
||||
|
||||
&:last-child {
|
||||
border-bottom: 0;
|
||||
}
|
||||
|
||||
&:first-child {
|
||||
border-top: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -2,24 +2,24 @@
|
||||
|
||||
.media {
|
||||
position: relative;
|
||||
display: block;
|
||||
display: flex;
|
||||
flex-shrink: 0;
|
||||
padding: 0;
|
||||
overflow: hidden;
|
||||
border-top-left-radius: inherit;
|
||||
border-top-right-radius: inherit;
|
||||
|
||||
&::after {
|
||||
display: block;
|
||||
padding-top: 100%;
|
||||
content: "";
|
||||
}
|
||||
|
||||
&:not(:first-child):not(:last-child):not(:only-child) {
|
||||
border-radius: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.media-list {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
.media-overlay {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
|
||||
Reference in New Issue
Block a user