Estilização finalizada

gabrielalb5 · Jan 14, 2025 · e2f1ded · e2f1ded
1 parent c45cf91
commit e2f1ded
Show file tree

Hide file tree

Showing 8 changed files with 130 additions and 46 deletions.
diff --git a/app/assets/stylesheets/application.css b/app/assets/stylesheets/application.css
@@ -31,7 +31,7 @@ body{
     background-color: rgb(75, 128, 161);
     color: rgb(255, 255, 255);
     margin: 10px 0;
-    width: 300px;
+    border: none;
 }
 section img{
     width: 300px;
@@ -40,11 +40,13 @@ form input[type="text"]{
     padding: 20px;
     border: 2px solid rgb(200, 200, 200);
     border-radius: 5px 0 0 5px;
-    width: 200px;
+    width: 100%;
 }
-#add_form{
+.new_task{
     display: flex;
     align-items: center;
+    width: 100%;
+    margin: 10px 0;
 }
 .btn_add{
     padding: 20px;
@@ -54,7 +56,6 @@ form input[type="text"]{
     border: none;
     display: flex;
     align-items: center;
-    gap: 10px;
 }
 h2{
     margin: 0;
@@ -63,5 +64,81 @@ table{
     width: 100%;
 }
 .item{
-    padding: 0 100px 0 0;
+    width: 100%;
+    padding: 0 50px 0 0;
+}
+.done_icon{
+    padding: 0 10px 0 0;
+    color: rgb(75, 128, 161);
+}
+.done_icon span{
+    font-weight: 800;
+    margin: 5px 0 0 0;
+}
+.btn_deletar:hover{
+    background-color: red;
+    color: white;
+    cursor: pointer;
+    transition: 0.5s;
+}
+.btn_done:hover{
+    cursor: pointer;
+    background-color: rgb(200, 200, 200);
+    color: black;
+    transition: 0.5s;
+}
+.btn_deletar, .btn_done{
+    padding: 10px;
+    min-height: 50px;
+    border: none;
+}
+.btn_done{
+    min-width: 80px
+}
+#new form{
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-direction: column;
+}
+#new form .btn_submit{
+    width: 100%;
+}
+#new form input[type="text"]{
+    width: 80%;
+}
+#add_form{
+    margin-bottom: 30px;
+}
+#list_page{
+    min-width: 300px;
+}
+.btn_delete_list{
+    text-decoration: none;
+    color: rgb(200, 200, 200);
+    margin: 0 0 30px 0;
+    border: none;
+    background-color: #ffffff;
+}
+.links a{
+    text-decoration: none;
+    color: rgb(200, 200, 200);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 5px;
+}
+.links a:hover{
+    opacity: 80%;
+}
+.links{
+    gap: 20px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin: 20px;
+}
+.btn_add:hover, .btn_delete_list:hover, .btn_submit:hover{
+    opacity: 80%;
+    cursor: pointer;
 }
diff --git a/app/controllers/lists_controller.rb b/app/controllers/lists_controller.rb
@@ -27,7 +27,7 @@ def create
 
     respond_to do |format|
       if @list.save
-        format.html { redirect_to @list, notice: "List was successfully created." }
+        format.html { redirect_to @list, notice: "Nova lista criada." }
         format.json { render :show, status: :created, location: @list }
       else
         format.html { render :new, status: :unprocessable_entity }
@@ -40,7 +40,7 @@ def create
   def update
     respond_to do |format|
       if @list.update(list_params)
-        format.html { redirect_to @list, notice: "List was successfully updated." }
+        format.html { redirect_to @list, notice: "Lista atualizada." }
         format.json { render :show, status: :ok, location: @list }
       else
         format.html { render :edit, status: :unprocessable_entity }
@@ -54,7 +54,7 @@ def destroy
     @list.destroy!
 
     respond_to do |format|
-      format.html { redirect_to lists_path, status: :see_other, notice: "List was successfully destroyed." }
+      format.html { redirect_to lists_path, status: :see_other, notice: "Lista excluída." }
       format.json { head :no_content }
     end
   end

diff --git a/app/controllers/tasks_controller.rb b/app/controllers/tasks_controller.rb
@@ -32,7 +32,7 @@ def destroy
     @task = Task.find(params[:id])
     @task.destroy
 
-    redirect_to list_path(@task.list_id), notice: "Tarefa deletada com sucesso."
+    redirect_to list_path(@task.list_id), notice: "Tarefa excluída com sucesso."
   end
 
   private

diff --git a/app/views/lists/_form.html.erb b/app/views/lists/_form.html.erb
@@ -11,12 +11,7 @@
     </div>
   <% end %>
 
-  <div>
     <%= form.label "Nome", style: "display: none" %>
     <%= form.text_field :title, placeholder: "Nome" %>
