From 818e30184d7ee92e7d8bed204f4e6c984516bccf Mon Sep 17 00:00:00 2001 From: Alexander Ebert Date: Fri, 25 Mar 2016 15:17:45 +0100 Subject: [PATCH] Added proper styling for polls --- com.woltlab.wcf/templates/poll.tpl | 2 +- com.woltlab.wcf/templates/pollResult.tpl | 10 +-- wcfsetup/install/files/js/WCF.Poll.js | 55 +++------------ wcfsetup/install/files/style/ui/poll.scss | 81 +++++++++++++++++++++++ 4 files changed, 98 insertions(+), 50 deletions(-) create mode 100644 wcfsetup/install/files/style/ui/poll.scss diff --git a/com.woltlab.wcf/templates/poll.tpl b/com.woltlab.wcf/templates/poll.tpl index aaf78794ec..e6285440f8 100644 --- a/com.woltlab.wcf/templates/poll.tpl +++ b/com.woltlab.wcf/templates/poll.tpl @@ -11,7 +11,7 @@
-

{$poll->question} {#$poll->votes}

+

{$poll->question} {#$poll->votes}

{if !$__wcf->getUser()->userID} diff --git a/com.woltlab.wcf/templates/pollResult.tpl b/com.woltlab.wcf/templates/pollResult.tpl index 750afe019a..ba91fc32c3 100644 --- a/com.woltlab.wcf/templates/pollResult.tpl +++ b/com.woltlab.wcf/templates/pollResult.tpl @@ -1,10 +1,12 @@
    {foreach from=$poll->getOptions(true) item=option}
  1. -   -
    - {$option->optionValue} ({#$option->votes}) - {@$option->getRelativeVotes($poll)}% +
    + {$option->optionValue} ({#$option->votes}) + {@$option->getRelativeVotes($poll)}% +
    +
    +
    2. {/foreach} diff --git a/wcfsetup/install/files/js/WCF.Poll.js b/wcfsetup/install/files/js/WCF.Poll.js index f80b398c26..c2b7096619 100644 --- 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 = $('').appendTo($listItem); - $('').click($.proxy(this._addOption, this)).appendTo($buttonContainer); - $('').click($.proxy(this._removeOption, this)).appendTo($buttonContainer); + var $container = $('
    ').appendTo($listItem); + $('').click($.proxy(this._addOption, this)).appendTo($container); + $('').click($.proxy(this._removeOption, this)).appendTo($container); // insert input field - var $input = $('').css({ width: this._inputSize + "px" }).keydown($.proxy(this._keyDown, this)).appendTo($listItem); + var $input = $('').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 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 index 0000000000..f983b196a9 --- /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%; + } + } + } +} -- 2.20.1