Add style

renuo · Nov 5, 2024 · 625a379 · 625a379
1 parent cbcdeef
commit 625a379
Show file tree

Hide file tree

Showing 6 changed files with 65 additions and 57 deletions.
diff --git a/app/assets/stylesheets/hotsheet/application.css b/app/assets/stylesheets/hotsheet/application.css
@@ -8,44 +8,45 @@
  */
 
 :root {
-  --sidebar-width: 300px;
-  --table-border-color: #E0E1DD;
-  --table-header-bg-color: #778DA9;
+  --bg-color: lightgray;
+  --sidebar-width: 12rem;
 }
 
 body {
-  font-family: 'Montserrat', sans-serif;
+  font: 400 16px system-ui, Roboto, Helvetica, Arial, sans-serif;
+  margin: 0;
 }
 
 main {
   margin-left: var(--sidebar-width);
-  padding: 1rem 2rem;
+  padding: 1rem;
 }
 
-.sidebar {
-  width: var(--sidebar-width);
+aside {
+  background-color: var(--bg-color);
+  border-right: 1px solid gray;
+  height: 100%;
+  left: 0;
+  overflow-y: auto;
   position: fixed;
   top: 0;
-  bottom: 0;
-  left: 0;
-  z-index: 1000;
-  background-color: lightgray;
-  border-right: 1px solid gray;
+  width: var(--sidebar-width);
 
-  .nav-list {
+  ul {
     display: flex;
     flex-direction: column;
-    gap: 0.5rem;
-    list-style: none;
-    padding: 1rem 0.5rem;
+    margin: 0;
+    padding: 0.25rem;
 
-    .nav-item {
-      padding: 0.5rem 2rem;
-      border-radius: 5px;
-      text-decoration: none;
+    a {
+      border-radius: 0.5rem;
       color: green;
-      font-weight: bold;
-      font-size: 1.5rem;
+      font-weight: 700;
+      overflow: hidden;
+      padding: 0.5rem;
+      text-decoration: none;
+      text-overflow: ellipsis;
+      white-space: nowrap;
 
       &:hover {
         background-color: darkgray;
@@ -54,29 +55,32 @@ main {
   }
 }
 
+h1 {
+  margin: 0 0 1rem 0;
+}
 
 table {
   border-collapse: collapse;
 
-  th {
-    background-color: var(--table-border-color);
-    border-color: black;
+  th,
+  td {
+    border: 1px solid var(--bg-color);
+    padding: 0.5rem;
     text-align: left;
   }
 
-  th, td {
-    border: 1px solid var(--table-border-color);
-    padding: .5rem;
+  th {
+    background-color: var(--bg-color);
   }
 
   .readonly-attribute {
-    min-width: 1rem;
     min-height: 1rem;
+    min-width: 1rem;
   }
 
   .editable-input {
-    border: none;
     background-color: transparent;
+    border: none;
     width: 100%;
   }
 }
diff --git a/app/views/hotsheet/pages/_editable_attribute.html.erb b/app/views/hotsheet/pages/_editable_attribute.html.erb
@@ -0,0 +1,23 @@
+<%# locals: (attribute:, record:) %>
+
+<%= turbo_frame_tag "#{dom_id record}-#{attribute}" do %>
+  <div data-controller="editable-attribute"
+      data-editable-attribute-broadcast-url-value="<%= broadcast_edit_intent_path %>"
+      data-editable-attribute-resource-name-value="<%= record.class.name.downcase %>"
+      data-editable-attribute-resource-id-value="<%= record.id %>">
+    <div class="readonly-attribute"
+        data-editable-attribute-target="readonlyAttribute"
+        data-action="click->editable-attribute#displayInputField">
+      <%= record.public_send attribute %>
+    </div>
+
+    <div data-editable-attribute-target="attributeForm" style="display:none">
+      <%= form_for record do |f| %>
+        <%= f.text_field attribute, class: "editable-input", data: {
+          editable_attribute_target: "attributeFormInput",
+          action: "keydown.enter->editable-attribute#submitForm blur->editable-attribute#submitForm"
+        } %>
+      <% end %>
+    </div>
+  </div>
+<% end %>
diff --git a/app/views/hotsheet/pages/index.html.erb b/app/views/hotsheet/pages/index.html.erb
@@ -16,7 +16,7 @@
         <tr>
           <% @model.editable_attributes.each do |attribute| %>
             <td>
-              <%= render "hotsheet/shared/inline_editable_value", object: record, attribute: attribute %>
+              <%= render "editable_attribute", record: record, attribute: attribute %>
             </td>
           <% end %>
         </tr>

diff --git a/app/views/hotsheet/shared/_inline_editable_value.html.erb b/app/views/hotsheet/shared/_inline_editable_value.html.erb
diff --git a/app/views/layouts/hotsheet/_sidebar.html.erb b/app/views/layouts/hotsheet/_sidebar.html.erb
@@ -1,11 +1,10 @@
 <%# locals: () %>
 
-<aside class="sidebar">
+<aside>
   <nav>
-    <ul class="nav-list">
-      <%= link_to t("home"), root_path, class: "nav-item" %>
+    <ul>
       <% Hotsheet.models.each do |model| %>
-        <%= link_to model.model_name.human, hotsheet_model_path(model), class: "nav-item" %>
+        <%= link_to model.model_name.human, hotsheet_model_path(model) %>
       <% end %>
     </ul>
   </nav>

diff --git a/app/views/layouts/hotsheet/application.html.erb b/app/views/layouts/hotsheet/application.html.erb
@@ -1,8 +1,11 @@
 <!DOCTYPE html>
-<html>
+<html lang="<%= I18n.locale %>">
   <head>
     <title>Hotsheet</title>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width,initial-scale=1">
     <meta name="robots" content="noindex,nofollow">
+    <meta name="turbo-prefetch" content="false">
     <%= csrf_meta_tags %>
     <%= csp_meta_tag %>
     <%= stylesheet_link_tag "hotsheet/application" %>