Merge pull request #41 from beatriceo/front-end

made settings page responsive and edited route from connections/new t…

app/assets/stylesheets/config/_bootstrap_variables.scss

@@ -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;

app/assets/stylesheets/config/_colors.scss

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

app/assets/stylesheets/pages/_settings.scss

@@ -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;
+}

app/assets/stylesheets/users/_show.scss

@@ -4,6 +4,7 @@
   display:flex;
   flex-direction: column;
   justify-content: center;
+  text-align: center;
 
   h2 {
     font-size: 1.5em;
@@ -21,12 +22,6 @@
         margin-right: .5em;
       }
     }
-    .profile-pic {
-      display: flex;
-      align-items: center;
-      margin-right: 3em;
-      img {
-        width: 10em;
   }
 }
 
@@ -34,7 +29,7 @@
   display: flex;
   flex-direction: column;
   justify-content: center;
-      color: #f2321f;
+  color: $primary;
   h1 {
     margin: 0 0 .5em 0 ;
   }
@@ -46,8 +41,19 @@
     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;
+}

app/controllers/connections_controller.rb

@@ -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

app/views/connections/new.html.erb

@@ -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>

app/views/pages/index.html.erb

@@ -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>

app/views/users/setting.html.erb

@@ -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' %>

app/views/users/show.html.erb

@@ -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>
 

config/routes.rb

@@ -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