-  </div>
-
-  <div>
-    <%= form.submit "Confirmar" %>
-  </div>
+    <%= form.submit "Confirmar", class: "btn_submit" %>
 <% end %>
diff --git a/app/views/lists/_list.html.erb b/app/views/lists/_list.html.erb
@@ -1,3 +1,3 @@
 <div id="<%= dom_id list %>">
-  <p><%= list.title %></p>
+  <%= list.title %>
 </div>
diff --git a/app/views/lists/edit.html.erb b/app/views/lists/edit.html.erb
@@ -1,12 +1,14 @@
 <% content_for :title, "Editando lista" %>
 
 <h1>Editando lista</h1>
-
+<main id="new">
 <%= render "form", list: @list %>
-
-<br>
-
-<div>
-  <%= link_to "Acessar lista", @list %>
-  <%= link_to "Voltar ao início", lists_path %>
+</main>
+<div class="links">
+  <%= link_to @list do %>
+    <span class="material-symbols-outlined">visibility</span> Acessar lista
+  <% end %>
+  <%= link_to lists_path do %>
+    <span class="material-symbols-outlined">home</span> Voltar ao início
+  <% end %>
 </div>
diff --git a/app/views/lists/new.html.erb b/app/views/lists/new.html.erb
@@ -1,11 +1,11 @@
 <% content_for :title, "Nova lista" %>
 
 <h1>Nova lista</h1>
-
+<main id="new">
 <%= render "form", list: @list %>
-
-<br>
-
-<div>
-  <%= link_to "Voltar ao início", lists_path %>
-</div>
+</main>
+<div class="links">
+  <%= link_to lists_path do %>
+    <span class="material-symbols-outlined">home</span> Voltar ao início
+  <% end %>
+</div>
diff --git a/app/views/lists/show.html.erb b/app/views/lists/show.html.erb
@@ -2,36 +2,46 @@
 
 <h2><%= render @list %></h2>
 <% content_for :title, @list.title+" | Listas" %>
+<%= button_to "Excluir lista", @list, method: :delete, class: "btn_delete_list" %>
+
+<main id="list_page">
+
+<%= form_for @task, html: { id: 'add_form' } do |t| %>
+  <%= t.text_field :name, placeholder: "Digite um tópico/item/tarefa" %>
+  <%= t.hidden_field :list_id, :value => @list.id %>
+  <%= button_tag type: 'submit', class: 'btn_add' do %>
+    <span class="material-symbols-outlined">add</span>
+  <% end %>
+<% end %>
 
-<main>
 <table>
   <tbody>
   <tr>
 <% @tarefas.each do |tarefa| %>
   <% if tarefa.done %>
+    <td class="done_icon"><span class="material-symbols-outlined">check</span></td>
     <td class="item"><s><%= tarefa.name %></s></td>
-    <td class="btn_done_blue"><%= button_to "Refazer", toggle_done_task_path(tarefa), method: :patch %></td>
+    <td><%= button_to "Refazer", toggle_done_task_path(tarefa), method: :patch, class: "btn_done" %></td>
   <% else %>
+    <td></td>
     <td class="item"><%= tarefa.name %></td>
-    <td class="btn_done"><%= button_to "Concluir", toggle_done_task_path(tarefa), method: :patch %></td>
+    <td><%= button_to "Concluir", toggle_done_task_path(tarefa), method: :patch, class: "btn_done" %></td>
   <% end %>
-  <td><%= button_to "Deletar", task_path(tarefa), method: :delete %></td>
+  <td><%= button_to task_path(tarefa), method: :delete, class: "btn_deletar" do %>
+        <span class="material-symbols-outlined">delete</span>
+      <% end %>
+  </td>
   </tr>
 <% end %>
   </tbody>
 </table>
-
-<%= form_for @task, html: { id: 'add_form' } do |t| %>
-  <p><%= t.text_field :name, placeholder: "Digite um tópico/item/tarefa" %></p>
-  <%= t.hidden_field :list_id, :value => @list.id %>
-  <%= button_tag type: 'submit', class: 'btn_add' do %>
-    Adicionar à lista <span class="material-symbols-outlined">add</span>
-  <% end %>
-<% end %>
 </main>
 
-<div>
-  <%= link_to "Editar lista", edit_list_path(@list) %>
-  <%= link_to "Voltar ao início", lists_path %>
-  <%= button_to "Excluir lista", @list, method: :delete %>
+<div class="links">
+  <%= link_to edit_list_path(@list), class: "link-class" do %>
+    <span class="material-symbols-outlined">settings</span> Editar lista
+  <% end %>
+  <%= link_to lists_path do %>
+    <span class="material-symbols-outlined">home</span> Voltar ao início
+  <% end %>
 </div>