Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

#137138341 Game group chat feature #32

Open
wants to merge 5 commits into
base: development
Choose a base branch
from
Open

#137138341 Game group chat feature #32

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
380be2e
Adding firebase CDN
Feb 11, 2017
b336e6b
Chat App
Feb 13, 2017
110c62a
Styling added to messages
Feb 16, 2017
8816041
Positioning Chat bubble
Feb 16, 2017
787043d
merging development
Feb 28, 2017
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
11 changes: 11 additions & 0 deletions app/views/includes/foot.jade
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,13 @@ script.
script(type='text/javascript', src="https://code.jquery.com/jquery-1.12.4.js")
script(type='text/javascript', src='/lib/underscore/underscore-min.js')

//firebase init
script(type='text/javascript', src='https://www.gstatic.com/firebasejs/3.6.9/firebase.js')

//Firebase JavaScript client library
script(type='text/javascript', src='https://cdn.firebase.com/js/client/2.4.0/firebase.js')


//Bootstrap
script(type='text/javascript', src='/lib/bootstrap/dist/js/bootstrap.js')

Expand Down Expand Up @@ -64,5 +71,9 @@ script(type='text/javascript', src='/js/game_tour.js')
//Socket.io Client Library
script(type='text/javascript', src='/socket.io/socket.io.js')

//jquery
script(type='text/javascript', src='https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js')


//Livereload script rendered
//script(type='text/javascript', src='http://localhost:35729/livereload.js')
129 changes: 21 additions & 108 deletions public/css/common.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -977,21 +977,6 @@ Chat Title
color: rgba(255, 255, 255, 0.5);
font-size: 8px;
letter-spacing: 1px; }
.chat-title .avatar {
position: absolute;
z-index: 1;
top: 8px;
left: 9px;
border-radius: 30px;
width: 30px;
height: 30px;
overflow: hidden;
margin: 0;
padding: 0;
border: 2px solid rgba(255, 255, 255, 0.24); }
.chat-title .avatar img {
width: 100%;
height: auto; }

