Merge pull request #40 from beatriceo/front-end

Front end
This commit is contained in:
Beatrice Olivera 2018-09-01 20:27:34 +01:00 committed by GitHub
commit 2f6d020b26
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
16 changed files with 371 additions and 229 deletions

View File

@ -12,19 +12,23 @@
font-size: 2em;
font-weight: bold;
a:hover {
color: $primary;
}
}
.right-align {
height: 100%;
width: 16em;
margin-right: 5em;
margin-right: 4em;
display: flex;
align-items: center;
justify-content: space-between;
.links {
display: flex;
height: inherit;
div {
height: inherit;
display: flex;
@ -32,19 +36,26 @@
border-bottom: 5px solid transparent;
&:first-child {
margin-right: 1em;
margin-right: 2.5em;
}
&.active {
border-bottom: 5px solid $primary;
color: white;
a {
color: white;
}
}
&:hover {
color: white;
}
&.active, &:hover {
a {
color: white;
}
}
a {
color: #C4C4C4;
color: $text-inactive;
text-decoration: none;
}
}
@ -53,7 +64,28 @@
.profile {
img {
width: 3.25em;
width: 3em;
padding: 0.2em;
}
}
.burger-menu {
margin-right: 20px;
color: $primary;
}
.polyglot-dropdown {
background-color: $navbar-background;
li {
a {
color: $text-inactive;
&:hover {
color: white;
background-color: $background;
}
}
}
}
}

View File

@ -15,4 +15,5 @@ $background: #33333D;
$card-background: #464650;
$navbar-background: #1F1F29;
$text-darker: #CDCDCD;
$text-inactive: #C4C4C4;
$icon: #EDECEC;

View File

@ -1,9 +1,9 @@
// Import Google fonts
@import url("https://fonts.googleapis.com/css?family=Open+Sans:400,300,700|Raleway:400,100,300,700,500");
@import url("https://fonts.googleapis.com/css?family=Assistant:400,700|Hind:400,700");
// Define fonts for body and headers
$body-font: "Open Sans", "Helvetica", "sans-serif";
$headers-font: "Raleway", "Helvetica", "sans-serif";
$body-font: "Hind", "Helvetica", "sans-serif";
$headers-font: "Assistant", "Helvetica", "sans-serif";
// To use a font file (.woff) uncomment following lines
// @font-face {

View File

@ -11,6 +11,7 @@ a:hover {
}
.card {
min-width: 360px;
display: flex;
justify-content: space-between;
background: $card-background;
@ -72,7 +73,16 @@ a:hover {
}
.video-content {
height: 485px;
// height: 485px;
padding-left: 0.2vw;
display: flex;
justify-content: center;
.flex-video {
height: 100%;
width: 100%;
flex: 1 1 auto;
}
// background-color: black;
}
@ -132,16 +142,19 @@ a:hover {
align-items: center;
}
.contact {
color: white;
}
.contacts {
height: 570px;
display: flex;
flex-direction: column;
justify-content: center;
}
.contacts-list{
height: 90vh;
overflow: scroll;
}
@ -152,10 +165,3 @@ a:hover {

View File

@ -1,4 +1,3 @@
// Specific CSS for your home-page
video {
transform: rotateY(180deg);
-webkit-transform:rotateY(180deg); /* Safari and Chrome */

View File

@ -1,3 +1,4 @@
// Import page-specific CSS files here.
@import "home";
@import "contacts"
@import "contacts";
@import "settings";

View File

@ -0,0 +1,93 @@
.card-form {
padding: 20px;
}
.card-form-no-hover {
&:hover {
box-shadow: 1px 1px 15px 1px rgba(0, 0, 0, 0.2);
}
}
.input-dropdown {
width: 196px;
}
.switch {
position: relative;
display: inline-block;
width: 60px;
height: 34px;
}
.switch input {display:none;}
.slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #ccc;
-webkit-transition: .4s;
transition: .4s;
}
.slider:before {
position: absolute;
content: "";
height: 26px;
width: 26px;
left: 4px;
bottom: 4px;
background-color: white;
-webkit-transition: .4s;
transition: .4s;
}
input:checked + .slider {
background-color: $primary;
}
input:focus + .slider {
box-shadow: 0 0 1px $primary;
}
input:checked + .slider:before {
-webkit-transform: translateX(26px);
-ms-transform: translateX(26px);
transform: translateX(26px);
}
/* Rounded sliders */
.slider.round {
border-radius: 34px;
}
.slider.round:before {
border-radius: 50%;
}
.input-field-text-black {
color: black;
}
.settings {
color: white;
}
.no-padding {
padding: 0;
}
.no-margin {
margin: 0;
}
.font-weight-normal {
font-weight: normal;
}
.padding-right {
padding-right: 10px;
}

View File

@ -1,12 +1,15 @@
const triggerModalEvent = () => {
const btn = document.getElementById("modalTrigger");
const modal = document.getElementById("myModal");
if (btn) {
btn.addEventListener('click', function(event) {
$('#myModal').modal('show');
});
}
const buttons = document.querySelectorAll(".modalTrigger");
buttons.forEach(btn => {
if (btn) {
btn.addEventListener('click', function(event) {
const btnId = btn.getAttribute('data-user-id')
$("#myModal"+`${btnId}`).modal('show');
});
}
})
}
export { triggerModalEvent }

View File

@ -4,6 +4,35 @@ import { triggerModalEvent } from "../components/modal.js";
triggerModalEvent();
// import { profilePageAnimation } from '../users/lesson';
const settingsPage = document.getElementById('settings-page');
const contactsPage = document.getElementById('contacts-page');
const getSiblings = (element) => {
const siblings = [];
let sibling = element.parentNode.firstChild;
const skipMe = element;
for ( ; sibling; sibling = sibling.nextSibling )
if ( sibling.nodeType == 1 && sibling != element )
siblings.push( sibling );
return siblings;
}
const removeActiveClass = (element) => {
const siblings = getSiblings(element);
siblings.forEach(sibling => {
sibling.classList.remove('active');
});
}
if (settingsPage) {
const settings = document.getElementById('settings')
settings.classList.add('active');
removeActiveClass(settings);
}
if (contactsPage) {
const contacts = document.getElementById('contacts')
contacts.classList.add('active');
removeActiveClass(contacts);
}
// profilePageAnimation();

View File

@ -1,6 +1,6 @@
import ActionCable from 'actioncable'
// create App object with key cable == new cosumer
// create App object with key cable == new consumer
(function() {
window.App || (window.App = {});
@ -40,10 +40,9 @@ App.cable.subscriptions.create({
}
})
// Receive information from index.html.erb
const acceptButton = document.getElementById('accept-button')
acceptButton.addEventListener('click', event => {
// event.preventDefault()
document.getElementById('chat-room-id').value = chatRoomId
})

View File

@ -0,0 +1,14 @@
const contactsVideo = document.getElementById("settings-video")
try {
const contactsStream = navigator.mediaDevices.getUserMedia({
audio: false,
video: true
}).then(stream => {
contactsVideo.srcObject = stream;
contactsVideo.muted = true;
})
} catch(e) {
console.error(e);
contactsVideo.innerHTML = "Unable to getUserMedia()";
}

View File

@ -22,6 +22,5 @@
<%= yield %>
<%= javascript_include_tag 'application' %>
<%= javascript_pack_tag 'application' %>
</body>
</html>

View File

@ -16,19 +16,19 @@
</div>
<div class="call" data-user-id="<%= contact.id %>">
<!-- Calls establish_call in pages_controller -->
<%= link_to establish_call_path(contact.id), remote: true, id: "modalTrigger" do %>
<%= link_to establish_call_path(contact.id), remote: true, class: "modalTrigger", data: {'user-id': contact.id } do %>
<i class="fas fa-phone"></i>
<% end %>
</div>
</div>
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal fade" id="myModal<%= contact.id %>" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="vertical-alignment-helper">
<div class="modal-dialog vertical-align-center">
<div class="modal-content modal-color">
<div class="modal-header">
<%= link_to "#", class:"pull-right", 'data-dismiss':"modal", 'data-target':"#myModal" do %>
<%= link_to "#", class:"pull-right", 'data-dismiss':"modal", 'data-target':"#myModal#{contact.id}" do %>
<i class="fas fa-times-circle"></i>
<% end %>
<div class="container">

View File

@ -1,26 +1,36 @@
<div id="contacts-page"></div>
<!-- CONTACTS PAGE -->
<div class="container">
<div class="contacts-container text-color">
<div class="contacts half">
<div class="contacts-header">
<h2>Contacts</h2>
<%= link_to new_connection_path do %>
<i class="fas fa-plus-square"></i>
<% end %>
<div class="row">
<div class="col-xs-12 col-md-6">
<div class="contacts">
<div class="contacts-header">
<h2>Contacts</h2>
<%= link_to new_connection_path do %>
<i class="fas fa-plus-square"></i>
<% end %>
</div>
<div class="contacts-list">
<% current_user.contacts.each do |contact| %>
<%= render "pages/contact", contact: contact %>
<% end %>
</div>
</div>
</div>
<% current_user.contacts.each do |contact| %>
<%= render "pages/contact", contact: contact %>
<% end %>
</div>
<div class="video-feed half">
<div class="video-content">
<video id="contacts-video" autoplay=""></video>
<div class="col-xs-12 col-md-6 hidden-xs hidden-sm">
<div class="video-feed">
<div class="video-content">
<video id="contacts-video" class="flex-video" autoplay=""></video>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- INFORMATION TO BE PASSED TO NOTIFICATIONS.JS -->
<div id="my-user-id" data-user-id="<%= current_user.id %>"></div>
<form action="/accept_call" method="post">

View File

@ -1,32 +1,45 @@
<div class="polyglot-navbar">
<div class="logo">
Polyglot
</div>
<div class="logo"><%= link_to "Polyglot", contacts_path %></div>
<div class="right-align">
<div class="right-align hidden-xs hidden-sm">
<div class="links">
<div class="active"><%= link_to "Dashboard", contacts_path %></div>
<div><%= link_to "Settings", setting_path %></div>
<div id="contacts"><%= link_to "Contacts", contacts_path %></div>
<div id="settings"><%= link_to "Settings", setting_path %></div>
</div>
<div class="profile">
<% if current_user.nil? %>
<%= link_to "Login", new_user_session_path %>
<% else %>
<div class="dropdown">
<div data-toggle="dropdown">
<% if current_user.photo.url.nil? %>
<img src="https://upload.wikimedia.org/wikipedia/commons/8/89/Portrait_Placeholder.png" class="avatar dropdown-toggle img-circle">
<% else %>
<%= cl_image_tag current_user.photo, class: "avatar dropdown-toggle img-circle"%>
<% end %>
<% if current_user.nil? %>
<%= link_to "Login", new_user_session_path %>
<% else %>
<div class="dropdown">
<div data-toggle="dropdown">
<% if current_user.photo.url.nil? %>
<img src="https://upload.wikimedia.org/wikipedia/commons/8/89/Portrait_Placeholder.png" class="avatar dropdown-toggle img-circle">
<% else %>
<%= cl_image_tag current_user.photo, class: "avatar dropdown-toggle img-circle"%>
<% end %>
</div>
<ul class="dropdown-menu dropdown-menu-right polyglot-dropdown">
<li><%= link_to "Profile", user_path(current_user) %></li>
<li><%= link_to "Logout", destroy_user_session_path %></li>
</ul>
</div>
<ul class="dropdown-menu dropdown-menu-right">
<!-- <li><a href="#">Profile</a></li> -->
<li><%= link_to "Profile", user_path(current_user) %></li>
<li><%= link_to "Logout", destroy_user_session_path %></li>
</ul>
</div>
<% end %>
<% end %>
</div>
</div>
<div class="burger-menu hidden-md hidden-lg">
<div class="dropdown">
<i class="fa fa-bars dropdown-toggle" data-toggle="dropdown"></i>
<ul class="dropdown-menu dropdown-menu-right polyglot-dropdown">
<li><%= link_to "Contacts", contacts_path %></li>
<li><%= link_to "Settings", setting_path %></li>
<% if current_user.nil? %>
<li><%= link_to "Login", new_user_session_path %></li>
<% else %>
<li><%= link_to "Profile", user_path(current_user) %></li>
<li><%= link_to "Logout", destroy_user_session_path %></li>
<% end %>
</ul>
</div>
</div>
</div>

View File

@ -1,158 +1,101 @@
<div class="profile-container">
<%= simple_form_for(@user) do |t| %>
<div class="profile-form">
<div>
<div class="lign">
<div id="settings-page"></div>
<div class="card"><%= t.input :language, collection:
[
"Afrikaans (South Africa)",
"Amharic (Ethiopia)",
"Armenian (Armenia)",
"Azerbaijani (Azerbaijan)",
"Indonesian (Indonesia)",
"Malay (Malaysia)",
"Bengali (Bangladesh)",
"Bengali (India)",
"Catalan (Spain)",
"Czech (Czech Republic)",
"Danish (Denmark)",
"German (Germany)",
"English (Australia)",
"English (Canada)",
"English (Ghana)",
"English (United Kingdom)",
"English (India)",
"English (Ireland)",
"English (Kenya)",
"English (New Zealand)",
"English (Nigeria)",
"English (Philippines)",
"English (South Africa)",
"English (Tanzania)",
"English (United States)",
"Spanish (Argentina)",
"Spanish (Bolivia)",
"Spanish (Chile)",
"Spanish (Colombia)",
"Spanish (Costa Rica)",
"Spanish (Ecuador)",
"Spanish (El Salvador)",
"Spanish (Spain)",
"Spanish (United States)",
"Spanish (Guatemala)",
"Spanish (Honduras)",
"Spanish (Mexico)",
"Spanish (Nicaragua)",
"Spanish (Panama)",
"Spanish (Paraguay)",
"Spanish (Peru)",
"Spanish (Puerto Rico)",
"Spanish (Dominican Republic)",
"Spanish (Uruguay)",
"Spanish (Venezuela)",
"Basque (Spain)",
"Filipino (Philippines)",
"French (Canada)",
"French (France)",
"Galician (Spain)",
"Georgian (Georgia)",
"Gujarati (India)",
"Croatian (Croatia)",
"Zulu (South Africa)",
"Icelandic (Iceland)",
"Italian (Italy)",
"Javanese (Indonesia)",
"Kannada (India)",
"Khmer (Cambodia)",
"Lao (Laos)",
"Latvian (Latvia)",
"Lithuanian (Lithuania)",
"Hungarian (Hungary)",
"Malayalam (India)",
"Marathi (India)",
"Dutch (Netherlands)",
"Nepali (Nepal)",
"Norwegian Bokmål (Norway)",
"Polish (Poland)",
"Portuguese (Brazil)",
"Portuguese (Portugal)",
"Romanian (Romania)",
"Sinhala (Sri Lanka)",
"Slovak (Slovakia)",
"Slovenian (Slovenia)",
"Sundanese (Indonesia)",
"Swahili (Tanzania)",
"Swahili (Kenya)",
"Finnish (Finland)",
"Swedish (Sweden)",
"Tamil (India)",
"Tamil (Singapore)",
"Tamil (Sri Lanka)",
"Tamil (Malaysia)",
"Telugu (India)",
"Vietnamese (Vietnam)",
"Turkish (Turkey)",
"Urdu (Pakistan)",
"Urdu (India)",
"Greek (Greece)",
"Bulgarian (Bulgaria)",
"Russian (Russia)",
"Serbian (Serbia)",
"Ukrainian (Ukraine)",
"Hebrew (Israel)",
"Arabic (Israel)",
"Arabic (Jordan)",
"Arabic (United Arab Emirates)",
"Arabic (Bahrain)",
"Arabic (Algeria)",
"Arabic (Saudi Arabia)",
"Arabic (Iraq)",
"Arabic (Kuwait)",
"Arabic (Morocco)",
"Arabic (Tunisia)",
"Arabic (Oman)",
"Arabic (Qatar)",
"Arabic (Lebanon)",
"Arabic (Egypt)",
"Persian (Iran)",
"Hindi (India)",
"Thai (Thailand)",
"Korean (South Korea)",
"Chinese, Mandarin (Traditional, Taiwan)",
"Chinese, Cantonese (Traditional, Hong Kong)",
"Japanese (Japan)",
"Chinese, Mandarin (Simplified, Hong Kong)",
"Chinese, Mandarin (Simplified, China)"] %>
<% languages = [
"Afrikaans (South Africa)", "Amharic (Ethiopia)", "Armenian (Armenia)",
"Azerbaijani (Azerbaijan)", "Indonesian (Indonesia)", "Malay (Malaysia)",
"Bengali (Bangladesh)", "Bengali (India)", "Catalan (Spain)",
"Czech (Czech Republic)", "Danish (Denmark)", "German (Germany)",
"English (Australia)", "English (Canada)", "English (Ghana)",
"English (United Kingdom)", "English (India)", "English (Ireland)",
"English (Kenya)", "English (New Zealand)", "English (Nigeria)",
"English (Philippines)", "English (South Africa)", "English (Tanzania)",
"English (United States)", "Spanish (Argentina)", "Spanish (Bolivia)",
"Spanish (Chile)", "Spanish (Colombia)", "Spanish (Costa Rica)",
"Spanish (Ecuador)", "Spanish (El Salvador)", "Spanish (Spain)",
"Spanish (United States)", "Spanish (Guatemala)", "Spanish (Honduras)",
"Spanish (Mexico)", "Spanish (Nicaragua)", "Spanish (Panama)",
"Spanish (Paraguay)", "Spanish (Peru)", "Spanish (Puerto Rico)",
"Spanish (Dominican Republic)", "Spanish (Uruguay)", "Spanish (Venezuela)",
"Basque (Spain)", "Filipino (Philippines)", "French (Canada)",
"French (France)", "Galician (Spain)", "Georgian (Georgia)",
"Gujarati (India)", "Croatian (Croatia)", "Zulu (South Africa)",
"Icelandic (Iceland)", "Italian (Italy)", "Javanese (Indonesia)",
"Kannada (India)", "Khmer (Cambodia)", "Lao (Laos)",
"Latvian (Latvia)", "Lithuanian (Lithuania)", "Hungarian (Hungary)",
"Malayalam (India)", "Marathi (India)", "Dutch (Netherlands)",
"Nepali (Nepal)", "Norwegian Bokmål (Norway)", "Polish (Poland)",
"Portuguese (Brazil)", "Portuguese (Portugal)", "Romanian (Romania)",
"Sinhala (Sri Lanka)", "Slovak (Slovakia)", "Slovenian (Slovenia)",
"Sundanese (Indonesia)", "Swahili (Tanzania)", "Swahili (Kenya)",
"Finnish (Finland)", "Swedish (Sweden)", "Tamil (India)",
"Tamil (Singapore)", "Tamil (Sri Lanka)", "Tamil (Malaysia)",
"Telugu (India)", "Vietnamese (Vietnam)", "Turkish (Turkey)",
"Urdu (Pakistan)", "Urdu (India)", "Greek (Greece)",
"Bulgarian (Bulgaria)", "Russian (Russia)", "Serbian (Serbia)",
"Ukrainian (Ukraine)", "Hebrew (Israel)", "Arabic (Israel)",
"Arabic (Jordan)", "Arabic (United Arab Emirates)", "Arabic (Bahrain)",
"Arabic (Algeria)", "Arabic (Saudi Arabia)", "Arabic (Iraq)",
"Arabic (Kuwait)", "Arabic (Morocco)", "Arabic (Tunisia)",
"Arabic (Oman)", "Arabic (Qatar)", "Arabic (Lebanon)",
"Arabic (Egypt)", "Persian (Iran)", "Hindi (India)",
"Thai (Thailand)", "Korean (South Korea)", "Chinese, Mandarin (Traditional, Taiwan)",
"Chinese, Cantonese (Traditional, Hong Kong)", "Japanese (Japan)",
"Chinese, Mandarin (Simplified, Hong Kong)",
"Chinese, Mandarin (Simplified, China)" ]%>
<% fonts = [
"Arial",
"Times New Roman",
"Calibri"
] %>
<div class="container">
<div class="contacts-container">
<div class="row">
<div class="col-xs-12 col-md-6">
<div class="settings">
<h2>Settings</h2>
<div>
<%= simple_form_for(@user) do |t| %>
<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' %>
</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' %>
</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' %>
</div>
<div class="card card-form card-form-no-hover">
<%= t.label :enable_transcript, class:'padding-right no-margin font-weight-normal' %>
<label class="switch">
<%= t.input_field :enable_transcript, class:'input-field-text-black' %>
<span class="slider round"></span>
</label>
</div>
<%= link_to "Save", contacts_path, class: "btn btn-primary save-btn form-control" %>
<p></p>
</div>
<% end %>
</div>
</div>
</div>
<div class="col-xs-12 col-md-6 hidden-xs hidden-sm">
<div class="video-feed">
<div class="video-content">
<video id="settings-video" class="flex-video" autoplay=""></video>
</div>
</div>
<div class="card"><%= t.input :caption_font %></div>
<div class="card"><%= t.input :caption_font_size %></div>
<div class="card"><%= t.input :enable_transcript %></div>
<%= link_to "Save", contacts_path, class: "btn btn-primary save-btn form-control" %>
<p></p>
</div>
<div class="profile-pic">
<% if @user.photo.url.nil? %>
<%= image_tag "https://upload.wikimedia.org/wikipedia/commons/8/89/Portrait_Placeholder.png"%>
<% else %>
<%= cl_image_tag current_user.photo%>
<% end %>
<%#= t.input_field :photo, onchange: 'this.form.submit();' %>
<%#= t.input_field :photo, as: :hidden %>
</div>
</div>
<% end %>
</div>
</div>
<%= javascript_pack_tag 'settings_video' %>