diff --git a/Gemfile b/Gemfile
index 315908f..2ebe497 100644
--- a/Gemfile
+++ b/Gemfile
@@ -15,7 +15,6 @@ gem 'coffee-rails', '~> 4.2'
# See https://github.com/rails/execjs#readme for more supported runtimes
# gem 'therubyracer', platforms: :ruby
gem 'haml'
-gem "bulma-rails", "~> 0.2.3"
# Use jquery as the JavaScript library
gem 'jquery-rails'
# Turbolinks makes navigating your web application faster. Read more: https://github.com/turbolinks/turbolinks
diff --git a/Gemfile.lock b/Gemfile.lock
index c23f570..27afca9 100644
--- a/Gemfile.lock
+++ b/Gemfile.lock
@@ -40,7 +40,6 @@ GEM
tzinfo (~> 1.1)
arel (7.1.4)
builder (3.2.2)
- bulma-rails (0.2.3)
sass (~> 3.2)
byebug (9.0.6)
coffee-rails (4.2.1)
@@ -158,7 +157,6 @@ PLATFORMS
ruby
DEPENDENCIES
- bulma-rails (~> 0.2.3)
byebug
coffee-rails (~> 4.2)
haml
diff --git a/app/assets/stylesheets/application.scss b/app/assets/stylesheets/application.scss
index 81bd2b2..786216d 100644
--- a/app/assets/stylesheets/application.scss
+++ b/app/assets/stylesheets/application.scss
@@ -1,40 +1,106 @@
-/*
- * 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
- */
-@import "bulma";
-
-.hero {
- margin-bottom: 30px;
+body,
+ul,
+li,
+h1,
+p {
+ margin: 0;
+ padding: 0;
}
-.todo-list {
- padding: 30px;
+*,
+*::before,
+*::after {
+ box-sizing: border-box;
+}
+
+body {
+ background: #fafafa;
+ color: #555;
+ font-family: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', sans-serif;
+ line-height: 1.4;
}
-.addTodo {
- margin-top: 30px;
+.container {
+ margin: 0 auto;
+ max-width: 450px;
+ padding: 15px;
}
-.addTodo input {
+.h1 {
+ font-size: 24px;
+ font-weight: 500;
+ margin-top: 60px;
+ padding-left: 48px;
+}
+
+.todo-list {
+ background: white;
+ border: 1px solid #e6e6e6;
+ border-radius: 6px;
+ box-shadow: 0 1px 3px rgba(0,0,0,.06);
+ margin: 15px 0 150px;
+}
+
+.todo-list-item {
+ display: flex;
+ font-size: 19px;
+ padding: 18px;
width: 100%;
- height: 50px;
- padding: 10px;
- resize: vertical;
- font-size: 18px;
+
+ + .new_todo,
+ + .todo-list-item {
+ border-top: 1px solid #e6e6e6
+ }
+}
+
+.button-complete {
+ background: #fff;
+ border: 3px solid #e6e6e6;
+ border-radius: 6px;
+ cursor: pointer;
+ flex: 0 0 auto;
+ height: 18px;
+ margin: 4px 12px 0 0;
+ width: 18px;
+}
+
+.button-edit {
+ color: #888;
+ font-size: 15px;
+ margin-left: auto;
+ position: relative;
+ top: 4px;
+}
+
+.input {
+ background: none;
+ border: none;
+ color: inherit;
+ line-height: inherit;
+ outline: none;
+ padding-left: 48px;
+}
+
+.notification {
+ background: #fff;
+ border: 1px solid #e6e6e6;
+ border-radius: 6px;
+ border-width: 1px;
+ box-shadow: 0 1px 3px rgba(0,0,0,.06);
+ color: #555;
+ display: flex;
+ padding: 15px;
+}
+
+.emoji {
+ font-size: 45px;
+ margin-right: 12px;
+}
+
+.weight-strong {
+ font-weight: 500;
}
-.addTodo label {
- display: none;
+.small {
+ font-size: 13px;
}
diff --git a/app/assets/stylesheets/scaffolds.scss b/app/assets/stylesheets/scaffolds.scss
deleted file mode 100644
index 443728e..0000000
--- a/app/assets/stylesheets/scaffolds.scss
+++ /dev/null
@@ -1,34 +0,0 @@
-#notice {
- color: red;
-}
-
-.field_with_errors {
- padding: 2px;
- background-color: red;
- display: table;
-}
-
-#error_explanation {
- width: 450px;
- border: 2px solid red;
- padding: 7px;
- padding-bottom: 0;
- margin-bottom: 20px;
- background-color: #f0f0f0;
-
- h2 {
- text-align: left;
- font-weight: bold;
- padding: 5px 5px 5px 15px;
- font-size: 12px;
- margin: -7px;
- margin-bottom: 0;
- background-color: #c00;
- color: #fff;
- }
-
- ul li {
- font-size: 12px;
- list-style: square;
- }
-}
diff --git a/app/assets/stylesheets/todos.scss b/app/assets/stylesheets/todos.scss
deleted file mode 100644
index e69de29..0000000
diff --git a/app/views/layouts/application.html.haml b/app/views/layouts/application.html.haml
index f805997..b631972 100644
--- a/app/views/layouts/application.html.haml
+++ b/app/views/layouts/application.html.haml
@@ -1,15 +1,13 @@
!!!
%html
%head
- %title ToDo List
+ %title Todo List
+ %meta{:charset => "utf-8"}
+ %meta{:"http-equiv" => "X-UA-Compatible", :content => "IE=edge,chrome=1"}
+ %meta{:name => "viewport", :content => "width=device-width, initial-scale=1"}
= favicon_link_tag "favicon.png", rel: 'shortcut icon', type: 'image/png'
= stylesheet_link_tag "application", media: "all"
= javascript_include_tag "application"
= csrf_meta_tags
%body
- %section.hero.is-dark
- .hero-body
- .container
- %h1.title Todo List
- %h2.subtitle Submit a new Todo to get started!
= yield
diff --git a/app/views/todos/_form.html.erb b/app/views/todos/_form.html.erb
index 5378b98..2b669dd 100644
--- a/app/views/todos/_form.html.erb
+++ b/app/views/todos/_form.html.erb
@@ -1,16 +1,3 @@
-<%= form_for(todo, :html => {:class => 'addTodo'}) do |f| %>
- <% if todo.errors.any? %>
-
-
<%= pluralize(todo.errors.count, "error") %> prohibited this todo from being saved:
-
-
- <% todo.errors.full_messages.each do |message| %>
- - <%= message %>
- <% end %>
-
-
Editing Todo
-
-<%= render 'form', todo: @todo %>
-
-<%= link_to 'Show', @todo %> |
-<%= link_to 'Back', todos_path %>
diff --git a/app/views/todos/edit.html.haml b/app/views/todos/edit.html.haml
new file mode 100644
index 0000000..cf402b7
--- /dev/null
+++ b/app/views/todos/edit.html.haml
@@ -0,0 +1,9 @@
+.container
+ .notification
+ .emoji 🚀
+ %div
+ %p.weight-strong This is your demo app.
+ %p.small Each branch gets its own database. Check it out and then head back to Runnable.
+ %h1.h1 Editing Todo
+ %ul.todo-list
+ =render 'form', todo: @todo
diff --git a/app/views/todos/index.html.haml b/app/views/todos/index.html.haml
index fe39347..e6533f4 100644
--- a/app/views/todos/index.html.haml
+++ b/app/views/todos/index.html.haml
@@ -1,13 +1,13 @@
-.container.todo-list
- - if @todos.empty?
- %p There are no todos!
- - else
+.container
+ .notification
+ .emoji 🚀
+ %div
+ %p.weight-strong This is your demo app.
+ %p.small Each branch gets its own database. Check it out and then head back to Runnable.
+ %h1.h1 Todo List
+ %ul.todo-list
- @todos.each do |todo|
- %article.media
- .media-content
- .content
- %p= todo.content
- .media-right
- %a= link_to 'Delete', todo, method: :delete, class: 'button is-danger'
- =render 'form', todo: @todo
- %p#notice= notice
+ %li.todo-list-item
+ %a= link_to '', todo, method: :delete, class: 'button-complete'
+ %p= todo.content
+ =render 'form', todo: @todo
diff --git a/app/views/todos/show.html.haml b/app/views/todos/show.html.haml
index e22fbbb..9669f6a 100644
--- a/app/views/todos/show.html.haml
+++ b/app/views/todos/show.html.haml
@@ -1,7 +1,12 @@
.container
- %p#notice= notice
- %br
- .box
- %p= @todo.content
- = link_to 'Edit', edit_todo_path(@todo), class: 'button'
- = link_to 'Back', todos_path, class: 'button'
+ .notification
+ .emoji 🚀
+ %div
+ %p.weight-strong This is your demo app.
+ %p.small Each branch gets its own database. Check it out and then head back to Runnable.
+ %h1.h1 Viewing Todo
+ %ul.todo-list
+ %li.todo-list-item
+ %a= link_to '', @todo, method: :delete, class: 'button-complete'
+ %p= @todo.content
+ = link_to 'Edit', edit_todo_path(@todo), class: 'button-edit'