Consistent approach and less ugly code imo

Orange-OpenSource · Oct 2, 2024 · 299da6f · 299da6f
1 parent a1732b9
commit 299da6f
Show file tree

Hide file tree

Showing 3 changed files with 26 additions and 20 deletions.
diff --git a/site/assets/scss/_component-examples.scss b/site/assets/scss/_component-examples.scss
@@ -396,7 +396,11 @@
 }
 
 .bd-file-ref {
+  position: relative;
+
   .highlight-toolbar {
+    min-height: $spacer * 2.5;
+
     @include media-breakpoint-up(md) {
       @include border-top-radius(calc(var(--bs-border-radius) - 1px));
     }

diff --git a/site/layouts/shortcodes/js-docs.html b/site/layouts/shortcodes/js-docs.html
@@ -33,9 +33,12 @@
   {{- end -}}
 
   <div class="bd-example-snippet bd-code-snippet bd-file-ref">
-    <a class="position-absolute ms-3 mt-2 py-1 font-monospace link-body-emphasis 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>
+    <!-- Boosted mod: added `.border-1` and `.border-subtle` -->
+    <div class="d-flex align-items-center highlight-toolbar ps-3 pe-2 py-1 border-bottom border-1 border-subtle">
+      <a class="me-5 font-monospace link-body-emphasis 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>
 
     {{- $unindent := 0 -}}
     {{- $found := false -}}
@@ -60,13 +63,10 @@
     {{- end -}}
     {{- highlight $output "js" "" -}}
 
-    <!-- Boosted mod: added `.border-1` and `.border-subtle` -->
-    <div class="d-flex order-first align-items-center highlight-toolbar ps-3 pe-2 py-1 border-bottom border-1 border-subtle">
-      <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 class="position-absolute top-0 mt-1 end-0 me-2">
+      <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>
 {{- end -}}
diff --git a/site/layouts/shortcodes/scss-docs.html b/site/layouts/shortcodes/scss-docs.html
@@ -46,6 +46,13 @@
   {{- end -}}
 
   <div class="bd-example-snippet bd-code-snippet bd-file-ref">
+    <!-- Boosted mod: added `.border-1` and `.border-subtle` -->
+    <div class="d-flex align-items-center highlight-toolbar ps-3 pe-2 py-1 border-bottom border-1 border-subtle">
+      <a class="me-5 font-monospace link-body-emphasis 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>
+
     {{- $unindent := 0 -}}
     {{- $found := false -}}
     {{- $first_line:= index (split $match "\n") 0 -}}
@@ -68,16 +75,11 @@
       {{- $output = $match -}}
     {{- end -}}
     {{- highlight $output "scss" "" -}}
-    <!-- Boosted mod: added `.border-1` and `.border-subtle` -->
-    <div class="d-flex order-first align-items-center highlight-toolbar ps-3 pe-2 py-1 border-bottom border-1 border-subtle">
-      <a class="font-monospace link-body-emphasis 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 class="position-absolute top-0 mt-1 end-0 me-2">
+      <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>
 {{- end -}}