Merge remote-tracking branch 'origin/dev' into dev

src/pages/_data/menu.yml

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

src/pages/_includes/cards/auth-lock.html

@@ -1,5 +1,5 @@
 {% assign person = site.data.people[0] %}
-<form class="card card-md" action="{{ site.base }}" method="get" autocomplete="off">
+<form class="card card-md" action="{{ site.base }}/" method="get" autocomplete="off" novalidate>
 	<div class="card-body text-center">
 		<div class="mb-4">
 			<h2 class="card-title">Account Locked</h2>

src/pages/_includes/cards/forgot-password.html

@@ -1,4 +1,4 @@
-<form class="card card-md" action="{{ site.base }}" method="get">
+<form class="card card-md" action="{{ site.base }}/" method="get" autocomplete="off" novalidate>
 	<div class="card-body">
 		<h2 class="card-title text-center mb-4">Forgot password</h2>
 

src/pages/_includes/cards/pricing-card-enterprise.html

@@ -0,0 +1,13 @@
+<div class="card card-md">
+	<div class="card-body">
+		<div class="row align-items-center">
+			<div class="col">
+				<h2 class="h3">Enterprise-ready. Reach out for a custom quote.</h2>
+				<p class="m-0 text-muted">Tabler is designed to work great for large enterprises. Take a look at our feature comparison.</p>
+			</div>
+			<div class="col-auto">
+				{% include ui/button.html text="Book a demo" %}
+			</div>
+		</div>
+	</div>
+</div>

src/pages/_includes/cards/sign-in.html

@@ -1,4 +1,4 @@
-<form class="card card-md" action="{{ site.base }}" method="get" autocomplete="off">
+<form class="card card-md" action="{{ site.base }}/" method="get" autocomplete="off" novalidate>
 	<div class="card-body">
 		<h2 class="card-title text-center mb-4">Login to your account</h2>
 

src/pages/_includes/cards/sign-up.html

@@ -1,4 +1,4 @@
-<form class="card card-md" action="{{ site.base }}" method="get">
+<form class="card card-md" action="{{ site.base }}/" method="get" autocomplete="off" novalidate>
 	<div class="card-body">
 		<h2 class="card-title text-center mb-4">Create new account</h2>
 

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

@@ -1,7 +1,7 @@
 {% assign breakpoint = include.breakpoint | default: 'lg' %}
 
 <div{% if include.class %} class="{{ include.class }}"{% endif %}>
-	<form action="." method="get">
+	<form action="{{ site.base }}/" method="get" autocomplete="off" novalidate>
 		{% include ui/form/input-icon.html prepend=true dark=include.dark rounded=include.rounded aria-label="Search in website" %}
 	</form>
 </div>

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

@@ -6,22 +6,28 @@
 	<div class="nav-item d-none d-{{ include.breakpoint }}-flex me-3">
 		<div class="btn-list">
 			{% if include.dark %}
-				{% include ui/button.html color="dark" icon="brand-github" text="Source code" href=site.github-url external=true %}
-				{% include ui/button.html color="dark" icon="heart" icon-color="pink" text="Sponsor" href=site.github-sponsors-url external=true %}
+			{% include ui/button.html color="dark" icon="brand-github" text="Source code" href=site.github-url
+			external=true %}
+			{% include ui/button.html color="dark" icon="heart" icon-color="pink" text="Sponsor"
+			href=site.github-sponsors-url external=true %}
 			{% else %}
-				{% include ui/button.html icon="brand-github" outline=true text="Source code" href=site.github-url external=true %}
-				{% include ui/button.html icon="heart" icon-color="pink" outline=true text="Sponsor" href=site.github-sponsors-url external=true %}
+			{% include ui/button.html icon="brand-github" outline=true text="Source code" href=site.github-url
+			external=true %}
+			{% include ui/button.html icon="heart" icon-color="pink" outline=true text="Sponsor"
+			href=site.github-sponsors-url external=true %}
 			{% endif %}
 		</div>
 	</div>
 	{% endunless %}
 
 	<div class="d-none d-{{ include.breakpoint }}-flex">
-		<a href="?theme=dark" class="nav-link px-0 hide-theme-dark" title="Enable dark mode" data-bs-toggle="tooltip" data-bs-placement="bottom">
+		<a href="?theme=dark" class="nav-link px-0 hide-theme-dark" title="Enable dark mode" data-bs-toggle="tooltip"
+		   data-bs-placement="bottom">
 			{% include ui/icon.html icon="moon" %}
 		</a>
 
