This is an automated email from the git hooks/post-receive script. New commit to branch develop in repository pollen. See https://gitlab.nuiton.org/chorem/pollen.git commit fea97cc3cd78a5ac40558aad954c276e2eb406c7 Author: Kevin Morin <morin@codelutin.com> Date: Thu Jul 6 17:06:14 2017 +0200 style --- pollen-ui-riot-js/src/main/web/css/custom.css | 1 + .../src/main/web/tag/SignCheck.tag.html | 5 +- .../src/main/web/tag/UserProfile.tag.html | 244 +++++++------- .../web/tag/components/ContextualMenu.tag.html | 6 +- .../web/tag/favoriteList/FavoriteList.tag.html | 32 +- .../web/tag/favoriteList/FavoriteLists.tag.html | 62 ++-- .../src/main/web/tag/poll/Polls.tag.html | 18 +- .../src/main/web/tag/poll/Votes.tag.html | 372 ++++++++++----------- 8 files changed, 360 insertions(+), 380 deletions(-) diff --git a/pollen-ui-riot-js/src/main/web/css/custom.css b/pollen-ui-riot-js/src/main/web/css/custom.css index bdf67d1b..bdd25ab7 100644 --- a/pollen-ui-riot-js/src/main/web/css/custom.css +++ b/pollen-ui-riot-js/src/main/web/css/custom.css @@ -1,6 +1,7 @@ :root{ --main: #04c4bb; + --main-hover: #129993; --background: #ffffff; --default: #2c3e50; --field-border: #96a8b2; diff --git a/pollen-ui-riot-js/src/main/web/tag/SignCheck.tag.html b/pollen-ui-riot-js/src/main/web/tag/SignCheck.tag.html index a7c695f7..6bad4cbc 100644 --- a/pollen-ui-riot-js/src/main/web/tag/SignCheck.tag.html +++ b/pollen-ui-riot-js/src/main/web/tag/SignCheck.tag.html @@ -19,8 +19,9 @@ * #L% */ <SignCheck> + <h1><i class="fa fa-user"/> {__.title}</h1> + <div class="container"> - <h1 class="c-heading"><i class="fa fa-user"/> {__.title}</h1> <div show={waiting}> {__.validating} @@ -79,7 +80,7 @@ <style> .container { - width: 500px; + padding: 20px 20px 40px 20px; } </style> diff --git a/pollen-ui-riot-js/src/main/web/tag/UserProfile.tag.html b/pollen-ui-riot-js/src/main/web/tag/UserProfile.tag.html index bbc65b4f..b33a4482 100644 --- a/pollen-ui-riot-js/src/main/web/tag/UserProfile.tag.html +++ b/pollen-ui-riot-js/src/main/web/tag/UserProfile.tag.html @@ -2,117 +2,120 @@ require("./components/HumanInput.tag.html"); <UserProfile> <div class="container"> - <h1 class="c-heading"><i class="fa fa-user"/> {__.title}</h1> - <hr> - <form ref="identity-form" class="identity-form"> - <HumanInput onsubmit={submitIdentity}/> - <h3 class="c-heading"><i class="fa fa-address-card"/> {__.identity}</h3> - <div class="o-form-element"> - <label class="c-label" for="name">{__.name}</label> - <input class="c-field {c-field--error : errors.name}" - type="text" - name="name" - ref="name" - value={user.name} - placeholder="{__.name_placeholder}" - required> - <div if="{errors.name}" - class="c-hint--static c-hint--error"> - {errors.name} + <h1><i class="fa fa-user"/> {__.title}</h1> + + <div class="main-content"> + + <form ref="identity-form" class="identity-form"> + <HumanInput onsubmit={submitIdentity}/> + <h3 class="c-heading"><i class="fa fa-address-card"/> {__.identity}</h3> + <div class="o-form-element"> + <label class="c-label" for="name">{__.name}</label> + <input class="c-field {c-field--error : errors.name}" + type="text" + name="name" + ref="name" + value={user.name} + placeholder="{__.name_placeholder}" + required> + <div if="{errors.name}" + class="c-hint--static c-hint--error"> + {errors.name} + </div> </div> - </div> - - <div class="o-form-element"> - <label class="c-label" for="email">{__.email}</label> - <div class="o-field o-field--icon-right"> - <input class="c-field {c-field--error : errors.email}" - type="email" - name="email" - ref="email" - value={user.email} - placeholder="{__.email_placeholder}" - required> - <i class="fa fa-fw fa-{user.emailIsValidate ? 'check' : 'refresh'} c-icon" - title={user.emailIsValidate ? __.emailValidate : __.emailValidationWaiting}></i> - </div> - <div if="{errors.email}" - class="c-hint--static c-hint--error"> - {errors.email} + + <div class="o-form-element"> + <label class="c-label" for="email">{__.email}</label> + <div class="o-field o-field--icon-right"> + <input class="c-field {c-field--error : errors.email}" + type="email" + name="email" + ref="email" + value={user.email} + placeholder="{__.email_placeholder}" + required> + <i class="fa fa-fw fa-{user.emailIsValidate ? 'check' : 'refresh'} c-icon" + title={user.emailIsValidate ? __.emailValidate : __.emailValidationWaiting}></i> + </div> + <div if="{errors.email}" + class="c-hint--static c-hint--error"> + {errors.email} + </div> + </div> + + <div class="actions-right"> + <button type="button" + class="c-button c-button--gost-info" + if={!user.emailIsValidate} + onclick={resendValidation}> + <i class="fa fa-paper-plane" aria-hidden="true"></i> + {__.resendValidation} + </button> + <button type="submit" + class="c-button c-button--info"> + <i class="fa fa-check" aria-hidden="true"></i> + {__.saveIdentity} + </button> </div> - </div> - - <div class="actions-right"> - <button type="button" - class="c-button c-button--gost-info" - if={!user.emailIsValidate} - onclick={resendValidation}> - <i class="fa fa-paper-plane" aria-hidden="true"></i> - {__.resendValidation} - </button> - <button type="submit" - class="c-button c-button--info"> - <i class="fa fa-check" aria-hidden="true"></i> - {__.saveIdentity} - </button> - </div> - </form> - <hr> - <form ref="password-form" class="password-form"> - <HumanInput onsubmit={submitPassword}/> - <h3 class="c-heading"><i class="fa fa-key"/> {__.passwordChange}</h3> - <div class="o-form-element"> - <label class="c-label" for="oldPassword">{__.oldPassword}</label> - <input class="c-field {c-field--error : errors.oldPassword}" - type="password" - name="oldPassword" - ref="oldPassword" - placeholder="{__.oldPassword_placeholder}" - required> - <div if="{errors.oldPassword}" - class="c-hint--static c-hint--error"> - {errors.oldPassword} + </form> + + <form ref="password-form" class="password-form"> + <HumanInput onsubmit={submitPassword}/> + <h3 class="c-heading"><i class="fa fa-key"/> {__.passwordChange}</h3> + <div class="o-form-element"> + <label class="c-label" for="oldPassword">{__.oldPassword}</label> + <input class="c-field {c-field--error : errors.oldPassword}" + type="password" + name="oldPassword" + ref="oldPassword" + placeholder="{__.oldPassword_placeholder}" + required> + <div if="{errors.oldPassword}" + class="c-hint--static c-hint--error"> + {errors.oldPassword} + </div> </div> - </div> - - <div class="o-form-element"> - <label class="c-label" for="newPassword">{__.newPassword}</label> - <input class="c-field {c-field--error : errors.newPassword}" - type="password" - name="newPassword" - ref="newPassword" - placeholder="{__.newPassword_placeholder}" - onblur="{checkNewPassword}" - required> - <div if="{errors.newPassword}" - class="c-hint--static c-hint--error"> - {errors.newPassword} + + <div class="o-form-element"> + <label class="c-label" for="newPassword">{__.newPassword}</label> + <input class="c-field {c-field--error : errors.newPassword}" + type="password" + name="newPassword" + ref="newPassword" + placeholder="{__.newPassword_placeholder}" + onblur="{checkNewPassword}" + required> + <div if="{errors.newPassword}" + class="c-hint--static c-hint--error"> + {errors.newPassword} + </div> </div> - </div> - - <div class="o-form-element"> - <label class="c-label" for="email">{__.repeatPassword}</label> - <input class="c-field {c-field--error : errors.repeatPassword}" - type="password" - name="repeatPassword" - ref="repeatPassword" - placeholder="{__.repeatPassword_placeholder}" - onblur="{checkPassword}" - onkeypress="{clearPasswordError}" - required> - <div if="{errors.repeatPassword}" - class="c-hint--static c-hint--error"> - {errors.repeatPassword} + + <div class="o-form-element"> + <label class="c-label" for="email">{__.repeatPassword}</label> + <input class="c-field {c-field--error : errors.repeatPassword}" + type="password" + name="repeatPassword" + ref="repeatPassword" + placeholder="{__.repeatPassword_placeholder}" + onblur="{checkPassword}" + onkeypress="{clearPasswordError}" + required> + <div if="{errors.repeatPassword}" + class="c-hint--static c-hint--error"> + {errors.repeatPassword} + </div> + </div> + + <div class="actions-right"> + <button type="submit" + class="c-button c-button--info"> + <i class="fa fa-check" aria-hidden="true"></i> + {__.savePassword} + </button> </div> - </div> - - <div class="actions-right"> - <button type="submit" - class="c-button c-button--info"> - <i class="fa fa-check" aria-hidden="true"></i> - {__.savePassword} - </button> - </div> - </form> + </form> + </div> </div> <script type="es6"> @@ -182,28 +185,17 @@ require("./components/HumanInput.tag.html"); </script> <style> - h1.c-heading { - text-align: center; - } - - @media (min-width: 640px) { - .o-form-element .c-label:first-child { - width: 25%; - display: inline-block; - text-align: right; - float: left; - padding-top: 0.5em; - padding-right: 5px; - } - .o-form-element .c-field { - width: 75%; - display: inline-block; - } + .main-content { + display: flex; + flex-wrap: wrap; + justify-content: space-around; + } - .o-form-element .c-hint--static { - margin-left: 25%; - } + .main-content > form { + flex-grow: 1; + max-width: 500px; + padding: 0 5px; } </style> diff --git a/pollen-ui-riot-js/src/main/web/tag/components/ContextualMenu.tag.html b/pollen-ui-riot-js/src/main/web/tag/components/ContextualMenu.tag.html index e6458f6f..63f27cab 100644 --- a/pollen-ui-riot-js/src/main/web/tag/components/ContextualMenu.tag.html +++ b/pollen-ui-riot-js/src/main/web/tag/components/ContextualMenu.tag.html @@ -13,7 +13,7 @@ display: block; border-radius: 1.5em; overflow: hidden; - background-color: var(--success); + background-color: var(--main); color:var(--background); } @@ -33,7 +33,7 @@ .links { max-width: 0; max-height: 0; - transition: max-width 1s, max-height 1s; + transition: max-width 0.75s, max-height 0.75s; } @@ -53,7 +53,7 @@ } .links a:hover { - background-color: var(--success-hover) + background-color: var(--main-hover) } @media (max-width: 640px) { diff --git a/pollen-ui-riot-js/src/main/web/tag/favoriteList/FavoriteList.tag.html b/pollen-ui-riot-js/src/main/web/tag/favoriteList/FavoriteList.tag.html index 9602c7ef..7677196c 100644 --- a/pollen-ui-riot-js/src/main/web/tag/favoriteList/FavoriteList.tag.html +++ b/pollen-ui-riot-js/src/main/web/tag/favoriteList/FavoriteList.tag.html @@ -20,23 +20,22 @@ require("../components/LoadingCard.tag.html"); <li class="c-breadcrumbs__crumb c-text--loud">{favoriteList.name}</li> </ol> - <h1 class="c-heading">{favoriteList.name} - <div class="c-heading__sub"> - <span if={favoriteList.countChildren > 0}> - {favoriteList.countChildren} {favoriteList.countChildren > 1 ? __.children : __.child} - </span> - <span if={favoriteList.countChildren === 0 && favoriteList.countMembers == 0}> - {__.noMember} - </span> - <span if={favoriteList.countMembers > 0}> - {favoriteList.countMembers} {favoriteList.countMembers > 1 ? __.members : __.member} - </span> - </div> - </h1> + <h1>{favoriteList.name}</h1> + + <div class="c-alert c-alert--info"> + <span if={favoriteList.countChildren > 0}> + {favoriteList.countChildren} {favoriteList.countChildren > 1 ? __.children : __.child} + </span> + <span if={favoriteList.countChildren === 0 && favoriteList.countMembers == 0}> + {__.noMember} + </span> + <span if={favoriteList.countMembers > 0}> + {favoriteList.countMembers} {favoriteList.countMembers > 1 ? __.members : __.member} + </span> + </div> <Search onsearch={refresh} search={search}/> - <LazyLoad pagination={pagination} onload={lazyLoad} load-size="20" ref="lazyLoad" class="elements"> <yield to="element"> <ChildListCard if={element.child} child-list={element} favorite-list={parent.parent.favoriteList} on-child-list-change={parent.parent.refresh}/> @@ -145,11 +144,6 @@ require("../components/LoadingCard.tag.html"); <style> - .c-heading, - .c-heading .c-heading__sub { - text-align: center; - } - .elements { display: flex; flex-wrap: wrap; diff --git a/pollen-ui-riot-js/src/main/web/tag/favoriteList/FavoriteLists.tag.html b/pollen-ui-riot-js/src/main/web/tag/favoriteList/FavoriteLists.tag.html index c261e97c..c1216a51 100644 --- a/pollen-ui-riot-js/src/main/web/tag/favoriteList/FavoriteLists.tag.html +++ b/pollen-ui-riot-js/src/main/web/tag/favoriteList/FavoriteLists.tag.html @@ -13,8 +13,10 @@ require("./FavoriteListEditModal.tag.html"); </ol> <div show="{loaded}"> - <h1 class="c-heading">{__.title} - <div class="c-heading__sub"> + <h1>{__.title}</h1> + + <div class="main-content"> + <div class="c-alert c-alert--info"> {count === 0 ? __.noFavoriteList : (count + " " + (count === 1 ? __.one : __.many))} <a class="c-button c-button--info" if={pagination.count > 0} @@ -24,29 +26,29 @@ require("./FavoriteListEditModal.tag.html"); <i class="fa fa-download"></i> </a> </div> - </h1> - - <Search onsearch={refresh} search={search}/> - - <LazyLoad pagination={pagination} onload={lazyLoad} load-size="20" ref="lazyLoad" class="elements"> - <yield to="element"> - <FavoriteListCard favorite-list={element} on-favorite-list-change={parent.parent.refresh}/> - </yield> - <yield to="loading"> - <LoadingCard loading={nbNextGroup}> - {parent.parent._l("loading", nbNext)} - </LoadingCard> - </yield> - </LazyLoad> - - <ContextualMenu> - <a onclick={parent.addFavoriteList}> - {parent.__.addFavoriteList} - </a> - <a onclick={parent.openImportModal} > - {parent.__.importFavoriteLists} - </a> - </ContextualMenu> + + <Search onsearch="{refresh}" search="{search}" /> + + <LazyLoad pagination={pagination} onload={lazyLoad} load-size="20" ref="lazyLoad" class="elements"> + <yield to="element"> + <FavoriteListCard favorite-list={element} on-favorite-list-change={parent.parent.refresh}/> + </yield> + <yield to="loading"> + <LoadingCard loading={nbNextGroup}> + {parent.parent._l("loading", nbNext)} + </LoadingCard> + </yield> + </LazyLoad> + + <ContextualMenu> + <a onclick={parent.addFavoriteList}> + {parent.__.addFavoriteList} + </a> + <a onclick={parent.openImportModal} > + {parent.__.importFavoriteLists} + </a> + </ContextualMenu> + </div> <Modal ref="importModal" onsubmit={import} header={__.importFavoriteLists} label={__.import} type="success"> <div class="o-form-element"> @@ -127,14 +129,8 @@ require("./FavoriteListEditModal.tag.html"); </script> <style> - .c-heading, - .c-heading .c-heading__sub { - text-align: center; - } - - .c-heading .c-heading__sub .c-button { - opacity: inherit; - font-size: 1rem; + .main-content { + padding: 20px; } .exemple { diff --git a/pollen-ui-riot-js/src/main/web/tag/poll/Polls.tag.html b/pollen-ui-riot-js/src/main/web/tag/poll/Polls.tag.html index 9cb22265..4790c1e2 100644 --- a/pollen-ui-riot-js/src/main/web/tag/poll/Polls.tag.html +++ b/pollen-ui-riot-js/src/main/web/tag/poll/Polls.tag.html @@ -2,9 +2,10 @@ require("../Pagination.tag.html"); require("./PollCard.tag.html"); require("../components/HumanInput.tag.html"); <Polls> - <div class="container" > - <div show="{loaded}"> - <h1>{__[opts.method]}</h1> + <div class="container" show="{loaded}"> + <h1>{__[opts.method]}</h1> + + <div class="main-content"> <div show={polls.length > 0} > <div class="o-form-element sort"> @@ -65,9 +66,6 @@ require("../components/HumanInput.tag.html"); </div> </div> -</Polls> - -<style> <script type="es6"> this.loaded = false; let session = require("../../js/Session"); @@ -126,12 +124,11 @@ require("../components/HumanInput.tag.html"); } }); }; - </script> - <style> - .c-heading { - text-align: center; + <style> + .main-content { + padding: 20px 20px 40px 20px; } .o-form-element.sort .c-label:first-child { @@ -146,6 +143,5 @@ require("../components/HumanInput.tag.html"); .o-form-element.sort .c-input-group { width: 200px; } - </style> </Polls> diff --git a/pollen-ui-riot-js/src/main/web/tag/poll/Votes.tag.html b/pollen-ui-riot-js/src/main/web/tag/poll/Votes.tag.html index 87409d0c..51bd3f8c 100644 --- a/pollen-ui-riot-js/src/main/web/tag/poll/Votes.tag.html +++ b/pollen-ui-riot-js/src/main/web/tag/poll/Votes.tag.html @@ -3,205 +3,205 @@ require("./ChoiceView.tag.html"); require("./Podium.tag.html"); require("../components/HumanInput.tag.html"); <Votes> - <div class="container"> - <div show="{loaded}"> - <div class="voters"> - <form ref="formAddVote" class="fix"> - <HumanInput onsubmit="{addVote}"/> - <div class="current-voter"> - <div class="o-field o-field--icon-left o-field--icon-right" - if={poll.canVote} > - <i class="fa fa-fw fa-user c-icon"></i> - <input class="c-field {c-field--error: !voteId && error && error['voter.name']}" - type="text" - ref="voterName" - name="voterName" - required={!voteId} - disabled={voteId} - placeholder={__.authorPlaceHolder} - value={poll.voterName}> - </div> - <div if={!poll.canVote} - class="choices-label"> - {__.choices} - </div> - </div> - <div each={choice in poll.choices} class="choice separator-top"> - <div class="choice-value"> - <ChoiceView choice={choice} center="true"/> - </div> - <div class="current-choice" - if={poll.canVote}> - <input if={poll.voteCountingTypeValue && poll.voteCountingTypeValue.renderType==='checkbox'} - class="check" - type="checkbox" - onchange="{onVoteChanged}" - ref="{choice.id}_voteValue" - disabled={voteId}> - <input if={poll.voteCountingTypeValue && poll.voteCountingTypeValue.renderType==='text'} - class="text c-field {c-field--error: !voteId && error && (error['vote.voteValue#' + choice.id] || error['vote.totalVoteValue'])}" - type="number" - min="{poll.voteCountingTypeValue.minimumValue}" - max="{poll.voteCountingTypeValue.maximumValue}" - onchange="{onVoteChanged}" - ref="{choice.id}_voteValue" - disabled={voteId}> - </div> + <div class="container" show="{loaded}"> + <div class="voters"> + <form ref="formAddVote" class="fix separator-top separator-left separator-bottom"> + <HumanInput onsubmit="{addVote}"/> + <div class="current-voter"> + <div class="o-field o-field--icon-left o-field--icon-right" + if={poll.canVote} > + <i class="fa fa-fw fa-user c-icon"></i> + <input class="c-field {c-field--error: !voteId && error && error['voter.name']}" + type="text" + ref="voterName" + name="voterName" + required={!voteId} + disabled={voteId} + placeholder={__.authorPlaceHolder} + value={poll.voterName}> </div> - <div class="current-voter-actions separator-top"> - <button if={poll.canVote} - class="c-button c-button--brand pull-right" - type="submit" - name="newVote" - disabled={voteId || tooManyChoicesSelected}> - {__.toVote} - </button> + <div if={!poll.canVote} + class="choices-label"> + {__.choices} </div> - <div class="c-hint--static c-hint--error" if="{!voteId && tooManyChoicesSelected}"> - {__.tooManyChoicesSelected} {poll.maxChoiceNumber} + </div> + <div each={choice in poll.choices} class="choice separator-top"> + <div class="choice-value"> + <ChoiceView choice={choice} center="true"/> </div> - <div class="c-hint--static c-hint--error" if="{!voteId && error}"> - <div each={fields in error}> - {fields} - </div> + <div class="current-choice" + if={poll.canVote}> + <input if={poll.voteCountingTypeValue && poll.voteCountingTypeValue.renderType==='checkbox'} + class="check" + type="checkbox" + onchange="{onVoteChanged}" + ref="{choice.id}_voteValue" + disabled={voteId}> + <input if={poll.voteCountingTypeValue && poll.voteCountingTypeValue.renderType==='text'} + class="text c-field {c-field--error: !voteId && error && (error['vote.voteValue#' + choice.id] || error['vote.totalVoteValue'])}" + type="number" + min="{poll.voteCountingTypeValue.minimumValue}" + max="{poll.voteCountingTypeValue.maximumValue}" + onchange="{onVoteChanged}" + ref="{choice.id}_voteValue" + disabled={voteId}> </div> + </div> + <div class="current-voter-actions separator-top"> + <button if={poll.canVote} + class="c-button c-button--brand pull-right" + type="submit" + name="newVote" + disabled={voteId || tooManyChoicesSelected}> + <i class="fa fa-envelope"></i> + {__.toVote} + </button> + </div> + <div class="c-hint--static c-hint--error" if="{!voteId && tooManyChoicesSelected}"> + {__.tooManyChoicesSelected} {poll.maxChoiceNumber} + </div> + <div class="c-hint--static c-hint--error" if="{!voteId && error}"> + <div each={fields in error}> + {fields} + </div> + </div> + </form> - </form> - <div class="window"> - <div class="frame"> - <div if={poll.resultIsVisible} class="results separator-left"> - <div class="result-label"> - {__.results} - </div> - <div each={choice in poll.choices} class="score-choice separator-top"> - <span if={!choice.score}>{parent.__.noVote}</span> - <span if={choice.score}> - <i if={choice.score.scoreOrder === 0} class="fa fa-trophy fa-15x winner"></i> - {choice.score.scoreValue} - {parent.__["results_unit_" + poll.voteCountingType + "_" + (choice.score.scoreValue > 1 ? "many" : "one")]} - </span> - </div> - <div class="results-actions separator-top"> + <div class="window separator-top separator-left separator-bottom separator-right"> + <div class="frame"> + <div if={poll.resultIsVisible} class="results"> + <div class="result-label"> + {__.results} + </div> + <div each={choice in poll.choices} class="score-choice separator-top"> + <span if={!choice.score}>{parent.__.noVote}</span> + <span if={choice.score}> + <i if={choice.score.scoreOrder === 0} class="fa fa-trophy fa-15x winner"></i> + {choice.score.scoreValue} + {parent.__["results_unit_" + poll.voteCountingType + "_" + (choice.score.scoreValue > 1 ? "many" : "one")]} + </span> + </div> + <div class="results-actions separator-top"> - </div> </div> - <button type="button" - if={poll.votes && poll.votes.length && !showVotes} - class="expand c-button c-button--info" - onclick="{onShowVotes}"> - <i class="fa fa-caret-right"/> - </button> - <button type="button" - if={poll.votes && poll.votes.length && showVotes} - class="collapse c-button c-button--info" - onclick="{onHideVotes}"> - <i class="fa fa-caret-left"/> - </button> - <form if={showVotes} each={vote, index in poll.votes} class="vote {separator-right : index < (poll.votes.length -1)}"> - <HumanInput onsubmit="{updateVote(vote)}"/> - <div class="voter"> - <span class="voter-name" - if="{vote.id !== voteId}"> - <i class="fa fa-user"/> - <span if="{!vote.anonymous}">{vote.voterName}</span> - <span if="{vote.anonymous}" class="anonymous-voter">{parent.__.anonymousVoter}</span> - </span> - <div class="o-field o-field--icon-left" - if={vote.id === voteId}> - <i class="fa fa-fw fa-user c-icon"></i> - <input ref="vote_{vote.id}_voter" - name="vote_{vote.id}_voter" - type="text" - class="c-field {c-field--error: error && error['voter.name']}" - value="{vote.voterName}" - required={vote.id === voteId} - disabled={vote.id !== voteId} - placeholder="{__.authorPlaceHolder}"> - </div> - </div> - <div each={choice in poll.choices} class="vote-choice separator-top" > - <input if={poll.voteCountingTypeValue && poll.voteCountingTypeValue.renderType==='checkbox' && (poll.getVoteChoice(vote, choice) || voteId === vote.id)} - ref="vote_{vote.id}_{choice.id}" - name="vote_{vote.id}_{choice.id}" - class="check {c-field--error: vote.id === voteId && error && error['vote.voteValue#' + choice.id]}" - type="checkbox" - checked={poll.getVoteValue(vote, choice) == 1} - disabled={voteId !== vote.id}> - <input if={poll.voteCountingTypeValue.renderType === 'text' && (poll.getVoteChoice(vote, choice) || voteId === vote.id)} - ref="vote_{vote.id}_{choice.id}" - class="text c-field {c-field--error: vote.id === voteId && error && error['vote.voteValue#' + choice.id]}" - name="vote_{vote.id}_{choice.id}" - type="number" - min="{poll.voteCountingTypeValue.minimumValue}" - max="{poll.voteCountingTypeValue.maximumValue}" - required={vote.id === voteId} - disabled={voteId !== vote.id} - value={poll.getVoteValue(vote, choice)}> - </div> - <div class="vote-actions separator-top"> - <span class="c-input-group"> - <button type="button" - class="c-button c-button--error" - if="{(poll.permission || !poll.isClosed && vote.permission) && (!voteId || voteId != vote.id)}" - onclick="{parent.deleteVote(vote)}"> - <i class="fa fa-trash"/> - </button> - <button type="button" - class="c-button c-button--brand" - if="{!poll.isClosed && vote.permission && (!voteId || voteId != vote.id)}" - onclick="{parent.onEditVote(vote)}"> - <i class="fa fa-pencil-square-o"/> - </button> - </span> - <span class="c-input-group" - if={vote.id === voteId}> - <button class="c-button c-button--error" - type="button" - onclick="{cancelEditVote(vote)}"> - <i class="fa fa-remove"/> - </button> - <button class="c-button c-button--success" - ref="vote_{vote.id}_vote" - type="submit"> - <i class="fa fa-check"/> - </button> - </span> - </div> - <div class="c-hint--static c-hint--error" if="{vote.id === voteId && tooManyChoicesSelected}"> - {__.tooManyChoicesSelected} {poll.maxChoiceNumber} - </div> - <div class="c-hint--static c-hint--error" if="{vote.id === voteId && error}"> - <div each={fields in error}> - {fields} - </div> - </div> - </form> </div> + <button type="button" + if={poll.votes && poll.votes.length && !showVotes} + class="expand c-button c-button--info" + onclick="{onShowVotes}"> + <i class="fa fa-caret-right"/> + </button> + <button type="button" + if={poll.votes && poll.votes.length && showVotes} + class="collapse c-button c-button--info" + onclick="{onHideVotes}"> + <i class="fa fa-caret-left"/> + </button> + + <form if={showVotes} each={vote, index in poll.votes} class="vote separator-right"> + <HumanInput onsubmit="{updateVote(vote)}"/> + <div class="voter"> + <span class="voter-name" + if="{vote.id !== voteId}"> + <i class="fa fa-user"/> + <span if="{!vote.anonymous}">{vote.voterName}</span> + <span if="{vote.anonymous}" class="anonymous-voter">{parent.__.anonymousVoter}</span> + </span> + <div class="o-field o-field--icon-left" + if={vote.id === voteId}> + <i class="fa fa-fw fa-user c-icon"></i> + <input ref="vote_{vote.id}_voter" + name="vote_{vote.id}_voter" + type="text" + class="c-field {c-field--error: error && error['voter.name']}" + value="{vote.voterName}" + required={vote.id === voteId} + disabled={vote.id !== voteId} + placeholder="{__.authorPlaceHolder}"> + </div> + </div> + <div each={choice in poll.choices} class="vote-choice separator-top" > + <input if={poll.voteCountingTypeValue && poll.voteCountingTypeValue.renderType==='checkbox' && (poll.getVoteChoice(vote, choice) || voteId === vote.id)} + ref="vote_{vote.id}_{choice.id}" + name="vote_{vote.id}_{choice.id}" + class="check {c-field--error: vote.id === voteId && error && error['vote.voteValue#' + choice.id]}" + type="checkbox" + checked={poll.getVoteValue(vote, choice) == 1} + disabled={voteId !== vote.id}> + <input if={poll.voteCountingTypeValue.renderType === 'text' && (poll.getVoteChoice(vote, choice) || voteId === vote.id)} + ref="vote_{vote.id}_{choice.id}" + class="text c-field {c-field--error: vote.id === voteId && error && error['vote.voteValue#' + choice.id]}" + name="vote_{vote.id}_{choice.id}" + type="number" + min="{poll.voteCountingTypeValue.minimumValue}" + max="{poll.voteCountingTypeValue.maximumValue}" + required={vote.id === voteId} + disabled={voteId !== vote.id} + value={poll.getVoteValue(vote, choice)}> + </div> + <div class="vote-actions separator-top"> + <span class="c-input-group"> + <button type="button" + class="c-button c-button--error" + if="{(poll.permission || !poll.isClosed && vote.permission) && (!voteId || voteId != vote.id)}" + onclick="{parent.deleteVote(vote)}"> + <i class="fa fa-trash"/> + </button> + <button type="button" + class="c-button c-button--brand" + if="{!poll.isClosed && vote.permission && (!voteId || voteId != vote.id)}" + onclick="{parent.onEditVote(vote)}"> + <i class="fa fa-pencil-square-o"/> + </button> + </span> + <span class="c-input-group" + if={vote.id === voteId}> + <button class="c-button c-button--error" + type="button" + onclick="{cancelEditVote(vote)}"> + <i class="fa fa-remove"/> + </button> + <button class="c-button c-button--success" + ref="vote_{vote.id}_vote" + type="submit"> + <i class="fa fa-check"/> + </button> + </span> + </div> + <div class="c-hint--static c-hint--error" if="{vote.id === voteId && tooManyChoicesSelected}"> + {__.tooManyChoicesSelected} {poll.maxChoiceNumber} + </div> + <div class="c-hint--static c-hint--error" if="{vote.id === voteId && error}"> + <div each={fields in error}> + {fields} + </div> + </div> + </form> </div> </div> + </div> - <form ref="formAddChoice" - if={poll.status === "ADDING_CHOICES"}> - <HumanInput onsubmit="{addChoice}"/> - <div class="o-form-element"> - <label class="c-label" for="choice">{__.addChoice}</label> - <div class="c-input-group"> - <div class="o-field"> - <Choice ref="choice" - class="choice c-field" - name="choice" - choice="{choiceToAdd}"/> - </div> - <button type="submit" - class="c-button c-button--success" - tooltips="{__.addChoice}"> - <i class="fa fa-plus"/> - </button> - </div> + <form ref="formAddChoice" + if={poll.status === "ADDING_CHOICES"}> + <HumanInput onsubmit="{addChoice}"/> + <div class="o-form-element"> + <label class="c-label" for="choice">{__.addChoice}</label> + <div class="c-input-group"> + <div class="o-field"> + <Choice ref="choice" + class="choice c-field" + name="choice" + choice="{choiceToAdd}"/> + </div> + <button type="submit" + class="c-button c-button--success" + tooltips="{__.addChoice}"> + <i class="fa fa-plus"/> + </button> </div> + </div> - </form> - </div> + </form> </div> <script type="es6"> -- To stop receiving notification emails like this one, please contact chorem.org SCM administrator <admin+scm@chorem.org>.