rooty/Bootstrap
0
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2024-11-28 10:24:19 +01:00
Code Issues Actions Packages Releases Activity

Change example focus order

Browse Source
This commit is contained in:
Louis-Maxime Piton 2024-10-24 12:24:21 +02:00
parent 88bb06b8cc
commit aa5ef21619
5 changed files with 27 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
site/assets/js/partials/code-examples.js
View File

@ -19,8 +19,8 @@ export default () => {
const btnEdit = 'Edit on StackBlitz'
const btnHtml = [
'<div class="bd-code-snippet">',
' <div class="bd-clipboard">',
'<div class="bd-code-snippet position-relative">',
' <div class="bd-clipboard position-absolute top-0 end-0">',
' <button type="button" class="btn-clipboard">',
' <svg class="bi" role="img" aria-label="Copy"><use xlink:href="#clipboard"/></svg>',
' </button>',
@ -34,7 +34,7 @@ export default () => {
// Ignore examples made by shortcode
if (!element.closest('.bd-example-snippet')) {
element.insertAdjacentHTML('beforebegin', btnHtml)
element.previousElementSibling.append(element)
element.previousElementSibling.prepend(element)
}
})

6
site/assets/scss/_component-examples.scss
View File

@ -3,6 +3,8 @@
//
.bd-code-snippet {
display: flex;
flex-direction: column;
margin: 0 ($bd-gutter-x * -.5) 1rem;
border: solid var(--bs-border-color);
border-width: 1px 0;
@ -392,7 +394,11 @@
}
.bd-file-ref {
position: relative;
.highlight-toolbar {
min-height: $spacer * 2.625;
@include media-breakpoint-up(md) {
@include border-top-radius(calc(var(--bs-border-radius) - 1px));
}

15
site/layouts/shortcodes/example.html
View File

@ -21,14 +21,20 @@
<div class="bd-example-snippet bd-code-snippet">
{{- if eq $show_preview true }}
<div{{ with $id }} id="{{ . }}"{{ end }} class="bd-example m-0 border-0{{ with $class }} {{ . }}{{ end }}">
<div{{ with $id }} id="{{ . }}"{{ end }} class="bd-example order-first m-0 border-0{{ with $class }} {{ . }}{{ end }}">
{{ $content }}
</div>
{{- end }}
{{- if eq $show_markup true -}}
{{- $content = replaceRE `<svg class="bd-placeholder-img(?:-lg)?(?: *?bd-placeholder-img-lg)? ?(.*?)".*?<\/svg>` `<img src="..." class="$1" alt="...">` $content -}}
{{- $content = replaceRE `<img class="bd-placeholder-img(?:-lg)?(?: *?bd-placeholder-img-lg)? ?(.*?)".*?>` `<img src="..." class="$1" alt="...">` $content -}}
{{- $content = replaceRE ` (class=" *?")` "" $content -}}
{{- highlight (trim $content "\n") $lang "" -}}
{{- if eq $show_preview true -}}
<div class="d-flex align-items-center highlight-toolbar ps-3 pe-2 py-1 border-0 border-top border-bottom">
<div class="d-flex order-first align-items-center highlight-toolbar ps-3 pe-2 py-1 border-0 border-top border-bottom">
<small class="font-monospace text-body-secondary text-uppercase">{{ $lang }}</small>
<div class="d-flex ms-auto">
<button type="button" class="btn-edit text-nowrap"{{ with $stackblitz_add_js }} data-sb-js-snippet="{{ $stackblitz_add_js }}"{{ end }} title="Try it on StackBlitz">
@ -40,10 +46,5 @@
</div>
</div>
{{- end -}}
{{- $content = replaceRE `<svg class="bd-placeholder-img(?:-lg)?(?: *?bd-placeholder-img-lg)? ?(.*?)".*?<\/svg>` `<img src="..." class="$1" alt="...">` $content -}}
{{- $content = replaceRE `<img class="bd-placeholder-img(?:-lg)?(?: *?bd-placeholder-img-lg)? ?(.*?)".*?>` `<img src="..." class="$1" alt="...">` $content -}}
{{- $content = replaceRE ` (class=" *?")` "" $content -}}
{{- highlight (trim $content "\n") $lang "" -}}
{{- end }}
</div>

11
site/layouts/shortcodes/js-docs.html
View File

@ -34,14 +34,9 @@
<div class="bd-example-snippet bd-code-snippet bd-file-ref">
<div class="d-flex align-items-center highlight-toolbar ps-3 pe-2 py-1 border-bottom">
<a class="font-monospace link-secondary link-underline-secondary link-underline-opacity-0 link-underline-opacity-100-hover small" href="{{ .Site.Params.repo }}/blob/v{{ .Site.Params.current_version }}/{{ $file | replaceRE `\\` "/" }}">
<a class="me-5 font-monospace link-secondary link-underline-secondary link-underline-opacity-0 link-underline-opacity-100-hover small" href="{{ .Site.Params.repo }}/blob/v{{ .Site.Params.current_version }}/{{ $file | replaceRE `\\` "/" }}">
{{- $file -}}
</a>
<div class="d-flex ms-auto">
<button type="button" class="btn-clipboard mt-0 me-0" title="Copy to clipboard">
<svg class="bi" aria-hidden="true"><use xlink:href="#clipboard"/></svg>
</button>
</div>
</div>
{{- $unindent := 0 -}}
@ -66,5 +61,9 @@
{{- $output = $match -}}
{{- end -}}
{{- highlight $output "js" "" -}}
<button type="button" class="btn-clipboard position-absolute top-0 mt-1 end-0 me-2" title="Copy to clipboard">
<svg class="bi" aria-hidden="true"><use xlink:href="#clipboard"/></svg>
</button>
</div>
{{- end -}}

11
site/layouts/shortcodes/scss-docs.html
View File

@ -47,14 +47,9 @@
<div class="bd-example-snippet bd-code-snippet bd-file-ref">
<div class="d-flex align-items-center highlight-toolbar ps-3 pe-2 py-1 border-bottom">
<a class="font-monospace link-secondary link-underline-secondary link-underline-opacity-0 link-underline-opacity-100-hover small" href="{{ .Site.Params.repo }}/blob/v{{ .Site.Params.current_version }}/{{ $file | replaceRE `\\` "/" }}">
<a class="me-5 font-monospace link-secondary link-underline-secondary link-underline-opacity-0 link-underline-opacity-100-hover small" href="{{ .Site.Params.repo }}/blob/v{{ .Site.Params.current_version }}/{{ $file | replaceRE `\\` "/" }}">
{{- $file -}}
</a>
<div class="d-flex ms-auto">
<button type="button" class="btn-clipboard mt-0 me-0" title="Copy to clipboard">
<svg class="bi" aria-hidden="true"><use xlink:href="#clipboard"/></svg>
</button>
</div>
</div>
{{- $unindent := 0 -}}
{{- $found := false -}}
@ -78,5 +73,9 @@
{{- $output = $match -}}
{{- end -}}
{{- highlight $output "scss" "" -}}
<button type="button" class="btn-clipboard position-absolute top-0 mt-1 end-0 me-2" title="Copy to clipboard">
<svg class="bi" aria-hidden="true"><use xlink:href="#clipboard"/></svg>
</button>
</div>
{{- end -}}