made settings page responsive and edited route from connections/new to add_contact

This commit is contained in:
Beatrice Olivera 2018-09-02 00:47:41 +01:00
parent 6a1992a29f
commit da9e799436
10 changed files with 110 additions and 62 deletions

View File

@ -14,7 +14,7 @@ $gray-base: $gray;
$brand-primary: $primary; $brand-primary: $primary;
$brand-success: $green; $brand-success: $green;
$brand-info: $yellow; $brand-info: $yellow;
$brand-danger: $red; $brand-danger: $warn;
$brand-warning: $orange; $brand-warning: $orange;
$brand-secondary: $secondary; $brand-secondary: $secondary;
@ -52,3 +52,4 @@ $border-radius-small: 2px;
} }
// Override other variables below! // Override other variables below!
$input-border-focus: $primary;

View File

@ -8,6 +8,7 @@ $orange: #E67E22;
$green: #32B796; $green: #32B796;
$gray: #000000; $gray: #000000;
$light-gray: #F4F4F4; $light-gray: #F4F4F4;
$warn: #3d63cc;
$primary: #F55E4F; $primary: #F55E4F;
$secondary: #5ED17E; $secondary: #5ED17E;

View File

@ -91,3 +91,22 @@ input:checked + .slider:before {
.padding-right { .padding-right {
padding-right: 10px; padding-right: 10px;
} }
.margin-right {
margin-right: 10px;
}
.flex-inline {
display: flex;
flex-direction: row;
align-items: center;
}
.center-screen {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
min-height: 80vh;
}

View File

@ -4,6 +4,7 @@
display:flex; display:flex;
flex-direction: column; flex-direction: column;
justify-content: center; justify-content: center;
text-align: center;
h2 { h2 {
font-size: 1.5em; font-size: 1.5em;
@ -21,20 +22,14 @@
margin-right: .5em; margin-right: .5em;
} }
} }
.profile-pic {
display: flex;
align-items: center;
margin-right: 3em;
img {
width: 10em;
}
} }
}
.profile-text { .profile-text {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
justify-content: center; justify-content: center;
color: #f2321f; color: $primary;
h1 { h1 {
margin: 0 0 .5em 0 ; margin: 0 0 .5em 0 ;
} }
@ -45,9 +40,20 @@
font-style: italic; font-style: italic;
color: white; color: white;
} }
} }
}
} .vcenter {
display: inline-block;
vertical-align: middle;
float: none;
}
.vertical-padding {
padding-top: 5px;
padding-bottom: 5px;
}
.vertical-margin {
margin-top: 5px;
margin-bottom: 5px;
}

View File

@ -1,6 +1,5 @@
class ConnectionsController < ApplicationController class ConnectionsController < ApplicationController
def new def new
end end
def create def create
@ -10,9 +9,17 @@ class ConnectionsController < ApplicationController
@connection.contact = contact_user @connection.contact = contact_user
if @connection.save if @connection.save
contact_message = nil
if contact_user.first_name.nil? || contact_user.last_name.nil?
contact_message = "#{contact_user.email}"
else
contact_message = "#{contact_user.first_name} #{contact_user.last_name}"
end
flash[:notice] = "Added #{contact_message} to contacts"
redirect_to contacts_path redirect_to contacts_path
else else
flash[:alert] = "Invalid email address!"
render 'new'
end end
end end
end end

View File

@ -1,9 +1,23 @@
<div class="align-center"> <% params["action"] = "Add contact" %>
<h2>Add a new contact:</h2>
<%= form_for User.new, url: connections_path do |f| %>
<%= f.label :email, class: "email_label_color" %>:
<%= f.text_field :email %>
<%= f.submit %> <div class="center-screen">
<div class="align-center">
<div class="container">
<div class="row">
<div class="col-xs-offset-2 col-xs-8 col-xs-offset-2">
<h2>Enter an email address:</h2>
</div>
<%= simple_form_for User.new, url: connections_path, class: "input-group" do |f| %>
<div class="col-xs-offset-2 col-xs-8 col-xs-offset-2 ">
<div class="flex-inline">
<%= f.input_field :email, class: "form-control margin-right" %>
<div class="input-group-append">
<%= f.button :submit, value: "Add Contact" , class: "btn btn-primary" %>
</div>
</div>
</div>
<% end %> <% end %>
</div>
</div>
</div>
</div> </div>

View File

@ -8,7 +8,7 @@
<div class="contacts"> <div class="contacts">
<div class="contacts-header"> <div class="contacts-header">
<h2>Contacts</h2> <h2>Contacts</h2>
<%= link_to new_connection_path do %> <%= link_to add_contact_path do %>
<i class="fas fa-plus-square"></i> <i class="fas fa-plus-square"></i>
<% end %> <% end %>
</div> </div>

