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 c4b6fe5e82a3f0d6c3c1d3b1fe09dfeaf9e97565 Author: Kevin Morin <morin@codelutin.com> Date: Tue Aug 8 16:37:17 2017 +0200 fixes #114 alignement des colonnes fixes #103 mauvaise gestion des valeurs de choix trop longues --- pollen-ui-riot-js/src/main/web/css/main.css | 4 + .../src/main/web/tag/poll/ChoiceView.tag.html | 8 - .../src/main/web/tag/poll/Poll.tag.html | 10 +- .../src/main/web/tag/poll/Votes.tag.html | 335 +++++++++++---------- 4 files changed, 182 insertions(+), 175 deletions(-) diff --git a/pollen-ui-riot-js/src/main/web/css/main.css b/pollen-ui-riot-js/src/main/web/css/main.css index eb3a228b..04db9045 100644 --- a/pollen-ui-riot-js/src/main/web/css/main.css +++ b/pollen-ui-riot-js/src/main/web/css/main.css @@ -367,6 +367,10 @@ time-picker .next:hover { background-color: var(--dropdown-hover); } +.separator { + border: 1px solid var(--separator); +} + .separator-top { border-top: 1px solid var(--separator); } diff --git a/pollen-ui-riot-js/src/main/web/tag/poll/ChoiceView.tag.html b/pollen-ui-riot-js/src/main/web/tag/poll/ChoiceView.tag.html index cc49a692..5389dadc 100644 --- a/pollen-ui-riot-js/src/main/web/tag/poll/ChoiceView.tag.html +++ b/pollen-ui-riot-js/src/main/web/tag/poll/ChoiceView.tag.html @@ -120,14 +120,6 @@ require("./Report.tag.html"); justify-content: center; } - .choice-view .choice-text, - .choice-view .choice-date, - .choice-view .choice-datetime { - white-space: nowrap; - text-overflow: ellipsis; - overflow: hidden; - } - .choice-view.with-info { cursor: pointer; } diff --git a/pollen-ui-riot-js/src/main/web/tag/poll/Poll.tag.html b/pollen-ui-riot-js/src/main/web/tag/poll/Poll.tag.html index 74a32ae8..7600dc3d 100644 --- a/pollen-ui-riot-js/src/main/web/tag/poll/Poll.tag.html +++ b/pollen-ui-riot-js/src/main/web/tag/poll/Poll.tag.html @@ -78,8 +78,14 @@ require("./Report.tag.html"); <div class="left-icon" if={poll.choiceAddAllowed}> <i class="fa fa-check-square"></i> <p>{__.dateAddChoices}</p> - <p>{poll.endDate ? __.dateFrom : __.dateFromNoEnd} <span class="brand">{formatDate(poll.beginChoiceDate)}</span></p> - <p if={poll.endDate}> {__.dateTo} <span class="brand">{formatDate(poll.endChoiceDate)}</span></p> + <p> + {poll.endChoiceDate || poll.endDate ? __.dateFrom : __.dateFromNoEnd} + <span class="brand">{formatDate(poll.beginChoiceDate ? poll.beginChoiceDate : poll.beginDate)}</span> + </p> + <p if={poll.endChoiceDate || poll.endDate}> + {__.dateTo} + <span class="brand">{formatDate(poll.endChoiceDate ? poll.endChoiceDate : poll.endDate)}</span> + </p> </div> <div class="cursor-pointer left-icon" if="{poll.voteCountingTypeValue}" onclick="{toggleHelp}"> 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 9cc46858..d481bafb 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 @@ -6,10 +6,11 @@ require("../components/HumanInput.tag.html"); <div class="container" show="{loaded}"> <!-- Form to vote --> - <div class="voter"> - <form id="voteForm" ref="formAddVote" class="fix separator-top separator-left separator-bottom"> - <HumanInput onsubmit="{voteInEdition ? updateVote : addVote}"></HumanInput> - <div class="current-voter"> + <div class="form-wrapper"> + <form id="voteForm" class="voter separator" ref="formAddVote"> + <HumanInput onsubmit="{voteInEdition ? updateVote : addVote}"></HumanInput> + <div class="header separator-bottom"> + <div class="current-voter separator-right"> <div class="o-field o-field--icon-left o-field--icon-right" if={poll.canVote || voteInEdition} > <i class="fa fa-fw fa-user c-icon"></i> @@ -27,7 +28,12 @@ require("../components/HumanInput.tag.html"); {__.choices} </div> </div> - <div each={choice in poll.choices} class="choice separator-top"> + <div if={poll.resultIsVisible} class="result-label"> + <strong>{__.results}</strong> + </div> + </div> + <div each={choice in poll.choices} class="choice separator-bottom"> + <div class="choice-vote separator-right"> <div class="choice-value"> <ChoiceView choice={choice} center="true"></ChoiceView> </div> @@ -48,59 +54,54 @@ require("../components/HumanInput.tag.html"); ref="{choice.id}_voteValue"> </div> </div> - <div class="current-voter-actions separator-top"> - <button if={poll.canVote && !voteInEdition} - class="c-button c-button--brand pull-right" - type="submit" - name="newVote" - disabled={tooManyChoicesSelected}> - <i class="fa fa-envelope"></i> - {__.toVote} - </button> - <button if="{voteInEdition}" - class="c-button c-button--error" - type="button" - onclick="{cancelEditVote}"> - <i class="fa fa-remove"></i> - {__.cancelEdition} - </button> - <button if="{voteInEdition}" - class="c-button c-button--success" - type="submit"> - <i class="fa fa-check"></i> - {__.validateEdition} - </button> - </div> - <div class="c-hint--static c-hint--error" if="{tooManyChoicesSelected}"> - {__.tooManyChoicesSelected} {poll.maxChoiceNumber} - </div> - <div class="c-hint--static c-hint--error" if="{error}"> - <div each={fields in error}> - {fields} - </div> + <div if={poll.resultIsVisible} class="score-choice"> + <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> - </form> - - <div class="window separator-top separator-left separator-bottom separator-right"> - <div class="frame"> - <div if={poll.resultIsVisible} class="results"> - <div class="result-label"> - <strong>{__.results}</strong> - </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 class="footer"> + <div class="current-voter-actions separator-right"> + <div class="current-voter-buttons"> + <button if={poll.canVote && !voteInEdition} + class="c-button c-button--brand pull-right" + type="submit" + name="newVote" + disabled={tooManyChoicesSelected}> + <i class="fa fa-envelope"></i> + {__.toVote} + </button> + <button if="{voteInEdition}" + class="c-button c-button--error" + type="button" + onclick="{cancelEditVote}"> + <i class="fa fa-remove"></i> + {__.cancelEdition} + </button> + <button if="{voteInEdition}" + class="c-button c-button--success" + type="submit"> + <i class="fa fa-check"></i> + {__.validateEdition} + </button> + </div> + <div class="c-hint--static c-hint--error" if="{tooManyChoicesSelected}"> + {__.tooManyChoicesSelected} {poll.maxChoiceNumber} + </div> + <div class="c-hint--static c-hint--error" if="{error}"> + <div each={fields in error}> + {fields} </div> </div> </div> + <div if={poll.resultIsVisible} class="results-actions"> + + </div> </div> + </form> </div> <!-- Show votes --> @@ -114,8 +115,8 @@ require("../components/HumanInput.tag.html"); </div> </div> </div> - <div each="{vote, index in poll.votes}" class="row separator-bottom"> - <div class="name separator-right separator-left"> + <div each="{vote, index in poll.votes}" class="row separator-bottom separator-right"> + <div class="name separator-left"> <div class="voter-name" onmouseenter="{parent.showTooltip(vote)}" onclick="{parent.showTooltip(vote)}" onmouseleave="{parent.hideTooltip}"> <i class="fa fa-user-circle c-icon"></i> <span if="{!vote.anonymous}">{vote.voterName}</span> @@ -136,7 +137,7 @@ require("../components/HumanInput.tag.html"); <i class="fa fa-trash"></i> </button> </div> - <div class="results" ref="results"> + <div class="results separator-left" ref="results{index}"> <div each="{choice in poll.choices}" class="result separator-right {'checkbox' : pollTypeCheckbox} {'selected' : pollTypeCheckbox && poll.getVoteValue(vote, choice) == 1}" onmouseenter="{parent.showTooltip(vote, choice)}" onclick="{parent.showTooltip(vote, choice)}" onmouseleave="{parent.hideTooltip}"> @@ -177,7 +178,7 @@ require("../components/HumanInput.tag.html"); </form> </div> - <script type="es6"> + <script type="es6"> const MIN_CHOICE_COLUMN_WIDTH = 100; this.loaded = false; let session = require("../../js/Session"); @@ -200,8 +201,8 @@ require("../components/HumanInput.tag.html"); this.choiceToAdd = this.poll.initChoice(); this.updateShowChoiceContainer = () => { - this.showChoiceHeader = this.refs.results && this.refs.results.length > 0 - && this.refs.results[0].offsetWidth / this.poll.choices.length >= MIN_CHOICE_COLUMN_WIDTH; + this.showChoiceHeader = this.refs.results0 + && this.refs.results0.offsetWidth / this.poll.choices.length >= MIN_CHOICE_COLUMN_WIDTH; }; this.onPollChange = poll => { @@ -431,105 +432,108 @@ require("../components/HumanInput.tag.html"); }; </script> - <style> - - .voter { - display: flex; - flex-direction: row; - flex-wrap: nowrap; - justify-content: center; - align-items: stretch; - margin-top: 20px; - } - - .voter .fix { - flex-grow: 0; - min-width: 200px; - } - - .voter .fix .choice { - display: flex; - flex-direction: row; - flex-wrap: nowrap; - justify-content: flex-start; - align-items: stretch; - } - - .voter .fix .choice .choice-value { - flex-grow: 1; - font-size: 1.5em; - min-width: 0; - } - - .voter .fix .choice .current-choice { - flex-grow: 0; - display: flex; - justify-content: center; - min-width: 50px; - } - - .voter .window { - overflow-x: auto; - overflow-y: hidden; - } - - .voter .window .frame { - display: flex; - flex-direction: row; - flex-wrap: nowrap; - justify-content: flex-start; - align-items: stretch; - height: 100%; - } - - .voter .window .frame .results { - min-width: 100px; - } - - .voter .window .frame .vote { - min-width: 100px; - } - - .voter .window .frame .expand, - .voter .window .frame .collapse { - padding: 0; - min-width: 6px; - } - - .current-voter, - .result-label { - height: 40px; - text-align: center; - padding: 3px; - line-height: 35px; - } - - .voter .fix .choice, - .voter .fix .current-voter-actions, - .voter .window .frame .vote .vote-choice, - .voter .window .frame .vote .vote-actions, - .voter .window .frame .results .score-choice, - .voter .window .frame .results .results-actions { - height: 40px; - display: flex; - align-items: center; - justify-content: center; - } - - .check { - width: 25px; - height: 25px; - } - - .text { - width: 60px; - height: 30px; - margin: 0 0 0 5px; - } - - .choice.c-field { - padding: 0 0 0 1px; - } + <style> + + .form-wrapper { + display: flex; + flex-direction: row; + justify-content: center; + align-items: stretch; + } + + .voter { + display: flex; + flex-direction: column; + flex-wrap: nowrap; + margin-top: 20px; + justify-content: center; + align-items: stretch; + } + + .voter > div { + flex-grow: 0; + display: flex; + flex-direction: row; + min-height: 40px; + } + + .voter .header > * { + height: 40px; + text-align: center; + padding: 3px; + line-height: 35px; + } + + .voter .header .current-voter { + flex-grow: 1; + min-width: 200px; + } + + .voter .result-label, .voter .score-choice, .voter .results-actions { + width: 120px; + min-width: 120px; + flex-grow: 0; + text-align: center; + padding: 3px; + align-self: center; + } + + .voter .choice { + flex-wrap: nowrap; + align-items: stretch; + justify-content: center; + } + + .voter .choice .choice-vote { + display: flex; + flex-direction: row; + flex-wrap: nowrap; + align-items: center; + justify-content: center; + flex-grow: 1; + } + + .voter .choice .choice-value { + flex-grow: 1; + font-size: 1.2em; + min-width: 0; + padding: 5px; + } + + .voter .choice .current-choice { + display: flex; + justify-content: center; + min-width: 50px; + } + + .voter .current-voter-actions { + display: flex; + flex-direction: column; + flex-grow: 1; + } + + .voter .current-voter-buttons { + display: flex; + flex-direction: row; + padding: 5px; + justify-content: center; + align-items: center; + } + + .check { + width: 25px; + height: 25px; + } + + .text { + width: 60px; + height: 30px; + margin: 0 0 0 5px; + } + + .choice.c-field { + padding: 0 0 0 1px; + } .voters { display: flex; @@ -546,7 +550,8 @@ require("../components/HumanInput.tag.html"); } .voters .row > :first-child { - width: 250px; + width: 200px; + min-width: 200px; display: flex; height: 2em; padding: 0 5px; @@ -556,14 +561,18 @@ require("../components/HumanInput.tag.html"); border-bottom-color: var(--brand); } - .voters .name { + .voters :not(.vote-tooltip) { overflow: hidden; } + .voters .choice-view * { + white-space: nowrap; + text-overflow: ellipsis; + } + .voters .voter-name { flex-grow: 1; padding: 5px; - overflow: hidden; white-space:nowrap; text-overflow:ellipsis; } @@ -589,10 +598,6 @@ require("../components/HumanInput.tag.html"); height: 2em; padding: 5px; text-align: center; - } - - .voters .choice { - overflow: hidden; white-space:nowrap; text-overflow:ellipsis; } -- To stop receiving notification emails like this one, please contact chorem.org SCM administrator <admin+scm@chorem.org>.