PR #166 fix long level name text wrapping issue

This commit is contained in:
Peter Cottle 2014-03-17 10:42:38 -07:00
parent 45bed38392
commit f9f40fe630
2 changed files with 37 additions and 12 deletions

View file

@ -297,7 +297,6 @@ div.canvasTerminalHolder > div.terminal-window-holder {
} }
/* Toolbar */ /* Toolbar */
div.toolbar { div.toolbar {
/* borrowed from try.github.com along with a bunch of other things */ /* borrowed from try.github.com along with a bunch of other things */
background-image: -webkit-linear-gradient(top, #EFEDEE, #C1C1C1); background-image: -webkit-linear-gradient(top, #EFEDEE, #C1C1C1);
@ -326,7 +325,7 @@ div.toolbar.level-toolbar {
background-image: -ms-linear-gradient(top, #B2FF2E, #8AD247); background-image: -ms-linear-gradient(top, #B2FF2E, #8AD247);
background-image: linear-gradient(top, #B2FF2E, #8AD247); background-image: linear-gradient(top, #B2FF2E, #8AD247);
border-radius: 0; border-radius: 0;
height: 50px; height: inherit;
font-size: 12px; font-size: 12px;
} }
@ -338,10 +337,32 @@ div.toolbar.level-toolbar button {
background-image: -webkit-linear-gradient(top, #EFEDEE, #C1C1C1); background-image: -webkit-linear-gradient(top, #EFEDEE, #C1C1C1);
} }
#show-goal { div.toolbar div.clearfix {
position: absolute; zoom: 1;
top: 10px; margin: 10px 0;
left: 4px; }
div.toolbar div.clearfix:after {
clear: both;
content: ".";
display: block;
font-size: 0;
height: 0;
line-height: 0;
visibility: hidden;
}
div.toolbar div.showGoalWrapper {
float: left;
margin-left: 6px;
}
div.toolbar div.levelNameWrapper {
text-align: center;
position: relative;
top: 5px;
margin-right: 23%;
margin-left: 90px;
} }
span.levelToolbarSpan { span.levelToolbarSpan {

View file

@ -143,13 +143,17 @@
<script type="text/html" id="level-toolbar-template"> <script type="text/html" id="level-toolbar-template">
<div class="toolbar level-toolbar box vertical center transitionAll hidden"> <div class="toolbar level-toolbar box vertical center transitionAll hidden">
<div> <div class="clearfix">
<button id="show-goal" type="button">Show Goal</button> <div class="showGoalWrapper">
<i class="icon-bolt"></i> <button id="show-goal" type="button">Show Goal</button>
</div>
<div class="levelNameWrapper">
<i class="icon-bolt"></i>
Level Level
<span class="levelToolbarSpan"> <span class="levelToolbarSpan">
<%= name %> <%= name %>
</span> </span>
</div>
</div> </div>
</div> </div>
</script> </script>