Skip to content

Commit 5a9df12

Browse files
runnabrorunnabro
authored
Merge pull request #2 from RunnableDemo/update-style
update styles + add notification
2 parents 184baac + a6b510a commit 5a9df12

File tree

11 files changed

+134
-112
lines changed

11 files changed

+134
-112
lines changed

‎Gemfile‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,6 @@ gem 'coffee-rails', '~> 4.2'
1515
# See https://github.com/rails/execjs#readme for more supported runtimes
1616
# gem 'therubyracer', platforms: :ruby
1717
gem 'haml'
18-
gem "bulma-rails", "~> 0.2.3"
1918
# Use jquery as the JavaScript library
2019
gem 'jquery-rails'
2120
# Turbolinks makes navigating your web application faster. Read more: https://github.com/turbolinks/turbolinks

‎Gemfile.lock‎

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -40,7 +40,6 @@ GEM
4040
tzinfo (~> 1.1)
4141
arel (7.1.4)
4242
builder (3.2.2)
43-
bulma-rails (0.2.3)
4443
sass (~> 3.2)
4544
byebug (9.0.6)
4645
coffee-rails (4.2.1)
@@ -158,7 +157,6 @@ PLATFORMS
158157
ruby
159158

160159
DEPENDENCIES
161-
bulma-rails (~> 0.2.3)
162160
byebug
163161
coffee-rails (~> 4.2)
164162
haml

‎app/assets/stylesheets/application.scss‎

