Merge pull request #41 from beatriceo/front-end

made settings page responsive and edited route from connections/new t…
This commit is contained in:
Beatrice Olivera 2018-09-02 00:48:21 +01:00 committed by GitHub
commit 3e92e26177
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
10 changed files with 110 additions and 62 deletions

View File

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

View File

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

View File

@ -91,3 +91,22 @@ input:checked + .slider:before {
.padding-right {
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;
flex-direction: column;
justify-content: center;
text-align: center;
h2 {
font-size: 1.5em;
@ -21,20 +22,14 @@
margin-right: .5em;
}
}
.profile-pic {
display: flex;
align-items: center;
margin-right: 3em;
img {
width: 10em;
}
}
}
.profile-text {
.profile-text {
display: flex;
flex-direction: column;
justify-content: center;
color: #f2321f;
color: $primary;
h1 {
margin: 0 0 .5em 0 ;
}
@ -45,9 +40,20 @@
font-style: italic;
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
def new
end
def create
@ -10,9 +9,17 @@ class ConnectionsController < ApplicationController
@connection.contact = contact_user
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
else
flash[:alert] = "Invalid email address!"
render 'new'
end
end
end

View File

@ -1,9 +1,23 @@
<div class="align-center">
<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 %>
<% params["action"] = "Add contact" %>
<%= 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 %>
</div>
</div>
</div>
</div>

View File

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

View File

@ -60,15 +60,15 @@
<div>
<div class="card card-form card-form-no-hover">
<%= 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 class="card card-form card-form-no-hover">
<%= 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 class="card card-form card-form-no-hover">
<%= 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 class="card card-form card-form-no-hover">
<%= t.label :enable_transcript, class:'padding-right no-margin font-weight-normal' %>

View File

@ -1,27 +1,28 @@
<div class="user-container">
<div class="profile">
<div class="profile-pic">
<div class="row">
<div class="col-xs-12 col-md-3 vcenter">
<div class="profile-pic vertical-padding">
<% if @user.photo.url.nil? %>
<%= image_tag "https://upload.wikimedia.org/wikipedia/commons/8/89/Portrait_Placeholder.png", class: "img-circle"%>
<% else %>
<%= cl_image_tag @user.photo, class: "img-circle"%>
<% end %>
</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>
<h2 class="italics" ><%= @user.email %></h2>
</div>
<div class="flex-end">
<%= link_to "Edit Information", user_edit_path(@user), class: "btn btn-primary" %>
<%= link_to "Delete Account", user_path(@user), class: "btn btn-danger", method: :delete, data: {
</div>
<div class="col-xs-12 col-md-4 vcenter">
<div class="flex-end vertical-padding">
<%= 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?"
} %>
</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
get '/home', to: 'pages#home'
get '/users/:id', to: 'users#show', as: :user
get '/users/:id/edit', to: 'users#edit', as: :user_edit
patch '/users/:id', to: 'users#update'
delete '/users/:id', to: 'users#destroy'
resources :connections, only: [:create, :new]
#get '/add_contact', to: 'connections#create'
resources :connections, only: [:create]
get '/add_contact', to: 'connections#new', as: :add_contact
end