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

Setup base functionality

Browse source
This commit is contained in:
Chris Veleris 2023-12-07 12:04:46 +02:00
parent e724b586c2
commit 65d9fcae15
9 changed files with 187 additions and 27 deletions
Download patch file Download diff file Expand all files Collapse all files

3
app.rb
View file

@ -77,8 +77,7 @@ helpers do
is_active = nav_link_active?(path, query_params, project_id)
classes = 'nav-link py-1 px-3'
classes += ' active bg-dark' if is_active
classes += ' link-dark' unless is_active
classes += ' active-link' if is_active
classes
end

1
app/views/layout.erb
View file

@ -14,7 +14,6 @@
<div class="row flex-nowrap">
<% if current_user %>
<%= partial :'sidebar' %>
<%= partial :'projects/_new_project_modal' %>
<div class="px-md-4 pt-4 mb-3 main-content col-md-9 col-lg-10">
<%= yield %>
</div>

13
app/views/projects/_panel.erb
View file

@ -1,6 +1,6 @@
<% task_counts = @project.task_status_counts %>
<% days_passed = (Date.today - @project.created_at.to_date).to_i %>
<div class="bg-secondary-subtle mb-4 mx-3 p-3 rounded">
<div class="mb-4 mx-3 p-3 panel rounded">
<div class="row">
<% task_stats = [['list-check', 'Total', task_counts[:total]],
['arrow-repeat', 'In Progress', task_counts[:in_progress]],
@ -8,13 +8,10 @@
['hourglass-split', 'Not Started', task_counts[:not_started]]] %>
<% task_stats.each do |icon, title, count| %>
<div class="col-md-3 mb-2">
<div class="card bg-light text-center py-3 border-0">
<div class="card-body d-flex align-items-center justify-content-center py-1">
<i class="bi bi-<%= icon %> fs-4 me-2"></i>
<span class="card-title mb-1"><%= title %></span>
</div>
<div class="card-footer py-1 border-0 bg-transparent">
<p class="card-text fs-4"><%= count %></p>
<div class="card panel-card text-center py-3 border-0">
<div class="card-body fs-6 d-flex align-items-center justify-content-center py-1">
<i class="bi bi-<%= icon %> me-2"></i>
<span class=""><%= title %>: <%= count %></span>
</div>
</div>
</div>

10
app/views/projects/index.erb
View file

@ -28,7 +28,7 @@
<div class="card shadow-sm" style="min-height: 177px;">
<div class="d-flex flex-column justify-content-between h-100">
<div>
<div class="bg-light rounded" style="height: 100px;"></div>
<div class="rounded" style="height: 100px;"></div>
<div class="card-body p-0">
<div class="card-footer p-0">
<div class="progress rounded-0" style="height: 2px;">
@ -36,7 +36,7 @@
</div>
</div>
<h5 class="card-title px-3 pt-3 pb-0 mb-1"><%= project.name.upcase %></h5>
<div class="card-text px-3 small text-black-50 opacity-75">
<div class="card-text px-3 small opacity-50">
<%= project.task_status_counts[:total] %> Tasks
<% if project.task_status_counts[:in_progress] > 0 %>
, <i class="bi bi-circle-fill text-success me-1" style="font-size: 0.5em; position: relative; top: -0.3em;"></i> <%= project.task_status_counts[:in_progress] %> in progress
@ -51,9 +51,9 @@
<% end %>
<div class="col-md-4 mb-3">
<a class="text-decoration-none project-card" href="#" data-bs-toggle="modal" data-bs-target="#newProjectModal">
<div class="card shadow-sm border-light p-0" style="min-height: 177px;">
<div class="card-body bg-light rounded px-0 p-0 text-center">
<i class="bi bi-plus" style="font-size: 72px; line-height: 175px; color: #eee"></i>
<div class="card shadow-sm p-0 opacity-25" style="min-height: 177px;">
<div class="card-body rounded px-0 p-0 text-center">
<i class="bi bi-plus opacity-25" style="font-size: 72px; line-height: 175px;"></i>
</div>
</div>
</a>

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

