align copy buttons to flex-start + always visible (skrub-data#1086)

* align copy buttons to flex-start + always visible * move copybuttons on the left
jeromedockes · Sep 24, 2024 · 91d1f05 · 91d1f05
1 parent 4184f97
commit 91d1f05
Show file tree

Hide file tree

Showing 2 changed files with 24 additions and 17 deletions.
diff --git a/skrub/_reporting/_data/templates/buttons.html b/skrub/_reporting/_data/templates/buttons.html
@@ -1,6 +1,6 @@
 {% macro copybutton(target) %}
 <button
-    class="copybutton"
+    class="copybutton copybutton-left"
     type="button"
     onclick="copyButtonClick(event)"
     data-target-id="{{ target }}">

diff --git a/skrub/_reporting/_data/templates/copybutton.css b/skrub/_reporting/_data/templates/copybutton.css
@@ -23,19 +23,32 @@
 }
 
 .copybutton {
-    margin-left: -2rem;
+    margin: 1px;
     min-width: 2rem;
-    display: none;
+    min-height: calc(1.8rem - 4px);
+    display: inline-block;
     padding: var(--micro);
     padding-left: var(--tiny);
     padding-right: var(--tiny);
     border: none;
-    background: var(--lightg);
     position: relative;
+    align-self: flex-start;
 }
 
-.copybutton[data-show-checkmark]{
-    display: inline-block;
+.copybutton-left {
+    order: -1;
+}
+
+.copybutton {
+    background: #e0e0e0;
+}
+
+.copybutton:hover {
+    background: #eee;
+}
+
+.copybutton:active {
+    background: #cccccc;
 }
 
 .copybutton:not([data-show-checkmark]) > :not(:first-child) {
@@ -53,22 +66,16 @@
     padding: 5px;
     border-radius: var(--radius, 5px);
     position: absolute;
-    right: calc(100% + 5px);
-    top: 3px;
+    top: 1px;
     margin: 0;
+    right: calc(100% + 5px);
 }
 
-.box:hover .copybutton {
-    display: inline-block;
-    background: var(--lightg);
-}
-
-.box:hover .copybutton:hover {
-    display: inline-block;
-    background: var(--mediumg);
+.copybutton-left .copied-message {
+    left: calc(100% + 5px);
+    right: auto;
 }
 
-
 [data-shows-placeholder] {
     color: #777777;
 }