Command output and copy button layout tweaks.

fredrik-corneliusson · May 10, 2021 · 29a526f · 29a526f
1 parent 486c02a
commit 29a526f
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 7 deletions.
diff --git a/click_web/static/click_web.css b/click_web/static/click_web.css
@@ -71,13 +71,15 @@ input[type=number] {
  overflow: hidden;
 }
 
+
 .script-output-wrapper {
- border: 3px;
- border-style: dashed;
- border-color: rgba(0, 0, 0, 0.30);;
  display: block;
- min-height: 30px;
  margin-bottom: 1em;
+ border-style: dashed;
+ border-color: rgba(0, 0, 0, 0.30);
+ width: fit-content;
+ min-width: 98%;
+ min-height: 30px;
  padding: 7px;
 }
 
@@ -91,6 +93,10 @@ input[type=number] {
  border: none;
  opacity: 0.7;
  padding: .25rem .5rem;
+ position: -webkit-sticky;
+ position: sticky;
+ float: right;
+ top: 0px;
 }
 
 a:link {

diff --git a/click_web/templates/command_form.html.j2 b/click_web/templates/command_form.html.j2
@@ -50,12 +50,11 @@
 
 <div id="output-header" hidden="true"></div>
 
-<div class="script-output-wrapper" id="output-wrapper" hidden="true" style="position:relative">
+<div class="script-output-wrapper" id="output-wrapper" hidden="true">
  <button id="output-copy-button"
  class="btn-copy pure-button"
  type="button"
- onclick="copyOutputToClipboard()"
- style="position: -webkit-sticky; position: sticky; float: right; top: 0px;">Copy</button>
+ onclick="copyOutputToClipboard()">Copy</button>
  <div class="script-output" id="output"></div>
 </div>