Change example focus order

twbs · Oct 24, 2024 · aa5ef21 · aa5ef21
1 parent 88bb06b
commit aa5ef21
Show file tree

Hide file tree

Showing 5 changed files with 27 additions and 22 deletions.
diff --git a/site/assets/js/partials/code-examples.js b/site/assets/js/partials/code-examples.js
@@ -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)
       }
     })
 

diff --git a/site/assets/scss/_component-examples.scss b/site/assets/scss/_component-examples.scss
@@ -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));
     }

diff --git a/site/layouts/shortcodes/example.html b/site/layouts/shortcodes/example.html
@@ -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>
diff --git a/site/layouts/shortcodes/js-docs.html b/site/layouts/shortcodes/js-docs.html
@@ -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 -}}
diff --git a/site/layouts/shortcodes/scss-docs.html b/site/layouts/shortcodes/scss-docs.html
@@ -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 -}}