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

Tweak layout

Browse source
This commit is contained in:
Chris Veleris 2023-11-20 12:42:47 +02:00
parent 95181c062b
commit 082b145f5d
11 changed files with 83 additions and 55 deletions
Download patch file Download diff file Expand all files Collapse all files

2
app/routes/notes_routes.rb
View file

@ -14,7 +14,7 @@ class Sinatra::Application
end
get '/notes' do
@notes = current_user.notes.includes(:tags)
@notes = current_user.notes.includes(:tags).order('title ASC')
erb :'notes/index'
end

2
app/views/layout.erb
View file

@ -10,7 +10,7 @@
<link href="https://cdn.jsdelivr.net/npm/@yaireo/tagify/dist/tagify.css" rel="stylesheet">
<link rel="stylesheet" href="/css/app.css">
</head>
<body class="container-fluid" style="background: #fcfcfc">
<body class="container-fluid">
<div class="row flex-nowrap">
<% if current_user %>
<%= partial :'sidebar' %>

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

@ -1,6 +1,6 @@
<% action_url = note.new_record? ? '/note/create' : "/note/#{note.id}" %>
<% method = note.new_record? ? 'post' : 'patch' %>
<form action="<%= action_url %>" method="post" class="">
<form action="<%= action_url %>" method="post">
<% unless note.new_record? %>
<input type="hidden" name="_method" value="<%= method %>">
<% end %>

28
app/views/notes/_note.erb Normal file
View file

@ -0,0 +1,28 @@
<div class="border-0 bg-white shadow-sm mb-1 px-2 py-2 d-flex align-items-center note-item" data-note-id="<%= note.id %>">
<i class="fs-6 bi-journal-text me-2"></i>
<div class="row flex-grow-1 align-items-center">
<div class="col-md-4">
<div class="note-item">
<a href="#" class="link-dark  fs-5 text-decoration-none">
<%= note.title %>
</a>
<% if note.tags %>
<div class="ms-3 opacity-75 d-inline-block">
<% note.tags.each do |tag| %>
<span class="badge bg-primary-subtle text-primary rounded">
<%= tag.name %>
</span>
<% end %>
</div>
<% end %>
</div>
</div>
<div class="col-md-3">
<% if note.project %>
<a href="/project/<%= note.project.id %>" class="badge border text-decoration-none link-dark bg-light">
<%= note.project.name %>
</a>
<% end %>
</div>
</div>
</div>

31
app/views/notes/_notes_table.erb
View file

@ -1,31 +0,0 @@
<div class="bg-light shadow-sm">
<table class="table">
<thead>
<tr>
<th scope="col">Content</th>
<th scope="col">Tags</th>
</tr>
</thead>
<tbody>
<% notes.each do |note| %>
<tr>
<td class="w-50">
<div class="note-item" data-note-id="<%= note.id %>">
<a href="#" class="link-secondary  fs-5 text-decoration-none">
<%= note.title %>
</a>
</div>
<div id="edit_note_form_<%= note.id %>" class="d-none">
<%= partial :'notes/_form', locals: { note: note } %>
</div>
</td>
<td>
<% note.tags.each do |tag| %>
<span class="badge bg-primary-subtle text-primary"><%= tag.name %></span>
<% end %>
</td>
</tr>
<% end %>
</tbody>
</table>
</div>

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

@ -3,11 +3,16 @@
<i class="fs-4 bi bi-plus-circle-fill text-primary me-2"></i> <span class="fs-6">New note</span>
</div>
<div class="collapse" id="newNoteForm">
<div class="card border-0 bg-white shadow-sm mt-2 p-4 mx-3">
<div class="card border-secondary-subtle bg-light shadow-sm mt-2 p-4 mx-3">
<%= partial :'notes/_form', locals: { note: Note.new } %>
</div>
</div>
<div class="mx-3 my-4">
<%= partial :'notes/_notes_table', locals: {notes: @notes} %>
<% @notes.each do |note| %>
<div id="edit_note_form_<%= note.id %>" class="d-none">
<%= partial :'notes/_form', locals: { note: note } %>
</div>
<%= partial :'notes/_note', locals: {note: note} %>
<% end %>
</div>
<%= partial :'notes/_edit_note_modal' %>

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

@ -34,7 +34,7 @@
</div>
</div>
<h5 class="mt-4 ms-4">Tasks</h5>
<h4 class="mt-5 ms-4 fw-bold">Tasks</h4>
<div class="mx-3 my-2">
<% if @project.tasks.any? %>
<% @project.tasks.each do |task| %>
@ -51,10 +51,16 @@
</div>
<% end %>
</div>
<h5 class="mt-4 ms-4">Notes</h5>
<h4 class="mt-5 ms-4 fw-bold">Notes</h4>
<div class="mx-3 my-2">
<% if @project.notes.any? %>
<%= partial :'notes/_notes_table', locals: {notes: @project.notes} %>
<% @project.notes.each do |note| %>
<div id="edit_note_form_<%= note.id %>" class="d-none">
<%= partial :'notes/_form', locals: { note: note } %>
</div>
<%= partial :'notes/_note', locals: {note: note} %>
<% end %>
<% else %>
<div class="px-4 py-2 mb-4 bg-secondary-subtle fw-light opacity-50">
No notes have been created yet for this project

