Profile page (#1288)

_config.yml

@@ -14,6 +14,8 @@ rtl: false
 
 title: Tabler
 description: Premium and Open Source dashboard template with responsive and high quality UI.
+
+email: support@tabler.io
 homepage: https://tabler.io
 github-url: https://github.com/tabler/tabler
 github-sponsors-url: https://github.com/sponsors/codecalm

src/pages/_data/menu.yml

@@ -127,6 +127,9 @@ base:
         sign-in:
           title: Sign in
           url: sign-in.html
+        sign-in-link:
+          title: Sign in link
+          url: sign-in-link.html
         sign-in-illustration:
           title: Sign in with illustration
           url: sign-in-illustration.html

src/pages/_data/timeline.yml

@@ -0,0 +1,31 @@
+- icon: brand-facebook
+  icon-bg: facebook
+  title: Facebook
+  date: just now
+
+- icon: briefcase
+  title: Products
+  date: 2 hrs ago
+
+- icon: brand-twitter
+  icon-bg: twitter
+  title: Twitter
+  date: 8 hrs ago
+
+- icon: brand-dribbble
+  icon-bg: dribbble
+  title: Dribbble
+  date: 12 hrs ago
+
+- icon: database
+  title: Backup
+  date: 2 days ago
+
+- icon: settings
+  icon-bg: primary
+  title: System
+  date: 4 days ago
+
+- icon: briefcase
+  title: Products
+  date: 12 days ago

src/pages/_docs/timelines.md

@@ -12,7 +12,7 @@ The available timeline design is comprised of many components that will help you
 {% capture code %}
 {% include cards/timeline.html %}
 {% endcapture %}
-{% include example.html code=code %}
+{% include example.html code=code columns=2 %}
 
 
 ## Simple timeline
@@ -22,4 +22,4 @@ Use a simplified version of the timeline, if it suits your design better. You ca
 {% capture code %}
 {% include cards/timeline.html simple=true %}
 {% endcapture %}
-{% include example.html code=code %}
+{% include example.html code=code columns=2  %}

src/pages/_includes/cards/timeline.html

@@ -1,83 +1,90 @@
-<div class="card">
-	<div class="card-header">
-		<h3 class="card-title">{{ include.title | default: 'Timeline' }}</h3>
-	</div>
-	<div class="card-body">
-		<ul class="list list-timeline{% if include.simple %} list-timeline-simple{% endif %}">
-			<li>
-				<div class="list-timeline-icon bg-twitter">{% include ui/icon.html icon="brand-twitter" %}</div>
-				<div class="list-timeline-content">
-					<div class="list-timeline-time">10 hrs ago</div>
-					<p class="list-timeline-title">+1150 Followers</p>
-					<p class="text-muted">You’re getting more and more followers, keep it up!</p>
+<ul class="timeline{% if include.simple %} timeline-simple{% endif %}">
+	<li class="timeline-event">
+		<div class="timeline-event-icon bg-twitter-lt">{% include ui/icon.html icon="brand-twitter" %}</div>
+		<div class="card timeline-event-card">
+			<div class="card-body">
+				<div class="text-muted float-end">10 hrs ago</div>
+				<h4>+1150 Followers</h4>
+				<p class="text-muted">You’re getting more and more followers, keep it up!</p>
+			</div>
+		</div>
+	</li>
+	<li class="timeline-event">
+		<div class="timeline-event-icon">{% include ui/icon.html icon="briefcase" %}</div>
+		<div class="card timeline-event-card">
+			<div class="card-body">
+				<div class="text-muted float-end">2 hrs ago</div>
+				<h4>+3 New Products were added!</h4>
+				<p class="text-muted">Congratulations!</p>
+			</div>
+		</div>
+	</li>
+	<li class="timeline-event">
+		<div class="timeline-event-icon">{% include ui/icon.html icon="check" %}</div>
+		<div class="card timeline-event-card">
+			<div class="card-body">
+				<div class="text-muted float-end">1 day ago</div>
+				<h4>Database backup completed!</h4>
+				<p class="text-muted">Download the <a href="#">latest backup</a>.</p>
+			</div>
+		</div>
+	</li>
+	<li class="timeline-event">
+		<div class="timeline-event-icon bg-facebook-lt">{% include ui/icon.html icon="brand-facebook" %}</div>
+		<div class="card timeline-event-card">
+			<div class="card-body">
+				<div class="text-muted float-end">1 day ago</div>
+				<h4>+290 Page Likes</h4>
+				<p class="text-muted">This is great, keep it up!</p>
+			</div>
+		</div>
+	</li>
+	<li class="timeline-event">
+		<div class="timeline-event-icon">{% include ui/icon.html icon="user-plus" %}</div>
+		<div class="card timeline-event-card">
+			<div class="card-body">
+				<div class="text-muted float-end">2 days ago</div>
+				<h4>+3 Friend Requests</h4>
+				<div class="avatar-list mt-3">
+					{% for person in site.data.people limit: 3 %}
+					{% include ui/avatar.html person=person status="success" %}
+					{% endfor %}
 				</div>
-			</li>
-			<li>
-				<div class="list-timeline-icon bg-red">{% include ui/icon.html icon="briefcase" %}</div>
-				<div class="list-timeline-content">
-					<div class="list-timeline-time">2 hrs ago</div>
-					<p class="list-timeline-title">+3 New Products were added!</p>
-					<p class="text-muted">Congratulations!</p>
-				</div>
-			</li>
-			<li>
-				<div class="list-timeline-icon bg-success">{% include ui/icon.html icon="check" %}</div>
-				<div class="list-timeline-content">
-					<div class="list-timeline-time">1 day ago</div>
-					<p class="list-timeline-title">Database backup completed!</p>
-					<p class="text-muted">Download the <a href="#">latest backup</a>.</p>
-				</div>
-			</li>
-			<li>
-				<div class="list-timeline-icon bg-facebook">{% include ui/icon.html icon="brand-facebook" %}</div>
-				<div class="list-timeline-content">
-					<div class="list-timeline-time">1 day ago</div>
-					<p class="list-timeline-title">+290 Page Likes</p>
-					<p class="text-muted">This is great, keep it up!</p>
-				</div>
-			</li>
-			<li>
-				<div class="list-timeline-icon bg-teal">{% include ui/icon.html icon="user-plus" %}</div>
-				<div class="list-timeline-content">
-					<div class="list-timeline-time">2 days ago</div>
-					<p class="list-timeline-title">+3 Friend Requests</p>
-					<div class="avatar-list mt-3">
-						{% for person in site.data.people limit: 3 %}
-						{% include ui/avatar.html person=person status="success" %}
-						{% endfor %}
-					</div>
-				</div>
-			</li>
-			<li>
-				<div class="list-timeline-icon bg-yellow">{% include ui/icon.html icon="photo" %}</div>
-				<div class="list-timeline-content">
-					<div class="list-timeline-time">3 days ago</div>
-					<p class="list-timeline-title">+2 New photos</p>
-					<div class="mt-3">
-						<div class="row g-2">
-							<div class="col-6">
-								<div class="media media-2x1 rounded">
-									<a class="media-content" style="background-image: url({% include ui/image.html id=6 %})"></a>
-								</div>
+			</div>
+		</div>
+	</li>
+	<li class="timeline-event">
+		<div class="timeline-event-icon">{% include ui/icon.html icon="photo" %}</div>
+		<div class="card timeline-event-card">
+			<div class="card-body">
+				<div class="text-muted float-end">3 days ago</div>
+				<h4>+2 New photos</h4>
+				<div class="mt-3">
+					<div class="row g-2">
+						<div class="col-6">
+							<div class="media media-2x1 rounded">
+								<a class="media-content" style="background-image: url({% include ui/image.html id=6 %})"></a>
 							</div>
-							<div class="col-6">
-								<div class="media media-2x1 rounded">
-									<a class="media-content" style="background-image: url({% include ui/image.html id=7 %})"></a>
-								</div>
+						</div>
+						<div class="col-6">
+							<div class="media media-2x1 rounded">
+								<a class="media-content" style="background-image: url({% include ui/image.html id=7 %})"></a>
 							</div>
 						</div>
 					</div>
 				</div>
-			</li>
-			<li>
-				<div class="list-timeline-icon">{% include ui/icon.html icon="settings" %}</div>
-				<div class="list-timeline-content">
-					<div class="list-timeline-time">2 weeks ago</div>
-					<p class="list-timeline-title">System updated to v2.02</p>
-					<p class="text-muted">Check the complete changelog at the <a href="#">activity
-						page</a>.</p>
-				</div>
-			</li>
-		</ul>
-	</div>
-</div>
+			</div>
+		</div>
+	</li>
+	<li class="timeline-event">
+		<div class="timeline-event-icon">{% include ui/icon.html icon="settings" %}</div>
+		<div class="card timeline-event-card">
+			<div class="card-body">
+				<div class="text-muted float-end">2 weeks ago</div>
+				<h4>System updated to v2.02</h4>
+				<p class="text-muted">Check the complete changelog at the <a href="#">activity
+					page</a>.</p>
+			</div>
+		</div>
+	</li>
+</ul>

src/pages/_includes/layout/headers/profile.html

@@ -0,0 +1,38 @@
+{% assign person = site.data.people[3] %}
+
+<div class="page-header">
+	<div class="container">
+		<div class="row align-items-center">
+			<div class="col-auto">
+				{% include ui/avatar.html person=person rounded=true size="lg" %}
+			</div>
+			<div class="col">
+				<h1 class="fw-bold">{{ person.full_name }}</h1>
+				<div class="my-2">Unemployed. Building a $1M solo business while traveling the world. Currently at $400k/yr.
+				</div>
+
+				<div class="list-inline list-inline-dots text-muted">
+					<div class="list-inline-item">
+						{% include ui/icon.html icon="map" inline=true %}
+						{{ person.university }}, {{ person.country }}
+					</div>
+					<div class="list-inline-item">
+						{% include ui/icon.html icon="mail" inline=true %}
+						<a href="#" class="text-reset">{{ person.email }}</a>
+					</div>
+					<div class="list-inline-item">
+						{% include ui/icon.html icon="cake" inline=true %}
+						{{ person.birth_date }}
+					</div>
+				</div>
+			</div>
+			<div class="col-auto ms-auto">
+				<div class="btn-list">
+					{% include ui/button.html icon="dots" icon-only=true %}
+					{% include ui/button.html icon="message" icon-only=true %}
+					{% include ui/button.html icon="check" color="primary" text="Following" %}
+				</div>
+			</div>
+		</div>
+	</div>
+</div>

src/pages/_includes/layout/navbar-side.html

@@ -55,7 +55,7 @@
 		</a>
 		<div class="dropdown-menu dropdown-menu-end dropdown-menu-arrow">
 			<a href="#" class="dropdown-item">Status</a>
-			<a href="#" class="dropdown-item">Profile</a>
+			<a href="{{ site.base }}/profile.html" class="dropdown-item">Profile</a>
 			<a href="#" class="dropdown-item">Feedback</a>
 			<div class="dropdown-divider"></div>
 			<a href="{{ site.base }}/settings.html" class="dropdown-item">Settings</a>

src/pages/_includes/parts/modals/success.html

@@ -5,7 +5,7 @@
 	{% include ui/icon.html icon="circle-check" color="green" size="lg" class="mb-2" %}
 
 	<h3>Payment succedeed</h3>
-	<div class="text-muted">Your payment of $290 has been successfully submitted. Your invoice has been sent to support@tabler.io.</div>
+	<div class="text-muted">Your payment of $290 has been successfully submitted. Your invoice has been sent to {{ site.email }}.</div>
 </div>
 
 <div class="modal-footer">

src/pages/profile.html

@@ -0,0 +1,32 @@
+---
+title: Profile
+page-header-file: profile
+---
+
+<div class="row g-3">
+	<div class="col">
+		{% include cards/timeline.html %}
+	</div>
+	<div class="col-lg-4">
+		<div class="row row-cards">
+			<div class="col-12">
+				{% include cards/user-info.html %}
+			</div>
+			<div class="col-12">
+				<div class="card">
+					<div class="card-body">
+						<h2 class="card-title">About Me</h2>
+						<div>
+							<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium aliquid beatae eaque eius
+								esse fugit, hic id illo itaque modi molestias nemo perferendis quae rerum soluta. Blanditiis
+								laborum minima molestiae molestias nemo nesciunt nisi pariatur quae sapiente ut. Aut consectetur
+								doloremque, error impedit, ipsum labore laboriosam minima non omnis perspiciatis possimus
+								praesentium provident quo recusandae suscipit tempore totam.
+							</p>
+						</div>
+					</div>
+				</div>
+			</div>
+		</div>
+	</div>
+</div>

src/pages/sign-in-link.html

@@ -0,0 +1,20 @@
+---
+layout: single
+title: Sign in link
+---
+
+<div class="text-center">
+	<div class="my-5">
+		<h2 class="h1">Check your inbox</h2>
+
+		<p class="fs-h3 text-muted">
+			We've sent you a magic link to <strong>{{ site.email }}</strong>.<br />
+			Please click the link to confirm your address.
+		</p>
+	</div>
+
+	<div class="text-center text-muted mt-3">
+		Can't see the email? Please check the spam folder.<br />
+		Wrong email? Please <a href="#">re-enter your address</a>.
+	</div>
+</div>