marketing-shibata50/tududi
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Fix UI issues

Browse source
This commit is contained in:
Chris Veleris 2024-02-12 13:16:03 +02:00
parent 65d9fcae15
commit 0b1f7ffe7d
10 changed files with 68 additions and 35 deletions
Download patch file Download diff file Expand all files Collapse all files

2
app.rb
View file

@ -103,7 +103,7 @@ get '/' do
end
get '/inbox' do
@tasks = current_user.tasks.incomplete.where(project_id: nil).order(:name)
@tasks = current_user.tasks.incomplete.where(project_id: nil).where(due_date: nil).order(:name)
erb :inbox
end

8
app/helpers/task_helper.rb
View file

@ -20,10 +20,12 @@ module TaskHelper
'bg-primary'
when Date.tomorrow
'bg-info'
when Date.yesterday..Date.today
'bg-danger'
else
'bg-light text-dark'
if due_date.to_date < Date.today
'bg-danger'
else
'bg-light text-dark'
end
end
end

2
app/views/notes/_form.erb
View file

@ -39,7 +39,7 @@
<%= note.new_record? ? 'Create Note' : 'Update Note' %>
</button>
<% unless note.new_record? %>
<button type="submit" class="btn btn-outline-danger" onclick="deleteNote('<%= note.id %>')">
<button type="submit" class="btn btn-danger" onclick="deleteNote('<%= note.id %>')">
<i class="bi bi-trash"></i>
</button>
<% end %>

4
app/views/notes/_note.erb
View file

@ -1,4 +1,4 @@
<div class="border-0 rounded bg-white shadow-sm mb-1 px-2 py-2 d-flex align-items-center note-item" data-note-id="<%= note.id || 'new' %>">
<div class="border-0 rounded shadow-sm mb-1 px-3 py-2 d-flex align-items-center note-item" data-note-id="<%= note.id || 'new' %>">
<i class="fs-6 bi-journal-text me-2"></i>
<div class="row flex-grow-1 align-items-center">
<div class="col-md-4">
@ -20,7 +20,7 @@
</div>
<div class="col-md-3">
<% if note.project && params[:id].blank? %>
<a href="/project/<%= note.project.id %>" class="badge border text-decoration-none link-dark bg-light">
<a href="/project/<%= note.project.id %>" class="badge border border-secondary text-decoration-none link-dark">
<%= note.project.name %>
</a>
<% end %>

12
app/views/notes/index.erb
View file

@ -22,11 +22,17 @@
</div>
</div>
</div>
<div class="rounded py-2 px-2 mx-3 d-flex align-items-center border" data-bs-toggle="collapse" data-bs-target="#newNoteForm" aria-expanded="false" aria-controls="newNoteForm" style="cursor: pointer; background: #eee;" data-context="notes">
<i class="bi bi-plus-circle-fill text-primary me-2"></i> <span class="">New note</span>
<div class="rounded py-2 px-3 mx-3 d-flex align-items-center border border-black"
data-bs-toggle="collapse"
data-bs-target="#newNoteForm"
aria-expanded="false"
aria-controls="newNoteForm"
style="cursor: pointer"
data-context="notes">
+ <span class="ms-2">Add note</span>
</div>
<div class="collapse" id="newNoteForm">
<div class="card rounded bg-white shadow-sm mt-2 p-4 mx-3">
<div class="card rounded shadow-sm mt-2 p-4 mx-3">
<%= partial :'notes/_form', locals: {note: Note.new, context: 'notes'} %>
</div>
</div>

12
app/views/projects/show.erb
View file

@ -1,4 +1,4 @@
<h2 class="mb-5"><i class="bi bi-hexagon ms-3 me-2"></i><%= @project.name.upcase %>
<h2 class="mb-5"><i class="bi bi-hexagon ms-3 me-4"></i><%= @project.name.upcase %>
<div class="dropdown d-inline-block">
<button class="btn btn-link text-secondary" type="button" id="dropdownMenuButton" data-bs-toggle="dropdown" aria-expanded="false">
<i class="bi bi-three-dots-vertical fs-6"></i>
@ -54,8 +54,14 @@
<% end %>
</div>
<h4 class="mt-5 ms-4 fw-bold">Notes</h4>
<div class="rounded py-2 px-2 mx-3 d-flex align-items-center border" data-bs-toggle="collapse" data-bs-target="#newNoteForm" aria-expanded="false" aria-controls="newNoteForm" style="cursor: pointer; background: #eee;">
<i class=" bi bi-plus-circle-fill text-primary me-2"></i> <span class="">New note</span>
<div class="rounded py-2 px-3 mx-3 d-flex align-items-center border border-black"
data-bs-toggle="collapse"
data-bs-target="#newNoteForm"
aria-expanded="false"
aria-controls="newNoteForm"
style="cursor: pointer"
data-context="notes">
+ <span class="ms-2">Add note</span>
</div>
<div class="collapse" id="newNoteForm">
<div class="card rounded bg-white shadow-sm mt-2 p-4 mx-3">

2
app/views/tasks/_form.erb
View file

@ -64,7 +64,7 @@
<%= task.new_record? ? 'Create Task' : 'Update Task' %>
</button>
<% unless task.new_record? %>
<button type="button" class="btn btn-outline-danger" onclick="deleteTask('<%= task.id %>')">
<button type="button" class="btn btn-danger" onclick="deleteTask('<%= task.id %>')">
<i class="bi bi-trash"></i>
</button>
<% end %>

10
app/views/tasks/_task.erb
View file

