Merge branch 'master' into emoji-status
Conflicts: bigbluebutton-client/branding/default/style/css/BBBDefault.css
This commit is contained in:
Ghazi Triki
commit
7ec8c6e3b7
@ -529,7 +529,7 @@ TitleWindow {
|
||||
|
||||
.micSettingsWindowHearFromHeadsetLabelStyle, .micSettingsWindowSpeakIntoMicLabelStyle, .micSettingsWindowMicNameLabelStyle, .webcamPermissionSettingsTextStyle {
|
||||
fontFamily: Arial;
|
||||
fontSize: 12;
|
||||
fontSize: 14;
|
||||
}
|
||||
|
||||
.micSettingsWindowPlaySoundButtonStyle, .micSettingsWindowChangeMicButtonStyle {
|
||||
@ -872,11 +872,11 @@ Alert {
|
||||
.statusMessageStyle {
|
||||
fontSize: 12;
|
||||
paddingTop: 0;
|
||||
}
|
||||
|
||||
.statusTimeStyle {
|
||||
fontSize: 10;
|
||||
paddingTop: 0;
|
||||
}
|
||||
|
||||
.statusTimeStyle {
|
||||
fontSize: 10;
|
||||
paddingTop: 0;
|
||||
}
|
||||
|
||||
PollChoicesModal {
|
||||
@ -885,6 +885,14 @@ PollChoicesModal {
|
||||
paddingRight: 16;
|
||||
}
|
||||
|
||||
.chatOptionsLabel {
|
||||
fontSize: 12;
|
||||
color: #000000;
|
||||
textRollOverColor: #000000;
|
||||
textSelectedColor: #000000;
|
||||
fontFamily: Arial;
|
||||
}
|
||||
|
||||
EmojiGrid {
|
||||
backgroundColor: #ffffff;
|
||||
horizontalAlign: center;
|
||||
@ -897,4 +905,5 @@ EmojiGrid {
|
||||
paddingTop: 10;
|
||||
verticalGap: 6;
|
||||
horizontalGap: 6;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -75,6 +75,7 @@ bbb.webrtcWarning.failedError.1006 = Error 1006: Call timed out
|
||||
bbb.webrtcWarning.failedError.1007 = Error 1007: ICE negotiation failed
|
||||
bbb.webrtcWarning.failedError.1008 = Error 1008: Transfer failed
|
||||
bbb.webrtcWarning.failedError.1009 = Error 1009: Could not fetch STUN/TURN server information
|
||||
bbb.webrtcWarning.failedError.1010 = Error 1010: ICE negotiation timeout
|
||||
bbb.webrtcWarning.failedError.unknown = Error {0}: Unknown error code
|
||||
bbb.webrtcWarning.failedError.mediamissing = Could not get your microphone for a WebRTC call
|
||||
bbb.webrtcWarning.failedError.endedunexpectedly = The WebRTC echo test ended unexpectedly
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
|
||||
var userID, callerIdName, conferenceVoiceBridge, userAgent=null, userMicMedia, userWebcamMedia, currentSession=null, callTimeout, callActive, callICEConnected, callFailCounter, callPurposefullyEnded, uaConnected, transferTimeout;
|
||||
var userID, callerIdName, conferenceVoiceBridge, userAgent=null, userMicMedia, userWebcamMedia, currentSession=null, callTimeout, callActive, callICEConnected, iceConnectedTimeout, callFailCounter, callPurposefullyEnded, uaConnected, transferTimeout;
|
||||
var inEchoTest = true;
|
||||
|
||||
function webRTCCallback(message) {
|
||||
@ -419,6 +419,17 @@ function make_call(username, voiceBridge, server, callback, recall, isListenOnly
|
||||
callback({'status':'started'});
|
||||
} else {
|
||||
callback({'status':'waitingforice'});
|
||||
console.log('Waiting for ICE negotiation');
|
||||
iceConnectedTimeout = setTimeout(function() {
|
||||
console.log('60 seconds without ICE finishing');
|
||||
callback({'status':'failed', 'errorcode': 1010}); // Failure on call
|
||||
currentSession = null;
|
||||
if (userAgent != null) {
|
||||
var userAgentTemp = userAgent;
|
||||
userAgent = null;
|
||||
userAgentTemp.stop();
|
||||
}
|
||||
}, 60000);
|
||||
}
|
||||
clearTimeout(callTimeout);
|
||||
});
|
||||
@ -426,6 +437,7 @@ function make_call(username, voiceBridge, server, callback, recall, isListenOnly
|
||||
console.log('received ice negotiation failed');
|
||||
callback({'status':'failed', 'errorcode': 1007}); // Failure on call
|
||||
currentSession = null;
|
||||
clearTimeout(iceConnectedTimeout);
|
||||
if (userAgent != null) {
|
||||
var userAgentTemp = userAgent;
|
||||
userAgent = null;
|
||||
@ -441,6 +453,7 @@ function make_call(username, voiceBridge, server, callback, recall, isListenOnly
|
||||
console.log('Received ICE status changed to connected');
|
||||
if (callICEConnected === false) {
|
||||
callICEConnected = true;
|
||||
clearTimeout(iceConnectedTimeout);
|
||||
if (callActive === true) {
|
||||
callback({'status':'started'});
|
||||
}
|
||||
@ -452,6 +465,7 @@ function make_call(username, voiceBridge, server, callback, recall, isListenOnly
|
||||
console.log('Received ICE status changed to completed');
|
||||
if (callICEConnected === false) {
|
||||
callICEConnected = true;
|
||||
clearTimeout(iceConnectedTimeout);
|
||||
if (callActive === true) {
|
||||
callback({'status':'started'});
|
||||
}
|
||||
|
||||
2
bigbluebutton-client/src/org/bigbluebutton/main/views/FlashMicSettings.mxml
Normal file → Executable file
2
bigbluebutton-client/src/org/bigbluebutton/main/views/FlashMicSettings.mxml
Normal file → Executable file
@ -21,7 +21,7 @@ with BigBlueButton; if not, see <http://www.gnu.org/licenses/>.
|
||||
<mx:TitleWindow xmlns:mx="http://www.adobe.com/2006/mxml"
|
||||
xmlns:mate="http://mate.asfusion.com/"
|
||||
xmlns:common="org.bigbluebutton.common.*"
|
||||
width="600" height="380"
|
||||
width="600" height="390"
|
||||
creationComplete="onCreationComplete()"
|
||||
styleName="micSettingsWindowStyle"
|
||||
showCloseButton="false"
|
||||
|
||||
2
bigbluebutton-client/src/org/bigbluebutton/main/views/MainApplicationShell.mxml
Normal file → Executable file
2
bigbluebutton-client/src/org/bigbluebutton/main/views/MainApplicationShell.mxml
Normal file → Executable file
@ -457,7 +457,7 @@ with BigBlueButton; if not, see <http://www.gnu.org/licenses/>.
|
||||
var chromeBrowser:ChromeMicPermissionImage = PopUpManager.createPopUp(mdiCanvas, ChromeMicPermissionImage, true) as ChromeMicPermissionImage;
|
||||
chromeBrowser.addEventListener(FlexEvent.CREATION_COMPLETE, function(e:Event):void {
|
||||
chromeBrowser.x = 20;
|
||||
chromeBrowser.y = 80;
|
||||
chromeBrowser.y = 130;
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
@ -0,0 +1,15 @@
|
||||
package org.bigbluebutton.modules.chat.events {
|
||||
import flash.events.Event;
|
||||
|
||||
public class ChatNoiseEnabledEvent extends Event {
|
||||
public static const CHAT_NOISE_CHANGE_EVENT:String = "chat noise change event";
|
||||
|
||||
public var enabled:Boolean = false;
|
||||
|
||||
public function ChatNoiseEnabledEvent(enabled:Boolean) {
|
||||
super(CHAT_NOISE_CHANGE_EVENT, true);
|
||||
|
||||
this.enabled = enabled;
|
||||
}
|
||||
}
|
||||
}
|
||||
43
bigbluebutton-client/src/org/bigbluebutton/modules/chat/views/AddChatTabBox.mxml
Normal file → Executable file
43
bigbluebutton-client/src/org/bigbluebutton/modules/chat/views/AddChatTabBox.mxml
Normal file → Executable file
@ -43,6 +43,7 @@ with BigBlueButton; if not, see <http://www.gnu.org/licenses/>.
|
||||
import org.bigbluebutton.core.managers.UserManager;
|
||||
import org.bigbluebutton.main.model.users.BBBUser;
|
||||
import org.bigbluebutton.main.model.users.Conference;
|
||||
import org.bigbluebutton.modules.chat.events.ChatNoiseEnabledEvent;
|
||||
import org.bigbluebutton.modules.chat.events.ChatOptionsEvent;
|
||||
import org.bigbluebutton.modules.chat.model.ChatOptions;
|
||||
import org.bigbluebutton.util.i18n.ResourceUtil;
|
||||
@ -63,6 +64,7 @@ with BigBlueButton; if not, see <http://www.gnu.org/licenses/>.
|
||||
} else {
|
||||
LOGGER.debug("fontSize in config.xml not found: {0}", [chatOptions.fontSize]);
|
||||
}
|
||||
chatNoiseCheckBox.visible = Accessibility.active;
|
||||
}
|
||||
|
||||
public function accessibleClick(event:KeyboardEvent):void{
|
||||
@ -78,6 +80,11 @@ with BigBlueButton; if not, see <http://www.gnu.org/licenses/>.
|
||||
dispatchEvent(e);
|
||||
}
|
||||
|
||||
private function changeChatNoise():void {
|
||||
LOGGER.debug("changing chat noise, active=" + chatNoiseCheckBox.selected);
|
||||
dispatchEvent(new ChatNoiseEnabledEvent(chatNoiseCheckBox.selected));
|
||||
}
|
||||
|
||||
protected function openPrivateChat(event:Event):void{
|
||||
if (usersList.selectedIndex == -1) return;
|
||||
|
||||
@ -117,23 +124,21 @@ with BigBlueButton; if not, see <http://www.gnu.org/licenses/>.
|
||||
]]>
|
||||
</mx:Script>
|
||||
|
||||
<common:TabIndexer id="tabIndexer" startIndex="1" tabIndices="{[usersList, cmbFontSize]}"/>
|
||||
|
||||
<mx:HBox width="100%" height="100%">
|
||||
<mx:VBox height="100%" width="50%" enabled="true">
|
||||
<mx:Label id="lblSelect" text="{ResourceUtil.getInstance().getString('bbb.chat.privateChatSelect')}" visible="{chatOptions.privateEnabled}" includeInLayout="{chatOptions.privateEnabled}"/>
|
||||
<mx:List id="usersList" height="100%" width="100%" dataProvider="{users}" dragEnabled="false"
|
||||
visible="{chatOptions.privateEnabled}" includeInLayout="{chatOptions.privateEnabled}"
|
||||
itemRenderer="org.bigbluebutton.modules.chat.views.UserRenderer"
|
||||
itemClick="openPrivateChat(event)" toolTip="{ResourceUtil.getInstance().getString('bbb.chat.usersList.toolTip')}"/>
|
||||
<mx:VBox id="optionsBox" height="100%" width="50%" >
|
||||
<mx:Label text="{ResourceUtil.getInstance().getString('bbb.chat.chatOptions')}" />
|
||||
<mx:HBox width="100%">
|
||||
<mx:Label text="{ResourceUtil.getInstance().getString('bbb.chat.fontSize')}" />
|
||||
<mx:ComboBox width="60" id="cmbFontSize" dataProvider="{fontSizes}" change="changeFontSize()"
|
||||
selectedIndex="1" toolTip="{ResourceUtil.getInstance().getString('bbb.chat.cmbFontSize.toolTip')}" />
|
||||
</mx:HBox>
|
||||
</mx:VBox>
|
||||
</mx:VBox>
|
||||
</mx:HBox>
|
||||
<common:TabIndexer id="tabIndexer" startIndex="1" tabIndices="{[usersList, cmbFontSize, chatNoiseCheckBox]}"/>
|
||||
|
||||
<mx:Label id="lblSelect" styleName="chatOptionsLabel"
|
||||
text="{ResourceUtil.getInstance().getString('bbb.chat.privateChatSelect')}"
|
||||
visible="{chatOptions.privateEnabled}" includeInLayout="{chatOptions.privateEnabled}"/>
|
||||
<mx:List id="usersList" height="50%" width="50%" dataProvider="{users}" dragEnabled="false"
|
||||
visible="{chatOptions.privateEnabled}" includeInLayout="{chatOptions.privateEnabled}"
|
||||
itemRenderer="org.bigbluebutton.modules.chat.views.UserRenderer"
|
||||
itemClick="openPrivateChat(event)" toolTip="{ResourceUtil.getInstance().getString('bbb.chat.usersList.toolTip')}"/>
|
||||
<mx:Label styleName="chatOptionsLabel" text="{ResourceUtil.getInstance().getString('bbb.chat.chatOptions')}" />
|
||||
<mx:HBox width="100%">
|
||||
<mx:Label styleName="chatOptionsLabel" text="{ResourceUtil.getInstance().getString('bbb.chat.fontSize')}" />
|
||||
<mx:ComboBox width="60" id="cmbFontSize" dataProvider="{fontSizes}" change="changeFontSize()"
|
||||
selectedIndex="1" toolTip="{ResourceUtil.getInstance().getString('bbb.chat.cmbFontSize.toolTip')}" />
|
||||
</mx:HBox>
|
||||
<mx:CheckBox id="chatNoiseCheckBox" label="Audible Chat Notification" labelPlacement="left"
|
||||
selected="true" change="changeChatNoise()" styleName="chatOptionsLabel" />
|
||||
</mx:VBox>
|
||||
|
||||
79
bigbluebutton-client/src/org/bigbluebutton/modules/chat/views/ChatView.mxml
Normal file → Executable file
79
bigbluebutton-client/src/org/bigbluebutton/modules/chat/views/ChatView.mxml
Normal file → Executable file
@ -35,26 +35,27 @@ with BigBlueButton; if not, see <http://www.gnu.org/licenses/>.
|
||||
|
||||
<mx:Script>
|
||||
<![CDATA[
|
||||
import com.asfusion.mate.events.Dispatcher;
|
||||
|
||||
import flash.accessibility.Accessibility;
|
||||
import flash.events.Event;
|
||||
import flash.events.FocusEvent;
|
||||
import flash.media.Sound;
|
||||
|
||||
import mx.controls.Button;
|
||||
|
||||
import flexlib.controls.tabBarClasses.SuperTab;
|
||||
import flexlib.events.SuperTabEvent;
|
||||
|
||||
import org.bigbluebutton.core.EventConstants;
|
||||
import org.bigbluebutton.core.UsersUtil;
|
||||
import org.bigbluebutton.core.events.CoreEvent;
|
||||
import org.bigbluebutton.main.events.ShortcutEvent;
|
||||
import org.bigbluebutton.modules.chat.events.PrivateChatMessageEvent;
|
||||
import org.bigbluebutton.modules.chat.events.PublicChatMessageEvent;
|
||||
import org.bigbluebutton.modules.chat.model.ChatOptions;
|
||||
import org.bigbluebutton.util.i18n.ResourceUtil;
|
||||
import com.asfusion.mate.events.Dispatcher;
|
||||
|
||||
import flash.accessibility.Accessibility;
|
||||
import flash.events.Event;
|
||||
import flash.events.FocusEvent;
|
||||
import flash.media.Sound;
|
||||
|
||||
import flexlib.controls.tabBarClasses.SuperTab;
|
||||
import flexlib.events.SuperTabEvent;
|
||||
|
||||
import mx.controls.Button;
|
||||
|
||||
import org.bigbluebutton.core.EventConstants;
|
||||
import org.bigbluebutton.core.UsersUtil;
|
||||
import org.bigbluebutton.core.events.CoreEvent;
|
||||
import org.bigbluebutton.main.events.ShortcutEvent;
|
||||
import org.bigbluebutton.modules.chat.events.ChatNoiseEnabledEvent;
|
||||
import org.bigbluebutton.modules.chat.events.PrivateChatMessageEvent;
|
||||
import org.bigbluebutton.modules.chat.events.PublicChatMessageEvent;
|
||||
import org.bigbluebutton.modules.chat.model.ChatOptions;
|
||||
import org.bigbluebutton.util.i18n.ResourceUtil;
|
||||
|
||||
private static const PUBLIC_CHAT_USERID:String = 'public_chat_userid';
|
||||
private var PUBLIC_CHAT_USERNAME:String = ResourceUtil.getInstance().getString("bbb.chat.publicChatUsername");
|
||||
@ -69,7 +70,8 @@ with BigBlueButton; if not, see <http://www.gnu.org/licenses/>.
|
||||
private static const PUBLIC_TAB_NEW:String = ResourceUtil.getInstance().getString("bbb.accessibility.chat.chatView.publicTabNew");
|
||||
private var publicWaiting:Boolean = false;
|
||||
private var publicFocus:Boolean = false;
|
||||
private var noticeLabel:String;
|
||||
private var noticeLabel:String;
|
||||
private var chatNoiseEnabled:Boolean = true;
|
||||
|
||||
[Embed(source="../sounds/notice.mp3")]
|
||||
private var noticeSoundClass:Class;
|
||||
@ -85,19 +87,20 @@ with BigBlueButton; if not, see <http://www.gnu.org/licenses/>.
|
||||
}
|
||||
|
||||
|
||||
private function onCreationComplete():void{
|
||||
private function onCreationComplete():void{
|
||||
openChatBoxFor(PUBLIC_CHAT_USERID, true);
|
||||
makePublicChatUncloseable();
|
||||
|
||||
if (chatOptions.privateEnabled) {
|
||||
createAddTabBox();
|
||||
makeAddPrivateChatUncloseable();
|
||||
}
|
||||
makePublicChatUncloseable();
|
||||
|
||||
if (chatOptions.privateEnabled) {
|
||||
createAddTabBox();
|
||||
makeAddPrivateChatUncloseable();
|
||||
}
|
||||
|
||||
ResourceUtil.getInstance().addEventListener(Event.CHANGE, localeChanged); // Listen for locale changing
|
||||
|
||||
addEventListener(SuperTabEvent.TAB_CLOSE, onUserClosedTab);
|
||||
|
||||
addEventListener(ChatNoiseEnabledEvent.CHAT_NOISE_CHANGE_EVENT, onChatNoiseChangeEvent);
|
||||
|
||||
systemManager.stage.addEventListener(Event.MOUSE_LEAVE, mouseLeave);
|
||||
systemManager.stage.addEventListener(Event.ACTIVATE, activate);
|
||||
systemManager.stage.addEventListener(Event.DEACTIVATE, deactivate);
|
||||
@ -293,9 +296,7 @@ with BigBlueButton; if not, see <http://www.gnu.org/licenses/>.
|
||||
// Activates an audio alert for screen-reader users on public message reception
|
||||
private function publicNotification():void {
|
||||
publicWaiting = true;
|
||||
if (Accessibility.active){
|
||||
noticeSound.play();
|
||||
}
|
||||
playSound();
|
||||
chatTabs.getChildByName(PUBLIC_CHAT_USERID).addEventListener(FocusEvent.FOCUS_IN, publicChatFocus);
|
||||
chatTabs.getChildByName(PUBLIC_CHAT_USERID).addEventListener(FocusEvent.FOCUS_OUT, publicChatUnfocus);
|
||||
}
|
||||
@ -303,12 +304,20 @@ with BigBlueButton; if not, see <http://www.gnu.org/licenses/>.
|
||||
// Activates an audio alert for screen-reader users on private message reception
|
||||
private function privateNotification(event:PrivateChatMessageEvent):void{
|
||||
if (! UsersUtil.isMe(event.message.fromUserID)) {
|
||||
if (Accessibility.active){
|
||||
noticeSound.play();
|
||||
}
|
||||
playSound();
|
||||
}
|
||||
}
|
||||
|
||||
private function playSound():void {
|
||||
if (Accessibility.active && chatNoiseEnabled){
|
||||
noticeSound.play();
|
||||
}
|
||||
}
|
||||
|
||||
private function onChatNoiseChangeEvent(e:ChatNoiseEnabledEvent):void {
|
||||
chatNoiseEnabled = e.enabled;
|
||||
}
|
||||
|
||||
public function publicChatFocus(event:FocusEvent):void{
|
||||
publicFocus = true;
|
||||
publicWaiting = false;
|
||||
|
||||
@ -798,7 +798,7 @@ with BigBlueButton; if not, see <http://www.gnu.org/licenses/>.
|
||||
mouseUp="mouseDown = false" verticalScrollPolicy="off" horizontalScrollPolicy="off"/>
|
||||
<mx:ControlBar id="presCtrlBar" name="presCtrlBar" width="100%" verticalAlign="middle" styleName="presentationWindowControlsStyle"
|
||||
paddingTop="2" paddingBottom="2">
|
||||
<mx:HBox id="presenterControls" width="100%" height="100%" horizontalAlign="center">
|
||||
<mx:HBox id="presenterControls" width="100%" height="100%" visible="false" includeInLayout="false" horizontalAlign="center">
|
||||
<mx:Button id="uploadPres" visible="false" height="30" styleName="presentationUploadButtonStyle"
|
||||
toolTip="{ResourceUtil.getInstance().getString('bbb.presentation.uploadPresBtn.toolTip')}"
|
||||
click="onUploadButtonClicked()"/>
|
||||
@ -829,6 +829,6 @@ with BigBlueButton; if not, see <http://www.gnu.org/licenses/>.
|
||||
<!-- This spacer is to prevent the whiteboard toolbar from overlapping the fit-ot-page button -->
|
||||
<mx:Spacer width="30" height="30" id="spacer4"/>
|
||||
</mx:HBox>
|
||||
<mx:HBox id="pollVoteBox" width="100%" height="100%" horizontalAlign="center" />
|
||||
<mx:HBox id="pollVoteBox" width="100%" height="100%" visible="false" includeInLayout="false" horizontalAlign="center" />
|
||||
</mx:ControlBar>
|
||||
</pres:CustomMdiWindow>
|
||||
|
||||
@ -5,7 +5,7 @@ class @NotificationControl
|
||||
|
||||
constructor: (c) ->
|
||||
container = if c[0] is '#' then c.substr(1) else c # prepend '#' to the identifier
|
||||
$("body").prepend( # create container for notifications
|
||||
$("#whiteboard").prepend( # create container for notifications
|
||||
'<!-- Drawing area for notifications. Must have "data-alert" atrribute, I do not know why, typically only for actual notifications -->' +
|
||||
"<div id=\"#{container}\" data-alert></div>")
|
||||
|
||||
|
||||
@ -182,6 +182,12 @@ Handlebars.registerHelper 'whiteboardSize', (section) ->
|
||||
Handlebars.registerHelper "getPollQuestions", ->
|
||||
polls = BBB.getCurrentPoll(getInSession('userId'))
|
||||
if polls? and polls isnt undefined
|
||||
number = polls.poll_info.poll.answers.length
|
||||
widthStyle = "width: calc(75%/" + number + ");"
|
||||
marginStyle = "margin-left: calc(25%/" + (number*2) + ");" + "margin-right: calc(23%/" + (number*2) + ");"
|
||||
buttonStyle = widthStyle + marginStyle
|
||||
for answer in polls.poll_info.poll.answers
|
||||
answer.style = buttonStyle
|
||||
return polls.poll_info.poll.answers
|
||||
|
||||
@getSortedUserList = (users) ->
|
||||
@ -251,13 +257,14 @@ Handlebars.registerHelper "getPollQuestions", ->
|
||||
# Meteor.call('userToggleCam', context._id, !context.sharingVideo)
|
||||
|
||||
@toggleChatbar = ->
|
||||
if getInSession("display_chatbar") and isOnlyOnePanelOpen()
|
||||
setInSession "display_usersList", true
|
||||
setInSession "display_whiteboard", true
|
||||
setInSession "display_chatbar", true
|
||||
setInSession "display_chatbar", !getInSession "display_chatbar"
|
||||
if !getInSession("display_chatbar")
|
||||
$('#whiteboard').css('width', '100%')
|
||||
$('#whiteboard .ui-resizable-handle').css('display', 'none')
|
||||
else
|
||||
setInSession "display_chatbar", !getInSession "display_chatbar"
|
||||
setTimeout(redrawWhiteboard, 0)
|
||||
$('#whiteboard').css('width', '')
|
||||
$('#whiteboard .ui-resizable-handle').css('display', '')
|
||||
setTimeout redrawWhiteboard, 0
|
||||
|
||||
@toggleMic = (event) ->
|
||||
BBB.toggleMyMic()
|
||||
@ -536,6 +543,25 @@ Handlebars.registerHelper "getPollQuestions", ->
|
||||
window.matchMedia('(orientation: landscape)').matches and # browser is landscape
|
||||
window.matchMedia('(min-device-aspect-ratio: 1/1)').matches # device is landscape
|
||||
|
||||
@isLandscapePhone = () ->
|
||||
# @phone-landscape media query:
|
||||
window.matchMedia('(orientation: landscape)').matches and
|
||||
window.matchMedia('(min-device-aspect-ratio: 1/1)').matches and
|
||||
window.matchMedia('(max-device-width: 959px)').matches
|
||||
|
||||
@isPortraitPhone = () ->
|
||||
# @phone-portrait media query:
|
||||
(window.matchMedia('(orientation: portrait)').matches and
|
||||
window.matchMedia('(max-device-aspect-ratio: 1/1)').matches and
|
||||
window.matchMedia('(max-device-width: 480px)').matches) or
|
||||
# @phone-portrait-with-keyboard media query:
|
||||
(window.matchMedia('(orientation: landscape)').matches and
|
||||
window.matchMedia('(max-device-aspect-ratio: 1/1)').matches and
|
||||
window.matchMedia('(max-device-width: 480px)').matches)
|
||||
|
||||
@isPhone = () ->
|
||||
isLandscapePhone() or isPortraitPhone()
|
||||
|
||||
# Checks if only one panel (userlist/whiteboard/chatbar) is currently open
|
||||
@isOnlyOnePanelOpen = () ->
|
||||
#(getInSession "display_usersList" ? 1 : 0) + (getInSession "display_whiteboard" ? 1 : 0) + (getInSession "display_chatbar" ? 1 : 0) is 1
|
||||
|
||||
@ -53,7 +53,7 @@ Template.header.events
|
||||
toggleCam @
|
||||
|
||||
"click .toggleUserlistButton": (event) ->
|
||||
if isLandscape()
|
||||
if isLandscape() or isLandscapeMobile()
|
||||
toggleUsersList()
|
||||
else
|
||||
if $('.sl-right-drawer').hasClass('sl-right-drawer-out')
|
||||
@ -73,11 +73,15 @@ Template.header.events
|
||||
toggleRightDrawer()
|
||||
toggleRightArrowClockwise()
|
||||
|
||||
"click .btn": (event) ->
|
||||
$(".ui-tooltip").hide()
|
||||
|
||||
Template.menu.events
|
||||
'click .slideButton': (event) ->
|
||||
toggleShield()
|
||||
toggleRightDrawer()
|
||||
toggleRightArrowClockwise()
|
||||
$('.slideButton').blur()
|
||||
|
||||
'click .toggleChatButton': (event) ->
|
||||
toggleChatbar()
|
||||
@ -115,9 +119,6 @@ Template.main.rendered = ->
|
||||
of: '.signOutIcon'
|
||||
)
|
||||
|
||||
Meteor.NotificationControl = new NotificationControl('notificationArea')
|
||||
$(document).foundation() # initialize foundation javascript
|
||||
|
||||
$(window).resize( ->
|
||||
$('#dialog').dialog('close')
|
||||
)
|
||||
@ -130,6 +131,7 @@ Template.main.rendered = ->
|
||||
|
||||
Template.main.events
|
||||
'click .shield': (event) ->
|
||||
$(".tooltip").hide()
|
||||
toggleShield()
|
||||
closeMenus()
|
||||
|
||||
@ -211,9 +213,11 @@ Template.main.gestures
|
||||
|
||||
$('.left-drawer').addClass('sl-left-drawer')
|
||||
$('.sl-left-drawer').removeClass('left-drawer')
|
||||
$('.sl-left-drawer').addClass('sl-left-drawer-content-delay')
|
||||
|
||||
$('.right-drawer').addClass('sl-right-drawer')
|
||||
$('.sl-right-drawer').removeClass('right-drawer')
|
||||
$('.sl-right-drawer').addClass('sl-right-drawer-content-delay')
|
||||
|
||||
'panright #container, panleft #container': (event, template) ->
|
||||
if isPortraitMobile() and isPanHorizontal(event)
|
||||
|
||||
@ -41,6 +41,10 @@
|
||||
</nav>
|
||||
</template>
|
||||
|
||||
<head>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
</head>
|
||||
|
||||
<template name="main">
|
||||
<div id="container" class="{{containerPosition}}">
|
||||
{{#if isDisconnected}}
|
||||
@ -50,6 +54,7 @@
|
||||
{{> usersList id="users" name="usersList"}}
|
||||
</div>
|
||||
<div class="sl-right-drawer sl-portrait-mobile sl-portrait-keyboard">
|
||||
<div class="titleArea"></div>
|
||||
{{> menu id="menu"}}
|
||||
</div>
|
||||
<div id="main">
|
||||
@ -57,7 +62,9 @@
|
||||
<div id="panels">
|
||||
<div class="shield"></div>
|
||||
{{> whiteboard id="whiteboard" name="whiteboard"}}
|
||||
{{> chatbar id="chat" title="Chat" name="chatbar"}}
|
||||
{{#if getInSession "display_chatbar"}}
|
||||
{{> chatbar id="chat" title="Chat" name="chatbar"}}
|
||||
{{/if}}
|
||||
</div>
|
||||
{{> modals}}
|
||||
</div>
|
||||
|
||||
@ -150,18 +150,54 @@
|
||||
height: 80px;
|
||||
margin-bottom: 0px;
|
||||
overflow: hidden;
|
||||
/* Static font sizes are used everywhere in this control. This is the maximum amount of space required */
|
||||
width: 379px;
|
||||
@media @phone-portrait-with-keyboard, @phone-portrait {
|
||||
width: 100px;
|
||||
}
|
||||
@media @tablet-portrait-with-keyboard, @tablet-portrait {
|
||||
width: calc(~'100% - 70px');
|
||||
}
|
||||
@media @desktop-portrait, @phone-landscape, @tablet-landscape, @desktop-landscape {
|
||||
width: calc(~'100% - 70px');
|
||||
}
|
||||
#displayLabel {
|
||||
padding: 0;
|
||||
}
|
||||
tr {
|
||||
td {
|
||||
padding: 0;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
.displayButtons {
|
||||
height: 35px;
|
||||
@media @phone-portrait-with-keyboard, @phone-portrait {
|
||||
height: 35px;
|
||||
width: 35px;
|
||||
}
|
||||
@media @tablet-portrait-with-keyboard, @tablet-portrait {
|
||||
height: 70px;
|
||||
width: 84px;
|
||||
}
|
||||
@media @desktop-portrait, @phone-landscape, @tablet-landscape, @desktop-landscape {
|
||||
height: 35px;
|
||||
width: 84px;
|
||||
}
|
||||
margin: 0px;
|
||||
padding:0px;
|
||||
text-align:center;
|
||||
width:84px;
|
||||
padding: 0px;
|
||||
text-align: center;
|
||||
i {
|
||||
@media @phone-portrait-with-keyboard, @phone-portrait {
|
||||
font-size: 16px; // overrides the value from Foundation
|
||||
}
|
||||
@media @tablet-portrait-with-keyboard, @tablet-portrait {
|
||||
font-size: 30px; // overrides the value from Foundation
|
||||
}
|
||||
@media @desktop-portrait, @phone-landscape, @tablet-landscape, @desktop-landscape {
|
||||
font-size: 16px; // overrides the value from Foundation
|
||||
}
|
||||
}
|
||||
}
|
||||
#displayLabel {
|
||||
text-align: center;
|
||||
width: 169px;
|
||||
}
|
||||
}
|
||||
|
||||
@ -202,7 +238,7 @@
|
||||
}
|
||||
|
||||
#sendMessageButton {
|
||||
width: 20%; /* 75% for the message input, 5% margin between the two */
|
||||
width: 25%;
|
||||
color: extract(@white, 1);
|
||||
background-color: #3896D3;
|
||||
font-weight: bold;
|
||||
@ -210,25 +246,29 @@
|
||||
margin: 0px;
|
||||
border: 1px solid extract(@lightGrey, 3);
|
||||
@media @desktop-portrait {
|
||||
width: 20%; /* 75% for the message input, 5% margin between the two */
|
||||
font-size: 30px;
|
||||
height: 60px;
|
||||
&:hover {
|
||||
background: #3A82D4;
|
||||
}
|
||||
padding-left: 7%;
|
||||
}
|
||||
@media @mobile-portrait {
|
||||
width: 15vw;
|
||||
height: 8vw;
|
||||
font-size: 4vw;
|
||||
@media @phone-portrait {
|
||||
font-size: 20px;
|
||||
padding-left: 5%;
|
||||
}
|
||||
@media @mobile-portrait-with-keyboard {
|
||||
width: 19vw;
|
||||
height: 21vh;
|
||||
font-size: 3vh;
|
||||
@media @tablet-portrait {
|
||||
font-size: 25px;
|
||||
padding-left: 7%;
|
||||
}
|
||||
@media @phone-portrait-with-keyboard {
|
||||
font-size: 20px;
|
||||
padding-left: 7%;
|
||||
}
|
||||
@media @tablet-portrait-with-keyboard {
|
||||
font-size: 25px;
|
||||
padding-left: 7%;
|
||||
}
|
||||
@media @landscape {
|
||||
height: 50px;
|
||||
padding: 0px;
|
||||
position: absolute;
|
||||
bottom: 10px;
|
||||
@ -236,6 +276,15 @@
|
||||
background: #3A82D4;
|
||||
}
|
||||
}
|
||||
@media @phone-landscape {
|
||||
font-size: 14px;
|
||||
}
|
||||
@media @tablet-landscape {
|
||||
font-size: 18px;
|
||||
}
|
||||
@media @desktop-landscape {
|
||||
font-size: 15px;
|
||||
}
|
||||
}
|
||||
|
||||
.timestamp {
|
||||
|
||||
@ -3,21 +3,78 @@
|
||||
#settingsModal {
|
||||
display: none;
|
||||
padding: 0px;
|
||||
|
||||
@media @phone-landscape, @tablet-landscape,
|
||||
@phone-portrait-with-keyboard, @phone-portrait,
|
||||
@tablet-portrait-with-keyboard, @tablet-portrait {
|
||||
min-height: 0; // overrides the value from Foundation
|
||||
}
|
||||
|
||||
p {
|
||||
margin-bottom: 0px;
|
||||
}
|
||||
@media @desktop-portrait, @landscape {
|
||||
min-width: 430px;
|
||||
@media @desktop-portrait, @desktop-landscape {
|
||||
width: 430px;
|
||||
top: 20% !important;
|
||||
}
|
||||
@media @mobile-portrait-with-keyboard, @mobile-portrait {
|
||||
width: 90%;
|
||||
height: 50%;
|
||||
@media @phone-landscape {
|
||||
// in landscape, we don't use margins for centering the window
|
||||
margin-left: 0;
|
||||
margin-right: 0;
|
||||
|
||||
top: 2px;
|
||||
@media (max-device-width: 600px) { // extremely small screen
|
||||
width: calc(~'100% - 100px');
|
||||
left: 50px;
|
||||
}
|
||||
@media (min-device-width: 601px) {
|
||||
width: 400px;
|
||||
left: calc(~'50% - 200px');
|
||||
}
|
||||
}
|
||||
@media @tablet-landscape {
|
||||
top: 55px;
|
||||
width: 600px;
|
||||
}
|
||||
@media @phone-portrait-with-keyboard, @phone-portrait {
|
||||
left: 20px;
|
||||
top: 10px;
|
||||
width: calc(~'100% - 40px');
|
||||
}
|
||||
@media @tablet-portrait-with-keyboard, @tablet-portrait {
|
||||
left: 50px;
|
||||
top: 55px;
|
||||
width: calc(~'100% - 100px');
|
||||
}
|
||||
|
||||
.bar {
|
||||
padding: 10px;
|
||||
@media @phone-portrait-with-keyboard, @phone-portrait,
|
||||
@tablet-portrait-with-keyboard, @tablet-portrait,
|
||||
@tablet-landscape, @desktop-landscape, @desktop-portrait {
|
||||
padding: 10px;
|
||||
}
|
||||
@media @phone-landscape {
|
||||
padding-top: 5px;
|
||||
}
|
||||
}
|
||||
.topBar {
|
||||
@media @phone-portrait-with-keyboard, @phone-portrait {
|
||||
height: 50px;
|
||||
}
|
||||
@media @tablet-portrait-with-keyboard, @tablet-portrait {
|
||||
height: 55px;
|
||||
}
|
||||
@media @phone-landscape {
|
||||
height: 35px;
|
||||
padding-top: 5px;
|
||||
padding-bottom: 5px;
|
||||
}
|
||||
@media @tablet-landscape {
|
||||
height: 50px;
|
||||
}
|
||||
@media @desktop-landscape, @desktop-portrait {
|
||||
height: 55px;
|
||||
}
|
||||
border-bottom: 1px solid grey;
|
||||
p:first-child {
|
||||
text-align: center;
|
||||
@ -26,12 +83,27 @@
|
||||
float: right;
|
||||
text-align: right;
|
||||
.closeSettings {
|
||||
@media @desktop-portrait, @landscape {
|
||||
margin-top: 10px;
|
||||
@media @desktop-portrait, @desktop-landscape {
|
||||
font-size: 30px;
|
||||
}
|
||||
@media @mobile-portrait-with-keyboard, @mobile-portrait {
|
||||
font-size: 450%;
|
||||
@media @phone-landscape {
|
||||
font-size: 30px;
|
||||
top: 2px;
|
||||
right: 10px;
|
||||
}
|
||||
@media @tablet-landscape {
|
||||
font-size: 33px;
|
||||
right: 15px;
|
||||
}
|
||||
@media @phone-portrait-with-keyboard, @phone-portrait {
|
||||
font-size: 45px;
|
||||
top: 2px;
|
||||
right: 10px;
|
||||
}
|
||||
@media @tablet-portrait-with-keyboard, @tablet-portrait {
|
||||
font-size: 350%;
|
||||
top: 0;
|
||||
right: 20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -39,43 +111,118 @@
|
||||
.bottomBar {
|
||||
border-top: 1px solid grey;
|
||||
text-align: right;
|
||||
@media @desktop-portrait, @landscape {
|
||||
height: 69px;
|
||||
@media @phone-portrait-with-keyboard, @phone-portrait {
|
||||
height: 50px;
|
||||
}
|
||||
@media @tablet-portrait-with-keyboard, @tablet-portrait {
|
||||
height: 55px;
|
||||
}
|
||||
@media @phone-landscape {
|
||||
height: 40px;
|
||||
}
|
||||
@media @tablet-landscape {
|
||||
height: 50px;
|
||||
}
|
||||
@media @desktop-portrait, @desktop-landscape {
|
||||
height: 55px;
|
||||
}
|
||||
.closeSettings {
|
||||
@media @desktop-portrait, @landscape {
|
||||
@media @desktop-portrait, @desktop-landscape {
|
||||
font-size: 16px;
|
||||
}
|
||||
@media @mobile-portrait-with-keyboard, @mobile-portrait {
|
||||
font-size: 250%;
|
||||
@media @phone-landscape {
|
||||
font-size: 16px;
|
||||
margin-right: 10px;
|
||||
}
|
||||
@media @tablet-landscape {
|
||||
font-size: 20px;
|
||||
margin-right: 5px;
|
||||
}
|
||||
@media @phone-portrait-with-keyboard, @phone-portrait {
|
||||
font-size: 25px;
|
||||
margin-right: 5px; // margin between the Cancel and Save buttons
|
||||
}
|
||||
@media @tablet-portrait-with-keyboard, @tablet-portrait {
|
||||
font-size: 30px;
|
||||
margin-right: 10px; // margin between the Cancel and Save buttons
|
||||
}
|
||||
position: inherit;
|
||||
}
|
||||
|
||||
}
|
||||
.settingsBody {
|
||||
padding: 10px;
|
||||
padding-top: 1px;
|
||||
padding-bottom: 1px;
|
||||
padding-left: 5px;
|
||||
padding-right: 5px;
|
||||
text-align: center;
|
||||
@media @mobile-portrait-with-keyboard, @mobile-portrait {
|
||||
font-size: 200%;
|
||||
height: 70%;
|
||||
@media @phone-portrait-with-keyboard, @phone-portrait {
|
||||
font-size: 15px;
|
||||
}
|
||||
@media @tablet-portrait-with-keyboard, @tablet-portrait {
|
||||
font-size: 27px;
|
||||
height: calc(~'100% - 110px');
|
||||
}
|
||||
@media @phone-landscape {
|
||||
font-size: 14px;
|
||||
}
|
||||
@media @tablet-landscape {
|
||||
font-size: 20px;
|
||||
}
|
||||
}
|
||||
.modalTitle {
|
||||
font-style: bold;
|
||||
font-size: 30px;
|
||||
@media @phone-portrait-with-keyboard, @phone-portrait {
|
||||
font-size: 18px;
|
||||
}
|
||||
@media @tablet-portrait-with-keyboard, @tablet-portrait {
|
||||
font-size: 25px;
|
||||
}
|
||||
@media @phone-landscape {
|
||||
font-size: 15px;
|
||||
}
|
||||
@media @tablet-landscape {
|
||||
font-size: 25px;
|
||||
}
|
||||
@media @desktop-landscape, @desktop-portrait {
|
||||
font-size: 25px;
|
||||
}
|
||||
}
|
||||
.joinAudioButton {
|
||||
width: 80px;
|
||||
height: 70px;
|
||||
margin-left: 5px;
|
||||
margin-right: 5px;
|
||||
margin-bottom: 5px;
|
||||
@media @phone-portrait-with-keyboard, @phone-portrait {
|
||||
height: 40px;
|
||||
width: 40px;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
@media @tablet-portrait-with-keyboard, @tablet-portrait {
|
||||
height: 50px;
|
||||
width: 50px;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
@media @phone-landscape {
|
||||
height: 40px;
|
||||
width: 40px;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
@media @tablet-landscape {
|
||||
height: 50px;
|
||||
width: 50px;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
@media @desktop-portrait, @desktop-landscape {
|
||||
height: 55px;
|
||||
width: 55px;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.desktopSettingsFieldset {
|
||||
margin: auto;
|
||||
width: 400px;
|
||||
margin-top: 0;
|
||||
margin-bottom: 0;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
|
||||
width: calc(~'100% - 20px');
|
||||
padding: 0px;
|
||||
@media @mobile-portrait-with-keyboard, @mobile-portrait {
|
||||
height: 30%;
|
||||
@ -84,18 +231,120 @@
|
||||
height: 80%;
|
||||
}
|
||||
}
|
||||
.settingsButton {
|
||||
padding: 0;
|
||||
i {
|
||||
@media @phone-landscape {
|
||||
font-size: 15px;
|
||||
}
|
||||
@media @tablet-landscape {
|
||||
font-size: 25px;
|
||||
}
|
||||
@media @phone-portrait-with-keyboard, @phone-portrait {
|
||||
font-size: 27px;
|
||||
}
|
||||
@media @tablet-portrait-with-keyboard, @tablet-portrait {
|
||||
font-size: 35px;
|
||||
}
|
||||
@media @desktop-landscape, @desktop-portrait {
|
||||
font-size: 30px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
#saveSettings {
|
||||
border-radius: 3px;
|
||||
#saveSettings {
|
||||
border-radius: 3px;
|
||||
padding: 5px 10px 5px 10px;
|
||||
|
||||
@media @desktop-portrait, @landscape {
|
||||
@media @desktop-portrait, @desktop-landscape {
|
||||
margin-top: 5px;
|
||||
font-size: 16px;
|
||||
width: 80px;
|
||||
height: 35px;
|
||||
}
|
||||
@media @mobile-portrait-with-keyboard, @mobile-portrait {
|
||||
font-size: 250%;
|
||||
@media @phone-landscape {
|
||||
font-size: 20px;
|
||||
margin-bottom: 0px; // overrides the value from Foundation
|
||||
bottom: 2px;
|
||||
right: 5px;
|
||||
}
|
||||
@media @tablet-landscape {
|
||||
font-size: 25px;
|
||||
margin-bottom: 0px; // overrides the value from Foundation
|
||||
bottom: 5px;
|
||||
}
|
||||
@media @phone-portrait-with-keyboard, @phone-portrait {
|
||||
font-size: 25px;
|
||||
margin-bottom: 0px; // overrides the value from Foundation
|
||||
bottom: 5px;
|
||||
}
|
||||
@media @tablet-portrait-with-keyboard, @tablet-portrait {
|
||||
font-size: 30px;
|
||||
margin-bottom: 0px; // overrides the value from Foundation
|
||||
bottom: 5px;
|
||||
}
|
||||
}
|
||||
|
||||
#logoutModal {
|
||||
margin-top: 0px;
|
||||
margin-right: 0px;
|
||||
top: 5% !important;
|
||||
right: 5%;
|
||||
position: fixed;
|
||||
text-align: center;
|
||||
@media @desktop-landscape {
|
||||
width: 20%;
|
||||
}
|
||||
@media @phone-landscape {
|
||||
width: 50%;
|
||||
height: 50%;
|
||||
min-height: 0; // overrides the value from Foundation
|
||||
left: 45%;
|
||||
}
|
||||
@media @tablet-landscape {
|
||||
width: 30%;
|
||||
height: 40%;
|
||||
p {
|
||||
font-size: 120%;
|
||||
}
|
||||
}
|
||||
@media @desktop-portrait {
|
||||
width: 40%;
|
||||
}
|
||||
@media @phone-portrait-with-keyboard, @phone-portrait {
|
||||
width: 90%;
|
||||
height: 40%;
|
||||
min-height: 0; // overrides the value from Foundation
|
||||
left: 5%;
|
||||
p {
|
||||
font-size: 150%;
|
||||
}
|
||||
}
|
||||
@media @tablet-portrait-with-keyboard, @tablet-portrait {
|
||||
width: 90%;
|
||||
height: 20%;
|
||||
min-height: 0; // overrides the value from Foundation
|
||||
left: 5%;
|
||||
p {
|
||||
font-size: 150%;
|
||||
}
|
||||
}
|
||||
.logoutButton {
|
||||
padding: 0px;
|
||||
@media @desktop-portrait, @landscape {
|
||||
width: 50px;
|
||||
height: 30px;
|
||||
}
|
||||
@media @mobile-portrait-with-keyboard, @mobile-portrait {
|
||||
width: 20%;
|
||||
font-size: 150%;
|
||||
}
|
||||
background-color: rgb(229, 229, 229);
|
||||
color: rgb(121, 121, 121);
|
||||
font-weight: bold;
|
||||
border-radius: 10px;
|
||||
margin-left: 5px;
|
||||
margin-right: 5px;
|
||||
}
|
||||
#yes { border: 2px solid rgb(71, 164, 255); }
|
||||
}
|
||||
|
||||
@ -9,10 +9,12 @@ body {
|
||||
right: 0;
|
||||
@media @landscape {
|
||||
height: 100%;
|
||||
min-width: 768px;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
}
|
||||
@media @desktop-landscape {
|
||||
min-width: 768px;
|
||||
}
|
||||
@media @mobile-portrait-with-keyboard, @desktop-portrait, @mobile-portrait {
|
||||
position: relative;
|
||||
top: 0;
|
||||
@ -59,6 +61,21 @@ body {
|
||||
height:25%;
|
||||
}
|
||||
}
|
||||
|
||||
i {
|
||||
@media @phone-landscape {
|
||||
font-size: 29px;
|
||||
}
|
||||
@media @desktop-portrait, @desktop-landscape, @tablet-landscape {
|
||||
font-size: 30px;
|
||||
}
|
||||
@media @phone-portrait-with-keyboard, @phone-portrait {
|
||||
font-size: 35px;
|
||||
}
|
||||
@media @tablet-portrait-with-keyboard, @tablet-portrait {
|
||||
font-size: 40px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.myNavbar {
|
||||
@ -72,9 +89,25 @@ body {
|
||||
.linear-gradient(rgb(72,76,85), rgb(65,68,77));
|
||||
}
|
||||
.btn {
|
||||
@media @desktop-portrait, @landscape {
|
||||
height: 50px !important;
|
||||
|
||||
@media @tablet-landscape {
|
||||
height: 50px;
|
||||
width: 51.2px;
|
||||
}
|
||||
@media @phone-landscape {
|
||||
height: 47px;
|
||||
width: 47px;
|
||||
}
|
||||
@media @desktop-landscape {
|
||||
height: 50px;
|
||||
width: 51.2px;
|
||||
}
|
||||
@media @desktop-portrait {
|
||||
height: 50px;
|
||||
width: 51.2px;
|
||||
}
|
||||
|
||||
@media @desktop-portrait, @landscape {
|
||||
top: 0 !important;
|
||||
padding-left: 1% !important;
|
||||
padding-right: 1% !important;
|
||||
@ -84,11 +117,16 @@ body {
|
||||
}
|
||||
}
|
||||
@media @mobile-portrait-with-keyboard, @mobile-portrait {
|
||||
height: 100px !important;
|
||||
width: 10%;
|
||||
min-width: 60px;
|
||||
.linear-gradient(rgb(72,76,85), rgb(65,68,77));
|
||||
}
|
||||
@media @phone-portrait-with-keyboard, @phone-portrait {
|
||||
height: 50px !important;
|
||||
width: 50px;
|
||||
}
|
||||
@media @tablet-portrait-with-keyboard, @tablet-portrait {
|
||||
height: 55px !important;
|
||||
width: 55px;
|
||||
}
|
||||
.push-menu-icon {
|
||||
.icon-bar {
|
||||
margin-left: auto;
|
||||
@ -110,12 +148,22 @@ body {
|
||||
}
|
||||
span { background-color: #469DCF; }
|
||||
}
|
||||
@media @landscape {
|
||||
|
||||
@media @tablet-landscape {
|
||||
height: 50px;
|
||||
}
|
||||
@media @mobile-portrait-with-keyboard, @mobile-portrait {
|
||||
min-width: 630px;
|
||||
height: 110px;
|
||||
@media @phone-landscape {
|
||||
height: 47px;
|
||||
}
|
||||
|
||||
@media @desktop-landscape {
|
||||
height: 50px;
|
||||
}
|
||||
@media @phone-portrait-with-keyboard, @phone-portrait {
|
||||
height: 50px;
|
||||
}
|
||||
@media @tablet-portrait-with-keyboard, @tablet-portrait {
|
||||
height: 55px;
|
||||
}
|
||||
@media @desktop-portrait {
|
||||
min-width: 400px;
|
||||
@ -131,20 +179,42 @@ body {
|
||||
position: absolute;
|
||||
@media @mobile-portrait-with-keyboard, @mobile-portrait {
|
||||
color: extract(@white, 1);
|
||||
font-size: 35px;
|
||||
height: 72px;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
height: 110px;
|
||||
padding-top: 55px; // half the height
|
||||
padding-left: 30px;
|
||||
padding-right: 30px;
|
||||
}
|
||||
@media @landscape, @desktop-portrait {
|
||||
color: extract(@darkGrey, 1);
|
||||
@media @phone-portrait-with-keyboard, @phone-portrait {
|
||||
height: 50px;
|
||||
padding-top: 25px; // half the height
|
||||
font-size: 18px;
|
||||
}
|
||||
@media @tablet-portrait-with-keyboard, @tablet-portrait {
|
||||
height: 55px;
|
||||
padding-top: 27.5px; // half the height
|
||||
font-size: 21px;
|
||||
}
|
||||
|
||||
@media @tablet-landscape {
|
||||
font-size: 18px;
|
||||
height: 50px;
|
||||
padding-top: 25px; // half the height
|
||||
}
|
||||
@media @phone-landscape {
|
||||
font-size: 18px;
|
||||
height: 47px;
|
||||
padding-top: 23.5px; // half the height
|
||||
}
|
||||
@media @desktop-landscape {
|
||||
font-size: 16px;
|
||||
height: 50px;
|
||||
padding-top: 25px; // half the height
|
||||
}
|
||||
@media @desktop-portrait {
|
||||
height: 50px;
|
||||
padding-top: 25px; // half the height
|
||||
}
|
||||
|
||||
@media @landscape, @desktop-portrait {
|
||||
color: extract(@darkGrey, 1);
|
||||
padding-left: 15px;
|
||||
padding-right: 15px;
|
||||
}
|
||||
@ -152,8 +222,15 @@ body {
|
||||
@media @landscape, @desktop-portrait {
|
||||
left: 51.2px;
|
||||
}
|
||||
@media @mobile-portrait, @mobile-portrait-with-keyboard {
|
||||
left: 10%;
|
||||
@media @phone-portrait, @phone-portrait-with-keyboard {
|
||||
left: 50px;
|
||||
padding-left: 10px;
|
||||
padding-right: 10px;
|
||||
}
|
||||
@media @tablet-portrait, @tablet-portrait-with-keyboard {
|
||||
left: 55px;
|
||||
padding-left: 11px;
|
||||
padding-right: 11px;
|
||||
}
|
||||
|
||||
@media @landscape {
|
||||
@ -162,16 +239,26 @@ body {
|
||||
@media @desktop-portrait {
|
||||
max-width: calc(~'100% - 102.4px'); // leaves room for 2 buttons
|
||||
}
|
||||
@media @mobile-portrait, @mobile-portrait-with-keyboard {
|
||||
width: 80%;
|
||||
@media @phone-portrait, @phone-portrait-with-keyboard {
|
||||
width: calc(~'100% - 100px');
|
||||
}
|
||||
@media @tablet-portrait, @tablet-portrait-with-keyboard {
|
||||
width: calc(~'100% - 110px');
|
||||
}
|
||||
}
|
||||
&.shiftedTitle {
|
||||
@media @landscape, @desktop-portrait {
|
||||
left: 102.4px;
|
||||
}
|
||||
@media @mobile-portrait, @mobile-portrait-with-keyboard {
|
||||
left: 20%;
|
||||
@media @phone-portrait, @phone-portrait-with-keyboard {
|
||||
left: 100px;
|
||||
padding-left: 10px;
|
||||
padding-right: 60px;
|
||||
}
|
||||
@media @tablet-portrait, @tablet-portrait-with-keyboard {
|
||||
left: 110px;
|
||||
padding-left: 11px;
|
||||
padding-right: 66px;
|
||||
}
|
||||
|
||||
@media @landscape {
|
||||
@ -180,8 +267,11 @@ body {
|
||||
@media @desktop-portrait {
|
||||
max-width: calc(~'100% - 153.6px'); // leaves for 3 buttons
|
||||
}
|
||||
@media @mobile-portrait, @mobile-portrait-with-keyboard {
|
||||
width: 70%;
|
||||
@media @phone-portrait, @phone-portrait-with-keyboard {
|
||||
width: calc(~'100% - 150px');
|
||||
}
|
||||
@media @tablet-portrait, @tablet-portrait-with-keyboard {
|
||||
width: calc(~'100% - 165px');
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -219,17 +309,33 @@ body {
|
||||
font-weight: bold;
|
||||
line-height: 2em;
|
||||
margin: 0;
|
||||
|
||||
@media @tablet-landscape {
|
||||
font-size: 18px;
|
||||
height: 50px;
|
||||
}
|
||||
@media @phone-landscape {
|
||||
font-size: 19px;
|
||||
height: 47px;
|
||||
}
|
||||
@media @phone-portrait, @phone-portrait-with-keyboard {
|
||||
font-size: 18px;
|
||||
padding-top: 8px;
|
||||
}
|
||||
@media @tablet-portrait, @tablet-portrait-with-keyboard {
|
||||
font-size: 20px;
|
||||
padding-top: 7px;
|
||||
}
|
||||
|
||||
@media @mobile-portrait, @mobile-portrait-with-keyboard {
|
||||
.linear-gradient(rgb(72,76,85), rgb(65,68,77));
|
||||
padding-top: 20px;
|
||||
color: white;
|
||||
font-size: 4vw;
|
||||
height: 110px;
|
||||
height: 50px;
|
||||
}
|
||||
@media @desktop-portrait {
|
||||
.linear-gradient(rgb(72,76,85), rgb(65,68,77));
|
||||
background-color: white;
|
||||
padding-top: 10px;
|
||||
color: white;
|
||||
color: extract(@darkGrey, 1);
|
||||
}
|
||||
@media @landscape {
|
||||
border-bottom: 1px solid extract(@lightGrey, 1);
|
||||
@ -237,7 +343,8 @@ body {
|
||||
padding-bottom: 5px;
|
||||
padding-top: 5px;
|
||||
}
|
||||
@media @desktop-portrait, @landscape {
|
||||
|
||||
@media @desktop-portrait, @desktop-landscape {
|
||||
font-size: 18px;
|
||||
height: 50px;
|
||||
}
|
||||
@ -322,14 +429,44 @@ body {
|
||||
margin-left: 20px;
|
||||
}
|
||||
}
|
||||
@media @mobile-portrait-with-keyboard, @mobile-portrait {
|
||||
height: 110px;
|
||||
font-size: 40px;
|
||||
@media @phone-portrait-with-keyboard, @phone-portrait {
|
||||
height: 50px;
|
||||
font-size: 18px;
|
||||
}
|
||||
@media @tablet-portrait-with-keyboard, @tablet-portrait {
|
||||
height: 50px;
|
||||
font-size: 18px;
|
||||
}
|
||||
@media @desktop-portrait {
|
||||
height: 50px;
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
i {
|
||||
@media @phone-landscape {
|
||||
font-size: 29px;
|
||||
}
|
||||
@media @desktop-portrait, @desktop-landscape, @tablet-landscape {
|
||||
font-size: 30px;
|
||||
}
|
||||
@media @phone-portrait-with-keyboard, @phone-portrait {
|
||||
font-size: 30px;
|
||||
}
|
||||
@media @tablet-portrait-with-keyboard, @tablet-portrait {
|
||||
font-size: 25px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.titleArea {
|
||||
width: 100%;
|
||||
@media @mobile-portrait-with-keyboard, @mobile-portrait {
|
||||
height: 50px;
|
||||
.linear-gradient(rgb(72,76,85), rgb(65,68,77));
|
||||
}
|
||||
@media @desktop-portrait {
|
||||
height: 50px;
|
||||
}
|
||||
}
|
||||
|
||||
/* Notifications */
|
||||
@ -374,7 +511,12 @@ body {
|
||||
flex-flow: column;
|
||||
}
|
||||
width: 100%;
|
||||
height: calc(~'100% - 50px'); // 50px for narbar height
|
||||
@media @desktop-landscape {
|
||||
height: calc(~'100% - 50px'); // 50px for narbar height
|
||||
}
|
||||
@media @phone-landscape, @tablet-landscape {
|
||||
height: calc(~'100% - 47px'); // 47px for narbar height
|
||||
}
|
||||
}
|
||||
|
||||
.signOutIcon {
|
||||
@ -404,9 +546,13 @@ body {
|
||||
@media @landscape, @desktop-portrait {
|
||||
left: 51.2px;
|
||||
}
|
||||
@media @mobile-portrait, @mobile-portrait-with-keyboard {
|
||||
left: 10%;
|
||||
width: 10%;
|
||||
@media @phone-portrait, @phone-portrait-with-keyboard {
|
||||
left: 50px;
|
||||
width: 50px;
|
||||
}
|
||||
@media @tablet-portrait, @tablet-portrait-with-keyboard {
|
||||
left: 55px;
|
||||
width: 55px;
|
||||
}
|
||||
.muteIcon:hover {
|
||||
color: #2A5E7C;
|
||||
@ -426,6 +572,9 @@ body {
|
||||
@media @landscape {
|
||||
display: none;
|
||||
}
|
||||
@media @mobile-portrait, @mobile-portrait-with-keyboard {
|
||||
.linear-gradient(rgb(72,76,85), rgb(65,68,77));
|
||||
}
|
||||
}
|
||||
|
||||
.pressedButton {
|
||||
@ -440,11 +589,6 @@ body {
|
||||
|
||||
.toggleUserlistButton, .toggleMenuButton {
|
||||
outline: none;
|
||||
&:hover {
|
||||
span {
|
||||
background-color: #2A5E7C;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.settingsIcon {
|
||||
@ -472,79 +616,113 @@ body {
|
||||
}
|
||||
|
||||
#notificationArea {
|
||||
|
||||
height: auto;
|
||||
left:0;
|
||||
margin: auto;
|
||||
margin-top: 0px;
|
||||
@media @landscape {
|
||||
width: 50%;
|
||||
}
|
||||
@media @mobile-portrait-with-keyboard, @desktop-portrait, @mobile-portrait {
|
||||
width: 90%;
|
||||
}
|
||||
@media @landscape, @desktop-portrait {
|
||||
top: 57px; // height of navbar (50px), 2 pixels for navbar margin, 5 pixels for neat whitespace
|
||||
}
|
||||
@media @mobile-portrait-with-keyboard, @mobile-portrait {
|
||||
top: 130px; // height of navbar (130px), 20 pixels for neat whitespace
|
||||
}
|
||||
overflow-y: hidden;
|
||||
position: fixed;
|
||||
right:0;
|
||||
position: absolute;
|
||||
text-align: center;
|
||||
z-index: 1; // in front of the whiteboard
|
||||
|
||||
// Phone
|
||||
@media @phone-landscape, @phone-portrait-with-keyboard, @phone-portrait {
|
||||
margin-left: 5px;
|
||||
margin-right: 5px;
|
||||
width: calc(~'100% - 10px');
|
||||
}
|
||||
@media @phone-landscape {
|
||||
top: 5px;
|
||||
}
|
||||
@media @phone-portrait-with-keyboard, @phone-portrait {
|
||||
top: 3px;
|
||||
}
|
||||
|
||||
// Tablet
|
||||
@media @tablet-landscape, @tablet-portrait-with-keyboard, @tablet-portrait {
|
||||
top: 5px;
|
||||
margin-left: 5px;
|
||||
margin-right: 5px;
|
||||
width: calc(~'100% - 10px');
|
||||
}
|
||||
|
||||
// Desktop
|
||||
@media @desktop-landscape, @desktop-portrait {
|
||||
top: 5px;
|
||||
margin-left: 5px;
|
||||
margin-right: 5px;
|
||||
width: calc(~'100% - 10px');
|
||||
}
|
||||
}
|
||||
|
||||
.bbbNotification {
|
||||
margin-bottom: 5px;
|
||||
@media @mobile-portrait-with-keyboard, @mobile-portrait {
|
||||
font-size: 50px;
|
||||
}
|
||||
.close {
|
||||
@media @mobile-portrait-with-keyboard, @mobile-portrait {
|
||||
font-size: 100px;
|
||||
top: 20%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#logoutModal {
|
||||
margin-top: 0px;
|
||||
margin-right: 0px;
|
||||
top: 5% !important;
|
||||
right: 5%;
|
||||
position: fixed;
|
||||
text-align: center;
|
||||
@media @landscape {
|
||||
width: 20%;
|
||||
margin-bottom: 0; // overrides the value from Foundation
|
||||
|
||||
// Phone
|
||||
@media @phone-landscape, @phone-portrait-with-keyboard, @phone-portrait {
|
||||
font-size: 18px; // same size as the navbar title
|
||||
padding-top: 10px;
|
||||
padding-bottom: 10px;
|
||||
padding-left: 25px;
|
||||
padding-right: 25px;
|
||||
}
|
||||
@media @desktop-portrait {
|
||||
width: 40%;
|
||||
|
||||
// Tablet
|
||||
@media @tablet-landscape {
|
||||
font-size: 18px; // same size as the navbar title
|
||||
padding-top: 10px;
|
||||
padding-bottom: 10px;
|
||||
padding-left: 35px;
|
||||
padding-right: 35px;
|
||||
}
|
||||
@media @mobile-portrait-with-keyboard, @mobile-portrait {
|
||||
width: 90%;
|
||||
p {
|
||||
font-size: 250%;
|
||||
@media @tablet-portrait-with-keyboard, @tablet-portrait {
|
||||
font-size: 21px; // same size as the navbar title
|
||||
padding-top: 11px;
|
||||
padding-bottom: 11px;
|
||||
padding-left: 38px;
|
||||
padding-right: 38px;
|
||||
}
|
||||
|
||||
// Desktop
|
||||
@media @desktop-landscape, @desktop-portrait {
|
||||
font-size: 14px;
|
||||
padding-top: 11px;
|
||||
padding-bottom: 11px;
|
||||
padding-left: 33px;
|
||||
padding-right: 33px;
|
||||
}
|
||||
|
||||
.close {
|
||||
|
||||
// overriding the values from Foundation
|
||||
margin-bottom: 0;
|
||||
padding: 0;
|
||||
|
||||
// Phone
|
||||
@media @phone-landscape, @phone-portrait-with-keyboard, @phone-portrait {
|
||||
font-size: 35px;
|
||||
top: 19px;
|
||||
right: 4px;
|
||||
}
|
||||
|
||||
// Tablet
|
||||
@media @tablet-landscape {
|
||||
font-size: 40px;
|
||||
top: 17px;
|
||||
right: 10px;
|
||||
}
|
||||
@media @tablet-portrait-with-keyboard, @tablet-portrait {
|
||||
font-size: 45px;
|
||||
top: 18px;
|
||||
right: 11px;
|
||||
}
|
||||
|
||||
// Desktop
|
||||
@media @desktop-landscape, @desktop-portrait {
|
||||
font-size: 30px;
|
||||
top: 19px;
|
||||
right: 10px;
|
||||
}
|
||||
}
|
||||
.logoutButton {
|
||||
padding: 0px;
|
||||
@media @desktop-portrait, @landscape {
|
||||
width: 50px;
|
||||
height: 30px;
|
||||
}
|
||||
@media @mobile-portrait-with-keyboard, @mobile-portrait {
|
||||
width: 20%;
|
||||
font-size: 200%;
|
||||
}
|
||||
background-color: rgb(229, 229, 229);
|
||||
color: rgb(121, 121, 121);
|
||||
font-weight: bold;
|
||||
border-radius: 10px;
|
||||
margin-left: 5px;
|
||||
margin-right: 5px;
|
||||
}
|
||||
#yes { border: 2px solid rgb(71, 164, 255); }
|
||||
}
|
||||
|
||||
.top-bar {
|
||||
@ -556,14 +734,6 @@ body {
|
||||
padding-left: 10px;
|
||||
padding-right: 10px;
|
||||
}
|
||||
i {
|
||||
@media @desktop-portrait, @landscape {
|
||||
font-size: 30px;
|
||||
}
|
||||
@media @mobile-portrait-with-keyboard, @mobile-portrait {
|
||||
font-size: 80px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.verticallyCentered {
|
||||
@ -597,7 +767,13 @@ body {
|
||||
|
||||
.sl-left-drawer {
|
||||
height: 100%;
|
||||
@media @landscape {
|
||||
@media @tablet-landscape {
|
||||
width: 200px;
|
||||
}
|
||||
@media @phone-landscape {
|
||||
width: 200px;
|
||||
}
|
||||
@media @desktop-landscape {
|
||||
width: 300px;
|
||||
}
|
||||
}
|
||||
@ -626,7 +802,7 @@ body {
|
||||
top: 50px;
|
||||
}
|
||||
@media @mobile-portrait-with-keyboard, @mobile-portrait {
|
||||
top: 110px;
|
||||
top: 50px;
|
||||
}
|
||||
@media @landscape {
|
||||
display: none;
|
||||
|
||||
@ -45,8 +45,11 @@
|
||||
height: 27px;
|
||||
font-size: 4.5mm;
|
||||
}
|
||||
@media @mobile-portrait, @mobile-portrait-with-keyboard {
|
||||
font-size: 4vw;
|
||||
@media @phone-portrait, @phone-portrait-with-keyboard {
|
||||
font-size: 15px;
|
||||
}
|
||||
@media @tablet-portrait, @tablet-portrait-with-keyboard {
|
||||
font-size: 17px;
|
||||
}
|
||||
}
|
||||
|
||||
@ -83,7 +86,13 @@
|
||||
}
|
||||
|
||||
#user-contents {
|
||||
height: calc(~'100% - 50px'); /* user-contents = user-contens - meetingTitle */
|
||||
@media @phone-landscape {
|
||||
height: calc(~'100% - 46px');
|
||||
}
|
||||
@media @tablet-landscape, @desktop-landscape,
|
||||
@mobile-portrait, @mobile-portrait-with-keyboard, @desktop-portrait {
|
||||
height: calc(~'100% - 50px'); /* user-contents = user-contens - meetingTitle */
|
||||
}
|
||||
@media @landscape, @desktop-portrait{
|
||||
background-color: #34495E;
|
||||
}
|
||||
@ -92,7 +101,7 @@
|
||||
height: 100%;
|
||||
|
||||
#content:hover {
|
||||
@media @landscape, @desktop-portrait {
|
||||
@media @landscape, @desktop-portrait {
|
||||
background-color: #2C4155;
|
||||
}
|
||||
}
|
||||
@ -135,8 +144,17 @@
|
||||
|
||||
.toggleUserlistButton, .toggleMenuButton {
|
||||
span {
|
||||
@media @landscape, @desktop-portrait {
|
||||
@media @tablet-landscape {
|
||||
width: 26px;
|
||||
}
|
||||
@media @phone-landscape {
|
||||
width: 35px;
|
||||
}
|
||||
@media @desktop-landscape {
|
||||
width: 26px;
|
||||
}
|
||||
|
||||
@media @landscape, @desktop-portrait {
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
height: 8%;
|
||||
|
||||
@ -20,6 +20,17 @@
|
||||
/* mobile device in portrait orientation: portrait browser window + portrait device screen */
|
||||
@mobile-portrait: ~"all and (orientation: portrait) and (max-device-aspect-ratio: 1/1)";
|
||||
|
||||
/* more specific media queries */
|
||||
@phone-portrait: ~"all and (orientation: portrait) and (max-device-aspect-ratio: 1/1) and (max-device-width: 480px)";
|
||||
@phone-portrait-with-keyboard: ~"all and (orientation: landscape) and (max-device-aspect-ratio: 1/1) and (max-device-width: 480px)";
|
||||
|
||||
@tablet-portrait: ~"all and (orientation: portrait) and (max-device-aspect-ratio: 1/1) and (min-device-width: 481px)";
|
||||
@tablet-portrait-with-keyboard: ~"all and (orientation: landscape) and (max-device-aspect-ratio: 1/1) and (min-device-width: 481px)";
|
||||
|
||||
@phone-landscape: ~"all and (orientation: landscape) and (min-device-aspect-ratio: 1/1) and (max-device-width: 959px)";
|
||||
@tablet-landscape: ~"all and (orientation: landscape) and (min-device-aspect-ratio: 1/1) and (min-device-width: 960px) and (max-device-width: 1366px)";
|
||||
@desktop-landscape: ~"all and (orientation: landscape) and (min-device-aspect-ratio: 1/1) and (min-device-width: 1367px)";
|
||||
|
||||
/* Fix for FireFox - some ionicons did not display properly */
|
||||
@font-face {
|
||||
font-family: 'ionicons';
|
||||
|
||||
@ -102,6 +102,7 @@
|
||||
padding-top:10px;
|
||||
padding-bottom:10px;
|
||||
border-top: 1px solid extract(@lightGrey, 3);
|
||||
font-size: 0; /* to remove default 4px gaps between the buttons caused by display: inline-block */
|
||||
}
|
||||
|
||||
.pollButtons {
|
||||
@ -110,9 +111,17 @@
|
||||
font-weight: bold;
|
||||
border: 1px solid extract(@lightGrey, 3);
|
||||
height: 100%;
|
||||
margin: 0 1rem 0 1rem;
|
||||
padding: auto;
|
||||
|
||||
padding-left: 0rem !important; /*overwriting the default foundation padding */
|
||||
padding-right: 0rem !important; /*overwriting the default foundation padding */
|
||||
max-width: calc(~'100%/6'); /* the actual width and margins are calculated in the code */
|
||||
/* truncating the text inside the buttons */
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
/* the end of truncating */
|
||||
span {
|
||||
max-width: 80%;
|
||||
}
|
||||
&:hover {
|
||||
background: #3A82D4;
|
||||
}
|
||||
@ -181,28 +190,80 @@
|
||||
}
|
||||
|
||||
.whiteboardFullscreenButton {
|
||||
top: 10px;
|
||||
right: 10px;
|
||||
@media @landscape {
|
||||
@media @desktop-landscape {
|
||||
height: 50px;
|
||||
width: 50px;
|
||||
top: 5px;
|
||||
right: 5px;
|
||||
}
|
||||
@media @mobile-portrait-with-keyboard, @mobile-portrait {
|
||||
height: 100px;
|
||||
width: 10%;
|
||||
@media @phone-landscape {
|
||||
height: 45px;
|
||||
width: 45px;
|
||||
top: 5px;
|
||||
right: 5px;
|
||||
}
|
||||
@media @tablet-landscape {
|
||||
height: 50px;
|
||||
width: 50px;
|
||||
top: 5px;
|
||||
right: 5px;
|
||||
}
|
||||
@media @phone-portrait-with-keyboard, @phone-portrait {
|
||||
height: 50px;
|
||||
width: 50px;
|
||||
top: 2px;
|
||||
right: 2px;
|
||||
}
|
||||
@media @tablet-portrait-with-keyboard, @tablet-portrait {
|
||||
height: 53px;
|
||||
width: 53px;
|
||||
top: 5px;
|
||||
right: 5px;
|
||||
}
|
||||
@media @desktop-portrait {
|
||||
height: 50px;
|
||||
width: 50px;
|
||||
top: 5px;
|
||||
right: 5px;
|
||||
}
|
||||
}
|
||||
|
||||
.raiseHandButton {
|
||||
bottom: 10px;
|
||||
right: 10px;
|
||||
@media @desktop-portrait, @landscape {
|
||||
@media @desktop-landscape {
|
||||
height: 40px;
|
||||
width: 40px;
|
||||
bottom: 5px;
|
||||
right: 5px;
|
||||
}
|
||||
@media @phone-landscape {
|
||||
height: 45px;
|
||||
width: 45px;
|
||||
bottom: 5px;
|
||||
right: 5px;
|
||||
}
|
||||
@media @tablet-landscape {
|
||||
height: 50px;
|
||||
width: 50px;
|
||||
bottom: 5px;
|
||||
right: 5px;
|
||||
}
|
||||
@media @mobile-portrait-with-keyboard, @mobile-portrait {
|
||||
height: 100px;
|
||||
width: 10%;
|
||||
@media @phone-portrait-with-keyboard, @phone-portrait {
|
||||
height: 50px;
|
||||
width: 50px;
|
||||
bottom: 2px;
|
||||
right: 2px;
|
||||
}
|
||||
@media @tablet-portrait-with-keyboard, @tablet-portrait {
|
||||
height: 53px;
|
||||
width: 53px;
|
||||
bottom: 5px;
|
||||
right: 5px;
|
||||
}
|
||||
@media @desktop-portrait {
|
||||
height: 40px;
|
||||
width: 40px;
|
||||
bottom: 5px;
|
||||
right: 5px;
|
||||
}
|
||||
}
|
||||
|
||||
@ -225,6 +286,7 @@
|
||||
padding: 0;
|
||||
border-radius: 50%;
|
||||
background: #3896D3;
|
||||
opacity: 0.55;
|
||||
&:hover {
|
||||
background: #3A82D4;
|
||||
}
|
||||
@ -233,6 +295,18 @@
|
||||
outline:0;
|
||||
}
|
||||
i {
|
||||
@media @phone-landscape {
|
||||
font-size: 29px;
|
||||
}
|
||||
@media @desktop-portrait, @desktop-landscape, @tablet-landscape {
|
||||
font-size: 30px;
|
||||
}
|
||||
@media @phone-portrait-with-keyboard, @phone-portrait {
|
||||
font-size: 35px;
|
||||
}
|
||||
@media @tablet-portrait-with-keyboard, @tablet-portrait {
|
||||
font-size: 40px;
|
||||
}
|
||||
color: white;
|
||||
}
|
||||
}
|
||||
|
||||
@ -5,7 +5,8 @@ Template.settingsModal.helpers
|
||||
|
||||
Template.logoutModal.events
|
||||
"click #yes": -> userLogout(getInSession("meetingId"), getInSession("userId"))
|
||||
"click #no": -> $("#logoutModal").foundation('reveal', 'close');
|
||||
"click #no": -> $("#logoutModal").foundation('reveal', 'close')
|
||||
"click .logoutButton": -> $(".tooltip").hide()
|
||||
|
||||
Template.settingsAudio.events
|
||||
"click #exitAudio": -> exitVoiceCall()
|
||||
|
||||
@ -39,8 +39,8 @@
|
||||
</div>
|
||||
|
||||
<div class="settingsBody">
|
||||
{{> settingsAudio}}<br/>
|
||||
{{> optionsFontSize}}<br/>
|
||||
{{> settingsAudio}}
|
||||
{{> optionsFontSize}}
|
||||
{{{getBBBSettingsInfo}}}
|
||||
</div>
|
||||
|
||||
@ -52,6 +52,6 @@
|
||||
|
||||
<template name="logoutModal">
|
||||
<p>Are you sure you want to logout?</p>
|
||||
{{> makeButton id="yes" btn_class="logoutButton" rel="tooltip" title="Logout" label="Yes"}}
|
||||
{{> makeButton id="no" btn_class="logoutButton" rel="tooltip" title="Logout" label="No"}}
|
||||
{{> makeButton id="yes" btn_class="logoutButton" label="Yes"}}
|
||||
{{> makeButton id="no" btn_class="logoutButton" label="No"}}
|
||||
</template>
|
||||
|
||||
@ -22,7 +22,7 @@ Template.displayUserIcons.helpers
|
||||
settings.disablePubChat
|
||||
return locked and lockInAction
|
||||
|
||||
# Opens a private chat tab when a username from the userlist is clicked
|
||||
# Opens a private chat tab when a username from the userlist is clicked
|
||||
Template.usernameEntry.events
|
||||
'click .usernameEntry': (event) ->
|
||||
userIdSelected = @.userId
|
||||
@ -31,18 +31,20 @@ Template.usernameEntry.events
|
||||
setInSession "inChatWith", "PUBLIC_CHAT"
|
||||
else
|
||||
setInSession "inChatWith", userIdSelected
|
||||
if isLandscape()
|
||||
$("#newMessageInput").focus()
|
||||
if isPortrait() or isPortraitMobile()
|
||||
toggleUsersList()
|
||||
toggleLeftDrawer()
|
||||
toggleLeftArrowClockwise()
|
||||
toggleShield()
|
||||
setTimeout () -> # waits until the end of execution queue
|
||||
$("#newMessageInput").focus()
|
||||
, 0
|
||||
|
||||
'click .gotUnreadMail': (event) ->
|
||||
_this = @
|
||||
currentId = getInSession('userId')
|
||||
if currentId isnt undefined and currentId is _this.userId
|
||||
_id = "PUBLIC_CHAT"
|
||||
else
|
||||
else
|
||||
_id = _this.userId
|
||||
chats = getInSession('chats')
|
||||
if chats isnt undefined
|
||||
|
||||
@ -12,7 +12,11 @@ Template.usersList.rendered = ->
|
||||
minWidth: 200
|
||||
resize: () ->
|
||||
adjustChatInputHeight()
|
||||
|
||||
Tracker.autorun (comp) ->
|
||||
setInSession 'userListRenderedTime', TimeSync.serverTime()
|
||||
if getInSession('userListRenderedTime') isnt undefined
|
||||
comp.stop()
|
||||
|
||||
if isPhone()
|
||||
$('.sl-left-drawer').addClass('hiddenInLandscape')
|
||||
|
||||
@ -73,3 +73,8 @@ Template.whiteboard.rendered = ->
|
||||
stop: () ->
|
||||
$('#whiteboard').css('width', 100 * $('#whiteboard').width() / $('#panels').width() + '%') # transforms width to %
|
||||
$('#whiteboard').resizable('option', 'maxWidth', null)
|
||||
|
||||
# whiteboard element needs to be available
|
||||
Meteor.NotificationControl = new NotificationControl('notificationArea')
|
||||
|
||||
$(document).foundation() # initialize foundation javascript
|
||||
|
||||
@ -18,7 +18,7 @@
|
||||
{{#if isPollStarted}}
|
||||
<div class="polling">
|
||||
{{#each getPollQuestions}}
|
||||
{{> makeButton btn_class="pollButtons" rel="tooltip" data_placement="top" label=key answer=id}}
|
||||
{{> makeButton btn_class="pollButtons" rel="tooltip" data_placement="top" label=key answer=id style=style }}
|
||||
{{/each}}
|
||||
</div>
|
||||
{{/if}}
|
||||
|
||||
@ -26,13 +26,13 @@ class @WhiteboardPollModel extends WhiteboardToolModel
|
||||
backgroundColor = "#ffffff"
|
||||
verticalPadding = 0
|
||||
horizontalPadding = 0
|
||||
calcFontSize = 20
|
||||
calcFontSize = 30
|
||||
votesTotal = 0
|
||||
maxNumVotes = 0
|
||||
textArray = []
|
||||
|
||||
#creating an array of text objects for the labels, percentages and number inside line bars
|
||||
if startingData.result? and startingData.result.length > 1
|
||||
if startingData.result?
|
||||
#counting the total number of votes and finding the biggest number of votes
|
||||
for i in [0..startingData.result.length-1]
|
||||
votesTotal += startingData.result[i].num_votes
|
||||
@ -236,7 +236,7 @@ calculateFontAndWidth = (textArray, calcFontSize, width, height, x, y) ->
|
||||
test = getRenderedTextSize(textArray[i][j], calcFontSize)
|
||||
spanWidth = test[0]
|
||||
spanHeight = test[1]
|
||||
if spanWidth > 40 or spanWidth > maxLineWidth or spanHeight > maxLineHeight
|
||||
if spanWidth > maxLineWidth or spanHeight > maxLineHeight
|
||||
calcFontSize -= 1
|
||||
flag = true
|
||||
calculatedData.push calcFontSize
|
||||
|
||||
@ -477,11 +477,13 @@ def storePollResultShape(xml, shape)
|
||||
g.puts('unset ytics')
|
||||
xtics = result.map{ |r| "\"#{r['key'].gsub('%', '%%')}\" #{r['id']}" }.join(', ')
|
||||
g.puts("set xtics rotate by 90 scale 0 right (#{xtics})")
|
||||
x2tics = result.map{ |r| "\"#{(r['num_votes'].to_f / num_responders * 100).to_i}%%\" #{r['id']}" }.join(', ')
|
||||
g.puts("set x2tics rotate by 90 scale 0 left (#{x2tics})")
|
||||
if num_responders > 0
|
||||
x2tics = result.map{ |r| "\"#{(r['num_votes'].to_f / num_responders * 100).to_i}%%\" #{r['id']}" }.join(', ')
|
||||
g.puts("set x2tics rotate by 90 scale 0 left (#{x2tics})")
|
||||
end
|
||||
g.puts('set linetype 1 linewidth 1 linecolor rgb "black"')
|
||||
result.each do |r|
|
||||
if r['num_votes'].to_f / num_responders <= 0.5
|
||||
if r['num_votes'] == 0 or r['num_votes'].to_f / num_responders <= 0.5
|
||||
g.puts("set label \"#{r['num_votes']}\" at #{r['id']},#{r['num_votes']} left rotate by 90 offset 0,character 0.5 front")
|
||||
else
|
||||
g.puts("set label \"#{r['num_votes']}\" at #{r['id']},#{r['num_votes']} right rotate by 90 offset 0,character -0.5 textcolor rgb \"white\" front")
|
||||
|
||||
Loading…
Reference in New Issue
Block a user