lots of css fiddling

Ada-C7 · Mar 26, 2017 · e2264ec · e2264ec
1 parent e2c7d0d
commit e2264ec
Show file tree

Hide file tree

Showing 8 changed files with 2,815 additions and 167 deletions.
diff --git a/app/assets/stylesheets/application.css b/app/assets/stylesheets/application.css
@@ -1,117 +1,141 @@
 /*
- * This is a manifest file that'll be compiled into application.css, which will include all the files
- * listed below.
- *
- * Any CSS and SCSS file within this directory, lib/assets/stylesheets, vendor/assets/stylesheets,
- * or any plugin's vendor/assets/stylesheets directory can be referenced here using a relative path.
- *
- * You're free to add application-wide styles to this file and they'll appear at the bottom of the
- * compiled file so the styles you add here take precedence over styles defined in any other CSS/SCSS
- * files in this directory. Styles in this file should be added after the last require_* statement.
- * It is generally better to create a new file per style scope.
- *
- *= require_tree .
- *= require_self
- */
-
- body {
-   width: 90%;
-   max-width: 800px;
-   margin: auto;
- }
-
- ul {
-   padding: 0;
- }
-
- li {
-   list-style-type: none;
-   font-size: 1.3em;
- }
-
- li a:first-child, h2 a {
-   margin-right: 3px;
-   color: #000;
- }
-
- li a:first-child:hover, h2 a:hover {
-   text-shadow: 0 0 6px rgba(35, 173, 255, 1);
- }
-
- li a + a {
-   color: #000;
-
- }
-
- li a + a:hover {
-   color: #808080;
- }
-
- header {
-   background: orange;
-   padding: 2%;
- }
-
- header h1 a {
-   color: #fff;
-   margin: 0;
-   transition: all 0.5s;
- }
-
- header h1 a:hover {
-   color: #ffe14f;
- }
-
- a {
-   text-decoration: none;
- }
-
- form {
-   width: 95%;
-   max-width: 500px;
-   padding: 10px;
-   border: dashed #ccc 1px;
-   border-radius: 10px;
- }
-
- form * {
-   margin: 2%;
- }
-
- input[type="text"] {
-   height: 20px;
- }
-
- form label + * {
-   border: solid #ccc 1px;
-   border-radius: 5px;
- }
-
- input:focus, textarea:focus {
-   outline: none;
-   background: #eee;
- }
-
- input[type="text"], textarea {
-   width: 95%;
-   display: block;
- }
-
- textarea {
-   height: 100px;
- }
-
- input[type="submit"] {
-   display: block;
-   width: 80%;
-   max-width: 200px;
-   margin: auto;
-   padding: 4px;
-   border-width: 1px;
-   border-radius: 5px;
- }
-
- input[type="submit"]:active, input[type="submit"]:focus {
-   // border-radius: 5px;
-   // border-width: 1px;
- }
+* This is a manifest file that'll be compiled into application.css, which will include all the files
+* listed below.
+*
+* Any CSS and SCSS file within this directory, lib/assets/stylesheets, vendor/assets/stylesheets,
+* or any plugin's vendor/assets/stylesheets directory can be referenced here using a relative path.
+*
+* You're free to add application-wide styles to this file and they'll appear at the bottom of the
+* compiled file so the styles you add here take precedence over styles defined in any other CSS/SCSS
+* files in this directory. Styles in this file should be added after the last require_* statement.
+* It is generally better to create a new file per style scope.
+*
+*= require_tree .
+*= require_self
+*/
+
+/*** main structure stuff ***/
+body {
+  width: 90%;
+  max-width: 800px;
+  margin: auto;
+  height:100vh;
+}
+
+header {
+  background-color: orange;
+  padding: 2%;
+  color: #fff;
+}
+
+header h1 a {
+  color: #fff;
+  margin: 0;
+  transition: all 0.5s;
+}
+
+header h1 a:hover {
+  color: #ffe14f;
+}
+
+main {
+  padding: 0 2%;
+}
+
+footer p {
+  text-align: center;
+  margin-top: 5%;
+}
+
+a {
+  text-decoration: none;
+}
+
+p a {
+  color: #FF8C00;
+  border: solid 1px #995400;
+  padding: 5px;
+  margin-right: 3px;
+  border-radius: 5px;
+}
+
+p a:hover {
+  color: #ffe14f;
+}
+
+h2 {
+  color: #FF8C00;
+}
+
+/*** task list styling ***/
+ul {
+  padding: 0;
+}
+
+li {
+  list-style-type: none;
+  font-size: 1.3em;
+}
+
+li a:first-child, h2 a {
+  margin-right: 3px;
+  color: #000;
+}
+
+li a:first-child:hover, h2 a:hover {
+  text-shadow: 0 0 6px rgba(35, 173, 255, 1);
+}
+
+li a + a {
+  color: #000;
+}
+
+li a + a:hover {
+  color: #808080;
+}
+
+/*** forms ***/
+form.new_task, form.edit_task {
+  width: 95%;
+  max-width: 500px;
+  padding: 10px;
+  border: dashed #ccc 1px;
+  border-radius: 10px;
+}
+
+form * {
+  margin: 2%;
+}
+
+input[type="text"] {
+  height: 20px;
+}
+
+form label + * {
+  border: solid #ccc 1px;
+  border-radius: 5px;
+}
+
+input:focus, textarea:focus {
+  outline: none;
+  background: #eee;
+}
+
+input[type="text"], textarea {
+  width: 95%;
+  display: block;
+}
+
+textarea {
+  height: 100px;
+}
+
+form.new_task input[type="submit"], form.edit_task input[type="submit"] {
+  display: block;
+  width: 80%;
+  max-width: 200px;
+  margin: auto;
+  padding: 4px;
+  border-width: 1px;
+  border-radius: 5px;
+}
diff --git a/app/views/layouts/application.html.erb b/app/views/layouts/application.html.erb
@@ -1,7 +1,7 @@
 <!DOCTYPE html>
 <html>
   <head>
