mirror of
https://github.com/tabler/tabler.git
synced 2026-08-29 13:21:29 +04:00
Add quality gates: Prettier for Astro, astro check for shared, unused SCSS variable lint (#2749)
Co-authored-by: copilot-swe-agent[bot] <198982749+Copilot@users.noreply.github.com>
This commit is contained in:
Paweł Kuna
+209
-218
@@ -1,228 +1,219 @@
|
||||
---
|
||||
import CardActions from '@ui/CardActions.astro';
|
||||
import DefaultLayout from '@shared/layouts/DefaultLayout.astro';
|
||||
import Button from '@ui/Button.astro';
|
||||
import ButtonList from '@ui/ButtonList.astro';
|
||||
import Card from '@ui/Card.astro';
|
||||
import CardHeader from '@ui/CardHeader.astro';
|
||||
import CardBody from '@ui/CardBody.astro';
|
||||
import CardTitle from '@ui/CardTitle.astro';
|
||||
import Badge from '@ui/Badge.astro';
|
||||
import Icon from '@ui/Icon.astro';
|
||||
import CardActions from '@ui/CardActions.astro'
|
||||
import DefaultLayout from '@shared/layouts/DefaultLayout.astro'
|
||||
import Button from '@ui/Button.astro'
|
||||
import ButtonList from '@ui/ButtonList.astro'
|
||||
import Card from '@ui/Card.astro'
|
||||
import CardHeader from '@ui/CardHeader.astro'
|
||||
import CardBody from '@ui/CardBody.astro'
|
||||
import CardTitle from '@ui/CardTitle.astro'
|
||||
import Badge from '@ui/Badge.astro'
|
||||
import Icon from '@ui/Icon.astro'
|
||||
---
|
||||
|
||||
<DefaultLayout
|
||||
title="Driver Tour"
|
||||
pageHeader="Driver Tour"
|
||||
pageMenu="plugins.tour"
|
||||
pageLibs={['driver.js']}
|
||||
>
|
||||
<div class="row row-cards">
|
||||
<div class="col-12">
|
||||
<Card>
|
||||
<CardHeader title="Product Tour Example">
|
||||
<CardActions>
|
||||
<Button id="start-tour" text="Start Tour" icon="play" color="primary" element="button" />
|
||||
</CardActions>
|
||||
</CardHeader>
|
||||
<CardBody>
|
||||
<p>
|
||||
Click the "Start Tour" button to begin an interactive tour of this page.
|
||||
The tour will guide you through different elements and features.
|
||||
</p>
|
||||
</CardBody>
|
||||
</Card>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<Card id="tour-card-1">
|
||||
<CardHeader title="Welcome Section" />
|
||||
<CardBody>
|
||||
<p>This is the first card in our tour. It demonstrates how Driver.js highlights elements on the page.</p>
|
||||
<ButtonList>
|
||||
<Button text="Action Button" color="primary" element="button" />
|
||||
<Button text="Secondary" element="button" />
|
||||
</ButtonList>
|
||||
</CardBody>
|
||||
</Card>
|
||||
</div>
|
||||
<DefaultLayout title="Driver Tour" pageHeader="Driver Tour" pageMenu="plugins.tour" pageLibs={['driver.js']}>
|
||||
<div class="row row-cards">
|
||||
<div class="col-12">
|
||||
<Card>
|
||||
<CardHeader title="Product Tour Example">
|
||||
<CardActions>
|
||||
<Button id="start-tour" text="Start Tour" icon="play" color="primary" element="button" />
|
||||
</CardActions>
|
||||
</CardHeader>
|
||||
<CardBody>
|
||||
<p>Click the "Start Tour" button to begin an interactive tour of this page. The tour will guide you through different elements and features.</p>
|
||||
</CardBody>
|
||||
</Card>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<Card id="tour-card-1">
|
||||
<CardHeader title="Welcome Section" />
|
||||
<CardBody>
|
||||
<p>This is the first card in our tour. It demonstrates how Driver.js highlights elements on the page.</p>
|
||||
<ButtonList>
|
||||
<Button text="Action Button" color="primary" element="button" />
|
||||
<Button text="Secondary" element="button" />
|
||||
</ButtonList>
|
||||
</CardBody>
|
||||
</Card>
|
||||
</div>
|
||||
|
||||
<div class="col-md-6">
|
||||
<Card id="tour-card-2">
|
||||
<CardHeader title="Features Section" />
|
||||
<CardBody>
|
||||
<p>This card shows additional features and demonstrates the tour's ability to navigate between different
|
||||
elements.</p>
|
||||
<div class="form-selectgroup">
|
||||
<label class="form-selectgroup-item">
|
||||
<input type="radio" name="options" value="1" class="form-selectgroup-input" checked>
|
||||
<span class="form-selectgroup-label">Option 1</span>
|
||||
</label>
|
||||
<label class="form-selectgroup-item">
|
||||
<input type="radio" name="options" value="2" class="form-selectgroup-input">
|
||||
<span class="form-selectgroup-label">Option 2</span>
|
||||
</label>
|
||||
</div>
|
||||
</CardBody>
|
||||
</Card>
|
||||
</div>
|
||||
<div class="col-12">
|
||||
<Card id="tour-card-3">
|
||||
<CardHeader title="Navigation Example" />
|
||||
<CardBody>
|
||||
<p>This is a full-width card that demonstrates how the tour works with larger elements.</p>
|
||||
<div class="table-responsive">
|
||||
<table class="table table-vcenter">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Name</th>
|
||||
<th>Status</th>
|
||||
<th>Role</th>
|
||||
<th class="w-1"></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>John Doe</td>
|
||||
<td><Badge text="Active" color="success" /></td>
|
||||
<td>Developer</td>
|
||||
<td>
|
||||
<Button text="Edit" size="sm" href="#" />
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Jane Smith</td>
|
||||
<td><Badge text="Pending" color="warning" /></td>
|
||||
<td>Designer</td>
|
||||
<td>
|
||||
<Button text="Edit" size="sm" href="#" />
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</CardBody>
|
||||
</Card>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<Card id="tour-card-2">
|
||||
<CardHeader title="Features Section" />
|
||||
<CardBody>
|
||||
<p>This card shows additional features and demonstrates the tour's ability to navigate between different elements.</p>
|
||||
<div class="form-selectgroup">
|
||||
<label class="form-selectgroup-item">
|
||||
<input type="radio" name="options" value="1" class="form-selectgroup-input" checked />
|
||||
<span class="form-selectgroup-label">Option 1</span>
|
||||
</label>
|
||||
<label class="form-selectgroup-item">
|
||||
<input type="radio" name="options" value="2" class="form-selectgroup-input" />
|
||||
<span class="form-selectgroup-label">Option 2</span>
|
||||
</label>
|
||||
</div>
|
||||
</CardBody>
|
||||
</Card>
|
||||
</div>
|
||||
<div class="col-12">
|
||||
<Card id="tour-card-3">
|
||||
<CardHeader title="Navigation Example" />
|
||||
<CardBody>
|
||||
<p>This is a full-width card that demonstrates how the tour works with larger elements.</p>
|
||||
<div class="table-responsive">
|
||||
<table class="table table-vcenter">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Name</th>
|
||||
<th>Status</th>
|
||||
<th>Role</th>
|
||||
<th class="w-1"></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>John Doe</td>
|
||||
<td><Badge text="Active" color="success" /></td>
|
||||
<td>Developer</td>
|
||||
<td>
|
||||
<Button text="Edit" size="sm" href="#" />
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Jane Smith</td>
|
||||
<td><Badge text="Pending" color="warning" /></td>
|
||||
<td>Designer</td>
|
||||
<td>
|
||||
<Button text="Edit" size="sm" href="#" />
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</CardBody>
|
||||
</Card>
|
||||
</div>
|
||||
|
||||
<div class="col-md-4">
|
||||
<Card id="tour-card-4">
|
||||
<CardBody class="text-center">
|
||||
<div class="mb-3">
|
||||
<Icon name="settings" size="48" />
|
||||
</div>
|
||||
<CardTitle>Settings</CardTitle>
|
||||
<p class="text-secondary">Configure your application settings here.</p>
|
||||
</CardBody>
|
||||
</Card>
|
||||
</div>
|
||||
<div class="col-md-4">
|
||||
<Card id="tour-card-4">
|
||||
<CardBody class="text-center">
|
||||
<div class="mb-3">
|
||||
<Icon name="settings" size="48" />
|
||||
</div>
|
||||
<CardTitle>Settings</CardTitle>
|
||||
<p class="text-secondary">Configure your application settings here.</p>
|
||||
</CardBody>
|
||||
</Card>
|
||||
</div>
|
||||
|
||||
<div class="col-md-4">
|
||||
<Card id="tour-card-5">
|
||||
<CardBody class="text-center">
|
||||
<div class="mb-3">
|
||||
<Icon name="users" size="48" />
|
||||
</div>
|
||||
<CardTitle>Users</CardTitle>
|
||||
<p class="text-secondary">Manage your team members and permissions.</p>
|
||||
</CardBody>
|
||||
</Card>
|
||||
</div>
|
||||
<div class="col-md-4">
|
||||
<Card id="tour-card-5">
|
||||
<CardBody class="text-center">
|
||||
<div class="mb-3">
|
||||
<Icon name="users" size="48" />
|
||||
</div>
|
||||
<CardTitle>Users</CardTitle>
|
||||
<p class="text-secondary">Manage your team members and permissions.</p>
|
||||
</CardBody>
|
||||
</Card>
|
||||
</div>
|
||||
|
||||
<div class="col-md-4">
|
||||
<Card id="tour-card-6">
|
||||
<CardBody class="text-center">
|
||||
<div class="mb-3">
|
||||
<Icon name="chart-bar" size="48" />
|
||||
</div>
|
||||
<CardTitle>Analytics</CardTitle>
|
||||
<p class="text-secondary">View your application statistics and reports.</p>
|
||||
</CardBody>
|
||||
</Card>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-4">
|
||||
<Card id="tour-card-6">
|
||||
<CardBody class="text-center">
|
||||
<div class="mb-3">
|
||||
<Icon name="chart-bar" size="48" />
|
||||
</div>
|
||||
<CardTitle>Analytics</CardTitle>
|
||||
<p class="text-secondary">View your application statistics and reports.</p>
|
||||
</CardBody>
|
||||
</Card>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- BEGIN TOUR SCRIPT -->
|
||||
<script is:inline>
|
||||
document.addEventListener('DOMContentLoaded', function () {
|
||||
const driverObj = driver.js.driver({
|
||||
allowClose: true,
|
||||
overlayClickNext: true,
|
||||
showButtons: ['next', 'previous', 'close'],
|
||||
showProgress: true,
|
||||
steps: [
|
||||
{
|
||||
element: '#start-tour',
|
||||
popover: {
|
||||
title: 'Welcome to the Tour!',
|
||||
description: 'This button starts the interactive tour. Click it to begin exploring the page.',
|
||||
side: 'bottom',
|
||||
align: 'start'
|
||||
}
|
||||
},
|
||||
{
|
||||
element: '#tour-card-1',
|
||||
popover: {
|
||||
title: 'Welcome Section',
|
||||
description: 'This is the first card in our tour. It demonstrates how Driver.js highlights elements on the page.',
|
||||
side: 'right',
|
||||
align: 'start'
|
||||
}
|
||||
},
|
||||
{
|
||||
element: '#tour-card-2',
|
||||
popover: {
|
||||
title: 'Features Section',
|
||||
description: 'This card shows additional features and demonstrates the tour\'s ability to navigate between different elements.',
|
||||
side: 'left',
|
||||
align: 'start'
|
||||
}
|
||||
},
|
||||
{
|
||||
element: '#tour-card-3',
|
||||
popover: {
|
||||
title: 'Data Table',
|
||||
description: 'This table shows how Driver.js works with larger elements. You can highlight entire sections of your page.',
|
||||
side: 'top',
|
||||
align: 'center'
|
||||
}
|
||||
},
|
||||
{
|
||||
element: '#tour-card-4',
|
||||
popover: {
|
||||
title: 'Settings Card',
|
||||
description: 'This card demonstrates how the tour works with smaller, centered elements.',
|
||||
side: 'top',
|
||||
align: 'center'
|
||||
}
|
||||
},
|
||||
{
|
||||
element: '#tour-card-5',
|
||||
popover: {
|
||||
title: 'Users Card',
|
||||
description: 'Another example card showing user management features.',
|
||||
side: 'top',
|
||||
align: 'center'
|
||||
}
|
||||
},
|
||||
{
|
||||
element: '#tour-card-6',
|
||||
popover: {
|
||||
title: 'Analytics Card',
|
||||
description: 'The final step of the tour. This card shows analytics features.',
|
||||
side: 'top',
|
||||
align: 'center'
|
||||
}
|
||||
}
|
||||
]
|
||||
});
|
||||
<!-- BEGIN TOUR SCRIPT -->
|
||||
<script is:inline>
|
||||
document.addEventListener('DOMContentLoaded', function () {
|
||||
const driverObj = driver.js.driver({
|
||||
allowClose: true,
|
||||
overlayClickNext: true,
|
||||
showButtons: ['next', 'previous', 'close'],
|
||||
showProgress: true,
|
||||
steps: [
|
||||
{
|
||||
element: '#start-tour',
|
||||
popover: {
|
||||
title: 'Welcome to the Tour!',
|
||||
description: 'This button starts the interactive tour. Click it to begin exploring the page.',
|
||||
side: 'bottom',
|
||||
align: 'start',
|
||||
},
|
||||
},
|
||||
{
|
||||
element: '#tour-card-1',
|
||||
popover: {
|
||||
title: 'Welcome Section',
|
||||
description: 'This is the first card in our tour. It demonstrates how Driver.js highlights elements on the page.',
|
||||
side: 'right',
|
||||
align: 'start',
|
||||
},
|
||||
},
|
||||
{
|
||||
element: '#tour-card-2',
|
||||
popover: {
|
||||
title: 'Features Section',
|
||||
description: "This card shows additional features and demonstrates the tour's ability to navigate between different elements.",
|
||||
side: 'left',
|
||||
align: 'start',
|
||||
},
|
||||
},
|
||||
{
|
||||
element: '#tour-card-3',
|
||||
popover: {
|
||||
title: 'Data Table',
|
||||
description: 'This table shows how Driver.js works with larger elements. You can highlight entire sections of your page.',
|
||||
side: 'top',
|
||||
align: 'center',
|
||||
},
|
||||
},
|
||||
{
|
||||
element: '#tour-card-4',
|
||||
popover: {
|
||||
title: 'Settings Card',
|
||||
description: 'This card demonstrates how the tour works with smaller, centered elements.',
|
||||
side: 'top',
|
||||
align: 'center',
|
||||
},
|
||||
},
|
||||
{
|
||||
element: '#tour-card-5',
|
||||
popover: {
|
||||
title: 'Users Card',
|
||||
description: 'Another example card showing user management features.',
|
||||
side: 'top',
|
||||
align: 'center',
|
||||
},
|
||||
},
|
||||
{
|
||||
element: '#tour-card-6',
|
||||
popover: {
|
||||
title: 'Analytics Card',
|
||||
description: 'The final step of the tour. This card shows analytics features.',
|
||||
side: 'top',
|
||||
align: 'center',
|
||||
},
|
||||
},
|
||||
],
|
||||
})
|
||||
|
||||
const startButton = document.getElementById('start-tour');
|
||||
if (startButton) {
|
||||
startButton.addEventListener('click', function () {
|
||||
driverObj.drive();
|
||||
});
|
||||
}
|
||||
});
|
||||
</script>
|
||||
<!-- END TOUR SCRIPT -->
|
||||
const startButton = document.getElementById('start-tour')
|
||||
if (startButton) {
|
||||
startButton.addEventListener('click', function () {
|
||||
driverObj.drive()
|
||||
})
|
||||
}
|
||||
})
|
||||
</script>
|
||||
<!-- END TOUR SCRIPT -->
|
||||
</DefaultLayout>
|
||||
|
||||
Reference in New Issue
Block a user