BigBlueButton/bigbluebutton-Github
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Merge pull request #543 from OZhurbenko/meteor-ui

Browse Source 
Mobile View's changes
This commit is contained in:
Fred Dixon 2015-03-04 19:57:26 -05:00
commit 30c0b67015
8 changed files with 42 additions and 43 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
labs/meteor-client/app/client/globals.coffee
View File

@ -330,7 +330,10 @@ Handlebars.registerHelper "visibility", (section) ->
setInSession "display_whiteboard", true
setInSession "display_chatPane", true
setInSession "inChatWith", 'PUBLIC_CHAT'
setInSession "messageFontSize", 12
if isPortraitMobile()
setInSession "messageFontSize", Meteor.config.app.mobileFont
else
setInSession "messageFontSize", Meteor.config.app.desktopFont
setInSession 'display_slidingMenu', false
setInSession 'display_hiddenNavbarSection', false
@ -361,6 +364,18 @@ Handlebars.registerHelper "visibility", (section) ->
@listSessionVars = ->
console.log SessionAmplify.keys
# Checks if the view is portrait and a mobile device is being used
@isPortraitMobile = () ->
window.matchMedia('(orientation: portrait)').matches and # browser is portrait
window.matchMedia('(max-device-aspect-ratio: 1/1)').matches and # device is portrait
(navigator.userAgent.match(/Android/i) or # device is one of the following mobile devices:
navigator.userAgent.match(/iPhone|iPad|iPod/i) or
navigator.userAgent.match(/BlackBerry/i) or
navigator.userAgent.match(/Opera Mini/i) or
navigator.userAgent.match(/IEMobile/i) or
navigator.userAgent.match(/webOS/i))
# Checks if the view is landscape and mobile device is being used
@isLandscapeMobile = () ->
window.matchMedia('(orientation: landscape)').matches and # browser is landscape

2
labs/meteor-client/app/client/main.html
View File

@ -1,5 +1,5 @@
<template name="footer">
<div id="footer" class="myFooter gradientBar navbar navbar-default">
<div id="footer" class="myFooter gradientBar navbar-default">
{{{getFooterString}}}
</div>
</template>

40
labs/meteor-client/app/client/stylesheets/chat.less
View File

@ -48,30 +48,6 @@
}
}
}
@media @mobile-portrait-with-keyboard, @mobile-portrait {
li {
font-size: 14px;
padding: 15px;
word-wrap: break-word;
span {
.userNameEntry
{
font-size: 2.8vw !important;
font-style: italic;
}
.glyphicon-time {
font-size: 2.5vw;
}
.messageTime {
font-size: 2.5vw !important;
}
}
.chatMessage {
font-size: 2vw !important;
}
}
}
}
#chatbody {
@ -82,7 +58,7 @@
padding-left: 0px;
padding-right: 0px;
@media @desktop-portrait, @mobile-portrait {
max-height: 40vh; // for longer chatbody a scrollbar appears
max-height: 46vw; // for longer chatbody a scrollbar appears
overflow-y: scroll;
}
}
@ -176,8 +152,8 @@
height: 15%;
}
@media @mobile-portrait {
font-size: 3vh;
height: 6vh;
font-size: 4vw;
height: 8vw;
}
@media @mobile-portrait-with-keyboard {
font-size: 4.5vh;
@ -197,7 +173,7 @@
@media @mobile-portrait,
@mobile-portrait-with-keyboard
{
font-size: 2vh;
font-size: 3vw;
font-style: italic;
}
}
@ -232,8 +208,8 @@
{
@media @mobile-portrait-with-keyboard, @mobile-portrait
{
height: 4vh;
font-size: 3vh;
height: 5vw;
font-size: 4vw;
}
}
}
@ -250,8 +226,8 @@
}
@media @mobile-portrait {
width: 15vw;
height: 6vh;
font-size: 3vh;
height: 8vw;
font-size: 4vw;
margin-left: 5%;
}
@media @mobile-portrait-with-keyboard {

5
labs/meteor-client/app/client/stylesheets/style.less
View File

@ -43,6 +43,7 @@ body {
}
.myFooter {
min-height: 40px !important;
color: black;
padding-top: 13px;
text-align: center;
@ -58,7 +59,7 @@ body {
max-height: 20px;
}
@media @mobile-portrait {
font-size: 26px;
font-size: 2vw;
}
// the footer should be visible only at the very bottom of a portrait page
@ -256,7 +257,7 @@ body {
font-size: 14px;
}
@media @mobile-portrait, @mobile-portrait-with-keyboard {
font-size: 3vh;
font-size: 4vw;
}
}

6
labs/meteor-client/app/client/stylesheets/users.less
View File

@ -46,7 +46,7 @@
font-size: 2vh;
}
@media @mobile-portrait, @mobile-portrait-with-keyboard {
font-size: 3vh;
font-size: 4vw;
}
}
@ -67,7 +67,7 @@
-webkit-order: 3;
order: 3;
margin-bottom: 0px;
padding-bottom: 55px; /*so that the footer does not overlap */
padding-bottom: 10x; /*so that the footer does not overlap */
}
@media @mobile-portrait-with-keyboard {
display: none; //hide when typing
@ -87,7 +87,7 @@
}
@media @desktop-portrait, @mobile-portrait {
max-height: 40vh; //for longer userlist a scrollbar appears
max-height: 58vw; //for longer userlist a scrollbar appears
}
}
}

5
labs/meteor-client/app/client/views/chat/chat_bar.coffee
View File

@ -254,7 +254,10 @@ Template.optionsFontSize.events
selectedFontSize = parseInt(event.target.id)
if selectedFontSize
setInSession "messageFontSize", selectedFontSize
else setInSession "messageFontSize", 12
else if isPortraitMobile()
setInSession "messageFontSize", 20
else
setInSession "messageFontSize", 12
Template.optionsFontSize.helpers
getFontsizes: -> (size for size in [8..30] by 2)

6
labs/meteor-client/app/client/views/chat/chat_bar.html
View File

@ -64,12 +64,12 @@
</span>
<span style="float:right;">
{{#if message.from_time}}
<span class="messageTime" {{messageFontSize}}>{{toClockTime message.from_time}}</span>
<span class="glyphicon glyphicon-time"></span>
<span {{messageFontSize}}>{{toClockTime message.from_time}}</span>
<span {{messageFontSize}} class="glyphicon glyphicon-time"></span>
{{/if}}
</span>
<br/>
<div class="chatMessage" style="color:{{colourToHex message.from_color}}">{{{sanitizeAndFormat message.message}}}</div>
<div style="color:{{colourToHex message.from_color}}">{{{sanitizeAndFormat message.message}}}</div>
{{autoscroll}}
</template>

4
labs/meteor-client/app/config.coffee
View File

@ -20,6 +20,10 @@ config.app = {}
# server ip
config.app.logOutUrl = "http://192.168.0.119/demo/demoHTML5.jsp" # TODO temporary
#default font sizes for mobile / desktop
config.app.mobileFont = 24
config.app.desktopFont = 12
# Configs for redis
config.redis = {}
config.redis.host = "127.0.0.1"