mirror of
https://github.com/tabler/tabler.git
synced 2026-08-07 20:02:23 +04:00
Migrate preview and docs packages from Eleventy to Astro (#2694)
Co-authored-by: Bartek <xbartoszdobija@gmail.com>
This commit is contained in:
Paweł Kuna
GitHub
@@ -0,0 +1,87 @@
|
||||
---
|
||||
import SingleLayout from '@shared/layouts/SingleLayout.astro';
|
||||
import Button from '@shared/components/Button.astro';
|
||||
import { addPageScript } from '@shared/lib/page-scripts';
|
||||
|
||||
addPageScript(`<script>
|
||||
document.addEventListener("DOMContentLoaded", function() {
|
||||
var inputs = document.querySelectorAll('[data-code-input]');
|
||||
|
||||
// Attach an event listener to each input element
|
||||
for(let i = 0; i < inputs.length; i++) {
|
||||
inputs[i].addEventListener('input', function(e) {
|
||||
// If the input field has a character, and there is a next input field, focus it
|
||||
if(e.target.value.length === e.target.maxLength && i + 1 < inputs.length) {
|
||||
inputs[i + 1].focus();
|
||||
}
|
||||
});
|
||||
|
||||
inputs[i].addEventListener('keydown', function(e) {
|
||||
// If the input field is empty and the keyCode for Backspace (8) is detected, and there is a previous input field, focus it
|
||||
if(e.target.value.length === 0 && e.keyCode === 8 && i > 0) {
|
||||
inputs[i - 1].focus();
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
</script>`);
|
||||
---
|
||||
|
||||
<SingleLayout title="2-Step Verification">
|
||||
<form class="card card-md" action="./" method="get" autocomplete="off" novalidate>
|
||||
<div class="card-body">
|
||||
<h2 class="card-title card-title-lg text-center mb-4">Authenticate Your Account</h2>
|
||||
|
||||
<p class="my-4 text-center">
|
||||
Please confirm your account by entering the authorization code sent to <strong
|
||||
>+1 856-672-8552</strong
|
||||
>.
|
||||
</p>
|
||||
|
||||
<div class="my-5">
|
||||
<div class="row g-4">
|
||||
{
|
||||
Array.from({ length: 2 }).map(() => (
|
||||
<div class="col">
|
||||
<div class="row g-2">
|
||||
{Array.from({ length: 3 }).map(() => (
|
||||
<div class="col">
|
||||
<input
|
||||
type="text"
|
||||
class="form-control form-control-lg text-center px-3 py-3"
|
||||
maxlength="1"
|
||||
inputmode="numeric"
|
||||
pattern="[0-9]*"
|
||||
data-code-input
|
||||
/>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
))
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="my-4">
|
||||
<label class="form-check">
|
||||
<input type="checkbox" class="form-check-input" />
|
||||
Dont't ask for codes again on this device
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div class="form-footer">
|
||||
<div class="btn-list flex-nowrap">
|
||||
<Button text="Cancel" block href="2-step-verification.html" />
|
||||
<Button text="Verify" block color="primary" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
<div class="text-center text-secondary mt-3">
|
||||
It may take a minute to receive your code. Haven't received it? <a href="./"
|
||||
>Resend a new code.</a
|
||||
>
|
||||
</div>
|
||||
</SingleLayout>
|
||||
@@ -1,79 +0,0 @@
|
||||
---
|
||||
title: "2-Step Verification"
|
||||
layout: single
|
||||
permalink: 2-step-verification-code.html
|
||||
---
|
||||
|
||||
<form
|
||||
class="card card-md"
|
||||
action="{{ page | relative }}/"
|
||||
method="get"
|
||||
autocomplete="off"
|
||||
novalidate
|
||||
>
|
||||
<div class="card-body">
|
||||
<h2 class="card-title card-title-lg text-center mb-4">Authenticate Your Account</h2>
|
||||
|
||||
<p class="my-4 text-center">Please confirm your account by entering the authorization code sent to <strong>+1 856-672-8552</strong>.</p>
|
||||
|
||||
<div class="my-5">
|
||||
<div class="row g-4">
|
||||
{% for i in (1..2) %}
|
||||
<div class="col">
|
||||
<div class="row g-2">
|
||||
{% for i in (1..3) %}
|
||||
<div class="col">
|
||||
<input type="text" class="form-control form-control-lg text-center px-3 py-3" maxlength="1" inputmode="numeric" pattern="[0-9]*" data-code-input />
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="my-4">
|
||||
<label class="form-check">
|
||||
<input type="checkbox" class="form-check-input" />
|
||||
Dont't ask for codes again on this device
|
||||
</label>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="form-footer">
|
||||
<div class="btn-list flex-nowrap">
|
||||
{% include "ui/button.html" text="Cancel" block=true href="2-step-verification.html" %}
|
||||
{% include "ui/button.html" text="Verify" block=true color="primary" %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
<div class="text-center text-secondary mt-3">
|
||||
It may take a minute to receive your code. Haven't received it? <a href="{{ page | relative }}/">Resend a new code.</a>
|
||||
</div>
|
||||
|
||||
{% capture_script %}
|
||||
<script>
|
||||
document.addEventListener("DOMContentLoaded", function() {
|
||||
var inputs = document.querySelectorAll('[data-code-input]');
|
||||
|
||||
// Attach an event listener to each input element
|
||||
for(let i = 0; i < inputs.length; i++) {
|
||||
inputs[i].addEventListener('input', function(e) {
|
||||
// If the input field has a character, and there is a next input field, focus it
|
||||
if(e.target.value.length === e.target.maxLength && i + 1 < inputs.length) {
|
||||
inputs[i + 1].focus();
|
||||
}
|
||||
});
|
||||
|
||||
inputs[i].addEventListener('keydown', function(e) {
|
||||
// If the input field is empty and the keyCode for Backspace (8) is detected, and there is a previous input field, focus it
|
||||
if(e.target.value.length === 0 && e.keyCode === 8 && i > 0) {
|
||||
inputs[i - 1].focus();
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
</script>
|
||||
{% endcapture_script %}
|
||||
@@ -0,0 +1,47 @@
|
||||
---
|
||||
import SingleLayout from '@shared/layouts/SingleLayout.astro';
|
||||
import Button from '@shared/components/Button.astro';
|
||||
import flags from '@data/flags.json';
|
||||
|
||||
// Liquid: {% if country.code == 'US' %} selected{% endif %} — flags.json entries
|
||||
// have no `code` property, so the reference renders value="" and never `selected`.
|
||||
// We mirror that output exactly.
|
||||
---
|
||||
|
||||
<SingleLayout title="2-Step Verification">
|
||||
<form
|
||||
class="card card-md"
|
||||
action="./2-step-verification-code.html"
|
||||
method="get"
|
||||
autocomplete="off"
|
||||
novalidate
|
||||
>
|
||||
<div class="card-body">
|
||||
<h2 class="card-title text-center mb-4">2-Step Verification</h2>
|
||||
|
||||
<div class="mb-3">
|
||||
<label class="form-label">Country</label>
|
||||
<select class="form-select">
|
||||
{flags.map((country) => <option value="">{country.name}</option>)}
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div class="mb-4">
|
||||
<label class="form-label">Your Phone Number</label>
|
||||
<div class="input-group">
|
||||
<span class="input-group-text">+1</span>
|
||||
<input type="text" class="form-control" placeholder="Enter phone number" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="text-secondary">
|
||||
Security is critical in Tabler. to help keep your account safe, we'll
|
||||
text you a verification code when you sign in on a new device
|
||||
</div>
|
||||
|
||||
<div class="form-footer">
|
||||
<Button element="button" type="submit" text="Send code" block color="primary" />
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</SingleLayout>
|
||||
@@ -1,43 +0,0 @@
|
||||
---
|
||||
title: 2-Step Verification
|
||||
layout: single
|
||||
permalink: 2-step-verification.html
|
||||
---
|
||||
|
||||
<form
|
||||
class="card card-md"
|
||||
action="{{ page | relative }}/2-step-verification-code.html"
|
||||
method="get"
|
||||
autocomplete="off"
|
||||
novalidate
|
||||
>
|
||||
<div class="card-body">
|
||||
<h2 class="card-title text-center mb-4">2-Step Verification</h2>
|
||||
|
||||
<div class="mb-3">
|
||||
<label class="form-label">Country</label>
|
||||
<select class="form-select">
|
||||
{% for country in flags %}
|
||||
<option value="{{ country.code }}"{% if country.code == 'US' %} selected{% endif %}>{{ country.name }}</option>
|
||||
{% endfor %}
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div class="mb-4">
|
||||
<label class="form-label">Your Phone Number</label>
|
||||
<div class="input-group">
|
||||
<span class="input-group-text">+1</span>
|
||||
<input type="text" class="form-control" placeholder="Enter phone number" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="text-secondary">
|
||||
Security is critical in Tabler. to help keep your account safe, we'll
|
||||
text you a verification code when you sign in on a new device
|
||||
</div>
|
||||
|
||||
<div class="form-footer">
|
||||
{% include "ui/button.html" element="button" type="submit" text="Send code" block=true color="primary" %}
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
@@ -0,0 +1,50 @@
|
||||
---
|
||||
// Port of preview/pages/accordion.html (layout: default)
|
||||
import DefaultLayout from '@shared/layouts/DefaultLayout.astro';
|
||||
import Accordion from '@shared/components/ui/Accordion.astro';
|
||||
---
|
||||
|
||||
<DefaultLayout title="Accordion" pageHeader="Accordion" pageMenu="base.accordion">
|
||||
<div class="row row-cards">
|
||||
<div class="col-md-6">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<Accordion />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<div class="card">
|
||||
<Accordion type="flush" id="flush" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<Accordion type="tabs" id="tabs" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<Accordion type="inverted" id="inverted" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<Accordion id="inverted-plus" type="inverted,plus" toggleIcon="plus" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<Accordion id="icons" showIcon />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</DefaultLayout>
|
||||
@@ -1,50 +0,0 @@
|
||||
---
|
||||
title: Accordion
|
||||
page-header: Accordion
|
||||
page-menu: base.accordion
|
||||
layout: default
|
||||
permalink: accordion.html
|
||||
---
|
||||
|
||||
<div class="row row-cards">
|
||||
<div class="col-md-6">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
{% include "ui/accordion.html" %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<div class="card">
|
||||
{% include "ui/accordion.html" type="flush" id="flush" %}
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
{% include "ui/accordion.html" type="tabs" id="tabs" %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
{% include "ui/accordion.html" type="inverted" id="inverted" %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
{% include "ui/accordion.html" id="inverted-plus" type="inverted,plus" toggle-icon="plus" %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
{% include "ui/accordion.html" id="icons" show-icon %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -0,0 +1,17 @@
|
||||
---
|
||||
// Port of preview/pages/activity.html (layout: default)
|
||||
import DefaultLayout from '@shared/layouts/DefaultLayout.astro';
|
||||
import ActivityPart from '@shared/components/ui/ActivityPart.astro';
|
||||
---
|
||||
|
||||
<DefaultLayout title="Activity" pageHeader="Activity" pageMenu="extra.activity">
|
||||
<div class="row">
|
||||
<div class="col-8">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<ActivityPart />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</DefaultLayout>
|
||||
@@ -1,17 +0,0 @@
|
||||
---
|
||||
title: Activity
|
||||
page-header: Activity
|
||||
page-menu: extra.activity
|
||||
layout: default
|
||||
permalink: activity.html
|
||||
---
|
||||
|
||||
<div class="row">
|
||||
<div class="col-8">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
{% include "parts/activity.html" %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -0,0 +1,108 @@
|
||||
---
|
||||
// Port of preview/pages/alerts.html (layout: default)
|
||||
import DefaultLayout from '@shared/layouts/DefaultLayout.astro';
|
||||
import Alert from '@shared/components/Alert.astro';
|
||||
---
|
||||
|
||||
<DefaultLayout title="Alerts" pageHeader="Alerts" pageMenu="base.alerts">
|
||||
<div class="row row-cards">
|
||||
<div class="col-lg-6">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<h2 class="card-title">Basic alerts</h2>
|
||||
<Alert type="danger" title="An error occurred!" />
|
||||
<Alert type="warning" title="Some information is missing!" />
|
||||
<Alert type="success" title="Completed successfully!" />
|
||||
<Alert type="info" title="Just a quick note!" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-6">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<h2 class="card-title">Alerts with action</h2>
|
||||
<Alert showClose action="Link" type="danger" title="An error occurred!" />
|
||||
<Alert showClose action="Link" type="warning" title="Some information is missing!" />
|
||||
<Alert showClose action="Link" type="success" title="Completed successfully!" />
|
||||
<Alert showClose action="Link" type="info" title="Just a quick note!" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-6">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<h2 class="card-title">Dismissible alerts</h2>
|
||||
<Alert showClose type="danger" title="An error occurred!" />
|
||||
<Alert showClose type="warning" title="Some information is missing!" />
|
||||
<Alert showClose type="success" title="Completed successfully!" />
|
||||
<Alert showClose type="info" title="Just a quick note!" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-6">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<h2 class="card-title">Alert with a description</h2>
|
||||
<Alert
|
||||
showClose
|
||||
type="danger"
|
||||
title="Password does not meet requirements:"
|
||||
list="Minimum 8 characters,Include a special character"
|
||||
/>
|
||||
<Alert
|
||||
showClose
|
||||
type="warning"
|
||||
title="Some information is missing!"
|
||||
description="This is a custom alert box with a description."
|
||||
/>
|
||||
<Alert
|
||||
showClose
|
||||
type="success"
|
||||
title="Completed successfully!"
|
||||
description="This is a custom alert box with a description."
|
||||
/>
|
||||
<Alert
|
||||
showClose
|
||||
type="info"
|
||||
title="Just a quick note!"
|
||||
description="This is a custom alert box with a description."
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-6">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<h2 class="card-title">Important alerts</h2>
|
||||
<Alert
|
||||
showClose
|
||||
important
|
||||
type="danger"
|
||||
title="Password does not meet requirements:"
|
||||
list="Minimum 8 characters,Include a special character"
|
||||
/>
|
||||
<Alert showClose important type="success" description="This is a custom alert box with a description." />
|
||||
<Alert showClose important type="warning" description="This is a custom alert box with a description." />
|
||||
<Alert showClose important type="info" description="This is a custom alert box with a description." />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-6">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<h2 class="card-title">Minor alerts</h2>
|
||||
<Alert
|
||||
showClose
|
||||
minor
|
||||
type="danger"
|
||||
title="Password does not meet requirements:"
|
||||
list="Minimum 8 characters,Include a special character"
|
||||
/>
|
||||
<Alert showClose minor type="success" description="This is a custom alert box with a description." />
|
||||
<Alert showClose minor type="warning" description="This is a custom alert box with a description." />
|
||||
<Alert showClose minor type="info" description="This is a custom alert box with a description." />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</DefaultLayout>
|
||||
@@ -1,76 +0,0 @@
|
||||
---
|
||||
title: Alerts
|
||||
page-menu: base.alerts
|
||||
page-header: Alerts
|
||||
layout: default
|
||||
permalink: alerts.html
|
||||
---
|
||||
|
||||
<div class="row row-cards">
|
||||
<div class="col-lg-6">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<h2 class="card-title">Basic alerts</h2>
|
||||
{% include "ui/alert.html" type="danger" title="An error occurred!" %}
|
||||
{% include "ui/alert.html" type="warning" title="Some information is missing!" %}
|
||||
{% include "ui/alert.html" type="success" title="Completed successfully!" %}
|
||||
{% include "ui/alert.html" type="info" title="Just a quick note!" %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-6">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<h2 class="card-title">Alerts with action</h2>
|
||||
{% include "ui/alert.html" show-close action="Link" type="danger" title="An error occurred!" %}
|
||||
{% include "ui/alert.html" show-close action="Link" type="warning" title="Some information is missing!" %}
|
||||
{% include "ui/alert.html" show-close action="Link" type="success" title="Completed successfully!" %}
|
||||
{% include "ui/alert.html" show-close action="Link" type="info" title="Just a quick note!" %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-6">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<h2 class="card-title">Dismissible alerts</h2>
|
||||
{% include "ui/alert.html" show-close type="danger" title="An error occurred!" %}
|
||||
{% include "ui/alert.html" show-close type="warning" title="Some information is missing!" %}
|
||||
{% include "ui/alert.html" show-close type="success" title="Completed successfully!" %}
|
||||
{% include "ui/alert.html" show-close type="info" title="Just a quick note!" %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-6">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<h2 class="card-title">Alert with a description</h2>
|
||||
{% include "ui/alert.html" show-close type="danger" title="Password does not meet requirements:" list="Minimum 8 characters,Include a special character" %}
|
||||
{% include "ui/alert.html" show-close type="warning" title="Some information is missing!" description="This is a custom alert box with a description." %}
|
||||
{% include "ui/alert.html" show-close type="success" title="Completed successfully!" description="This is a custom alert box with a description." %}
|
||||
{% include "ui/alert.html" show-close type="info" title="Just a quick note!" description="This is a custom alert box with a description." %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-6">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<h2 class="card-title">Important alerts</h2>
|
||||
{% include "ui/alert.html" show-close important=true type="danger" title="Password does not meet requirements:" list="Minimum 8 characters,Include a special character" %}
|
||||
{% include "ui/alert.html" show-close important=true type="success" description="This is a custom alert box with a description." %}
|
||||
{% include "ui/alert.html" show-close important=true type="warning" description="This is a custom alert box with a description." %}
|
||||
{% include "ui/alert.html" show-close important=true type="info" description="This is a custom alert box with a description." %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-6">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<h2 class="card-title">Minor alerts</h2>
|
||||
{% include "ui/alert.html" show-close minor=true type="danger" title="Password does not meet requirements:" list="Minimum 8 characters,Include a special character" %}
|
||||
{% include "ui/alert.html" show-close minor=true type="success" description="This is a custom alert box with a description." %}
|
||||
{% include "ui/alert.html" show-close minor=true type="warning" description="This is a custom alert box with a description." %}
|
||||
{% include "ui/alert.html" show-close minor=true type="info" description="This is a custom alert box with a description." %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -0,0 +1,925 @@
|
||||
---
|
||||
// Port of preview/pages/all-elements.html — a kitchen-sink of every component.
|
||||
import DefaultLayout from '@shared/layouts/DefaultLayout.astro';
|
||||
import Button from '@shared/components/Button.astro';
|
||||
import Alert from '@shared/components/Alert.astro';
|
||||
import Badge from '@shared/components/ui/Badge.astro';
|
||||
import Progress from '@shared/components/ui/Progress.astro';
|
||||
import Select from '@shared/components/ui/Select.astro';
|
||||
import Check from '@shared/components/ui/form/Check.astro';
|
||||
import Nav from '@shared/components/ui/Nav.astro';
|
||||
import Breadcrumb from '@shared/components/ui/Breadcrumb.astro';
|
||||
import Pagination from '@shared/components/ui/Pagination.astro';
|
||||
import Avatar from '@shared/components/ui/Avatar.astro';
|
||||
import Icon from '@shared/components/Icon.astro';
|
||||
import Dropdown from '@shared/components/ui/Dropdown.astro';
|
||||
import Accordion from '@shared/components/ui/Accordion.astro';
|
||||
import Spinner from '@shared/components/ui/Spinner.astro';
|
||||
import Rating from '@shared/components/ui/Rating.astro';
|
||||
import Steps from '@shared/components/ui/Steps.astro';
|
||||
import StatusDot from '@shared/components/ui/StatusDot.astro';
|
||||
import Toast from '@shared/components/ui/Toast.astro';
|
||||
import InputIcon from '@shared/components/ui/form/InputIcon.astro';
|
||||
import InputGroup from '@shared/components/InputGroup.astro';
|
||||
import Range from '@shared/components/ui/Range.astro';
|
||||
import Tag from '@shared/components/ui/Tag.astro';
|
||||
import Ribbon from '@shared/components/ui/Ribbon.astro';
|
||||
import Flag from '@shared/components/ui/Flag.astro';
|
||||
import Payment from '@shared/components/ui/Payment.astro';
|
||||
import Timeline from '@shared/components/ui/Timeline.astro';
|
||||
import Empty from '@shared/components/ui/Empty.astro';
|
||||
import NavSegmented from '@shared/components/ui/NavSegmented.astro';
|
||||
|
||||
// Code-block content lives in the frontmatter so Astro does not try to evaluate
|
||||
// its `${name}` / `{ }` as expressions; injected verbatim via set:html.
|
||||
const codeExample = `// JavaScript example
|
||||
function greetUser(name) {
|
||||
console.log(\`Hello, \${name}!\`);
|
||||
return true;
|
||||
}`;
|
||||
---
|
||||
|
||||
<DefaultLayout
|
||||
title="All Elements - Kitchen Sink"
|
||||
pageHeader="All Elements"
|
||||
pageMenu="base.all-elements"
|
||||
pageLibs={['nouislider', 'star-rating.js', 'tabler-flags', 'tabler-payments', 'tom-select']}
|
||||
>
|
||||
<div class="row row-cards">
|
||||
<!-- Typography Section -->
|
||||
<div class="col-12">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h3 class="card-title">Typography</h3>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="row">
|
||||
<div class="col-md-6">
|
||||
<h1>Heading 1</h1>
|
||||
<h2>Heading 2</h2>
|
||||
<h3>Heading 3</h3>
|
||||
<h4>Heading 4</h4>
|
||||
<h5>Heading 5</h5>
|
||||
<h6>Heading 6</h6>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<p class="lead">This is a lead paragraph with larger text.</p>
|
||||
<p>This is a regular paragraph with <strong>bold text</strong>, <em>italic text</em>, and
|
||||
<u>underlined text</u>.</p>
|
||||
<p><small class="text-muted">This is small muted text.</small></p>
|
||||
<p class="text-primary">Primary text color</p>
|
||||
<p class="text-success">Success text color</p>
|
||||
<p class="text-danger">Danger text color</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Buttons Section -->
|
||||
<div class="col-12">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h3 class="card-title">Buttons</h3>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="row">
|
||||
<div class="col-md-6">
|
||||
<h4>Standard Buttons</h4>
|
||||
<div class="btn-list mb-3">
|
||||
<Button text="Default" />
|
||||
<Button text="Primary" color="primary" icon="star" />
|
||||
<Button text="Secondary" color="secondary" />
|
||||
<Button text="Success" color="success" icon="check" />
|
||||
<Button text="Warning" color="warning" />
|
||||
<Button text="Danger" color="danger" icon="x" />
|
||||
<Button text="Info" color="info" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<h4>Button Sizes</h4>
|
||||
<div class="btn-list mb-3 align-items-start">
|
||||
<Button text="Small" size="sm" />
|
||||
<Button text="Default" />
|
||||
<Button text="Large" size="lg" />
|
||||
</div>
|
||||
|
||||
<h4>Icon Buttons</h4>
|
||||
<div class="btn-list mb-3 align-items-start">
|
||||
<Button icon="heart" iconOnly />
|
||||
<Button icon="star" iconOnly />
|
||||
<Button icon="check" iconOnly />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Cards Section -->
|
||||
<div class="col-md-6">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h3 class="card-title">Simple Card</h3>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<p>This is a simple card with header and body content.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-md-6">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h3 class="card-title">Card with Footer</h3>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<p>This card includes a footer section.</p>
|
||||
</div>
|
||||
<div class="card-footer">
|
||||
<div class="d-flex">
|
||||
<a class="btn btn-link">Cancel</a>
|
||||
<a class="btn btn-primary ms-auto">Save</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Alerts Section -->
|
||||
<div class="col-12">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h3 class="card-title">Alerts</h3>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<Alert type="info" title="This is a primary alert with an icon." />
|
||||
<Alert type="success" title="This is a success alert message." />
|
||||
<Alert type="warning" title="This is a warning alert message." />
|
||||
<Alert type="danger" title="This is a danger alert message." />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Badges Section -->
|
||||
<div class="col-md-6">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h3 class="card-title">Badges</h3>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="space-y">
|
||||
<div>
|
||||
<Badge text="Default" />
|
||||
<Badge text="Primary" color="primary" />
|
||||
<Badge text="Secondary" color="secondary" />
|
||||
<Badge text="Success" color="success" />
|
||||
<Badge text="Warning" color="warning" />
|
||||
<Badge text="Danger" color="danger" />
|
||||
</div>
|
||||
<div>
|
||||
<Badge text="With Icon" color="primary" icon="star" />
|
||||
<Badge text="Light Badge" color="primary" light />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Progress Bars Section -->
|
||||
<div class="col-md-6">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h3 class="card-title">Progress Bars</h3>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="space-y">
|
||||
<div>
|
||||
<Progress value="25" />
|
||||
</div>
|
||||
<div>
|
||||
<Progress value="50" color="success" />
|
||||
</div>
|
||||
<div>
|
||||
<Progress value="75" color="warning" />
|
||||
</div>
|
||||
<div>
|
||||
<Progress value="90" color="danger" showValue />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Form Elements Section -->
|
||||
<div class="col-12">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h3 class="card-title">Form Elements</h3>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="row">
|
||||
<div class="col-md-6">
|
||||
<div class="mb-3">
|
||||
<label class="form-label">Text Input</label>
|
||||
<input type="text" class="form-control" placeholder="Enter text">
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<label class="form-label">Email Input</label>
|
||||
<input type="email" class="form-control" placeholder="Enter email">
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<label class="form-label">Password Input</label>
|
||||
<input type="password" class="form-control" placeholder="Enter password">
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<label class="form-label">Select Dropdown</label>
|
||||
<Select id="demo-select" values="Option 1,Option 2,Option 3" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<div class="mb-3">
|
||||
<label class="form-label">Textarea</label>
|
||||
<textarea class="form-control" rows="3" placeholder="Enter message"></textarea>
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<label class="form-label">Checkboxes</label>
|
||||
<Check title="Option 1" type="checkbox" />
|
||||
<Check title="Option 2" type="checkbox" checked />
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<label class="form-label">Radio Buttons</label>
|
||||
<Check title="Option 1" type="radio" name="radio-demo" />
|
||||
<Check title="Option 2" type="radio" name="radio-demo" checked />
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<label class="form-label">Switch</label>
|
||||
<Check title="Enable notifications" switch />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Navigation Elements -->
|
||||
<div class="col-12">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h3 class="card-title">Navigation Elements</h3>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="row">
|
||||
<div class="col-md-6">
|
||||
<h4>Tabs</h4>
|
||||
<div class="mb-3">
|
||||
<Nav tabs class="mb-4" />
|
||||
</div>
|
||||
|
||||
<h4>Pills Navigation</h4>
|
||||
<div class="mb-3">
|
||||
<Nav pills class="mb-4" />
|
||||
</div>
|
||||
|
||||
<h4>Breadcrumb</h4>
|
||||
<Breadcrumb pages="Home,Library,Data" homeIcon />
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<h4>Pagination</h4>
|
||||
{/* active-item="2" is a STRING in Liquid; `i == "2"` never matches the
|
||||
integer index, so no page renders active — reproduced by passing a string. */}
|
||||
<Pagination count={5} activeItem="2" class="mb-4" />
|
||||
|
||||
<h4>Pagination with Text</h4>
|
||||
<Pagination count={3} text />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Lists Section -->
|
||||
<div class="col-md-6">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h3 class="card-title">Lists</h3>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<h4>Unordered List</h4>
|
||||
<ul>
|
||||
<li>First item</li>
|
||||
<li>Second item</li>
|
||||
<li>Third item</li>
|
||||
</ul>
|
||||
|
||||
<h4>Ordered List</h4>
|
||||
<ol>
|
||||
<li>First item</li>
|
||||
<li>Second item</li>
|
||||
<li>Third item</li>
|
||||
</ol>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Table Section -->
|
||||
<div class="col-md-6">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h3 class="card-title">Table</h3>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="table-responsive">
|
||||
<table class="table table-vcenter">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Name</th>
|
||||
<th>Email</th>
|
||||
<th>Status</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>John Doe</td>
|
||||
<td>john@example.com</td>
|
||||
<td><Badge text="Active" color="success" /></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Jane Smith</td>
|
||||
<td>jane@example.com</td>
|
||||
<td><Badge text="Pending" color="warning" /></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Bob Johnson</td>
|
||||
<td>bob@example.com</td>
|
||||
<td><Badge text="Inactive" color="danger" /></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Avatars Section -->
|
||||
<div class="col-md-6">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h3 class="card-title">Avatars</h3>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="space-y">
|
||||
<div>
|
||||
<Avatar placeholder="JD" size="sm" />
|
||||
<Avatar placeholder="JS" />
|
||||
<Avatar placeholder="BJ" size="lg" />
|
||||
<Avatar placeholder="AB" size="xl" />
|
||||
</div>
|
||||
<div>
|
||||
<Avatar placeholder="RD" shape="avatar-rounded" />
|
||||
<Avatar placeholder="PR" color="primary" shape="avatar-rounded" />
|
||||
<Avatar placeholder="SC" color="success" shape="avatar-rounded" />
|
||||
</div>
|
||||
<div>
|
||||
<Avatar icon="user" />
|
||||
<Avatar icon="star" color="warning" />
|
||||
<Avatar placeholder="ST" status="success" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Icons Section -->
|
||||
<div class="col-md-6">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h3 class="card-title">Icons</h3>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="space-y">
|
||||
<div>
|
||||
<Icon name="home" />
|
||||
<Icon name="user" />
|
||||
<Icon name="settings" />
|
||||
<Icon name="heart" />
|
||||
<Icon name="star" />
|
||||
<Icon name="bell" />
|
||||
<Icon name="mail" />
|
||||
<Icon name="phone" />
|
||||
<Icon name="calendar" />
|
||||
<Icon name="clock" />
|
||||
<Icon name="map-pin" />
|
||||
<Icon name="camera" />
|
||||
<Icon name="plus" />
|
||||
<Icon name="minus" />
|
||||
<Icon name="edit" />
|
||||
<Icon name="trash" />
|
||||
<Icon name="download" />
|
||||
<Icon name="upload" />
|
||||
<Icon name="search" />
|
||||
<Icon name="filter" />
|
||||
<Icon name="refresh" />
|
||||
<Icon name="share" />
|
||||
<Icon name="copy" />
|
||||
<Icon name="external-link" />
|
||||
</div>
|
||||
<div>
|
||||
<span class="text-primary"><Icon name="check" /></span>
|
||||
<span class="text-success"><Icon name="circle-check" /></span>
|
||||
<span class="text-warning"><Icon name="alert-triangle" /></span>
|
||||
<span class="text-danger"><Icon name="alert-circle" /></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Dropdowns Section -->
|
||||
<div class="col-12">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h3 class="card-title">Dropdowns</h3>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="btn-list">
|
||||
<Dropdown mainBtn="Primary Dropdown" options="Action, Another action, Something else here" />
|
||||
<Dropdown mainBtn="Secondary Dropdown" options="Edit, Copy, Delete" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Interactive Elements Section -->
|
||||
<div class="col-12">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h3 class="card-title">Interactive Elements</h3>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="row">
|
||||
<div class="col-md-6">
|
||||
<h4>Accordion</h4>
|
||||
<div class="mb-4">
|
||||
<Accordion count={3} id="demo-accordion" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<h4>Spinners</h4>
|
||||
<div class="mb-3">
|
||||
<div class="d-flex flex-wrap gap-2">
|
||||
<Spinner type="border" color="primary" />
|
||||
<Spinner type="border" color="success" size="sm" />
|
||||
<Spinner type="grow" color="warning" />
|
||||
<Spinner type="grow" color="danger" size="sm" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h4>Rating</h4>
|
||||
<div class="mb-3">
|
||||
<Rating id="demo-rating" value="4" />
|
||||
</div>
|
||||
|
||||
<h4>Steps</h4>
|
||||
<div class="mb-3">
|
||||
<Steps count={4} active="2" />
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<Steps count={4} active="3" numbers />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Status & Feedback Elements -->
|
||||
<div class="col-md-6">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h3 class="card-title">Status Elements</h3>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<h4>Status Dots</h4>
|
||||
<div class="mb-3">
|
||||
<StatusDot color="success" />
|
||||
<StatusDot color="warning" />
|
||||
<StatusDot color="danger" />
|
||||
<StatusDot color="info" animated />
|
||||
</div>
|
||||
|
||||
<h4>Toast Notifications</h4>
|
||||
<div class="mb-3">
|
||||
<Toast toastId="demo-toast" show text="This is a sample toast message!" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Enhanced Form Elements -->
|
||||
<div class="col-md-6">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h3 class="card-title">Enhanced Forms</h3>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<h4>Input with Icons</h4>
|
||||
<div class="mb-3">
|
||||
<InputIcon placeholder="Search..." icon="search" />
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<InputIcon placeholder="Loading..." loader />
|
||||
</div>
|
||||
|
||||
<h4>Input Groups</h4>
|
||||
<div class="mb-3">
|
||||
<InputGroup prepend="@" placeholder="Username" />
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<InputGroup append=".00" prepend="$" placeholder="Price" />
|
||||
</div>
|
||||
|
||||
<h4>Range Slider</h4>
|
||||
<div class="mb-3">
|
||||
<Range id="demo-range" min={0} max={100} value="50" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Tags & Labels -->
|
||||
<div class="col-md-6">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h3 class="card-title">Tags & Labels</h3>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<h4>Tags</h4>
|
||||
<div class="mb-3">
|
||||
<Tag text="Primary Tag" icon="star" />
|
||||
<Tag text="Success Tag" status="success" />
|
||||
<Tag text="Warning Tag" status="warning" />
|
||||
</div>
|
||||
|
||||
<h4>Ribbons</h4>
|
||||
<div class="position-relative mb-4" style="height: 100px; background: #f8f9fa; border-radius: 8px;">
|
||||
<Ribbon text="New" color="success" />
|
||||
</div>
|
||||
<div class="position-relative mb-3" style="height: 100px; background: #f8f9fa; border-radius: 8px;">
|
||||
<Ribbon text="Sale" color="danger" top />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Media Elements -->
|
||||
<div class="col-md-6">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h3 class="card-title">Media Elements</h3>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<h4>Flags</h4>
|
||||
<div class="mb-3">
|
||||
<div class="d-flex flex-wrap gap-2">
|
||||
<Flag flag="us" />
|
||||
<Flag flag="gb" />
|
||||
<Flag flag="de" />
|
||||
<Flag flag="fr" />
|
||||
<Flag flag="pl" />
|
||||
<Flag flag="es" />
|
||||
<Flag flag="it" />
|
||||
<Flag flag="nl" />
|
||||
<Flag flag="ca" />
|
||||
<Flag flag="au" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h4>Payment Icons</h4>
|
||||
<div class="mb-3">
|
||||
<div class="d-flex flex-wrap gap-2">
|
||||
<Payment payment="visa" />
|
||||
<Payment payment="mastercard" />
|
||||
<Payment payment="paypal" />
|
||||
<Payment payment="americanexpress" />
|
||||
<Payment payment="applepay" />
|
||||
<Payment payment="google-pay" />
|
||||
<Payment payment="stripe" />
|
||||
<Payment payment="discover" />
|
||||
<Payment payment="jcb" />
|
||||
<Payment payment="maestro" />
|
||||
<Payment payment="dinersclub" />
|
||||
<Payment payment="bitcoin" />
|
||||
<Payment payment="ethereum" />
|
||||
<Payment payment="klarna" />
|
||||
<Payment payment="venmo" />
|
||||
<Payment payment="square" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Timeline Section -->
|
||||
<div class="col-md-6">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h3 class="card-title">Timeline</h3>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<Timeline />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Empty State Section -->
|
||||
<div class="col-md-6">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h3 class="card-title">Empty State</h3>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<Empty
|
||||
title="No data found"
|
||||
subtitle="Try adjusting your search or filter to find what you're looking for."
|
||||
illustration="boy-girl.svg"
|
||||
buttonText="Add new item"
|
||||
buttonIcon="plus"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Modal Section -->
|
||||
<div class="col-12">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h3 class="card-title">Modals</h3>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="btn-list">
|
||||
<button class="btn" data-bs-toggle="modal" data-bs-target="#modal-demo">
|
||||
Open Modal
|
||||
</button>
|
||||
<button class="btn" data-bs-toggle="modal" data-bs-target="#modal-success">
|
||||
Success Modal
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- Demo Modal -->
|
||||
<div class="modal modal-blur fade" id="modal-demo" tabindex="-1" role="dialog" aria-hidden="true">
|
||||
<div class="modal-dialog modal-dialog-centered" role="document">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h5 class="modal-title">Modal Title</h5>
|
||||
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<p>This is a sample modal dialog. You can put any content here.</p>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button type="button" class="btn" data-bs-dismiss="modal">Cancel</button>
|
||||
<button type="button" class="btn btn-primary">Save changes</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Success Modal -->
|
||||
<div class="modal modal-blur fade" id="modal-success" tabindex="-1" role="dialog" aria-hidden="true">
|
||||
<div class="modal-dialog modal-sm modal-dialog-centered" role="document">
|
||||
<div class="modal-content">
|
||||
<div class="modal-body text-center py-4">
|
||||
<Icon name="circle-check" color="success" size="xl" class="mb-2" />
|
||||
<h3>Success!</h3>
|
||||
<div class="text-secondary">Your action was completed successfully.</div>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<div class="w-100">
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<button class="btn w-100" data-bs-dismiss="modal">Cancel</button>
|
||||
</div>
|
||||
<div class="col">
|
||||
<button class="btn btn-success w-100" data-bs-dismiss="modal">OK</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Button Groups Section -->
|
||||
<div class="col-md-6">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h3 class="card-title">Button Groups</h3>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<h4>Basic Button Group</h4>
|
||||
<div class="btn-group mb-3" role="group">
|
||||
<button type="button" class="btn">Left</button>
|
||||
<button type="button" class="btn">Middle</button>
|
||||
<button type="button" class="btn">Right</button>
|
||||
</div>
|
||||
|
||||
<h4>Button Toolbar</h4>
|
||||
<div class="btn-toolbar mb-3" role="toolbar">
|
||||
<div class="btn-group me-2" role="group">
|
||||
<button type="button" class="btn">1</button>
|
||||
<button type="button" class="btn">2</button>
|
||||
<button type="button" class="btn">3</button>
|
||||
</div>
|
||||
<div class="btn-group" role="group">
|
||||
<button type="button" class="btn">4</button>
|
||||
<button type="button" class="btn">5</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h4>Vertical Button Group</h4>
|
||||
<div class="btn-group-vertical" role="group">
|
||||
<button type="button" class="btn">Top</button>
|
||||
<button type="button" class="btn">Middle</button>
|
||||
<button type="button" class="btn">Bottom</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Segmented Navigation Section -->
|
||||
<div class="col-md-6">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h3 class="card-title">Segmented Navigation</h3>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<h4>Basic Segmented</h4>
|
||||
<div class="mb-3">
|
||||
<NavSegmented items="Home,Profile,Settings" />
|
||||
</div>
|
||||
|
||||
<h4>With Icons</h4>
|
||||
<div class="mb-3">
|
||||
<NavSegmented icons="home,user,settings" />
|
||||
</div>
|
||||
|
||||
<h4>With Emojis</h4>
|
||||
<div class="mb-3">
|
||||
<NavSegmented items="👦,👦🏿,👦🏾,👦🏽,👦🏼,👦🏻" />
|
||||
</div>
|
||||
|
||||
<h4>With Icons and Text</h4>
|
||||
<div class="mb-3">
|
||||
<NavSegmented items="Home,Profile,Settings" icons="home,user,settings" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Collapse Section -->
|
||||
<div class="col-12">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h3 class="card-title">Collapse</h3>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="row">
|
||||
<div class="col-md-6">
|
||||
<h4>Basic Collapse</h4>
|
||||
<button class="btn" type="button" data-bs-toggle="collapse" data-bs-target="#collapseExample">
|
||||
Toggle Collapse
|
||||
</button>
|
||||
<div class="collapse" id="collapseExample">
|
||||
<div class="card card-body">
|
||||
This is collapsed content that can be toggled. It's hidden by default and shown when the button is clicked.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<h4>Multiple Targets</h4>
|
||||
<div class="btn-list">
|
||||
<button class="btn" type="button" data-bs-toggle="collapse" data-bs-target="#multiCollapseExample1">
|
||||
Toggle First
|
||||
</button>
|
||||
<button class="btn" type="button" data-bs-toggle="collapse" data-bs-target="#multiCollapseExample2">
|
||||
Toggle Second
|
||||
</button>
|
||||
</div>
|
||||
<div class="collapse" id="multiCollapseExample1">
|
||||
<div class="card card-body mb-2">
|
||||
First collapsible content.
|
||||
</div>
|
||||
</div>
|
||||
<div class="collapse" id="multiCollapseExample2">
|
||||
<div class="card card-body">
|
||||
Second collapsible content.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Tooltips & Popovers Section -->
|
||||
<div class="col-12">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h3 class="card-title">Tooltips & Popovers</h3>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="row">
|
||||
<div class="col-md-6">
|
||||
<h4>Tooltips</h4>
|
||||
<div class="btn-list">
|
||||
<button class="btn" data-bs-toggle="tooltip" data-bs-placement="top" title="Tooltip on top">
|
||||
Top
|
||||
</button>
|
||||
<button class="btn" data-bs-toggle="tooltip" data-bs-placement="right" title="Tooltip on right">
|
||||
Right
|
||||
</button>
|
||||
<button class="btn" data-bs-toggle="tooltip" data-bs-placement="bottom" title="Tooltip on bottom">
|
||||
Bottom
|
||||
</button>
|
||||
<button class="btn" data-bs-toggle="tooltip" data-bs-placement="left" title="Tooltip on left">
|
||||
Left
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<h4>Popovers</h4>
|
||||
<div class="btn-list">
|
||||
<button class="btn" data-bs-toggle="popover" data-bs-placement="top" title="Popover Title" data-bs-content="This is popover content on top">
|
||||
Top Popover
|
||||
</button>
|
||||
<button class="btn" data-bs-toggle="popover" data-bs-placement="right" title="Popover Title" data-bs-content="This is popover content on right">
|
||||
Right Popover
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- List Groups Section -->
|
||||
<div class="col-md-6">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h3 class="card-title">List Groups</h3>
|
||||
</div>
|
||||
<div class="card-body p-0">
|
||||
<div class="list-group list-group-flush">
|
||||
<div class="list-group-item">
|
||||
<Icon name="home" class="me-2" />
|
||||
Home
|
||||
</div>
|
||||
<div class="list-group-item active">
|
||||
<Icon name="star" class="me-2" />
|
||||
Active item
|
||||
</div>
|
||||
<div class="list-group-item">
|
||||
<Icon name="settings" class="me-2" />
|
||||
Settings
|
||||
</div>
|
||||
<div class="list-group-item">
|
||||
<Icon name="user" class="me-2" />
|
||||
Profile
|
||||
</div>
|
||||
<div class="list-group-item disabled">
|
||||
<Icon name="lock" class="me-2" />
|
||||
Disabled item
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Content Elements Section -->
|
||||
<div class="col-md-6">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h3 class="card-title">Content Elements</h3>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<h4>Blockquote</h4>
|
||||
<blockquote class="blockquote mb-4">
|
||||
<p>This is a blockquote example with some sample text to demonstrate the styling.</p>
|
||||
<footer class="blockquote-footer">
|
||||
Someone famous in <cite title="Source Title">Source Title</cite>
|
||||
</footer>
|
||||
</blockquote>
|
||||
|
||||
<h4>Code Block</h4>
|
||||
<pre class="mb-3"><code set:html={codeExample}></code></pre>
|
||||
|
||||
<h4>Inline Elements</h4>
|
||||
<p>This paragraph contains <code>inline code</code>, <kbd>Ctrl + S</kbd> keyboard shortcut, and <mark>highlighted text</mark>.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</DefaultLayout>
|
||||
@@ -1,884 +0,0 @@
|
||||
---
|
||||
title: All Elements - Kitchen Sink
|
||||
page-header: All Elements
|
||||
page-menu: base.all-elements
|
||||
page-libs: [nouislider, star-rating.js, tabler-flags, tabler-payments, tom-select]
|
||||
layout: default
|
||||
permalink: all-elements.html
|
||||
---
|
||||
|
||||
<div class="row row-cards">
|
||||
<!-- Typography Section -->
|
||||
<div class="col-12">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h3 class="card-title">Typography</h3>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="row">
|
||||
<div class="col-md-6">
|
||||
<h1>Heading 1</h1>
|
||||
<h2>Heading 2</h2>
|
||||
<h3>Heading 3</h3>
|
||||
<h4>Heading 4</h4>
|
||||
<h5>Heading 5</h5>
|
||||
<h6>Heading 6</h6>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<p class="lead">This is a lead paragraph with larger text.</p>
|
||||
<p>This is a regular paragraph with <strong>bold text</strong>, <em>italic text</em>, and
|
||||
<u>underlined text</u>.</p>
|
||||
<p><small class="text-muted">This is small muted text.</small></p>
|
||||
<p class="text-primary">Primary text color</p>
|
||||
<p class="text-success">Success text color</p>
|
||||
<p class="text-danger">Danger text color</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Buttons Section -->
|
||||
<div class="col-12">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h3 class="card-title">Buttons</h3>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="row">
|
||||
<div class="col-md-6">
|
||||
<h4>Standard Buttons</h4>
|
||||
<div class="btn-list mb-3">
|
||||
{% include "ui/button.html" text="Default" %}
|
||||
{% include "ui/button.html" text="Primary" color="primary" icon="star" %}
|
||||
{% include "ui/button.html" text="Secondary" color="secondary" %}
|
||||
{% include "ui/button.html" text="Success" color="success" icon="check" %}
|
||||
{% include "ui/button.html" text="Warning" color="warning" %}
|
||||
{% include "ui/button.html" text="Danger" color="danger" icon="x" %}
|
||||
{% include "ui/button.html" text="Info" color="info" %}
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<h4>Button Sizes</h4>
|
||||
<div class="btn-list mb-3 align-items-start">
|
||||
{% include "ui/button.html" text="Small" size="sm" %}
|
||||
{% include "ui/button.html" text="Default"%}
|
||||
{% include "ui/button.html" text="Large" size="lg" %}
|
||||
</div>
|
||||
|
||||
<h4>Icon Buttons</h4>
|
||||
<div class="btn-list mb-3 align-items-start">
|
||||
{% include "ui/button.html" icon="heart" icon-only=true %}
|
||||
{% include "ui/button.html" icon="star" icon-only=true %}
|
||||
{% include "ui/button.html" icon="check" icon-only=true %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Cards Section -->
|
||||
<div class="col-md-6">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h3 class="card-title">Simple Card</h3>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<p>This is a simple card with header and body content.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-md-6">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h3 class="card-title">Card with Footer</h3>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<p>This card includes a footer section.</p>
|
||||
</div>
|
||||
<div class="card-footer">
|
||||
<div class="d-flex">
|
||||
<a class="btn btn-link">Cancel</a>
|
||||
<a class="btn btn-primary ms-auto">Save</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Alerts Section -->
|
||||
<div class="col-12">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h3 class="card-title">Alerts</h3>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
{% include "ui/alert.html" type="info" title="This is a primary alert with an icon." %}
|
||||
{% include "ui/alert.html" type="success" title="This is a success alert message." %}
|
||||
{% include "ui/alert.html" type="warning" title="This is a warning alert message." %}
|
||||
{% include "ui/alert.html" type="danger" title="This is a danger alert message." %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Badges Section -->
|
||||
<div class="col-md-6">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h3 class="card-title">Badges</h3>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="space-y">
|
||||
<div>
|
||||
{% include "ui/badge.html" text="Default" %}
|
||||
{% include "ui/badge.html" text="Primary" color="primary" %}
|
||||
{% include "ui/badge.html" text="Secondary" color="secondary" %}
|
||||
{% include "ui/badge.html" text="Success" color="success" %}
|
||||
{% include "ui/badge.html" text="Warning" color="warning" %}
|
||||
{% include "ui/badge.html" text="Danger" color="danger" %}
|
||||
</div>
|
||||
<div>
|
||||
{% include "ui/badge.html" text="With Icon" color="primary" icon="star" %}
|
||||
{% include "ui/badge.html" text="Light Badge" color="primary" light=true %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Progress Bars Section -->
|
||||
<div class="col-md-6">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h3 class="card-title">Progress Bars</h3>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="space-y">
|
||||
<div>
|
||||
{% include "ui/progress.html" value="25" %}
|
||||
</div>
|
||||
<div>
|
||||
{% include "ui/progress.html" value="50" color="success" %}
|
||||
</div>
|
||||
<div>
|
||||
{% include "ui/progress.html" value="75" color="warning" %}
|
||||
</div>
|
||||
<div>
|
||||
{% include "ui/progress.html" value="90" color="danger" show-value=true %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Form Elements Section -->
|
||||
<div class="col-12">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h3 class="card-title">Form Elements</h3>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="row">
|
||||
<div class="col-md-6">
|
||||
<div class="mb-3">
|
||||
<label class="form-label">Text Input</label>
|
||||
<input type="text" class="form-control" placeholder="Enter text">
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<label class="form-label">Email Input</label>
|
||||
<input type="email" class="form-control" placeholder="Enter email">
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<label class="form-label">Password Input</label>
|
||||
<input type="password" class="form-control" placeholder="Enter password">
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<label class="form-label">Select Dropdown</label>
|
||||
{% include "ui/select.html" id="demo-select" values="Option 1,Option 2,Option 3" %}
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<div class="mb-3">
|
||||
<label class="form-label">Textarea</label>
|
||||
<textarea class="form-control" rows="3" placeholder="Enter message"></textarea>
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<label class="form-label">Checkboxes</label>
|
||||
{% include "ui/form/check.html" title="Option 1" type="checkbox" %}
|
||||
{% include "ui/form/check.html" title="Option 2" type="checkbox" checked=true %}
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<label class="form-label">Radio Buttons</label>
|
||||
{% include "ui/form/check.html" title="Option 1" type="radio" name="radio-demo" %}
|
||||
{% include "ui/form/check.html" title="Option 2" type="radio" name="radio-demo" checked=true %}
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<label class="form-label">Switch</label>
|
||||
{% include "ui/form/check.html" title="Enable notifications" switch=true %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Navigation Elements -->
|
||||
<div class="col-12">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h3 class="card-title">Navigation Elements</h3>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="row">
|
||||
<div class="col-md-6">
|
||||
<h4>Tabs</h4>
|
||||
<div class="mb-3">
|
||||
{% include "ui/nav.html" tabs=true class="mb-4" %}
|
||||
</div>
|
||||
|
||||
<h4>Pills Navigation</h4>
|
||||
<div class="mb-3">
|
||||
{% include "ui/nav.html" pills=true class="mb-4" %}
|
||||
</div>
|
||||
|
||||
<h4>Breadcrumb</h4>
|
||||
{% include "ui/breadcrumb.html" pages="Home,Library,Data" home-icon=true %}
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<h4>Pagination</h4>
|
||||
{% include "ui/pagination.html" count="5" active-item="2" class="mb-4" %}
|
||||
|
||||
<h4>Pagination with Text</h4>
|
||||
{% include "ui/pagination.html" count="3" text=true %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Lists Section -->
|
||||
<div class="col-md-6">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h3 class="card-title">Lists</h3>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<h4>Unordered List</h4>
|
||||
<ul>
|
||||
<li>First item</li>
|
||||
<li>Second item</li>
|
||||
<li>Third item</li>
|
||||
</ul>
|
||||
|
||||
<h4>Ordered List</h4>
|
||||
<ol>
|
||||
<li>First item</li>
|
||||
<li>Second item</li>
|
||||
<li>Third item</li>
|
||||
</ol>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Table Section -->
|
||||
<div class="col-md-6">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h3 class="card-title">Table</h3>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="table-responsive">
|
||||
<table class="table table-vcenter">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Name</th>
|
||||
<th>Email</th>
|
||||
<th>Status</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>John Doe</td>
|
||||
<td>john@example.com</td>
|
||||
<td>{% include "ui/badge.html" text="Active" color="success" %}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Jane Smith</td>
|
||||
<td>jane@example.com</td>
|
||||
<td>{% include "ui/badge.html" text="Pending" color="warning" %}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Bob Johnson</td>
|
||||
<td>bob@example.com</td>
|
||||
<td>{% include "ui/badge.html" text="Inactive" color="danger" %}</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Avatars Section -->
|
||||
<div class="col-md-6">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h3 class="card-title">Avatars</h3>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="space-y">
|
||||
<div>
|
||||
{% include "ui/avatar.html" placeholder="JD" size="sm" %}
|
||||
{% include "ui/avatar.html" placeholder="JS" %}
|
||||
{% include "ui/avatar.html" placeholder="BJ" size="lg" %}
|
||||
{% include "ui/avatar.html" placeholder="AB" size="xl" %}
|
||||
</div>
|
||||
<div>
|
||||
{% include "ui/avatar.html" placeholder="RD" shape="avatar-rounded" %}
|
||||
{% include "ui/avatar.html" placeholder="PR" color="primary" shape="avatar-rounded" %}
|
||||
{% include "ui/avatar.html" placeholder="SC" color="success" shape="avatar-rounded" %}
|
||||
</div>
|
||||
<div>
|
||||
{% include "ui/avatar.html" icon="user" %}
|
||||
{% include "ui/avatar.html" icon="star" color="warning" %}
|
||||
{% include "ui/avatar.html" placeholder="ST" status="success" %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Icons Section -->
|
||||
<div class="col-md-6">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h3 class="card-title">Icons</h3>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="space-y">
|
||||
<div>
|
||||
{% include "ui/icon.html" icon="home" %}
|
||||
{% include "ui/icon.html" icon="user" %}
|
||||
{% include "ui/icon.html" icon="settings" %}
|
||||
{% include "ui/icon.html" icon="heart" %}
|
||||
{% include "ui/icon.html" icon="star" %}
|
||||
{% include "ui/icon.html" icon="bell" %}
|
||||
{% include "ui/icon.html" icon="mail" %}
|
||||
{% include "ui/icon.html" icon="phone" %}
|
||||
{% include "ui/icon.html" icon="calendar" %}
|
||||
{% include "ui/icon.html" icon="clock" %}
|
||||
{% include "ui/icon.html" icon="map-pin" %}
|
||||
{% include "ui/icon.html" icon="camera" %}
|
||||
{% include "ui/icon.html" icon="plus" %}
|
||||
{% include "ui/icon.html" icon="minus" %}
|
||||
{% include "ui/icon.html" icon="edit" %}
|
||||
{% include "ui/icon.html" icon="trash" %}
|
||||
{% include "ui/icon.html" icon="download" %}
|
||||
{% include "ui/icon.html" icon="upload" %}
|
||||
{% include "ui/icon.html" icon="search" %}
|
||||
{% include "ui/icon.html" icon="filter" %}
|
||||
{% include "ui/icon.html" icon="refresh" %}
|
||||
{% include "ui/icon.html" icon="share" %}
|
||||
{% include "ui/icon.html" icon="copy" %}
|
||||
{% include "ui/icon.html" icon="external-link" %}
|
||||
</div>
|
||||
<div>
|
||||
<span class="text-primary">{% include "ui/icon.html" icon="check" %}</span>
|
||||
<span class="text-success">{% include "ui/icon.html" icon="circle-check" %}</span>
|
||||
<span class="text-warning">{% include "ui/icon.html" icon="alert-triangle" %}</span>
|
||||
<span class="text-danger">{% include "ui/icon.html" icon="alert-circle" %}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Dropdowns Section -->
|
||||
<div class="col-12">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h3 class="card-title">Dropdowns</h3>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="btn-list">
|
||||
{% include "ui/dropdown.html" main-btn="Primary Dropdown" options="Action, Another action, Something else
|
||||
here" %}
|
||||
{% include "ui/dropdown.html" main-btn="Secondary Dropdown" options="Edit, Copy, Delete" %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Interactive Elements Section -->
|
||||
<div class="col-12">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h3 class="card-title">Interactive Elements</h3>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="row">
|
||||
<div class="col-md-6">
|
||||
<h4>Accordion</h4>
|
||||
<div class="mb-4">
|
||||
{% include "ui/accordion.html" count="3" id="demo-accordion" %}
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<h4>Spinners</h4>
|
||||
<div class="mb-3">
|
||||
<div class="d-flex flex-wrap gap-2">
|
||||
{% include "ui/spinner.html" type="border" color="primary" %}
|
||||
{% include "ui/spinner.html" type="border" color="success" size="sm" %}
|
||||
{% include "ui/spinner.html" type="grow" color="warning" %}
|
||||
{% include "ui/spinner.html" type="grow" color="danger" size="sm" %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h4>Rating</h4>
|
||||
<div class="mb-3">
|
||||
{% include "ui/rating.html" id="demo-rating" value="4" %}
|
||||
</div>
|
||||
|
||||
<h4>Steps</h4>
|
||||
<div class="mb-3">
|
||||
{% include "ui/steps.html" count="4" active="2" %}
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
{% include "ui/steps.html" count="4" active="3" numbers=true %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Status & Feedback Elements -->
|
||||
<div class="col-md-6">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h3 class="card-title">Status Elements</h3>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<h4>Status Dots</h4>
|
||||
<div class="mb-3">
|
||||
{% include "ui/status-dot.html" color="success" %}
|
||||
{% include "ui/status-dot.html" color="warning" %}
|
||||
{% include "ui/status-dot.html" color="danger" %}
|
||||
{% include "ui/status-dot.html" color="info" animated=true %}
|
||||
</div>
|
||||
|
||||
<h4>Toast Notifications</h4>
|
||||
<div class="mb-3">
|
||||
{% include "ui/toast.html" toast-id="demo-toast" show=true text="This is a sample toast message!" %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Enhanced Form Elements -->
|
||||
<div class="col-md-6">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h3 class="card-title">Enhanced Forms</h3>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<h4>Input with Icons</h4>
|
||||
<div class="mb-3">
|
||||
{% include "ui/form/input-icon.html" placeholder="Search..." icon="search" %}
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
{% include "ui/form/input-icon.html" placeholder="Loading..." loader=true %}
|
||||
</div>
|
||||
|
||||
<h4>Input Groups</h4>
|
||||
<div class="mb-3">
|
||||
{% include "ui/form/input-group.html" prepend="@" placeholder="Username" %}
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
{% include "ui/form/input-group.html" append=".00" prepend="$" placeholder="Price" %}
|
||||
</div>
|
||||
|
||||
<h4>Range Slider</h4>
|
||||
<div class="mb-3">
|
||||
{% include "ui/range.html" id="demo-range" min="0" max="100" value="50" %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Tags & Labels -->
|
||||
<div class="col-md-6">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h3 class="card-title">Tags & Labels</h3>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<h4>Tags</h4>
|
||||
<div class="mb-3">
|
||||
{% include "ui/tag.html" text="Primary Tag" icon="star" %}
|
||||
{% include "ui/tag.html" text="Success Tag" status="success" %}
|
||||
{% include "ui/tag.html" text="Warning Tag" status="warning" %}
|
||||
</div>
|
||||
|
||||
<h4>Ribbons</h4>
|
||||
<div class="position-relative mb-4" style="height: 100px; background: #f8f9fa; border-radius: 8px;">
|
||||
{% include "ui/ribbon.html" text="New" color="success" %}
|
||||
</div>
|
||||
<div class="position-relative mb-3" style="height: 100px; background: #f8f9fa; border-radius: 8px;">
|
||||
{% include "ui/ribbon.html" text="Sale" color="danger" top=true %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Media Elements -->
|
||||
<div class="col-md-6">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h3 class="card-title">Media Elements</h3>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<h4>Flags</h4>
|
||||
<div class="mb-3">
|
||||
<div class="d-flex flex-wrap gap-2">
|
||||
{% include "ui/flag.html" flag="us" %}
|
||||
{% include "ui/flag.html" flag="gb" %}
|
||||
{% include "ui/flag.html" flag="de" %}
|
||||
{% include "ui/flag.html" flag="fr" %}
|
||||
{% include "ui/flag.html" flag="pl" %}
|
||||
{% include "ui/flag.html" flag="es" %}
|
||||
{% include "ui/flag.html" flag="it" %}
|
||||
{% include "ui/flag.html" flag="nl" %}
|
||||
{% include "ui/flag.html" flag="ca" %}
|
||||
{% include "ui/flag.html" flag="au" %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h4>Payment Icons</h4>
|
||||
<div class="mb-3">
|
||||
<div class="d-flex flex-wrap gap-2">
|
||||
{% include "ui/payment.html" payment="visa" %}
|
||||
{% include "ui/payment.html" payment="mastercard" %}
|
||||
{% include "ui/payment.html" payment="paypal" %}
|
||||
{% include "ui/payment.html" payment="americanexpress" %}
|
||||
{% include "ui/payment.html" payment="applepay" %}
|
||||
{% include "ui/payment.html" payment="google-pay" %}
|
||||
{% include "ui/payment.html" payment="stripe" %}
|
||||
{% include "ui/payment.html" payment="discover" %}
|
||||
{% include "ui/payment.html" payment="jcb" %}
|
||||
{% include "ui/payment.html" payment="maestro" %}
|
||||
{% include "ui/payment.html" payment="dinersclub" %}
|
||||
{% include "ui/payment.html" payment="bitcoin" %}
|
||||
{% include "ui/payment.html" payment="ethereum" %}
|
||||
{% include "ui/payment.html" payment="klarna" %}
|
||||
{% include "ui/payment.html" payment="venmo" %}
|
||||
{% include "ui/payment.html" payment="square" %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Timeline Section -->
|
||||
<div class="col-md-6">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h3 class="card-title">Timeline</h3>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
{% include "ui/timeline.html" %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Empty State Section -->
|
||||
<div class="col-md-6">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h3 class="card-title">Empty State</h3>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
{% include "ui/empty.html" title="No data found" subtitle="Try adjusting your search or filter to find what
|
||||
you're looking for." illustration="boy-girl.svg" button-text="Add new item" button-icon="plus" %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Modal Section -->
|
||||
<div class="col-12">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h3 class="card-title">Modals</h3>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="btn-list">
|
||||
<button class="btn" data-bs-toggle="modal" data-bs-target="#modal-demo">
|
||||
Open Modal
|
||||
</button>
|
||||
<button class="btn" data-bs-toggle="modal" data-bs-target="#modal-success">
|
||||
Success Modal
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- Demo Modal -->
|
||||
<div class="modal modal-blur fade" id="modal-demo" tabindex="-1" role="dialog" aria-hidden="true">
|
||||
<div class="modal-dialog modal-dialog-centered" role="document">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h5 class="modal-title">Modal Title</h5>
|
||||
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<p>This is a sample modal dialog. You can put any content here.</p>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button type="button" class="btn" data-bs-dismiss="modal">Cancel</button>
|
||||
<button type="button" class="btn btn-primary">Save changes</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Success Modal -->
|
||||
<div class="modal modal-blur fade" id="modal-success" tabindex="-1" role="dialog" aria-hidden="true">
|
||||
<div class="modal-dialog modal-sm modal-dialog-centered" role="document">
|
||||
<div class="modal-content">
|
||||
<div class="modal-body text-center py-4">
|
||||
{% include "ui/icon.html" icon="circle-check" color="success" size="xl" class="mb-2" %}
|
||||
<h3>Success!</h3>
|
||||
<div class="text-secondary">Your action was completed successfully.</div>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<div class="w-100">
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<button class="btn w-100" data-bs-dismiss="modal">Cancel</button>
|
||||
</div>
|
||||
<div class="col">
|
||||
<button class="btn btn-success w-100" data-bs-dismiss="modal">OK</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Button Groups Section -->
|
||||
<div class="col-md-6">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h3 class="card-title">Button Groups</h3>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<h4>Basic Button Group</h4>
|
||||
<div class="btn-group mb-3" role="group">
|
||||
<button type="button" class="btn">Left</button>
|
||||
<button type="button" class="btn">Middle</button>
|
||||
<button type="button" class="btn">Right</button>
|
||||
</div>
|
||||
|
||||
<h4>Button Toolbar</h4>
|
||||
<div class="btn-toolbar mb-3" role="toolbar">
|
||||
<div class="btn-group me-2" role="group">
|
||||
<button type="button" class="btn">1</button>
|
||||
<button type="button" class="btn">2</button>
|
||||
<button type="button" class="btn">3</button>
|
||||
</div>
|
||||
<div class="btn-group" role="group">
|
||||
<button type="button" class="btn">4</button>
|
||||
<button type="button" class="btn">5</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h4>Vertical Button Group</h4>
|
||||
<div class="btn-group-vertical" role="group">
|
||||
<button type="button" class="btn">Top</button>
|
||||
<button type="button" class="btn">Middle</button>
|
||||
<button type="button" class="btn">Bottom</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Segmented Navigation Section -->
|
||||
<div class="col-md-6">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h3 class="card-title">Segmented Navigation</h3>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<h4>Basic Segmented</h4>
|
||||
<div class="mb-3">
|
||||
{% include "ui/nav-segmented.html" items="Home,Profile,Settings" %}
|
||||
</div>
|
||||
|
||||
<h4>With Icons</h4>
|
||||
<div class="mb-3">
|
||||
{% include "ui/nav-segmented.html" icons="home,user,settings" %}
|
||||
</div>
|
||||
|
||||
<h4>With Emojis</h4>
|
||||
<div class="mb-3">
|
||||
{% include "ui/nav-segmented.html" items="👦,👦🏿,👦🏾,👦🏽,👦🏼,👦🏻" %}
|
||||
</div>
|
||||
|
||||
<h4>With Icons and Text</h4>
|
||||
<div class="mb-3">
|
||||
{% include "ui/nav-segmented.html" items="Home,Profile,Settings" icons="home,user,settings" %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Collapse Section -->
|
||||
<div class="col-12">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h3 class="card-title">Collapse</h3>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="row">
|
||||
<div class="col-md-6">
|
||||
<h4>Basic Collapse</h4>
|
||||
<button class="btn" type="button" data-bs-toggle="collapse" data-bs-target="#collapseExample">
|
||||
Toggle Collapse
|
||||
</button>
|
||||
<div class="collapse" id="collapseExample">
|
||||
<div class="card card-body">
|
||||
This is collapsed content that can be toggled. It's hidden by default and shown when the button is clicked.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<h4>Multiple Targets</h4>
|
||||
<div class="btn-list">
|
||||
<button class="btn" type="button" data-bs-toggle="collapse" data-bs-target="#multiCollapseExample1">
|
||||
Toggle First
|
||||
</button>
|
||||
<button class="btn" type="button" data-bs-toggle="collapse" data-bs-target="#multiCollapseExample2">
|
||||
Toggle Second
|
||||
</button>
|
||||
</div>
|
||||
<div class="collapse" id="multiCollapseExample1">
|
||||
<div class="card card-body mb-2">
|
||||
First collapsible content.
|
||||
</div>
|
||||
</div>
|
||||
<div class="collapse" id="multiCollapseExample2">
|
||||
<div class="card card-body">
|
||||
Second collapsible content.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Tooltips & Popovers Section -->
|
||||
<div class="col-12">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h3 class="card-title">Tooltips & Popovers</h3>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="row">
|
||||
<div class="col-md-6">
|
||||
<h4>Tooltips</h4>
|
||||
<div class="btn-list">
|
||||
<button class="btn" data-bs-toggle="tooltip" data-bs-placement="top" title="Tooltip on top">
|
||||
Top
|
||||
</button>
|
||||
<button class="btn" data-bs-toggle="tooltip" data-bs-placement="right" title="Tooltip on right">
|
||||
Right
|
||||
</button>
|
||||
<button class="btn" data-bs-toggle="tooltip" data-bs-placement="bottom" title="Tooltip on bottom">
|
||||
Bottom
|
||||
</button>
|
||||
<button class="btn" data-bs-toggle="tooltip" data-bs-placement="left" title="Tooltip on left">
|
||||
Left
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<h4>Popovers</h4>
|
||||
<div class="btn-list">
|
||||
<button class="btn" data-bs-toggle="popover" data-bs-placement="top" title="Popover Title" data-bs-content="This is popover content on top">
|
||||
Top Popover
|
||||
</button>
|
||||
<button class="btn" data-bs-toggle="popover" data-bs-placement="right" title="Popover Title" data-bs-content="This is popover content on right">
|
||||
Right Popover
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- List Groups Section -->
|
||||
<div class="col-md-6">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h3 class="card-title">List Groups</h3>
|
||||
</div>
|
||||
<div class="card-body p-0">
|
||||
<div class="list-group list-group-flush">
|
||||
<div class="list-group-item">
|
||||
{% include "ui/icon.html" icon="home" class="me-2" %}
|
||||
Home
|
||||
</div>
|
||||
<div class="list-group-item active">
|
||||
{% include "ui/icon.html" icon="star" class="me-2" %}
|
||||
Active item
|
||||
</div>
|
||||
<div class="list-group-item">
|
||||
{% include "ui/icon.html" icon="settings" class="me-2" %}
|
||||
Settings
|
||||
</div>
|
||||
<div class="list-group-item">
|
||||
{% include "ui/icon.html" icon="user" class="me-2" %}
|
||||
Profile
|
||||
</div>
|
||||
<div class="list-group-item disabled">
|
||||
{% include "ui/icon.html" icon="lock" class="me-2" %}
|
||||
Disabled item
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Content Elements Section -->
|
||||
<div class="col-md-6">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h3 class="card-title">Content Elements</h3>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<h4>Blockquote</h4>
|
||||
<blockquote class="blockquote mb-4">
|
||||
<p>This is a blockquote example with some sample text to demonstrate the styling.</p>
|
||||
<footer class="blockquote-footer">
|
||||
Someone famous in <cite title="Source Title">Source Title</cite>
|
||||
</footer>
|
||||
</blockquote>
|
||||
|
||||
<h4>Code Block</h4>
|
||||
<pre class="mb-3"><code>// JavaScript example
|
||||
function greetUser(name) {
|
||||
console.log(`Hello, ${name}!`);
|
||||
return true;
|
||||
}</code></pre>
|
||||
|
||||
<h4>Inline Elements</h4>
|
||||
<p>This paragraph contains <code>inline code</code>, <kbd>Ctrl + S</kbd> keyboard shortcut, and <mark>highlighted text</mark>.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -0,0 +1,10 @@
|
||||
---
|
||||
// Port of preview/pages/auth-lock.html (layout: single; the front matter
|
||||
// title really is "Forgot password" in the Liquid source)
|
||||
import SingleLayout from '@shared/layouts/SingleLayout.astro';
|
||||
import AuthLockCard from '@shared/components/cards/AuthLockCard.astro';
|
||||
---
|
||||
|
||||
<SingleLayout title="Forgot password">
|
||||
<AuthLockCard />
|
||||
</SingleLayout>
|
||||
@@ -1,8 +0,0 @@
|
||||
---
|
||||
title: Forgot password
|
||||
layout: single
|
||||
page-menu: base.authentication.auth-lock
|
||||
permalink: auth-lock.html
|
||||
---
|
||||
|
||||
{% include "cards/auth-lock.html" show-header="1" %}
|
||||
@@ -0,0 +1,168 @@
|
||||
---
|
||||
// Port of preview/pages/avatars.html (layout: default)
|
||||
// Note: the `description` front matter key is inert in the dev build (no
|
||||
// <meta name="description"> in the reference output), so it is not ported.
|
||||
import DefaultLayout from '@shared/layouts/DefaultLayout.astro';
|
||||
import Avatar from '@shared/components/ui/Avatar.astro';
|
||||
import AvatarUpload from '@shared/components/ui/AvatarUpload.astro';
|
||||
import people from '@data/people.json';
|
||||
import { site } from '@shared/lib/site';
|
||||
|
||||
const iconIcons = ['user', 'settings', 'car', 'balloon', 'users', 'users-group', 'apps', 'ghost'];
|
||||
|
||||
// Liquid: {% for color in site.colors %} — the iterated keys match site.themeColors
|
||||
// (blue..cyan), confirmed against the reference output.
|
||||
const colors = site.themeColors;
|
||||
|
||||
// equivalent of the first_letters filter
|
||||
const firstLetters = (s: string) => s.split(' ').map((w) => w.charAt(0)).join('');
|
||||
|
||||
const people8 = people.slice(0, 8);
|
||||
const people5 = people.slice(0, 5);
|
||||
const sizes = ['xxs', 'xs', 'sm', 'md', 'lg', 'xl'];
|
||||
const listSizes = ['xxs', 'xs', 'sm', 'md', 'lg'];
|
||||
const uploadSizes = ['xxs', 'xs', 'sm', 'md', 'lg', 'xl', '2xl'];
|
||||
const statusColors = ['red', 'green', 'blue', 'yellow', 'secondary'];
|
||||
const brands = ['netflix', 'amazon', 'messenger', 'figma', 'twitch'];
|
||||
---
|
||||
|
||||
<DefaultLayout title="Avatars" pageMenu="base.avatars" pageHeader="Avatars">
|
||||
<div class="row row-cards">
|
||||
<div class="col-4">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<h2 class="card-title">Default avatar</h2>
|
||||
<Avatar />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-4">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<h2 class="card-title">Avatar with icon</h2>
|
||||
|
||||
<div class="avatar-list">
|
||||
{iconIcons.map((icon) => <Avatar icon={icon} />)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-4">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<h2 class="card-title">Avatar with icon</h2>
|
||||
|
||||
<div class="avatar-list">
|
||||
{colors.map((color) => <Avatar icon="user" color={color} />)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-4">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<h2 class="card-title">Simple avatar</h2>
|
||||
<div class="avatar-list">
|
||||
{people8.map((person) => <Avatar person={person} />)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-4">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<h2 class="card-title">Avatar placeholder</h2>
|
||||
<div class="avatar-list">
|
||||
{people8.map((person) => <Avatar placeholder={firstLetters(person.full_name)} />)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-4">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<h2 class="card-title">Avatar shapes</h2>
|
||||
<div class="avatar-list">
|
||||
<Avatar />
|
||||
<Avatar class="rounded-circle" />
|
||||
<Avatar class="rounded-0" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-6">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<h2 class="card-title">Avatar sizes</h2>
|
||||
<div class="row">
|
||||
<div class="col-6">
|
||||
<div class="avatar-list">
|
||||
{sizes.map((size) => <Avatar size={size} />)}
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-6">
|
||||
<div class="avatar-list">
|
||||
{sizes.map((size) => <Avatar placeholder="PK" size={size} />)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-6">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<h2 class="card-title">Avatar lists</h2>
|
||||
<div class="row g-3">
|
||||
{
|
||||
listSizes.map((size) => (
|
||||
<>
|
||||
<div class="col-6">
|
||||
<div class={`avatar-list avatar-list-stacked avatar-list-${size}`}>
|
||||
{people5.map((person) => (
|
||||
<Avatar person={person} />
|
||||
))}
|
||||
<Avatar icon="plus" link />
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-6">
|
||||
<div class={`avatar-list avatar-list-stacked avatar-list-${size}`}>
|
||||
{people5.map((person) => (
|
||||
<Avatar person={person} class="rounded-circle" />
|
||||
))}
|
||||
<Avatar icon="plus" link class="rounded-circle" />
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
))
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-4">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<h2 class="card-title">Avatar placeholder</h2>
|
||||
{uploadSizes.map((size) => <AvatarUpload size={size} />)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-4">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<h2 class="card-title">Avatar statuses</h2>
|
||||
{statusColors.map((color, i) => <Avatar personId={i + 1} class="rounded-circle" status={color} />)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-4">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<h2 class="card-title">Avatar brands</h2>
|
||||
{brands.map((brand, i) => <Avatar personId={i + 1} brand={brand} />)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</DefaultLayout>
|
||||
@@ -1,173 +0,0 @@
|
||||
---
|
||||
title: Avatars
|
||||
layout: default
|
||||
description: A page showcasing different avatar styles and examples.
|
||||
permalink: /avatars.html
|
||||
page-menu: base.avatars
|
||||
page-header: Avatars
|
||||
---
|
||||
|
||||
<div class="row row-cards">
|
||||
<div class="col-4">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<h2 class="card-title">Default avatar</h2>
|
||||
{% include "ui/avatar.html" %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-4">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<h2 class="card-title">Avatar with icon</h2>
|
||||
|
||||
{% assign icon-icons = "user,settings,car,balloon,users,users-group,apps,ghost" | split: "," %}
|
||||
<div class="avatar-list">
|
||||
{% for icon in icon-icons %}
|
||||
{% include "ui/avatar.html" icon=icon %}
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-4">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<h2 class="card-title">Avatar with icon</h2>
|
||||
|
||||
<div class="avatar-list">
|
||||
{% for color in site.colors %}
|
||||
{% include "ui/avatar.html" icon="user" color=color[0] %}
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-4">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<h2 class="card-title">Simple avatar</h2>
|
||||
<div class="avatar-list">
|
||||
{% for person in people limit: 8 -%}
|
||||
{% include "ui/avatar.html" person=person %}
|
||||
{%- endfor %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-4">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<h2 class="card-title">Avatar placeholder</h2>
|
||||
<div class="avatar-list">
|
||||
{% for person in people limit: 8 %}
|
||||
{% assign placeholder = person.full_name | first_letters %}
|
||||
{% include "ui/avatar.html" placeholder=placeholder %}
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-4">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<h2 class="card-title">Avatar shapes</h2>
|
||||
<div class="avatar-list">
|
||||
{% include "ui/avatar.html" %}
|
||||
{% include "ui/avatar.html" class="rounded-circle" %}
|
||||
{% include "ui/avatar.html" class="rounded-0" %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-6">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<h2 class="card-title">Avatar sizes</h2>
|
||||
<div class="row">
|
||||
<div class="col-6">
|
||||
<div class="avatar-list">
|
||||
{% include "ui/avatar.html" size="xxs" %}
|
||||
{% include "ui/avatar.html" size="xs" %}
|
||||
{% include "ui/avatar.html" size="sm" %}
|
||||
{% include "ui/avatar.html" size="md" %}
|
||||
{% include "ui/avatar.html" size="lg" %}
|
||||
{% include "ui/avatar.html" size="xl" %}
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-6">
|
||||
<div class="avatar-list">
|
||||
{% include "ui/avatar.html" placeholder="PK" size="xxs" %}
|
||||
{% include "ui/avatar.html" placeholder="PK" size="xs" %}
|
||||
{% include "ui/avatar.html" placeholder="PK" size="sm" %}
|
||||
{% include "ui/avatar.html" placeholder="PK" size="md" %}
|
||||
{% include "ui/avatar.html" placeholder="PK" size="lg" %}
|
||||
{% include "ui/avatar.html" placeholder="PK" size="xl" %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-6">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<h2 class="card-title">Avatar lists</h2>
|
||||
<div class="row g-3">
|
||||
{% assign sizes = "xxs,xs,sm,md,lg" | split: "," %}
|
||||
{% for size in sizes %}
|
||||
<div class="col-6">
|
||||
<div class="avatar-list avatar-list-stacked avatar-list-{{ size }}">
|
||||
{% for person in people limit: 5 %}
|
||||
{% include "ui/avatar.html" person=person %}
|
||||
{% endfor %}
|
||||
{% include "ui/avatar.html" icon="plus" link %}
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-6">
|
||||
<div class="avatar-list avatar-list-stacked avatar-list-{{ size }}">
|
||||
{% for person in people limit: 5 %}
|
||||
{% include "ui/avatar.html" person=person class="rounded-circle" %}
|
||||
{% endfor %}
|
||||
{% include "ui/avatar.html" icon="plus" link class="rounded-circle" %}
|
||||
</div>
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-4">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<h2 class="card-title">Avatar placeholder</h2>
|
||||
{% assign sizes = "xxs,xs,sm,md,lg,xl,2xl" | split: "," %}
|
||||
{% for size in sizes %}
|
||||
{% include "ui/avatar-upload.html" size=size %}
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-4">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<h2 class="card-title">Avatar statuses</h2>
|
||||
{% assign colors = "red,green,blue,yellow,secondary" | split: "," %}
|
||||
{% for color in colors %}
|
||||
{% include "ui/avatar.html" person-id=forloop.index class="rounded-circle" status=color %}
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-4">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<h2 class="card-title">Avatar brands</h2>
|
||||
{% assign brands = "netflix,amazon,messenger,figma,twitch" | split: "," %}
|
||||
{% for brand in brands %}
|
||||
{% include "ui/avatar.html" person-id=forloop.index brand=brand %}
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -0,0 +1,202 @@
|
||||
---
|
||||
// Port of preview/pages/badges.html (layout: default)
|
||||
import DefaultLayout from '@shared/layouts/DefaultLayout.astro';
|
||||
import Icon from '@shared/components/Icon.astro';
|
||||
import DropdownMenu from '@shared/components/ui/DropdownMenu.astro';
|
||||
import site from '@data/site.json';
|
||||
|
||||
// Liquid: colors = ['default'] + site.colors keys + ['dark', 'light']
|
||||
const colors = ['default', ...Object.keys(site.colors), 'dark', 'light'];
|
||||
const sizes = ['sm', 'md', 'lg'];
|
||||
|
||||
// Liquid uc_first filter
|
||||
const ucFirst = (value: string) => value.charAt(0).toUpperCase() + value.slice(1);
|
||||
---
|
||||
|
||||
<DefaultLayout title="Badges" pageHeader="Badges" pageMenu="base.badges">
|
||||
<div class="row row-cards">
|
||||
<div class="col-4">
|
||||
<div class="row row-cards">
|
||||
<div class="col-12">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<h1>Example heading <span class="badge">New</span></h1>
|
||||
<h2>Example heading <span class="badge">New</span></h2>
|
||||
<h3>Example heading <span class="badge">New</span></h3>
|
||||
<h4>Example heading <span class="badge">New</span></h4>
|
||||
<h5>Example heading <span class="badge">New</span></h5>
|
||||
<h6>Example heading <span class="badge">New</span></h6>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<h3 class="card-title">Badge sizes</h3>
|
||||
|
||||
<div class="space-y">
|
||||
{
|
||||
sizes.map((size) => (
|
||||
<div class="badges-list">
|
||||
<span class={`badge${size !== 'md' ? ` badge-${size}` : ''}`}>Default</span>
|
||||
<span class={`badge${size !== 'md' ? ` badge-${size}` : ''}`}>
|
||||
<Icon name="check" /> Left icon
|
||||
</span>
|
||||
<span class={`badge${size !== 'md' ? ` badge-${size}` : ''}`}>
|
||||
Right icon<Icon name="arrow-right" />
|
||||
</span>
|
||||
<span class={`badge badge-icononly${size !== 'md' ? ` badge-${size}` : ''}`}>
|
||||
<Icon name="star" type="filled" />
|
||||
</span>
|
||||
</div>
|
||||
))
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<h3 class="card-title">Positioned badges</h3>
|
||||
|
||||
<div class="btn-list">
|
||||
<button type="button" class="btn">Notifications <span class="badge text-bg-secondary ms-2">4</span></button>
|
||||
|
||||
<button type="button" class="btn">
|
||||
Inbox
|
||||
<span class="badge bg-red badge-notification text-red-fg">
|
||||
9+
|
||||
<span class="visually-hidden">unread messages</span>
|
||||
</span>
|
||||
</button>
|
||||
|
||||
<button type="button" class="btn">
|
||||
Profile
|
||||
<span class="badge badge-dot bg-red badge-notification"></span>
|
||||
</button>
|
||||
|
||||
<button type="button" class="btn">
|
||||
Settings
|
||||
<span class="badge badge-dot bg-red badge-notification badge-blink"></span>
|
||||
</button>
|
||||
|
||||
<button type="button" class="btn btn-icon">
|
||||
<Icon name="bell" />
|
||||
<span class="badge badge-dot bg-red badge-notification badge-blink"></span>
|
||||
</button>
|
||||
|
||||
<button type="button" class="btn btn-icon btn-action">
|
||||
<Icon name="bell" />
|
||||
<span class="badge badge-dot bg-red badge-notification"></span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-8">
|
||||
<div class="row row-cards">
|
||||
<div class="col-12">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<h3 class="card-title">Basic badges</h3>
|
||||
<div class="badges-list">
|
||||
{colors.map((color) => <span class={`badge bg-${color} text-${color}-fg`}>{ucFirst(color)}</span>)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<h3 class="card-title">Light badges</h3>
|
||||
<div class="badges-list">
|
||||
{colors.map((color) => <span class={`badge bg-${color}-lt`}>{ucFirst(color)}</span>)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<h3 class="card-title">Outline badges</h3>
|
||||
<div class="badges-list">
|
||||
{colors.map((color) => <span class={`badge badge-outline text-${color}`}>{ucFirst(color)}</span>)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<h3 class="card-title">Badges with icons</h3>
|
||||
<div class="badges-list">
|
||||
{
|
||||
colors.map((color) => (
|
||||
<span class={`badge bg-${color} text-${color}-fg`}>
|
||||
{' '}
|
||||
<Icon name="star" type="filled" /> {ucFirst(color)}{' '}
|
||||
</span>
|
||||
))
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-sm-6 col-lg-3"><DropdownMenu show badge arrow /></div>
|
||||
<div class="col-sm-6 col-lg-9">
|
||||
<div class="row row-cards">
|
||||
<div class="col-12">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<div class="btn-list">
|
||||
{
|
||||
colors.map((color, index) => (
|
||||
<button class="btn">
|
||||
{ucFirst(color)} badge <span class={`badge bg-${color} text-${color}-fg ms-2`}>{index + 1}</span>
|
||||
</button>
|
||||
))
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<div class="btn-list">
|
||||
{
|
||||
colors.map((color, index) => (
|
||||
<button class="btn position-relative">
|
||||
{ucFirst(color)} badge{' '}
|
||||
<span class={`badge bg-${color} text-${color}-fg badge-notification badge-pill`}>{index + 1}</span>
|
||||
</button>
|
||||
))
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<div class="btn-list">
|
||||
{
|
||||
colors.map((color) => (
|
||||
<button class="btn position-relative">
|
||||
{ucFirst(color)} badge <span class={`badge bg-${color} badge-notification badge-blink`} />
|
||||
</button>
|
||||
))
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</DefaultLayout>
|
||||
@@ -1,191 +0,0 @@
|
||||
---
|
||||
title: Badges
|
||||
page-header: Badges
|
||||
page-menu: base.badges
|
||||
layout: default
|
||||
permalink: badges.html
|
||||
---
|
||||
|
||||
{% assign colors = "" | split: "," %} {% assign colors = colors | push: "default" %} {% for color in site.colors %} {%
|
||||
assign colors = colors | push: color[0]
|
||||
%} {% endfor %} {% assign colors = colors | push: "dark" | push: "light" %}
|
||||
|
||||
<div class="row row-cards">
|
||||
<div class="col-4">
|
||||
<div class="row row-cards">
|
||||
<div class="col-12">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<h1>Example heading <span class="badge">New</span></h1>
|
||||
<h2>Example heading <span class="badge">New</span></h2>
|
||||
<h3>Example heading <span class="badge">New</span></h3>
|
||||
<h4>Example heading <span class="badge">New</span></h4>
|
||||
<h5>Example heading <span class="badge">New</span></h5>
|
||||
<h6>Example heading <span class="badge">New</span></h6>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<h3 class="card-title">Badge sizes</h3>
|
||||
|
||||
<div class="space-y">
|
||||
{% assign sizes = "sm,md,lg" | split: "," %} {% for size in sizes %}
|
||||
<div class="badges-list">
|
||||
<span class="badge{% if size != 'md' %} badge-{{ size }}{% endif %}">Default</span>
|
||||
<span class="badge{% if size != 'md' %} badge-{{ size }}{% endif %}">{% include "ui/icon.html"
|
||||
icon="check" %} Left icon
|
||||
</span>
|
||||
<span class="badge{% if size != 'md' %} badge-{{ size }}{% endif %}">Right icon{% include "ui/icon.html"
|
||||
icon="arrow-right" %}
|
||||
</span>
|
||||
<span class="badge badge-icononly{% if size != 'md' %} badge-{{ size }}{% endif %}">{% include
|
||||
"ui/icon.html" icon="star" type="filled" %}
|
||||
</span>
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<h3 class="card-title">Positioned badges</h3>
|
||||
|
||||
<div class="btn-list">
|
||||
<button type="button" class="btn">Notifications <span
|
||||
class="badge text-bg-secondary ms-2">4</span></button>
|
||||
|
||||
<button type="button" class="btn">
|
||||
Inbox
|
||||
<span class="badge bg-red badge-notification text-red-fg">
|
||||
9+
|
||||
<span class="visually-hidden">unread messages</span>
|
||||
</span>
|
||||
</button>
|
||||
|
||||
<button type="button" class="btn">
|
||||
Profile
|
||||
<span class="badge badge-dot bg-red badge-notification"></span>
|
||||
</button>
|
||||
|
||||
<button type="button" class="btn">
|
||||
Settings
|
||||
<span class="badge badge-dot bg-red badge-notification badge-blink"></span>
|
||||
</button>
|
||||
|
||||
<button type="button" class="btn btn-icon">
|
||||
{% include "ui/icon.html" icon="bell" %}
|
||||
<span class="badge badge-dot bg-red badge-notification badge-blink"></span>
|
||||
</button>
|
||||
|
||||
<button type="button" class="btn btn-icon btn-action">
|
||||
{% include "ui/icon.html" icon="bell" %}
|
||||
<span class="badge badge-dot bg-red badge-notification"></span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-8">
|
||||
<div class="row row-cards">
|
||||
<div class="col-12">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<h3 class="card-title">Basic badges</h3>
|
||||
<div class="badges-list">
|
||||
{% for color in colors %}
|
||||
<span class="badge bg-{{ color }} text-{{ color }}-fg">{{ color | uc_first }}</span>
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<h3 class="card-title">Light badges</h3>
|
||||
<div class="badges-list">
|
||||
{% for color in colors %}
|
||||
<span class="badge bg-{{ color }}-lt">{{ color | uc_first }}</span>
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<h3 class="card-title">Outline badges</h3>
|
||||
<div class="badges-list">
|
||||
{% for color in colors %}
|
||||
<span class="badge badge-outline text-{{ color }}">{{ color | uc_first }}</span>
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<h3 class="card-title">Badges with icons</h3>
|
||||
<div class="badges-list">
|
||||
{% for color in colors %}
|
||||
<span class="badge bg-{{ color }} text-{{ color }}-fg"> {% include "ui/icon.html" icon="star"
|
||||
type="filled" %} {{ color | uc_first }} </span>
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-sm-6 col-lg-3">{% include "ui/dropdown-menu.html" show=true badge=true arrow=true %}</div>
|
||||
<div class="col-sm-6 col-lg-9">
|
||||
<div class="row row-cards">
|
||||
<div class="col-12">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<div class="btn-list">
|
||||
{% for color in colors %}
|
||||
<button class="btn">{{ color | uc_first }} badge <span
|
||||
class="badge bg-{{ color }} text-{{ color }}-fg ms-2">{{ forloop.index }}</span></button>
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<div class="btn-list">
|
||||
{% for color in colors %}
|
||||
<button class="btn position-relative">
|
||||
{{ color | uc_first }} badge <span
|
||||
class="badge bg-{{ color }} text-{{ color }}-fg badge-notification badge-pill">{{ forloop.index }}</span>
|
||||
</button>
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<div class="btn-list">
|
||||
{% for color in colors %}
|
||||
<button class="btn position-relative">
|
||||
{{ color | uc_first }} badge <span class="badge bg-{{ color }} badge-notification badge-blink"></span>
|
||||
</button>
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -0,0 +1,11 @@
|
||||
---
|
||||
// Port of preview/pages/blank.html (layout: default). The `blank: true`
|
||||
// front matter is inert in the Liquid templates (never referenced) — the
|
||||
// empty page header comes from the missing `page-header` key.
|
||||
import DefaultLayout from '@shared/layouts/DefaultLayout.astro';
|
||||
import Empty from '@shared/components/ui/Empty.astro';
|
||||
---
|
||||
|
||||
<DefaultLayout title="Blank page" pageMenu="base.blank" containerCentered>
|
||||
<Empty buttonText="Add your first client" buttonIcon="plus" illustration="computer-fix.svg" />
|
||||
</DefaultLayout>
|
||||
@@ -1,10 +0,0 @@
|
||||
---
|
||||
title: Blank page
|
||||
blank: true
|
||||
page-menu: base.blank
|
||||
page-container-centered: true
|
||||
layout: default
|
||||
permalink: blank.html
|
||||
---
|
||||
|
||||
{% include "ui/empty.html" button-text="Add your first client" button-icon="plus" illustration="computer-fix.svg" %}
|
||||
@@ -0,0 +1,210 @@
|
||||
---
|
||||
// Port of preview/pages/buttons.html (layout: default)
|
||||
import DefaultLayout from '@shared/layouts/DefaultLayout.astro';
|
||||
import Icon from '@shared/components/Icon.astro';
|
||||
import Button from '@shared/components/Button.astro';
|
||||
import site from '@data/site.json';
|
||||
|
||||
type ColorEntry = [string, { title: string; icon?: string }];
|
||||
|
||||
// Liquid iterates the site.json objects as [key, value] pairs.
|
||||
// themeColors/colors entries have no icon — ui/icon.html renders nothing there.
|
||||
const themeColors = Object.entries(site.themeColors) as ColorEntry[];
|
||||
const colors = Object.entries(site.colors) as ColorEntry[];
|
||||
const socialColors = Object.entries(site.socialColors) as ColorEntry[];
|
||||
|
||||
const actions = ['edit', 'copy', 'settings', 'clipboard', 'x'];
|
||||
const sizes = ['sm', 'md', 'lg', 'xl'];
|
||||
---
|
||||
|
||||
<DefaultLayout title="Buttons" pageHeader="Buttons" pageMenu="base.buttons">
|
||||
<div class="row row-cards">
|
||||
<div class="col-md-6">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h3 class="card-title">Standard Buttons</h3>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="btn-list">
|
||||
{
|
||||
themeColors.map(([name, color]) => (
|
||||
<a class={`btn btn-${name}`}>{color.icon && <Icon name={color.icon} />} {color.title}</a>
|
||||
))
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h3 class="card-title">Outline Buttons</h3>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="btn-list">
|
||||
{
|
||||
themeColors.map(([name, color]) => (
|
||||
<a class={`btn btn-outline btn-${name}`}>{color.icon && <Icon name={color.icon} />} {color.title}</a>
|
||||
))
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h3 class="card-title">Ghost Buttons</h3>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="btn-list">
|
||||
{
|
||||
themeColors.map(([name, color]) => (
|
||||
<a class={`btn btn-ghost btn-${name}`}>{color.icon && <Icon name={color.icon} />} {color.title}</a>
|
||||
))
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h3 class="card-title">Square Buttons</h3>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="btn-list">
|
||||
{
|
||||
themeColors.map(([name, color]) => (
|
||||
<a class={`btn btn-square btn-${name}`}>{color.icon && <Icon name={color.icon} />} {color.title}</a>
|
||||
))
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h3 class="card-title">Pill Buttons</h3>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="btn-list">
|
||||
{
|
||||
themeColors.map(([name, color]) => (
|
||||
<a class={`btn btn-pill btn-${name}`}>{color.icon && <Icon name={color.icon} />} {color.title}</a>
|
||||
))
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h3 class="card-title">Extra colors</h3>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="btn-list">
|
||||
{
|
||||
colors.map(([name, color]) => (
|
||||
<a class={`btn btn-${name}`}>{color.icon && <Icon name={color.icon} />} {color.title}</a>
|
||||
))
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h3 class="card-title">Icon buttons</h3>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="btn-list">
|
||||
{
|
||||
socialColors.map(([name, app]) => (
|
||||
<a class={`btn btn-icon btn-${name}`}>{app.icon && <Icon name={app.icon} />}</a>
|
||||
))
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h3 class="card-title">Social colors</h3>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="btn-list">
|
||||
{
|
||||
socialColors.map(([name, app]) => (
|
||||
<a class={`btn btn-${name}`}>{app.icon && <Icon name={app.icon} />} {app.title}</a>
|
||||
))
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h3 class="card-title">Action buttons</h3>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="btn-actions">
|
||||
{
|
||||
actions.map((action) => (
|
||||
<a class="btn btn-action">
|
||||
<Icon name={action} />
|
||||
</a>
|
||||
))
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h3 class="card-title">Buttons with icon</h3>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="btn-list">
|
||||
<a class="btn btn-animate-icon">Save <Icon name="arrow-right" class="icon-end" /></a>
|
||||
<a class="btn btn-animate-icon btn-animate-icon-rotate"><Icon name="plus" /> Add</a>
|
||||
<a class="btn btn-animate-icon btn-animate-icon-shake"><Icon name="bell" /> Notifications</a>
|
||||
<a class="btn btn-animate-icon btn-animate-icon-rotate"><Icon name="settings" /> Settings</a>
|
||||
<a class="btn btn-animate-icon btn-animate-icon-pulse"><Icon name="heart" /> Love</a>
|
||||
<a class="btn btn-animate-icon btn-animate-icon-rotate"><Icon name="x" /> Close</a>
|
||||
<a class="btn btn-animate-icon btn-animate-icon-tada"><Icon name="check" /> Confirm</a>
|
||||
<a class="btn btn-animate-icon">Next <Icon name="chevron-right" class="icon-end" /></a>
|
||||
<a class="btn btn-animate-icon btn-animate-icon-move-start"><Icon name="chevron-left" /> Previous</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h3 class="card-title">Buttons size</h3>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="space-y">
|
||||
{
|
||||
sizes.map((size) => (
|
||||
<div class="btn-list">
|
||||
<Button size={size} text="Button" />
|
||||
<Button size={size} icon="star" iconOnly />
|
||||
<Button size={size} icon="star" text="Button" />
|
||||
<Button size={size} iconEnd="star" text="Button" />
|
||||
</div>
|
||||
))
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</DefaultLayout>
|
||||
@@ -1,184 +0,0 @@
|
||||
---
|
||||
title: Buttons
|
||||
page-header: Buttons
|
||||
page-menu: base.buttons
|
||||
layout: default
|
||||
permalink: buttons.html
|
||||
---
|
||||
|
||||
<div class="row row-cards">
|
||||
<div class="col-md-6">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h3 class="card-title">Standard Buttons</h3>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="btn-list">
|
||||
{% for color in site.themeColors %}
|
||||
<a class="btn btn-{{ color[0] }}">{% include "ui/icon.html" icon=color[1].icon %} {{ color[1].title }}</a>
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h3 class="card-title">Outline Buttons</h3>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="btn-list">
|
||||
{% for color in site.themeColors %}
|
||||
<a class="btn btn-outline btn-{{ color[0] }}">{% include "ui/icon.html"
|
||||
icon=color[1].icon %} {{ color[1].title }}</a>
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h3 class="card-title">Ghost Buttons</h3>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="btn-list">
|
||||
{% for color in site.themeColors %}
|
||||
<a class="btn btn-ghost btn-{{ color[0] }}">{% include "ui/icon.html"
|
||||
icon=color[1].icon %} {{ color[1].title }}</a>
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h3 class="card-title">Square Buttons</h3>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="btn-list">
|
||||
{% for color in site.themeColors %}
|
||||
<a class="btn btn-square btn-{{ color[0] }}">
|
||||
{% include "ui/icon.html" icon=color[1].icon %} {{ color[1].title }}
|
||||
</a>
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h3 class="card-title">Pill Buttons</h3>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="btn-list">
|
||||
{% for color in site.themeColors %}
|
||||
<a class="btn btn-pill btn-{{ color[0] }}">
|
||||
{% include "ui/icon.html" icon=color[1].icon %} {{ color[1].title }}
|
||||
</a>
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h3 class="card-title">Extra colors</h3>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="btn-list">
|
||||
{% for color in site.colors %}
|
||||
<a class="btn btn-{{ color[0] }}">{% include "ui/icon.html"
|
||||
icon=color[1].icon %} {{ color[1].title }}</a>
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h3 class="card-title">Icon buttons</h3>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="btn-list">
|
||||
{% for app in site.socialColors %}
|
||||
<a class="btn btn-icon btn-{{ app[0] }}">{% include "ui/icon.html" icon=app[1].icon %}</a>
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h3 class="card-title">Social colors</h3>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="btn-list">
|
||||
{% for app in site.socialColors %}
|
||||
<a class="btn btn-{{ app[0] }}">{% include "ui/icon.html" icon=app[1].icon %} {{ app[1].title }}</a>
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% assign actions = 'edit,copy,settings,clipboard,x' | split: ',' %}
|
||||
<div class="col-md-6">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h3 class="card-title">Action buttons</h3>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="btn-actions">
|
||||
{% for action in actions %}
|
||||
<a class="btn btn-action">{% include "ui/icon.html" icon=action %}</a>
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h3 class="card-title">Buttons with icon</h3>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="btn-list">
|
||||
<a class="btn btn-animate-icon">Save {% include "ui/icon.html" icon="arrow-right" class="icon-end" %}</a>
|
||||
<a class="btn btn-animate-icon btn-animate-icon-rotate">{% include "ui/icon.html" icon="plus" %} Add</a>
|
||||
<a class="btn btn-animate-icon btn-animate-icon-shake">{% include "ui/icon.html" icon="bell" %} Notifications</a>
|
||||
<a class="btn btn-animate-icon btn-animate-icon-rotate">{% include "ui/icon.html" icon="settings" %} Settings</a>
|
||||
<a class="btn btn-animate-icon btn-animate-icon-pulse">{% include "ui/icon.html" icon="heart" %} Love</a>
|
||||
<a class="btn btn-animate-icon btn-animate-icon-rotate">{% include "ui/icon.html" icon="x" %} Close</a>
|
||||
<a class="btn btn-animate-icon btn-animate-icon-tada">{% include "ui/icon.html" icon="check" %} Confirm</a>
|
||||
<a class="btn btn-animate-icon">Next {% include "ui/icon.html" icon="chevron-right" class="icon-end" %}</a>
|
||||
<a class="btn btn-animate-icon btn-animate-icon-move-start">{% include "ui/icon.html" icon="chevron-left" %} Previous</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h3 class="card-title">Buttons size</h3>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="space-y">
|
||||
{% assign sizes = 'sm,md,lg,xl' | split: ',' %}
|
||||
{% for size in sizes %}
|
||||
<div class="btn-list">
|
||||
{% include "ui/button.html" size=size text="Button" %}
|
||||
{% include "ui/button.html" size=size icon="star" icon-only %}
|
||||
{% include "ui/button.html" size=size icon="star" text="Button" %}
|
||||
{% include "ui/button.html" size=size icon-end="star" text="Button" %}
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -0,0 +1,152 @@
|
||||
---
|
||||
// Port of preview/pages/card-actions.html.
|
||||
import DefaultLayout from '@shared/layouts/DefaultLayout.astro';
|
||||
import BodyPlaceholder from '@shared/components/cards/BodyPlaceholder.astro';
|
||||
import Button from '@shared/components/Button.astro';
|
||||
import Avatar from '@shared/components/ui/Avatar.astro';
|
||||
import Icon from '@shared/components/Icon.astro';
|
||||
import people from '@data/people.json';
|
||||
|
||||
const person0 = people[0];
|
||||
const person3 = people[3];
|
||||
---
|
||||
|
||||
<DefaultLayout title="Card actions" pageHeader="Card actions" pageMenu="base.cards.actions">
|
||||
<div class="row row-cards">
|
||||
<div class="col-md-6">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h3 class="card-title">Sample card</h3>
|
||||
</div>
|
||||
<BodyPlaceholder />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-md-6">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h3 class="card-title">Card with action</h3>
|
||||
<div class="card-actions">
|
||||
<Button color="primary" icon="plus" text="Add new" />
|
||||
</div>
|
||||
</div>
|
||||
<BodyPlaceholder />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-md-6">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h3 class="card-title">Cart title</h3>
|
||||
<div class="card-actions">
|
||||
<Button icon="phone" text="Phone" />
|
||||
<Button icon="mail" text="Email" />
|
||||
</div>
|
||||
</div>
|
||||
<BodyPlaceholder />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-md-6">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<div>
|
||||
<div class="row align-items-center">
|
||||
<div class="col-auto">
|
||||
<Avatar person={person0} />
|
||||
</div>
|
||||
<div class="col">
|
||||
<div class="card-title">{person0.full_name}</div>
|
||||
<div class="card-subtitle">{person0.job_title}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-actions">
|
||||
<Button icon="phone" text="Phone" />
|
||||
<Button icon="mail" text="Email" />
|
||||
</div>
|
||||
</div>
|
||||
<BodyPlaceholder />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-md-6">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<div>
|
||||
<h3 class="card-title">
|
||||
With description
|
||||
</h3>
|
||||
<p class="card-subtitle">
|
||||
Lorem ipsum dolor sit amet consectetur adipisicing.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<BodyPlaceholder />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-md-6">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<div>
|
||||
<h3 class="card-title">
|
||||
With description and action
|
||||
</h3>
|
||||
<p class="card-subtitle">
|
||||
Lorem ipsum dolor sit amet consectetur adipisicing.
|
||||
</p>
|
||||
</div>
|
||||
<div class="card-actions">
|
||||
<Button color="primary" text="Create new job" />
|
||||
</div>
|
||||
</div>
|
||||
<BodyPlaceholder />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-md-6">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<div>
|
||||
<div class="row align-items-center">
|
||||
<div class="col-auto">
|
||||
<Avatar person={person3} />
|
||||
</div>
|
||||
<div class="col">
|
||||
<div class="card-title">{person3.full_name}</div>
|
||||
<div class="card-subtitle">{person3.job_title}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-actions">
|
||||
<div class="dropdown">
|
||||
<a href="#" class="btn-action dropdown-toggle" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><Icon name="dots-vertical" /></a>
|
||||
<div class="dropdown-menu dropdown-menu-end">
|
||||
<a class="dropdown-item" href="#">Edit user</a>
|
||||
<a class="dropdown-item" href="#">Change permissions</a>
|
||||
<a class="dropdown-item text-danger" href="#">Delete user</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<BodyPlaceholder />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-md-6">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h3 class="card-title">Card actions</h3>
|
||||
<div class="card-actions btn-actions">
|
||||
<a href="#" class="btn-action"><Icon name="refresh" /></a>
|
||||
<a href="#" class="btn-action"><Icon name="chevron-up" /></a>
|
||||
<a href="#" class="btn-action"><Icon name="dots-vertical" /></a>
|
||||
<a href="#" class="btn-action"><Icon name="x" /></a>
|
||||
</div>
|
||||
</div>
|
||||
<BodyPlaceholder />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</DefaultLayout>
|
||||
@@ -1,147 +0,0 @@
|
||||
---
|
||||
title: Card actions
|
||||
page-header: Card actions
|
||||
page-menu: base.cards.actions
|
||||
layout: default
|
||||
permalink: card-actions.html
|
||||
---
|
||||
|
||||
<div class="row row-cards">
|
||||
<div class="col-md-6">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h3 class="card-title">Sample card</h3>
|
||||
</div>
|
||||
{% include "cards/body-placeholder.html" %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-md-6">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h3 class="card-title">Card with action</h3>
|
||||
<div class="card-actions">
|
||||
{% include "ui/button.html" color="primary" icon="plus" text="Add new" %}
|
||||
</div>
|
||||
</div>
|
||||
{% include "cards/body-placeholder.html" %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-md-6">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h3 class="card-title">Cart title</h3>
|
||||
<div class="card-actions">
|
||||
{% include "ui/button.html" icon="phone" text="Phone" %}
|
||||
{% include "ui/button.html" icon="mail" text="Email" %}
|
||||
</div>
|
||||
</div>
|
||||
{% include "cards/body-placeholder.html" %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{% assign person = people[0] %}
|
||||
<div class="col-md-6">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<div>
|
||||
<div class="row align-items-center">
|
||||
<div class="col-auto">
|
||||
{% include "ui/avatar.html" person=person %}
|
||||
</div>
|
||||
<div class="col">
|
||||
<div class="card-title">{{ person.full_name }}</div>
|
||||
<div class="card-subtitle">{{ person.job_title }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-actions">
|
||||
{% include "ui/button.html" icon="phone" text="Phone" %}
|
||||
{% include "ui/button.html" icon="mail" text="Email" %}
|
||||
</div>
|
||||
</div>
|
||||
{% include "cards/body-placeholder.html" %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-md-6">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<div>
|
||||
<h3 class="card-title">
|
||||
With description
|
||||
</h3>
|
||||
<p class="card-subtitle">
|
||||
Lorem ipsum dolor sit amet consectetur adipisicing.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
{% include "cards/body-placeholder.html" %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-md-6">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<div>
|
||||
<h3 class="card-title">
|
||||
With description and action
|
||||
</h3>
|
||||
<p class="card-subtitle">
|
||||
Lorem ipsum dolor sit amet consectetur adipisicing.
|
||||
</p>
|
||||
</div>
|
||||
<div class="card-actions">
|
||||
{% include "ui/button.html" color="primary" text="Create new job" %}
|
||||
</div>
|
||||
</div>
|
||||
{% include "cards/body-placeholder.html" %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{% assign person = people[3] %}
|
||||
<div class="col-md-6">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<div>
|
||||
<div class="row align-items-center">
|
||||
<div class="col-auto">
|
||||
{% include "ui/avatar.html" person=person %}
|
||||
</div>
|
||||
<div class="col">
|
||||
<div class="card-title">{{ person.full_name }}</div>
|
||||
<div class="card-subtitle">{{ person.job_title }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-actions">
|
||||
<div class="dropdown">
|
||||
<a href="#" class="btn-action dropdown-toggle" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">{% include "ui/icon.html" icon="dots-vertical" %}</a>
|
||||
<div class="dropdown-menu dropdown-menu-end">
|
||||
<a class="dropdown-item" href="#">Edit user</a>
|
||||
<a class="dropdown-item" href="#">Change permissions</a>
|
||||
<a class="dropdown-item text-danger" href="#">Delete user</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% include "cards/body-placeholder.html" %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-md-6">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h3 class="card-title">Card actions</h3>
|
||||
<div class="card-actions btn-actions">
|
||||
<a href="#" class="btn-action" >{% include "ui/icon.html" icon="refresh" %}</a>
|
||||
<a href="#" class="btn-action" >{% include "ui/icon.html" icon="chevron-up" %}</a>
|
||||
<a href="#" class="btn-action" >{% include "ui/icon.html" icon="dots-vertical" %}</a>
|
||||
<a href="#" class="btn-action" >{% include "ui/icon.html" icon="x" %}</a>
|
||||
</div>
|
||||
</div>
|
||||
{% include "cards/body-placeholder.html" %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -0,0 +1,92 @@
|
||||
---
|
||||
// Port of preview/pages/card-gradients.html (layout: default)
|
||||
import DefaultLayout from '@shared/layouts/DefaultLayout.astro';
|
||||
import Welcome from '@shared/components/cards/Welcome.astro';
|
||||
import DeleteConfirm from '@shared/components/cards/DeleteConfirm.astro';
|
||||
import SuccessMessage from '@shared/components/cards/SuccessMessage.astro';
|
||||
import PricingPlan from '@shared/components/cards/PricingPlan.astro';
|
||||
import StatGradient from '@shared/components/cards/StatGradient.astro';
|
||||
import HappyBirthday from '@shared/components/cards/HappyBirthday.astro';
|
||||
import YouWin from '@shared/components/cards/YouWin.astro';
|
||||
import Weather from '@shared/components/cards/Weather.astro';
|
||||
import ProfileContact from '@shared/components/cards/ProfileContact.astro';
|
||||
import SmallStats from '@shared/components/cards/SmallStats.astro';
|
||||
import people from '@data/people.json';
|
||||
---
|
||||
|
||||
<DefaultLayout title="Card Gradients" pageHeader="Card Gradients" pageMenu="base.cards.gradients" pageLibs={['apexcharts']}>
|
||||
<div class="row row-cards">
|
||||
<div class="col-md-6">
|
||||
<div class="row row-cards">
|
||||
<div class="col-12">
|
||||
<Welcome />
|
||||
</div>
|
||||
<div class="col-12">
|
||||
<div class="row">
|
||||
<div class="col-6">
|
||||
<div class="row row-cards">
|
||||
<div class="col-12">
|
||||
<DeleteConfirm />
|
||||
</div>
|
||||
<div class="col-12">
|
||||
<SuccessMessage />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-6">
|
||||
<div class="row row-cards">
|
||||
<div class="col-12">
|
||||
<PricingPlan />
|
||||
</div>
|
||||
<div class="col-12">
|
||||
<StatGradient title="Earned" value="$2,847" icon="credit-card" color="success" progress={75} />
|
||||
</div>
|
||||
<div class="col-12">
|
||||
<StatGradient title="Pending Orders" value="47" icon="clock" color="yellow" progress={38} />
|
||||
</div>
|
||||
<div class="col-12">
|
||||
<StatGradient title="Cancelled Orders" value="12" icon="shopping-cart-x" color="red" progress={8} />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-3">
|
||||
<div class="row row-cards">
|
||||
<div class="col-12">
|
||||
<HappyBirthday />
|
||||
</div>
|
||||
<div class="col-12">
|
||||
<YouWin />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-3">
|
||||
<div class="row row-cards">
|
||||
<div class="col-12">
|
||||
<Weather city="Warsaw, PL" temperature={3} color="rain" icon="cloud-rain" description="Cloudy morning" />
|
||||
</div>
|
||||
<div class="col-12">
|
||||
<Weather city="Oslo, NO" temperature="-5" color="snow" icon="cloud" description="Snowy day" />
|
||||
</div>
|
||||
<div class="col-12">
|
||||
<Weather city="Dubai, AE" temperature="32" color="sun" icon="sun" description="Sunny day" />
|
||||
</div>
|
||||
<div class="col-12">
|
||||
<ProfileContact person={people[6]} />
|
||||
</div>
|
||||
<div class="col-12">
|
||||
<SmallStats chartType="line" chartData="11,16,13,20,17,24,19,23,16,20,13,17,11,19" color="primary" id="chart1" class="card-gradient card-gradient-end card-gradient-primary" />
|
||||
</div>
|
||||
<div class="col-12">
|
||||
<SmallStats id="sales" icon="arrow-up" color="green" title="$5,256.99" description="Revenue last 30 days" descriptionValue="+4%" class="card-gradient card-gradient-end card-gradient-green" />
|
||||
</div>
|
||||
<div class="col-12">
|
||||
<SmallStats id="orders" icon="arrow-down" color="red" title="342" description="Sales last 30 days" descriptionValue="-4.3%" descriptionValueColor="red" class="card-gradient card-gradient-end card-gradient-red" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</DefaultLayout>
|
||||
@@ -1,97 +0,0 @@
|
||||
---
|
||||
title: Card Gradients
|
||||
page-header: Card Gradients
|
||||
page-menu: base.cards.gradients
|
||||
layout: default
|
||||
permalink: card-gradients.html
|
||||
page-libs: [apexcharts]
|
||||
---
|
||||
|
||||
{% assign gradients = 'sunset,rainbow,ocean,mellow,disco,psychedelic' | split: ',' %}
|
||||
|
||||
<div class="row row-cards">
|
||||
<div class="col-md-6">
|
||||
<div class="row row-cards">
|
||||
<div class="col-12">
|
||||
{% include "cards/welcome.html" %}
|
||||
</div>
|
||||
<div class="col-12">
|
||||
<div class="row">
|
||||
<div class="col-6">
|
||||
<div class="row row-cards">
|
||||
<div class="col-12">
|
||||
{% include "cards/delete-confirm.html" %}
|
||||
</div>
|
||||
<div class="col-12">
|
||||
{% include "cards/success-message.html" %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-6">
|
||||
<div class="row row-cards">
|
||||
<div class="col-12">
|
||||
{% include "cards/pricing-plan.html" %}
|
||||
</div>
|
||||
<div class="col-12">
|
||||
{% include "cards/stat-gradient.html" title="Earned" value="$2,847" icon="credit-card" color="success"
|
||||
progress=75 %}
|
||||
</div>
|
||||
<div class="col-12">
|
||||
{% include "cards/stat-gradient.html" title="Pending Orders" value="47" icon="clock" color="yellow"
|
||||
progress=38 %}
|
||||
</div>
|
||||
<div class="col-12">
|
||||
{% include "cards/stat-gradient.html" title="Cancelled Orders" value="12" icon="shopping-cart-x" color="red"
|
||||
progress=8 %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-3">
|
||||
<div class="row row-cards">
|
||||
<div class="col-12">
|
||||
{% include "cards/happy-birthday.html" %}
|
||||
</div>
|
||||
<div class="col-12">
|
||||
{% include "cards/you-win.html" %}
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-3">
|
||||
<div class="row row-cards">
|
||||
<div class="col-12">
|
||||
{% include "cards/weather.html" city="Warsaw, PL" temperature=3 color="rain" icon="cloud-rain"
|
||||
description="Cloudy morning" %}
|
||||
</div>
|
||||
<div class="col-12">
|
||||
{% include "cards/weather.html" city="Oslo, NO" temperature="-5" color="snow" icon="cloud"
|
||||
description="Snowy day" %}
|
||||
</div>
|
||||
<div class="col-12">
|
||||
{% include "cards/weather.html" city="Dubai, AE" temperature="32" color="sun" icon="sun" description="Sunny
|
||||
day" %}
|
||||
</div>
|
||||
<div class="col-12">
|
||||
{% include "cards/profile-contact.html" person=people[6] %}
|
||||
</div>
|
||||
<div class="col-12">
|
||||
{% include "cards/small-stats.html" chart-type="line" chart-data="11,16,13,20,17,24,19,23,16,20,13,17,11,19"
|
||||
color="primary" id="chart1" class="card-gradient card-gradient-end card-gradient-primary" %}
|
||||
</div>
|
||||
<div class="col-12">
|
||||
{% include "cards/small-stats.html" id="sales" icon="arrow-up" color="green" title="$5,256.99"
|
||||
description="Revenue last 30 days" description-value="+4%" class="card-gradient card-gradient-end
|
||||
card-gradient-green" %}
|
||||
</div>
|
||||
<div class="col-12">
|
||||
{% include "cards/small-stats.html" id="orders" icon="arrow-down" color="red" title="342" description="Sales
|
||||
last 30 days" description-value="-4.3%" description-value-color="red" class="card-gradient card-gradient-end
|
||||
card-gradient-red" %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -0,0 +1,29 @@
|
||||
---
|
||||
// Port of preview/pages/cards-masonry.html.
|
||||
// The masonry library is loaded via page-libs=[masonry] (BaseLayout emits the
|
||||
// CDN <script> from core/libs.json); auto-init is triggered by the
|
||||
// data-masonry attribute, so there is no page-level init script.
|
||||
import DefaultLayout from '@shared/layouts/DefaultLayout.astro';
|
||||
import BodyPlaceholder from '@shared/components/cards/BodyPlaceholder.astro';
|
||||
|
||||
const heights = [200, 150, 400, 300, 350, 600, 700, 200, 150, 250, 50, 400, 300, 200];
|
||||
---
|
||||
|
||||
<DefaultLayout
|
||||
title="Cards Masonry"
|
||||
pageHeader="Cards Masonry"
|
||||
pageMenu="base.cards.masonry"
|
||||
pageLibs={['masonry']}
|
||||
>
|
||||
<div class="row row-cards" data-masonry={'{"percentPosition": true }'}>
|
||||
{
|
||||
heights.map((height) => (
|
||||
<div class="col-sm-6 col-lg-4">
|
||||
<div class="card">
|
||||
<BodyPlaceholder height={height} />
|
||||
</div>
|
||||
</div>
|
||||
))
|
||||
}
|
||||
</div>
|
||||
</DefaultLayout>
|
||||
@@ -1,21 +0,0 @@
|
||||
---
|
||||
title: Cards Masonry
|
||||
page-header: Cards Masonry
|
||||
page-menu: base.cards.masonry
|
||||
page-libs: [masonry]
|
||||
layout: default
|
||||
permalink: cards-masonry.html
|
||||
---
|
||||
|
||||
{% assign heights = '200,150,400,300,350,600,700,200,150,250,50,400,300,200' | split: ',' %}
|
||||
|
||||
<div class="row row-cards" data-masonry='{"percentPosition": true }'>
|
||||
{% for height in heights %}
|
||||
<div class="col-sm-6 col-lg-4">
|
||||
<div class="card">
|
||||
{% include "cards/body-placeholder.html" height=height %}
|
||||
</div>
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
|
||||
@@ -0,0 +1,280 @@
|
||||
---
|
||||
// Port of preview/pages/cards.html (layout: default)
|
||||
import DefaultLayout from '@shared/layouts/DefaultLayout.astro';
|
||||
import Icon from '@shared/components/Icon.astro';
|
||||
import Card from '@shared/components/cards/Card.astro';
|
||||
import CardImage from '@shared/components/cards/CardImage.astro';
|
||||
import CardTabs from '@shared/components/cards/CardTabs.astro';
|
||||
import CardRibbonText from '@shared/components/cards/CardRibbonText.astro';
|
||||
import CardRibbonTop from '@shared/components/cards/CardRibbonTop.astro';
|
||||
import CardBackgroundIcon from '@shared/components/cards/CardBackgroundIcon.astro';
|
||||
import CreditCard from '@shared/components/cards/CreditCard.astro';
|
||||
import EmptyTeam from '@shared/components/cards/EmptyTeam.astro';
|
||||
import BodyPlaceholder from '@shared/components/cards/BodyPlaceholder.astro';
|
||||
|
||||
const cardsStack = ['First', 'Second', 'Third'];
|
||||
const cardsStackColors = ['red', 'green', 'blue'];
|
||||
---
|
||||
|
||||
<DefaultLayout title="Cards" pageHeader="Cards" pageMenu="base.cards.base">
|
||||
<div class="row row-cards">
|
||||
<div class="col-md-6 col-lg-3">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h3 class="card-title">Card title</h3>
|
||||
</div>
|
||||
<div class="card-body">Simple card</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-6 col-lg-3">
|
||||
<div class="card">
|
||||
<div class="card-header card-header-light">
|
||||
<h3 class="card-title">Card title</h3>
|
||||
</div>
|
||||
<div class="card-body">Card with header background</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-6 col-lg-3">
|
||||
<div class="card card-borderless">
|
||||
<div class="card-body">
|
||||
<h3 class="card-title">Card title</h3>
|
||||
<div>Card without border</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-6 col-lg-3">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h3 class="card-title">Card title <span class="card-subtitle">Subtitle</span></h3>
|
||||
</div>
|
||||
<div class="card-body">Card with title and subtitle</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-md-6 col-lg-3">
|
||||
<a href="#" class="card card-link">
|
||||
<div class="card-body">Default hover effect</div>
|
||||
</a>
|
||||
</div>
|
||||
<div class="col-md-6 col-lg-3">
|
||||
<a href="#" class="card card-link card-link-rotate">
|
||||
<div class="card-body">Rotate hover effect</div>
|
||||
</a>
|
||||
</div>
|
||||
<div class="col-md-6 col-lg-3">
|
||||
<a href="#" class="card card-link card-link-pop">
|
||||
<div class="card-body">Pop hover effect</div>
|
||||
</a>
|
||||
</div>
|
||||
<div class="col-md-6 col-lg-3"></div>
|
||||
|
||||
<div class="col-md-6 col-lg-3">
|
||||
<div class="card card-rotate-end">
|
||||
<div class="card-body">Card rotate end</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-6 col-lg-3">
|
||||
<div class="card card-rotate-start">
|
||||
<div class="card-body">Card rotate start</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-6 col-lg-3">
|
||||
<div class="card card-active">
|
||||
<div class="card-body">
|
||||
<p>This is a card with active state.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-6 col-lg-3">
|
||||
<div class="card card-inactive">
|
||||
<div class="card-body">
|
||||
<p>This is some text inactive state.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-md-6 col-lg-3">
|
||||
<div class="card">
|
||||
<div class="card-stamp">
|
||||
<div class="card-stamp-icon bg-yellow">
|
||||
<Icon name="bell" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<h3 class="card-title">Card with icon bg</h3>
|
||||
<p class="text-secondary">
|
||||
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto at consectetur culpa ducimus eum fuga
|
||||
fugiat, ipsa iusto, modi nostrum recusandae reiciendis saepe.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-6 col-lg-3">
|
||||
<div class="card bg-primary-lt">
|
||||
<div class="card-body">
|
||||
<h3 class="card-title">Card with primary light background</h3>
|
||||
<p class="text-secondary">
|
||||
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto at consectetur culpa ducimus eum fuga
|
||||
fugiat, ipsa iusto, modi nostrum recusandae reiciendis saepe.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-6 col-lg-3">
|
||||
<CardBackgroundIcon />
|
||||
</div>
|
||||
<div class="col-md-6 col-lg-3">
|
||||
<Card statusTop="danger" title="Card with top status" />
|
||||
</div>
|
||||
<div class="col-md-6 col-lg-3">
|
||||
<Card statusBottom="success" title="Card with bottom status" />
|
||||
</div>
|
||||
<div class="col-md-6 col-lg-3">
|
||||
<Card statusStart="primary" title="Card with side status" />
|
||||
</div>
|
||||
|
||||
<div class="col-md-6 col-lg-3">
|
||||
<CardRibbonTop />
|
||||
</div>
|
||||
<div class="col-md-6 col-lg-3">
|
||||
<CardRibbonText />
|
||||
</div>
|
||||
<div class="col-md-6 col-lg-3">
|
||||
<Card progress title="Card with progress bar" />
|
||||
</div>
|
||||
<div class="col-md-6 col-lg-3">
|
||||
<Card class="card-stacked" title="Stacked card" />
|
||||
</div>
|
||||
<div class="col-lg-6">
|
||||
<CardImage title="Card with left side image" />
|
||||
</div>
|
||||
<div class="col-lg-6">
|
||||
<CardImage title="Card with right side image" right imgId={3} />
|
||||
</div>
|
||||
<div class="col-md-6 col-lg-3">
|
||||
<Card imgTop title="Card with top image" />
|
||||
</div>
|
||||
<div class="col-md-6 col-lg-3">
|
||||
<Card imgBottom title="Card with bottom image" />
|
||||
</div>
|
||||
|
||||
<div class="col-md-6 col-lg-3">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<h3 class="card-title">Card with footer</h3>
|
||||
<p class="text-secondary">
|
||||
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam deleniti fugit incidunt, iste, itaque
|
||||
minima neque pariatur perferendis sed suscipit velit vitae voluptatem.
|
||||
</p>
|
||||
</div>
|
||||
<div class="card-footer">This is standard card footer</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-6 col-lg-3">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<h3 class="card-title">Card with transparent footer</h3>
|
||||
<p class="text-secondary">
|
||||
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam deleniti fugit incidunt, iste, itaque
|
||||
minima neque pariatur perferendis sed suscipit velit vitae voluptatem.
|
||||
</p>
|
||||
</div>
|
||||
<div class="card-footer card-footer-transparent">This is transparent card footer</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-6 col-lg-3"><Card title="Card with footer button" footerButton /></div>
|
||||
<div class="col-md-6 col-lg-3"><Card title="Card with footer buttons" footerButtons /></div>
|
||||
|
||||
<div class="col-md-6 col-lg-3"><Card footerElements="more,>switch" /></div>
|
||||
<div class="col-md-6 col-lg-3"><Card footerElements=">avatars" /></div>
|
||||
|
||||
<div class="col-md-6 col-lg-4"><Card headerTabs /></div>
|
||||
<div class="col-md-6 col-lg-4"><Card headerPills /></div>
|
||||
<div class="col-md-6 col-lg-4"><CardTabs /></div>
|
||||
<div class="col-md-6 col-lg-4"><CardTabs bottom id="bottom" /></div>
|
||||
|
||||
<div class="col-12">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h3 class="card-title">Cards inside card</h3>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="row row-cards">
|
||||
{
|
||||
cardsStack.map((name, i) => (
|
||||
<div class="col-md">
|
||||
<div class="card">
|
||||
<div class={`card-status-top bg-${cardsStackColors[i]}`} />
|
||||
<div class="card-header">
|
||||
<h3 class="card-title">{name} card</h3>
|
||||
</div>
|
||||
<BodyPlaceholder />
|
||||
</div>
|
||||
</div>
|
||||
))
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-12">
|
||||
<div class="card-group">
|
||||
{
|
||||
cardsStack.map((name) => (
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h3 class="card-title">{name} card</h3>
|
||||
</div>
|
||||
<BodyPlaceholder />
|
||||
</div>
|
||||
))
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-12">
|
||||
<div class="row row-cards row-deck">
|
||||
<div class="col">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h3 class="card-title">Card title</h3>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
This is a wider card with supporting text below as a natural lead-in to additional content. This content
|
||||
is a little bit longer.
|
||||
</div>
|
||||
<div class="card-footer">Last updated 3 mins ago</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h3 class="card-title">Card title</h3>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
This card has supporting text below as a natural lead-in to additional content.
|
||||
</div>
|
||||
<div class="card-footer">Last updated 3 mins ago</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h3 class="card-title">Card with very long content</h3>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
This is a wider card with supporting text below as a natural lead-in to additional content. This card has
|
||||
even longer content than the first to show that equal height action.
|
||||
</div>
|
||||
<div class="card-footer">Last updated 3 mins ago</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-lg-4"><Card empty /></div>
|
||||
<div class="col-lg-4"><EmptyTeam /></div>
|
||||
<div class="col-lg-4"><CreditCard /></div>
|
||||
</div>
|
||||
</DefaultLayout>
|
||||
@@ -1,261 +0,0 @@
|
||||
---
|
||||
title: Cards
|
||||
page-header: Cards
|
||||
page-menu: base.cards.base
|
||||
layout: default
|
||||
permalink: cards.html
|
||||
---
|
||||
|
||||
{% assign cards-stack = 'First,Second,Third' | split: ',' %}
|
||||
{% assign cards-stack-colors = 'red,green,blue' | split: ',' %}
|
||||
|
||||
<div class="row row-cards">
|
||||
<div class="col-md-6 col-lg-3">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h3 class="card-title">Card title</h3>
|
||||
</div>
|
||||
<div class="card-body">Simple card</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-6 col-lg-3">
|
||||
<div class="card">
|
||||
<div class="card-header card-header-light">
|
||||
<h3 class="card-title">Card title</h3>
|
||||
</div>
|
||||
<div class="card-body">Card with header background</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-6 col-lg-3">
|
||||
<div class="card card-borderless">
|
||||
<div class="card-body">
|
||||
<h3 class="card-title">Card title</h3>
|
||||
<div>Card without border</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-6 col-lg-3">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h3 class="card-title">Card title <span class="card-subtitle">Subtitle</span></h3>
|
||||
</div>
|
||||
<div class="card-body">Card with title and subtitle</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-md-6 col-lg-3">
|
||||
<a href="#" class="card card-link">
|
||||
<div class="card-body">Default hover effect</div>
|
||||
</a>
|
||||
</div>
|
||||
<div class="col-md-6 col-lg-3">
|
||||
<a href="#" class="card card-link card-link-rotate">
|
||||
<div class="card-body">Rotate hover effect</div>
|
||||
</a>
|
||||
</div>
|
||||
<div class="col-md-6 col-lg-3">
|
||||
<a href="#" class="card card-link card-link-pop">
|
||||
<div class="card-body">Pop hover effect</div>
|
||||
</a>
|
||||
</div>
|
||||
<div class="col-md-6 col-lg-3">
|
||||
</div>
|
||||
|
||||
<div class="col-md-6 col-lg-3">
|
||||
<div class="card card-rotate-end">
|
||||
<div class="card-body">Card rotate end</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-6 col-lg-3">
|
||||
<div class="card card-rotate-start">
|
||||
<div class="card-body">Card rotate start</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-6 col-lg-3">
|
||||
<div class="card card-active">
|
||||
<div class="card-body">
|
||||
<p>This is a card with active state.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-6 col-lg-3">
|
||||
<div class="card card-inactive">
|
||||
<div class="card-body">
|
||||
<p>This is some text inactive state.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-md-6 col-lg-3">
|
||||
<div class="card">
|
||||
<div class="card-stamp">
|
||||
<div class="card-stamp-icon bg-yellow">
|
||||
{% include "ui/icon.html" icon="bell" %}
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<h3 class="card-title">Card with icon bg</h3>
|
||||
<p class="text-secondary">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto at consectetur culpa ducimus eum fuga fugiat, ipsa iusto, modi nostrum recusandae reiciendis saepe.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-6 col-lg-3">
|
||||
<div class="card bg-primary-lt">
|
||||
<div class="card-body">
|
||||
<h3 class="card-title">Card with primary light background</h3>
|
||||
<p class="text-secondary">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto at consectetur culpa ducimus eum fuga fugiat, ipsa iusto, modi nostrum recusandae reiciendis saepe.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-6 col-lg-3">
|
||||
{% include "cards/card-background-icon.html" %}
|
||||
</div>
|
||||
<div class="col-md-6 col-lg-3">
|
||||
{% include "cards/card.html" status-top="danger" title="Card with top status" %}
|
||||
</div>
|
||||
<div class="col-md-6 col-lg-3">
|
||||
{% include "cards/card.html" status-bottom="success" title="Card with bottom status" %}
|
||||
</div>
|
||||
<div class="col-md-6 col-lg-3">
|
||||
{% include "cards/card.html" status-start="primary" title="Card with side status" %}
|
||||
</div>
|
||||
|
||||
<div class="col-md-6 col-lg-3">
|
||||
{% include "cards/card-ribbon-top.html" %}
|
||||
</div>
|
||||
<div class="col-md-6 col-lg-3">
|
||||
{% include "cards/card-ribbon-text.html" %}
|
||||
</div>
|
||||
<div class="col-md-6 col-lg-3">
|
||||
{% include "cards/card.html" progress=true title="Card with progress bar" %}
|
||||
</div>
|
||||
<div class="col-md-6 col-lg-3">
|
||||
{% include "cards/card.html" class="card-stacked" title="Stacked card" %}
|
||||
</div>
|
||||
<div class="col-lg-6">
|
||||
{% include "cards/card-image.html" title="Card with left side image" %}
|
||||
</div>
|
||||
<div class="col-lg-6">
|
||||
{% include "cards/card-image.html" title="Card with right side image" right=true img-id=3 %}
|
||||
</div>
|
||||
<div class="col-md-6 col-lg-3">
|
||||
{% include "cards/card.html" img-top=true title="Card with top image" %}
|
||||
</div>
|
||||
<div class="col-md-6 col-lg-3">
|
||||
{% include "cards/card.html" img-bottom=true title="Card with bottom image" %}
|
||||
</div>
|
||||
|
||||
<div class="col-md-6 col-lg-3">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<h3 class="card-title">Card with footer</h3>
|
||||
<p class="text-secondary">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam deleniti fugit incidunt, iste, itaque minima
|
||||
neque pariatur perferendis sed suscipit velit vitae voluptatem.</p>
|
||||
</div>
|
||||
<div class="card-footer">
|
||||
This is standard card footer
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-6 col-lg-3">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<h3 class="card-title">Card with transparent footer</h3>
|
||||
<p class="text-secondary">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam deleniti fugit incidunt, iste, itaque minima
|
||||
neque pariatur perferendis sed suscipit velit vitae voluptatem.</p>
|
||||
</div>
|
||||
<div class="card-footer card-footer-transparent">
|
||||
This is transparent card footer
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-6 col-lg-3">{% include "cards/card.html" title="Card with footer button" footer-button=true %}</div>
|
||||
<div class="col-md-6 col-lg-3">{% include "cards/card.html" title="Card with footer buttons" footer-buttons=true %}</div>
|
||||
|
||||
<div class="col-md-6 col-lg-3">{% include "cards/card.html" footer-elements="more,>switch" %}</div>
|
||||
<div class="col-md-6 col-lg-3">{% include "cards/card.html" footer-elements=">avatars" %}</div>
|
||||
|
||||
<div class="col-md-6 col-lg-4">{% include "cards/card.html" header-tabs=true %}</div>
|
||||
<div class="col-md-6 col-lg-4">{% include "cards/card.html" header-pills=true %}</div>
|
||||
<div class="col-md-6 col-lg-4">{% include "cards/card-tabs.html" %}</div>
|
||||
<div class="col-md-6 col-lg-4">{% include "cards/card-tabs.html" bottom=true id="bottom" %}</div>
|
||||
|
||||
|
||||
<div class="col-12">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h3 class="card-title">Cards inside card</h3>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="row row-cards">
|
||||
{% for i in cards-stack %}
|
||||
<div class="col-md">
|
||||
<div class="card">
|
||||
<div class="card-status-top bg-{{ cards-stack-colors[forloop.index0] }}"></div>
|
||||
<div class="card-header">
|
||||
<h3 class="card-title">{{ i }} card</h3>
|
||||
</div>
|
||||
{% include "cards/body-placeholder.html" %}
|
||||
</div>
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-12">
|
||||
<div class="card-group">
|
||||
{% for i in cards-stack %}
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h3 class="card-title">{{ i }} card</h3>
|
||||
</div>
|
||||
{% include "cards/body-placeholder.html" %}
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-12">
|
||||
<div class="row row-cards row-deck">
|
||||
<div class="col">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h3 class="card-title">Card title</h3>
|
||||
</div>
|
||||
<div class="card-body">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</div>
|
||||
<div class="card-footer">
|
||||
Last updated 3 mins ago
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h3 class="card-title">Card title</h3>
|
||||
</div>
|
||||
<div class="card-body">This card has supporting text below as a natural lead-in to additional content.</div>
|
||||
<div class="card-footer">
|
||||
Last updated 3 mins ago
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h3 class="card-title">Card with very long content</h3>
|
||||
</div>
|
||||
<div class="card-body">This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</div>
|
||||
<div class="card-footer">
|
||||
Last updated 3 mins ago
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-lg-4">{% include "cards/card.html" empty=true %}</div>
|
||||
<div class="col-lg-4">{% include "cards/empty-team.html" %}</div>
|
||||
<div class="col-lg-4">{% include "cards/credit-card.html" %}</div>
|
||||
</div>
|
||||
@@ -0,0 +1,58 @@
|
||||
---
|
||||
import DefaultLayout from '@shared/layouts/DefaultLayout.astro';
|
||||
import CarouselCard from '@shared/components/cards/CarouselCard.astro';
|
||||
---
|
||||
|
||||
<DefaultLayout title="Carousel" pageHeader="Carousel" pageMenu="base.carousel">
|
||||
<div class="row row-cards">
|
||||
<div class="col-md-6">
|
||||
<CarouselCard id="default" />
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<CarouselCard id="indicators" title="Carousel with indicators" indicators offset={5} />
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<CarouselCard id="controls" title="Carousel with controls" controls offset={10} />
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<CarouselCard id="captions" title="Carousel with captions" captions controls offset={15} />
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<CarouselCard id="indicators-dot" title="Carousel with dot indicators" indicators indicatorsDot offset={20} fade />
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<CarouselCard
|
||||
id="indicators-thumb"
|
||||
title="Carousel with thumbnail indicators"
|
||||
indicators
|
||||
indicatorsThumb
|
||||
indicatorsThumbRatio
|
||||
offset={25}
|
||||
fade
|
||||
/>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<CarouselCard
|
||||
id="indicators-dot-vertical"
|
||||
title="Carousel with vertical dot indicators"
|
||||
indicators
|
||||
indicatorsVertical
|
||||
indicatorsDot
|
||||
offset={30}
|
||||
fade
|
||||
/>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<CarouselCard
|
||||
id="indicators-thumb-vertical"
|
||||
title="Carousel with vertical thumbnail indicators"
|
||||
indicators
|
||||
indicatorsVertical
|
||||
indicatorsThumb
|
||||
indicatorsThumbRatio
|
||||
offset={22}
|
||||
fade
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</DefaultLayout>
|
||||
@@ -1,34 +0,0 @@
|
||||
---
|
||||
title: Carousel
|
||||
page-header: Carousel
|
||||
page-menu: base.carousel
|
||||
layout: default
|
||||
permalink: carousel.html
|
||||
---
|
||||
|
||||
<div class="row row-cards">
|
||||
<div class="col-md-6">
|
||||
{% include "cards/carousel.html" id="default" %}
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
{% include "cards/carousel.html" id="indicators" title="Carousel with indicators" indicators=true offset=5 %}
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
{% include "cards/carousel.html" id="controls" title="Carousel with controls" controls=true offset=10 %}
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
{% include "cards/carousel.html" id="captions" title="Carousel with captions" captions=true controls=true offset=15 %}
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
{% include "cards/carousel.html" id="indicators-dot" title="Carousel with dot indicators" indicators=true indicators-dot=true offset=20 fade=true %}
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
{% include "cards/carousel.html" id="indicators-thumb" title="Carousel with thumbnail indicators" indicators=true indicators-thumb=true indicators-thumb-ratio=true offset=25 fade=true %}
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
{% include "cards/carousel.html" id="indicators-dot-vertical" title="Carousel with vertical dot indicators" indicators=true indicators-vertical=true indicators-dot=true offset=30 fade=true %}
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
{% include "cards/carousel.html" id="indicators-thumb-vertical" title="Carousel with vertical thumbnail indicators" indicators=true indicators-vertical=true indicators-thumb=true indicators-thumb-ratio=true offset=22 fade=true %}
|
||||
</div>
|
||||
</div>
|
||||
@@ -0,0 +1,18 @@
|
||||
---
|
||||
import ProseLayout from '@shared/layouts/ProseLayout.astro';
|
||||
import { renderMarkdown } from '@shared/lib/render-markdown';
|
||||
// Liquid: {{ changelog | renderContent: "md" }} — `changelog` is the raw
|
||||
// content of core/CHANGELOG.md (shared/e11ty/data.mjs), rendered by
|
||||
// Eleventy's markdown-it. renderMarkdown() mirrors that engine exactly
|
||||
// (markdown-it 14.3.0, { html: true }, indented code blocks disabled) —
|
||||
// output verified byte-identical to the reference build. Injected via
|
||||
// set:html: the fragment contains entities and a literal `{$prefix}` token
|
||||
// that must not be re-escaped or parsed as JSX.
|
||||
import changelog from '../../core/CHANGELOG.md?raw';
|
||||
|
||||
const changelogHtml = renderMarkdown(changelog);
|
||||
---
|
||||
|
||||
<ProseLayout title="Changelog" pageMenu="changelog">
|
||||
<Fragment set:html={changelogHtml} />
|
||||
</ProseLayout>
|
||||
@@ -1,8 +0,0 @@
|
||||
---
|
||||
title: Changelog
|
||||
page-menu: changelog
|
||||
layout: prose
|
||||
permalink: changelog.html
|
||||
---
|
||||
|
||||
{{ changelog | renderContent: "md" }}
|
||||
@@ -0,0 +1,54 @@
|
||||
---
|
||||
// Port of preview/pages/charts.html (layout: default)
|
||||
import DefaultLayout from '@shared/layouts/DefaultLayout.astro';
|
||||
import Activity from '@shared/components/parts/charts/Activity.astro';
|
||||
import SocialReferrals from '@shared/components/cards/charts/SocialReferrals.astro';
|
||||
import Chart from '@shared/components/Chart.astro';
|
||||
import chartsData from '@data/charts.json';
|
||||
|
||||
const demoCharts = Object.entries(
|
||||
chartsData as Record<string, { demo?: boolean; name?: string }>,
|
||||
).filter(([, chart]) => chart && chart.demo);
|
||||
---
|
||||
|
||||
<DefaultLayout
|
||||
title="Charts"
|
||||
pageHeader="Charts"
|
||||
pageMenu="plugins.charts"
|
||||
pageLibs={['apexcharts']}
|
||||
>
|
||||
<div class="row row-cards">
|
||||
<div class="col-lg-12">
|
||||
<Activity />
|
||||
</div>
|
||||
|
||||
<div class="col-12">
|
||||
<SocialReferrals />
|
||||
</div>
|
||||
|
||||
<div class="col-12">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<Chart chartId="tasks-overview" height={20} />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{
|
||||
demoCharts.map(([chartId, chart]) => (
|
||||
<div class="col-lg-6 col-xl-4">
|
||||
<div class="card">
|
||||
{chart.name && (
|
||||
<div class="card-header">
|
||||
<h3 class="card-title">{chart.name}</h3>
|
||||
</div>
|
||||
)}
|
||||
<div class="card-body">
|
||||
<Chart chartId={chartId} height={15} />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
))
|
||||
}
|
||||
</div>
|
||||
</DefaultLayout>
|
||||
@@ -1,44 +0,0 @@
|
||||
---
|
||||
title: Charts
|
||||
page-header: Charts
|
||||
page-menu: plugins.charts
|
||||
page-libs: [apexcharts]
|
||||
layout: default
|
||||
permalink: charts.html
|
||||
---
|
||||
|
||||
<div class="row row-cards">
|
||||
<div class="col-lg-12">
|
||||
{% include "parts/charts/activity.html" %}
|
||||
</div>
|
||||
|
||||
<div class="col-12">
|
||||
{% include "cards/charts/social-referrals.html" %}
|
||||
</div>
|
||||
|
||||
<div class="col-12">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
{% include "ui/chart.html" chart-id="tasks-overview" height=20 %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{% for chart in charts %}
|
||||
{% if chart[1].demo %}
|
||||
{% assign chart-id = chart[0] %}
|
||||
<div class="col-lg-6 col-xl-4">
|
||||
<div class="card">
|
||||
{% if chart[1].name %}
|
||||
<div class="card-header">
|
||||
<h3 class="card-title">{{ chart[1].name }}</h3>
|
||||
</div>
|
||||
{% endif %}
|
||||
<div class="card-body">
|
||||
{% include "ui/chart.html" chart-id=chart-id height=15 %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
</div>
|
||||
@@ -0,0 +1,88 @@
|
||||
---
|
||||
// Port of preview/pages/chat.html (layout: default)
|
||||
// Front matter page-container-class: "flex-fill d-flex flex-column" → containerClass prop.
|
||||
import DefaultLayout from '@shared/layouts/DefaultLayout.astro';
|
||||
import Icon from '@shared/components/Icon.astro';
|
||||
import Avatar from '@shared/components/ui/Avatar.astro';
|
||||
import Chat from '@shared/components/ui/Chat.astro';
|
||||
import people from '@data/people.json';
|
||||
import chats from '@data/chats.json';
|
||||
|
||||
interface Person {
|
||||
full_name?: string;
|
||||
photo?: string;
|
||||
[key: string]: unknown;
|
||||
}
|
||||
|
||||
interface Message {
|
||||
message?: string;
|
||||
[key: string]: unknown;
|
||||
}
|
||||
|
||||
const sidebarPeople = (people as Person[]).slice(0, 10);
|
||||
const messages = chats as Message[];
|
||||
---
|
||||
|
||||
<DefaultLayout
|
||||
title="Chat"
|
||||
pageHeader="Chat"
|
||||
pageMenu="extra.chat"
|
||||
containerClass="flex-fill d-flex flex-column"
|
||||
>
|
||||
<div class="card flex-fill">
|
||||
<div class="row g-0 flex-fill">
|
||||
<div class="col-12 col-lg-5 col-xl-3 border-end d-flex flex-column">
|
||||
<div class="card-header d-none d-md-block">
|
||||
<div class="input-icon">
|
||||
<span class="input-icon-addon"> <Icon name="search" /> </span>
|
||||
<input type="text" value="" class="form-control" placeholder="Search…" aria-label="Search" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-body p-0 scrollable flex-fill">
|
||||
<div class="nav flex-column nav-pills" role="tablist">
|
||||
{
|
||||
sidebarPeople.map((person, i) => {
|
||||
const index = i + 1;
|
||||
return (
|
||||
<a
|
||||
href="#chat-1"
|
||||
class:list={['nav-link text-start mw-100 p-3', index === 1 && 'active']}
|
||||
id="chat-1-tab"
|
||||
data-bs-toggle="pill"
|
||||
role="tab"
|
||||
aria-selected="true"
|
||||
>
|
||||
<div class="row align-items-center flex-fill">
|
||||
<div class="col-auto">
|
||||
<Avatar person={person} />
|
||||
</div>
|
||||
<div class="col text-body">
|
||||
<div>{person.full_name}</div>
|
||||
<div class="text-secondary text-truncate w-100" set:html={messages[index]?.message} />
|
||||
</div>
|
||||
{index === 7 && <div class="col-auto">🌴</div>}
|
||||
</div>
|
||||
</a>
|
||||
);
|
||||
})
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12 col-lg-7 col-xl-9 d-flex flex-column">
|
||||
<div class="card-body scrollable"><Chat wide /></div>
|
||||
<div class="card-footer">
|
||||
<div class="input-group input-group-flat">
|
||||
<input type="text" class="form-control" autocomplete="off" placeholder="Type message" />
|
||||
|
||||
<span class="input-group-text">
|
||||
<a href="#" class="link-secondary" data-bs-toggle="tooltip" aria-label="Clear search" title="Clear search"> <Icon name="mood-smile" /> </a>
|
||||
|
||||
<a href="#" class="link-secondary ms-2" data-bs-toggle="tooltip" aria-label="Add notification" title="Add notification"> <Icon name="paperclip" /> </a>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</DefaultLayout>
|
||||
@@ -1,55 +0,0 @@
|
||||
---
|
||||
title: Chat
|
||||
page-header: Chat
|
||||
page-menu: extra.chat
|
||||
layout: default
|
||||
permalink: chat.html
|
||||
page-container-class: flex-fill d-flex flex-column
|
||||
---
|
||||
|
||||
{% assign person = people[4] %}
|
||||
|
||||
<div class="card flex-fill">
|
||||
<div class="row g-0 flex-fill">
|
||||
<div class="col-12 col-lg-5 col-xl-3 border-end d-flex flex-column">
|
||||
<div class="card-header d-none d-md-block">
|
||||
<div class="input-icon">
|
||||
<span class="input-icon-addon"> {% include "ui/icon.html" icon="search" %} </span>
|
||||
<input type="text" value="" class="form-control" placeholder="Search…" aria-label="Search" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-body p-0 scrollable flex-fill">
|
||||
<div class="nav flex-column nav-pills" role="tablist">
|
||||
{% for person in people limit: 10 %}
|
||||
<a href="#chat-1" class="nav-link text-start mw-100 p-3{% if forloop.index == 1 %} active{% endif %}" id="chat-1-tab" data-bs-toggle="pill" role="tab" aria-selected="true">
|
||||
<div class="row align-items-center flex-fill">
|
||||
<div class="col-auto">{% include "ui/avatar.html" person=person %}</div>
|
||||
<div class="col text-body">
|
||||
<div>{{ person.full_name }}</div>
|
||||
<div class="text-secondary text-truncate w-100">{{ chats[forloop.index].message }}</div>
|
||||
</div>
|
||||
{% if forloop.index == 7 %}
|
||||
<div class="col-auto">🌴</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
</a>
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12 col-lg-7 col-xl-9 d-flex flex-column">
|
||||
<div class="card-body scrollable">{% include "ui/chat.html" wide=true %}</div>
|
||||
<div class="card-footer">
|
||||
<div class="input-group input-group-flat">
|
||||
<input type="text" class="form-control" autocomplete="off" placeholder="Type message" />
|
||||
|
||||
<span class="input-group-text">
|
||||
<a href="#" class="link-secondary" data-bs-toggle="tooltip" aria-label="Clear search" title="Clear search"> {% include "ui/icon.html" icon="mood-smile" %} </a>
|
||||
|
||||
<a href="#" class="link-secondary ms-2" data-bs-toggle="tooltip" aria-label="Add notification" title="Add notification"> {% include "ui/icon.html" icon="paperclip" %} </a>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -0,0 +1,34 @@
|
||||
---
|
||||
// Port of preview/pages/colorpicker.html (layout: default).
|
||||
// Liquid: {% for color in site.colors %} — forloop.index (1-based) → id,
|
||||
// color[1].hex → value.
|
||||
import DefaultLayout from '@shared/layouts/DefaultLayout.astro';
|
||||
import Colorpicker from '@shared/components/ui/Colorpicker.astro';
|
||||
import site from '@data/site.json';
|
||||
|
||||
const colors = Object.values(site.colors) as { hex: string }[];
|
||||
---
|
||||
|
||||
<DefaultLayout
|
||||
title="Color picker"
|
||||
pageHeader="Color picker"
|
||||
pageMenu="plugins.colorpicker"
|
||||
pageLibs={['coloris.js']}
|
||||
>
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<h3 class="card-title">Basic</h3>
|
||||
<div class="row g-3">
|
||||
{
|
||||
colors.map((color, index) => (
|
||||
<div class="col-2">
|
||||
<div>
|
||||
<Colorpicker value={color.hex} id={index + 1} format="hex" />
|
||||
</div>
|
||||
</div>
|
||||
))
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</DefaultLayout>
|
||||
@@ -1,21 +0,0 @@
|
||||
---
|
||||
title: Color picker
|
||||
page-header: Color picker
|
||||
page-menu: plugins.colorpicker
|
||||
page-libs: [coloris.js]
|
||||
layout: default
|
||||
permalink: colorpicker.html
|
||||
---
|
||||
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<h3 class="card-title">Basic</h3>
|
||||
<div class="row g-3">
|
||||
{% for color in site.colors %}
|
||||
<div class="col-2">
|
||||
<div>{% include "ui/colorpicker.html" value=color[1].hex id=forloop.index format="hex" %}</div>
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -0,0 +1,247 @@
|
||||
---
|
||||
// Port of preview/pages/colors.html (layout: default)
|
||||
import DefaultLayout from '@shared/layouts/DefaultLayout.astro';
|
||||
import Icon from '@shared/components/Icon.astro';
|
||||
import site from '@data/site.json';
|
||||
|
||||
type ColorEntry = [string, { title: string; hex: string; abbr?: string; icon?: string }];
|
||||
|
||||
// Liquid iterates the site.json objects as [key, value] pairs.
|
||||
const colors = Object.entries(site.colors) as ColorEntry[];
|
||||
const lightColors = Object.entries(site.lightColors) as ColorEntry[];
|
||||
const grayColors = Object.entries(site.grayColors) as ColorEntry[];
|
||||
const socialColors = Object.entries(site.socialColors) as ColorEntry[];
|
||||
|
||||
// Liquid: colors keys + inverted, white, transparent (pushed before the gradient loops).
|
||||
const gradientColors = [...Object.keys(site.colors), 'inverted', 'white', 'transparent'];
|
||||
---
|
||||
|
||||
<DefaultLayout title="Colors" pageHeader="Colors" pageMenu="base.colors">
|
||||
<div class="row row-cards">
|
||||
<div class="col-3">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<div class="row g-3">
|
||||
{
|
||||
colors.map(([name, color]) => (
|
||||
<div class="col-12">
|
||||
<div class="row align-items-center">
|
||||
<div class="col-auto">
|
||||
<div class={`avatar bg-${name} text-${name}-fg avatar-square`}>{color.abbr}</div>
|
||||
</div>
|
||||
<div class="col">
|
||||
{color.title}
|
||||
<br />
|
||||
<code>{color.hex}</code>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
))
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-3">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<div class="row g-3">
|
||||
{
|
||||
lightColors.map(([name, color]) => (
|
||||
<div class="col-12">
|
||||
<div class="row align-items-center">
|
||||
<div class="col-auto">
|
||||
<div class={`avatar bg-${name}-lt text-${name}-lt-fg avatar-square`}>{color.abbr}</div>
|
||||
</div>
|
||||
<div class="col">
|
||||
{color.title}
|
||||
<br />
|
||||
<code>{color.hex}</code>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
))
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-3">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<div class="row g-3">
|
||||
{
|
||||
grayColors.map(([name, color]) => (
|
||||
<div class="col-12">
|
||||
<div class="row align-items-center">
|
||||
<div class="col-auto">
|
||||
<div class={`avatar bg-${name} text-${name}-fg avatar-square`}>{color.abbr}</div>
|
||||
</div>
|
||||
<div class="col">
|
||||
{color.title}
|
||||
<br />
|
||||
<code>{color.hex}</code>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
))
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-3">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<div class="row g-3">
|
||||
{
|
||||
socialColors.map(([name, color]) => (
|
||||
<div class="col-12">
|
||||
<div class="row align-items-center">
|
||||
<div class="col-auto">
|
||||
<div class={`avatar bg-${name} text-${name}-fg avatar-square`}>
|
||||
{color.icon && <Icon name={color.icon} />}
|
||||
</div>
|
||||
</div>
|
||||
<div class="col">
|
||||
{color.title}
|
||||
<br />
|
||||
<code>{color.hex}</code>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
))
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12">
|
||||
<div class="row">
|
||||
<div class="col-6">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<h3 class="card-title">Gradient</h3>
|
||||
<form action="">
|
||||
<div class="row g-4">
|
||||
<div class="col">
|
||||
<div>
|
||||
<label class="form-label">From</label>
|
||||
<select class="form-select" name="color-from">
|
||||
{gradientColors.map((color) => <option value={color}>{color}</option>)}
|
||||
</select>
|
||||
</div>
|
||||
<div class="mt-3">
|
||||
<label class="form-label">To</label>
|
||||
<select class="form-select" name="color-to">
|
||||
{
|
||||
gradientColors.map((color) => (
|
||||
<option value={color} selected={color === 'transparent'}>
|
||||
{color}
|
||||
</option>
|
||||
))
|
||||
}
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col">
|
||||
<div>
|
||||
<label class="form-label">Via</label>
|
||||
<select class="form-select" name="color-via">
|
||||
<option></option>
|
||||
{gradientColors.map((color) => <option value={color}>{color}</option>)}
|
||||
</select>
|
||||
</div>
|
||||
<div class="mt-3">
|
||||
<label class="form-label">Direction</label>
|
||||
<select class="form-select" name="color-direction">
|
||||
<option value="to-t">to top</option>
|
||||
<option value="to-te">to top right</option>
|
||||
<option value="to-r" selected>to right</option>
|
||||
<option value="to-be">to bottom right</option>
|
||||
<option value="to-b">to bottom</option>
|
||||
<option value="to-bs">to bottom left</option>
|
||||
<option value="to-s">to left</option>
|
||||
<option value="to-ts">to top left</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12">
|
||||
<div class="border rounded bg-pattern-transparent overflow-hidden">
|
||||
<div
|
||||
id="gradient-preview"
|
||||
class="border rounded bg-gradient bg-gradient-from-primary bg-gradient-to-transparent"
|
||||
>
|
||||
<div class=" px-4 py-5"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-6">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<div class="space-y">
|
||||
{
|
||||
gradientColors.map((color) => (
|
||||
<div class={`border rounded bg-gradient bg-gradient-from-${color} bg-gradient-to-transparent px-4 py-2`} />
|
||||
))
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
<div class="col">
|
||||
<div class="space-y">
|
||||
{
|
||||
gradientColors.map((color) => (
|
||||
<div class={`border rounded bg-gradient bg-gradient-to-${color} bg-gradient-from-transparent px-4 py-2`} />
|
||||
))
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script is:inline>
|
||||
document.addEventListener('DOMContentLoaded', function () {
|
||||
var gradientPreview = document.getElementById('gradient-preview');
|
||||
var colorFrom = document.querySelector('[name="color-from"]');
|
||||
var colorTo = document.querySelector('[name="color-to"]');
|
||||
var colorVia = document.querySelector('[name="color-via"]');
|
||||
var colorDirection = document.querySelector('[name="color-direction"]');
|
||||
|
||||
function updateGradient() {
|
||||
var from = colorFrom.value;
|
||||
var to = colorTo.value;
|
||||
var via = colorVia.value;
|
||||
var direction = colorDirection.value;
|
||||
|
||||
var gradient = 'bg-gradient bg-gradient-from-' + from + ' bg-gradient-to-' + to;
|
||||
|
||||
if (via) {
|
||||
gradient += ' bg-gradient-via-' + via;
|
||||
}
|
||||
|
||||
gradient += ' bg-gradient-' + direction;
|
||||
|
||||
gradientPreview.className = gradient;
|
||||
}
|
||||
|
||||
colorFrom.addEventListener('change', updateGradient);
|
||||
colorTo.addEventListener('change', updateGradient);
|
||||
colorVia.addEventListener('change', updateGradient);
|
||||
colorDirection.addEventListener('change', updateGradient);
|
||||
|
||||
updateGradient();
|
||||
});
|
||||
</script>
|
||||
</DefaultLayout>
|
||||
@@ -1,240 +0,0 @@
|
||||
---
|
||||
title: Colors
|
||||
page-header: Colors
|
||||
page-menu: base.colors
|
||||
layout: default
|
||||
permalink: colors.html
|
||||
---
|
||||
|
||||
{% assign colors = '' | split: '' %}
|
||||
{% for color in site.colors %}
|
||||
{% assign colors = colors | push: color[0] %}
|
||||
{% endfor %}
|
||||
|
||||
|
||||
<div class="row row-cards">
|
||||
<div class="col-3">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<div class="row g-3">
|
||||
{% for color in site.colors %}
|
||||
<div class="col-12">
|
||||
<div class="row align-items-center">
|
||||
<div class="col-auto">
|
||||
<div class="avatar bg-{{ color[0] }} text-{{ color[0] }}-fg avatar-square">
|
||||
{{ color[1].abbr }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="col">
|
||||
{{ color[1].title }}<br />
|
||||
<code>{{ color[1].hex }}</code>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-3">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<div class="row g-3">
|
||||
{% for color in site.lightColors %}
|
||||
<div class="col-12">
|
||||
<div class="row align-items-center">
|
||||
<div class="col-auto">
|
||||
<div class="avatar bg-{{ color[0] }}-lt text-{{ color[0] }}-lt-fg avatar-square">
|
||||
{{ color[1].abbr }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="col">
|
||||
{{ color[1].title }}<br />
|
||||
<code>{{ color[1].hex }}</code>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-3">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<div class="row g-3">
|
||||
{% for color in site.grayColors %}
|
||||
<div class="col-12">
|
||||
<div class="row align-items-center">
|
||||
<div class="col-auto">
|
||||
<div class="avatar bg-{{ color[0] }} text-{{ color[0] }}-fg avatar-square">
|
||||
{{ color[1].abbr }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="col">
|
||||
{{ color[1].title }}<br />
|
||||
<code>{{ color[1].hex }}</code>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-3">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<div class="row g-3">
|
||||
{% for color in site.socialColors %}
|
||||
<div class="col-12">
|
||||
<div class="row align-items-center">
|
||||
<div class="col-auto">
|
||||
<div class="avatar bg-{{ color[0] }} text-{{ color[0] }}-fg avatar-square">
|
||||
{% include "ui/icon.html" icon=color[1].icon %}
|
||||
</div>
|
||||
</div>
|
||||
<div class="col">
|
||||
{{ color[1].title }}<br />
|
||||
<code>{{ color[1].hex }}</code>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12">
|
||||
{% assign colors = colors | push: 'inverted' %}
|
||||
{% assign colors = colors | push: 'white' %}
|
||||
{% assign colors = colors | push: 'transparent' %}
|
||||
<div class="row">
|
||||
<div class="col-6">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<h3 class="card-title">
|
||||
Gradient
|
||||
</h3>
|
||||
<form action="">
|
||||
<div class="row g-4">
|
||||
<div class="col">
|
||||
<div>
|
||||
<label class="form-label">From</label>
|
||||
<select class="form-select" name="color-from">
|
||||
{% for color in colors %}
|
||||
<option value="{{ color }}">{{ color }}</option>
|
||||
{% endfor %}
|
||||
</select>
|
||||
</div>
|
||||
<div class="mt-3">
|
||||
<label class="form-label">To</label>
|
||||
<select class="form-select" name="color-to">
|
||||
{% for color in colors %}
|
||||
<option value="{{ color }}" {% if color=='transparent' %} selected{% endif %}>
|
||||
{{ color }}
|
||||
</option>
|
||||
{% endfor %}
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col">
|
||||
<div>
|
||||
<label class="form-label">Via</label>
|
||||
<select class="form-select" name="color-via">
|
||||
<option></option>
|
||||
{% for color in colors %}
|
||||
<option value="{{ color }}">{{ color }}</option>
|
||||
{% endfor %}
|
||||
</select>
|
||||
</div>
|
||||
<div class="mt-3">
|
||||
<label class="form-label">Direction</label>
|
||||
<select class="form-select" name="color-direction">
|
||||
<option value="to-t">to top</option>
|
||||
<option value="to-te">to top right</option>
|
||||
<option value="to-r" selected>to right</option>
|
||||
<option value="to-be">to bottom right</option>
|
||||
<option value="to-b">to bottom</option>
|
||||
<option value="to-bs">to bottom left</option>
|
||||
<option value="to-s">to left</option>
|
||||
<option value="to-ts">to top left</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12">
|
||||
<div class="border rounded bg-pattern-transparent overflow-hidden">
|
||||
<div id="gradient-preview"
|
||||
class="border rounded bg-gradient bg-gradient-from-primary bg-gradient-to-transparent">
|
||||
<div class=" px-4 py-5"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-6">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<div class="space-y">
|
||||
{% for color in colors %}
|
||||
<div
|
||||
class="border rounded bg-gradient bg-gradient-from-{{ color }} bg-gradient-to-transparent px-4 py-2">
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
<div class="col">
|
||||
<div class="space-y">
|
||||
{% for color in colors %}
|
||||
<div
|
||||
class="border rounded bg-gradient bg-gradient-to-{{ color }} bg-gradient-from-transparent px-4 py-2">
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
document.addEventListener('DOMContentLoaded', function () {
|
||||
var gradientPreview = document.getElementById('gradient-preview');
|
||||
var colorFrom = document.querySelector('[name="color-from"]');
|
||||
var colorTo = document.querySelector('[name="color-to"]');
|
||||
var colorVia = document.querySelector('[name="color-via"]');
|
||||
var colorDirection = document.querySelector('[name="color-direction"]');
|
||||
|
||||
function updateGradient() {
|
||||
var from = colorFrom.value;
|
||||
var to = colorTo.value;
|
||||
var via = colorVia.value;
|
||||
var direction = colorDirection.value;
|
||||
|
||||
var gradient = 'bg-gradient bg-gradient-from-' + from + ' bg-gradient-to-' + to;
|
||||
|
||||
if (via) {
|
||||
gradient += ' bg-gradient-via-' + via;
|
||||
}
|
||||
|
||||
gradient += ' bg-gradient-' + direction;
|
||||
|
||||
gradientPreview.className = gradient;
|
||||
}
|
||||
|
||||
colorFrom.addEventListener('change', updateGradient);
|
||||
colorTo.addEventListener('change', updateGradient);
|
||||
colorVia.addEventListener('change', updateGradient);
|
||||
colorDirection.addEventListener('change', updateGradient);
|
||||
|
||||
updateGradient();
|
||||
});
|
||||
</script>
|
||||
@@ -0,0 +1,35 @@
|
||||
---
|
||||
// Port of preview/pages/cookie-banner.html (layout: default)
|
||||
import DefaultLayout from '@shared/layouts/DefaultLayout.astro';
|
||||
---
|
||||
|
||||
<DefaultLayout title="Cookie banner" pageHeader="Cookie banner" pageMenu="extra.cookie-banner">
|
||||
<div
|
||||
class="offcanvas offcanvas-bottom h-auto show"
|
||||
tabindex="-1"
|
||||
id="offcanvasBottom"
|
||||
aria-modal="true"
|
||||
role="dialog"
|
||||
>
|
||||
<div class="offcanvas-body">
|
||||
<div class="container">
|
||||
<div class="row align-items-center">
|
||||
<div class="col">
|
||||
<strong>Do you like cookies?</strong> 🍪 We use cookies to ensure you get the best experience on our website.
|
||||
<a href="./terms-of-service.html" target="_blank">Learn more</a>
|
||||
</div>
|
||||
<div class="col-auto">
|
||||
<button type="button" class="btn btn-primary" data-bs-dismiss="offcanvas">
|
||||
Essential Cookies Only
|
||||
</button>
|
||||
</div>
|
||||
<div class="col-auto">
|
||||
<button type="button" class="btn btn-primary" data-bs-dismiss="offcanvas">
|
||||
Allow All Cookies
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</DefaultLayout>
|
||||
@@ -1,29 +0,0 @@
|
||||
---
|
||||
page-header: Cookie banner
|
||||
title: Cookie banner
|
||||
page-menu: extra.cookie-banner
|
||||
layout: default
|
||||
permalink: cookie-banner.html
|
||||
---
|
||||
|
||||
<div class="offcanvas offcanvas-bottom h-auto show" tabindex="-1" id="offcanvasBottom" aria-modal="true" role="dialog">
|
||||
<div class="offcanvas-body">
|
||||
<div class="container">
|
||||
<div class="row align-items-center">
|
||||
<div class="col">
|
||||
<strong>Do you like cookies?</strong> 🍪 We use cookies to ensure you get the best experience on our website. <a href="{{ page | relative }}/terms-of-service.html" target="_blank">Learn more</a>
|
||||
</div>
|
||||
<div class="col-auto">
|
||||
<button type="button" class="btn btn-primary" data-bs-dismiss="offcanvas">
|
||||
Essential Cookies Only
|
||||
</button>
|
||||
</div>
|
||||
<div class="col-auto">
|
||||
<button type="button" class="btn btn-primary" data-bs-dismiss="offcanvas">
|
||||
Allow All Cookies
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -0,0 +1,84 @@
|
||||
---
|
||||
// Port of preview/pages/dashboard-crm.html (layout: default)
|
||||
import DefaultLayout from '@shared/layouts/DefaultLayout.astro';
|
||||
import CrmStats from '@shared/components/cards/CrmStats.astro';
|
||||
import MrrOverview from '@shared/components/cards/charts/MrrOverview.astro';
|
||||
import PipelineFunnel from '@shared/components/cards/charts/PipelineFunnel.astro';
|
||||
import TopDeals from '@shared/components/cards/TopDeals.astro';
|
||||
import RecentActivity from '@shared/components/cards/RecentActivity.astro';
|
||||
import TasksDue from '@shared/components/cards/TasksDue.astro';
|
||||
import TeamLeaderboard from '@shared/components/cards/TeamLeaderboard.astro';
|
||||
import ChurnRisk from '@shared/components/cards/ChurnRisk.astro';
|
||||
---
|
||||
|
||||
<DefaultLayout
|
||||
title="CRM Dashboard"
|
||||
pageHeader="CRM Dashboard"
|
||||
description="Welcome back — here's your CRM overview for today."
|
||||
pageMenu="dashboards.crm"
|
||||
pageLibs={['apexcharts']}
|
||||
>
|
||||
<div>
|
||||
<div class="col-12">
|
||||
<div class="row row-cards">
|
||||
<div class="col-sm-6 col-lg-3">
|
||||
<CrmStats color="primary" icon="currency-dollar" lt title="MRR" description="$92.4K" changeValue="+9.5" />
|
||||
</div>
|
||||
<div class="col-sm-6 col-lg-3">
|
||||
<CrmStats color="azure" icon="filter" lt title="Pipeline" description="$2.4M" changeValue="+14" />
|
||||
</div>
|
||||
<div class="col-sm-6 col-lg-3">
|
||||
<CrmStats color="green" icon="circle-check" lt title="Deals won" description="74" changeValue="+8" />
|
||||
</div>
|
||||
<div class="col-sm-6 col-lg-3">
|
||||
<CrmStats color="purple" icon="percentage" lt title="Conversion" description="5.97%" changeValue="+0.4" />
|
||||
</div>
|
||||
<div class="col-sm-6 col-lg-3">
|
||||
<CrmStats color="yellow" icon="activity" lt title="Activities" description="318" changeValue="+22" />
|
||||
</div>
|
||||
<div class="col-sm-6 col-lg-3">
|
||||
<CrmStats color="red" icon="clock" lt title="Tasks due" description="12" changeValue="-3" changeValueUnit=" urgent" />
|
||||
</div>
|
||||
<div class="col-sm-6 col-lg-3">
|
||||
<CrmStats color="cyan" icon="user-plus" lt title="Leads added" description="148" changeValue="+31" />
|
||||
</div>
|
||||
<div class="col-sm-6 col-lg-3">
|
||||
<CrmStats color="green" icon="trending-up" lt title="Churn rate" description="1.8%" changeValue="-0.3" />
|
||||
</div>
|
||||
|
||||
<div class="col-lg-6">
|
||||
<div class="row row-cards">
|
||||
<div class="col-12">
|
||||
<MrrOverview />
|
||||
</div>
|
||||
|
||||
<div class="col-12">
|
||||
<TopDeals />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-lg-6">
|
||||
<div class="row row-cards">
|
||||
<div class="col-12">
|
||||
<PipelineFunnel />
|
||||
</div>
|
||||
<div class="col-12">
|
||||
<RecentActivity />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-lg-4">
|
||||
<TasksDue />
|
||||
</div>
|
||||
<div class="col-lg-4">
|
||||
<TeamLeaderboard />
|
||||
</div>
|
||||
<div class="col-lg-4">
|
||||
<ChurnRisk />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</DefaultLayout>
|
||||
@@ -1,81 +0,0 @@
|
||||
---
|
||||
title: CRM Dashboard
|
||||
page-header: CRM Dashboard
|
||||
page-header-description: Welcome back — here's your CRM overview for today.
|
||||
page-menu: dashboards.crm
|
||||
page-libs: [apexcharts]
|
||||
layout: default
|
||||
permalink: dashboard-crm.html
|
||||
---
|
||||
|
||||
<div>
|
||||
<div class="col-12">
|
||||
<div class="row row-cards">
|
||||
<div class="col-sm-6 col-lg-3">
|
||||
{% include "cards/crm-stats.html" color="primary" icon="currency-dollar" lt=true
|
||||
title="MRR" description="$92.4K" change-value="+9.5" %}
|
||||
</div>
|
||||
<div class="col-sm-6 col-lg-3">
|
||||
{% include "cards/crm-stats.html" color="azure" icon="filter" lt=true
|
||||
title="Pipeline" description="$2.4M" change-value="+14" %}
|
||||
</div>
|
||||
<div class="col-sm-6 col-lg-3">
|
||||
{% include "cards/crm-stats.html" color="green" icon="circle-check" lt=true
|
||||
title="Deals won" description="74" change-value="+8" %}
|
||||
</div>
|
||||
<div class="col-sm-6 col-lg-3">
|
||||
{% include "cards/crm-stats.html" color="purple" icon="percentage" lt=true
|
||||
title="Conversion" description="5.97%" change-value="+0.4" %}
|
||||
</div>
|
||||
<div class="col-sm-6 col-lg-3">
|
||||
{% include "cards/crm-stats.html" color="yellow" icon="activity" lt=true
|
||||
title="Activities" description="318" change-value="+22" %}
|
||||
</div>
|
||||
<div class="col-sm-6 col-lg-3">
|
||||
{% include "cards/crm-stats.html" color="red" icon="clock" lt=true
|
||||
title="Tasks due" description="12" change-value="-3" change-value-unit=" urgent" %}
|
||||
</div>
|
||||
<div class="col-sm-6 col-lg-3">
|
||||
{% include "cards/crm-stats.html" color="cyan" icon="user-plus" lt=true
|
||||
title="Leads added" description="148" change-value="+31" %}
|
||||
</div>
|
||||
<div class="col-sm-6 col-lg-3">
|
||||
{% include "cards/crm-stats.html" color="green" icon="trending-up" lt=true
|
||||
title="Churn rate" description="1.8%" change-value="-0.3" %}
|
||||
</div>
|
||||
|
||||
<div class="col-lg-6">
|
||||
<div class="row row-cards">
|
||||
<div class="col-12">
|
||||
{% include "cards/charts/mrr-overview.html" %}
|
||||
</div>
|
||||
|
||||
<div class="col-12">
|
||||
{% include "cards/top-deals.html" %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-lg-6">
|
||||
<div class="row row-cards">
|
||||
<div class="col-12">
|
||||
{% include "cards/charts/pipeline-funnel.html" %}
|
||||
</div>
|
||||
<div class="col-12">
|
||||
{% include "cards/recent-activity.html" %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-lg-4">
|
||||
{% include "cards/tasks-due.html" %}
|
||||
</div>
|
||||
<div class="col-lg-4">
|
||||
{% include "cards/team-leaderboard.html" %}
|
||||
</div>
|
||||
<div class="col-lg-4">
|
||||
{% include "cards/churn-risk.html" %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -0,0 +1,334 @@
|
||||
---
|
||||
import DefaultLayout from '@shared/layouts/DefaultLayout.astro';
|
||||
import Avatar from '@shared/components/ui/Avatar.astro';
|
||||
import Trending from '@shared/components/ui/Trending.astro';
|
||||
import CardDropdown from '@shared/components/ui/CardDropdown.astro';
|
||||
import NavSegmented from '@shared/components/ui/NavSegmented.astro';
|
||||
import Chart from '@shared/components/Chart.astro';
|
||||
import SwitchIcon from '@shared/components/ui/SwitchIcon.astro';
|
||||
import cryptoCurrencies from '@data/crypto-currencies.json';
|
||||
import cryptoMarkets from '@data/crypto-markets.json';
|
||||
import cryptoOrders from '@data/crypto-orders.json';
|
||||
|
||||
interface Currency {
|
||||
symbol: string;
|
||||
price: string;
|
||||
p24h: number;
|
||||
'volume-24h': string;
|
||||
}
|
||||
|
||||
const currencies = cryptoCurrencies as Currency[];
|
||||
const find = (symbol: string) => currencies.find((c) => c.symbol === symbol)!;
|
||||
const btc = find('BTC');
|
||||
const ltc = find('LTC');
|
||||
const eth = find('ETH');
|
||||
const xmr = find('XMR');
|
||||
|
||||
const btcBalance = 2.3;
|
||||
const num = (s: string) => parseFloat(s.replace(/[$,]/g, ''));
|
||||
const btcPriceNum = num(btc.price);
|
||||
const totalUsd = Math.round(btcPriceNum * btcBalance).toLocaleString('en-US');
|
||||
// Liquid `divided_by` then `round: 8` (trailing zeros dropped by number output)
|
||||
const r8 = (x: number) => parseFloat(x.toFixed(8));
|
||||
const ltcBtc = r8(num(ltc.price) / btcPriceNum);
|
||||
const ethBtc = r8(num(eth.price) / btcPriceNum);
|
||||
const xmrBtc = r8(num(xmr.price) / btcPriceNum);
|
||||
|
||||
const markets = (cryptoMarkets as { coin: string; price: string; volume: string; change: string }[]).slice(0, 10);
|
||||
const orders = cryptoOrders as { sell_orders: { price: string; btc: string; sum: string }[]; buy_orders: { price: string; btc: string; sum: string }[] };
|
||||
const operationCurrencies = currencies.slice(0, 20);
|
||||
---
|
||||
|
||||
<DefaultLayout
|
||||
title="Crypto Dashboard"
|
||||
pageHeader="Crypto Dashboard"
|
||||
pageMenu="dashboards.crypto"
|
||||
pageLibs={['apexcharts']}
|
||||
>
|
||||
<div class="row row-cards">
|
||||
<div class="col-12">
|
||||
<div class="row row-cards">
|
||||
<div class="col-12 col-md-6 col-xxl">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<div class="row">
|
||||
<div class="col mt-0">
|
||||
<h5 class="card-title">Total balance</h5>
|
||||
</div>
|
||||
<div class="col-auto">
|
||||
<Avatar icon="currency-dollar" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="mb-1">
|
||||
<span class="h3">${totalUsd}</span>
|
||||
<span class="text-muted">{btcBalance} {btc.symbol}</span>
|
||||
</div>
|
||||
<div class="mb-0">
|
||||
<Trending value={btc.p24h} />
|
||||
<span class="text-muted">Since last week</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-12 col-md-6 col-xxl">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<div class="row">
|
||||
<div class="col mt-0">
|
||||
<h5 class="card-title">USD/BTC</h5>
|
||||
</div>
|
||||
<div class="col-auto">
|
||||
<Avatar icon="currency-bitcoin" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="mb-1">
|
||||
<span class="h3">{btc.price}</span>
|
||||
<span class="text-muted">{btc.price}</span>
|
||||
</div>
|
||||
<div class="mb-0">
|
||||
<span class="text-muted">Volume: {btc['volume-24h']}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-12 col-md-6 col-xxl">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<div class="row">
|
||||
<div class="col mt-0">
|
||||
<h5 class="card-title">LTC/BTC</h5>
|
||||
</div>
|
||||
<div class="col-auto">
|
||||
<Avatar icon="currency-litecoin" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="mb-1">
|
||||
<span class="h3">{ltcBtc}</span>
|
||||
<span class="text-muted">{ltc.price}</span>
|
||||
</div>
|
||||
<div class="mb-0">
|
||||
<span class="text-muted">Volume: {ltc['volume-24h'].replace('$', '')}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-12 col-md-6 col-xxl">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<div class="row">
|
||||
<div class="col mt-0">
|
||||
<h5 class="card-title">ETH/BTC</h5>
|
||||
</div>
|
||||
<div class="col-auto">
|
||||
<Avatar icon="currency-ethereum" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="mb-1">
|
||||
<span class="h3">{ethBtc}</span>
|
||||
<span class="text-muted">{eth.price}</span>
|
||||
</div>
|
||||
<div class="mb-0">
|
||||
<span class="text-muted">Volume: {eth['volume-24h'].replace('$', '')}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-12 col-md-6 col-xxl">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<div class="row">
|
||||
<div class="col mt-0">
|
||||
<h5 class="card-title">XMR/BTC</h5>
|
||||
</div>
|
||||
<div class="col-auto">
|
||||
<Avatar icon="currency-monero" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="mb-1">
|
||||
<span class="h3">{xmrBtc}</span>
|
||||
<span class="text-muted">{xmr.price}</span>
|
||||
</div>
|
||||
<div class="mb-0">
|
||||
<span class="text-muted">Volume: {xmr['volume-24h'].replace('$', '')}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12">
|
||||
<div class="row row-cards">
|
||||
<div class="col-12 col-lg-5">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h5 class="card-title mb-0">Markets</h5>
|
||||
<div class="card-actions">
|
||||
<CardDropdown />
|
||||
</div>
|
||||
</div>
|
||||
<table class="table card-table table-striped">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>
|
||||
<SwitchIcon icon="star" iconBColor="yellow" variant="slide-up" />
|
||||
</th>
|
||||
<th>Coin</th>
|
||||
<th>Price</th>
|
||||
<th class="d-none d-xl-table-cell">Volume</th>
|
||||
<th class="d-none d-xl-table-cell text-end">Change</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{
|
||||
markets.map((market) => (
|
||||
<tr>
|
||||
<td>
|
||||
<SwitchIcon icon="star" iconBColor="yellow" variant="slide-up" />
|
||||
</td>
|
||||
<td>{market.coin}</td>
|
||||
<td class="">{market.price}</td>
|
||||
<td class="d-none d-xl-table-cell">{market.volume}</td>
|
||||
<td class="d-none d-xl-table-cell text-end">
|
||||
<Trending value={market.change as unknown as number} />
|
||||
</td>
|
||||
</tr>
|
||||
))
|
||||
}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-12 col-lg-7">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h5 class="card-title mb-0">LTC/BTC</h5>
|
||||
<div class="card-actions">
|
||||
<NavSegmented items="1m,5m,30m,1h,1d" name="timeframe" size="sm" default={2} />
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<Chart chartId="dashboard-crypto-candlestick" height={28} />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12">
|
||||
<div class="row row-cards">
|
||||
<div class="col-12 col-lg-12 col-xxl-3">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h5 class="card-title mb-0">Operations</h5>
|
||||
<div class="card-actions">
|
||||
<NavSegmented items="Buy,Sell,Send" name="operations" size="sm" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card-body">
|
||||
<p>Place new order:</p>
|
||||
|
||||
<div class="input-group mb-3">
|
||||
<label class="input-group-text">Amount</label>
|
||||
<select class="form-select">
|
||||
{
|
||||
operationCurrencies.map((currency, i) => (
|
||||
<option value={currency.symbol} selected={i === 0}>
|
||||
{currency.symbol}
|
||||
</option>
|
||||
))
|
||||
}
|
||||
</select>
|
||||
<input type="text" class="form-control" value="0.25" />
|
||||
</div>
|
||||
|
||||
<div class="input-group mb-3">
|
||||
<label class="input-group-text">Price</label>
|
||||
<input type="text" class="form-control" readonly="" value="23,077.05" />
|
||||
<label class="input-group-text">$</label>
|
||||
</div>
|
||||
|
||||
<div class="input-group mb-3">
|
||||
<label class="input-group-text">Total</label>
|
||||
<input type="text" class="form-control" readonly="" value="5,769.27" />
|
||||
<label class="input-group-text">$</label>
|
||||
</div>
|
||||
|
||||
<div class="d-grid">
|
||||
<button type="button" class="btn btn-primary mb-3">Process to wallet</button>
|
||||
</div>
|
||||
|
||||
<p class="text-muted mb-0 small">The final amount could change depending on current market conditions.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-12 col-lg-6 col-xxl">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h5 class="card-title mb-0">Sell Orders</h5>
|
||||
<div class="card-actions">
|
||||
<button class="btn btn-sm">View all</button>
|
||||
</div>
|
||||
</div>
|
||||
<table class="table card-table table-striped">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Price</th>
|
||||
<th class="d-none d-xl-table-cell">BTC</th>
|
||||
<th>Sum(BTC)</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{
|
||||
orders.sell_orders.map((order) => (
|
||||
<tr>
|
||||
<td>{order.price}</td>
|
||||
<td class="d-none d-xl-table-cell">{order.btc}</td>
|
||||
<td>{order.sum}</td>
|
||||
</tr>
|
||||
))
|
||||
}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-12 col-lg-6 col-xxl">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h5 class="card-title mb-0">Buy Orders</h5>
|
||||
<div class="card-actions">
|
||||
<button class="btn btn-sm">View all</button>
|
||||
</div>
|
||||
</div>
|
||||
<table class="table card-table table-striped">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Price</th>
|
||||
<th class="d-none d-xl-table-cell">BTC</th>
|
||||
<th>Sum(BTC)</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{
|
||||
orders.buy_orders.map((order) => (
|
||||
<tr>
|
||||
<td>{order.price}</td>
|
||||
<td class="d-none d-xl-table-cell">{order.btc}</td>
|
||||
<td>{order.sum}</td>
|
||||
</tr>
|
||||
))
|
||||
}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</DefaultLayout>
|
||||
@@ -1,301 +0,0 @@
|
||||
---
|
||||
title: Crypto Dashboard
|
||||
page-header: Crypto Dashboard
|
||||
page-menu: dashboards.crypto
|
||||
page-libs: [apexcharts]
|
||||
layout: default
|
||||
permalink: dashboard-crypto.html
|
||||
---
|
||||
|
||||
{% assign btc = crypto-currencies | where: "symbol", "BTC" | first %}
|
||||
{% assign ltc = crypto-currencies | where: "symbol", "LTC" | first %}
|
||||
{% assign eth = crypto-currencies | where: "symbol", "ETH" | first %}
|
||||
{% assign xmr = crypto-currencies | where: "symbol", "XMR" | first %}
|
||||
{% assign btc_balance = 2.30 %}
|
||||
{% assign btc_price_num = btc.price | remove: "$" | remove: "," | plus: 0 %}
|
||||
{% assign total_usd_raw = btc_price_num | times: btc_balance %}
|
||||
{% assign ltc_price_num = ltc.price | remove: "$" | remove: "," | plus: 0 %}
|
||||
{% assign eth_price_num = eth.price | remove: "$" | remove: "," | plus: 0 %}
|
||||
{% assign xmr_price_num = xmr.price | remove: "$" | remove: "," | plus: 0 %}
|
||||
{% assign ltc_btc = ltc_price_num | divided_by: btc_price_num %}
|
||||
{% assign eth_btc = eth_price_num | divided_by: btc_price_num %}
|
||||
{% assign xmr_btc = xmr_price_num | divided_by: btc_price_num %}
|
||||
|
||||
<div class="row row-cards">
|
||||
<div class="col-12">
|
||||
<div class="row row-cards">
|
||||
<div class="col-12 col-md-6 col-xxl">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<div class="row">
|
||||
<div class="col mt-0">
|
||||
<h5 class="card-title">Total balance</h5>
|
||||
</div>
|
||||
<div class="col-auto">
|
||||
{% include "ui/avatar.html" icon="currency-dollar" %}
|
||||
</div>
|
||||
</div>
|
||||
<div class="mb-1">
|
||||
<span class="h3">${{ total_usd_raw | round | format_number }}</span>
|
||||
<span class="text-muted">{{ btc_balance }} {{ btc.symbol }}</span>
|
||||
</div>
|
||||
<div class="mb-0">
|
||||
{% include "ui/trending.html" value=btc.p24h %}
|
||||
<span class="text-muted">Since last week</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-12 col-md-6 col-xxl">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<div class="row">
|
||||
<div class="col mt-0">
|
||||
<h5 class="card-title">USD/BTC</h5>
|
||||
</div>
|
||||
<div class="col-auto">
|
||||
{% include "ui/avatar.html" icon="currency-bitcoin" %}
|
||||
</div>
|
||||
</div>
|
||||
<div class="mb-1">
|
||||
<span class="h3">{{ btc.price }}</span>
|
||||
<span class="text-muted">{{ btc.price}}</span>
|
||||
</div>
|
||||
<div class="mb-0">
|
||||
<span class="text-muted">Volume: {{ btc.volume-24h }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-12 col-md-6 col-xxl">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<div class="row">
|
||||
<div class="col mt-0">
|
||||
<h5 class="card-title">LTC/BTC</h5>
|
||||
</div>
|
||||
<div class="col-auto">
|
||||
{% include "ui/avatar.html" icon="currency-litecoin" %}
|
||||
</div>
|
||||
</div>
|
||||
<div class="mb-1">
|
||||
<span class="h3">{{ ltc_btc | round: 8 }}</span>
|
||||
<span class="text-muted">{{ ltc.price }}</span>
|
||||
</div>
|
||||
<div class="mb-0">
|
||||
<span class="text-muted">Volume: {{ ltc.volume-24h | remove: "$" }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-12 col-md-6 col-xxl">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<div class="row">
|
||||
<div class="col mt-0">
|
||||
<h5 class="card-title">ETH/BTC</h5>
|
||||
</div>
|
||||
<div class="col-auto">
|
||||
{% include "ui/avatar.html" icon="currency-ethereum" %}
|
||||
</div>
|
||||
</div>
|
||||
<div class="mb-1">
|
||||
<span class="h3">{{ eth_btc | round: 8 }}</span>
|
||||
<span class="text-muted">{{ eth.price }}</span>
|
||||
</div>
|
||||
<div class="mb-0">
|
||||
<span class="text-muted">Volume: {{ eth.volume-24h | remove: "$" }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-12 col-md-6 col-xxl">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<div class="row">
|
||||
<div class="col mt-0">
|
||||
<h5 class="card-title">XMR/BTC</h5>
|
||||
</div>
|
||||
<div class="col-auto">
|
||||
{% include "ui/avatar.html" icon="currency-monero" %}
|
||||
</div>
|
||||
</div>
|
||||
<div class="mb-1">
|
||||
<span class="h3">{{ xmr_btc | round: 8 }}</span>
|
||||
<span class="text-muted">{{ xmr.price }}</span>
|
||||
</div>
|
||||
<div class="mb-0">
|
||||
<span class="text-muted">Volume: {{ xmr.volume-24h | remove: "$" }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12">
|
||||
<div class="row row-cards">
|
||||
<div class="col-12 col-lg-5">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h5 class="card-title mb-0">Markets</h5>
|
||||
<div class="card-actions">
|
||||
{% include "ui/card-dropdown.html" %}
|
||||
</div>
|
||||
</div>
|
||||
<table class="table card-table table-striped">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>
|
||||
{% include "ui/switch-icon.html" icon="star" icon-b-color="yellow" variant="slide-up" %}
|
||||
</th>
|
||||
<th>Coin</th>
|
||||
<th>Price</th>
|
||||
<th class="d-none d-xl-table-cell">Volume</th>
|
||||
<th class="d-none d-xl-table-cell text-end">Change</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{% for market in crypto-markets limit: 10 %}
|
||||
<tr>
|
||||
<td>
|
||||
{% include "ui/switch-icon.html" icon="star" icon-b-color="yellow" variant="slide-up" %}
|
||||
</td>
|
||||
<td>{{ market.coin }}</td>
|
||||
<td class="">{{ market.price }}</td>
|
||||
<td class="d-none d-xl-table-cell">{{ market.volume }}</td>
|
||||
<td class="d-none d-xl-table-cell text-end">
|
||||
{% include "ui/trending.html" value=market.change %}
|
||||
</td>
|
||||
</tr>
|
||||
{% endfor %}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-12 col-lg-7">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h5 class="card-title mb-0">LTC/BTC</h5>
|
||||
<div class="card-actions">
|
||||
{% include "ui/nav-segmented.html" items="1m,5m,30m,1h,1d" name="timeframe" size="sm" default=2 %}
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
{% include "ui/chart.html" chart-id="dashboard-crypto-candlestick" height=28 %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12">
|
||||
<div class="row row-cards">
|
||||
<div class="col-12 col-lg-12 col-xxl-3">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h5 class="card-title mb-0">Operations</h5>
|
||||
<div class="card-actions">
|
||||
{% include "ui/nav-segmented.html" items="Buy,Sell,Send" name="operations" size="sm" %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card-body">
|
||||
<p>Place new order:</p>
|
||||
|
||||
<div class="input-group mb-3">
|
||||
<label class="input-group-text">Amount</label>
|
||||
<select class="form-select">
|
||||
{% for currency in crypto-currencies limit: 20 %}
|
||||
<option value="{{ currency.symbol }}"{% if forloop.first %} selected{% endif %}>{{ currency.symbol }}</option>
|
||||
{% endfor %}
|
||||
</select>
|
||||
<input type="text" class="form-control" value="0.25">
|
||||
</div>
|
||||
|
||||
<div class="input-group mb-3">
|
||||
<label class="input-group-text">Price</label>
|
||||
<input type="text" class="form-control" readonly="" value="23,077.05">
|
||||
<label class="input-group-text">$</label>
|
||||
</div>
|
||||
|
||||
<div class="input-group mb-3">
|
||||
<label class="input-group-text">Total</label>
|
||||
<input type="text" class="form-control" readonly="" value="5,769.27">
|
||||
<label class="input-group-text">$</label>
|
||||
</div>
|
||||
|
||||
<div class="d-grid">
|
||||
<button type="button" class="btn btn-primary mb-3">Process to wallet</button>
|
||||
</div>
|
||||
|
||||
<p class="text-muted mb-0 small">The final amount could change depending on current market conditions.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-12 col-lg-6 col-xxl">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h5 class="card-title mb-0">Sell Orders</h5>
|
||||
<div class="card-actions">
|
||||
<button class="btn btn-sm">View all</button>
|
||||
</div>
|
||||
</div>
|
||||
<table class="table card-table table-striped">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Price</th>
|
||||
<th class="d-none d-xl-table-cell">BTC</th>
|
||||
<th>Sum(BTC)</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{% for order in crypto-orders.sell_orders %}
|
||||
<tr>
|
||||
<td>{{ order.price }}</td>
|
||||
<td class="d-none d-xl-table-cell">{{ order.btc }}</td>
|
||||
<td>{{ order.sum }}</td>
|
||||
</tr>
|
||||
{% endfor %}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-12 col-lg-6 col-xxl">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h5 class="card-title mb-0">Buy Orders</h5>
|
||||
<div class="card-actions">
|
||||
<button class="btn btn-sm">View all</button>
|
||||
</div>
|
||||
</div>
|
||||
<table class="table card-table table-striped">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Price</th>
|
||||
<th class="d-none d-xl-table-cell">BTC</th>
|
||||
<th>Sum(BTC)</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{% for order in crypto-orders.buy_orders %}
|
||||
<tr>
|
||||
<td>{{ order.price }}</td>
|
||||
<td class="d-none d-xl-table-cell">{{ order.btc }}</td>
|
||||
<td>{{ order.sum }}</td>
|
||||
</tr>
|
||||
{% endfor %}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
@@ -0,0 +1,16 @@
|
||||
---
|
||||
// Port of preview/pages/datagrid.html (layout: default)
|
||||
import DefaultLayout from '@shared/layouts/DefaultLayout.astro';
|
||||
import Datagrid from '@shared/components/parts/Datagrid.astro';
|
||||
---
|
||||
|
||||
<DefaultLayout title="Data grid" pageHeader="Data grid" pageMenu="base.datagrid">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h3 class="card-title">Base info</h3>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<Datagrid />
|
||||
</div>
|
||||
</div>
|
||||
</DefaultLayout>
|
||||
@@ -1,16 +0,0 @@
|
||||
---
|
||||
title: Data grid
|
||||
page-header: Data grid
|
||||
page-menu: base.datagrid
|
||||
layout: default
|
||||
permalink: datagrid.html
|
||||
---
|
||||
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h3 class="card-title">Base info</h3>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
{% include "parts/datagrid.html" %}
|
||||
</div>
|
||||
</div>
|
||||
@@ -0,0 +1,84 @@
|
||||
---
|
||||
// Port of preview/pages/datatables.html (layout: default)
|
||||
import DefaultLayout from '@shared/layouts/DefaultLayout.astro';
|
||||
import { liquidUnixSeconds, liquidLongDate } from '@shared/lib/liquid-date';
|
||||
import Progress from '@shared/components/ui/Progress.astro';
|
||||
import TablerList from '@shared/components/js/TablerList.astro';
|
||||
import rollercoasters from '@data/rollercoasters.json';
|
||||
|
||||
const id = 'default';
|
||||
|
||||
// Equivalent of the random_number / random_date filters from shared/e11ty/filters.mjs.
|
||||
function randomNumber(x: number, min = 0, max = 100): number {
|
||||
let value =
|
||||
((x * x * Math.PI * Math.E * (max + 1) * (Math.sin(x) / Math.cos(x * x))) % (max + 1 - min)) + min;
|
||||
value = value > max ? max : value;
|
||||
value = value < min ? min : value;
|
||||
return Math.floor(value);
|
||||
}
|
||||
|
||||
function randomDate(x: number): Date {
|
||||
const start = new Date('2024-01-01').getTime() / 1000;
|
||||
const end = new Date('2024-12-30').getTime() / 1000;
|
||||
return new Date(randomNumber(x, start, end) * 1000);
|
||||
}
|
||||
|
||||
|
||||
const rows = (rollercoasters as Record<string, any>[]).map((rc, i) => {
|
||||
const index = i + 1;
|
||||
const progress = randomNumber(index, 0, 100);
|
||||
const date = randomDate(index);
|
||||
return {
|
||||
rc,
|
||||
progress,
|
||||
quantity: randomNumber(index, 1, 200),
|
||||
dateSeconds: liquidUnixSeconds(date),
|
||||
dateLabel: liquidLongDate(date),
|
||||
};
|
||||
});
|
||||
|
||||
const parameters =
|
||||
"[ 'sort-name', 'sort-type', 'sort-city', 'sort-score', { attr: 'data-date', name: 'sort-date' }, { attr: 'data-progress', name: 'sort-progress' }, 'sort-quantity' ]";
|
||||
---
|
||||
|
||||
<DefaultLayout title="Datatables" pageHeader="Datatables" pageMenu="plugins.datatables" pageLibs={['lists']}>
|
||||
<div class="card">
|
||||
<div class="card-body p-0">
|
||||
<div id={`table-${id}`} class="table-responsive">
|
||||
<table class="table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th><button class="table-sort" data-sort="sort-name">Name</button></th>
|
||||
<th><button class="table-sort" data-sort="sort-city">City</button></th>
|
||||
<th><button class="table-sort" data-sort="sort-type">Type</button></th>
|
||||
<th><button class="table-sort" data-sort="sort-score">Score</button></th>
|
||||
<th><button class="table-sort" data-sort="sort-date">Date</button></th>
|
||||
<th><button class="table-sort" data-sort="sort-quantity">Quantity</button></th>
|
||||
<th><button class="table-sort" data-sort="sort-progress">Progress</button></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody class="table-tbody">
|
||||
{rows.map(({ rc, progress, quantity, dateSeconds, dateLabel }) => (
|
||||
<tr>
|
||||
<td class="sort-name">{rc.name}</td>
|
||||
<td class="sort-city">{rc.city}</td>
|
||||
<td class="sort-type">{rc.type}</td>
|
||||
<td class="sort-score">{rc.score}</td>
|
||||
<td class="sort-date" data-date={dateSeconds}>{dateLabel}</td>
|
||||
<td class="sort-quantity">{quantity}</td>
|
||||
<td class="sort-progress" data-progress={progress}>
|
||||
<div class="row align-items-center">
|
||||
<div class="col-12 col-lg-auto">{progress}%</div>
|
||||
<div class="col"><Progress value={progress} width="5rem" /></div>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<TablerList id={id} parameters={parameters} />
|
||||
</DefaultLayout>
|
||||
@@ -1,52 +0,0 @@
|
||||
---
|
||||
title: Datatables
|
||||
page-header: Datatables
|
||||
page-libs: [lists]
|
||||
page-menu: plugins.datatables
|
||||
layout: default
|
||||
permalink: datatables.html
|
||||
---
|
||||
|
||||
{% assign id = include.map-id | default: 'default' %}
|
||||
<div class="card">
|
||||
<div class="card-body p-0">
|
||||
{% assign products = 'Tabler,Tabler Icons,Tabler Emails,Tabler Components,Tabler Illustrations,Bootstrap' | split: ',' %}
|
||||
{% assign techs = 'brand-apple,brand-windows,brand-debian,brand-android' | split: ',' %}
|
||||
<div id="table-{{ id }}" class="table-responsive">
|
||||
<table class="table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th><button class="table-sort" data-sort="sort-name">Name</button></th>
|
||||
<th><button class="table-sort" data-sort="sort-city">City</button></th>
|
||||
<th><button class="table-sort" data-sort="sort-type">Type</button></th>
|
||||
<th><button class="table-sort" data-sort="sort-score">Score</button></th>
|
||||
<th><button class="table-sort" data-sort="sort-date">Date</button></th>
|
||||
<th><button class="table-sort" data-sort="sort-quantity">Quantity</button></th>
|
||||
<th><button class="table-sort" data-sort="sort-progress">Progress</button></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody class="table-tbody">
|
||||
{% for rc in rollercoasters %}
|
||||
{% assign progress = forloop.index | random_number %}
|
||||
<tr>
|
||||
<td class="sort-name">{{ rc.name }}</td>
|
||||
<td class="sort-city">{{ rc.city }}</td>
|
||||
<td class="sort-type">{{ rc.type }}</td>
|
||||
<td class="sort-score">{{ rc.score }}</td>
|
||||
<td class="sort-date" data-date="{{ forloop.index | random_date | date: '%s' }}">{{ forloop.index | random_date | date: '%B %d, %Y' }}</td>
|
||||
<td class="sort-quantity">{{ forloop.index | random_number: 1, 200 }}</td>
|
||||
<td class="sort-progress" data-progress="{{ progress }}">
|
||||
<div class="row align-items-center">
|
||||
<div class="col-12 col-lg-auto">{{ progress }}%</div>
|
||||
<div class="col">{% include "ui/progress.html" value=progress width="5rem" %}</div>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
{% endfor %}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{% include "js/tabler-list.html", parameters="[ 'sort-name', 'sort-type', 'sort-city', 'sort-score', { attr: 'data-date', name: 'sort-date' }, { attr: 'data-progress', name: 'sort-progress' }, 'sort-quantity' ]" %}
|
||||
@@ -1,6 +0,0 @@
|
||||
---
|
||||
layout: redirect
|
||||
redirect:
|
||||
to: https://tabler.io/docs
|
||||
permalink: docs/index.html
|
||||
---
|
||||
@@ -0,0 +1,42 @@
|
||||
---
|
||||
// Port of preview/pages/dropdowns.html (layout: default)
|
||||
import DefaultLayout from '@shared/layouts/DefaultLayout.astro';
|
||||
import DropdownMenu from '@shared/components/ui/DropdownMenu.astro';
|
||||
import DropdownMenuAll from '@shared/components/ui/DropdownMenuAll.astro';
|
||||
---
|
||||
|
||||
<DefaultLayout title="Dropdowns" pageHeader="Dropdowns" pageMenu="base.dropdowns">
|
||||
<div class="row">
|
||||
<div class="col-sm-6 col-lg-3">
|
||||
<DropdownMenuAll show />
|
||||
</div>
|
||||
<div class="col-sm-6 col-lg-3">
|
||||
<DropdownMenu show />
|
||||
<DropdownMenu show separated />
|
||||
<DropdownMenu show active />
|
||||
<DropdownMenu show disabled />
|
||||
<DropdownMenu show header />
|
||||
<DropdownMenu show icons header />
|
||||
<DropdownMenu show arrow />
|
||||
</div>
|
||||
<div class="col-sm-6 col-lg-3">
|
||||
<DropdownMenu show />
|
||||
<DropdownMenu show separated />
|
||||
<DropdownMenu show active />
|
||||
<DropdownMenu show disabled />
|
||||
<DropdownMenu show header />
|
||||
<DropdownMenu show icons />
|
||||
<DropdownMenu show badge />
|
||||
</div>
|
||||
<div class="col-sm-6 col-lg-3">
|
||||
<DropdownMenu show dark />
|
||||
<DropdownMenu show dark separated />
|
||||
<DropdownMenu show arrow right dark />
|
||||
<DropdownMenu show arrow right dark icons />
|
||||
<DropdownMenu show check />
|
||||
<DropdownMenu show radio />
|
||||
<DropdownMenu show people />
|
||||
<DropdownMenu show flag />
|
||||
</div>
|
||||
</div>
|
||||
</DefaultLayout>
|
||||
@@ -1,44 +0,0 @@
|
||||
---
|
||||
title: Dropdowns
|
||||
page-header: Dropdowns
|
||||
page-menu: base.dropdowns
|
||||
layout: default
|
||||
permalink: dropdowns.html
|
||||
---
|
||||
|
||||
<div class="row">
|
||||
<div class="col-sm-6 col-lg-3">
|
||||
{% include "ui/dropdown-menu-all.html" show=true %}
|
||||
</div>
|
||||
<div class="col-sm-6 col-lg-3">
|
||||
{% include "ui/dropdown-menu.html" show=true %}
|
||||
{% include "ui/dropdown-menu.html" show=true separated=true %}
|
||||
{% include "ui/dropdown-menu.html" show=true active=true %}
|
||||
{% include "ui/dropdown-menu.html" show=true disabled=true %}
|
||||
{% include "ui/dropdown-menu.html" show=true header=true %}
|
||||
{% include "ui/dropdown-menu.html" show=true icons=true header=true %}
|
||||
{% include "ui/dropdown-menu.html" show=true arrow=true %}
|
||||
</div>
|
||||
<div class="col-sm-6 col-lg-3">
|
||||
{% include "ui/dropdown-menu.html" show=true %}
|
||||
{% include "ui/dropdown-menu.html" show=true separated=true %}
|
||||
{% include "ui/dropdown-menu.html" show=true active=true %}
|
||||
{% include "ui/dropdown-menu.html" show=true disabled=true %}
|
||||
{% include "ui/dropdown-menu.html" show=true header=true %}
|
||||
{% include "ui/dropdown-menu.html" show=true icons=true %}
|
||||
{% include "ui/dropdown-menu.html" show=true badge=true %}
|
||||
</div>
|
||||
<div class="col-sm-6 col-lg-3">
|
||||
{% include "ui/dropdown-menu.html" show=true dark=true %}
|
||||
{% include "ui/dropdown-menu.html" show=true dark=true separated=true %}
|
||||
{% include "ui/dropdown-menu.html" show=true arrow=true right=true dark=true %}
|
||||
{% include "ui/dropdown-menu.html" show=true arrow=true right=true dark=true icons=true %}
|
||||
{% include "ui/dropdown-menu.html" show=true check=true %}
|
||||
{% include "ui/dropdown-menu.html" show=true radio=true %}
|
||||
{% include "ui/dropdown-menu.html" show=true people=true %}
|
||||
{% include "ui/dropdown-menu.html" show=true flag=true %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
@@ -0,0 +1,44 @@
|
||||
---
|
||||
// Port of preview/pages/dropzone.html (layout: default).
|
||||
import DefaultLayout from '@shared/layouts/DefaultLayout.astro';
|
||||
import Dropzone from '@shared/components/ui/Dropzone.astro';
|
||||
---
|
||||
|
||||
<DefaultLayout
|
||||
title="Dropzone"
|
||||
pageHeader="Dropzone"
|
||||
pageMenu="plugins.dropzone"
|
||||
pageLibs={['dropzone']}
|
||||
>
|
||||
<div class="row row-cards">
|
||||
<div class="col-md-6">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<h3 class="card-title">Basic Usage</h3>
|
||||
<Dropzone id="default" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<h3 class="card-title">Multiple File Upload</h3>
|
||||
<Dropzone id="multiple" multiple={true} />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<h3 class="card-title">Custom Dropzone</h3>
|
||||
<Dropzone
|
||||
id="custom"
|
||||
custom={true}
|
||||
text="Your text here"
|
||||
description="Your custom description here"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</DefaultLayout>
|
||||
@@ -1,35 +0,0 @@
|
||||
---
|
||||
title: Dropzone
|
||||
page-header: Dropzone
|
||||
page-menu: plugins.dropzone
|
||||
page-libs: [dropzone]
|
||||
layout: default
|
||||
permalink: dropzone.html
|
||||
---
|
||||
|
||||
<div class="row row-cards">
|
||||
<div class="col-md-6">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<h3 class="card-title">Basic Usage</h3>
|
||||
{% include "ui/dropzone.html" id="default" %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<h3 class="card-title">Multiple File Upload</h3>
|
||||
{% include "ui/dropzone.html" id="multiple" multiple=true %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<h3 class="card-title">Custom Dropzone</h3>
|
||||
{% include "ui/dropzone.html" id="custom" custom=true text="Your text here" description="Your custom description here" %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -0,0 +1,201 @@
|
||||
---
|
||||
// Port of preview/pages/email-inbox.html.
|
||||
import DefaultLayout from '@shared/layouts/DefaultLayout.astro';
|
||||
import Button from '@shared/components/Button.astro';
|
||||
import Icon from '@shared/components/Icon.astro';
|
||||
import Progress from '@shared/components/ui/Progress.astro';
|
||||
import Modal from '@shared/components/modals/Modal.astro';
|
||||
import NewEmailModalContent from '@shared/components/modals/NewEmailModalContent.astro';
|
||||
import mails from '@data/mails.json';
|
||||
---
|
||||
|
||||
<DefaultLayout
|
||||
title="Email inbox"
|
||||
pageHeader="Inbox"
|
||||
pageMenu="extra.email-inbox"
|
||||
pageLibs={['hugerte']}
|
||||
>
|
||||
<div class="card">
|
||||
<div class="row g-0">
|
||||
<div class="col-xxl-3 email-border border-end">
|
||||
<div class="offcanvas-xxl offcanvas-start h-100 file-offcanvas" tabindex="-1" id="emailSidebaroffcanvas">
|
||||
<div class="card-body h-100">
|
||||
<div>
|
||||
<Button icon="pencil" text="Compose" color="primary" class="d-none d-sm-block" modalId="new-email" />
|
||||
</div>
|
||||
|
||||
<div class="mt-3 nav nav-vertical">
|
||||
<a href="#" class="nav-link text-danger fw-bold">
|
||||
<Icon name="inbox" class="me-2" />
|
||||
Inbox<span class="badge badge-danger ms-auto">{mails.length}</span>
|
||||
</a>
|
||||
<a href="#" class="nav-link"><Icon name="star" class="me-2" />Starred</a>
|
||||
<a href="#" class="nav-link"><Icon name="clock" class="me-2" />Snoozed</a>
|
||||
<a href="#" class="nav-link "><Icon name="file" class="me-2" />Draft<span class="badge badge-info ms-auto">32</span></a>
|
||||
<a href="#" class="nav-link"><Icon name="mail-up" class="me-2" />Sent Mail</a>
|
||||
<a href="#" class="nav-link"><Icon name="trash" class="me-2" />Trash</a>
|
||||
<a href="#" class="nav-link"><Icon name="tag" class="me-2" />Important</a>
|
||||
<a href="#" class="nav-link"><Icon name="alert-octagon" class="me-2" />Spam</a>
|
||||
</div>
|
||||
|
||||
<div class="mt-4">
|
||||
<h6 class="subheader">Labels</h6>
|
||||
<div class="mt-2 nav nav-vertical">
|
||||
<a href="#" class="nav-link">
|
||||
<div class="badge bg-info me-2"></div> Updates
|
||||
</a>
|
||||
<a href="#" class="nav-link">
|
||||
<div class="badge bg-warning me-2"></div> Friends
|
||||
</a>
|
||||
<a href="#" class="nav-link">
|
||||
<div class="badge bg-success me-2"></div> Family
|
||||
</a>
|
||||
<a href="#" class="nav-link">
|
||||
<div class="badge bg-primary me-2"></div> Social
|
||||
</a>
|
||||
<a href="#" class="nav-link">
|
||||
<div class="badge bg-danger me-2"></div> Important
|
||||
</a>
|
||||
<a href="#" class="nav-link">
|
||||
<div class="badge bg-purple me-2"></div> Promotions
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mt-5">
|
||||
<h6 class="subheader">Storage</h6>
|
||||
<Progress value={46} class="my-2" />
|
||||
|
||||
<p class="text-muted font-13 mb-0">7.02 GB (46%) of 15 GB used</p>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-xxl-9">
|
||||
<div class="card-body">
|
||||
<div class="d-flex flex-wrap align-items-center gap-2">
|
||||
<div class="d-xxl-none d-inline-flex">
|
||||
<button class="btn btn-icon" type="button" data-bs-toggle="offcanvas"
|
||||
data-bs-target="#emailSidebaroffcanvas" aria-controls="emailSidebaroffcanvas">
|
||||
<Icon name="menu-2" />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="btn-group">
|
||||
<Button icon="archive" iconOnly />
|
||||
<Button icon="alert-octagon" iconOnly />
|
||||
<Button icon="trash" iconOnly />
|
||||
</div>
|
||||
|
||||
<div class="btn-group">
|
||||
<button type="button" class="btn dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
|
||||
<Icon name="folder" />
|
||||
</button>
|
||||
<div class="dropdown-menu">
|
||||
<span class="dropdown-header">Move to</span>
|
||||
<a class="dropdown-item" href="#">Social</a>
|
||||
<a class="dropdown-item" href="#">Promotions</a>
|
||||
<a class="dropdown-item" href="#">Updates</a>
|
||||
<a class="dropdown-item" href="#">Forums</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="btn-group">
|
||||
<button type="button" class="btn dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
|
||||
<Icon name="tag" />
|
||||
</button>
|
||||
<div class="dropdown-menu">
|
||||
<span class="dropdown-header">Label as:</span>
|
||||
<a class="dropdown-item" href="#">Updates</a>
|
||||
<a class="dropdown-item" href="#">Social</a>
|
||||
<a class="dropdown-item" href="#">Promotions</a>
|
||||
<a class="dropdown-item" href="#">Forums</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="btn-group">
|
||||
<button type="button" class="btn dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
|
||||
<Icon name="dots" /> More
|
||||
</button>
|
||||
<div class="dropdown-menu">
|
||||
<span class="dropdown-header">More Options :</span>
|
||||
<a class="dropdown-item" href="#">Mark as Unread</a>
|
||||
<a class="dropdown-item" href="#">Add to Tasks</a>
|
||||
<a class="dropdown-item" href="#">Add Star</a>
|
||||
<a class="dropdown-item" href="#">Mute</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mt-3">
|
||||
<ul class="email-list">
|
||||
{mails && mails.length > 0 ? (
|
||||
mails.map((mail) => (
|
||||
<li>
|
||||
<div class="email-sender-info">
|
||||
<div class="checkbox-wrapper-mail">
|
||||
<div class="form-check">
|
||||
<input type="checkbox" class="form-check-input" id={`mail-${mail.id}`} />
|
||||
<label class="form-check-label" for={`mail-${mail.id}`}></label>
|
||||
</div>
|
||||
</div>
|
||||
<span class="star-toggle"><Icon name="star" /></span>
|
||||
<a href="#" class="email-title">{mail.sender}</a>
|
||||
</div>
|
||||
|
||||
<div class="email-content">
|
||||
<a href="#" class="email-subject">{mail.subject} –
|
||||
<span>{mail.preview}</span>
|
||||
</a>
|
||||
<div class="email-date">{mail.date}</div>
|
||||
</div>
|
||||
|
||||
<div class="email-action-icons">
|
||||
<ul class="list-inline">
|
||||
<li class="list-inline-item">
|
||||
<a href="#"><Icon name="archive" /></a>
|
||||
</li>
|
||||
<li class="list-inline-item">
|
||||
<a href="#"><Icon name="trash" /></a>
|
||||
</li>
|
||||
<li class="list-inline-item">
|
||||
<a href="#">
|
||||
<Icon name="mail-opened" class="email-action-icons-item" />
|
||||
</a>
|
||||
</li>
|
||||
<li class="list-inline-item">
|
||||
<a href="#"><Icon name="clock" /></a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
))
|
||||
) : (
|
||||
<li class="text-muted">No emails</li>
|
||||
)}
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-7 mt-1">
|
||||
Showing 1 - {mails.length} of {mails.length}
|
||||
</div> <!-- end col-->
|
||||
<div class="col-5">
|
||||
<div class="btn-group float-end">
|
||||
<button type="button" class="btn btn-icon"><Icon name="chevron-left" /></button>
|
||||
<button type="button" class="btn btn-icon"><Icon name="chevron-right" /></button>
|
||||
</div>
|
||||
</div> <!-- end col-->
|
||||
</div> <!-- end row-->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<Modal modalId="new-email">
|
||||
<NewEmailModalContent />
|
||||
</Modal>
|
||||
</DefaultLayout>
|
||||
@@ -1,193 +0,0 @@
|
||||
---
|
||||
title: Email inbox
|
||||
page-header: Inbox
|
||||
page-menu: extra.email-inbox
|
||||
layout: default
|
||||
permalink: email-inbox.html
|
||||
page-libs: [ hugerte]
|
||||
---
|
||||
|
||||
<div class="card">
|
||||
<div class="row g-0">
|
||||
<div class="col-xxl-3 email-border border-end">
|
||||
<div class="offcanvas-xxl offcanvas-start h-100 file-offcanvas" tabindex="-1" id="emailSidebaroffcanvas">
|
||||
<div class="card-body h-100">
|
||||
<div>
|
||||
{% include "ui/button.html" icon="pencil" text="Compose" color="primary" class="d-none d-sm-block"
|
||||
modal-id="new-email" %}
|
||||
</div>
|
||||
|
||||
<div class="mt-3 nav nav-vertical">
|
||||
<a href="#" class="nav-link text-danger fw-bold">
|
||||
{% include "ui/icon.html" icon="inbox" class="me-2" %}
|
||||
Inbox<span class="badge badge-danger ms-auto">{{ mails | size }}</span>
|
||||
</a>
|
||||
<a href="#" class="nav-link">{% include "ui/icon.html" icon="star" class="me-2" %}Starred</a>
|
||||
<a href="#" class="nav-link">{% include "ui/icon.html" icon="clock" class="me-2" %}Snoozed</a>
|
||||
<a href="#" class="nav-link ">{% include "ui/icon.html" icon="file" class="me-2" %}Draft<span class="badge badge-info ms-auto">32</span></a>
|
||||
<a href="#" class="nav-link">{% include "ui/icon.html" icon="mail-up" class="me-2" %}Sent Mail</a>
|
||||
<a href="#" class="nav-link">{% include "ui/icon.html" icon="trash" class="me-2" %}Trash</a>
|
||||
<a href="#" class="nav-link">{% include "ui/icon.html" icon="tag" class="me-2" %}Important</a>
|
||||
<a href="#" class="nav-link">{% include "ui/icon.html" icon="alert-octagon" class="me-2" %}Spam</a>
|
||||
</div>
|
||||
|
||||
<div class="mt-4">
|
||||
<h6 class="subheader">Labels</h6>
|
||||
<div class="mt-2 nav nav-vertical">
|
||||
<a href="#" class="nav-link">
|
||||
<div class="badge bg-info me-2"></div> Updates
|
||||
</a>
|
||||
<a href="#" class="nav-link">
|
||||
<div class="badge bg-warning me-2"></div> Friends
|
||||
</a>
|
||||
<a href="#" class="nav-link">
|
||||
<div class="badge bg-success me-2"></div> Family
|
||||
</a>
|
||||
<a href="#" class="nav-link">
|
||||
<div class="badge bg-primary me-2"></div> Social
|
||||
</a>
|
||||
<a href="#" class="nav-link">
|
||||
<div class="badge bg-danger me-2"></div> Important
|
||||
</a>
|
||||
<a href="#" class="nav-link">
|
||||
<div class="badge bg-purple me-2"></div> Promotions
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mt-5">
|
||||
<h6 class="subheader">Storage</h6>
|
||||
{% include "ui/progress.html" value=46 max=100 class="my-2" %}
|
||||
|
||||
<p class="text-muted font-13 mb-0">7.02 GB (46%) of 15 GB used</p>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-xxl-9">
|
||||
<div class="card-body">
|
||||
<div class="d-flex flex-wrap align-items-center gap-2">
|
||||
<div class="d-xxl-none d-inline-flex">
|
||||
<button class="btn btn-icon" type="button" data-bs-toggle="offcanvas"
|
||||
data-bs-target="#emailSidebaroffcanvas" aria-controls="emailSidebaroffcanvas">
|
||||
{% include "ui/icon.html" icon="menu-2" %}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="btn-group">
|
||||
{% include "ui/button.html" icon="archive" icon-only=true %}
|
||||
{% include "ui/button.html" icon="alert-octagon" icon-only=true %}
|
||||
{% include "ui/button.html" icon="trash" icon-only=true %}
|
||||
</div>
|
||||
|
||||
<div class="btn-group">
|
||||
<button type="button" class="btn dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
|
||||
{% include "ui/icon.html" icon="folder" %}
|
||||
</button>
|
||||
<div class="dropdown-menu">
|
||||
<span class="dropdown-header">Move to</span>
|
||||
<a class="dropdown-item" href="#">Social</a>
|
||||
<a class="dropdown-item" href="#">Promotions</a>
|
||||
<a class="dropdown-item" href="#">Updates</a>
|
||||
<a class="dropdown-item" href="#">Forums</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="btn-group">
|
||||
<button type="button" class="btn dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
|
||||
{% include "ui/icon.html" icon="tag" %}
|
||||
</button>
|
||||
<div class="dropdown-menu">
|
||||
<span class="dropdown-header">Label as:</span>
|
||||
<a class="dropdown-item" href="#">Updates</a>
|
||||
<a class="dropdown-item" href="#">Social</a>
|
||||
<a class="dropdown-item" href="#">Promotions</a>
|
||||
<a class="dropdown-item" href="#">Forums</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="btn-group">
|
||||
<button type="button" class="btn dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
|
||||
{% include "ui/icon.html" icon="dots" %} More
|
||||
</button>
|
||||
<div class="dropdown-menu">
|
||||
<span class="dropdown-header">More Options :</span>
|
||||
<a class="dropdown-item" href="#">Mark as Unread</a>
|
||||
<a class="dropdown-item" href="#">Add to Tasks</a>
|
||||
<a class="dropdown-item" href="#">Add Star</a>
|
||||
<a class="dropdown-item" href="#">Mute</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mt-3">
|
||||
<ul class="email-list">
|
||||
{% if mails and mails.size > 0 %}
|
||||
{% for mail in mails %}
|
||||
<li>
|
||||
<div class="email-sender-info">
|
||||
<div class="checkbox-wrapper-mail">
|
||||
<div class="form-check">
|
||||
<input type="checkbox" class="form-check-input" id="mail-{{ mail.id }}">
|
||||
<label class="form-check-label" for="mail-{{ mail.id }}"></label>
|
||||
</div>
|
||||
</div>
|
||||
<span class="star-toggle">{% include "ui/icon.html" icon="star" %}</span>
|
||||
<a href="#" class="email-title">{{ mail.sender }}</a>
|
||||
</div>
|
||||
|
||||
<div class="email-content">
|
||||
<a href="#" class="email-subject">{{ mail.subject }} –
|
||||
<span>{{ mail.preview }}</span>
|
||||
</a>
|
||||
<div class="email-date">{{ mail.date }}</div>
|
||||
</div>
|
||||
|
||||
<div class="email-action-icons">
|
||||
<ul class="list-inline">
|
||||
<li class="list-inline-item">
|
||||
<a href="#">{% include "ui/icon.html" icon="archive" %}</a>
|
||||
</li>
|
||||
<li class="list-inline-item">
|
||||
<a href="#">{% include "ui/icon.html" icon="trash" %}</a>
|
||||
</li>
|
||||
<li class="list-inline-item">
|
||||
<a href="#">
|
||||
{% include "ui/icon.html" icon="mail-opened" class="email-action-icons-item" %}
|
||||
</a>
|
||||
</li>
|
||||
<li class="list-inline-item">
|
||||
<a href="#">{% include "ui/icon.html" icon="clock" %}</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
{% endfor %}
|
||||
{% else %}
|
||||
<li class="text-muted">No emails</li>
|
||||
{% endif %}
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-7 mt-1">
|
||||
Showing 1 - {{ mails | size }} of {{ mails | size }}
|
||||
</div> <!-- end col-->
|
||||
<div class="col-5">
|
||||
<div class="btn-group float-end">
|
||||
<button type="button" class="btn btn-icon">{% include "ui/icon.html" icon="chevron-left"
|
||||
%}</button>
|
||||
<button type="button" class="btn btn-icon">{% include "ui/icon.html" icon="chevron-right"
|
||||
%}</button>
|
||||
</div>
|
||||
</div> <!-- end col-->
|
||||
</div> <!-- end row-->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{% include "ui/modal.html" modal-id="new-email" %}
|
||||
@@ -0,0 +1,111 @@
|
||||
---
|
||||
// Port of preview/pages/emails.html.
|
||||
// Masonry auto-inits from the data-masonry attribute (page-lib, no init script,
|
||||
// like cards-masonry.astro); fslightbox is a pure page-lib (no init script).
|
||||
// The show.bs.modal handler is captured via {% capture_script %} → addPageScript.
|
||||
import DefaultLayout from '@shared/layouts/DefaultLayout.astro';
|
||||
import Icon from '@shared/components/Icon.astro';
|
||||
import { site } from '@shared/lib/site';
|
||||
import { addPageScript } from '@shared/lib/page-scripts';
|
||||
import emails from '@data/emails.json';
|
||||
|
||||
const emailEntries = Object.entries(emails);
|
||||
|
||||
addPageScript(`<script>
|
||||
const emailModal = document.getElementById("email-modal")
|
||||
if (emailModal) {
|
||||
emailModal.addEventListener("show.bs.modal", function (e) {
|
||||
const button = e.relatedTarget
|
||||
|
||||
const image = button.getAttribute("data-bs-image"),
|
||||
title = button.getAttribute("data-bs-title"),
|
||||
description = button.getAttribute("data-bs-description")
|
||||
|
||||
emailModal.querySelector("[data-email-title]").textContent = title
|
||||
emailModal.querySelector("[data-email-description]").textContent = description
|
||||
emailModal.querySelector("[data-email-image]").src = image
|
||||
|
||||
modalTitle.textContent = \`New message to \${recipient}\`
|
||||
modalBodyInput.value = recipient
|
||||
})
|
||||
}
|
||||
</script>`);
|
||||
---
|
||||
|
||||
<DefaultLayout
|
||||
pageHeader="Email templates"
|
||||
pageMenu="addons.emails"
|
||||
pageLibs={['masonry', 'fslightbox']}
|
||||
>
|
||||
<div class="row row-cards">
|
||||
<div class="col-12">
|
||||
<div class="card card-md">
|
||||
<div class="card-stamp card-stamp-lg">
|
||||
<div class="card-stamp-icon bg-primary">
|
||||
<Icon name="mail" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="row align-items-center">
|
||||
<div class="col-10">
|
||||
<h3 class="h1">Tabler Emails</h3>
|
||||
<div class="prose text-secondary fs-3">
|
||||
{emailEntries.length} eye-catching, customizable and responsive email templates to improve your email communication. No coding skills needed.
|
||||
</div>
|
||||
<div class="mt-3">
|
||||
<a href={site.emails.buy_link} class="btn btn-primary" target="_blank">Buy all emails for {site.emails.price}</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12">
|
||||
<div class="row row-cards" data-masonry={'{"percentPosition": true }'}>
|
||||
{emailEntries.map(([key, email]) => (
|
||||
<div class="col-4">
|
||||
<a
|
||||
href={`./static/emails/${key}.jpg`}
|
||||
data-bs-toggle="modal"
|
||||
data-bs-target="#email-modal"
|
||||
data-bs-title={email.descriptionShort}
|
||||
data-bs-description={email.descriptionLong}
|
||||
data-bs-image={`./static/emails/${key}.jpg`}
|
||||
>
|
||||
<img src={`./static/emails/${key}.jpg`} class="img-fluid rounded" alt={email.descriptionShort} width={email.width} height={email.height} />
|
||||
</a>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="modal fade" id="email-modal" aria-hidden="true" aria-labelledby="email-modal-label" tabindex="-1">
|
||||
<div class="modal-dialog modal-xl modal-dialog-centered">
|
||||
<div class="modal-content">
|
||||
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
|
||||
<div class="modal-body p-0">
|
||||
<div class="row g-0">
|
||||
<div class="col-6">
|
||||
<div class="p-6 bg-surface-secondary rounded-start">
|
||||
<img src="" class="img-fluid rounded-start" data-email-image />
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-6">
|
||||
<div class="p-7">
|
||||
<div class="prose">
|
||||
<h3 data-email-title></h3>
|
||||
<p data-email-description></p>
|
||||
</div>
|
||||
|
||||
<div class="mt-6">
|
||||
<a href={site.emails.buy_link} class="btn btn-primary w-100" target="_blank">Buy {site.emails.count} emails for {site.emails.price}</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</DefaultLayout>
|
||||
@@ -1,101 +0,0 @@
|
||||
---
|
||||
page-header: Email templates
|
||||
page-menu: addons.emails
|
||||
page-libs: [masonry, fslightbox]
|
||||
layout: default
|
||||
permalink: emails.html
|
||||
---
|
||||
|
||||
<div class="row row-cards">
|
||||
<div class="col-12">
|
||||
<div class="card card-md">
|
||||
<div class="card-stamp card-stamp-lg">
|
||||
<div class="card-stamp-icon bg-primary">
|
||||
{% include "ui/icon.html" icon="mail" %}
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="row align-items-center">
|
||||
<div class="col-10">
|
||||
<h3 class="h1">Tabler Emails</h3>
|
||||
<div class="prose text-secondary fs-3">
|
||||
{{ emails | size }} eye-catching, customizable and responsive email templates to improve your email communication. No coding skills needed.
|
||||
</div>
|
||||
<div class="mt-3">
|
||||
<a href="{{ site.emails.buy_link }}" class="btn btn-primary" target="_blank">Buy all emails for {{ site.emails.price }}</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12">
|
||||
<div class="row row-cards" data-masonry='{"percentPosition": true }'>
|
||||
{% for email in emails %}
|
||||
<div class="col-4">
|
||||
<a
|
||||
href="{{ page | relative }}/static/emails/{{ email[0] }}.jpg"
|
||||
data-bs-toggle="modal"
|
||||
data-bs-target="#email-modal"
|
||||
data-bs-title="{{ email[1].descriptionShort | escape }}"
|
||||
data-bs-description="{{ email[1].descriptionLong | escape }}"
|
||||
data-bs-image="{{ page | relative }}/static/emails/{{ email[0] }}.jpg"
|
||||
>
|
||||
<img src="{{ page | relative }}/static/emails/{{ email[0] }}.jpg" class="img-fluid rounded" alt="{{ email[1].descriptionShort }}" width="{{ email[1].width }}" height="{{ email[1].height }}" />
|
||||
</a>
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="modal fade" id="email-modal" aria-hidden="true" aria-labelledby="email-modal-label" tabindex="-1">
|
||||
<div class="modal-dialog modal-xl modal-dialog-centered">
|
||||
<div class="modal-content">
|
||||
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
|
||||
<div class="modal-body p-0">
|
||||
<div class="row g-0">
|
||||
<div class="col-6">
|
||||
<div class="p-6 bg-surface-secondary rounded-start">
|
||||
<img src="" class="img-fluid rounded-start" data-email-image />
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-6">
|
||||
<div class="p-7">
|
||||
<div class="prose">
|
||||
<h3 data-email-title></h3>
|
||||
<p data-email-description></p>
|
||||
</div>
|
||||
|
||||
<div class="mt-6">
|
||||
<a href="{{ site.emails.buy_link }}" class="btn btn-primary w-100" target="_blank">Buy {{ site.emails.count }} emails for {{ site.emails.price }}</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{% capture_script %}
|
||||
<script>
|
||||
const emailModal = document.getElementById("email-modal")
|
||||
if (emailModal) {
|
||||
emailModal.addEventListener("show.bs.modal", function (e) {
|
||||
const button = e.relatedTarget
|
||||
|
||||
const image = button.getAttribute("data-bs-image"),
|
||||
title = button.getAttribute("data-bs-title"),
|
||||
description = button.getAttribute("data-bs-description")
|
||||
|
||||
emailModal.querySelector("[data-email-title]").textContent = title
|
||||
emailModal.querySelector("[data-email-description]").textContent = description
|
||||
emailModal.querySelector("[data-email-image]").src = image
|
||||
|
||||
modalTitle.textContent = `New message to ${recipient}`
|
||||
modalBodyInput.value = recipient
|
||||
})
|
||||
}
|
||||
</script>
|
||||
{% endcapture_script %}
|
||||
@@ -0,0 +1,8 @@
|
||||
---
|
||||
// Port of preview/pages/empty.html (layout: default)
|
||||
import DefaultLayout from '@shared/layouts/DefaultLayout.astro';
|
||||
---
|
||||
|
||||
<DefaultLayout title="Empty page" pageHeader="Empty page" pageMenu="extra.empty">
|
||||
<!-- Content here -->
|
||||
</DefaultLayout>
|
||||
@@ -1,9 +0,0 @@
|
||||
---
|
||||
title: Empty page
|
||||
page-menu: extra.empty
|
||||
page-header: Empty page
|
||||
layout: default
|
||||
permalink: empty.html
|
||||
---
|
||||
|
||||
<!-- Content here -->
|
||||
@@ -0,0 +1,5 @@
|
||||
---
|
||||
import ErrorLayout from '@shared/layouts/ErrorLayout.astro';
|
||||
---
|
||||
|
||||
<ErrorLayout title="Page 404" pageError="404" />
|
||||
@@ -1,7 +0,0 @@
|
||||
---
|
||||
title: Page 404
|
||||
layout: error
|
||||
page-error: 404
|
||||
page-menu: base.error.404
|
||||
permalink: error-404.html
|
||||
---
|
||||
@@ -0,0 +1,5 @@
|
||||
---
|
||||
import ErrorLayout from '@shared/layouts/ErrorLayout.astro';
|
||||
---
|
||||
|
||||
<ErrorLayout title="Page 500" pageError="500" />
|
||||
@@ -1,7 +0,0 @@
|
||||
---
|
||||
title: Page 500
|
||||
layout: error
|
||||
page-error: 500
|
||||
page-menu: base.error.500
|
||||
permalink: error-500.html
|
||||
---
|
||||
@@ -0,0 +1,5 @@
|
||||
---
|
||||
import ErrorLayout from '@shared/layouts/ErrorLayout.astro';
|
||||
---
|
||||
|
||||
<ErrorLayout title="Maintenance mode" pageError="maintenance" />
|
||||
@@ -1,7 +0,0 @@
|
||||
---
|
||||
title: Maintenance mode
|
||||
layout: error
|
||||
page-error: maintenance
|
||||
page-menu: base.error.maintenance
|
||||
permalink: error-maintenance.html
|
||||
---
|
||||
@@ -0,0 +1,73 @@
|
||||
---
|
||||
// Port of preview/pages/faq.html.
|
||||
import DefaultLayout from '@shared/layouts/DefaultLayout.astro';
|
||||
import Icon from '@shared/components/Icon.astro';
|
||||
import faq from '@data/faq.json';
|
||||
|
||||
const categories = faq as { name: string; questions: { question: string }[] }[];
|
||||
---
|
||||
|
||||
<DefaultLayout pageHeader="Frequently Asked Questions" actions="breadcrumb" pageMenu="extra.faq">
|
||||
<div class="card card-lg">
|
||||
<div class="card-body">
|
||||
<div class="space-y-4">
|
||||
{
|
||||
categories.map((category, ci) => (
|
||||
<div>
|
||||
<h2 class="mb-3">
|
||||
{ci + 1}. {category.name}
|
||||
</h2>
|
||||
<div
|
||||
id={`faq-${ci + 1}`}
|
||||
class="accordion accordion-tabs"
|
||||
role="tablist"
|
||||
aria-multiselectable="true"
|
||||
>
|
||||
{category.questions.map((question, qi) => (
|
||||
<div class="accordion-item">
|
||||
<div class="accordion-header">
|
||||
<button
|
||||
class={`accordion-button${qi === 0 ? '' : ' collapsed'}`}
|
||||
data-bs-toggle="collapse"
|
||||
data-bs-target={`#faq-${ci + 1}-${qi + 1}`}
|
||||
role="tab"
|
||||
>
|
||||
{question.question}
|
||||
<div class="accordion-button-toggle">
|
||||
<Icon name="chevron-down" />
|
||||
</div>
|
||||
</button>
|
||||
</div>
|
||||
<div
|
||||
id={`faq-${ci + 1}-${qi + 1}`}
|
||||
class={`accordion-collapse collapse${qi === 0 ? ' show' : ''}`}
|
||||
role="tabpanel"
|
||||
data-bs-parent={`#faq-${ci + 1}`}
|
||||
>
|
||||
<div class="accordion-body pt-0">
|
||||
<div>
|
||||
<p>
|
||||
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
|
||||
Accusantium alias dignissimos dolorum ea est eveniet, excepturi
|
||||
illum in iste iure maiores nemo recusandae rerum saepe sed, sunt
|
||||
totam! Explicabo, ipsa?
|
||||
</p>
|
||||
<p>
|
||||
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
|
||||
Accusantium alias dignissimos dolorum ea est eveniet, excepturi
|
||||
illum in iste iure maiores nemo recusandae rerum saepe sed, sunt
|
||||
totam! Explicabo, ipsa?
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
))
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</DefaultLayout>
|
||||
@@ -1,43 +0,0 @@
|
||||
---
|
||||
page-header: Frequently Asked Questions
|
||||
page-header-actions: breadcrumb
|
||||
page-menu: extra.faq
|
||||
layout: default
|
||||
permalink: faq.html
|
||||
---
|
||||
|
||||
<div class="card card-lg">
|
||||
<div class="card-body">
|
||||
<div class="space-y-4">
|
||||
{% for category in faq %}
|
||||
{% assign categories-loop = forloop %}
|
||||
<div>
|
||||
<h2 class="mb-3">{{ categories-loop.index }}. {{ category.name }}</h2>
|
||||
<div id="faq-{{ categories-loop.index }}" class="accordion accordion-tabs" role="tablist" aria-multiselectable="true">
|
||||
{% for question in category.questions %}
|
||||
{% assign questions-loop = forloop %}
|
||||
<div class="accordion-item">
|
||||
<div class="accordion-header">
|
||||
<button class="accordion-button{% unless questions-loop.index == 1 %} collapsed{% endunless %}" data-bs-toggle="collapse" data-bs-target="#faq-{{ categories-loop.index }}-{{ questions-loop.index }}" role="tab">
|
||||
{{ question.question }}
|
||||
<div class="accordion-button-toggle">
|
||||
{% include "ui/icon.html" icon="chevron-down" %}
|
||||
</div>
|
||||
</button>
|
||||
</div>
|
||||
<div id="faq-{{ categories-loop.index }}-{{ questions-loop.index }}" class="accordion-collapse collapse{% if questions-loop.index == 1 %} show{% endif %}" role="tabpanel" data-bs-parent="#faq-{{ categories-loop.index }}">
|
||||
<div class="accordion-body pt-0">
|
||||
<div>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium alias dignissimos dolorum ea est eveniet, excepturi illum in iste iure maiores nemo recusandae rerum saepe sed, sunt totam! Explicabo, ipsa?</p>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium alias dignissimos dolorum ea est eveniet, excepturi illum in iste iure maiores nemo recusandae rerum saepe sed, sunt totam! Explicabo, ipsa?</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 15 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 32 KiB |
@@ -0,0 +1,35 @@
|
||||
---
|
||||
// Port of preview/pages/flags.html (layout: default)
|
||||
import DefaultLayout from '@shared/layouts/DefaultLayout.astro';
|
||||
import flags from '@data/flags.json';
|
||||
|
||||
// Liquid: {% for icon in (0..20) %}<div></div>{% endfor %} — 21 filler divs
|
||||
const fillers = Array.from({ length: 21 });
|
||||
---
|
||||
|
||||
<DefaultLayout title="Flags" pageHeader="Flags" pageMenu="addons.flags">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<div class="card-title">List of all flags</div>
|
||||
</div>
|
||||
<div class="card-body p-0">
|
||||
<div class="demo-icons-list-wrap">
|
||||
<div class="demo-icons-list">
|
||||
{
|
||||
flags.map((country) => (
|
||||
<span
|
||||
class="demo-icons-list-item"
|
||||
title={country.name}
|
||||
data-bs-toggle="tooltip"
|
||||
data-bs-placement="top"
|
||||
>
|
||||
<span class={`flag flag-country-${country.flag.toLowerCase()}`} />
|
||||
</span>
|
||||
))
|
||||
}
|
||||
{fillers.map(() => <div></div>)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</DefaultLayout>
|
||||
@@ -1,27 +0,0 @@
|
||||
---
|
||||
title: Flags
|
||||
page-header: Flags
|
||||
page-menu: addons.flags
|
||||
layout: default
|
||||
permalink: flags.html
|
||||
---
|
||||
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<div class="card-title">List of all flags</div>
|
||||
</div>
|
||||
<div class="card-body p-0">
|
||||
<div class="demo-icons-list-wrap">
|
||||
<div class="demo-icons-list">
|
||||
{% for country in flags %}
|
||||
<span class="demo-icons-list-item" title="{{ country.name }}" data-bs-toggle="tooltip" data-bs-placement="top">
|
||||
<span class="flag flag-country-{{ country.flag | downcase }}"></span>
|
||||
</span>
|
||||
{% endfor %}
|
||||
{% for icon in (0..20) %}
|
||||
<div></div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -0,0 +1,9 @@
|
||||
---
|
||||
// Port of preview/pages/forgot-password.html (layout: single)
|
||||
import SingleLayout from '@shared/layouts/SingleLayout.astro';
|
||||
import ForgotPasswordCard from '@shared/components/cards/ForgotPasswordCard.astro';
|
||||
---
|
||||
|
||||
<SingleLayout title="Forgot password">
|
||||
<ForgotPasswordCard />
|
||||
</SingleLayout>
|
||||
@@ -1,7 +0,0 @@
|
||||
---
|
||||
title: Forgot password
|
||||
layout: single
|
||||
permalink: forgot-password.html
|
||||
---
|
||||
|
||||
{% include "cards/forgot-password.html" show-header="1" %}
|
||||
@@ -0,0 +1,246 @@
|
||||
---
|
||||
// Port of preview/pages/form-elements.html
|
||||
import DefaultLayout from '@shared/layouts/DefaultLayout.astro';
|
||||
import FormElements1 from '@shared/components/forms/FormElements1.astro';
|
||||
import FormElements2 from '@shared/components/forms/FormElements2.astro';
|
||||
import FormElements3 from '@shared/components/forms/FormElements3.astro';
|
||||
import FormElements4 from '@shared/components/forms/FormElements4.astro';
|
||||
import FormElements5 from '@shared/components/forms/FormElements5.astro';
|
||||
import FormElements6 from '@shared/components/forms/FormElements6.astro';
|
||||
import Layout from '@shared/components/cards/form/Layout.astro';
|
||||
import InputIcon from '@shared/components/ui/form/InputIcon.astro';
|
||||
import InputMask from '@shared/components/ui/form/InputMask.astro';
|
||||
import Button from '@shared/components/Button.astro';
|
||||
import Avatar from '@shared/components/ui/Avatar.astro';
|
||||
import people from '@data/people.json';
|
||||
|
||||
const httpMethods = ['GET', 'POST', 'PUT', 'HEAD', 'DELETE', 'PATCH'];
|
||||
const comparisons = [
|
||||
['EQUALS', 'Equals'], ['NOT_EQUALS', 'Not equals'], ['HAS_KEY', 'Has key'],
|
||||
['NOT_HAS_KEY', 'Not has key'], ['HAS_VALUE', 'Has value'], ['NOT_HAS_VALUE', 'Not has value'],
|
||||
['IS_EMPTY', 'Is empty'], ['NOT_EMPTY', 'Is not empty'], ['GREATER_THAN', 'Greater than'],
|
||||
['LESS_THAN', 'Less than'],
|
||||
];
|
||||
const sources = [
|
||||
['STATUS_CODE', 'Status code'], ['JSON_BODY', 'JSON body'], ['HEADERS', 'Headers'],
|
||||
['TEXT_BODY', 'Text body'], ['RESPONSE_TIME', 'Response time'],
|
||||
];
|
||||
// assertion rows: [sourceSel, targetVal, comparisonSel]
|
||||
const rows = [
|
||||
{ source: 'STATUS_CODE', comparison: 'EQUALS', target: '200', prop: '' },
|
||||
{ source: 'JSON_BODY', comparison: 'HAS_VALUE', target: 'string', prop: 'parameters.alt.type' },
|
||||
{ source: 'RESPONSE_TIME', comparison: 'LESS_THAN', target: '500', prop: '' },
|
||||
{ source: 'HEADERS', comparison: 'EQUALS', target: 'application/json; charset=UTF-8', prop: 'content-type' },
|
||||
];
|
||||
---
|
||||
|
||||
<DefaultLayout
|
||||
title="Form elements"
|
||||
pageHeader="Form elements"
|
||||
pageMenu="form.elements"
|
||||
pageLibs={['nouislider', 'autosize', 'tabler-flags', 'tabler-payments', 'litepicker', 'tom-select', 'imask']}
|
||||
>
|
||||
<div class="row row-cards">
|
||||
<div class="col-12">
|
||||
<form action="https://httpbin.org/post" method="post" class="card">
|
||||
<div class="card-header">
|
||||
<h4 class="card-title">Form elements</h4>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="row g-5">
|
||||
<div class="col-xl-4">
|
||||
<div class="row">
|
||||
<div class="col-md-6 col-xl-12"><FormElements1 /></div>
|
||||
<div class="col-md-6 col-xl-12"><FormElements2 /></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-xl-4">
|
||||
<div class="row">
|
||||
<div class="col-md-6 col-xl-12"><FormElements3 /></div>
|
||||
<div class="col-md-6 col-xl-12"><FormElements4 /></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-xl-4">
|
||||
<div class="row">
|
||||
<div class="col-md-6 col-xl-12"><FormElements5 /></div>
|
||||
<div class="col-md-6 col-xl-12"><FormElements6 /></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-footer text-end">
|
||||
<div class="d-flex">
|
||||
<a href="#" class="btn btn-link">Cancel</a>
|
||||
<button type="submit" class="btn btn-primary ms-auto">Send data</button>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<div class="col-md-6">
|
||||
<div class="card h-100">
|
||||
<div class="card-body">
|
||||
<h3 class="card-title">Project ID</h3>
|
||||
<p class="card-subtitle">Used when interacting with the API.</p>
|
||||
<InputIcon icon="files" value="prj_5ae74426fe935327a8fa178b07d84ad9" readonly />
|
||||
</div>
|
||||
<div class="card-footer">
|
||||
<div class="row align-items-center">
|
||||
<div class="col">Learn more about <a href="#">Project ID</a></div>
|
||||
<div class="col-auto"><Button text="Save" color="primary" /></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-md-6">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<h3 class="card-title">Node.js Version</h3>
|
||||
<p class="card-subtitle">
|
||||
The version of Node.js that is used in the Build Step and for Serverless Functions. A new Deployment is required for your changes to take effect.
|
||||
</p>
|
||||
<select class="form-select">
|
||||
<option>14.x</option>
|
||||
<option>12.x</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="card-footer">Learn more about <a href="#">Node.js Version</a></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-12 col-lg-4"><Layout /></div>
|
||||
|
||||
<div class="col-lg-8">
|
||||
<div class="row row-cards">
|
||||
<div class="col-12 col-lg-6">
|
||||
<div class="card">
|
||||
<div class="card-header"><h3 class="card-title">Input mask</h3></div>
|
||||
<div class="card-body">
|
||||
<div class="mb-3"><label class="form-label">Date</label><InputMask mask="00/00/0000" visible /></div>
|
||||
<div class="mb-3"><label class="form-label">Hour</label><InputMask mask="00:00:00" visible /></div>
|
||||
<div class="mb-3"><label class="form-label">Date & Hour</label><InputMask mask="00/00/0000 00:00:00" visible /></div>
|
||||
<div class="mb-3"><label class="form-label">ZIP Code</label><InputMask mask="00000-000" visible /></div>
|
||||
<div class="mb-3"><label class="form-label">Money</label><InputMask mask="000.000.000.000.000,00" visible reverse /></div>
|
||||
<div class="mb-3"><label class="form-label">Telephone</label><InputMask mask="0000-0000" visible /></div>
|
||||
<div class="mb-3"><label class="form-label">Telephone with Code Area</label><InputMask mask="(00) 0000-0000" visible /></div>
|
||||
<div class="mb-3"><label class="form-label">IP Address</label><InputMask mask="099.099.099.099" placeholder="000.000.000.000" visible /></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12 col-lg-6">
|
||||
<form class="card h-100">
|
||||
<div class="card-header"><h3 class="card-title">My Profile</h3></div>
|
||||
<div class="card-body">
|
||||
<div class="mb-3">
|
||||
<div class="row">
|
||||
<div class="col-auto"><Avatar person={people[2]} size="md" /></div>
|
||||
<div class="col">
|
||||
<div class="mb-3">
|
||||
<label class="form-label">Email-Address</label>
|
||||
<input class="form-control" placeholder="your-email@domain.com" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<label class="form-label">Bio</label>
|
||||
<textarea class="form-control" rows="5">Big belly rude boy, million dollar hustler. Unemployed.</textarea>
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<label class="form-label">Email-Address</label>
|
||||
<input class="form-control" placeholder="your-email@domain.com" />
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<label class="form-label">Password</label>
|
||||
<input type="password" class="form-control" value="password" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-footer text-end"><Button text="Save" color="primary" /></div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-lg-12">
|
||||
<div class="row row-cards">
|
||||
<div class="col-12 col-lg-6">
|
||||
<form class="card">
|
||||
<div class="card-body">
|
||||
<h3 class="card-title">Edit Profile</h3>
|
||||
<div class="row row-cards">
|
||||
<div class="col-md-5"><div class="mb-3"><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="mb-3"><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="mb-3"><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="mb-3"><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="mb-3"><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="mb-3"><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="mb-3"><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="mb-3"><label class="form-label">Postal Code</label><input type="test" class="form-control" placeholder="ZIP Code" /></div></div>
|
||||
<div class="col-md-5"><div class="mb-3"><label class="form-label">Country</label><select class="form-control form-select"><option value="">Germany</option></select></div></div>
|
||||
<div class="col-md-12">
|
||||
<div class="mb-3 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-end"><button type="submit" class="btn btn-primary">Update Profile</button></div>
|
||||
</form>
|
||||
</div>
|
||||
<div class="col-12 col-lg-6">
|
||||
<div class="card h-100">
|
||||
<div class="card-header"><h3 class="card-title">HTTP Request</h3></div>
|
||||
<div class="card-body">
|
||||
<div class="row row-cards">
|
||||
<div class="mb-3 col-sm-4 col-md-2">
|
||||
<label class="form-label required">Method</label>
|
||||
<select class="form-select">
|
||||
{httpMethods.map((m) => <option value={m}>{m}</option>)}
|
||||
</select>
|
||||
</div>
|
||||
<div class="mb-3 col-sm-8 col-md-10">
|
||||
<label class="form-label required">URL</label>
|
||||
<input name="url" type="text" class="form-control" value="https://content.googleapis.com/discovery/v1/apis/surveys/v2/rest" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-label">Assertions</div>
|
||||
<div class="table-responsive">
|
||||
<table class="table mb-0">
|
||||
<thead>
|
||||
<tr><th>Source</th><th>Property</th><th>Comparison</th><th>Target</th></tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{
|
||||
rows.map((row) => (
|
||||
<tr>
|
||||
<td>
|
||||
<select class="form-select">
|
||||
{sources.map(([v, l]) => <option value={v} selected={v === row.source || undefined}>{l}</option>)}
|
||||
</select>
|
||||
</td>
|
||||
<td><input type="text" class="form-control" value={row.prop || undefined} /></td>
|
||||
<td>
|
||||
<select class="form-select">
|
||||
{comparisons.map(([v, l]) => <option value={v} selected={v === row.comparison || undefined}>{l}</option>)}
|
||||
</select>
|
||||
</td>
|
||||
<td><input type="text" class="form-control" value={row.target} /></td>
|
||||
</tr>
|
||||
))
|
||||
}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-footer text-end"><button type="submit" class="btn btn-primary">Make request</button></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</DefaultLayout>
|
||||
@@ -1,422 +0,0 @@
|
||||
---
|
||||
title: Form elements
|
||||
page-header: Form elements
|
||||
page-menu: form.elements
|
||||
page-libs: [nouislider, autosize, tabler-flags, tabler-payments, litepicker, tom-select, imask]
|
||||
layout: default
|
||||
permalink: form-elements.html
|
||||
---
|
||||
|
||||
<div class="row row-cards">
|
||||
<div class="col-12">
|
||||
<form action="https://httpbin.org/post" method="post" class="card">
|
||||
<div class="card-header">
|
||||
<h4 class="card-title">Form elements</h4>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="row g-5">
|
||||
<div class="col-xl-4">
|
||||
<div class="row">
|
||||
<div class="col-md-6 col-xl-12">{% include "forms/form-elements-1.html" %}</div>
|
||||
<div class="col-md-6 col-xl-12">{% include "forms/form-elements-2.html" %}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-xl-4">
|
||||
<div class="row">
|
||||
<div class="col-md-6 col-xl-12">{% include "forms/form-elements-3.html" %}</div>
|
||||
<div class="col-md-6 col-xl-12">{% include "forms/form-elements-4.html" %}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-xl-4">
|
||||
<div class="row">
|
||||
<div class="col-md-6 col-xl-12">{% include "forms/form-elements-5.html" %}</div>
|
||||
<div class="col-md-6 col-xl-12">{% include "forms/form-elements-6.html" %}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-footer text-end">
|
||||
<div class="d-flex">
|
||||
<a href="#" class="btn btn-link">Cancel</a>
|
||||
<button type="submit" class="btn btn-primary ms-auto">Send data</button>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<div class="col-md-6">
|
||||
<div class="card h-100">
|
||||
<div class="card-body">
|
||||
<h3 class="card-title">Project ID</h3>
|
||||
<p class="card-subtitle">Used when interacting with the API.</p>
|
||||
{% include "ui/form/input-icon.html" icon="files" value="prj_5ae74426fe935327a8fa178b07d84ad9" readonly=true
|
||||
%}
|
||||
</div>
|
||||
<div class="card-footer">
|
||||
<div class="row align-items-center">
|
||||
<div class="col">Learn more about <a href="#">Project ID</a></div>
|
||||
<div class="col-auto">
|
||||
{% include "ui/button.html" text="Save" color="primary" %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-md-6">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<h3 class="card-title">Node.js Version</h3>
|
||||
<p class="card-subtitle">The version of Node.js that is used in the Build Step and for Serverless Functions.
|
||||
A new Deployment is required for your changes to take effect.</p>
|
||||
<select class="form-select">
|
||||
<option>14.x</option>
|
||||
<option>12.x</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="card-footer">
|
||||
Learn more about <a href="#">Node.js Version</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-12 col-lg-4">
|
||||
{% include "cards/form/layout.html" %}
|
||||
</div>
|
||||
|
||||
<div class="col-lg-8">
|
||||
<div class="row row-cards">
|
||||
<div class="col-12 col-lg-6">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h3 class="card-title">Input mask</h3>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="mb-3">
|
||||
<label class="form-label">Date</label>
|
||||
{% include "ui/form/input-mask.html" mask="00/00/0000" visible=true %}
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<label class="form-label">Hour</label>
|
||||
{% include "ui/form/input-mask.html" mask="00:00:00" visible=true %}
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<label class="form-label">Date & Hour</label>
|
||||
{% include "ui/form/input-mask.html" mask="00/00/0000 00:00:00" visible=true %}
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<label class="form-label">ZIP Code</label>
|
||||
{% include "ui/form/input-mask.html" mask="00000-000" visible=true %}
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<label class="form-label">Money</label>
|
||||
{% include "ui/form/input-mask.html" mask="000.000.000.000.000,00" visible=true reverse=true %}
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<label class="form-label">Telephone</label>
|
||||
{% include "ui/form/input-mask.html" mask="0000-0000" visible=true %}
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<label class="form-label">Telephone with Code Area</label>
|
||||
{% include "ui/form/input-mask.html" mask="(00) 0000-0000" visible=true %}
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<label class="form-label">IP Address</label>
|
||||
{% include "ui/form/input-mask.html" mask="099.099.099.099" placeholder="000.000.000.000" visible=true %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12 col-lg-6">
|
||||
<form class="card h-100">
|
||||
<div class="card-header">
|
||||
<h3 class="card-title">My Profile</h3>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="mb-3">
|
||||
<div class="row">
|
||||
<div class="col-auto">
|
||||
{% include "ui/avatar.html" person-id=3 size="md" %}
|
||||
</div>
|
||||
<div class="col">
|
||||
<div class="mb-3">
|
||||
<label class="form-label">Email-Address</label>
|
||||
<input class="form-control" placeholder="your-email@domain.com">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<label class="form-label">Bio</label>
|
||||
<textarea class="form-control"
|
||||
rows="5">Big belly rude boy, million dollar hustler. Unemployed.</textarea>
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<label class="form-label">Email-Address</label>
|
||||
<input class="form-control" placeholder="your-email@domain.com">
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<label class="form-label">Password</label>
|
||||
<input type="password" class="form-control" value="password">
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-footer text-end">
|
||||
{% include "ui/button.html" text="Save" color="primary" %}
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-lg-12">
|
||||
<div class="row row-cards">
|
||||
<div class="col-12 col-lg-6">
|
||||
<form class="card">
|
||||
<div class="card-body">
|
||||
<h3 class="card-title">Edit Profile</h3>
|
||||
<div class="row row-cards">
|
||||
<div class="col-md-5">
|
||||
<div class="mb-3">
|
||||
<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="mb-3">
|
||||
<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="mb-3">
|
||||
<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="mb-3">
|
||||
<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="mb-3">
|
||||
<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="mb-3">
|
||||
<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="mb-3">
|
||||
<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="mb-3">
|
||||
<label class="form-label">Postal Code</label>
|
||||
<input type="test" class="form-control" placeholder="ZIP Code">
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-5">
|
||||
<div class="mb-3">
|
||||
<label class="form-label">Country</label>
|
||||
<select class="form-control form-select">
|
||||
<option value="">Germany</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-12">
|
||||
<div class="mb-3 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-end">
|
||||
<button type="submit" class="btn btn-primary">Update Profile</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
<div class="col-12 col-lg-6">
|
||||
<div class="card h-100">
|
||||
<div class="card-header">
|
||||
<h3 class="card-title">HTTP Request</h3>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="row row-cards">
|
||||
<div class="mb-3 col-sm-4 col-md-2">
|
||||
<label class="form-label required">Method</label>
|
||||
<select class="form-select">
|
||||
<option value="GET">GET</option>
|
||||
<option value="POST">POST</option>
|
||||
<option value="PUT">PUT</option>
|
||||
<option value="HEAD">HEAD</option>
|
||||
<option value="DELETE">DELETE</option>
|
||||
<option value="PATCH">PATCH</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="mb-3 col-sm-8 col-md-10">
|
||||
<label class="form-label required">URL</label>
|
||||
<input name="url" type="text" class="form-control"
|
||||
value="https://content.googleapis.com/discovery/v1/apis/surveys/v2/rest">
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-label">Assertions</div>
|
||||
<div class="table-responsive">
|
||||
<table class="table mb-0">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Source</th>
|
||||
<th>Property</th>
|
||||
<th>Comparison</th>
|
||||
<th>Target</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>
|
||||
<select class="form-select">
|
||||
<option value="STATUS_CODE" selected="">Status code</option>
|
||||
<option value="JSON_BODY">JSON body</option>
|
||||
<option value="HEADERS">Headers</option>
|
||||
<option value="TEXT_BODY">Text body</option>
|
||||
<option value="RESPONSE_TIME">Response time</option>
|
||||
</select>
|
||||
</td>
|
||||
<td>
|
||||
<input type="text" class="form-control"></td>
|
||||
<td>
|
||||
<select class="form-select">
|
||||
<option value="EQUALS" selected="">Equals</option>
|
||||
<option value="NOT_EQUALS">Not equals</option>
|
||||
<option value="HAS_KEY">Has key</option>
|
||||
<option value="NOT_HAS_KEY">Not has key</option>
|
||||
<option value="HAS_VALUE">Has value</option>
|
||||
<option value="NOT_HAS_VALUE">Not has value</option>
|
||||
<option value="IS_EMPTY">Is empty</option>
|
||||
<option value="NOT_EMPTY">Is not empty</option>
|
||||
<option value="GREATER_THAN">Greater than</option>
|
||||
<option value="LESS_THAN">Less than</option>
|
||||
</select>
|
||||
</td>
|
||||
<td>
|
||||
<input type="text" class="form-control" value="200">
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<select class="form-select">
|
||||
<option value="STATUS_CODE">Status code</option>
|
||||
<option value="JSON_BODY" selected="">JSON body</option>
|
||||
<option value="HEADERS">Headers</option>
|
||||
<option value="TEXT_BODY">Text body</option>
|
||||
<option value="RESPONSE_TIME">Response time</option>
|
||||
</select>
|
||||
</td>
|
||||
<td>
|
||||
<input type="text" class="form-control" value="parameters.alt.type">
|
||||
</td>
|
||||
<td>
|
||||
<select class="form-select">
|
||||
<option value="EQUALS">Equals</option>
|
||||
<option value="NOT_EQUALS">Not equals</option>
|
||||
<option value="HAS_KEY">Has key</option>
|
||||
<option value="NOT_HAS_KEY">Not has key</option>
|
||||
<option value="HAS_VALUE" selected="">Has value</option>
|
||||
<option value="NOT_HAS_VALUE">Not has value</option>
|
||||
<option value="IS_EMPTY">Is empty</option>
|
||||
<option value="NOT_EMPTY">Is not empty</option>
|
||||
<option value="GREATER_THAN">Greater than</option>
|
||||
<option value="LESS_THAN">Less than</option>
|
||||
</select>
|
||||
</td>
|
||||
<td>
|
||||
<input type="text" class="form-control" value="string">
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<select class="form-select">
|
||||
<option value="STATUS_CODE">Status code</option>
|
||||
<option value="JSON_BODY">JSON body</option>
|
||||
<option value="HEADERS">Headers</option>
|
||||
<option value="TEXT_BODY">Text body</option>
|
||||
<option value="RESPONSE_TIME" selected="">Response time</option>
|
||||
</select>
|
||||
</td>
|
||||
<td>
|
||||
<input type="text" class="form-control"></td>
|
||||
<td>
|
||||
<select class="form-select">
|
||||
<option value="EQUALS">Equals</option>
|
||||
<option value="NOT_EQUALS">Not equals</option>
|
||||
<option value="HAS_KEY">Has key</option>
|
||||
<option value="NOT_HAS_KEY">Not has key</option>
|
||||
<option value="HAS_VALUE">Has value</option>
|
||||
<option value="NOT_HAS_VALUE">Not has value</option>
|
||||
<option value="IS_EMPTY">Is empty</option>
|
||||
<option value="NOT_EMPTY">Is not empty</option>
|
||||
<option value="GREATER_THAN">Greater than</option>
|
||||
<option value="LESS_THAN" selected="">Less than</option>
|
||||
</select>
|
||||
</td>
|
||||
<td>
|
||||
<input type="text" class="form-control" value="500">
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<select class="form-select">
|
||||
<option value="STATUS_CODE">Status code</option>
|
||||
<option value="JSON_BODY">JSON body</option>
|
||||
<option value="HEADERS" selected="">Headers</option>
|
||||
<option value="TEXT_BODY">Text body</option>
|
||||
<option value="RESPONSE_TIME">Response time</option>
|
||||
</select>
|
||||
</td>
|
||||
<td>
|
||||
<input type="text" class="form-control" value="content-type">
|
||||
</td>
|
||||
<td>
|
||||
<select class="form-select">
|
||||
<option value="EQUALS" selected="">Equals</option>
|
||||
<option value="NOT_EQUALS">Not equals</option>
|
||||
<option value="HAS_KEY">Has key</option>
|
||||
<option value="NOT_HAS_KEY">Not has key</option>
|
||||
<option value="HAS_VALUE">Has value</option>
|
||||
<option value="NOT_HAS_VALUE">Not has value</option>
|
||||
<option value="IS_EMPTY">Is empty</option>
|
||||
<option value="NOT_EMPTY">Is not empty</option>
|
||||
<option value="GREATER_THAN">Greater than</option>
|
||||
<option value="LESS_THAN">Less than</option>
|
||||
</select>
|
||||
</td>
|
||||
<td>
|
||||
<input type="text" class="form-control" value="application/json; charset=UTF-8">
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-footer text-end">
|
||||
<button type="submit" class="btn btn-primary">Make request</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -0,0 +1,204 @@
|
||||
---
|
||||
// Port of preview/pages/form-layout.html
|
||||
import DefaultLayout from '@shared/layouts/DefaultLayout.astro';
|
||||
import Button from '@shared/components/Button.astro';
|
||||
import InputIcon from '@shared/components/ui/form/InputIcon.astro';
|
||||
import Check from '@shared/components/ui/form/Check.astro';
|
||||
import Icon from '@shared/components/Icon.astro';
|
||||
import Datepicker from '@shared/components/ui/Datepicker.astro';
|
||||
import Layout from '@shared/components/cards/form/Layout.astro';
|
||||
import Payment from '@shared/components/cards/form/Payment.astro';
|
||||
import flags from '@data/flags.json';
|
||||
|
||||
const countries = flags as { name: string }[];
|
||||
---
|
||||
|
||||
<DefaultLayout title="Form layout" pageHeader="Form Layout" pageMenu="form.layout" pageLibs={['litepicker']}>
|
||||
<div class="row row-cards row-cols-1 row-cols-md-3">
|
||||
<div class="col">
|
||||
<div class="row row-cards">
|
||||
<div class="col-12">
|
||||
<div class="card">
|
||||
<div class="card-header"><h3 class="card-title">Basic Form</h3></div>
|
||||
<div class="card-body">
|
||||
<form class="space-y">
|
||||
<div class="row">
|
||||
<div class="col-6">
|
||||
<label class="form-label visually-hidden" for="basic-name">Name</label>
|
||||
<input type="text" placeholder="Name" class="form-control" id="basic-name" name="name" />
|
||||
</div>
|
||||
<div class="col-6">
|
||||
<label class="form-label visually-hidden" for="basic-email">Email address</label>
|
||||
<input type="email" placeholder="Email address" class="form-control" id="basic-email" name="email" />
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<label class="form-label visually-hidden" for="basic-password">Password</label>
|
||||
<input type="password" placeholder="Password" class="form-control" id="basic-password" name="password" />
|
||||
</div>
|
||||
<div>
|
||||
<label class="form-label visually-hidden" for="basic-password-confirm">Confirm Password</label>
|
||||
<input type="password" placeholder="Confirm Password" class="form-control" id="basic-password-confirm" name="password_confirm" />
|
||||
</div>
|
||||
<div><Button color="primary" block text="Submit" /></div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12">
|
||||
<div class="card">
|
||||
<div class="card-header"><h3 class="card-title">Example Form</h3></div>
|
||||
<div class="card-body">
|
||||
<form>
|
||||
<div class="space-y">
|
||||
<div>
|
||||
<label class="form-label" for="example-first-name">First Name</label>
|
||||
<input type="text" placeholder="Enter first name" class="form-control" id="example-first-name" name="first_name" />
|
||||
</div>
|
||||
<div>
|
||||
<label class="form-label" for="example-last-name">Last Name</label>
|
||||
<input type="text" placeholder="Enter last name" class="form-control" id="example-last-name" name="last_name" />
|
||||
</div>
|
||||
<div>
|
||||
<label class="form-label" for="example-email">Email</label>
|
||||
<input type="email" placeholder="Enter email address" class="form-control" id="example-email" name="email" />
|
||||
</div>
|
||||
<div>
|
||||
<label class="form-label" for="example-subject">Select Subject</label>
|
||||
<select class="form-select" id="example-subject" name="subject">
|
||||
<option>Option 1</option><option>Option 2</option><option>Option 3</option><option>Option 4</option>
|
||||
</select>
|
||||
</div>
|
||||
<div>
|
||||
<label class="form-label" for="example-message">Message</label>
|
||||
<textarea placeholder="Enter your message" rows="6" class="form-control" id="example-message" name="message"></textarea>
|
||||
</div>
|
||||
<div><Button color="primary" block text="Send Message" iconEnd="arrow-right" /></div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col">
|
||||
<div class="row row-cards">
|
||||
<div class="col-12">
|
||||
<div class="card">
|
||||
<div class="card-header"><h3 class="card-title">Example Form with Icons</h3></div>
|
||||
<div class="card-body">
|
||||
<form class="space-y">
|
||||
<div><InputIcon icon="user" placeholder="Username" prepend /></div>
|
||||
<div><InputIcon icon="mail" placeholder="Email address" prepend type="mail" /></div>
|
||||
<div><InputIcon icon="lock" placeholder="Password" prepend type="password" /></div>
|
||||
<div><InputIcon icon="lock" placeholder="Confirm Password" prepend type="password" /></div>
|
||||
<div>
|
||||
<div class="row align-items-center">
|
||||
<div class="col"><Check title="Remember me" class="m-0" /></div>
|
||||
<div class="col-auto"><Button color="primary" text="Create Account" iconEnd="arrow-right" /></div>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-12">
|
||||
<div class="card">
|
||||
<div class="card-header"><h3 class="card-title">Form with Icons and Validation</h3></div>
|
||||
<div class="card-body">
|
||||
<form class="space-y">
|
||||
<div>
|
||||
<div class="input-icon">
|
||||
<span class="input-icon-addon"><Icon name="user" /></span>
|
||||
<input type="text" value="" class="form-control is-invalid" placeholder="Username" />
|
||||
<div class="invalid-feedback">This throws the icon out of bounds when input element contains `is-invalid` class.</div>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="input-icon">
|
||||
<span class="input-icon-addon"><Icon name="mail" /></span>
|
||||
<input type="email" value="" class="form-control is-valid" placeholder="Email" />
|
||||
<div class="valid-feedback">This email looks good!</div>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-12"><Layout horizontal title="Horizontal form" /></div>
|
||||
|
||||
<div class="col-12">
|
||||
<div class="card">
|
||||
<div class="card-header"><h3 class="card-title">Example Form</h3></div>
|
||||
<div class="card-body">
|
||||
<form>
|
||||
<div class="space-y">
|
||||
<div><h4>Personal Info</h4></div>
|
||||
<div class="row row-cols-2 g-4">
|
||||
<div>
|
||||
<label class="form-label">First Name</label>
|
||||
<input type="text" placeholder="Enter first name" class="form-control" />
|
||||
</div>
|
||||
<div>
|
||||
<label class="form-label">Last Name</label>
|
||||
<input type="text" placeholder="Enter last name" class="form-control" />
|
||||
</div>
|
||||
<div>
|
||||
<label class="form-label">Gender</label>
|
||||
<div><select class="form-select"><option>Male</option><option>Female</option><option>Others</option></select></div>
|
||||
</div>
|
||||
<div>
|
||||
<label class="form-label">Date of Birth</label>
|
||||
<div><Datepicker layout="icon" id="birth-date" /></div>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<label class="form-label">Category</label>
|
||||
<div><select class="form-select"><option>Category 1</option><option>Category 2</option><option>Category 3</option></select></div>
|
||||
</div>
|
||||
<div><h4>Address</h4></div>
|
||||
<div>
|
||||
<label class="form-label">Street</label>
|
||||
<input type="text" class="form-control" />
|
||||
</div>
|
||||
<div class="row row-cols-2 g-4">
|
||||
<div><label class="form-label">City</label><input type="text" class="form-control" /></div>
|
||||
<div><label class="form-label">State</label><input type="text" class="form-control" /></div>
|
||||
<div><label class="form-label">Post Code</label><input type="text" class="form-control" /></div>
|
||||
<div>
|
||||
<label class="form-label">Country</label>
|
||||
<div>
|
||||
<select class="form-select">
|
||||
<option>--Select Country--</option>
|
||||
{countries.map((country) => <option>{country.name}</option>)}
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div>
|
||||
<label class="form-label">Membership</label>
|
||||
<div class="d-flex flex-row gap-4">
|
||||
<Check title="Free" type="radio" name="membership" checked />
|
||||
<Check title="Paid" type="radio" name="membership" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="text-end">
|
||||
<Button text="Cancel" />
|
||||
<Button color="primary" text="Save Changes" />
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col"><Payment /></div>
|
||||
</div>
|
||||
</DefaultLayout>
|
||||
@@ -1,367 +0,0 @@
|
||||
---
|
||||
title: Form layout
|
||||
page-header: Form Layout
|
||||
page-menu: form.layout
|
||||
layout: default
|
||||
permalink: form-layout.html
|
||||
page-libs: [litepicker]
|
||||
---
|
||||
|
||||
<div class="row row-cards row-cols-1 row-cols-md-3">
|
||||
<div class="col">
|
||||
<div class="row row-cards">
|
||||
<div class="col-12">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h3 class="card-title">
|
||||
Basic Form
|
||||
</h3>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<form class="space-y">
|
||||
<div class="row">
|
||||
<div class="col-6">
|
||||
<label class="form-label visually-hidden" for="basic-name">Name</label>
|
||||
<input type="text" placeholder="Name" class="form-control" id="basic-name" name="name" />
|
||||
</div>
|
||||
|
||||
<div class="col-6">
|
||||
<label class="form-label visually-hidden" for="basic-email">Email address</label>
|
||||
<input type="email" placeholder="Email address" class="form-control" id="basic-email" name="email" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label class="form-label visually-hidden" for="basic-password">Password</label>
|
||||
<input type="password" placeholder="Password" class="form-control" id="basic-password" name="password" />
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label class="form-label visually-hidden" for="basic-password-confirm">Confirm Password</label>
|
||||
<input type="password" placeholder="Confirm Password" class="form-control" id="basic-password-confirm" name="password_confirm" />
|
||||
</div>
|
||||
|
||||
<div>
|
||||
{% include "ui/button.html" color="primary" block text="Submit" %}
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h3 class="card-title">
|
||||
Example Form
|
||||
</h3>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<form>
|
||||
<div class="space-y">
|
||||
<div>
|
||||
<label class="form-label" for="example-first-name">
|
||||
First Name
|
||||
</label>
|
||||
<input type="text" placeholder="Enter first name" class="form-control" id="example-first-name" name="first_name">
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label class="form-label" for="example-last-name">
|
||||
Last Name
|
||||
</label>
|
||||
<input type="text" placeholder="Enter last name" class="form-control" id="example-last-name" name="last_name">
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label class="form-label" for="example-email">
|
||||
Email
|
||||
</label>
|
||||
<input type="email" placeholder="Enter email address" class="form-control" id="example-email" name="email">
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label class="form-label" for="example-subject">
|
||||
Select Subject
|
||||
</label>
|
||||
<select class="form-select" id="example-subject" name="subject">
|
||||
<option>
|
||||
Option 1
|
||||
</option>
|
||||
<option>
|
||||
Option 2
|
||||
</option>
|
||||
<option>
|
||||
Option 3
|
||||
</option>
|
||||
<option>
|
||||
Option 4
|
||||
</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label class="form-label" for="example-message">
|
||||
Message
|
||||
</label>
|
||||
<textarea placeholder="Enter your message" rows="6" class="form-control" id="example-message" name="message"></textarea>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
{% include "ui/button.html" color="primary" block text="Send Message" icon-end="arrow-right" %}
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
<div class="col">
|
||||
<div class="row row-cards">
|
||||
<div class="col-12">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h3 class="card-title">
|
||||
Example Form with Icons
|
||||
</h3>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<form class="space-y">
|
||||
<div>
|
||||
{% include "ui/form/input-icon.html" icon="user" placeholder="Username" prepend %}
|
||||
</div>
|
||||
|
||||
<div>
|
||||
{% include "ui/form/input-icon.html" icon="mail" placeholder="Email address" prepend type="mail" %}
|
||||
</div>
|
||||
|
||||
<div>
|
||||
{% include "ui/form/input-icon.html" icon="lock" placeholder="Password" prepend type="password" %}
|
||||
</div>
|
||||
|
||||
<div>
|
||||
{% include "ui/form/input-icon.html" icon="lock" placeholder="Confirm Password" prepend type="password" %}
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<div class="row align-items-center">
|
||||
<div class="col">
|
||||
{% include "ui/form/check.html" title="Remember me" class="m-0" %}
|
||||
</div>
|
||||
<div class="col-auto">
|
||||
{% include "ui/button.html" color="primary" text="Create Account" icon-end="arrow-right" %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-12">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h3 class="card-title">
|
||||
Form with Icons and Validation
|
||||
</h3>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<form class="space-y">
|
||||
<div>
|
||||
<div class="input-icon">
|
||||
<span class="input-icon-addon">
|
||||
{% include "ui/icon.html" icon="user" %}
|
||||
</span>
|
||||
<input type="text" value="" class="form-control is-invalid" placeholder="Username">
|
||||
<div class="invalid-feedback">
|
||||
This throws the icon out of bounds when input element contains `is-invalid` class.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<div class="input-icon">
|
||||
<span class="input-icon-addon">
|
||||
{% include "ui/icon.html" icon="mail" %}
|
||||
</span>
|
||||
<input type="email" value="" class="form-control is-valid" placeholder="Email">
|
||||
<div class="valid-feedback">
|
||||
This email looks good!
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-12">
|
||||
{% include "cards/form/layout.html" horizontal=true title="Horizontal form" %}
|
||||
</div>
|
||||
|
||||
<div class="col-12">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h3 class="card-title">
|
||||
Example Form
|
||||
</h3>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<form>
|
||||
<div class="space-y">
|
||||
<div>
|
||||
<h4>
|
||||
Personal Info
|
||||
</h4>
|
||||
</div>
|
||||
|
||||
<div class="row row-cols-2 g-4">
|
||||
<div>
|
||||
<label class="form-label">
|
||||
First Name
|
||||
</label>
|
||||
<input type="text" placeholder="Enter first name" class="form-control">
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label class="form-label">
|
||||
Last Name
|
||||
</label>
|
||||
<input type="text" placeholder="Enter last name" class="form-control">
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label class="form-label">
|
||||
Gender
|
||||
</label>
|
||||
<div>
|
||||
<select class="form-select">
|
||||
<option>
|
||||
Male
|
||||
</option>
|
||||
<option>
|
||||
Female
|
||||
</option>
|
||||
<option>
|
||||
Others
|
||||
</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label class="form-label">
|
||||
Date of Birth
|
||||
</label>
|
||||
|
||||
<div>
|
||||
{% include "ui/datepicker.html" layout="icon" id="birth-date" %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label class="form-label">
|
||||
Category
|
||||
</label>
|
||||
<div>
|
||||
<select class="form-select">
|
||||
<option>
|
||||
Category 1
|
||||
</option>
|
||||
<option>
|
||||
Category 2
|
||||
</option>
|
||||
<option>
|
||||
Category 3
|
||||
</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h4>
|
||||
Address
|
||||
</h4>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label class="form-label">
|
||||
Street
|
||||
</label>
|
||||
<input type="text" class="form-control">
|
||||
</div>
|
||||
|
||||
<div class="row row-cols-2 g-4">
|
||||
<div>
|
||||
<label class="form-label">
|
||||
City
|
||||
</label>
|
||||
<input type="text" class="form-control">
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label class="form-label">
|
||||
State
|
||||
</label>
|
||||
<input type="text" class="form-control">
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label class="form-label">
|
||||
Post Code
|
||||
</label>
|
||||
<input type="text" class="form-control">
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label class="form-label">
|
||||
Country
|
||||
</label>
|
||||
<div>
|
||||
<select class="form-select">
|
||||
<option>
|
||||
--Select Country--
|
||||
</option>
|
||||
{% for country in flags %}
|
||||
<option>
|
||||
{{ country.name }}
|
||||
</option>
|
||||
{% endfor %}
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<div>
|
||||
<label class="form-label">
|
||||
Membership
|
||||
</label>
|
||||
|
||||
<div class="d-flex flex-row gap-4">
|
||||
{% include "ui/form/check.html" title="Free" type="radio" name="membership" checked=true %}
|
||||
{% include "ui/form/check.html" title="Paid" type="radio" name="membership" %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="text-end">
|
||||
{% include "ui/button.html" text="Cancel" %}
|
||||
{% include "ui/button.html" color="primary" text="Save Changes" %}
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col">
|
||||
{% include "cards/form/payment.html" %}
|
||||
</div>
|
||||
</div>
|
||||
@@ -0,0 +1,18 @@
|
||||
---
|
||||
// Port of preview/pages/fullcalendar.html (layout: default).
|
||||
import DefaultLayout from '@shared/layouts/DefaultLayout.astro';
|
||||
import Fullcalendar from '@shared/components/ui/Fullcalendar.astro';
|
||||
---
|
||||
|
||||
<DefaultLayout
|
||||
title="Fullcalendar"
|
||||
pageHeader="Fullcalendar"
|
||||
pageMenu="plugins.fullcalendar"
|
||||
pageLibs={['fullcalendar']}
|
||||
>
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<Fullcalendar sampleEvents />
|
||||
</div>
|
||||
</div>
|
||||
</DefaultLayout>
|
||||
@@ -1,14 +0,0 @@
|
||||
---
|
||||
title: Fullcalendar
|
||||
page-header: Fullcalendar
|
||||
page-menu: plugins.fullcalendar
|
||||
layout: default
|
||||
permalink: fullcalendar.html
|
||||
page-libs: [fullcalendar]
|
||||
---
|
||||
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
{% include "ui/fullcalendar.html" sample-events %}
|
||||
</div>
|
||||
</div>
|
||||
@@ -0,0 +1,33 @@
|
||||
---
|
||||
// Port of preview/pages/gallery.html (layout: default)
|
||||
import DefaultLayout from '@shared/layouts/DefaultLayout.astro';
|
||||
import GalleryPhoto from '@shared/components/cards/GalleryPhoto.astro';
|
||||
import Pagination from '@shared/components/ui/Pagination.astro';
|
||||
import photos from '@data/photos.json';
|
||||
import people from '@data/people.json';
|
||||
|
||||
// Liquid: photos | where: "horizontal", true — limit: 15; person = people[forloop.index0]
|
||||
const galleryPhotos = photos.filter((photo) => photo.horizontal).slice(0, 15);
|
||||
---
|
||||
|
||||
<DefaultLayout
|
||||
title="Gallery"
|
||||
pageHeader="Gallery"
|
||||
description="1-15 of 241 photos"
|
||||
actions="photos"
|
||||
pageMenu="extra.gallery"
|
||||
>
|
||||
<div class="row row-cards">
|
||||
{
|
||||
galleryPhotos.map((photo, index) => (
|
||||
<div class="col-sm-6 col-lg-4">
|
||||
<GalleryPhoto photo={photo} person={people[index]} index={index + 1} />
|
||||
</div>
|
||||
))
|
||||
}
|
||||
</div>
|
||||
|
||||
<div class="d-flex mt-5">
|
||||
<Pagination class="ms-auto" />
|
||||
</div>
|
||||
</DefaultLayout>
|
||||
@@ -1,24 +0,0 @@
|
||||
---
|
||||
title: Gallery
|
||||
page-header: Gallery
|
||||
page-header-description: 1-15 of 241 photos
|
||||
page-header-actions: photos
|
||||
page-menu: extra.gallery
|
||||
layout: default
|
||||
permalink: gallery.html
|
||||
---
|
||||
|
||||
{% assign filtered-photos = photos | where: "horizontal", true %}
|
||||
|
||||
<div class="row row-cards">
|
||||
{% for photo in filtered-photos limit: 15 %}
|
||||
{% assign person = people[forloop.index0] %}
|
||||
<div class="col-sm-6 col-lg-4">
|
||||
{% include "cards/gallery-photo.html" person=person %}
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
|
||||
<div class="d-flex mt-5">
|
||||
{% include "ui/pagination.html" class="ms-auto" %}
|
||||
</div>
|
||||
@@ -0,0 +1,24 @@
|
||||
---
|
||||
// Port of preview/pages/icons.html (layout: default)
|
||||
import DefaultLayout from '@shared/layouts/DefaultLayout.astro';
|
||||
import IconsBanner from '@shared/components/cards/IconsBanner.astro';
|
||||
import Icons from '@shared/components/cards/Icons.astro';
|
||||
---
|
||||
|
||||
<DefaultLayout title="Icons" pageHeader="Icons" pageMenu="addons.icons">
|
||||
<div class="row row-cards">
|
||||
<div class="col-lg-4">
|
||||
<IconsBanner />
|
||||
</div>
|
||||
<div class="col">
|
||||
<div class="row row-cards">
|
||||
<div class="col-12">
|
||||
<Icons title="Interface icons" type="outline" />
|
||||
</div>
|
||||
<div class="col-12">
|
||||
<Icons title="Filled icons" type="filled" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</DefaultLayout>
|
||||
@@ -1,23 +0,0 @@
|
||||
---
|
||||
title: Icons
|
||||
page-header: Icons
|
||||
page-menu: addons.icons
|
||||
layout: default
|
||||
permalink: icons.html
|
||||
---
|
||||
|
||||
<div class="row row-cards">
|
||||
<div class="col-lg-4">
|
||||
{% include "cards/icons-banner.html" %}
|
||||
</div>
|
||||
<div class="col">
|
||||
<div class="row row-cards">
|
||||
<div class="col-12">
|
||||
{% include "cards/icons.html" title="Interface icons" type="outline" %}
|
||||
</div>
|
||||
<div class="col-12">
|
||||
{% include "cards/icons.html" title="Filled icons" type="filled" %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -0,0 +1,217 @@
|
||||
---
|
||||
import DefaultLayout from '@shared/layouts/DefaultLayout.astro';
|
||||
import Icon from '@shared/components/Icon.astro';
|
||||
import freeIllustrations from '@data/free-illustrations.json';
|
||||
import illustrationsList from '@data/illustrations.json';
|
||||
import siteData from '@data/site.json';
|
||||
import { addPageScript } from '@shared/lib/page-scripts';
|
||||
|
||||
const autodark = (freeIllustrations as { autodark: Record<string, string> }).autodark;
|
||||
const autodarkEntries = Object.entries(autodark);
|
||||
|
||||
// first-illustration: the Liquid loop overwrites each pass → last value wins.
|
||||
const firstIllustration = autodarkEntries.length
|
||||
? autodarkEntries[autodarkEntries.length - 1][1]
|
||||
: '';
|
||||
|
||||
// Page-local transform: replace: '<svg ' , '<svg class="w-100 h-auto" '
|
||||
const withClass = (svg: string) => svg.replaceAll('<svg ', '<svg class="w-100 h-auto" ');
|
||||
|
||||
const colors = siteData.colors as Record<string, { hex: string; class: string; prop: string }>;
|
||||
const skinColors = siteData.skinColors as Record<string, { hex: string; class: string }>;
|
||||
const colorEntries = Object.values(colors);
|
||||
const skinEntries = Object.values(skinColors);
|
||||
|
||||
// skinColor = site.skinColors | first → the first value object (Rose).
|
||||
const skinFirst = skinEntries[0];
|
||||
const buyLink = (siteData.illustrations as { buy_link: string }).buy_link;
|
||||
|
||||
// {{ illustrations | size | minus: 4 }}
|
||||
const moreCount = illustrationsList.length - 4;
|
||||
|
||||
// {% capture_script %} — build the illustrations JS map from the same data.
|
||||
// skin_color / color[1].prop resolve to empty in Liquid → literal "var()".
|
||||
const illustrationsJs = autodarkEntries
|
||||
.map(([key, svg]) => ` "${key}": {\n svg: '${withClass(svg)}',\n },`)
|
||||
.join('\n \n');
|
||||
|
||||
addPageScript(`<script>
|
||||
let skinColor = "var()",
|
||||
primaryColor = "var()";
|
||||
|
||||
const illustrations = {
|
||||
|
||||
${illustrationsJs}
|
||||
|
||||
}
|
||||
|
||||
const selectIllustrations = document.querySelectorAll(".js-select-illustration"),
|
||||
currentIllustration = document.getElementById("current-illustration"),
|
||||
currentIllustrationCode = document.getElementById("current-illustration-code");
|
||||
|
||||
document.querySelectorAll(".js-select-illustration").forEach((elem) => {
|
||||
elem.addEventListener("change", (e) => {
|
||||
const selectedId = e.target.value,
|
||||
selectedIllustration = illustrations[selectedId]
|
||||
|
||||
currentIllustration.innerHTML = selectedIllustration.svg
|
||||
|
||||
})
|
||||
})
|
||||
|
||||
document.querySelectorAll(".js-select-color").forEach((elem) => {
|
||||
elem.addEventListener("change", (e) => {
|
||||
primaryColor = e.target.value
|
||||
document.getElementById("current-illustration-style").style.setProperty("--tblr-illustrations-primary", primaryColor)
|
||||
})
|
||||
})
|
||||
|
||||
document.querySelectorAll(".js-select-skin-color").forEach((elem) => {
|
||||
elem.addEventListener("change", (e) => {
|
||||
skinColor = e.target.value
|
||||
document.getElementById("current-illustration-style").style.setProperty("--tblr-illustrations-skin", skinColor)
|
||||
})
|
||||
})
|
||||
</script>`);
|
||||
---
|
||||
|
||||
<DefaultLayout
|
||||
title="SVG Illustrations"
|
||||
pageHeader="SVG Illustrations"
|
||||
pageMenu="addons.illustrations"
|
||||
>
|
||||
<div
|
||||
class="mb-7"
|
||||
style={`--tblr-illustrations-primary: var(--tblr-color-primary); --tblr-illustrations-skin: ${skinFirst.hex};`}
|
||||
id="current-illustration-style"
|
||||
>
|
||||
<div class="row row-cards">
|
||||
<div class="col-12">
|
||||
<div class="row row-cards row-deck g-4">
|
||||
<div class="col-md-7">
|
||||
<div class="card">
|
||||
<div class="card-body d-flex align-items-center">
|
||||
<div id="current-illustration" set:html={withClass(firstIllustration)} />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-5">
|
||||
<div class="row">
|
||||
<div class="col-12">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<div>
|
||||
<div class="form-label">Primary color</div>
|
||||
<div class="row g-2">
|
||||
<div class="col-auto">
|
||||
<label class="form-colorinput">
|
||||
<input name="color" type="radio" value="var(--tblr-color-primary)" class="form-colorinput-input js-select-color" checked />
|
||||
<span class="form-colorinput-color bg-primary"></span>
|
||||
</label>
|
||||
</div>
|
||||
<div class="col-auto">
|
||||
<label class="form-colorinput">
|
||||
<input name="color" type="radio" value="var(--tblr-bg-surface-inverted)" class="form-colorinput-input js-select-color" />
|
||||
<span class="form-colorinput-color bg-inverted"></span>
|
||||
</label>
|
||||
</div>
|
||||
{
|
||||
colorEntries.map((color) => (
|
||||
<div class="col-auto">
|
||||
<label class="form-colorinput">
|
||||
<input name="color" type="radio" value={color.hex} class="form-colorinput-input js-select-color" />
|
||||
<span class={`form-colorinput-color bg-${color.class}`} />
|
||||
</label>
|
||||
</div>
|
||||
))
|
||||
}
|
||||
</div>
|
||||
|
||||
<div class="form-label mt-4">Skin color</div>
|
||||
<div class="row g-2">
|
||||
{
|
||||
skinEntries.map((color, i) => (
|
||||
<div class="col-auto">
|
||||
<label class="form-colorinput">
|
||||
<input name="skin-color" type="radio" value={color.hex} class="form-colorinput-input js-select-skin-color" checked={i === 0} />
|
||||
<span class="form-colorinput-color" style={`background-color: ${color.hex}`} />
|
||||
</label>
|
||||
</div>
|
||||
))
|
||||
}
|
||||
</div>
|
||||
|
||||
<div class="form-label mt-4">Select SVG illustration</div>
|
||||
<div class="row">
|
||||
{
|
||||
autodarkEntries.map(([key, svg], i) => (
|
||||
<div class="col-3">
|
||||
<label class="form-imagecheck mb-2">
|
||||
<input name="form-imagecheck" type="radio" value={key} class="form-imagecheck-input js-select-illustration" checked={i === autodarkEntries.length - 1} />
|
||||
<span class="form-imagecheck-figure" set:html={withClass(svg)} />
|
||||
</label>
|
||||
</div>
|
||||
))
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h2 class="page-title my-5">
|
||||
{moreCount} more SVG Illustrations
|
||||
</h2>
|
||||
|
||||
<div class="row row-cards">
|
||||
<div class="col-lg-4">
|
||||
<div class="card card-md sticky-top">
|
||||
<div class="card-stamp card-stamp-lg">
|
||||
<div class="card-stamp-icon bg-primary">
|
||||
<Icon name="brand-figma" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="row align-items-center">
|
||||
<div class="col-10">
|
||||
<h3 class="h1">Tabler Illustrations</h3>
|
||||
<div class="prose text-secondary">
|
||||
Access a wide range of SVG illustrations for various projects. Effortlessly customize any illustration to align perfectly with your chosen color scheme!
|
||||
</div>
|
||||
<div class="mt-3">
|
||||
<a href={buyLink} class="btn btn-primary" target="_blank" rel="noopener">
|
||||
<Icon name="download" />
|
||||
Get lifetime access
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-8">
|
||||
<div class="row row-cards">
|
||||
{
|
||||
illustrationsList.map((illustration) => (
|
||||
<div class="col-6 col-md-3">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<a href={buyLink} target="_blank">
|
||||
<img src={`./static/illustrations/light/${illustration}.png`} alt={illustration} class="img-light" />
|
||||
<img src={`./static/illustrations/dark/${illustration}.png`} alt={illustration} class="img-dark" />
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
))
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</DefaultLayout>
|
||||
@@ -1,184 +0,0 @@
|
||||
---
|
||||
title: SVG Illustrations
|
||||
page-header: SVG Illustrations
|
||||
page-menu: addons.illustrations
|
||||
layout: default
|
||||
permalink: illustrations.html
|
||||
---
|
||||
|
||||
{% assign first-illustration = '' %}
|
||||
{% for illustration in free-illustrations.autodark %}
|
||||
{% assign first-illustration = illustration[1] %}
|
||||
{% endfor %}
|
||||
|
||||
{% assign skinColor = site.skinColors | first %}
|
||||
{% assign color = site.colors | first %}
|
||||
|
||||
<div class="mb-7" style="--tblr-illustrations-primary: var(--tblr-color-primary); --tblr-illustrations-skin: {{ skinColor.hex }};" id="current-illustration-style">
|
||||
<div class="row row-cards">
|
||||
<div class="col-12">
|
||||
<div class="row row-cards row-deck g-4">
|
||||
<div class="col-md-7">
|
||||
<div class="card">
|
||||
<div class="card-body d-flex align-items-center">
|
||||
<div id="current-illustration">{{ first-illustration | replace: '<svg ', '<svg class="w-100 h-auto" ' }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-5">
|
||||
<div class="row">
|
||||
<div class="col-12">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<div>
|
||||
<div class="form-label">Primary color</div>
|
||||
<div class="row g-2">
|
||||
<div class="col-auto">
|
||||
<label class="form-colorinput">
|
||||
<input name="color" type="radio" value="var(--tblr-color-primary)" class="form-colorinput-input js-select-color" checked />
|
||||
<span class="form-colorinput-color bg-primary"></span>
|
||||
</label>
|
||||
</div>
|
||||
<div class="col-auto">
|
||||
<label class="form-colorinput">
|
||||
<input name="color" type="radio" value="var(--tblr-bg-surface-inverted)" class="form-colorinput-input js-select-color" />
|
||||
<span class="form-colorinput-color bg-inverted"></span>
|
||||
</label>
|
||||
</div>
|
||||
{% for color in site.colors %}
|
||||
<div class="col-auto">
|
||||
<label class="form-colorinput">
|
||||
<input name="color" type="radio" value="{{ color[1].hex }}" class="form-colorinput-input js-select-color" />
|
||||
<span class="form-colorinput-color bg-{{ color[1].class }}"></span>
|
||||
</label>
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
|
||||
<div class="form-label mt-4">Skin color</div>
|
||||
<div class="row g-2">
|
||||
{% for color in site.skinColors %}
|
||||
<div class="col-auto">
|
||||
<label class="form-colorinput">
|
||||
<input name="skin-color" type="radio" value="{{ color[1].hex }}" class="form-colorinput-input js-select-skin-color" {% if forloop.first %} checked{% endif %} />
|
||||
<span class="form-colorinput-color" style="background-color: {{ color[1].hex }}"></span>
|
||||
</label>
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
|
||||
<div class="form-label mt-4">Select SVG illustration</div>
|
||||
<div class="row">
|
||||
{% for illustration in free-illustrations.autodark %}
|
||||
<div class="col-3">
|
||||
<label class="form-imagecheck mb-2">
|
||||
<input name="form-imagecheck" type="radio" value="{{ illustration[0] }}" class="form-imagecheck-input js-select-illustration" {% if forloop.last %} checked{% endif %}>
|
||||
<span class="form-imagecheck-figure">
|
||||
{{ illustration[1] | replace: '<svg ', '<svg class="w-100 h-auto" ' }}
|
||||
</span>
|
||||
</label>
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h2 class="page-title my-5">
|
||||
{{ illustrations | size | minus: 4 }} more SVG Illustrations
|
||||
</h2>
|
||||
|
||||
<div class="row row-cards">
|
||||
<div class="col-lg-4">
|
||||
<div class="card card-md sticky-top">
|
||||
<div class="card-stamp card-stamp-lg">
|
||||
<div class="card-stamp-icon bg-primary">
|
||||
{% include "ui/icon.html" icon="brand-figma" %}
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="row align-items-center">
|
||||
<div class="col-10">
|
||||
<h3 class="h1">Tabler Illustrations</h3>
|
||||
<div class="prose text-secondary">
|
||||
Access a wide range of SVG illustrations for various projects. Effortlessly customize any illustration to align perfectly with your chosen color scheme!
|
||||
</div>
|
||||
<div class="mt-3">
|
||||
<a href="{{ site.illustrations.buy_link }}" class="btn btn-primary" target="_blank" rel="noopener">
|
||||
{% include "ui/icon.html" icon="download" %}
|
||||
Get lifetime access
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-8">
|
||||
<div class="row row-cards">
|
||||
{% for illustration in illustrations %}
|
||||
<div class="col-6 col-md-3">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<a href="{{ site.illustrations.buy_link }}" target="_blank">
|
||||
<img src="{{ page | relative }}/static/illustrations/light/{{ illustration }}.png" alt="{{ illustration }}" class="img-light" />
|
||||
<img src="{{ page | relative }}/static/illustrations/dark/{{ illustration }}.png" alt="{{ illustration }}" class="img-dark" />
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
{% capture_script %}
|
||||
<script>
|
||||
let skinColor = "var({{ skin_color[1].prop }})",
|
||||
primaryColor = "var({{ color[1].prop }})";
|
||||
|
||||
const illustrations = {
|
||||
{% for illustration in free-illustrations.autodark %}
|
||||
"{{ illustration[0] }}": {
|
||||
svg: '{{ illustration[1] | replace: '<svg ', '<svg class="w-100 h-auto" ' | replace_regex: "\n", "\n" }}',
|
||||
},
|
||||
{% endfor %}
|
||||
}
|
||||
|
||||
const selectIllustrations = document.querySelectorAll(".js-select-illustration"),
|
||||
currentIllustration = document.getElementById("current-illustration"),
|
||||
currentIllustrationCode = document.getElementById("current-illustration-code");
|
||||
|
||||
document.querySelectorAll(".js-select-illustration").forEach((elem) => {
|
||||
elem.addEventListener("change", (e) => {
|
||||
const selectedId = e.target.value,
|
||||
selectedIllustration = illustrations[selectedId]
|
||||
|
||||
currentIllustration.innerHTML = selectedIllustration.svg
|
||||
|
||||
})
|
||||
})
|
||||
|
||||
document.querySelectorAll(".js-select-color").forEach((elem) => {
|
||||
elem.addEventListener("change", (e) => {
|
||||
primaryColor = e.target.value
|
||||
document.getElementById("current-illustration-style").style.setProperty("--tblr-illustrations-primary", primaryColor)
|
||||
})
|
||||
})
|
||||
|
||||
document.querySelectorAll(".js-select-skin-color").forEach((elem) => {
|
||||
elem.addEventListener("change", (e) => {
|
||||
skinColor = e.target.value
|
||||
document.getElementById("current-illustration-style").style.setProperty("--tblr-illustrations-skin", skinColor)
|
||||
})
|
||||
})
|
||||
</script>
|
||||
{% endcapture_script %}
|
||||
@@ -0,0 +1,16 @@
|
||||
---
|
||||
// Port preview/pages/index.html (layout: homepage)
|
||||
import DefaultLayout from '@shared/layouts/DefaultLayout.astro';
|
||||
import HomepageContent from '@shared/components/HomepageContent.astro';
|
||||
---
|
||||
|
||||
<DefaultLayout
|
||||
title="Dashboard"
|
||||
pageHeader="Dashboard"
|
||||
pretitle="Overview"
|
||||
actions="buttons"
|
||||
pageMenu="dashboards.default"
|
||||
pageLibs={['apexcharts', 'jsvectormap']}
|
||||
>
|
||||
<HomepageContent />
|
||||
</DefaultLayout>
|
||||
@@ -1,6 +0,0 @@
|
||||
---
|
||||
page-menu: dashboards.default
|
||||
layout: homepage
|
||||
permalink: index.html
|
||||
---
|
||||
|
||||
@@ -0,0 +1,32 @@
|
||||
---
|
||||
// Port of preview/pages/inline-player.html (layout: default).
|
||||
// Liquid: {% for provider in inline-players %} → one card per provider.
|
||||
import DefaultLayout from '@shared/layouts/DefaultLayout.astro';
|
||||
import InlinePlayer from '@shared/components/ui/InlinePlayer.astro';
|
||||
import players from '@data/inline-players.json';
|
||||
|
||||
type Provider = { title: string; type: string; id: string; 'embed-id': string | number };
|
||||
---
|
||||
|
||||
<DefaultLayout
|
||||
title="Inline Player"
|
||||
pageHeader="Inline Player"
|
||||
pageMenu="plugins.plyr"
|
||||
pageLibs={['plyr']}
|
||||
>
|
||||
<div class="row row-cards">
|
||||
{
|
||||
(players as Provider[]).map((provider) => (
|
||||
<div class="col-lg-6">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<h3 class="card-title">{provider.title}</h3>
|
||||
|
||||
<InlinePlayer id={provider.id} type={provider.type} embedId={provider['embed-id']} />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
))
|
||||
}
|
||||
</div>
|
||||
</DefaultLayout>
|
||||
@@ -1,23 +0,0 @@
|
||||
---
|
||||
title: Inline Player
|
||||
page-header: Inline Player
|
||||
page-menu: plugins.plyr
|
||||
page-libs: [plyr]
|
||||
layout: default
|
||||
permalink: inline-player.html
|
||||
---
|
||||
|
||||
<div class="row row-cards">
|
||||
{% for provider in inline-players %}
|
||||
|
||||
<div class="col-lg-6">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<h3 class="card-title">{{ provider.title }}</h3>
|
||||
|
||||
{% include "ui/inline-player.html" id=provider.id type=provider.type embed-id=provider.embed-id %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
@@ -0,0 +1,9 @@
|
||||
---
|
||||
// Port of preview/pages/invoice.html (layout: default)
|
||||
import DefaultLayout from '@shared/layouts/DefaultLayout.astro';
|
||||
import InvoiceCard from '@shared/components/cards/InvoiceCard.astro';
|
||||
---
|
||||
|
||||
<DefaultLayout title="Invoice" pageHeader="Invoice" pageMenu="extra.invoice" actions="print">
|
||||
<InvoiceCard />
|
||||
</DefaultLayout>
|
||||
@@ -1,10 +0,0 @@
|
||||
---
|
||||
title: Invoice
|
||||
layout: default
|
||||
page-menu: extra.invoice
|
||||
page-header: Invoice
|
||||
page-header-actions: print
|
||||
permalink: invoice.html
|
||||
---
|
||||
|
||||
{% include "cards/invoice.html" %}
|
||||
@@ -0,0 +1,153 @@
|
||||
---
|
||||
// Port of preview/pages/job-listing.html (layout: default)
|
||||
// NOTE: page-header-actions "add-job" requires PageHeader.astro to dispatch it
|
||||
// to HeaderActionsAddJob — see the migration report (PageHeader.astro is a
|
||||
// shared component and was not modified here).
|
||||
import DefaultLayout from '@shared/layouts/DefaultLayout.astro';
|
||||
import Icon from '@shared/components/Icon.astro';
|
||||
import Check from '@shared/components/ui/form/Check.astro';
|
||||
import jobsData from '@data/jobs.json';
|
||||
|
||||
interface Job {
|
||||
company: string;
|
||||
location: string;
|
||||
title: string;
|
||||
type: string;
|
||||
image: string;
|
||||
salary?: string;
|
||||
tags: string[];
|
||||
}
|
||||
|
||||
const jobs = jobsData as Job[];
|
||||
|
||||
const types = ['Programming', 'Design', 'Management / Finance', 'Customer Support', 'Sales / Marketing'];
|
||||
const salaries = ['$20K - $50K', '$50K - $100K', '> $100K', 'Drawing / Painting'];
|
||||
---
|
||||
|
||||
<DefaultLayout title="Search for Jobs" pageHeader="Search for Jobs" actions="add-job" pageMenu="extra.job-listing">
|
||||
<div class="row g-4">
|
||||
<div class="col-md-3">
|
||||
<form action="./" method="get" autocomplete="off" novalidate class="sticky-top">
|
||||
<div class="form-label">Job Types</div>
|
||||
<div class="mb-4">
|
||||
{
|
||||
types.map((type, i) => (
|
||||
<label class="form-check">
|
||||
<input type="checkbox" class="form-check-input" name="form-type[]" value={i + 1} checked={i + 1 <= 2} />
|
||||
<span class="form-check-label">{type}</span>
|
||||
</label>
|
||||
))
|
||||
}
|
||||
</div>
|
||||
|
||||
<div class="form-label">Remote</div>
|
||||
<div class="mb-4">
|
||||
<Check switch={true} titleOn="On" titleOff="Off" />
|
||||
</div>
|
||||
|
||||
<div class="form-label">Salary Range</div>
|
||||
<div class="mb-4">
|
||||
{
|
||||
salaries.map((salary, i) => (
|
||||
<label class="form-check">
|
||||
<input type="radio" class="form-check-input" name="form-salary" value={i + 1} checked={i + 1 <= 2} />
|
||||
<span class="form-check-label">{salary}</span>
|
||||
</label>
|
||||
))
|
||||
}
|
||||
</div>
|
||||
|
||||
<div class="form-label">Immigration</div>
|
||||
<div class="mb-4">
|
||||
<Check switch={true} titleOn="On" titleOff="Off" />
|
||||
|
||||
<div class="small text-secondary">Only show companies that can sponsor a visa</div>
|
||||
</div>
|
||||
|
||||
<label class="form-label" for="job-location">Location</label>
|
||||
<div class="mb-4">
|
||||
<select class="form-select" id="job-location" name="location">
|
||||
<option>Anywhere</option>
|
||||
<option>London</option>
|
||||
<option>San Francisco</option>
|
||||
<option>New York</option>
|
||||
<option>Berlin</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div class="mt-5">
|
||||
<button class="btn btn-primary w-100">
|
||||
Confirm changes
|
||||
</button>
|
||||
<a href="#" class="btn btn-link w-100">
|
||||
Reset to defaults
|
||||
</a>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
<div class="col-md-9">
|
||||
<div class="row row-cards">
|
||||
<div class="space-y">
|
||||
{
|
||||
jobs.map((job) => (
|
||||
<div class="card">
|
||||
<div class="row g-0">
|
||||
<div class="col-auto">
|
||||
<div class="card-body">
|
||||
<div class="avatar avatar-md" style={`background-image: url(./static/jobs/${job.image})`} />
|
||||
</div>
|
||||
</div>
|
||||
<div class="col">
|
||||
<div class="card-body ps-0">
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<h3 class="mb-0">
|
||||
<a href="#">{job.title}</a>
|
||||
</h3>
|
||||
</div>
|
||||
{job.salary && <div class="col-auto fs-3 text-green">{job.salary}</div>}
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-md">
|
||||
<div class="mt-3 list-inline list-inline-dots mb-0 text-secondary d-sm-block d-none">
|
||||
<div class="list-inline-item">
|
||||
<Icon name="building-community" class="icon-inline" /> {job.company}
|
||||
</div>
|
||||
<div class="list-inline-item">
|
||||
<Icon name="license" class="icon-inline" /> {job.type}
|
||||
</div>
|
||||
<div class="list-inline-item">
|
||||
<Icon name="map-pin" class="icon-inline" /> {job.location}
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-3 list mb-0 text-secondary d-block d-sm-none">
|
||||
<div class="list-item">
|
||||
<Icon name="building-community" class="icon-inline" /> {job.company}
|
||||
</div>
|
||||
<div class="list-item">
|
||||
<Icon name="license" class="icon-inline" /> {job.type}
|
||||
</div>
|
||||
<div class="list-item">
|
||||
<Icon name="map-pin" class="icon-inline" /> {job.location}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-auto">
|
||||
<div class="mt-3 badges">
|
||||
{job.tags.map((tag) => (
|
||||
<a href="#" class="badge badge-outline text-secondary fw-normal badge-pill">{tag}</a>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
))
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</DefaultLayout>
|
||||
@@ -1,117 +0,0 @@
|
||||
---
|
||||
title: Search for Jobs
|
||||
page-header: Search for Jobs
|
||||
page-header-actions: add-job
|
||||
page-menu: extra.job-listing
|
||||
layout: default
|
||||
permalink: job-listing.html
|
||||
---
|
||||
|
||||
{% assign types = 'Programming,Design,Management / Finance,Customer Support,Sales / Marketing' | split: ',' %}
|
||||
{% assign salaries = '$20K - $50K,$50K - $100K,> $100K,Drawing / Painting' | split: ',' %}
|
||||
|
||||
<div class="row g-4">
|
||||
<div class="col-md-3">
|
||||
<form action="./" method="get" autocomplete="off" novalidate class="sticky-top">
|
||||
|
||||
<div class="form-label">Job Types</div>
|
||||
<div class="mb-4">
|
||||
{% for type in types %}
|
||||
<label class="form-check">
|
||||
<input type="checkbox" class="form-check-input" name="form-type[]" value="{{ forloop.index }}"{% if forloop.index <= 2 %} checked{% endif %}>
|
||||
<span class="form-check-label">{{ type }}</span>
|
||||
</label>
|
||||
{% endfor %}
|
||||
</div>
|
||||
|
||||
<div class="form-label">Remote</div>
|
||||
<div class="mb-4">
|
||||
{% include "ui/form/check.html" switch=true title-on="On" title-off="Off" %}
|
||||
</div>
|
||||
|
||||
<div class="form-label">Salary Range</div>
|
||||
<div class="mb-4">
|
||||
{% for salary in salaries %}
|
||||
<label class="form-check">
|
||||
<input type="radio" class="form-check-input" name="form-salary" value="{{ forloop.index }}"{% if forloop.index <= 2 %} checked{% endif %}>
|
||||
<span class="form-check-label">{{ salary }}</span>
|
||||
</label>
|
||||
{% endfor %}
|
||||
</div>
|
||||
|
||||
<div class="form-label">Immigration</div>
|
||||
<div class="mb-4">
|
||||
{% include "ui/form/check.html" switch=true title-on="On" title-off="Off" %}
|
||||
|
||||
<div class="small text-secondary">Only show companies that can sponsor a visa</div>
|
||||
</div>
|
||||
|
||||
<label class="form-label" for="job-location">Location</label>
|
||||
<div class="mb-4">
|
||||
<select class="form-select" id="job-location" name="location">
|
||||
<option>Anywhere</option>
|
||||
<option>London</option>
|
||||
<option>San Francisco</option>
|
||||
<option>New York</option>
|
||||
<option>Berlin</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div class="mt-5">
|
||||
<button class="btn btn-primary w-100">
|
||||
Confirm changes
|
||||
</button>
|
||||
<a href="#" class="btn btn-link w-100">
|
||||
Reset to defaults
|
||||
</a>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
</div>
|
||||
<div class="col-md-9">
|
||||
<div class="row row-cards">
|
||||
<div class="space-y">
|
||||
{% for job in jobs %}
|
||||
<div class="card">
|
||||
<div class="row g-0">
|
||||
<div class="col-auto">
|
||||
<div class="card-body">
|
||||
<div class="avatar avatar-md" style="background-image: url({{ page | relative }}/static/jobs/{{ job.image }})"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col">
|
||||
<div class="card-body ps-0">
|
||||
<div class="row">
|
||||
<div class="col"><h3 class="mb-0"><a href="#">{{ job.title }}</a></h3></div>
|
||||
{% if job.salary %}<div class="col-auto fs-3 text-green">{{ job.salary }}</div>{% endif %}
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-md">
|
||||
<div class="mt-3 list-inline list-inline-dots mb-0 text-secondary d-sm-block d-none">
|
||||
<div class="list-inline-item">{% include "ui/icon.html" icon="building-community" class="icon-inline" %} {{ job.company }}</div>
|
||||
<div class="list-inline-item">{% include "ui/icon.html" icon="license" class="icon-inline" %} {{ job.type }}</div>
|
||||
<div class="list-inline-item">{% include "ui/icon.html" icon="map-pin" class="icon-inline" %} {{ job.location }}</div>
|
||||
</div>
|
||||
<div class="mt-3 list mb-0 text-secondary d-block d-sm-none">
|
||||
<div class="list-item">{% include "ui/icon.html" icon="building-community" class="icon-inline" %} {{ job.company }}</div>
|
||||
<div class="list-item">{% include "ui/icon.html" icon="license" class="icon-inline" %} {{ job.type }}</div>
|
||||
<div class="list-item">{% include "ui/icon.html" icon="map-pin" class="icon-inline" %} {{ job.location }}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-auto">
|
||||
<div class="mt-3 badges">
|
||||
{% for tag in job.tags %}
|
||||
<a href="#" class="badge badge-outline text-secondary fw-normal badge-pill">{{ tag }}</a>
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -0,0 +1,17 @@
|
||||
---
|
||||
// Port of preview/pages/layout-boxed.html (layout: homepage)
|
||||
import DefaultLayout from '@shared/layouts/DefaultLayout.astro';
|
||||
import HomepageContent from '@shared/components/HomepageContent.astro';
|
||||
---
|
||||
|
||||
<DefaultLayout
|
||||
title="Dashboard"
|
||||
pageHeader="Boxed layout"
|
||||
pretitle="Overview"
|
||||
actions="buttons"
|
||||
pageMenu="layout.boxed"
|
||||
pageLibs={['apexcharts', 'jsvectormap']}
|
||||
bodyClass="layout-boxed"
|
||||
>
|
||||
<HomepageContent />
|
||||
</DefaultLayout>
|
||||
@@ -1,7 +0,0 @@
|
||||
---
|
||||
page-header: Boxed layout
|
||||
page-menu: layout.boxed
|
||||
body-class: layout-boxed
|
||||
layout: homepage
|
||||
permalink: layout-boxed.html
|
||||
---
|
||||
@@ -0,0 +1,21 @@
|
||||
---
|
||||
// Port of preview/pages/layout-combo.html (layout: homepage)
|
||||
import DefaultLayout from '@shared/layouts/DefaultLayout.astro';
|
||||
import HomepageContent from '@shared/components/HomepageContent.astro';
|
||||
---
|
||||
|
||||
<DefaultLayout
|
||||
title="Dashboard"
|
||||
pageHeader="Combo layout"
|
||||
pretitle="Overview"
|
||||
actions="buttons"
|
||||
pageMenu="layout.combo"
|
||||
pageLibs={['apexcharts', 'jsvectormap']}
|
||||
sidebar
|
||||
sidebarDark
|
||||
navbarHideBrand
|
||||
navbarClass="d-none d-lg-flex"
|
||||
navbarCondensed
|
||||
>
|
||||
<HomepageContent />
|
||||
</DefaultLayout>
|
||||
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user