This is an automated email from the git hooks/post-receive script. New commit to branch ramonville in repository pollen. See https://gitlab.nuiton.org/chorem/pollen.git commit 302399a31a4f1e32543df4aa0eed2da9c006b253 Author: jcouteau <couteau@codelutin.com> Date: Wed Dec 19 14:04:43 2018 +0100 - Improve UX on vote for mobile - Make Pollen more responsive... --- pollen-ui-riot-js/src/main/web/css/main.css | 4 + .../main/web/tag/components/GtuValidation.tag.html | 1 + .../web/tag/components/MultiLineLabel.tag.html | 2 +- .../src/main/web/tag/poll/ChoiceView.tag.html | 116 ++++++++++++--------- .../src/main/web/tag/poll/EditVote.tag.html | 5 + .../main/web/tag/popup/ChoiceDetailModal.tag.html | 12 +-- 6 files changed, 82 insertions(+), 58 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 b9a624f2..8ebe18af 100644 --- a/pollen-ui-riot-js/src/main/web/css/main.css +++ b/pollen-ui-riot-js/src/main/web/css/main.css @@ -427,6 +427,10 @@ pollenheader { pollenheader .header-home { font-family: pacifico; color: #10b8ca; + text-overflow: ellipsis; + white-space: nowrap; + overflow: hidden; + flex-grow: 99; } pollenheader .header-actions { diff --git a/pollen-ui-riot-js/src/main/web/tag/components/GtuValidation.tag.html b/pollen-ui-riot-js/src/main/web/tag/components/GtuValidation.tag.html index 0d324ed2..f7e4c3b4 100644 --- a/pollen-ui-riot-js/src/main/web/tag/components/GtuValidation.tag.html +++ b/pollen-ui-riot-js/src/main/web/tag/components/GtuValidation.tag.html @@ -55,6 +55,7 @@ .c-field.c-field--choice.gtu-validation { width: 100%; text-align: center; + max-width: 500px; } </style> diff --git a/pollen-ui-riot-js/src/main/web/tag/components/MultiLineLabel.tag.html b/pollen-ui-riot-js/src/main/web/tag/components/MultiLineLabel.tag.html index aab89abf..83d8455b 100644 --- a/pollen-ui-riot-js/src/main/web/tag/components/MultiLineLabel.tag.html +++ b/pollen-ui-riot-js/src/main/web/tag/components/MultiLineLabel.tag.html @@ -20,7 +20,7 @@ --> <MultiLineLabel> - <span ref="label"></span> + <p ref="label"></p> <script> this.on("update", () => { 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 871a1917..02dd2f73 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 @@ -20,40 +20,44 @@ --> import "./Report.tag.html"; import "../components/MultiLineLabel.tag.html"; -<ChoiceView> - <label class="choice-view {center-choice : opts.center} - {with-info : opts.choice.choiceType === 'RESOURCE' || opts.choice.description && !opts.showdescription}" - onclick={openModalImage} - title={standardTooltip()} +<ChoiceView align="center"> + <label class="choice-view {center-choice : opts.center}" for ="{opts.choice.id}_voteValue"> - <span class="choice-text" - if={opts.choice.choiceType === "TEXT"}> - {opts.choice.choiceValue} - </span> - <span class="choice-date" - if={opts.choice.choiceType === "DATE"}> - {formatDate(parseInt(opts.choice.choiceValue, 10),"L")} - </span> - <span class="choice-datetime" - if={opts.choice.choiceType === "DATETIME"}> - {formatDate(parseInt(opts.choice.choiceValue, 10), "L LT")} - </span> - <div class="choice-ressource" - if={opts.choice.choiceType === "RESOURCE" && meta && isImage()}> - <img class="image-preview" src="{resourceService.getPreviewUrl(opts.choice.choiceValue)}" - alt="{opts.choice.description}" title="{opts.choice.description}"/> - </div> - <div class="choice-ressource" - if={opts.choice.choiceType === "RESOURCE" && meta && !isImage()}> - {meta.name} - </div> - <div if={opts.choice.choiceType === "RESOURCE" || opts.choice.description && !opts.showdescription} class="info-label"> - <i class="fa fa-question-circle" aria-hidden="true"></i> + <div style="display:contents;" ref="label"> + <span class="choice-text" + if={opts.choice.choiceType === "TEXT"}> + {opts.choice.choiceValue} + </span> + <span class="choice-date" + if={opts.choice.choiceType === "DATE"}> + {formatDate(parseInt(opts.choice.choiceValue, 10),"L")} + </span> + <span class="choice-datetime" + if={opts.choice.choiceType === "DATETIME"}> + {formatDate(parseInt(opts.choice.choiceValue, 10), "L LT")} + </span> + <div class="choice-ressource" + if={opts.choice.choiceType === "RESOURCE" && meta && isImage()}> + <img class="image-preview" src="{resourceService.getPreviewUrl(opts.choice.choiceValue)}" + alt="{opts.choice.description}" title="{opts.choice.description}"/> + </div> + <div class="choice-ressource" + if={opts.choice.choiceType === "RESOURCE" && meta && !isImage()}> + {meta.name} + </div> + <div if={opts.choice.choiceType === "RESOURCE"} class="info-label" onclick="{openModalImage}"> + <i class="fa fa-search" aria-hidden="true"></i> + </div> + <span if="{opts.choice.description && opts.showdescription}"> : + <MultiLineLabel class="italic" label="{opts.choice.description}"></MultiLineLabel> + </span> </div> - <span if="{opts.choice.description && opts.showdescription}"> : - <MultiLineLabel class="italic" label="{opts.choice.description}"></MultiLineLabel> - </span> </label> + <a href="#" if="{opts.choice.description && !opts.showdescription}" onclick="{openDetails}" ref="plusInfo" class="plusInfoLink"> + <i class="fa fa-arrow-circle-down" aria-hidden="true"></i> Plus d'infos</a> + <div if="{opts.choice.description && !opts.showdescription}" style="display:none;" ref="details" class=plusInfo"> + <MultiLineLabel label="{opts.choice && opts.choice.description}" class="boxed"></MultiLineLabel> + </div> <Report target="{opts.choice}" if="{!opts.hidereport}"/> <script type="es6"> @@ -65,6 +69,7 @@ import "../components/MultiLineLabel.tag.html"; this.resourceService = resourceService; this.installBundle(this.session, "choice"); this.showModalImage = false; + this.detailsOpened = false; if (this.opts.choice.choiceType === "RESOURCE") { this.resourceService.getMeta(this.opts.choice.choiceValue).then(meta => { @@ -81,30 +86,32 @@ import "../components/MultiLineLabel.tag.html"; return this.opts.tooltipPlacement ? "" : this.opts.choice.description; }; - this.openModalImage = () => { - if (this.opts.choice.description && !this.opts.showdescription || this.opts.choice.choiceType === "RESOURCE") { + this.openModalImage = (e) => { + e.preventDefault(); + if (this.opts.choice.choiceType === "RESOURCE") { this.bus.trigger("openChoiceDetail", this.opts.choice, this.meta); + } }; - if (this.opts.tooltipPlacement) { - this.on("mount", () => { - // On a besoin du premier div (.choice-view) car ça ne fonctionne pas sur le composant directement - let elem = this.root.children[0]; - let config = { - placement: this.opts.tooltipPlacement, - title: this.opts.choice.description - }; - this.tooltip = new Tooltip(elem, config); - }); - } + this.openDetails = (e) => { + e.preventDefault(); + if (this.opts.choice.description && !this.opts.showdescription || this.opts.choice.choiceType === "RESOURCE") { + if (this.detailsOpened) { + this.refs.details.style.display = "none"; + this.refs.plusInfo.innerHTML="<i class='fa fa-arrow-circle-down' aria-hidden='true'></i> Plus d'info"; + this.detailsOpened = false; + } else { + this.refs.details.style.display = "block"; + this.refs.plusInfo.innerHTML="<i class='fa fa-arrow-circle-up' aria-hidden='true'></i> Masquer"; + this.detailsOpened = true; + } + } + }; </script> <style> - choiceview { - display: flex; - } .choice-view { flex-grow: 1; @@ -119,6 +126,21 @@ import "../components/MultiLineLabel.tag.html"; cursor: pointer; } + .plusInfoLink { + text-align: center; + font-size: small; + display: block; + } + + .boxed p { + text-align: justify; + background: #f8f8f8; + padding: 10px; + border-radius: 3px; + border: 1px solid #eee; + margin: 5px; + } + .choice-ressource .image-preview{ max-width: 7em; max-height: 3em; diff --git a/pollen-ui-riot-js/src/main/web/tag/poll/EditVote.tag.html b/pollen-ui-riot-js/src/main/web/tag/poll/EditVote.tag.html index 8c9b43ed..88e11ce6 100644 --- a/pollen-ui-riot-js/src/main/web/tag/poll/EditVote.tag.html +++ b/pollen-ui-riot-js/src/main/web/tag/poll/EditVote.tag.html @@ -478,5 +478,10 @@ padding: 0 0 0 1px; } + .current-choice { + flex-shrink:0; + margin-right:5px; + } + </style> </EditVote> diff --git a/pollen-ui-riot-js/src/main/web/tag/popup/ChoiceDetailModal.tag.html b/pollen-ui-riot-js/src/main/web/tag/popup/ChoiceDetailModal.tag.html index efcfee37..4f2caf5e 100644 --- a/pollen-ui-riot-js/src/main/web/tag/popup/ChoiceDetailModal.tag.html +++ b/pollen-ui-riot-js/src/main/web/tag/popup/ChoiceDetailModal.tag.html @@ -20,8 +20,7 @@ --> import "../components/MultiLineLabel.tag.html"; <ChoiceDetailModal> - <Modal header={title} - ref="modal" + <Modal ref="modal" only-ok="true"> <div if={parent.choice && parent.choice.choiceType === "RESOURCE" && parent.meta}> <img if={parent.isImage()} @@ -37,7 +36,6 @@ import "../components/MultiLineLabel.tag.html"; {parent._t.download} </a> </div> - <MultiLineLabel label="{parent.choice && parent.choice.description}"></MultiLineLabel> </Modal> <script type="es6"> @@ -51,13 +49,7 @@ import "../components/MultiLineLabel.tag.html"; this.open = (choice, meta) => { this.choice = choice; this.meta = meta; - if (this.choice.choiceType === "TEXT") { - this.title = this.choice.choiceValue; - } else if (this.choice.choiceType === "DATE") { - this.title = this.formatDate(parseInt(this.choice.choiceValue, 10), "LLL"); - } else if (this.choice.choiceType === "DATETIME") { - this.title = this.formatDate(parseInt(this.choice.choiceValue, 10)); - } else if (this.choice.choiceType === "RESOURCE") { + if (this.choice.choiceType === "RESOURCE") { this.title = this.meta && this.meta.name; } let promise = this.refs.modal.open().then(() => { -- To stop receiving notification emails like this one, please contact chorem.org SCM administrator <admin+scm@chorem.org>.