fix css buttons ally

gip-inclusion · Feb 13, 2025 · c55c1ed · c55c1ed
1 parent 3225d9a
commit c55c1ed
Show file tree

Hide file tree

Showing 3 changed files with 56 additions and 9 deletions.
diff --git a/app/javascript/controllers/user_row_cell_controller.js b/app/javascript/controllers/user_row_cell_controller.js
@@ -12,6 +12,7 @@ export default class extends Controller {
     const html = await response.text();
     if (response.ok) {
       window.Turbo.renderStreamMessage(html);
+      this.element.style.padding = "0px"
     }
   }
 }
diff --git a/app/javascript/stylesheets/components/_form.scss b/app/javascript/stylesheets/components/_form.scss
@@ -137,3 +137,45 @@
     top: 5px;
   }
 }
+
+.edit-row-attribute {
+  height: 50px;
+  background: white;
+  border: 1px solid $light-grey;
+  display: flex;
+  align-items: center;
+  margin-left: 0px !important;
+  padding-right: 5px !important;
+
+  .input-group, input[type=text] {
+    border: none;
+    height: 100%;
+  }
+
+  .edit-buttons {
+    width: 45px;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-left: 0px !important;
+
+    button {
+      color: white;
+      border: none;
+      border-radius: 100%;
+      width: 20px;
+      height: 20px;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+    }
+
+    button:first-child {
+      background: $dark-blue;
+    }
+
+    button:last-child {
+      background: $orange;
+    }
+  }
+}
diff --git a/app/views/user_list_uploads/user_list_uploads/_edit_row_attribute.html.erb b/app/views/user_list_uploads/user_list_uploads/_edit_row_attribute.html.erb
@@ -7,6 +7,7 @@
     controller: "user-row-cell",
     action: "turbo:submit-start->user-row-cell#setLoading"
   },
+  class: 'edit-row-attribute',
   method: :patch
 ) do |form| %>
   <div class="input-group input-group-sm" data-turbo-prefetch="false">
@@ -15,16 +16,19 @@
     <% else %>
       <%= form.text_field "user_row[#{attribute}]",
                           value: user_row.user.send(attribute),
-                          class: "form-control" %>
+                          class: "form-control",
+                          autofocus: true %>
     <% end %>
-    <button type="submit">
-      <i class="ri-check-line text-success"></i>
-    </button>
+    <div class="edit-buttons">
+      <button type="submit">
+        <i class="ri-check-line"></i>
+      </button>
 
-    <button type="submit">
-      <%= link_to user_list_upload_user_row_path(user_list_upload_id: @user_list_upload.id, id: user_row.id) do %>
-        <i class="ri-close-line text-danger"></i>
-      <% end %>
-    </button>
+      <button type="submit">
+        <%= link_to user_list_upload_user_row_path(user_list_upload_id: @user_list_upload.id, id: user_row.id) do %>
+          <i class="ri-close-line"></i>
+        <% end %>
+      </button>
+    </div>
   </div>
 <% end %>