Added proper styling for polls

diff --git a/com.woltlab.wcf/templates/poll.tpl b/com.woltlab.wcf/templates/poll.tpl
index aaf78794eca39ee4bfed7cb7f7d12f313258daf3..e6285440f86567404a889595e222d0a8b0bbcda4 100644 (file)
--- a/com.woltlab.wcf/templates/poll.tpl
+++ b/com.woltlab.wcf/templates/poll.tpl
@@ -11,7 +11,7 @@
 
 <div class="pollContainer" data-poll-id="{@$poll->pollID}" data-can-vote="{if $poll->canVote()}1{else}0{/if}" data-can-view-result="{if $poll->canSeeResult()}1{else}0{/if}" data-can-view-participants="{if $poll->canViewParticipants()}true{else}false{/if}" data-in-vote="{if $poll->canVote() && !$poll->isParticipant()}1{else}0{/if}" data-question="{$poll->question}" data-max-votes="{@$poll->maxVotes}">
        <section>
-               <h1>{$poll->question} <span class="badge jsTooltip" title="{lang}wcf.poll.totalVotes{/lang}">{#$poll->votes}</span></h1>
+               <h2>{$poll->question} <span class="badge jsTooltip" title="{lang}wcf.poll.totalVotes{/lang}">{#$poll->votes}</span></h2>
                
                <div class="pollInnerContainer">
                        {if !$__wcf->getUser()->userID}

diff --git a/com.woltlab.wcf/templates/pollResult.tpl b/com.woltlab.wcf/templates/pollResult.tpl
index 750afe019a909bfcb5885530a167493aca0ab436..ba91fc32c31c69d34937c71ee19e30fd0826a115 100644 (file)
--- a/com.woltlab.wcf/templates/pollResult.tpl
+++ b/com.woltlab.wcf/templates/pollResult.tpl
@@ -1,10 +1,12 @@
 <ol class="pollResultList">
        {foreach from=$poll->getOptions(true) item=option}
                <li class="pollResultItem">
-                       <span class="pollMeter" style="width: {if $option->getRelativeVotes($poll)}{@$option->getRelativeVotes($poll)}%{else}0{/if}">&nbsp;</span>
-                       <div class="caption">
-                               <span class="optionName">{$option->optionValue} ({#$option->votes})</span>
-                               <span class="relativeVotes">{@$option->getRelativeVotes($poll)}%</span>
+                       <div class="pollResultItemCaption">
+                               <span class="pollOptionName">{$option->optionValue} ({#$option->votes})</span>
+                               <span class="pollOptionRelativeValue">{@$option->getRelativeVotes($poll)}%</span>
+                       </div>
+                       <div class="pollMeter">
+                               <div class="pollMeterValue" style="width: {if $option->getRelativeVotes($poll)}{@$option->getRelativeVotes($poll)}%{else}0{/if}"></div>
                        </div>
                </li>
        {/foreach}

diff --git a/wcfsetup/install/files/js/WCF.Poll.js b/wcfsetup/install/files/js/WCF.Poll.js
index f80b398c26804fd7b6c63d6bf860ae1204060ba7..c2b70966195ea8544bd39bb720f9617840f4c764 100644 (file)
--- a/wcfsetup/install/files/js/WCF.Poll.js
+++ b/wcfsetup/install/files/js/WCF.Poll.js
@@ -24,19 +24,13 @@ WCF.Poll.Management = Class.extend({
        
        /**
         * number of options
-        * @var integer
+        * @var int
         */
        _count: 0,
        
-       /**
-        * width for input-elements
-        * @var integer
-        */
-       _inputSize: 0,
-       
        /**
         * maximum allowed number of options
-        * @var integer
+        * @var int
         */
        _maxOptions: 0,
        
@@ -60,22 +54,12 @@ WCF.Poll.Management = Class.extend({
                this._createOptionList(optionList);
                
                // bind event listener
-               $(window).resize($.proxy(this._resize, this));
                this._container.parents('form').submit($.proxy(this._submit, this));
                
                // init sorting
-               new WCF.Sortable.List(containerID, '', undefined, undefined, true);
-               
-               // trigger resize event for field length calculation
-               this._resize();
-               
-               // update size on tab select
-               var self = this;
-               this._container.closest('.messageTabMenu').on('messagetabmenushow', function(event, data) {
-                       if (data.activeTab.name == 'poll') {
-                               self._resize();
-                       }
-               });
+               new WCF.Sortable.List(containerID, '', undefined, {
+                       toleranceElement: '> div'
+               }, true);
        },
        
        /**
@@ -114,12 +98,12 @@ WCF.Poll.Management = Class.extend({
                }
                
                // insert buttons
-               var $buttonContainer = $('<span class="sortableButtonContainer" />').appendTo($listItem);
-               $('<span class="icon icon16 fa-plus jsTooltip jsAddOption pointer" title="' + WCF.Language.get('wcf.poll.button.addOption') + '" />').click($.proxy(this._addOption, this)).appendTo($buttonContainer);
-               $('<span class="icon icon16 fa-times jsTooltip jsDeleteOption pointer" title="' + WCF.Language.get('wcf.poll.button.removeOption') + '" />').click($.proxy(this._removeOption, this)).appendTo($buttonContainer);
+               var $container = $('<div class="pollOptionInput" />').appendTo($listItem);
+               $('<span class="icon icon16 fa-plus jsTooltip jsAddOption pointer" title="' + WCF.Language.get('wcf.poll.button.addOption') + '" />').click($.proxy(this._addOption, this)).appendTo($container);
+               $('<span class="icon icon16 fa-times jsTooltip jsDeleteOption pointer" title="' + WCF.Language.get('wcf.poll.button.removeOption') + '" />').click($.proxy(this._removeOption, this)).appendTo($container);
                
                // insert input field
-               var $input = $('<input type="text" value="' + optionValue + '" maxlength="255" />').css({ width: this._inputSize + "px" }).keydown($.proxy(this._keyDown, this)).appendTo($listItem);
+               var $input = $('<input type="text" value="' + optionValue + '" maxlength="255" />').keydown($.proxy(this._keyDown, this)).appendTo($container);
                $input.click(function() {
                        // work-around for some weird focus issue on iOS/Android
                        if (document.activeElement !== this) {
@@ -189,25 +173,6 @@ WCF.Poll.Management = Class.extend({
                }
        },
        
-       /**
-        * Handles the 'resize'-event to adjust input-width.
-        */
-       _resize: function() {
-               var $containerWidth = this._container.innerWidth();
-               
-               // select first option to determine dimensions
-               var $listItem = this._container.children('li:eq(0)');
-               var $buttonWidth = $listItem.children('.sortableButtonContainer').outerWidth();
-               var $inputSize = $containerWidth - $buttonWidth;
-               
-               if ($inputSize != this._inputSize) {
-                       this._inputSize = $inputSize;
-                       
-                       // update width of <input /> elements
-                       this._container.find('li > input').css({ width: this._inputSize + 'px' });
-               }
-       },
-       
        /**
         * Inserts hidden input elements storing the option values.
         */
@@ -215,7 +180,7 @@ WCF.Poll.Management = Class.extend({
                var $options = [ ];
                this._container.children('li').each(function(index, listItem) {
                        var $listItem = $(listItem);
-                       var $optionValue = $.trim($listItem.children('input').val());
+                       var $optionValue = $.trim($listItem.find('input').val());
                        
                        // ignore empty values
                        if ($optionValue != '') {

diff --git a/wcfsetup/install/files/style/ui/poll.scss b/wcfsetup/install/files/style/ui/poll.scss
new file mode 100644 (file)
index 0000000..f983b19
--- /dev/null
+++ b/wcfsetup/install/files/style/ui/poll.scss
@@ -0,0 +1,81 @@
+/* poll create/edit form */
+#pollOptionContainer .pollOptionInput {
+       align-items: center;
+       margin: 5px 0;
+       
+       /* using `display: flex` inside a native list-item is pretty weird */
+       display: inline-flex;
+       width: 100%;
+       
+       > .icon {
+               flex: 0 0 auto;
+               margin: 0 5px;
+       }
+       
+       > input {
+               flex: 1 1 auto;
+               margin-left: 5px;
+       }
+}
+
+/* displayed poll */
+.pollContainer {
+       border: 1px solid $wcfContentBorder;
+       border-width: 1px 0;
+       float: left;
+       margin: 0 20px 10px 0;
+       max-width: 50%;
+       min-width: 300px;
+       padding: 10px 0;
+       
+       h2 {
+               @include wcfFontHeadline;
+       }
+       
+       .pollInnerContainer {
+               margin-top: 30px;
+               
+               dd:not(:last-child) {
+                       margin-bottom: 5px;
+               }
+       }
+       
+       .formSubmit {
+               border-top: 1px solid $wcfContentBorderInner;
+               padding-top: 10px;
+       }
+       
+       .pollResultItem {
+               & + .pollResultItem {
+                       margin-top: 20px;
+               }
+               
+               /* option name in result list */
+               .pollResultItemCaption {
+                       align-items: flex-end;
+                       display: flex;
+                       
+                       > .pollOptionName {
+                               flex: 1 1 auto;
+                       }
+                       
+                       > .pollOptionRelativeValue {
+                               color: rgb(125, 130, 135);
+                               flex: 0 0 50px;
+                               text-align: right;
+                       }
+               }
+               
+               /* visual representation of relative votes per option */
+               .pollMeter {
+                       background-color: $wcfContentBorderInner;
+                       height: 5px;
+                       margin-top: 5px;
+                       
+                       > .pollMeterValue {
+                               background-color: $wcfContentBorder;
+                               height: 100%;
+                       }
+               }
+       }
+}