@ -21,7 +21,7 @@
</div>
</h2>
<% unless @project.description.blank? %>
<div class="bg-primary-subtle mb-4 mx-3 rounded d-flex align-items-center">
<div class="mb-4 mx-3 rounded d-flex align-items-center">
<i class="bi bi-info-circle-fill fs-1 text-primary ms-3"></i>
<div class="px-4 py-3">
<%= @project.description %>

19
app/views/sidebar.erb
View file

@ -1,7 +1,10 @@
<div class="d-flex flex-column flex-shrink-0 p-3 vh-100 sidebar fixed-sidebar" style="width: 300px;"> <a href="/" class="d-flex align-items-center mb-3 mb-md-0 me-md-auto link-dark text-decoration-none">
<span class="fs-4">tu|du|di</span>
</a>
<hr>
<div class="d-flex flex-column flex-shrink-0 p-3 vh-100 sidebar fixed-sidebar" style="width: 300px;">
<div class="d-flex justify-content-center mb-3 mb-md-0">
<a href="/" class="d-flex justify-content-center align-items-center mb-3 mb-md-0 link-dark text-decoration-none">
<span class="fs-4 fw-bold">tududi</span>
</a>
</div>
<div class="border-top my-3"></div>
<ul class="nav nav-pills flex-column">
<li>
<a href="/tasks?type=today" class="<%= nav_link('/tasks', 'type' => 'today') %>">
@ -19,12 +22,12 @@
</a>
</li>
<li>
<a href="/tasks?type=upcoming" class="<%= nav_link('/tasks', 'due_date' => 'upcoming') %>">
<a href="/tasks?type=upcoming" class="<%= nav_link('/tasks', 'type' => 'upcoming') %>">
<i class="bi bi-calendar3 me-1"></i> Upcoming
</a>
</li>
<li>
<a href="/tasks?type=someday" class="<%= nav_link('/tasks', 'due_date' => 'never') %>">
<a href="/tasks?type=someday" class="<%= nav_link('/tasks', 'type' => 'someday') %>">
<i class="bi bi-moon-stars-fill me-1"></i> Someday
</a>
</li>
@ -79,8 +82,10 @@
<li><a class="dropdown-item" href="/logout">Sign out</a></li>
</ul>
</div>
<button id="darkModeToggle" class="btn btn-link link-dark">
<i id="darkModeIcon" class="bi bi-moon"></i>
</button>
</div>
<%= partial :'projects/_new_project_modal' %>
<%= partial :'areas/_new_area_modal' %>
<%= partial :'notes/_new_note_modal', locals: {note: Note.new, context: 'sidebar'} %>

4
app/views/tasks/_task.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 task-item <%= 'opacity-50' if task.done? %>" data-task-id="<%= task.id %>">
<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="row flex-grow-1 align-items-top">
<div class="col-md-6">
<span onclick="toggleTaskCompletion(event, <%= task.id %>)" class="toggle-completion">
@ -17,7 +17,7 @@
</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 bg-light">
<a href="/project/<%= task.project.id %>" class="badge border text-decoration-none link-dark">
<%= task.project.name %>
</a>
<% end %>

120
public/css/app.css
View file

