| Index: trunk/extensions/MoodBar/modules/ext.moodBar/ext.moodBar.core.css |
| — | — | @@ -40,17 +40,23 @@ |
| 41 | 41 | } |
| 42 | 42 | |
| 43 | 43 | .mw-moodBar-types { |
| 44 | | - overflow: hidden; /* clear */ |
| 45 | | - margin: 0 30px; |
| | 44 | + margin: 0 auto; |
| | 45 | + width: auto; |
| | 46 | + display: inline-block; |
| | 47 | +/* display: inline;*/ |
| 46 | 48 | } |
| 47 | 49 | |
| 48 | 50 | .mw-moodBar-type { |
| 49 | | - float: left; |
| 50 | 51 | min-width: 42px; |
| 51 | 52 | margin: 15px; |
| 52 | 53 | padding: 42px 0 5px 0; |
| 53 | 54 | /* @embed */ |
| 54 | 55 | background: transparent url(images/type-unknown.png) center top no-repeat; |
| | 56 | + display: inline-block; |
| | 57 | + /*display: inline;*/ |
| | 58 | +} |
| | 59 | + |
| | 60 | +.mw-moodBar-types-container { |
| 55 | 61 | text-align: center; |
| 56 | 62 | } |
| 57 | 63 | |
| Index: trunk/extensions/MoodBar/modules/ext.moodBar/ext.moodBar.core.js |
| — | — | @@ -17,7 +17,9 @@ |
| 18 | 18 | </div></div>', |
| 19 | 19 | userinput: '\ |
| 20 | 20 | <div class="mw-moodBar-overlayTitle"><html:msg key="INTROTITLE" /></div>\ |
| 21 | | - <div class="mw-moodBar-types"></div>\ |
| | 21 | + <div class="mw-moodBar-types-container">\ |
| | 22 | + <div class="mw-moodBar-types"></div>\ |
| | 23 | + </div>\ |
| 22 | 24 | <div class="mw-moodBar-form">\ |
| 23 | 25 | <div class="mw-moodBar-formTitle">\ |
| 24 | 26 | <span class="mw-moodBar-formNote"><html:msg key="moodbar-form-note" /></span>\ |
| — | — | @@ -37,7 +39,7 @@ |
| 38 | 40 | <div class="mw-moodBar-overlayWhatContent"></div>\ |
| 39 | 41 | </span>', |
| 40 | 42 | type: '\ |
| 41 | | - <div class="mw-moodBar-type mw-moodBar-type-$1" rel="$1">\ |
| | 43 | + <span class="mw-moodBar-type mw-moodBar-type-$1" rel="$1">\ |
| 42 | 44 | <span class="mw-moodBar-typeTitle"><html:msg key="moodbar-type-$1-title" /></span>\ |
| 43 | 45 | </div>', |
| 44 | 46 | loading: '\ |
| — | — | @@ -227,13 +229,26 @@ |
| 228 | 230 | .end(); |
| 229 | 231 | mb.swapContent( mb.tpl.userinput ); |
| 230 | 232 | |
| 231 | | - mb.ui.overlay |
| 232 | | - // Inject overlay |
| 233 | | - .appendTo( 'body' ) |
| 234 | | - // Fix the width after the icons and titles are localized and inserted |
| 235 | | - .width( function( i, width ) { |
| 236 | | - return width + 10; |
| 237 | | - } ); |
| | 233 | + mb.ui.overlay.appendTo( 'body' ); |
| | 234 | + mb.ui.overlay.show(); |
| | 235 | + |
| | 236 | + // Get the width of the types element, and add 100px |
| | 237 | + // 52px in known margins, 58px seems to be a necessary |
| | 238 | + // fudge factor, plus 30px so the close button doesn't collide |
| | 239 | + // with the rounded corners |
| | 240 | + var newWidth = mb.ui.overlay |
| | 241 | + .find('.mw-moodBar-types') |
| | 242 | + .width() + 140; |
| | 243 | + var titleWidth = mb.ui.overlay |
| | 244 | + .find('.mw-moodBar-overlayTitle') |
| | 245 | + .width() + 100; |
| | 246 | + |
| | 247 | + if ( newWidth < titleWidth ) { |
| | 248 | + newWidth = titleWidth; |
| | 249 | + } |
| | 250 | + |
| | 251 | + mb.ui.overlay.width(newWidth); |
| | 252 | + mb.ui.overlay.hide(); |
| 238 | 253 | |
| 239 | 254 | // Bind triger |
| 240 | 255 | mb.ui.trigger.click( mb.event.trigger ); |