10
app/views/sidebar.erb
View file

@ -1,4 +1,4 @@
<div class="d-flex flex-column flex-shrink-0 p-3 bg-light vh-100 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">
<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>
@ -49,7 +49,7 @@
<%= area.name %>
</a>
<div class="dropdown area-options">
<button class="btn btn-link text-secondary" type="button" id="dropdownMenuButton<%= area.id %>" data-bs-toggle="dropdown" aria-expanded="false">
<button class="btn btn-link pb-1 text-secondary" type="button" id="dropdownMenuButton<%= area.id %>" data-bs-toggle="dropdown" aria-expanded="false">
<i class="bi bi-three-dots-vertical"></i>
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenuButton<%= area.id %>">
@ -78,9 +78,9 @@
<% end %>
<% end %>
</div>
<div class="">
<div class="mt-2">
<div class="dropdown">
<button class="btn btn-dark dropdown-toggle w-100" type="button" id="dropdownMenuButton1" data-bs-toggle="dropdown" aria-expanded="false">
<button class="btn btn-outline-dark dropdown-toggle w-100" type="button" id="dropdownMenuButton1" data-bs-toggle="dropdown" aria-expanded="false">
New Section
</button>
<ul class="dropdown-menu w-100" aria-labelledby="dropdownMenuButton1">
@ -95,7 +95,7 @@
<strong><%= current_user.email %></strong>
</a>
<ul class="dropdown-menu dropdown-menu-dark small text-center" aria-labelledby="dropdownUser1">
<li><a class="dropdown-item" href="#">Profile</a></li>
<li><a class="dropdown-item disabled" href="#">Profile</a></li>
<li><hr class="dropdown-divider"></li>
<li><a class="dropdown-item" href="/logout">Sign out</a></li>
</ul>

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

@ -1,16 +1,26 @@
<div class="border-0 bg-white shadow-sm px-3 py-2 mb-1 d-flex align-items-center task-item <%= 'opacity-50' if task.completed %>" data-task-id="<%= task.id %>">
<div class="border-0 bg-white shadow-sm mb-1 px-2 py-2 d-flex align-items-center task-item <%= 'opacity-50' if task.completed %>" data-task-id="<%= task.id %>">
<span onclick="toggleTaskCompletion(event, <%= task.id %>)" class="toggle-completion">
<i class="fs-6 bi <%= task.completed ? 'bi-check-circle-fill' : 'bi-circle' %> <%= priority_class(task) %> me-2"></i>
</span>
<div class="row flex-grow-1 align-items-center">
<div class="row flex-grow-1 align-items-top">
<div class="col-md-5">
<%= task.name %>
<% if task.tags %>
<div class="ms-3 opacity-75 d-inline-block">
<% task.tags.each do |tag| %>
<span class="badge bg-primary-subtle text-primary">
<i class="bi bi-tag-fill me-1 opacity-50"></i><%= tag.name %>
</span>
<% end %>
</div>
<% end %>
</div>
<div class="col-md-3">
<% task.tags.each do |tag| %>
<span class="badge bg-primary-subtle text-primary rounded">
<%= tag.name %>
</span>
<% if task.project %>
<a href="/project/<%= task.project.id %>" class="badge border text-decoration-none link-dark bg-light">
<%= task.project.name %>
</a>
<% end %>
</div>
<div class="col-md-3">

7
app/views/tasks/index.erb
View file

@ -8,7 +8,7 @@
<%= partial :'tasks/_form', locals: { task: Task.new } %>
</div>
</div>
<div class="mx-3 mt-4 mb-4">
<div class="mx-3 mt-4">
<% if @tasks.any? %>
<% @tasks.each do |task| %>
<div id="edit_task_form_<%= task.id %>" class="d-none">
@ -18,13 +18,10 @@
<% end %>
<% end %>
</div>
<div class="mx-3 my-2">
<div class="mx-3 mb-2">
<% if @projects_with_tasks.any? %>
<% @projects_with_tasks.each do |project| %>
<% if project.tasks.any? %>
<h5 class="mt-4 mb-2">
<div class="px-2 py-1 mb-1 border border-dark d-inline-block"><%= project.name.upcase %></div>
</h5>
<% project.tasks.each do |task| %>
<div id="edit_task_form_<%= task.id %>" class="d-none">
<%= partial :'tasks/_form', locals: { task: task } %>

13
public/css/app.css
View file

@ -1,6 +1,7 @@
body {
font-family: 'Poppins', sans-serif;
font-size: 0.85rem;
background: #f8f8f8;
}
h1 {
@ -73,12 +74,24 @@ h6 {
.main-content {
margin-left: 300px;
background: transparent;
}
.login-content {
margin-left: 200px;
}
/* sidebar */
.sidebar {
background: #ececec;
}
/* tasks, notes */
.task-item:hover, .note-item:hover {
background: #fafafa !important;
}
/* task form */
#task_name::placeholder {