-		<a href="?theme=light" class="nav-link px-0 hide-theme-light" title="Enable light mode" data-bs-toggle="tooltip" data-bs-placement="bottom">
+		<a href="?theme=light" class="nav-link px-0 hide-theme-light" title="Enable light mode" data-bs-toggle="tooltip"
+		   data-bs-placement="bottom">
 			{% include ui/icon.html icon="sun" %}
 		</a>
 
@@ -47,6 +53,13 @@
 			</div>
 			{% endunless %}
 		</a>
-		{% include ui/dropdown-menu.html arrow=true right=true separated=true menu="Set status,Profile & account,Feedback,|,Settings,Logout" %}
+		<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="#" class="dropdown-item">Feedback</a>
+			<div class="dropdown-divider"></div>
+			<a href="{{ site.base }}/settings.html" class="dropdown-item">Settings</a>
+			<a href="{{ site.base }}/sign-in.html" class="dropdown-item">Logout</a>
+		</div>
 	</div>
 </div>

src/pages/_includes/parts/nav/nav-aside.html

@@ -1,4 +1,4 @@
-<form action="" method="get">
+<form action="{{ site.base }}/" method="get" autocomplete="off" novalidate>
 
 	<div class="subheader mb-2">Category</div>
 	{% assign items = "Games,Clothing,Jewelery,Toys" | split:  "," %}

src/pages/_includes/ui/dropzone.html

@@ -2,7 +2,7 @@
 {% assign text = include.text  | default: "Text"%}
 {% assign description = include.description | default: "Description" %}
 
-<form class="dropzone" id="dropzone-{{ id }}" action=".">
+<form class="dropzone" id="dropzone-{{ id }}" action="{{ site.base }}/" autocomplete="off" novalidate>
 	<div class="fallback">
 		<input name="file" type="file" {% if include.multiple %} multiple {% endif %} />
 	</div>

src/pages/_includes/ui/form/check.html

@@ -6,14 +6,20 @@
 {% assign name = include.name | default: false %}
 {% assign is_empty = include['empty'] | default: false %}
 {% unless title %}
-   {% assign title = '' %}
-   {% if disabled %}{% assign title = title | append: ' disabled' %}{% endif %}
-   {% if checked %}{% assign title = title | append: ' checked' %}{% endif %}
-   {% if switch %}{% assign title = title | append: ' switch' %}{% endif %}
-   {% assign title = title | append: ' ' | append: type %}
-   {% assign title = title | append: ' input' | lstrip | capitalize %}
+{% assign title = '' %}
+{% if disabled %}{% assign title = title | append: ' disabled' %}{% endif %}
+{% if checked %}{% assign title = title | append: ' checked' %}{% endif %}
+{% if switch %}{% assign title = title | append: ' switch' %}{% endif %}
+{% assign title = title | append: ' ' | append: type %}
+{% assign title = title | append: ' input' | lstrip | capitalize %}
 {% endunless %}
-<label class="form-check{% if include.inline %} form-check-inline{% endif %}{% if switch %} form-switch{% endif %}{% if include.class %} {{ include.class }}{% endif %}">
-   <input class="form-check-input{% if is_empty %} position-static{% endif %}" type="{{ type }}"{% if name %} name="{{ name }}"{% endif %}{% if checked %} checked{% endif %}{% if disabled %} disabled{% endif %}>
-   {% unless is_empty %}<span class="form-check-label">{{ title }}</span>{% endunless %}
+<label class="form-check{% if include.inline %} form-check-inline{% endif %}{% if switch %} form-switch{% if include['size'] %} form-switch-{{ include['size'] }}{% endif %}{% endif %}{% if include.class %} {{ include.class }}{% endif %}">
+	<input class="form-check-input{% if is_empty %} position-static{% endif %}" type="{{ type }}" {% if name %}
+	       name="{{ name }}" {% endif %}{% if checked %} checked{% endif %}{% if disabled %} disabled{% endif %}>
+	{% if include.title-on and include.title-off %}
+	<span class="form-check-label form-check-label-on">{{include.title-on }}</span>
+	<span class="form-check-label form-check-label-off">{{include.title-off }}</span>
+	{% else %}
+	{% unless is_empty %}<span class="form-check-label">{{ title }}</span>{% endunless %}
+	{% endif %}
 </label>

