Added scaling and truncating to the bar with poll buttons with answers

This commit is contained in:
Oleksandr Zhurbenko 2015-08-21 10:14:56 -07:00
parent 39e51604a0
commit 953a98b038
3 changed files with 19 additions and 4 deletions

View File

@ -178,6 +178,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) ->

View File

@ -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;
}

View File

@ -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}}