View File

@ -60,15 +60,15 @@
<div> <div>
<div class="card card-form card-form-no-hover"> <div class="card card-form card-form-no-hover">
<%= t.label :language, class:'padding-right no-margin font-weight-normal' %> <%= t.label :language, class:'padding-right no-margin font-weight-normal' %>
<%= t.input_field :language, collection: languages.sort, class:'input-field-text-black input-dropdown' %> <%= t.input_field :language, collection: languages.sort, class:'input-field-text-black input-dropdown form-control' %>
</div> </div>
<div class="card card-form card-form-no-hover"> <div class="card card-form card-form-no-hover">
<%= t.label :caption_font, class:'padding-right no-margin font-weight-normal' %> <%= t.label :caption_font, class:'padding-right no-margin font-weight-normal' %>
<%= t.input_field :caption_font, collection: fonts.sort, class:'input-field-text-black input-dropdown' %> <%= t.input_field :caption_font, collection: fonts.sort, class:'input-field-text-black input-dropdown form-control' %>
</div> </div>
<div class="card card-form card-form-no-hover"> <div class="card card-form card-form-no-hover">
<%= t.label :caption_font_size, class:'padding-right no-margin font-weight-normal' %> <%= t.label :caption_font_size, class:'padding-right no-margin font-weight-normal' %>
<%= t.input_field :caption_font_size, class:'input-field-text-black' %> <%= t.input_field :caption_font_size, class:'input-field-text-black input-dropdown form-control' %>
</div> </div>
<div class="card card-form card-form-no-hover"> <div class="card card-form card-form-no-hover">
<%= t.label :enable_transcript, class:'padding-right no-margin font-weight-normal' %> <%= t.label :enable_transcript, class:'padding-right no-margin font-weight-normal' %>

View File

@ -1,27 +1,28 @@
<div class="user-container"> <div class="user-container">
<div class="profile"> <div class="row">
<div class="profile-pic"> <div class="col-xs-12 col-md-3 vcenter">
<div class="profile-pic vertical-padding">
<% if @user.photo.url.nil? %> <% if @user.photo.url.nil? %>
<%= image_tag "https://upload.wikimedia.org/wikipedia/commons/8/89/Portrait_Placeholder.png", class: "img-circle"%> <%= image_tag "https://upload.wikimedia.org/wikipedia/commons/8/89/Portrait_Placeholder.png", class: "img-circle"%>
<% else %> <% else %>
<%= cl_image_tag @user.photo, class: "img-circle"%> <%= cl_image_tag @user.photo, class: "img-circle"%>
<% end %> <% end %>
</div> </div>
<div class="profile-text"> </div>
<div class="col-xs-12 col-md-4 vcenter">
<div class="profile-text vertical-padding">
<h1><%= @user.first_name %> <%= @user.last_name %></h1> <h1><%= @user.first_name %> <%= @user.last_name %></h1>
<h2 class="italics" ><%= @user.email %></h2> <h2 class="italics" ><%= @user.email %></h2>
</div> </div>
</div>
<div class="flex-end"> <div class="col-xs-12 col-md-4 vcenter">
<%= link_to "Edit Information", user_edit_path(@user), class: "btn btn-primary" %> <div class="flex-end vertical-padding">
<%= link_to "Delete Account", user_path(@user), class: "btn btn-danger", method: :delete, data: { <%= link_to "Edit Information", user_edit_path(@user), class: "btn btn-primary vertical-margin" %>
<%= link_to "Delete Account", user_path(@user), class: "btn btn-danger vertical-margin", method: :delete, data: {
confirm: "Are you sure?" confirm: "Are you sure?"
} %> } %>
</div> </div>
</div> </div>
</div> </div>
</div>

View File

@ -36,12 +36,11 @@ Rails.application.routes.draw do
# For details on the DSL available within this file, see http://guides.rubyonrails.org/routing.html # For details on the DSL available within this file, see http://guides.rubyonrails.org/routing.html
get '/home', to: 'pages#home' get '/home', to: 'pages#home'
get '/users/:id', to: 'users#show', as: :user get '/users/:id', to: 'users#show', as: :user
get '/users/:id/edit', to: 'users#edit', as: :user_edit get '/users/:id/edit', to: 'users#edit', as: :user_edit
patch '/users/:id', to: 'users#update' patch '/users/:id', to: 'users#update'
delete '/users/:id', to: 'users#destroy' delete '/users/:id', to: 'users#destroy'
resources :connections, only: [:create, :new] resources :connections, only: [:create]
#get '/add_contact', to: 'connections#create' get '/add_contact', to: 'connections#new', as: :add_contact
end end