src/pages/_includes/ui/illustration.html

@@ -1 +1 @@
-<img src="{{ site.base }}/static/illustrations/{{ include.image }}" height="128"{% if include.class %} class="{{ include.class }}"{% endif %}{% if include.height %} height="{{ include.height }}"{% endif %}  alt="">
+<img src="{{ site.base }}/static/illustrations/{{ include.image }}" height="{{ include.height | default: 128 }}"{% if include.class %} class="{{ include.class }}"{% endif %} alt="">

src/pages/_layouts/settings.html

@@ -0,0 +1,34 @@
+---
+layout: default
+title: Settings
+page-header: Account Settings
+---
+
+<div class="card">
+	<div class="row g-0">
+		<div class="col-3 d-none d-md-block border-end">
+			<div class="card-body">
+				<h4 class="subheader">Business settings</h4>
+
+				<div class="list-group list-group-transparent">
+					<a href="{{ site.base }}/settings.html" class="list-group-item list-group-item-action d-flex align-items-center{% if page.path == 'settings.html' %} active{% endif %}">My Account</a>
+					<a href="#" class="list-group-item list-group-item-action d-flex align-items-center">My Notifications</a>
+					<a href="#" class="list-group-item list-group-item-action d-flex align-items-center">Connected Apps</a>
+					<a href="{{ site.base }}/settings-plan.html" class="list-group-item list-group-item-action d-flex align-items-center{% if page.path == 'settings-plan.html' %} active{% endif %}">Plans</a>
+					<a href="#" class="list-group-item list-group-item-action d-flex align-items-center">Billing & Invoices</a>
+				</div>
+
+				<h4 class="subheader mt-4">Experience</h4>
+
+				<div class="list-group list-group-transparent">
+					<a href="#" class="list-group-item list-group-item-action">Give Feedback</a>
+				</div>
+			</div>
+		</div>
+		<div class="col d-flex flex-column">
+
+			{{ content }}
+
+		</div>
+	</div>
+</div>

src/pages/_layouts/single.html

@@ -4,10 +4,13 @@
 ---
 
 <div class="page page-center">
-	<div class="container-{{ page.container-size | default: 'tight' }} py-4">
+	<div class="container container-{{ page.container-size | default: 'tight' }} py-4">
+
+		{% unless page.hide-logo %}
 		<div class="text-center mb-4">
 			<a href="{{ site.base }}" class="navbar-brand navbar-brand-autodark"><img src="{{ site.base }}/static/logo.svg" height="36" alt=""></a>
 		</div>
+		{% endunless %}
 
 		{{ content }}
 	</div>

src/pages/pricing.html

@@ -9,8 +9,7 @@
 		{% include cards/pricing-card.html price="0" users=3 category="Free" %}
 	</div>
 	<div class="col-sm-6 col-lg-3">
-		{% include cards/pricing-card.html price="49" users=10 category="Premium" features="1100" featured-color="green"
-		%}
+		{% include cards/pricing-card.html price="49" users=10 category="Premium" features="1100" featured-color="green" %}
 	</div>
 	<div class="col-sm-6 col-lg-3">
 		{% include cards/pricing-card.html price="99" category="Enterprise" users=100 features="1110" %}
@@ -19,18 +18,6 @@
 		{% include cards/pricing-card.html price="139" category="Unlimited" users="Unlimited" features="1111" %}
 	</div>
 	<div class="col-12">
-		<div class="card card-md">
-			<div class="card-body">
-				<div class="row align-items-center">
-					<div class="col">
-						<h2 class="h3">Enterprise-ready. Reach out for a custom quote.</h2>
-						<p class="m-0 text-muted">Tabler is designed to work great for large enterprises. Take a look at our feature comparison.</p>
-					</div>
-					<div class="col-auto">
-						{% include ui/button.html text="Book a demo" %}
-					</div>
-				</div>
-			</div>
-		</div>
+		{% include cards/pricing-card-enterprise.html %}
 	</div>
 </div>

src/pages/settings-plan.html

