diff --git a/Gemfile b/Gemfile
index 542d4b9..3784b67 100644
--- a/Gemfile
+++ b/Gemfile
@@ -17,9 +17,10 @@ gem 'uglifier', '>= 1.3.0'
gem 'responders'
# Use CoffeeScript for .coffee assets and views
gem 'coffee-rails', '~> 4.2'
-
+gem 'jquery-rails'
# Build JSON APIs with ease. Read more: https://github.com/rails/jbuilder
gem 'jbuilder', '~> 2.5'
+gem 'bootstrap', '~> 4.4.1'
# Use Redis adapter to run Action Cable in production
# gem 'redis', '~> 4.0'
# Use ActiveModel has_secure_password
diff --git a/Gemfile.lock b/Gemfile.lock
index c1a3df3..b65d17c 100644
--- a/Gemfile.lock
+++ b/Gemfile.lock
@@ -47,9 +47,15 @@ GEM
archive-zip (0.12.0)
io-like (~> 0.3.0)
arel (9.0.0)
+ autoprefixer-rails (9.7.4)
+ execjs
bindex (0.8.1)
bootsnap (1.4.5)
msgpack (~> 1.0)
+ bootstrap (4.4.1)
+ autoprefixer-rails (>= 9.1.0)
+ popper_js (>= 1.14.3, < 2)
+ sassc-rails (>= 2.0.0)
builder (3.2.4)
byebug (11.1.1)
capybara (3.31.0)
@@ -83,6 +89,10 @@ GEM
io-like (0.3.0)
jbuilder (2.9.1)
activesupport (>= 4.2.0)
+ jquery-rails (4.3.5)
+ rails-dom-testing (>= 1, < 3)
+ railties (>= 4.2.0)
+ thor (>= 0.14, < 2.0)
listen (3.1.5)
rb-fsevent (~> 0.9, >= 0.9.4)
rb-inotify (~> 0.9, >= 0.9.7)
@@ -104,6 +114,7 @@ GEM
nokogiri (1.10.7)
mini_portile2 (~> 2.4.0)
pg (1.2.2)
+ popper_js (1.16.0)
public_suffix (4.0.3)
puma (3.12.2)
rack (2.1.2)
@@ -156,6 +167,14 @@ GEM
sprockets (>= 2.8, < 4.0)
sprockets-rails (>= 2.0, < 4.0)
tilt (>= 1.1, < 3)
+ sassc (2.2.1)
+ ffi (~> 1.9)
+ sassc-rails (2.1.2)
+ railties (>= 4.0.0)
+ sassc (>= 2.0)
+ sprockets (> 3.0)
+ sprockets-rails
+ tilt
selenium-webdriver (3.142.7)
childprocess (>= 0.5, < 4.0)
rubyzip (>= 1.2.2)
@@ -197,11 +216,13 @@ PLATFORMS
DEPENDENCIES
bootsnap (>= 1.1.0)
+ bootstrap (~> 4.4.1)
byebug
capybara (>= 2.15)
chromedriver-helper
coffee-rails (~> 4.2)
jbuilder (~> 2.5)
+ jquery-rails
listen (>= 3.0.5, < 3.2)
pg
puma (~> 3.11)
diff --git a/app/assets/javascripts/application.js b/app/assets/javascripts/application.js
index 43ba7e9..808581b 100644
--- a/app/assets/javascripts/application.js
+++ b/app/assets/javascripts/application.js
@@ -12,4 +12,7 @@
//
//= require rails-ujs
//= require activestorage
+//= require jquery3
+//= require popper
+//= require bootstrap
//= require_tree .
diff --git a/app/javascript/components/App.css b/app/javascript/components/App.css
index b8a8a18..7363bf8 100644
--- a/app/javascript/components/App.css
+++ b/app/javascript/components/App.css
@@ -17,7 +17,7 @@ body {
}
header {
- background: #f57011;
+ background: darkseagreen;
height: 60px;
}
@@ -31,9 +31,6 @@ header h1, header h1 a{
text-decoration: none;
}
-header h1 a:hover {
- text-decoration: underline;
-}
.grid {
display: grid;
@@ -67,22 +64,11 @@ header h1 a:hover {
background: #f8e5ce;
}
-.eventList a {
- display: block;
- color: black;
- text-decoration: none;
- border-bottom: 1px solid #dddddd;
- padding: 8px 6px 10px;
- outline: 0;
-}
.eventList h2 > a {
- color: #236fff;
font-size: 15px;
float: right;
font-weight: normal;
- border-bottom: none;
- padding: 0px;
}
.eventForm {
@@ -142,23 +128,6 @@ button[type="submit"] {
font-weight: 0.9;
}
-button.delete {
- background: none !important;
- border: none;
- padding: 0 !important;
- margin-left: 10px;
- cursor: pointer;
- color: #236fff;
- font-size: 15px;
- font-weight: normal;
- margin: 3px 0 0 0;
- text-decoration: none;
-}
-
-button.delete:hover {
- text-decoration: underline;
-}
-
h2 a {
color: #236fff;
font-size: 15px;
@@ -167,10 +136,6 @@ h2 a {
text-decoration: none;
}
-h2 a:hover {
- text-decoration: underline;
-}
-
.form-actions a {
color: #236fff;
font-size: 15px;
@@ -178,12 +143,50 @@ h2 a:hover {
text-decoration: none;
}
-.form-actions a:hover {
- text-decoration: underline;
-}
-
input.search {
width: 92%;
margin: 15px 2px;
padding: 4px 0 6px 6px;
+}
+
+.new-button {
+ background-color: #4CAF50;
+ border: none;
+ color: white;
+ padding: 1px 10px;
+ text-align: center;
+ text-decoration: none;
+ display: inline-block;
+ font-size: 16px !important;
+ margin: 4px 2px;
+ cursor: pointer;
+ border-radius: 5px
+}
+
+.edit-button {
+ background-color: darkorange;
+ border: none;
+ color: white;
+ padding: 0px 10px;
+ text-align: center;
+ text-decoration: none;
+ display: inline-block;
+ font-size: 16px;
+ margin: 4px 12px;
+ cursor: pointer;
+ border-radius: 5px
+}
+
+.delete-button {
+ background-color: red;
+ border: none;
+ color: white;
+ padding: 8px 10px;
+ text-align: center;
+ text-decoration: none;
+ display: inline-block;
+ font-size: 16px;
+ margin: 4px 0px;
+ cursor: pointer;
+ border-radius: 5px
}
\ No newline at end of file
diff --git a/app/javascript/components/Event.js b/app/javascript/components/Event.js
index b0d0581..0f6066c 100644
--- a/app/javascript/components/Event.js
+++ b/app/javascript/components/Event.js
@@ -9,8 +9,8 @@ const Event = ({ event, onDelete }) => (
{event.event_date}
{' - '}
{event.event_type}
- Edit
-