Skip to content

Commit

Permalink
docs(cq): update demo and description
Browse files Browse the repository at this point in the history
This commit also updates the demo index.html to a fixed
version of Marked due to issues with v6.0.

markedjs/marked#2913

Changes to be committed:
modified:   demo/demo.md
modified:   demo/index.html
  • Loading branch information
blackfalcon committed Aug 2, 2023
1 parent 3c71d58 commit c9694fc
Show file tree
Hide file tree
Showing 2 changed files with 19 additions and 7 deletions.
24 changes: 18 additions & 6 deletions demo/demo.md
Original file line number Diff line number Diff line change
Expand Up @@ -221,12 +221,24 @@ The following illustrates a cancellation of international flight with stopovers

The `auro-flightline` element is reactive to its parent container's `width` value versus a `@media` query based on the device `width`. This allows for greater control over the shape of the element when in constrained spaces.

The default container query is a min-width of `414px`. This value can be edited using the `cq` attribute.
The default container query is a min-width of `320px`, or `var(--auro-grid-breakpoint-xs)`.

The first example illustrates a `auro-flightline` element with a container width of `400px`. The next `auro-flightline` element is within a container set at `100%` for context. Notice when the 100% container reaches a width of < `414px`, the container query switches the UI. The last example illustrates a `auro-flightline` element with a redefined `cq` value of `500px` and a container width of `75%`. Resize the screen to see it switch between a summarized and expanded view when its width reaches `500px`.
The first example illustrates a `auro-flightline` element with a container width of `300px`. The next `auro-flightline` element is within a container set at `100%` for context. Notice when the container reaches a width of < `320px`, the container query switches the UI.

<style>
.flightline-width {
width: 100%;
}

@media (min-width: 576px) {
.flightline-width {
width: 300px;
}
}
</style>

<div class="exampleWrapper">
<auro-flightline style="width: 400px">
<auro-flightline class="flightline-width">
<auro-flight-segment stopover iata="YAK"></auro-flight-segment>
<auro-flight-segment stopover iata="WRG"></auro-flight-segment>
<auro-flight-segment iata="SEA" duration="0h 40m"></auro-flight-segment>
Expand All @@ -246,7 +258,7 @@ The first example illustrates a `auro-flightline` element with a container width
</div>

<div class="exampleWrapper">
<auro-flightline cq="500" style="width: 75%">
<auro-flightline style="width: 60%">
<auro-flight-segment stopover iata="YAK"></auro-flight-segment>
<auro-flight-segment stopover iata="WRG"></auro-flight-segment>
<auro-flight-segment iata="SEA" duration="0h 40m"></auro-flight-segment>
Expand All @@ -259,7 +271,7 @@ The first example illustrates a `auro-flightline` element with a container width
<span slot="trigger">See code</span>

```html
<auro-flightline style="width: 400px">
<auro-flightline style="width: 300px">
<auro-flight-segment stopover iata="YAK"></auro-flight-segment>
<auro-flight-segment stopover iata="WRG"></auro-flight-segment>
<auro-flight-segment iata="SEA" duration="0h 40m"></auro-flight-segment>
Expand All @@ -275,7 +287,7 @@ The first example illustrates a `auro-flightline` element with a container width
<auro-flight-segment iata="DUB" duration="13h 40m"></auro-flight-segment>
</auro-flightline>

<auro-flightline cq="500" style="width: 75%">
<auro-flightline style="width: 75%">
<auro-flight-segment stopover iata="YAK"></auro-flight-segment>
<auro-flight-segment stopover iata="WRG"></auro-flight-segment>
<auro-flight-segment iata="SEA" duration="0h 40m"></auro-flight-segment>
Expand Down
2 changes: 1 addition & 1 deletion demo/index.html
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@
<main></main>

<script type="module">
import 'https://cdn.jsdelivr.net/npm/marked@latest/marked.min.js';
import 'https://cdn.jsdelivr.net/npm/marked@5.1.0/marked.min.js';
import 'https://cdn.jsdelivr.net/npm/prismjs@latest/prism.js';
fetch('/demo/demo.md')
.then((response) => response.text())
Expand Down

0 comments on commit c9694fc

Please sign in to comment.