@@ -0,0 +1,25 @@
+---
+layout: settings
+title: Settings
+---
+
+<div class="card-body">
+	<h2 class="mb-4">Plans</h2>
+
+	<p class="text-muted mb-4">This workspace’s Basic Plan is set to $34 per month and will renew on June 19, 2022.</p>
+
+	<div class="row row-cards">
+		<div class="col-lg-4">
+			{% include cards/pricing-card.html price="0" users=3 category="Free" %}
+		</div>
+		<div class="col-lg-4">
+			{% include cards/pricing-card.html price="49" users=10 category="Premium" features="1100" featured-color="green" %}
+		</div>
+		<div class="col-lg-4">
+			{% include cards/pricing-card.html price="99" category="Enterprise" users=100 features="1110" %}
+		</div>
+		<div class="col-12">
+			{% include cards/pricing-card-enterprise.html %}
+		</div>
+	</div>
+</div>

src/pages/settings.html

@@ -1,27 +1,69 @@
 ---
-layout: default
-title: Settings
+layout: settings
 ---
-{% include layout/headers/page-header-settings.html %}
-<div class="row">
-	 <div class="col-12 col-md-4 px-4">
-		  {% assign items = "Account,Preferences,Privacy Settings, Theme,Audience and visibility,App Development" | split: "," %}
-		  <div class="list-group list-group-transparent mb-3 ml-3">
-				{% for item in items %}
-				<a class="list-group-item list-group-item-action d-flex align-items-center{% if forloop.first %} active{% endif %}"
-					href="#">
-					 {{ item }}
-					 <small class="text-muted ms-auto">{{ forloop.index | random_number: 11, 200 }}</small>
-				</a>
-				{% endfor %}
-		  </div>
-	 </div>
-	 <div class="col-12 col-md-8">
-		  <div class="row">
-				<div class="col-12">
-					 {% include cards/form/layout.html horizontal=true title="Account" %}
-				</div>
-		  </div>
-	 </div>
-</div>
 
+
+<div class="card-body">
+	<h2 class="mb-4">My Account</h2>
+
+	<h3 class="card-title">Profile Details</h3>
+
+	<div class="row align-items-center">
+		<div class="col-auto">{% include ui/avatar.html size="xl" person-id="1" %}</div>
+		<div class="col-auto">{% include ui/button.html text="Change avatar" %}</div>
+		<div class="col-auto">{% include ui/button.html text="Delete avatar" color="danger" ghost=true %}</div>
+	</div>
+
+
+	<h3 class="card-title mt-4">Business Profile</h3>
+
+	<div class="row g-3">
+		<div class="col-md">
+			<div class="form-label">Business Name</div>
+			<input type="text" class="form-control" value="{{ site.data.people[0].company }}">
+		</div>
+		<div class="col-md">
+			<div class="form-label">Business ID</div>
+			<input type="text" class="form-control" value="560afc32">
+		</div>
+		<div class="col-md">
+			<div class="form-label">Location</div>
+			<input type="text" class="form-control"
+			       value="{{ site.data.people[0].city }}, {{ site.data.people[0].country }}">
+		</div>
+	</div>
+
+	<h3 class="card-title mt-4">Email</h3>
+	<p class="card-subtitle">This contact will be shown to others publicly, so choose it carefully.</p>
+
+	<div>
+		<div class="row g-2">
+			<div class="col-auto">
+				<input type="text" class="form-control w-auto" value="{{ site.data.people[0].email }}">
+			</div>
+			<div class="col-auto">{% include ui/button.html text="Change" %}</div>
+		</div>
+	</div>
+
+
+	<h3 class="card-title mt-4">Password</h3>
+	<p class="card-subtitle">You can set a permanent password if you don't want to use temporary login codes.</p>
+	<div>
+		{% include ui/button.html text="Set new password" %}
+	</div>
+
+
+	<h3 class="card-title mt-4">Public profile</h3>
+	<p class="card-subtitle">Making your profile public means that anyone on the Dashkit network will be able to find
+		you.</p>
+	<div>
+		{% include ui/form/check.html switch=true size="lg" title-on="You're currently visible" title-off="You're
+		currently invisible" %}
+	</div>
+</div>
+<div class="card-footer bg-transparent mt-auto">
+	<div class="btn-list justify-content-end">
+		{% include ui/button.html text="Cancel" %}
+		{% include ui/button.html text="Submit" color="primary" %}
+	</div>
+</div>