Merge pull request #169 from Timchik-IT/HW14

Hw14 - Timur (Kamil group)

app/assets/stylesheets/_variables.scss

@@ -3,5 +3,6 @@ $white: #fff;
 $red: #f00;
 $green: #008000;
 $grey: #ccc;
+$blue: #2732ff;
 
 $header-bg: #f1f1f1;

app/assets/stylesheets/application.scss

@@ -10,3 +10,4 @@
 @import 'base';
 @import 'header';
 @import 'form';
+@import 'task_index';

app/assets/stylesheets/base.scss

@@ -1,11 +1,36 @@
+.flash-message {
+  padding: 10px;
+  border-radius: 5px;
+  font-weight: bold;
+  margin-bottom: 10px;
+  width: 300px;
+  text-align: center;
+}
+
 .flash-alert {
+  @extend .flash-message;
   color: $red;
 }
 
 .flash-notice {
+  @extend .flash-message;
   color: $green;
 }
 
+.error-box {
+  border: 2px solid red;
+  padding: 10px; 
+}
+
+.error-header {
+  font-size: 20px;
+  font-weight: bold;
+}
+
+.error-body {
+  color: red;
+}
+
 .sort-links {
   display: flex;
   gap: 1rem;

app/assets/stylesheets/task_index.scss

@@ -0,0 +1,93 @@
+.sort-links {
+  display: flex;
+  justify-content: space-between;
+  place-items: center;
+  place-items: center;
+
+  p {
+    &.link {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      flex: 1;
+      position: relative;
+      padding: 1rem 2rem;
+      border: 5px solid #f2f2f2;
+      text-transform: uppercase;
+      font-weight: 500;
+      font-size: 1em;
+      letter-spacing: 1px;
+      box-shadow: 1px 1px 20px rgba(0,0,0,.1);
+      color: #9a336a;
+      background: transparent;
+      overflow: hidden;
+
+      a {
+        color: green;
+        text-decoration: none;
+        transition: color 0.3s;
+        &:hover {
+          color: blue;
+        }
+      }
+    }
+  }
+}
+
+h1 {
+  font-size: 24px;
+  color: #333;
+  margin-bottom: 10px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.button-link {
+  display: flex;
+  flex-wrap: wrap;
+  a {
+    color: #fff;
+    background-color: #007bff;
+    padding: 8px 16px;
+    text-decoration: none;
+    border-radius: 4px;
+    transition: background-color 0.3s;
+
+    &:hover {
+      background-color: #0056b3;
+    }
+  }
+}
+
+
+.record {
+  border: 1px solid #ccc;
+  padding: 10px;
+  margin: 10px 0;
+  display: inline-block;
+  vertical-align: top;
+  width: calc(33.33% - 20px); /* Измените эту ширину на то, что вам нужно */
+  margin-right: 20px; /* Добавьте нужный отступ между блоками */
+  box-sizing: border-box;
+  overflow: hidden; 
+  text-overflow: ellipsis;
+
+  p {
+    margin: 5px 0;
+  }
+
+  .edit_links {
+    a {
+      display: inline-block;
+      margin-right: 10px;
+      color: #007bff;
+      text-decoration: none;
+      transition: color 0.3s;
+
+      &:hover {
+        color: #0056b3;
+      }
+    }
+  }
+}

app/views/projects/_form.html.slim

@@ -1,13 +1,14 @@
 = form_with(model: project, html: { class: "form" }) do |form|
   - if project.errors.any?
     #error_explanation
-      h2
+    fieldset.error-box
+      h2.error-header
         => pluralize(project.errors.count, "error")
         | prohibited this project from being saved:
-
       ul
         - project.errors.each do |error|
-          li = error.full_message
+          li.error-body 
+            = error.full_message
 
   .form__field
     = form.label :name, class: "form-label"

app/views/tasks/_form.html.slim

@@ -0,0 +1,26 @@
+= form_with(model: [@project, @task]) do |form|
+  - if @task.errors.any?
+    #error_explanation
+    fieldset.error-box
+      h2.error-header
+        = pluralize(@task.errors.count, "error")
+        |  prohibited this task from being saved:
+      ul
+        - @task.errors.full_messages.each do |error|
+          li.error-body
+            = error
+
+  .field
+    = form.label :name
+    = form.text_field :name
+  .field
+    = form.label :description
+    = form.text_area :description
+  .field
+    = form.label :status
+    = form.select :status, Task.status.values
+  .field
+    = form.label :deadline_at
+    = form.datetime_field :deadline_at
+  .actions
+    = form.submit

app/views/tasks/index.html.slim

@@ -0,0 +1,50 @@
+h1
+  | Tasks for project: 
+  = @project.name
+.button-link
+  = link_to "NEW TASK", new_project_task_path(@project)
+.sort-links
+  p.link
+    = link_to "Name", :sort => "name asc"
+  p
+
+  p.link
+    = link_to "Name reverse", :sort => "name desc"
+  p
+
+  p.link
+    = link_to "Created", :sort => "id asc"
+  p
+
+  p.link
+    = link_to "Created reverse", :sort => "id desc"
+  p
+
+  p.link
+    = link_to "Deadline", :sort => "deadline_at asc"
+  p
+
+  p.link
+    = link_to "deadline reverse", :sort => "deadline_at desc"
+  p
+
+- @tasks.each_with_index do |task, index|
+  .record
+    p
+      = index+1
+      | . 
+      = task.name
+    p
+      = task.description
+    p
+      = task.status
+    p
+      = task.deadline_at
+    .edit_links
+      = link_to "Show", url_for([@project, task])
+      = link_to "Edit", edit_project_task_path(@project, task)
+      = link_to "Destroy", url_for([@project, task]), method: :delete, data: { confirm: 'Are you sure?' }
+p.link
+  = paginate @tasks
+.button-link
+  = link_to "Back to Projects", projects_path

app/views/users/_form.html.slim

@@ -0,0 +1,25 @@
+= form_with(model: @user) do |form|
+  - if @user.errors.any?
+    #error_explanation
+    fieldset.error-box
+      h2.error-header
+        = pluralize(@user.errors.count, "error")
+        |  prohibited this user from being saved:
+      ul
+        - @user.errors.each do |error|
+          li.error-body
+            = error.full_message
+  .field
+    = form.label :first_name
+    = form.text_field :first_name
+  .field
+    = form.label :last_name
+    = form.text_field :last_name
+  .field
+    = form.label :email
+    = form.text_field :email
+  .field
+    = form.label :password
+    = form.password_field :password, type: :password
+  .actions
+    = form.submit "Sign up"