@ -1,10 +1,10 @@
<div class="border-0 rounded shadow-sm mb-1 px-2 py-2 d-flex align-items-center task-item <%= 'opacity-50' if task.done? %>" data-task-id="<%= task.id %>">
<div class="border-0 rounded shadow-sm mb-1 px-3 py-2 d-flex align-items-center task-item <%= 'opacity-50' if task.done? %>" data-task-id="<%= task.id %>">
<div class="row flex-grow-1 align-items-top">
<div class="col-md-6">
<span onclick="toggleTaskCompletion(event, <%= task.id %>)" class="toggle-completion">
<i class="fs-6 bi <%= task.done? ? 'bi-check-circle-fill' : 'bi-circle' %> <%= priority_class(task) %> me-2"></i>
</span>
<%= task.name %>
<span class="fw-light"><%= task.name %></span>
<% if task.tags.any? %>
<div class="ms-3 opacity-75 d-inline-block">
<% task.tags.each do |tag| %>
@ -17,18 +17,18 @@
</div>
<div class="col-md-3 text-end">
<% if task.project && params[:id].blank? %>
<a href="/project/<%= task.project.id %>" class="badge border text-decoration-none link-dark">
<a href="/project/<%= task.project.id %>" class="badge border border-secondary text-decoration-none link-dark fw-light">
<%= task.project.name %>
</a>
<% end %>
</div>
<div class="col-md-3 text-end">
<% if task.due_date %>
<span class="badge <%= due_date_badge_class(task.due_date) %>">
<span class="badge <%= due_date_badge_class(task.due_date) %> fw-light">
<i class="bi bi-clock me-2"></i> <%= format_due_date(task.due_date) %>
</span>
<% end %>
<span class="badge <%= status_badge_class(task.status) %>">
<span class="badge <%= status_badge_class(task.status) %> fw-light">
<i class="bi bi-circle-fill me-1" style="font-size: 0.6em; position: relative; top: -0.15em;"></i>
<span class="text-dark"><%= task.status.gsub('_', ' ').capitalize %></span>
</span>

44
public/css/app.css
View file

@ -50,16 +50,20 @@ h6 {
cursor: pointer;
}
::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
::placeholder {
/* Chrome, Firefox, Opera, Safari 10.1+ */
color: #eee;
opacity: 1; /* Firefox */
opacity: 1;
/* Firefox */
}
:-ms-input-placeholder { /* Internet Explorer 10-11 */
:-ms-input-placeholder {
/* Internet Explorer 10-11 */
color: gray;
}
::-ms-input-placeholder { /* Microsoft Edge */
::-ms-input-placeholder {
/* Microsoft Edge */
color: gray;
}
@ -87,6 +91,7 @@ h6 {
/* main */
.main-content {
margin-top: 50px;
margin-left: 250px;
background: transparent;
}
@ -101,7 +106,7 @@ h6 {
}
.nav-link {
color: #000;
color: var(--bs-dark);
}
.nav-link.active-link {
@ -119,20 +124,22 @@ h6 {
/* tasks, notes */
.task-item {
.task-item, .note-item {
background: var(--bs-white);
}
.dark-mode .task-item,
.dark-mode .note-item {
background: var(--bs-gray-dark);
background: var(--bs-gray-dark) !important;
}
.task-item:hover, .note-item:hover {
.task-item:hover,
.note-item:hover {
background: #fafafa !important;
}
.dark-mode .task-item:hover, .dark-mode .note-item:hover {
.dark-mode .task-item:hover,
.dark-mode .note-item:hover {
background: var(--bs-black) !important;
}
@ -140,7 +147,7 @@ h6 {
.task-name-input::placeholder {
color: #ccc;
opacity: 1; /* Firefox */
opacity: 1;
}
.new-task-input {
@ -161,7 +168,7 @@ a.project-card .card:hover {
/* dark mode */
.dark-mode {
background-color: var(--bs-dark);
background-color: var(--bs-dark);
color: var(--bs-light);
}
@ -195,8 +202,8 @@ a.project-card .card:hover {
border-color: var(--bs-black);
}
.dark-mode input,
.dark-mode tags,
.dark-mode input,
.dark-mode tags,
.dark-mode select,
.dark-mode textarea {
background-color: var(--bs-dark);
@ -213,6 +220,7 @@ a.project-card .card:hover {
.dark-mode tag {
background-color: var(--bs-gray-dark) !important;
color: var(--bs-light) !important;
me
}
.dark-mode .project-card .card {
@ -242,7 +250,11 @@ a.project-card .card:hover {
background-color: var(--bs-black);
}
/* .dark-mode .panel .progress {
background-color: var(--bs-black);
} */
#newNoteForm .card {
color: var(--bs-dark) !important;
}
.dark-mode #newNoteForm .card {
background-color: var(--bs-gray-dark) !important;
color: var(--bs-light) !important;
}

7
public/js/app.js
View file

@ -34,6 +34,7 @@ function updateDarkMode(enabled) {
darkModeIcon.classList.toggle('bi-sun', enabled);
// Update link colors and other necessary elements
updateLinkColors(enabled);
updateDropdownMenus(enabled);
}
function updateLinkColors(darkModeEnabled) {
@ -54,6 +55,12 @@ function setInitialDarkModeState() {
}
}
function updateDropdownMenus(enableDarkMode) {
document.querySelectorAll('.dropdown-menu').forEach(menu => {
menu.classList.toggle('dropdown-menu-dark', enableDarkMode);
});
}
function initializeTagifyOnNotes() {
document.querySelectorAll('[id^="note_tags_new_"]').forEach(function(element) {
new Tagify(element);