Lines changed: 96 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -1,40 +1,106 @@
1-
/*
2-
* This is a manifest file that'll be compiled into application.css, which will include all the files
3-
* listed below.
4-
*
5-
* Any CSS and SCSS file within this directory, lib/assets/stylesheets, vendor/assets/stylesheets,
6-
* or any plugin's vendor/assets/stylesheets directory can be referenced here using a relative path.
7-
*
8-
* You're free to add application-wide styles to this file and they'll appear at the bottom of the
9-
* compiled file so the styles you add here take precedence over styles defined in any other CSS/SCSS
10-
* files in this directory. Styles in this file should be added after the last require_* statement.
11-
* It is generally better to create a new file per style scope.
12-
*
13-
*= require_tree .
14-
*= require_self
15-
*/
16-
@import "bulma";
17-
18-
.hero {
19-
margin-bottom: 30px;
1+
body,
2+
ul,
3+
li,
4+
h1,
5+
p {
6+
margin: 0;
7+
padding: 0;
208
}
219

22-
.todo-list {
23-
padding: 30px;
10+
*,
11+
*::before,
12+
*::after {
13+
box-sizing: border-box;
14+
}
15+
16+
body {
17+
background: #fafafa;
18+
color: #555;
19+
font-family: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', sans-serif;
20+
line-height: 1.4;
2421
}
2522

26-
.addTodo {
27-
margin-top: 30px;
23+
.container {
24+
margin: 0 auto;
25+
max-width: 450px;
26+
padding: 15px;
2827
}
2928

30-
.addTodo input {
29+
.h1 {
30+
font-size: 24px;
31+
font-weight: 500;
32+
margin-top: 60px;
33+
padding-left: 48px;
34+
}
35+
36+
.todo-list {
37+
background: white;
38+
border: 1px solid #e6e6e6;
39+
border-radius: 6px;
40+
box-shadow: 0 1px 3px rgba(0,0,0,.06);
41+
margin: 15px 0 150px;
42+
}
43+
44+
.todo-list-item {
45+
display: flex;
46+
font-size: 19px;
47+
padding: 18px;
3148
width: 100%;
32-
height: 50px;
33-
padding: 10px;
34-
resize: vertical;
35-
font-size: 18px;
49+
50+
+ .new_todo,
51+
+ .todo-list-item {
52+
border-top: 1px solid #e6e6e6
53+
}
54+
}
55+
56+
.button-complete {
57+
background: #fff;
58+
border: 3px solid #e6e6e6;
59+
border-radius: 6px;
60+
cursor: pointer;
61+
flex: 0 0 auto;
62+
height: 18px;
63+
margin: 4px 12px 0 0;
64+
width: 18px;
65+
}
66+
67+
.button-edit {
68+
color: #888;
69+
font-size: 15px;
70+
margin-left: auto;
71+
position: relative;
72+
top: 4px;
73+
}
74+
75+
.input {
76+
background: none;
77+
border: none;
78+
color: inherit;
79+
line-height: inherit;
80+
outline: none;
81+
padding-left: 48px;
82+
}
83+
84+
.notification {
85+
background: #fff;
86+
border: 1px solid #e6e6e6;
87+
border-radius: 6px;
88+
border-width: 1px;
89+
box-shadow: 0 1px 3px rgba(0,0,0,.06);
90+
color: #555;
91+
display: flex;
92+
padding: 15px;
93+
}
94+
95+
.emoji {
96+
font-size: 45px;
97+
margin-right: 12px;
98+
}
99+
100+
.weight-strong {
101+
font-weight: 500;
36102
}
37103

38-
.addTodo label {
39-
display: none;
104+
.small {
105+
font-size: 13px;
40106
}

‎app/assets/stylesheets/scaffolds.scss‎

Lines changed: 0 additions & 34 deletions
This file was deleted.

‎app/assets/stylesheets/todos.scss‎

Whitespace-only changes.

‎app/views/layouts/application.html.haml‎

Lines changed: 4 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,13 @@
11
!!!
22
%html
33
%head
4-
%title ToDo List
4+
%title Todo List
5+
%meta{:charset => "utf-8"}
6+
%meta{:"http-equiv" => "X-UA-Compatible", :content => "IE=edge,chrome=1"}
7+
%meta{:name => "viewport", :content => "width=device-width, initial-scale=1"}
58
= favicon_link_tag "favicon.png", rel: 'shortcut icon', type: 'image/png'
69
= stylesheet_link_tag "application", media: "all"
710
= javascript_include_tag "application"
811
= csrf_meta_tags
912
%body
10-
%section.hero.is-dark
11-
.hero-body
12-
.container
13-
%h1.title Todo List
14-
%h2.subtitle <em>Submit</em> a new Todo to get started!
1513
= yield

‎app/views/todos/_form.html.erb‎

Lines changed: 2 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,3 @@
1-
<%= form_for(todo, :html => {:class => 'addTodo'}) do |f| %>
2-
<% if todo.errors.any? %>
3-
<div id="error_explanation">
4-
<h2><%= pluralize(todo.errors.count, "error") %> prohibited this todo from being saved:</h2>
5-
6-
<ul>
7-
<% todo.errors.full_messages.each do |message| %>
8-
<li><%= message %></li>
9-
<% end %>
10-
</ul>
11-
</div>
12-
<% end %>
13-
14-
<%= f.text_field :content, autofocus: true, placeholder: 'Add a Todo!' %>
15-
<%= f.submit 'Submit', :class => 'button is-dark is-fullwidth' %>
1+
<%= form_for(todo) do |f| %>
2+
<%= f.text_field :content, autofocus: true, placeholder: 'Add a task', class: 'todo-list-item input' %>
163
<% end %>

‎app/views/todos/edit.html.erb‎

Lines changed: 0 additions & 6 deletions
This file was deleted.

‎app/views/todos/edit.html.haml‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
.container
2+
.notification
3+
.emoji 🚀
4+
%div
5+
%p.weight-strong This is your demo app.
6+
%p.small Each branch gets its own database. Check it out and then head back to Runnable.
7+
%h1.h1 Editing Todo
8+
%ul.todo-list
9+
=render 'form', todo: @todo

‎app/views/todos/index.html.haml‎

Lines changed: 12 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,13 @@
1-
.container.todo-list
2-
- if @todos.empty?
3-
%p There are no todos!
4-
- else
1+
.container
2+
.notification
3+
.emoji 🚀
4+
%div
5+
%p.weight-strong This is your demo app.
6+
%p.small Each branch gets its own database. Check it out and then head back to Runnable.
7+
%h1.h1 Todo List
8+
%ul.todo-list
59
- @todos.each do |todo|
6-
%article.media
7-
.media-content
8-
.content
9-
%p= todo.content
10-
.media-right
11-
%a= link_to 'Delete', todo, method: :delete, class: 'button is-danger'
12-
=render 'form', todo: @todo
13-
%p#notice= notice
10+
%li.todo-list-item
11+
%a= link_to '', todo, method: :delete, class: 'button-complete'
12+
%p= todo.content
13+
=render 'form', todo: @todo

0 commit comments

Comments
 (0)