@ -100,12 +100,42 @@ h6 {
background: #ececec;
}
.nav-link {
color: #000;
}
.nav-link.active-link {
background-color: #343a40;
color: #fff;
}
.dark-mode .nav-link {
color: #fff;
}
.dark-mode .nav-link.active-link {
background-color: var(--bs-dark);
}
/* tasks, notes */
.task-item {
background: var(--bs-white);
}
.dark-mode .task-item,
.dark-mode .note-item {
background: var(--bs-gray-dark);
}
.task-item:hover, .note-item:hover {
background: #fafafa !important;
}
.dark-mode .task-item:hover, .dark-mode .note-item:hover {
background: var(--bs-black) !important;
}
/* task form */
.task-name-input::placeholder {
@ -127,4 +157,92 @@ h6 {
/* project card */
a.project-card .card:hover {
border: 1px solid #777 !important;
}
}
/* dark mode */
.dark-mode {
background-color: var(--bs-dark);
color: var(--bs-light);
}
.dark-mode .sidebar {
background-color: var(--bs-black);
}
.sidebar .border-top {
border-color: #ddd !important;
}
.dark-mode .sidebar .border-top {
border-color: #333 !important;
}
.dark-mode h1,
.dark-mode h2,
.dark-mode h3,
.dark-mode h4,
.dark-mode h5,
.dark-mode h6 {
color: var(--bs-light) !important;
}
.dark-mode .modal .modal-dialog .modal-content {
background-color: var(--bs-gray-dark);
color: var(--bs-light);
}
.dark-mode .modal-header {
border-color: var(--bs-black);
}
.dark-mode input,
.dark-mode tags,
.dark-mode select,
.dark-mode textarea {
background-color: var(--bs-dark);
color: var(--bs-light);
border-color: var(--bs-black);
}
.dark-mode input:focus,
.dark-mode textarea:focus {
background-color: var(--bs-black);
color: var(--bs-light);
}
.dark-mode tag {
background-color: var(--bs-gray-dark) !important;
color: var(--bs-light) !important;
}
.dark-mode .project-card .card {
background-color: var(--bs-gray-dark) !important;
color: var(--bs-light) !important;
}
.dark-mode .progress {
background-color: var(--bs-dark);
}
.panel-card {
background-color: var(--bs-white) !important;
color: var(--bs-dark) !important;
}
.dark-mode .panel-card {
background-color: var(--bs-gray-dark) !important;
color: var(--bs-light) !important;
}
.panel {
background-color: var(--bs-light);
}
.dark-mode .panel {
background-color: var(--bs-black);
}
/* .dark-mode .panel .progress {
background-color: var(--bs-black);
} */

42
public/js/app.js
View file

@ -1,6 +1,8 @@
document.addEventListener("DOMContentLoaded", function () {
attachEventListeners();
initializeTagifyOnNotes();
initializeDarkModeToggle();
setInitialDarkModeState();
});
function attachEventListeners() {
@ -12,6 +14,46 @@ function attachEventListeners() {
attachNoteClickListeners();
}
function initializeDarkModeToggle() {
const darkModeToggle = document.querySelector('#darkModeToggle');
const darkModeIcon = document.querySelector('#darkModeIcon');
const isDarkMode = localStorage.getItem('darkMode') === 'true';
updateDarkMode(isDarkMode);
darkModeToggle.addEventListener('click', function () {
const isDarkMode = localStorage.getItem('darkMode') === 'true';
updateDarkMode(!isDarkMode);
});
}
function updateDarkMode(enabled) {
document.body.classList.toggle('dark-mode', enabled);
localStorage.setItem('darkMode', enabled);
darkModeIcon.classList.toggle('bi-moon', !enabled);
darkModeIcon.classList.toggle('bi-sun', enabled);
// Update link colors and other necessary elements
updateLinkColors(enabled);
}
function updateLinkColors(darkModeEnabled) {
const links = document.querySelectorAll('.link-dark, .link-light');
links.forEach(link => {
link.classList.toggle('link-dark', !darkModeEnabled);
link.classList.toggle('link-light', darkModeEnabled);
});
}
function setInitialDarkModeState() {
const isDarkMode = localStorage.getItem('darkMode') === 'true';
const darkModeToggle = document.querySelector('#darkModeToggle');
if (darkModeToggle) {
darkModeToggle.checked = isDarkMode;
document.body.classList.toggle('dark-mode', isDarkMode);
updateLinkColors(isDarkMode);
}
}
function initializeTagifyOnNotes() {
document.querySelectorAll('[id^="note_tags_new_"]').forEach(function(element) {
new Tagify(element);