Add styling to the new, edit and form event view

app/assets/stylesheets/application.scss

@@ -17,7 +17,7 @@
 @import "bulma";
 
 .upcoming {
-  height: 40vh;
+ height: 40vh;
  border: 3px solid #f7f1f1;
 }
 
@@ -26,7 +26,7 @@
 }
 
 .event-title {
- color: #0a7565;
+ color: #229c8a;
  font-size: 18px;
  font-weight: 600;
 }
@@ -38,8 +38,20 @@
  text-decoration: none;
 }
 
-.title-event {
- background-color: red;
- text-align: center;
- font-size: 50px;
+.new-form-label {
+ font-weight: 500;
+ font-size: 17px;
 }
+
+.textarea:not([rows]) {
+ min-height: 50px;
+ margin-top: 10px;
+}
+
+.new-form-description {
+ height: 120px;
+}
+
+.date { margin-top: -8px; }
+
+.date-label { margin-right: 10px; }

app/helpers/events_helper.rb

@@ -29,10 +29,10 @@ def event_controls(event)
  if user_signed_in? && current_user.id == event.creator_id
  out += "<div class=\"is-flex mb-3\">"
  out += link_to 'Edit', edit_event_path(@event), class: 'button is-warning is-outlined mr-2'
- out += button_to 'Delete', event, method: :delete, data: { confirm: 'Are you sure?' }, class: 'button is-danger is-outlined'
+ out += button_to 'Delete', event, method: :delete, data: { confirm: 'Are you sure?' }, class: 'button is-danger is-outlined mr-2'
+ out += link_to 'Back', events_path, class: 'button is-outlined'
  out += "</div>"
  end
- out += link_to 'Back', events_path, class: 'button is-outlined'
  out.html_safe
  end
 

app/models/event.rb

@@ -7,6 +7,7 @@ class Event < ApplicationRecord
  scope :upcoming, -> { where("Date >= ?", Date.today).order('Date ASC') }
  scope :past, -> { where("Date < ?", Date.today).order('Date DESC') }
 
- validates :location, length: { minumum: 5, maximum: 100 }
- validates :description, length: { minumum: 5, maximum: 500 }
+ validates :title, presence: true, length: { minumum: 5, maximum: 50 }
+ validates :description, presence: true, length: { minumum: 5, maximum: 999 }
+ validates :location, presence: true, length: { minumum: 5, maximum: 100 }
 end

app/views/events/_form.html.erb

@@ -1,20 +1,20 @@
 <%= simple_form_for(@event) do |f| %>
- <%= f.error_notification %>
- <%= f.error_notification message: f.object.errors[:base].to_sentence if f.object.errors[:base].present? %>
-
- <div class="form-inputs">
- <%= f.input :title, label: "Event name:", input_html: { class: " textarea "}, wrapper: false, label_html: { class: "label" }, placeholder: "Event name", autofocus: true %>
- 
- <%= f.input :description, label: "Description:", input_html: { class: "textarea "}, wrapper: false, label_html: { class: "label" }, placeholder: "Describe your event", autofocus: true %>
-
- <%= f.input :location, label: "Location:", input_html: { class: " textarea "}, wrapper: false, label_html: { class: "label" } %>
-
- <%= f.input :date, label: "date", input_html: { class: "datetime_select "}, wrapper: false, label_html: {class: "label"}, placeholder: "Where is it going to be?" %>
+<%= f.error_notification %>
+<%= f.error_notification message: f.object.errors[:base].to_sentence if f.object.errors[:base].present? %>
+ 
+ <%= f.input :title, label: "Event Title:", input_html: { class: "textarea" }, label_html: { class: 'new-form-label' }, wrapper: false %>
+ <br>
+ <%= f.input :description, label: "Description:", input_html: { class: "textarea new-form-description" }, label_html: { class: 'new-form-label' }, wrapper: false, placeholder: "Describe your event" %>
+ <br>
+ <%= f.input :location, label: "Location:", input_html: { class: " textarea" }, label_html: { class: 'new-form-label' }, wrapper: false, placeholder: "Where is it going to be?" %>
+ <br>
 
+ <div class="is-flex is-align-content-center mt-5">
+ <%= f.input :date, label: "Date:", input_html: { class: "date button is-flex is-align-content-center mx-1 is-primary is-outlined" }, wrapper: false, label_html: { class: 'new-form-label date-label' } %>
  </div>
-
- <div class="form-actions">
- <%= f.button :submit %>
- </div>
-<% end %>
-
+ 
+ <p class="mt-5 pt-3 is-flex">
+ <%= f.button :submit, class: 'button is-primary' %>
+ </p>
+ <br>
+<% end %>

app/views/events/edit.html.erb

@@ -1,6 +1,10 @@
-<h1>Editing Event</h1>
-
-<%= render 'form', event: @event %>
-
-<%= link_to 'Show', @event %>
-<%= link_to 'Back', events_path %>
+<div class="columns mt-5">
+ <div class="column is-10 is-offset-1">
+ <h1 class="title">Editing Event</h1>
+ <%= render 'form', event: @event %>
+ <div class="mt-6">
+ <%= link_to 'Back to Events', @event, class: "button is-info is-outlined" %>
+ <%= link_to 'Go to Homepage', events_path, class: "button ml-2 is-link is-outlined" %>
+ </div>
+ </div>
+</div>

app/views/events/new.html.erb

@@ -1,6 +1,9 @@
-<h1 class="title">Create a new Event</h1>
- <%= render 'form', event: @event %>
-
-<p class="control">
- <%= link_to 'Cancel', events_path, class: "button is-dark" %>
-</p>
+<div class="columns mt-5">
+ <div class="column is-10 is-offset-1">
+ <h1 class="title">Create a new Event</h1>
+ <%= render 'form', event: @event %>
+ <div class="mt-6">
+ <%= link_to 'Cancel', events_path, class: "button is-dark is-outlined mt-6" %>
+ </div>
+ </div>
+</div>

app/views/events/show.html.erb

@@ -27,11 +27,11 @@
  </ol>
  </p>
 
- <p class="mt-6">
+ <p class="mt-4">
  <%= render 'attend_cancel' %>
  </p>
 
- <p class="my-3">
+ <p class="my-4">
  <%= event_controls(@event) %>
  </p>
  </div>

config/locales/simple_form.en.yml

@@ -4,7 +4,7 @@ en:
  "no": 'No'
  required:
  text: 'required'
- mark: '*'
+ mark: ''
  # You can uncomment the line below if you need to overwrite the whole required html.
  # When using html, text and mark won't be used.
  # html: '<abbr title="required">*</abbr>'