mirror of
https://github.com/tabler/tabler.git
synced 2026-08-29 13:21:29 +04:00
Add screenshots package and fix card-gradient minify bug (#2793)
Co-authored-by: Bartek <xbartoszdobija@gmail.com>
This commit is contained in:
Paweł Kuna
Bartek
@@ -0,0 +1,72 @@
|
||||
---
|
||||
import FormFooter from '@ui/FormFooter.astro'
|
||||
import Button from '@ui/Button.astro'
|
||||
import ButtonList from '@ui/ButtonList.astro'
|
||||
import CaptureScript from '../CaptureScript.astro'
|
||||
---
|
||||
|
||||
<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" />
|
||||
Don't ask for codes again on this device
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<FormFooter>
|
||||
<ButtonList class="flex-nowrap">
|
||||
<Button text="Cancel" block href="#" />
|
||||
<Button text="Verify" block color="primary" />
|
||||
</ButtonList>
|
||||
</FormFooter>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
<CaptureScript>
|
||||
<!-- BEGIN CODE INPUT SCRIPT -->
|
||||
<script is:inline>
|
||||
const inputs = document.querySelectorAll('[data-code-input]')
|
||||
|
||||
inputs.forEach((input, i) => {
|
||||
input.addEventListener('input', (e) => {
|
||||
const target = e.target
|
||||
if (target.value.length === target.maxLength && i + 1 < inputs.length) {
|
||||
inputs[i + 1].focus()
|
||||
}
|
||||
})
|
||||
|
||||
input.addEventListener('keydown', (e) => {
|
||||
const target = e.target
|
||||
if (target.value.length === 0 && e.key === 'Backspace' && i > 0) {
|
||||
inputs[i - 1].focus()
|
||||
}
|
||||
})
|
||||
})
|
||||
</script>
|
||||
<!-- END CODE INPUT SCRIPT -->
|
||||
</CaptureScript>
|
||||
@@ -2,6 +2,7 @@
|
||||
// Photos filtered to horizontal=true, then sliced by offset/limit.
|
||||
import photos from '@data/photos.json'
|
||||
import CardTitle from '@ui/CardTitle.astro'
|
||||
import Carousel from '@ui/Carousel.astro'
|
||||
|
||||
interface Props {
|
||||
id?: string
|
||||
|
||||
@@ -0,0 +1,72 @@
|
||||
---
|
||||
import Subheader from '@ui/Subheader.astro'
|
||||
import Trending from '@ui/Trending.astro'
|
||||
|
||||
interface TrackingItem {
|
||||
status?: 'success' | 'warning' | 'danger'
|
||||
label: string
|
||||
}
|
||||
|
||||
// Mirrors the uptime history shown in docs/pages/ui/components/tracking.mdx.
|
||||
const uptime: TrackingItem[] = [
|
||||
{ status: 'success', label: 'Operational' },
|
||||
{ status: 'success', label: 'Operational' },
|
||||
{ status: 'success', label: 'Operational' },
|
||||
{ status: 'success', label: 'Operational' },
|
||||
{ status: 'danger', label: 'Downtime' },
|
||||
{ status: 'success', label: 'Operational' },
|
||||
{ status: 'success', label: 'Operational' },
|
||||
{ status: 'success', label: 'Operational' },
|
||||
{ status: 'success', label: 'Operational' },
|
||||
{ status: 'success', label: 'Operational' },
|
||||
{ status: 'success', label: 'Operational' },
|
||||
{ status: 'success', label: 'Operational' },
|
||||
{ status: 'success', label: 'Operational' },
|
||||
{ status: 'warning', label: 'Big load' },
|
||||
{ status: 'success', label: 'Operational' },
|
||||
{ status: 'success', label: 'Operational' },
|
||||
{ status: 'success', label: 'Operational' },
|
||||
{ status: 'danger', label: 'Downtime' },
|
||||
{ status: 'success', label: 'Operational' },
|
||||
{ status: 'success', label: 'Operational' },
|
||||
{ status: 'success', label: 'Operational' },
|
||||
{ label: 'No data' },
|
||||
{ label: 'No data' },
|
||||
{ status: 'success', label: 'Operational' },
|
||||
{ status: 'success', label: 'Operational' },
|
||||
{ status: 'success', label: 'Operational' },
|
||||
{ status: 'success', label: 'Operational' },
|
||||
{ status: 'success', label: 'Operational' },
|
||||
{ status: 'success', label: 'Operational' },
|
||||
{ status: 'success', label: 'Operational' },
|
||||
]
|
||||
---
|
||||
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<div class="d-flex align-items-center">
|
||||
<Subheader>Status monitoring</Subheader>
|
||||
<div class="ms-auto lh-1">
|
||||
<div class="dropdown">
|
||||
<a class="dropdown-toggle text-secondary" href="#" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Current month </a>
|
||||
<div class="dropdown-menu dropdown-menu-end">
|
||||
<a class="dropdown-item active" href="#">Current month</a>
|
||||
<a class="dropdown-item" href="#">Last month</a>
|
||||
<a class="dropdown-item" href="#">Last 3 months</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="d-flex align-items-baseline">
|
||||
<div class="h1 mb-3 me-2">99.5%</div>
|
||||
<div class="me-auto">
|
||||
<Trending value={2} />
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-2">
|
||||
<div class="tracking">
|
||||
{uptime.map((item) => <div class:list={['tracking-block', item.status && `bg-${item.status}`]} data-bs-toggle="tooltip" data-bs-placement="top" title={item.label} />)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -0,0 +1,24 @@
|
||||
---
|
||||
import Subheader from '@ui/Subheader.astro'
|
||||
import DropdownDays from '@ui/DropdownDays.astro'
|
||||
import Trending from '@ui/Trending.astro'
|
||||
import Progress from '@ui/Progress.astro'
|
||||
---
|
||||
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<div class="d-flex align-items-center">
|
||||
<Subheader>Conversion rate</Subheader>
|
||||
<div class="ms-auto lh-1">
|
||||
<DropdownDays id="conversion-rate" label="Select time range for conversion rate" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="d-flex align-items-baseline">
|
||||
<div class="h1 mb-3 me-2">42.8%</div>
|
||||
<div class="me-auto">
|
||||
<Trending value={5} />
|
||||
</div>
|
||||
</div>
|
||||
<Progress value={43} color="primary" size="sm" />
|
||||
</div>
|
||||
</div>
|
||||
@@ -0,0 +1,11 @@
|
||||
---
|
||||
import Subheader from '@ui/Subheader.astro'
|
||||
import Chart from '@ui/Chart.astro'
|
||||
---
|
||||
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<Subheader>LTC/BTC</Subheader>
|
||||
<Chart chartId="dashboard-crypto-candlestick" height={12} label="LTC/BTC" />
|
||||
</div>
|
||||
</div>
|
||||
@@ -0,0 +1,26 @@
|
||||
---
|
||||
import Subheader from '@ui/Subheader.astro'
|
||||
import Chart from '@ui/Chart.astro'
|
||||
import Legend from '@ui/Legend.astro'
|
||||
---
|
||||
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<div class="d-flex align-items-start justify-content-between gap-3 mb-2">
|
||||
<div class="mb-3">
|
||||
<Subheader>Sales overview</Subheader>
|
||||
<div class="d-flex align-items-baseline gap-2 mt-1">
|
||||
<div class="h1 mb-0">$284,300</div>
|
||||
<div class="text-green fw-medium">+12.4%</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="d-flex align-items-center gap-3">
|
||||
<Legend color="primary">This year</Legend>
|
||||
<Legend color="secondary">Last year</Legend>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<Chart chartId="sales-overview" height={15} label="Sales overview" />
|
||||
</div>
|
||||
</div>
|
||||
@@ -0,0 +1,11 @@
|
||||
---
|
||||
import Subheader from '@ui/Subheader.astro'
|
||||
import Chart from '@ui/Chart.astro'
|
||||
---
|
||||
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<Subheader>Traffic sources</Subheader>
|
||||
<Chart chartId="traffic-sources-donut" height={12} label="Traffic sources" />
|
||||
</div>
|
||||
</div>
|
||||
@@ -0,0 +1,11 @@
|
||||
---
|
||||
import Subheader from '@ui/Subheader.astro'
|
||||
import Chart from '@ui/Chart.astro'
|
||||
---
|
||||
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<Subheader>Weekly activity</Subheader>
|
||||
<Chart chartId="activity-heatmap" height={12} label="Weekly activity" />
|
||||
</div>
|
||||
</div>
|
||||
@@ -1,7 +1,7 @@
|
||||
---
|
||||
// "active" is hardcoded on Home — not derived from the current page.
|
||||
// Relative base is "../" for one-level-deep marketing pages.
|
||||
import NavbarLogo from '../navbar/NavbarLogo.astro'
|
||||
import Logo from '../navbar/Logo.astro'
|
||||
|
||||
const base = '..'
|
||||
---
|
||||
@@ -9,7 +9,7 @@ const base = '..'
|
||||
<!-- BEGIN MARKETING NAVBAR -->
|
||||
<header class="navbar navbar-expand-lg navbar-transparent py-3">
|
||||
<div class="container">
|
||||
<NavbarLogo href={base} />
|
||||
<Logo href={base} />
|
||||
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarTogglerDemo01" aria-controls="navbarTogglerDemo01" aria-expanded="false" aria-label="Toggle primary navigation">
|
||||
<span class="navbar-toggler-icon"></span>
|
||||
</button>
|
||||
|
||||
@@ -1,6 +1,7 @@
|
||||
---
|
||||
import Icon from '@ui/Icon.astro'
|
||||
import Illustration from '@ui/Illustration.astro'
|
||||
import Carousel from '@ui/Carousel.astro'
|
||||
import CaptureScript from '../../CaptureScript.astro'
|
||||
|
||||
const strings = ['more effective', 'more efficient', 'more productive']
|
||||
@@ -27,27 +28,25 @@ const typedId = 'typed'
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<div class="hero-img-side">
|
||||
<div id="carousel-controls" class="carousel slide" data-bs-ride="carousel" data-interval="4000">
|
||||
<div class="carousel-inner">
|
||||
<div class="carousel-item active">
|
||||
<Illustration image="boy-with-key.svg" class="d-block mx-auto" height="350" />
|
||||
</div>
|
||||
<div class="carousel-item">
|
||||
<Illustration image="boy-girl.svg" class="d-block mx-auto" height="350" />
|
||||
</div>
|
||||
<div class="carousel-item">
|
||||
<Illustration image="computer-fix.svg" class="d-block mx-auto" height="350" />
|
||||
</div>
|
||||
<Carousel id="carousel-controls" slideCount={3} interval={4000}>
|
||||
<div class="carousel-item active">
|
||||
<Illustration image="boy-with-key.svg" class="d-block mx-auto" height="350" />
|
||||
</div>
|
||||
<button type="button" class="carousel-control-prev text-secondary" data-bs-target="#carousel-controls" data-bs-slide="prev">
|
||||
<div class="carousel-item">
|
||||
<Illustration image="boy-girl.svg" class="d-block mx-auto" height="350" />
|
||||
</div>
|
||||
<div class="carousel-item">
|
||||
<Illustration image="computer-fix.svg" class="d-block mx-auto" height="350" />
|
||||
</div>
|
||||
<a slot="controls" class="carousel-control-prev text-secondary" href="#carousel-controls" role="button" data-bs-slide="prev">
|
||||
<Icon name="chevron-left" class="icon-md" />
|
||||
<span class="visually-hidden">Previous</span>
|
||||
</button>
|
||||
<button type="button" class="carousel-control-next text-secondary" data-bs-target="#carousel-controls" data-bs-slide="next">
|
||||
</a>
|
||||
<a slot="controls" class="carousel-control-next text-secondary" href="#carousel-controls" role="button" data-bs-slide="next">
|
||||
<Icon name="chevron-right" class="icon-md" />
|
||||
<span class="visually-hidden">Next</span>
|
||||
</button>
|
||||
</div>
|
||||
</a>
|
||||
</Carousel>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -9,18 +9,20 @@ interface Props {
|
||||
smallLogo?: boolean
|
||||
hideLogo?: boolean
|
||||
showTitle?: boolean
|
||||
/** neutral gray mark + text instead of the live brand color (e.g. screenshot watermarks) */
|
||||
gray?: boolean
|
||||
}
|
||||
|
||||
const { href = '.', class: className, header = false, smallLogo = false, hideLogo = false, showTitle = false } = Astro.props
|
||||
const { href = '.', class: className, header = false, smallLogo = false, hideLogo = false, showTitle = false, gray = false } = Astro.props
|
||||
|
||||
const brandClasses = ['navbar-brand navbar-brand-autodark', className]
|
||||
const brandClasses = ['navbar-brand navbar-brand-autodark', gray && 'navbar-brand-gray', className]
|
||||
const logoClass = `navbar-brand-image${showTitle ? ' me-3' : ''}`
|
||||
|
||||
const logoMark =
|
||||
'<path d="M64.6 16.2C63 9.9 58.1 5 51.8 3.4 40 1.5 28 1.5 16.2 3.4 9.9 5 5 9.9 3.4 16.2 1.5 28 1.5 40 3.4 51.8 5 58.1 9.9 63 16.2 64.6c11.8 1.9 23.8 1.9 35.6 0C58.1 63 63 58.1 64.6 51.8c1.9-11.8 1.9-23.8 0-35.6zM33.3 36.3c-2.8 4.4-6.6 8.2-11.1 11-1.5.9-3.3.9-4.8.1s-2.4-2.3-2.5-4c0-1.7.9-3.3 2.4-4.1 2.3-1.4 4.4-3.2 6.1-5.3-1.8-2.1-3.8-3.8-6.1-5.3-2.3-1.3-3-4.2-1.7-6.4s4.3-2.9 6.5-1.6c4.5 2.8 8.2 6.5 11.1 10.9 1 1.4 1 3.3.1 4.7zM49.2 46H37.8c-2.1 0-3.8-1-3.8-3s1.7-3 3.8-3h11.4c2.1 0 3.8 1 3.8 3s-1.7 3-3.8 3z" fill="#066fd1" style="fill: var(--tblr-primary, #066fd1)" />'
|
||||
'<path d="M64.6 16.2C63 9.9 58.1 5 51.8 3.4 40 1.5 28 1.5 16.2 3.4 9.9 5 5 9.9 3.4 16.2 1.5 28 1.5 40 3.4 51.8 5 58.1 9.9 63 16.2 64.6c11.8 1.9 23.8 1.9 35.6 0C58.1 63 63 58.1 64.6 51.8c1.9-11.8 1.9-23.8 0-35.6zM33.3 36.3c-2.8 4.4-6.6 8.2-11.1 11-1.5.9-3.3.9-4.8.1s-2.4-2.3-2.5-4c0-1.7.9-3.3 2.4-4.1 2.3-1.4 4.4-3.2 6.1-5.3-1.8-2.1-3.8-3.8-6.1-5.3-2.3-1.3-3-4.2-1.7-6.4s4.3-2.9 6.5-1.6c4.5 2.8 8.2 6.5 11.1 10.9 1 1.4 1 3.3.1 4.7zM49.2 46H37.8c-2.1 0-3.8-1-3.8-3s1.7-3 3.8-3h11.4c2.1 0 3.8 1 3.8 3s-1.7 3-3.8 3z" fill="#066fd1" style="fill: var(--tblr-navbar-logo-color, var(--tblr-primary, #066fd1))" />'
|
||||
|
||||
const logoText =
|
||||
'<path d="M105.8 46.1c.4 0 .9.2 1.2.6s.6 1 .6 1.7c0 .9-.5 1.6-1.4 2.2s-2 .9-3.2.9c-2 0-3.7-.4-5-1.3s-2-2.6-2-5.4V31.6h-2.2c-.8 0-1.4-.3-1.9-.8s-.9-1.1-.9-1.9c0-.7.3-1.4.8-1.8s1.2-.7 1.9-.7h2.2v-3.1c0-.8.3-1.5.8-2.1s1.3-.8 2.1-.8 1.5.3 2 .8.8 1.3.8 2.1v3.1h3.4c.8 0 1.4.3 1.9.8s.8 1.2.8 1.9-.3 1.4-.8 1.8-1.2.7-1.9.7h-3.4v13c0 .7.2 1.2.5 1.5s.8.5 1.4.5c.3 0 .6-.1 1.1-.2.5-.2.8-.3 1.2-.3zm28-20.7c.8 0 1.5.3 2.1.8.5.5.8 1.2.8 2.1v20.3c0 .8-.3 1.5-.8 2.1-.5.6-1.2.8-2.1.8s-1.5-.3-2-.8-.8-1.2-.8-2.1c-.8.9-1.9 1.7-3.2 2.4-1.3.7-2.8 1-4.3 1-2.2 0-4.2-.6-6-1.7-1.8-1.1-3.2-2.7-4.2-4.7s-1.6-4.3-1.6-6.9c0-2.6.5-4.9 1.5-6.9s2.4-3.6 4.2-4.8c1.8-1.1 3.7-1.7 5.9-1.7 1.5 0 3 .3 4.3.8 1.3.6 2.5 1.3 3.4 2.1 0-.8.3-1.5.8-2.1.5-.5 1.2-.7 2-.7zm-9.7 21.3c2.1 0 3.8-.8 5.1-2.3s2-3.4 2-5.7-.7-4.2-2-5.8c-1.3-1.5-3-2.3-5.1-2.3-2 0-3.7.8-5 2.3-1.3 1.5-2 3.5-2 5.8s.6 4.2 1.9 5.7 3 2.3 5.1 2.3zm32.1-21.3c2.2 0 4.2.6 6 1.7 1.8 1.1 3.2 2.7 4.2 4.7s1.6 4.3 1.6 6.9-.5 4.9-1.5 6.9-2.4 3.6-4.2 4.8c-1.8 1.1-3.7 1.7-5.9 1.7-1.5 0-3-.3-4.3-.9s-2.5-1.4-3.4-2.3v.3c0 .8-.3 1.5-.8 2.1-.5.6-1.2.8-2.1.8s-1.5-.3-2.1-.8c-.5-.5-.8-1.2-.8-2.1V18.9c0-.8.3-1.5.8-2.1.5-.6 1.2-.8 2.1-.8s1.5.3 2.1.8c.5.6.8 1.3.8 2.1v10c.8-1 1.8-1.8 3.2-2.5 1.3-.7 2.8-1 4.3-1zm-.7 21.3c2 0 3.7-.8 5-2.3s2-3.5 2-5.8-.6-4.2-1.9-5.7-3-2.3-5.1-2.3-3.8.8-5.1 2.3-2 3.4-2 5.7.7 4.2 2 5.8c1.3 1.6 3 2.3 5.1 2.3zm23.6 1.9c0 .8-.3 1.5-.8 2.1s-1.3.8-2.1.8-1.5-.3-2-.8-.8-1.3-.8-2.1V18.9c0-.8.3-1.5.8-2.1s1.3-.8 2.1-.8 1.5.3 2 .8.8 1.3.8 2.1v29.7zm29.3-10.5c0 .8-.3 1.4-.9 1.9-.6.5-1.2.7-2 .7h-15.8c.4 1.9 1.3 3.4 2.6 4.4 1.4 1.1 2.9 1.6 4.7 1.6 1.3 0 2.3-.1 3.1-.4.7-.2 1.3-.5 1.8-.8.4-.3.7-.5.9-.6.6-.3 1.1-.4 1.6-.4.7 0 1.2.2 1.7.7s.7 1 .7 1.7c0 .9-.4 1.6-1.3 2.4-.9.7-2.1 1.4-3.6 1.9s-3 .8-4.6.8c-2.7 0-5-.6-7-1.7s-3.5-2.7-4.6-4.6-1.6-4.2-1.6-6.6c0-2.8.6-5.2 1.7-7.2s2.7-3.7 4.6-4.8 3.9-1.7 6-1.7 4.1.6 6 1.7 3.4 2.7 4.5 4.7c.9 1.9 1.5 4.1 1.5 6.3zm-12.2-7.5c-3.7 0-5.9 1.7-6.6 5.2h12.6v-.3c-.1-1.3-.8-2.5-2-3.5s-2.5-1.4-4-1.4zm30.3-5.2c1 0 1.8.3 2.4.8.7.5 1 1.2 1 1.9 0 1-.3 1.7-.8 2.2-.5.5-1.1.8-1.8.7-.5 0-1-.1-1.6-.3-.2-.1-.4-.1-.6-.2-.4-.1-.7-.1-1.1-.1-.8 0-1.6.3-2.4.8s-1.4 1.3-1.9 2.3-.7 2.3-.7 3.7v11.4c0 .8-.3 1.5-.8 2.1-.5.6-1.2.8-2.1.8s-1.5-.3-2.1-.8c-.5-.6-.8-1.3-.8-2.1V28.8c0-.8.3-1.5.8-2.1.5-.6 1.2-.8 2.1-.8s1.5.3 2.1.8c.5.6.8 1.3.8 2.1v.6c.7-1.3 1.8-2.3 3.2-3 1.3-.7 2.8-1 4.3-1z" fill-rule="evenodd" clip-rule="evenodd" fill="#4a4a4a"/>'
|
||||
'<path d="M105.8 46.1c.4 0 .9.2 1.2.6s.6 1 .6 1.7c0 .9-.5 1.6-1.4 2.2s-2 .9-3.2.9c-2 0-3.7-.4-5-1.3s-2-2.6-2-5.4V31.6h-2.2c-.8 0-1.4-.3-1.9-.8s-.9-1.1-.9-1.9c0-.7.3-1.4.8-1.8s1.2-.7 1.9-.7h2.2v-3.1c0-.8.3-1.5.8-2.1s1.3-.8 2.1-.8 1.5.3 2 .8.8 1.3.8 2.1v3.1h3.4c.8 0 1.4.3 1.9.8s.8 1.2.8 1.9-.3 1.4-.8 1.8-1.2.7-1.9.7h-3.4v13c0 .7.2 1.2.5 1.5s.8.5 1.4.5c.3 0 .6-.1 1.1-.2.5-.2.8-.3 1.2-.3zm28-20.7c.8 0 1.5.3 2.1.8.5.5.8 1.2.8 2.1v20.3c0 .8-.3 1.5-.8 2.1-.5.6-1.2.8-2.1.8s-1.5-.3-2-.8-.8-1.2-.8-2.1c-.8.9-1.9 1.7-3.2 2.4-1.3.7-2.8 1-4.3 1-2.2 0-4.2-.6-6-1.7-1.8-1.1-3.2-2.7-4.2-4.7s-1.6-4.3-1.6-6.9c0-2.6.5-4.9 1.5-6.9s2.4-3.6 4.2-4.8c1.8-1.1 3.7-1.7 5.9-1.7 1.5 0 3 .3 4.3.8 1.3.6 2.5 1.3 3.4 2.1 0-.8.3-1.5.8-2.1.5-.5 1.2-.7 2-.7zm-9.7 21.3c2.1 0 3.8-.8 5.1-2.3s2-3.4 2-5.7-.7-4.2-2-5.8c-1.3-1.5-3-2.3-5.1-2.3-2 0-3.7.8-5 2.3-1.3 1.5-2 3.5-2 5.8s.6 4.2 1.9 5.7 3 2.3 5.1 2.3zm32.1-21.3c2.2 0 4.2.6 6 1.7 1.8 1.1 3.2 2.7 4.2 4.7s1.6 4.3 1.6 6.9-.5 4.9-1.5 6.9-2.4 3.6-4.2 4.8c-1.8 1.1-3.7 1.7-5.9 1.7-1.5 0-3-.3-4.3-.9s-2.5-1.4-3.4-2.3v.3c0 .8-.3 1.5-.8 2.1-.5.6-1.2.8-2.1.8s-1.5-.3-2.1-.8c-.5-.5-.8-1.2-.8-2.1V18.9c0-.8.3-1.5.8-2.1.5-.6 1.2-.8 2.1-.8s1.5.3 2.1.8c.5.6.8 1.3.8 2.1v10c.8-1 1.8-1.8 3.2-2.5 1.3-.7 2.8-1 4.3-1zm-.7 21.3c2 0 3.7-.8 5-2.3s2-3.5 2-5.8-.6-4.2-1.9-5.7-3-2.3-5.1-2.3-3.8.8-5.1 2.3-2 3.4-2 5.7.7 4.2 2 5.8c1.3 1.6 3 2.3 5.1 2.3zm23.6 1.9c0 .8-.3 1.5-.8 2.1s-1.3.8-2.1.8-1.5-.3-2-.8-.8-1.3-.8-2.1V18.9c0-.8.3-1.5.8-2.1s1.3-.8 2.1-.8 1.5.3 2 .8.8 1.3.8 2.1v29.7zm29.3-10.5c0 .8-.3 1.4-.9 1.9-.6.5-1.2.7-2 .7h-15.8c.4 1.9 1.3 3.4 2.6 4.4 1.4 1.1 2.9 1.6 4.7 1.6 1.3 0 2.3-.1 3.1-.4.7-.2 1.3-.5 1.8-.8.4-.3.7-.5.9-.6.6-.3 1.1-.4 1.6-.4.7 0 1.2.2 1.7.7s.7 1 .7 1.7c0 .9-.4 1.6-1.3 2.4-.9.7-2.1 1.4-3.6 1.9s-3 .8-4.6.8c-2.7 0-5-.6-7-1.7s-3.5-2.7-4.6-4.6-1.6-4.2-1.6-6.6c0-2.8.6-5.2 1.7-7.2s2.7-3.7 4.6-4.8 3.9-1.7 6-1.7 4.1.6 6 1.7 3.4 2.7 4.5 4.7c.9 1.9 1.5 4.1 1.5 6.3zm-12.2-7.5c-3.7 0-5.9 1.7-6.6 5.2h12.6v-.3c-.1-1.3-.8-2.5-2-3.5s-2.5-1.4-4-1.4zm30.3-5.2c1 0 1.8.3 2.4.8.7.5 1 1.2 1 1.9 0 1-.3 1.7-.8 2.2-.5.5-1.1.8-1.8.7-.5 0-1-.1-1.6-.3-.2-.1-.4-.1-.6-.2-.4-.1-.7-.1-1.1-.1-.8 0-1.6.3-2.4.8s-1.4 1.3-1.9 2.3-.7 2.3-.7 3.7v11.4c0 .8-.3 1.5-.8 2.1-.5.6-1.2.8-2.1.8s-1.5-.3-2.1-.8c-.5-.6-.8-1.3-.8-2.1V28.8c0-.8.3-1.5.8-2.1.5-.6 1.2-.8 2.1-.8s1.5.3 2.1.8c.5.6.8 1.3.8 2.1v.6c.7-1.3 1.8-2.3 3.2-3 1.3-.7 2.8-1 4.3-1z" fill-rule="evenodd" clip-rule="evenodd" fill="#4a4a4a" style="fill: var(--tblr-navbar-logo-color, #4a4a4a)"/>'
|
||||
|
||||
const logoSvg = smallLogo ? `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 68 68" width="32" height="32" aria-label="${site.title}" class="${logoClass}">${logoMark}</svg>` : `<svg xmlns="http://www.w3.org/2000/svg" width="110" height="32" viewBox="0 0 232 68" class="${logoClass}">${logoMark}${logoText}</svg>`
|
||||
---
|
||||
@@ -7,7 +7,7 @@
|
||||
// fluidSearch has no effect on output (search in the condensed branch is dead
|
||||
// code); the prop is kept for call-site compatibility.
|
||||
import Icon from '@ui/Icon.astro';
|
||||
import NavbarLogo from './NavbarLogo.astro';
|
||||
import Logo from './Logo.astro';
|
||||
import NavbarToggler from './NavbarToggler.astro';
|
||||
import NavbarSide from './NavbarSide.astro';
|
||||
import NavbarMenu from './NavbarMenu.astro';
|
||||
@@ -90,7 +90,7 @@ const headerClass = [
|
||||
|
||||
{
|
||||
!hideBrand && (
|
||||
<NavbarLogo
|
||||
<Logo
|
||||
header
|
||||
class="d-none-navbar-horizontal pe-0 pe-md-3"
|
||||
smallLogo={smallLogo}
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
---
|
||||
import NavbarToggler from './NavbarToggler.astro'
|
||||
import NavbarLogo from './NavbarLogo.astro'
|
||||
import Logo from './Logo.astro'
|
||||
import NavbarSide from './NavbarSide.astro'
|
||||
import NavbarMenu from './NavbarMenu.astro'
|
||||
|
||||
@@ -25,7 +25,7 @@ const asideClass = ['navbar navbar-vertical', end && 'navbar-end', `navbar-expan
|
||||
<div class="container-fluid">
|
||||
<NavbarToggler target="sidebar-menu" />
|
||||
|
||||
<NavbarLogo header />
|
||||
<Logo header />
|
||||
|
||||
{/* Only the Sponsor button renders (no show-* flags). */}
|
||||
<NavbarSide class="d-lg-none" breakpoint={breakpoint} />
|
||||
|
||||
@@ -3,6 +3,8 @@
|
||||
import Avatar from '@ui/Avatar.astro'
|
||||
import AvatarList from '@ui/AvatarList.astro'
|
||||
import Icon from '@ui/Icon.astro'
|
||||
import Datagrid from '@ui/Datagrid.astro'
|
||||
import DatagridItem from '@ui/DatagridItem.astro'
|
||||
import people from '@data/people.json'
|
||||
|
||||
interface Person {
|
||||
@@ -14,72 +16,36 @@ interface Person {
|
||||
const creator = (people as Person[])[0]
|
||||
---
|
||||
|
||||
<div class="datagrid">
|
||||
<div class="datagrid-item">
|
||||
<div class="datagrid-title">Registrar</div>
|
||||
<div class="datagrid-content">Third Party</div>
|
||||
</div>
|
||||
<div class="datagrid-item">
|
||||
<div class="datagrid-title">Nameservers</div>
|
||||
<div class="datagrid-content">Third Party</div>
|
||||
</div>
|
||||
<div class="datagrid-item">
|
||||
<div class="datagrid-title">Port number</div>
|
||||
<div class="datagrid-content">3306</div>
|
||||
</div>
|
||||
<div class="datagrid-item">
|
||||
<div class="datagrid-title">Expiration date</div>
|
||||
<div class="datagrid-content">–</div>
|
||||
</div>
|
||||
<div class="datagrid-item">
|
||||
<div class="datagrid-title">Creator</div>
|
||||
<div class="datagrid-content">
|
||||
<div class="d-flex align-items-center">
|
||||
<Avatar person={creator} size="xs" class="me-2" />
|
||||
{creator.full_name}
|
||||
</div>
|
||||
<Datagrid>
|
||||
<DatagridItem title="Registrar">Third Party</DatagridItem>
|
||||
<DatagridItem title="Nameservers">Third Party</DatagridItem>
|
||||
<DatagridItem title="Port number">3306</DatagridItem>
|
||||
<DatagridItem title="Expiration date">–</DatagridItem>
|
||||
<DatagridItem title="Creator">
|
||||
<div class="d-flex align-items-center">
|
||||
<Avatar person={creator} size="xs" class="me-2" />
|
||||
{creator.full_name}
|
||||
</div>
|
||||
</div>
|
||||
<div class="datagrid-item">
|
||||
<div class="datagrid-title">Age</div>
|
||||
<div class="datagrid-content">15 days</div>
|
||||
</div>
|
||||
<div class="datagrid-item">
|
||||
<div class="datagrid-title">Edge network</div>
|
||||
<div class="datagrid-content">
|
||||
<span class="status status-green"> Active </span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="datagrid-item">
|
||||
<div class="datagrid-title">Avatars list</div>
|
||||
<div class="datagrid-content">
|
||||
<AvatarList stacked={true} size="xs" text="+3" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="datagrid-item">
|
||||
<div class="datagrid-title">Checkbox</div>
|
||||
<div class="datagrid-content">
|
||||
<label class="form-check">
|
||||
<input class="form-check-input" type="checkbox" checked />
|
||||
<span class="form-check-label">Click me</span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="datagrid-item">
|
||||
<div class="datagrid-title">Icon</div>
|
||||
<div class="datagrid-content">
|
||||
<Icon name="check" color="green" />
|
||||
Checked
|
||||
</div>
|
||||
</div>
|
||||
<div class="datagrid-item">
|
||||
<div class="datagrid-title">Form control</div>
|
||||
<div class="datagrid-content">
|
||||
<input type="text" class="form-control form-control-flush" placeholder="Input placeholder" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="datagrid-item">
|
||||
<div class="datagrid-title">Longer description</div>
|
||||
<div class="datagrid-content">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</div>
|
||||
</div>
|
||||
</div>
|
||||
</DatagridItem>
|
||||
<DatagridItem title="Age">15 days</DatagridItem>
|
||||
<DatagridItem title="Edge network">
|
||||
<span class="status status-green"> Active </span>
|
||||
</DatagridItem>
|
||||
<DatagridItem title="Avatars list">
|
||||
<AvatarList stacked={true} size="xs" text="+3" />
|
||||
</DatagridItem>
|
||||
<DatagridItem title="Checkbox">
|
||||
<label class="form-check">
|
||||
<input class="form-check-input" type="checkbox" checked />
|
||||
<span class="form-check-label">Click me</span>
|
||||
</label>
|
||||
</DatagridItem>
|
||||
<DatagridItem title="Icon">
|
||||
<Icon name="check" color="green" />
|
||||
Checked
|
||||
</DatagridItem>
|
||||
<DatagridItem title="Form control">
|
||||
<input type="text" class="form-control form-control-flush" placeholder="Input placeholder" />
|
||||
</DatagridItem>
|
||||
<DatagridItem title="Longer description">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</DatagridItem>
|
||||
</Datagrid>
|
||||
|
||||
Reference in New Issue
Block a user