-    <title>TaskList</title>
+    <title><%= @title %>Tasks Tasks Tasks</title>
     <%= csrf_meta_tags %>
 
     <%= stylesheet_link_tag    'application', media: 'all', 'data-turbolinks-track': 'reload' %>

diff --git a/app/views/tasks/edit.html.erb b/app/views/tasks/edit.html.erb
@@ -1,7 +1,9 @@
-<h2>Edit <%= @task.name %></h2>
+<% @title = "Edit " + @task.name + " - " %>
 
-<%= render partial: "form", locals: { action_name: "Edit"} %>
+<main>
+  <h2>Edit <%= @task.name %></h2>
 
-<p>
-  <%= link_to "Back to " + @task.name, task_path(@task.id) %>
-</p>
+  <%= render partial: "form", locals: { action_name: "Edit"} %>
+
+  <p><%= link_to "Back to " + @task.name, task_path(@task.id) %></p>
+</main>
diff --git a/app/views/tasks/index.html.erb b/app/views/tasks/index.html.erb
@@ -1,18 +1,20 @@
-<h2>Tasks</h2>
+<main>
+  <h2>Tasks</h2>
 
-<ul>
-  <% @tasks.each do |task| %>
-    <li>
-      <% if task.completed %>
-        <%= link_to raw("&#9745;"), toggle_complete_path(task.id), method: :patch %>
-      <% else %>
-        <%= link_to raw("&#9744;"), toggle_complete_path(task.id), method: :patch %>
-      <% end %>
-      <%= link_to task.name, task_path(task.id) %>
-    </li>
-  <% end %>
-</ul>
+  <ul>
+    <% @tasks.each do |task| %>
+      <li>
+        <% if task.completed %>
+          <%= link_to raw("&#9745;"), toggle_complete_path(task.id), method: :patch %>
+        <% else %>
+          <%= link_to raw("&#9744;"), toggle_complete_path(task.id), method: :patch %>
+        <% end %>
+        <%= link_to task.name, task_path(task.id) %>
+      </li>
+    <% end %>
+  </ul>
 
-<p>
-  <%= link_to "Add New Task", new_task_path %>
-</p>
+  <p>
+    <%= link_to "Add New Task", new_task_path %>
+  </p>
+</main>
diff --git a/app/views/tasks/new.html.erb b/app/views/tasks/new.html.erb
@@ -1,6 +1,9 @@
-<h2>Add New Task</h2>
+<% @title = "Add New Task - " %>
 
-<%= render partial: "form", locals: { action_name: "Add"} %>
+<main>
+  <h2>Add New Task</h2>
 
+  <%= render partial: "form", locals: { action_name: "Add"} %>
 
-<p><%= link_to "Back to tasks", tasks_path %></p>
+  <p><%= link_to "Back to tasks", tasks_path %></p>
+</main>
diff --git a/app/views/tasks/show.html.erb b/app/views/tasks/show.html.erb
@@ -1,30 +1,31 @@
-<h2>
-  <% if @task.completed %>
-    <%= link_to raw("&#9745;"), toggle_complete_path, method: :patch %>
-  <% else %>
-    <%= link_to raw("&#9744;"), toggle_complete_path, method: :patch %>
-  <% end %>
-  <%= @task.name %>
-</h2>
+<% @title = @task.name + " - " %>
 
-<p><%= @task.description %></p>
+<main>
+  <h2>
+    <%= @task.name %>
+    <% if @task.completed %>
+      <%= link_to raw("&#9745;"), toggle_complete_path, method: :patch %>
+    <% else %>
+      <%= link_to raw("&#9744;"), toggle_complete_path, method: :patch %>
+    <% end %>
+  </h2>
 
-<% if @task.completed %>
-  <p>&check; Task completed on <%= @task.completed.strftime("%m/%d/%Y") %>! Yay!</p>
-<% else %>
-  <p><%= @task.deadline.strftime("Complete by: %m/%d/%Y") %></p>
-<% end %>
+  <p><%= @task.description %></p>
 
-<p>
-  <%= link_to "Edit Task", edit_task_path %>
-</p>
+  <p>
+    <% if @task.completed %>
+      <p><%= @task.completed.strftime("Completed on: %m/%d/%Y") %> &check;</p>
+    <% else %>
+      <p><%= @task.deadline.strftime("Deadline: %m/%d/%Y") %></p>
+    <% end %>
+  </p>
 
-<p>
-  <%=
-    link_to "Delete Task", delete_task_path,
-    data: { confirm: "Are you sure you want to delete this task?" },
-    method: :delete
-  %>
-</p>
-
-<p><%= link_to "Back to tasks", tasks_path %></p>
+  <p>
+    <%= link_to "Edit Task", edit_task_path %>
+    <%=
+      link_to "Delete Task", delete_task_path,
+      data: { confirm: "Are you sure you want to delete this task?" },
+      method: :delete
+    %>
+  </p>
+</main>
diff --git a/db/development.sqlite3 b/db/development.sqlite3