/*--------------------
Messages
Expand All @@ -1007,106 +992,35 @@ Messages
top: 0;
left: 0;
height: 101%;
width: 100%; }
.messages .message {
width: 100%;
overflow-y: scroll; }
.messages img {
border-radius: 30px;
width: 30px;
height: 30px;
overflow: hidden;
margin: 0;
padding: 0;
border: 2px solid rgba(255, 255, 255, 0.24); }
.messages p {
clear: both;
float: left;
padding: 6px 10px 7px;
border-radius: 10px 10px 10px 0;
border-radius: 0 10px 10px 10px;
background: rgba(0, 0, 0, 0.3);
margin: 8px 0;
font-size: 11px;
line-height: 1.4;
margin-left: 35px;
margin-left: 20px;
margin-right: 20px;
position: relative;
text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2); }
.messages .message .timestamp {
position: absolute;
bottom: -15px;
font-size: 9px;
color: rgba(255, 255, 255, 0.3); }
.messages .message::before {
content: '';
position: absolute;
bottom: -6px;
border-top: 6px solid rgba(0, 0, 0, 0.3);
left: 0;
border-right: 7px solid transparent; }
.messages .message .avatar {
position: absolute;
z-index: 1;
bottom: -15px;
left: -35px;
border-radius: 30px;
width: 30px;
height: 30px;
overflow: hidden;
margin: 0;
padding: 0;
border: 2px solid rgba(255, 255, 255, 0.24); }
.messages .message .avatar img {
width: 100%;
height: auto; }
.messages .message.message-personal {
float: right;
color: #fff;
text-align: right;
background: linear-gradient(120deg, #248A52, #257287);
border-radius: 10px 10px 0 10px; }
.messages .message.message-personal::before {
left: auto;
right: 0;
border-right: none;
border-left: 5px solid transparent;
border-top: 4px solid #257287;
bottom: -4px; }
.messages .message:last-child {
margin-bottom: 30px; }
.messages .message.new {
transform: scale(0);
transform-origin: 0 0;
animation: bounce 500ms linear both; }
.messages .message.loading::before {
content: '';
display: block;
width: 3px;
height: 3px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.5);
z-index: 2;
margin-top: 4px;
animation: ball 0.45s cubic-bezier(0, 0, 0.15, 1) alternate infinite;
border: none;
animation-delay: .15s; }
.messages .message.loading span {
display: block;
font-size: 0;
width: 20px;
height: 10px;
position: relative; }
.messages .message.loading span::before {
content: '';
display: block;
width: 3px;
height: 3px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.5);
z-index: 2;
margin-top: 4px;
animation: ball 0.45s cubic-bezier(0, 0, 0.15, 1) alternate infinite;
margin-left: -7px; }
.messages .message.loading span::after {
content: '';
display: block;
width: 3px;
height: 3px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.5);
z-index: 2;
margin-top: 4px;
animation: ball 0.45s cubic-bezier(0, 0, 0.15, 1) alternate infinite;
margin-left: 7px;
animation-delay: .3s; }
.messages p:before {
content: '';
position: absolute;
top: -6px;
border-bottom: 6px solid rgba(0, 0, 0, 0.3);
left: 0;
border-right: 7px solid transparent; }

/*--------------------
Message Box
Expand Down Expand Up @@ -1178,7 +1092,6 @@ Message Box
width: 15px;
height: 15px;
position: absolute;
z-index: 100;
top: -2px;
right: 50px; }

Expand Down
142 changes: 26 additions & 116 deletions public/css/common.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1471,25 +1471,6 @@ Chat Title
font-size: 8px;
letter-spacing: 1px;
}

.avatar {
position: absolute;
z-index: 1;
top: 8px;
left: 9px;
border-radius: 30px;
width: 30px;
height: 30px;
overflow: hidden;
margin: 0;
padding: 0;
border: 2px solid rgba(255, 255, 255, 0.24);

img {
width: 100%;
height: auto;
}
}
}


Expand All @@ -1509,116 +1490,46 @@ Messages
left: 0;
height: 101%;
width: 100%;
}


.message {
overflow-y: scroll;
}
img{
border-radius: 30px;
width: 30px;
height: 30px;
overflow: hidden;
margin: 0;
padding: 0;
border: 2px solid rgba(255, 255, 255, 0.24);
}

p {
clear: both;
float: left;
padding: 6px 10px 7px;
border-radius: 10px 10px 10px 0;
border-radius: 0 10px 10px 10px;
background: rgba(0, 0, 0, .3);
margin: 8px 0;
font-size: 11px;
line-height: 1.4;
margin-left: 35px;
margin-left: 20px;
margin-right: 20px;
position: relative;
text-shadow: 0 1px 1px rgba(0, 0, 0, .2);
}


.timestamp {
position: absolute;
bottom: -15px;
font-size: 9px;
color: rgba(255, 255, 255, .3);
}

&::before {
content: '';
position: absolute;
bottom: -6px;
border-top: 6px solid rgba(0, 0, 0, .3);
left: 0;
border-right: 7px solid transparent;
}

.avatar {
position: absolute;
z-index: 1;
bottom: -15px;
left: -35px;
border-radius: 30px;
width: 30px;
height: 30px;
overflow: hidden;
margin: 0;
padding: 0;
border: 2px solid rgba(255, 255, 255, 0.24);

img {
width: 100%;
height: auto;
}
}

&.message-personal {
float: right;
color: #fff;
text-align: right;
background: linear-gradient(120deg, #248A52, #257287);
border-radius: 10px 10px 0 10px;

&::before {
left: auto;
right: 0;
border-right: none;
border-left: 5px solid transparent;
border-top: 4px solid #257287;
bottom: -4px;
}
}

&:last-child {
margin-bottom: 30px;
}

&.new {
transform: scale(0);
transform-origin: 0 0;
animation: bounce 500ms linear both;
}

&.loading {

&::before {
@include ball;
border: none;
animation-delay: .15s;
}

& span {
display: block;
font-size: 0;
width: 20px;
height: 10px;
position: relative;

&::before {
@include ball;
margin-left: -7px;
}

&::after {
@include ball;
margin-left: 7px;
animation-delay: .3s;
}
}
p:before {
content: '';
position: absolute;
top: -6px;
border-bottom: 6px solid rgba(0, 0, 0, .3);
left: 0;
border-right: 7px solid transparent;
}

}
}



/*--------------------
Message Box
--------------------*/
Expand Down Expand Up @@ -1673,7 +1584,6 @@ Message Box

#notifications {
position: absolute;
// background-color: rgba(whitesmoke,0.9);
padding: 10px;
bottom: -8px;
left: 0;
Expand Down
Loading