UI polish

[asg017]

• Row icon is mis-aligned
• Row icon tooltip gets cuts off on last row
• Description to the edit/insert modals
• clicking outside modal should close it

[simonw]

I messed around with the buttons in DevTools a bit and came up with this:

.row-icon .menu button {
  display: block;
  margin-bottom: 0.3em;
  width: 100%;
}

And on the div.menu:

.row-icon .menu {
  display: block;
  padding: 0.3em 0.3em 0px;
  box-shadow: rgba(0, 0, 0, 0.2) 0px 0px 4px;
}

Definitely lots of room for improvement, but it's neater than what we have currently:

[asg017]

Added that CSS in the latest 0.0.1a7 release:

[asg017]

The td { white-space: nowrap !important;} part is complicated, without it it looks like:

Will need to figure out how to style row icons without breaking other tables. I think when we merge Javascript Plugins we can add row icons as a feature there, so we don't have to do style hacks in this plugin

[simonw]

This seems to work:

diff --git a/datasette_write_ui/static/table.css b/datasette_write_ui/static/table.css
index 1177b2d..69cdc65 100644
--- a/datasette_write_ui/static/table.css
+++ b/datasette_write_ui/static/table.css
@@ -33,15 +33,27 @@
   cursor: pointer;
 }
 
-.row-icon {
+td.type-pk {
   position: relative;
-  width: 1rem;
-  height: 1rem;
-  font-size: 1rem;
-  display: inline-block;
-  padding-right: 0.25rem;
+  padding-left: 1.5em;
+}
+
+.row-icon {
+  position: absolute;
+  left: 0;
+  top: 0.2em;
+  width: 1em;
+}
+@media only screen and (max-width: 576px) {
+  .row-icon {
+    top: 1.2em;
+  }
+  td.type-pk {
+    padding-left: 10%;
+  }
 }
 
+
 .row-icon .icon {
   background: none;
   border: none;
@@ -71,10 +83,6 @@
   cursor: pointer;
 }
 
-td {
-  white-space: nowrap !important;
-}
-
 .form-fields-container {
   display: grid;
   grid-template-columns: 200px auto;

PR incoming.