Conflicts

This commit is contained in:
perroned 2015-05-06 16:05:34 -07:00
commit bf67593fa1
11 changed files with 152 additions and 396 deletions

View File

@ -383,6 +383,7 @@ Handlebars.registerHelper "visibility", (section) ->
setInSession 'webrtc_notification_is_displayed', false
@onLoadComplete = ->
document.title = "BigBlueButton #{window.getMeetingName() ? 'HTML5'}"
setDefaultSettings()
Meteor.Users.find().observe({

View File

@ -114,7 +114,7 @@ Meteor.startup ->
amplify.store key, value
return
)
#
Template.header.events
"click .joinAudioButton": (event) ->
onAudioJoinHelper()
@ -188,6 +188,9 @@ Template.header.events
$("#navbarMinimizedButton").removeClass("navbarMinimizedButtonSmall")
$("#navbarMinimizedButton").addClass("navbarMinimizedButtonLarge")
"click .toggleUserlist": (event) ->
toggleUsersList()
Template.slidingMenu.events
'click .joinAudioButton': (event) ->
onAudioJoinHelper()
@ -227,10 +230,6 @@ Template.slidingMenu.events
exitVoiceCall event
toggleSlidingMenu()
Template.main.helpers
setTitle: ->
document.title = "BigBlueButton #{window.getMeetingName() ? 'HTML5'}"
Template.main.rendered = ->
# the initialization code for the dialog presenting the user with microphone+listen only options
$("#joinAudioDialog").dialog(

View File

@ -1,204 +1,57 @@
<template name="header">
{{#if getInSession "display_navbar"}}
<nav id="navbar" class="myNavbar gradientBar top-bar" role="navigation">
<div class="navbarUserButtons navbarSection">
<div id="collapseButtonSection">
{{#if isPortraitMobile}}
<button class="navbar-toggle btn navbarButton collapseSlidingMenuButton">
<div class="push-menu-icon">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</div>
</button>
{{else}}
{{#if getInSession "display_hiddenNavbarSection"}}
{{> makeButton btn_class="navbarButton collapseNavbarButton" i_class="glyphicon glyphicon-chevron-left" rel="tooltip" data_placement="bottom" title="Collapse"}}
{{else}}
{{> makeButton btn_class="navbarButton collapseNavbarButton" i_class="glyphicon glyphicon-chevron-right" rel="tooltip" data_placement="bottom" title="Expand"}}
{{/if}}
{{/if}}
</div>
<div class="collapseNavbarSection">
<div class='hiddenNavbarSection'>
<!-- display/hide users list toggle -->
{{#if getInSession "display_usersList"}}
{{> makeButton btn_class="navbarIconToggleActive usersListIcon navbarButton collapseSectionButton" i_class="glyphicon glyphicon-user" rel="tooltip" data_placement="bottom" title="Hide List of Users"}}
{{else}}
{{> makeButton btn_class="usersListIcon navbarButton collapseSectionButton" i_class="glyphicon glyphicon-user" rel="tooltip" data_placement="bottom" title="Show List of Users"}}
{{/if}}
<nav id="navbar" class="myNavbar gradientBar top-bar" role="navigation">
{{#if getInSession "display_usersList"}}
{{> makeButton btn_class="toggleUserlist navbarButton" i_class="ion-navicon-round" rel="tooltip" data_placement="bottom" title="Close Userlist"}}
{{else}}
{{> makeButton btn_class="toggleUserlist navbarButton" i_class="ion-navicon-round" rel="tooltip" data_placement="bottom" title="Open Userlist"}}
{{/if}}
<span class="navbarTitle">
{{getWhiteboardTitle}}
</span>
<!-- display/hide whiteboard toggle -->
{{#if getInSession "display_whiteboard"}}
{{> makeButton btn_class="navbarIconToggleActive whiteboardIcon navbarButton collapseSectionButton" i_class="ion-easel" rel="tooltip" data_placement="bottom" title="Hide Whiteboard"}}
{{else}}
{{> makeButton btn_class="whiteboardIcon navbarButton collapseSectionButton" i_class="ion-easel" rel="tooltip" data_placement="bottom" title="Show Whiteboard"}}
{{/if}}
<!-- display/hide chat bar toggle -->
{{#if getInSession "display_chatbar"}}
{{> makeButton btn_class="navbarIconToggleActive chatBarIcon navbarButton collapseSectionButton" i_class="glyphicon glyphicon-comment" rel="tooltip" data_placement="bottom" title="Hide Message Pane"}}
{{else}}
{{> makeButton btn_class="chatBarIcon navbarButton collapseSectionButton" i_class="glyphicon glyphicon-comment" rel="tooltip" data_placement="bottom" title="Show Message Pane"}}
{{/if}}
{{> makeButton id="settingsIcon" btn_class="settingsIcon" i_class="widget" rel="tooltip"
title="BigBlueButton Settings"}}
<!-- display/hide webcam streams toggle -->
<!-- {{#if isCurrentUserSharingVideo}}
{{> makeButton btn_class="navbarIconToggleActive videoFeedIcon navbarButton" i_class="glyphicon glyphicon-stop" sharingVideo=true rel="tooltip" data_placement="bottom" title="Hide Webcams"}}
{{else}}
{{> makeButton btn_class="videoFeedIcon navbarButton" i_class="glyphicon glyphicon-facetime-video" sharingVideo=false rel="tooltip" data_placement="bottom" title="Show Webcams"}}
{{/if}} -->
</div>
<div class='audioControllersSection'>
<!-- We are in a form of audio -->
{{#if amIInAudio}}
<div class='hiddenNavbarSection'>
<!-- display the button for leaving audio -->
{{> makeButton btn_class="navbarIconToggleActive audioFeedIcon navbarButton audioButton leaveAudioButton" i_class="ion-volume-mute" sharingAudio=true rel="tooltip" data_placement="bottom" title="Leave Audio Call"}}
</div>
{{#unless amIListenOnlyAudio}}
{{#if isCurrentUserMuted}}
<!-- if you are muted the button representing your status will show volume off -->
{{> makeButton btn_class="muteIcon navbarButton audioButton" i_class="glyphicon glyphicon-volume-off" sharingAudio=true rel="tooltip" data_placement="bottom" title="Unmute"}}
{{else}}
{{#if isCurrentUserTalking}}
<!-- you are talking. Display a high volume/volume up representing voice activity -->
{{> makeButton btn_class="navbarIconToggleActive muteIcon navbarButton audioButton" i_class="glyphicon glyphicon-volume-up" sharingAudio=true rel="tooltip" data_placement="bottom" title="Mute"}}
{{else}}
<!-- you are not talking. Display low volume/volume down representing no voice activity -->
{{> makeButton btn_class="navbarIconToggleActive muteIcon navbarButton audioButton" i_class="glyphicon glyphicon-volume-down" sharingAudio=true rel="tooltip" data_placement="bottom" title="Mute"}}
{{/if}}
{{/if}}
{{/unless}}
{{else}}
<div class='hiddenNavbarSection'>
{{> makeButton btn_class="audioFeedIcon navbarButton audioButton joinAudioButton" i_class="glyphicon glyphicon-headphones" sharingAudio=false rel="tooltip" data_placement="bottom" title="Join Audio Call"}}
</div>
{{/if}}
</div>
<div class='hiddenNavbarSection'>
{{#if isCurrentUserRaisingHand}}
{{> makeButton btn_class="lowerHand navbarIconToggleActive navbarButton collapseSectionButton" i_class="ion-android-hand" rel="tooltip" data_placement="bottom" title="Lower your hand"}}
{{else}}
{{> makeButton btn_class="raiseHand navbarButton collapseSectionButton" i_class="ion-android-hand" rel="tooltip" data_placement="bottom" title="Raise your hand"}}
{{/if}}
{{> recordingStatus}}
</div>
</div>
</div>
<div class="navbarTitle navbarSection"><span>{{getMeetingName}}</span></div>
<div class="navbarSettingsButtons navbarSection">
{{> makeButton id="userId" btn_class="settingsIcon navbarButton" i_class="glyphicon glyphicon-cog" rel="tooltip" data_placement="bottom" title="Settings"}}
{{> makeButton btn_class="signOutIcon navbarButton" i_class="glyphicon glyphicon-log-out" rel="tooltip" data_placement="bottom" title="Logout"}}
</div>
</nav>
<div class="navbarFiller"></div>
{{else}}
{{> makeButton id="navbarMinimizedButton" btn_class="hideNavbarIcon navbarMinimizedButtonSmall" i_class="glyphicon glyphicon-chevron-down" rel="tooltip" data_placement="bottom" title="Display Navbar"}}
{{/if}}
</template>
<!-- dialog that presents user with audio options
contains microphone and listen only with icons -->
<template name="joinAudioDialog">
<div id="joinAudioDialog" title="How do you want to join the audio?">
<hr class="joinAudioDialogHr"/>
<div style="float:left; border-right: 2px solid darkgrey; width: 50%; height: 100%">
<i class="icon ion-mic-a joinAudioDialogIcon"></i>
<br/>
<button id="microphone" class="joinAudioDialogButton">Microphone</button>
</div>
<div style="float:left; width: 50%">
<i class="icon ion-volume-high joinAudioDialogIcon"></i>
<br/>
<button id="listen_only" class="joinAudioDialogButton">Listen Only</button>
</div>
<br style="clear:both;"/><br/>
<hr style="margin: 10px; border: 1px solid darkgrey;" />
</div>
{{> makeButton id="logout" btn_class="logoutIcon" i_class="arrow-right" rel="tooltip"
title="Logout"}}
</nav>
</template>
<template name="main">
{{setTitle}}
<body>
{{> modals}}
<div id="dialog" title="Confirm Logout">
<p>Are you sure you want to log out?</p>
</div>
{{> joinAudioDialog}}
<div id="notification">
<div id="browser-icon-container"></div>
<p id="notification-text"></p>
</div>
<div id="main" class="mainContainer row-fluid">
{{#if isDisconnected}}
{{>status}}
{{else}}
<div class="fixed">{{> header}}</div>
{{> whiteboard id="whiteboard" title=getWhiteboardTitle name="whiteboard"}}
{{> chatbar id="chat" title="Chat" name="chatbar"}}
{{> usersList id="users" name="usersList"}}
<audio id="remote-media" autoplay="autoplay"></audio>
{{/if}}
<div id='shield'></div>
</div>
{{#if isPortraitMobile}}
{{> slidingMenu}}
<div id="container">
{{#if isDisconnected}}
{{>status}}
{{else}}
{{> usersList id="users" name="usersList"}}
<div id="main">
{{> header}}
<div id="panels">
{{> whiteboard id="whiteboard" name="whiteboard"}}
{{> chatbar id="chat" title="Chat" name="chatbar"}}
</div>
{{> modals}}
</div>
{{/if}}
</body>
</div>
</template>
<template name="modals">
{{> settingsModal}}
<div id="dialog" title="Confirm Logout">
<p>Are you sure you want to log out?</p>
</div>
<div id="notification">
<div id="browser-icon-container"></div>
<p id="notification-text"></p>
</div>
<audio id="remote-media" autoplay="autoplay"></audio>
<div id='shield'></div>
</template>
<template name="recordingStatus">
<!-- Recording status of the meeting -->
{{#with getCurrentMeeting}}
{{#if intendedForRecording}}
{{#if currentlyBeingRecorded}}
<button class="recordingStatus recordingStatusTrue" rel="tooltip" data-placement="bottom" title="This Meeting is Being Recorded"><span class="glyphicon glyphicon-record"></span> Recording</button>
{{else}}
<button class="recordingStatus recordingStatusFalse" rel="tooltip" data-placement="bottom" title="This Meeting is Not Currently Being Recorded"><span class="glyphicon glyphicon-record"></span></button>
{{/if}}
{{/if}}
{{/with}}
</template>
<template name='slidingMenu'>
<div class="sliding-menu" id="sliding-menu">
<div class="slideSection">
{{#if getInSession "display_usersList"}}
{{> makeButton btn_class="navbarIconToggleActive usersListIcon slideButton" i_class="glyphicon glyphicon-user" rel="tooltip" data_placement="right" title="Hide List of Users"}}
{{else}}
{{> makeButton btn_class="usersListIcon slideButton" i_class="glyphicon glyphicon-user" rel="tooltip" data_placement="right" title="Show List of Users"}}
{{/if}}
{{#if getInSession "display_whiteboard"}}
{{> makeButton btn_class="navbarIconToggleActive whiteboardIcon slideButton" i_class="ion-easel" rel="tooltip" data_placement="right" title="Hide Whiteboard"}}
{{else}}
{{> makeButton btn_class="whiteboardIcon slideButton" i_class="ion-easel" rel="tooltip" data_placement="right" title="Show Whiteboard"}}
{{/if}}
{{#if getInSession "display_chatbar"}}
{{> makeButton btn_class="navbarIconToggleActive chatBarIcon slideButton" i_class="glyphicon glyphicon-comment" rel="tooltip" data_placement="right" title="Hide Message Pane"}}
{{else}}
{{> makeButton btn_class="chatBarIcon slideButton" i_class="glyphicon glyphicon-comment" rel="tooltip" data_placement="right" title="Show Message Pane"}}
{{/if}}
{{#if amIInAudio}}
{{> makeButton btn_class="navbarIconToggleActive audioFeedIcon slideButton audioButton leaveAudioButton" i_class="ion-volume-mute" sharingAudio=true rel="tooltip" data_placement="bottom" title="Leave Audio Call"}}
{{else}}
{{> makeButton btn_class="audioFeedIcon slideButton audioButton joinAudioButton" i_class="glyphicon glyphicon-headphones" sharingAudio=false rel="tooltip" data_placement="bottom" title="Join Audio Call"}}
{{/if}}
{{#if isCurrentUserRaisingHand}}
{{> makeButton btn_class="lowerHand navbarIconToggleActive slideButton" i_class="ion-android-hand" rel="tooltip" data_placement="right" title="Lower your hand"}}
{{else}}
{{> makeButton btn_class="raiseHand slideButton" i_class="ion-android-hand" rel="tooltip" data_placement="right" title="Raise your hand"}}
{{/if}}
</div>
</div>
</template>

View File

@ -8,27 +8,16 @@
}
#chat {
background-color: extract(@white, 2);
border: 1px solid extract(@lightGrey, 3);
float: left;
background: extract(@white, 1);
margin-left: 0.25%;
margin-right: 0.25%;
overflow: hidden;
-webkit-flex: 1 1 25%;
flex: 1 1 25%;
padding-left: 0px;
padding-right: 0px;
width: 100%;
@media @landscape {
height: calc(~'100% - 15px');
-webkit-order: 3;
order: 3;
}
@media @mobile-portrait-with-keyboard, @desktop-portrait, @mobile-portrait {
-webkit-order: 2;
order: 2;
-webkit-flex: 3 3 30%;
-moz-flex: 3 3 30%;
-ms-flex: 3 3 30%;
flex: 3 3 30%;
height: 100%;
}
margin-left: 2px;
margin-right: 2px;
margin-top: 5px;
}
.chat {
@ -49,7 +38,6 @@
}
}
}
}
#chatbody {
@ -112,7 +100,9 @@
}
.chat-input-wrapper {
padding:10px;
padding-top:10px;
padding-left:10px;
padding-right:10px;
}
#chat-user-list {

View File

@ -15,7 +15,7 @@ body {
}
@media @mobile-portrait-with-keyboard, @desktop-portrait, @mobile-portrait {
position: relative;
top: 15px;
top: 0;
}
@media @mobile-portrait-with-keyboard, @mobile-portrait {
overflow-x: hidden;
@ -31,8 +31,6 @@ body {
background: extract(@white, 1);
border: 1px solid extract(@lightGrey, 3);
float: left;
height: 100%;
margin-top: 10px;
}
.extraConversationScrollableMenu {
@ -45,41 +43,6 @@ body {
margin-left:5px
}
.mainContainer {
height: 95%;
}
.myFooter {
min-height: 40px !important;
color: black;
padding-top: 13px;
text-align: center;
background-color: #EEEEEE;
@media @landscape {
position:fixed;
bottom:0;
margin-bottom: 0;
border-width: 1px 0 0;
width: 100%;
}
@media @landscape, @desktop-portrait {
font-size: 10px;
max-height: 20px;
}
@media @mobile-portrait {
font-size: 2vw;
}
/*the footer should be visible only at the very bottom of a portrait page*/
@media @desktop-portrait, @mobile-portrait {
order: 4;
-webkit-order: 4;
}
@media @mobile-portrait-with-keyboard {
display: none; /*hide when typing*/
}
}
.myNavbar {
border-bottom: 0px;
&.gradientBar {
@ -181,8 +144,6 @@ body {
.navbarTitle {
color: extract(@white, 1);
display: block;
float: left;
font-weight: bold;
text-align: center;
overflow: hidden;
@ -272,51 +233,26 @@ body {
padding-left: 10px;
padding-top: 5px;
@media @desktop-portrait, @landscape {
font-size: 14px;
font-size: 18px;
height: 50px;
}
@media @mobile-portrait, @mobile-portrait-with-keyboard {
font-size: 4vw;
}
}
#main {
padding-top: 50px;
padding-left: 0.25%;
padding-right: 0.25%;
display: -moz-flex;
display: -ms-flexbox;
display: -ms-flex;
display: -webkit-flex;
display: flex;
@media @desktop-portrait {
padding-top: 0;
}
#container {
@media @landscape {
display: -moz-flex;
display: -ms-flexbox;
display: -ms-flex;
display: -webkit-flex;
display: flex;
-webkit-flex-flow: row;
flex-flow: row;
height: calc(~'100% - 40px');
/**
* Making sure these properties can't be overriden in landscape orientation
* (landscape view can't be shifted by the sliding menu).
*/
position: relative !important;
top: 0 !important;
left: 0 !important;
}
@media @mobile-portrait-with-keyboard, @desktop-portrait, @mobile-portrait {
-webkit-flex-flow: column;
flex-flow: column;
flex-direction: column;
min-height: 125%;
max-height: 125%;
}
@media @mobile-portrait-with-keyboard, @mobile-portrait {
transition: left 0.1s;
position: relative;
top: 0;
left: 0;
}
width: 100%;
height: 100%;
}
.ui-widget-overlay {
@ -654,3 +590,35 @@ body {
.ui-dialog-titlebar {
text-align: center;
}
#main {
@media @landscape {
-webkit-flex: 4 4 80%;
-moz-flex: 4 4 80%;
-ms-flex: 4 4 80%;
flex: 4 4 80%;
height: 99%;
}
@media @mobile-portrait-with-keyboard, @desktop-portrait, @mobile-portrait {
height: 100%;
}
}
#panels {
display: -moz-flex;
display: -ms-flexbox;
display: -ms-flex;
display: -webkit-flex;
display: flex;
@media @landscape {
-webkit-flex-flow: row;
flex-flow: row;
}
@media @mobile-portrait-with-keyboard, @desktop-portrait, @mobile-portrait {
-webkit-flex-flow: column;
flex-flow: column;
}
width: 100%;
height: calc(~'100% - 55px');
margin-bottom: 1%;
}

View File

@ -54,30 +54,20 @@
}
#users {
margin-left: 0.25%;
margin-right: 0.25%;
padding-bottom: 10px; /*min-width:230px;*/
-webkit-flex: 1 1 25%;
flex: 1 1 25%;
@media @landscape {
height: calc(~'100% - 15px');
-webkit-order: 1;
order: 1;
min-width: 0;
-webkit-flex: 1 1 20%;
-moz-flex: 1 1 20%;
-ms-flex: 1 1 20%;
flex: 1 1 20%;
height: 99%;
}
@media @desktop-portrait, @mobile-portrait {
-webkit-order: 3;
order: 3;
margin-bottom: 0px;
padding-bottom: 10x; /*so that the footer does not overlap */
}
@media @mobile-portrait-with-keyboard {
display: none; //hide when typing
@media @mobile-portrait-with-keyboard, @desktop-portrait, @mobile-portrait {
display: none !important;
}
}
#user-contents {
height: 100%; /* for the inside scrolling list to utilize as much room as possible, this surrounding window must also take up as much room as possible */
height: 83vh; /* for the inside scrolling list to utilize as much room as possible, this surrounding window must also take up as much room as possible */
.userlist {
height: calc(~'100% - 29px'); /* height of user contents - user list */
@ -111,3 +101,8 @@
width:70%;
}
}
.closeUserlistIcon {
float: right;
margin-right: 5px;
}

View File

@ -1,68 +1,17 @@
@import "variables";
#whiteboard {
padding: 0 !important;
margin-left: 0.25%;
margin-right: 0.25%;
-webkit-flex: 2 2 50%;
-moz-flex: 2 2 50%;
-ms-flex: 2 2 50%;
flex: 2 2 50%;
min-width: 0;
@media @landscape {
height: calc(~'100% - 15px');
-webkit-order: 2;
order: 2;
min-width: 50%;
min-height: calc(~'100% - 65px');
}
@media @mobile-portrait-with-keyboard, @desktop-portrait, @mobile-portrait {
-webkit-order: 1;
order: 1;
min-width: 99%; /* 100% - (2 #whileboard margins 0.25% each + 2 #main paddings 0.25% each) */
}
&:-webkit-full-screen {
width: 100%;
-webkit-flex: 7 7 70%;
-moz-flex: 7 7 70%;
-ms-flex: 7 7 70%;
flex: 7 7 70%;
height: 100%;
margin-top: 0px;
#whiteboard-navbar {
display: none;
}
#whiteboard-container {
height: 100%;
}
#whiteboard-paper {
height: 100%;
}
}
&:-moz-full-screen {
width: 100%;
height: 100%;
margin-top: 0px;
#whiteboard-navbar {
display: none;
}
#whiteboard-container {
height: 100%;
}
#whiteboard-paper {
height: 100%;
}
}
&:fullscreen {
width: 100%;
height: 100%;
margin-top: 0px;
#whiteboard-navbar {
display: none;
}
#whiteboard-container {
height: 100%;
}
#whiteboard-paper {
height: 100%;
}
}
margin-left: 4px;
margin-right: 2px;
margin-top: 5px;
padding-bottom: 5px;
}
#whiteboard-paper {
@ -95,7 +44,7 @@
align-items: center;
-webkit-align-items: center;
-ms-align-items: center;
height: calc(~'100% - 39px');
height: calc(~'99% - 39px');
}
}

View File

@ -1,10 +1,9 @@
<template name="chatbar">
<div id="{{id}}" {{visibility name}} class="component">
<h3 class="title gradientBar">
<span class="glyphicon glyphicon-comment heading"></span>
{{> extraConversations}}
<span class="ion-ios-chatbubble"></span>
{{> extraConversations}}
</h3>
{{>tabButtons}} <!-- Display public/options tabs, and private chat tabs -->
{{#if getInSession "display_chatPane"}}
<div id="chatbody">
<ul class="chat" {{messageFontSize}}>

View File

@ -4,3 +4,7 @@ Template.usersList.helpers
if numberUsers > 8
return "Users: #{numberUsers}"
# do not display the label if there are just a few users
Template.usersList.events
"click .closeUserlistIcon": (event, template) ->
toggleUsersList()

View File

@ -1,15 +1,17 @@
<template name="usersList">
<div id="{{id}}" {{visibility name}} class="component">
<h3 class="title gradientBar"><span class="glyphicon glyphicon-user heading"></span> {{getInfoNumberOfUsers}} </h3>
<div id="user-contents">
<div class="userlist ScrollableWindowY">
{{#each getUsersInMeeting}}
<div id="content">
{{>userItem}}
</div>
{{/each}}
</div>
</div>
</div>
<div id="{{id}}" {{visibility name}} class="component">
<h3 class="title">
{{getMeetingName}}
<span class="closeUserlistIcon"><i class="ion-close-circled"></i></span>
</h3>
<div id="user-contents">
<div class="userlist ScrollableWindowY">
{{#each getUsersInMeeting}}
<div id="content">
{{>userItem}}
</div>
{{/each}}
</div>
</div>
</div>
</template>

View File

@ -1,18 +1,14 @@
<template name="whiteboard">
<div id="{{id}}" {{visibility name}} class="component gradientBar">
<h3 id="whiteboard-navbar" class="title">
{{#if isMobileChromeOrFirefox}}
{{> makeButton btn_class="fullscreenWhiteboardButton" i_class="glyphicon glyphicon-fullscreen"}}
{{/if}}
<span class="ion-easel heading"></span>
{{title}}
</h3>
{{#each getCurrentSlide}}
{{> slide}}
{{/each}}
<div id="whiteboard-container">
<div id="whiteboard-paper">
</div>
</div>
<div id="{{id}}" {{visibility name}} class="component gradientBar">
<h3 id="whiteboard-navbar" class="title">
<span class="ion-easel heading"></span>
</h3>
{{#each getCurrentSlide}}
{{> slide}}
{{/each}}
<div id="whiteboard-container">
<div id="whiteboard-paper">
</div>
</div>
</div>
</template>