From 57c40aa1c43927342d63711c4b8e209190cb9bd1 Mon Sep 17 00:00:00 2001 From: ryan Date: Fri, 28 Feb 2025 15:40:24 +0300 Subject: [PATCH] styles(list): add initial styling to the ui --- assets/style.css | 351 +++++++++++++++++++++++------------ src/app.rs | 2 +- src/components/items_list.rs | 204 ++++++++++---------- 3 files changed, 340 insertions(+), 217 deletions(-) diff --git a/assets/style.css b/assets/style.css index e6da611..6f1ae18 100644 --- a/assets/style.css +++ b/assets/style.css @@ -1,158 +1,271 @@ +:root { + --primary: #2F3C7E; /* Deep navy */ + --secondary: #f8f9fa; /* Light gray */ + --accent: #dc3545; /* Alert red */ + --text: #212529; /* Dark gray */ + --border: #dee2e6; /* Light gray border */ + --hover-bg: #e9ecef; /* Medium gray */ + --success: #28a745; /* Green for positive actions */ +} + +/* Base Styles */ body { - font-family: Arial, sans-serif; - margin: 0; - padding: 0; - background-color: #f4f4f9; - color: #333; + font-family: 'Segoe UI', system-ui, sans-serif; + color: var(--text); + line-height: 1.6; + margin: 0; + padding: 2rem; + background: var(--secondary); } - +/* Header Styling */ h1 { - color: #1e88e5; - text-align: center; - margin-bottom: 20px; + color: var(--primary); + font-size: 2rem; + font-weight: 600; + text-align: center; } -form { - margin: 20px auto; - max-width: 600px; - padding: 20px; - background: white; - box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); - border-radius: 8px; -} - -form input, form textarea, form button { - display: block; - width: 100%; - margin-bottom: 15px; - padding: 10px; - font-size: 16px; - border: 1px solid #ccc; - border-radius: 4px; -} - -form button { - background-color: #1e88e5; - color: white; - border: none; - cursor: pointer; - transition: background-color 0.3s ease; -} - -form button:hover { - background-color: #1565c0; -} - -ul { - list-style: none; - padding: 0; -} - -ul li { - background: #fff; - margin: 10px 0; - padding: 15px; - border-radius: 5px; - box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); +h2, h3 { + color: var(--primary); + font-weight: 600; + margin-bottom: 1.5rem; } +/* Table Enhancements */ table { - width: 100%; - border-collapse: collapse; + width: 100%; + border-collapse: collapse; + background: white; + box-shadow: 0 1px 3px rgba(0,0,0,0.1); + border-radius: 8px; + overflow: hidden; } th, td { - border: 1px solid #ddd; - padding: 8px; + padding: 1.25rem 1.5rem;padding: 1rem; + text-align: left; + border-bottom: 1px solid var(--border); + position: relative; +} +th:not(:last-child), +td:not(:last-child) { + border-right: 1px solid var(--border); } - th { - background-color: #f2f2f2; + background: var(--primary); + color: white; + font-weight: 500; } -/* Style for the grid container */ -.grid-container { - display: grid; - grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); /* Adjust the minimum width for cells */ - gap: 1px; /* Gap between cells */ - background-color: #ccc;/* Grid line color */ - border: 1px solid #aaa; /* Outer border */ +tr:hover { + background: var(--hover-bg); +} +tr:last-child td { + border-bottom: none; } -/* Style for individual cells */ +/* Editable Cells */ .editable-cell { - display: flex; /* Use flexbox for better layout control */ - flex-direction: column; /* Stack children vertically */ - width: 100%; /* Full width of the allocated space */ - height: 100%; /* Full height of the allocated space */ - position: relative; /* Relative positioning for absolute children */ - box-sizing: border-box; /* Ensure padding and border are included in width/height */ + position: relative; } -/* Style for the input field inside the editable cell */ .editable-cell-input { - width: 100%; /* Ensure input takes up full width */ - height: 100%; /* Ensure input takes up full height */ - border: none; /* Remove input box borders */ - padding: 8px; /* Add padding for spacing */ - box-sizing: border-box; /* Ensure padding doesn't cause overflow */ - font-size: 14px; /* Adjust font size */ - text-align: left; /* Align text to the left */ - outline: none; /* Remove outline for better UI */ - background-color: transparent; /* Make background transparent */ + width: 100%; + border: none; + padding: 0.5rem; + background: transparent; + font: inherit; + color: inherit; + transition: background 0.2s; } -/* Style for the focused input field */ .editable-cell-input:focus { - background-color: #e0f7fa; /* Light blue background when focused */ - border: 1px solid #00796b; /* Green border when focused */ + outline: none; + background: rgba(47, 60, 126, 0.05); + border-radius: 4px; } -/* Style for the suggestions list */ +/* Suggestions List */ .editable-cell-suggestions { - position: absolute; /* Position suggestions absolutely within the cell */ - top: 100%; /* Place suggestions below the input field */ - left: 0; /* Align suggestions with the left edge of the cell */ - width: 100%; /* Full width of the cell */ - max-height: 200px; /* Limit height of suggestions list */ - overflow-y: auto; /* Add scrollbar if suggestions exceed max height */ - background-color: white; /* White background for suggestions */ - border: 1px solid #ddd; /* Light border for suggestions */ - z-index: 10; /* Ensure suggestions appear above other content */ - box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Add shadow for better visibility */ + position: absolute; + top: 100%; + left: 0; + margin-top: 0.5rem; + width: 100%; + z-index: 1000; + background: white; + box-shadow: 0 2px 8px rgba(0,0,0,0.1); + border-radius: 4px; + max-height: 200px; + overflow-y: auto; + padding: 0.5rem 0; } -/* Style for individual suggestion items */ -.editable-cell-suggestions li { - padding: 8px; /* Add padding for spacing */ - cursor: pointer; /* Change cursor to pointer on hover */ - border-bottom: 1px solid #eee; /* Add separator between items */ +.editable-cell-suggestions-li { + padding: 0.75rem 1rem; + cursor: pointer; + font-size: 0.9em; + color: var(--text); + transition: background 0.1s ease; } -.editable-cell-suggestions li:hover { - background-color: #f5f5f5; /* Light gray background on hover */ +.editable-cell-suggestions-li:hover { + background: var(--hover-bg); } -.search-icon { - margin-left: 10px; - padding: 5px; - border: none; - background-color: transparent; - cursor: pointer; +.editable-cell-suggestions .close-button { + position: absolute; + top: 0.75rem; + right: 0.75rem; + padding: 0.3rem; + background: none; + border: none; + color: var(--text); + cursor: pointer; + opacity: 0.6; + transition: opacity 0.2s; } -.search-icon i { - font-size: 18px; - color: #333; +.editable-cell-suggestions .close-button:hover { + opacity: 1; + color: var(--accent); } -.search-icon i.fas.fa-search { - margin-left: 5px; +/* Buttons & Icons */ +button { + background: var(--primary); + color: white; + border: none; + padding: 0.5rem 1rem; + border-radius: 4px; + cursor: pointer; + transition: opacity 0.2s; + display: inline-flex; + align-items: center; + gap: 0.5rem; +} +button:hover { + opacity: 0.9; +} +button.delete { + background: var(--accent); + color: white; + padding: 0.5rem 0.75rem; + border-radius: 4px; + margin-left: 1rem; + transition: all 0.2s ease; + display: inline-flex; + align-items: center; + gap: 0.5rem; +} +button.delete:hover { + background: #c82333; + transform: translateY(-1px); +} +button.delete::before { + content: "×"; + font-size: 1.25rem; + line-height: 1; } -.editable-cell-textarea { - width: 100%; - height: 100px; - resize: vertical; - overflow: auto; -} \ No newline at end of file +button.search-icon { + background: transparent; + color: var(--primary); + margin-left: 0.5rem; + padding: 0.5rem 0.75rem; + border: 1px solid var(--border); + border-radius: 4px; + transition: all 0.2s ease; + white-space: nowrap; +} + +button.search-icon:hover { + background: var(--hover-bg); + border-color: var(--primary); +} + +.fa-search { + font-size: 0.9em; +} + +/* Input Enhancements */ +input[type="text"], textarea { + border: 1px solid var(--border); + border-radius: 4px; + padding: 0.75rem; + width: 100%; + transition: border-color 0.2s; +} + +input[type="text"]:focus, textarea:focus { + border-color: var(--primary); + outline: none; +} + +/* Layout Improvements */ +.container { + max-width: 1200px; + margin: 0 auto; + padding: 2rem; +} +/* DataList Styling */ +datalist { + border: 1px solid var(--border); + border-radius: 6px; + margin-top: 0.5rem; +} +/* Add Property Section Styling */ +.add-property-section { + margin: 2rem 0; + padding: 1.5rem; + background: white; + border-radius: 8px; + box-shadow: 0 1px 3px rgba(0,0,0,0.04); +} + +#new-property { + border: 2px solid var(--border); + padding: 0.75rem 1rem; + border-radius: 6px; + width: 300px; + margin-right: 1rem; + transition: border-color 0.2s ease; +} + +#new-property:focus { + border-color: var(--primary); + outline: none; +} + +.add-property-button { + background: var(--primary); + color: white; + padding: 0.75rem 1.5rem; + border-radius: 6px; + transition: all 0.2s ease; +} + +.add-property-button:hover { + transform: translateY(-1px); + box-shadow: 0 2px 4px rgba(47, 60, 126, 0.1); +} + +/* Container for cell content */ +.cell-content { + overflow: hidden; + text-overflow:clip; + white-space: nowrap; + min-height: 2rem; + display: flex; + align-items: center; +} + +/* Container for name cell content */ +.name-cell-container { + position: relative; + display: flex; + flex-direction: column; + align-items: center; + gap: 0.5rem; + padding: 0.5rem 0; +} diff --git a/src/app.rs b/src/app.rs index 7a13fad..ac0b77b 100644 --- a/src/app.rs +++ b/src/app.rs @@ -48,7 +48,7 @@ pub fn App() -> impl IntoView { view! { -
+

{ "CompareWare" }

{ "Items List" }

- +
@@ -709,7 +709,7 @@ pub fn ItemsList( view! { } }).collect::>()} @@ -728,106 +728,116 @@ pub fn ItemsList(
{ "Property" } {item.name.clone()} - + {match property { "Name" => view! { -
- +
+ + - {move || { - if *show_suggestions.get().get(&format!("name-{}", index)).unwrap_or(&false) { - log!("Rendering suggestions list"); - view! { -
    - {move || { - let suggestions = wikidata_suggestions.get() - .get(&format!("name-{}", index)) - .cloned() - .unwrap_or_default(); - log!("Suggestions for cell {}: {:?}", index, suggestions); - suggestions.into_iter().map(|suggestion| { - let label_for_click = suggestion.label.clone(); - let label_for_display = suggestion.label.clone(); - let description_for_click = suggestion.description.clone().unwrap_or_default(); - let description_for_display = suggestion.description.clone().unwrap_or_default(); - let id = suggestion.id.clone(); - view! { -
  • + Search Wiki + + + {move || { + if *show_suggestions.get().get(&format!("name-{}", index)).unwrap_or(&false) { + log!("Rendering suggestions list"); + view! { +
      + {move || { + let suggestions = wikidata_suggestions.get() + .get(&format!("name-{}", index)) + .cloned() + .unwrap_or_default(); + log!("Suggestions for cell {}: {:?}", index, suggestions); + suggestions.into_iter().map(|suggestion| { + let label_for_click = suggestion.label.clone(); + let label_for_display = suggestion.label.clone(); + let description_for_click = suggestion.description.clone().unwrap_or_default(); + let description_for_display = suggestion.description.clone().unwrap_or_default(); + let id = suggestion.id.clone(); + view! { +
    • - { format!("{} - {}", label_for_display, description_for_display) } -
      • - } - }).collect::>() - }} -
    + + // Fetch additional properties from Wikidata + let wikidata_id = id.clone(); + spawn_local(async move { + let properties = fetch_item_properties(&wikidata_id).await; + // log!("Fetched properties for Wikidata ID {}: {:?}", wikidata_id, properties); + + // Populate the custom properties for the new item + set_items.update(|items| { + if let Some(item) = items.iter_mut().find(|item| item.wikidata_id.as_ref() == Some(&wikidata_id)) { + for (property, value) in properties { + item.custom_properties.insert(property, value); + } + } + }); + }); + + // Hide the suggestion list + set_show_suggestions.update(|suggestions| { + suggestions.insert(format!("name-{}", index), false); + log!("Updated show_suggestions: {:?}", suggestions); + }); + }> + + { format!("{} - {}", label_for_display, description_for_display) } +
    • + } + }).collect::>() + }} +
+ } + } else { + log!("Suggestions list hidden"); + view! { +
    + } } - } else { - log!("Suggestions list hidden"); - view! { -
      - } - } - }} + }} +
      }.into_view(), "Description" => view! { @@ -875,7 +885,7 @@ pub fn ItemsList(
      { property_label } -
      -
      +
      ().unwrap();