branch develop updated (bf62850 -> 63db587)
This is an automated email from the git hooks/post-receive script. New change to branch develop in repository pollen. See https://gitlab.nuiton.org/chorem/pollen.git from bf62850 Adaptation de l'écran de de connexion, d'inscription et de confirmation de mail + correction de l'expiration du token de session new 63db587 Adaptation de l'écran des listes de sondages The 1 revisions listed above as "new" are entirely new to this repository and will be described in separate emails. The revisions listed as "adds" were already present in the repository and have only been added to this reference. Detailed log of new commits: commit 63db587d41fc3de6e62244ec32911d601552a221 Author: Sylvain Bavencoff <bavencoff@codelutin.com> Date: Thu Mar 16 15:39:38 2017 +0100 Adaptation de l'écran des listes de sondages Summary of changes: pollen-ui-riot-js/src/main/web/i18n.json | 60 +++-- pollen-ui-riot-js/src/main/web/js/UIHelper.js | 11 + .../src/main/web/tag/Pagination.tag.html | 235 +++++++++++--------- pollen-ui-riot-js/src/main/web/tag/SignIn.tag.html | 3 +- .../src/main/web/tag/poll/PollCard.tag.html | 92 ++++++++ .../src/main/web/tag/poll/Polls.tag.html | 245 ++++++--------------- 6 files changed, 337 insertions(+), 309 deletions(-) create mode 100644 pollen-ui-riot-js/src/main/web/tag/poll/PollCard.tag.html -- To stop receiving notification emails like this one, please contact chorem.org SCM administrator <admin+scm@chorem.org>.
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 63db587d41fc3de6e62244ec32911d601552a221 Author: Sylvain Bavencoff <bavencoff@codelutin.com> Date: Thu Mar 16 15:39:38 2017 +0100 Adaptation de l'écran des listes de sondages --- pollen-ui-riot-js/src/main/web/i18n.json | 60 +++-- pollen-ui-riot-js/src/main/web/js/UIHelper.js | 11 + .../src/main/web/tag/Pagination.tag.html | 235 +++++++++++--------- pollen-ui-riot-js/src/main/web/tag/SignIn.tag.html | 3 +- .../src/main/web/tag/poll/PollCard.tag.html | 92 ++++++++ .../src/main/web/tag/poll/Polls.tag.html | 245 ++++++--------------- 6 files changed, 337 insertions(+), 309 deletions(-) diff --git a/pollen-ui-riot-js/src/main/web/i18n.json b/pollen-ui-riot-js/src/main/web/i18n.json index 8baaf7e..9347ed1 100644 --- a/pollen-ui-riot-js/src/main/web/i18n.json +++ b/pollen-ui-riot-js/src/main/web/i18n.json @@ -1,6 +1,6 @@ { "fr": { - "pagination_page": "Page", + "pagination_all": "Tous", "pagination_resultsPerPage": "Résultats par page", "poll_closePoll": "Clôturer le sondage", "poll_reopenPoll": "Réouvrir le sondage", @@ -38,13 +38,27 @@ "polls_participatedPolls": "Mes participations", "polls_polls": "Tous les sondages", "polls_name": "Nom", + "polls_sort": "Trier par", "polls_createDate": "Date de création", - "polls_choiceDates": "Ajout de choix", - "polls_voteDate": "Vote", - "polls_status": "Statut", - "polls_CLOSED": "Fermé", - "polls_ADDING_CHOICES": "Ajout de choix en cours", - "polls_VOTING": "Vote en cours", + "polls_noPoll": "Aucun sondage", + "pollCard_CLOSED": "Fermé", + "pollCard_ADDING_CHOICES": "Ajout de choix", + "pollCard_VOTING": "Ouvert", + "pollCard_CREATED": "Créé", + "pollCard_createdBy": "Créé par", + "pollCard_createdIn": "le", + "pollCard_beginChoiceFrom": "ajout de choix à partir du", + "pollCard_votingFrom": "ouverture à partir du", + "pollCard_votingFromTo": "jusqu'au", + "pollCard_beginChoiceTo": "ajout de choix jusqu'au", + "pollCard_noChoice": "aucun choix", + "pollCard_choice": "choix", + "pollCard_choices": "choix", + "pollCard_votingTo": "ouvert jusqu'au", + "pollCard_noVote": "aucun vote", + "pollCard_vote": "vote", + "pollCard_votes": "votes", + "pollCard_closedFrom": "Fermé depuis le", "signup_title": "Créer un compte", "signup_email": "Email", "signup_email_placeholder": "Entrez votre adresse email", @@ -235,7 +249,7 @@ "date-picker_today": "Aujourd'hui" }, "en": { - "pagination_page": "Page", + "pagination_all": "All", "pagination_resultsPerPage": "Results per page", "poll_choices": "Choices", "poll_votes": "Votes", @@ -269,19 +283,31 @@ "poll_votes_addChoice": "Add choice", "poll_votes_delete": "Delete vote?", "poll_votes_voteNotOpen": "Votes are not open.", - "polls_title": "My polls", - "polls_name": "Name", - "polls_createDate": "Created date", - "polls_choiceDates": "Add choices", - "polls_voteDates": "Vote", - "polls_status": "Status", "polls_createdPolls": "My polls", "polls_invitedPolls": "My invitations", "polls_participatedPolls": "My participations", "polls_polls": "All polls", - "polls_CLOSED": "Closed", - "polls_ADDING_CHOICES": "Adding choices", - "polls_VOTING": "Voting", + "polls_name": "Name", + "polls_sort": "Sort by", + "polls_noPoll": "No poll", + "pollCard_CLOSED": "Closed", + "pollCard_ADDING_CHOICES": "Adding choices", + "pollCard_VOTING": "Voting", + "pollCard_CREATED": "Created", + "pollCard_createdBy": "Create by", + "pollCard_createdIn": "in", + "pollCard_beginChoiceFrom": "add choice from", + "pollCard_votingFrom": "voting from", + "pollCard_votingFromTo": "to", + "pollCard_beginChoiceTo": "add choice to", + "pollCard_noChoice": "no choice", + "pollCard_choice": "choice", + "pollCard_choices": "choices", + "pollCard_votingTo": "voting to", + "pollCard_noVote": "no vote", + "pollCard_vote": "vote", + "pollCard_votes": "votes", + "pollCard_closedFrom": "Closing from", "signup_title": "Create an account", "signup_email": "Email", "signup_email_placeholder": "Enter your email", diff --git a/pollen-ui-riot-js/src/main/web/js/UIHelper.js b/pollen-ui-riot-js/src/main/web/js/UIHelper.js index f3808aa..743cd31 100644 --- a/pollen-ui-riot-js/src/main/web/js/UIHelper.js +++ b/pollen-ui-riot-js/src/main/web/js/UIHelper.js @@ -1,3 +1,6 @@ +let session = require("./Session.js"); +let moment = require("moment"); + module.exports = { getWindowDimensions() { var w = window, @@ -34,5 +37,13 @@ module.exports = { // Popup is off the bottom of the page m.style.marginTop = (w.height - (pos.top + pos.height) - 20) + "px"; } + }, + + formatDate(date, format) { + moment.locale(session.locale); + if (date) { + return moment(date).format(format || "LLLL"); + } + return ""; } }; diff --git a/pollen-ui-riot-js/src/main/web/tag/Pagination.tag.html b/pollen-ui-riot-js/src/main/web/tag/Pagination.tag.html index 33c9d01..5265704 100644 --- a/pollen-ui-riot-js/src/main/web/tag/Pagination.tag.html +++ b/pollen-ui-riot-js/src/main/web/tag/Pagination.tag.html @@ -2,163 +2,178 @@ <div class="pagination-controls"> <div class="pagination-config"> - {__.resultsPerPage} - <select ref="pageSize" onchange="{onChangePageSize}"> - <option each="{a in sizes}" value="{a}">{a}</option> - - </select> + <div class="o-form-element page-size"> + <label class="c-label"> + {__.resultsPerPage} + </label> + <select class="c-field u-small" + ref="pageSize" + value={opts.pagination.pageSize} + onchange={onChangePageSize}> + <option each="{size in sizes}" value={size.value}>{size.label}</option> + </select> + </div> </div> - <div class="pagination-pager"> - <button class="{pageNumber > 0 ? '' : 'disabled'}" onclick="{onFirstPage}"> - <i class="fa fa-angle-double-left fa-15x"></i> - </button> - <button class="{pageNumber > 0 ? '' : 'disabled'}" onclick="{onPreviousPage}"> - <i class="fa fa-angle-left fa-15x"></i> - </button> - <div class="pagination-right"> - {__.page} {pageNumber + 1} / {lastPageNumber} + <div class="c-pagination"> + <div class="c-pagination__controls c-pagination__controls--backward"> + <button disabled={opts.pagination.pageNumber === 0} + onclick="{onFirstPage}" + class="c-pagination__control"> + « + </button> + <button class="c-pagination__control" + disabled={opts.pagination.pageNumber === 0} + onclick="{onPreviousPage}"> + ‹ + </button> </div> - <button class="{(pageNumber + 1) < lastPageNumber ? '' : 'disabled'}" onclick="{onNextPage}"> - <i class="fa fa-angle-right fa-15x"></i> - </button> - <button class="{(pageNumber + 1) < lastPageNumber ? '' : 'disabled'}" onclick="{onLastPage}"> - <i class="fa fa-angle-double-right fa-15x"></i> - </button> + <div class="c-pagination__controls"> + <div class="c-pagination__ellipsis"> + {hasEllipsisPrevious ? '…' : ' '} + </div> + <button each={page in pagesToShow} + onclick="{onSetPage(page)}" + class="c-pagination__page {c-pagination__page--current: parent.opts.pagination.pageNumber === page}"> + {page + 1 } + </button> + <div class="c-pagination__ellipsis"> + {hasEllipsisNext ? '…' : ' '} + </div> + </div> + <div class="c-pagination__controls c-pagination__controls--forward"> + <button disabled={opts.pagination.pageNumber >= opts.pagination.lastPage} + onclick="{onNextPage}" + class="c-pagination__control"> + › + </button> + <button disabled={opts.pagination.pageNumber >= opts.pagination.lastPage} + onclick="{onLastPage}" + class="c-pagination__control"> + » + </button> + </div> </div> + + </div> <script type="es6"> - + this.nbMaxPagesToShow = 5; let session = require("../js/Session"); this.installBundle(session, "pagination"); + this.pagesToShow = [0]; + this.hasEllipsisPrevious = false; + this.hasEllipsisNext = false; + + if (!this.opts.pagination) { + this.opts.pagination = {}; + } + this.opts.pagination.pageNumber |= 0; + this.opts.pagination.pageSize |= 5; + this.opts.pagination.lastPage |= 0; + + this.sizes = [ + {value: 1, label: "1"}, + {value: 5, label: "5"}, + {value: 10, label: "10"}, + {value: 20, label: "20"}, + {value: 50, label: "50"}, + {value: 100, label: "100"}, + {value: -1, label: this.__.all} + ]; + + this.updatePagesToShow = () => { + let nbPageToShow = Math.min(this.nbMaxPagesToShow, this.opts.pagination.lastPage + 1); + let offsetPage = this.opts.pagination.pageNumber - Math.floor(nbPageToShow / 2); + offsetPage = Math.max(0, Math.min(offsetPage, this.opts.pagination.lastPage - nbPageToShow + 1)); + this.hasEllipsisPrevious = offsetPage > 0; + this.hasEllipsisNext = offsetPage + nbPageToShow <= this.opts.pagination.lastPage; + this.pagesToShow = Array + .from(Array(nbPageToShow).keys()) + .map(index => offsetPage + index); + }; + + this.on("update", () => { + this.updatePagesToShow(); + }); + this.on("mount", () => { - this.refs.pageSize.value = this.pageSize; - this.refresh(); + this.refs.pageSize.value = this.opts.pagination.pageSize; }); - this.sizes = [1, 5, 10, 15, 25, 50, 100, 250, 500]; - this.pageNumber = 0; - this.lastPageNumber = 0; - this.pageSize = 5; - this.callback = this.opts.callback; - this.sortName = this.opts.sortName; - this.sortValue = this.opts.sortValue; - - this.onContextChange = function(newContext) { - this.paginationContext = newContext; - - let count = this.paginationContext.count; - let size = this.paginationContext.pageSize; - this.lastPageNumber = Math.ceil(count / size); - this.pageNumber = this.paginationContext.currentPage; - this.pageSize = this.paginationContext.pageSize; - this.sortName = this.paginationContext.order; - this.sortValue = !this.paginationContext.desc; - }; + this.updatePagesToShow(); - this.onSortChange = function(sortName, sortValue) { - this.pageNumber = 0; - this.sortName = sortName; - this.sortValue = sortValue; - // console.info("on sort change: " + sortName + " --> " + sortValue); - this.refresh(); - }; this.onChangePageSize = function(e) { - this.pageNumber = 0; - if (e) { - - // console.info("Page size change: " + e.target.value); - this.pageSize = e.target.value; - } - this.refresh(); + this.opts.pagination.pageSize = e.target.value; + this.opts.pagination.pageNumber = 0; + this.opts.onchange(this.opts.pagination); }; this.onFirstPage = function() { - if (this.pageNumber > 0) { - this.pageNumber = 0; - this.refresh(); + if (this.opts.pagination.pageNumber > 0) { + this.opts.pagination.pageNumber = 0; + this.opts.onchange(this.opts.pagination); } }; this.onLastPage = function() { - if (this.pageNumber + 1 < this.lastPageNumber) { - this.pageNumber = this.lastPageNumber - 1; - this.refresh(); + if (this.opts.pagination.pageNumber < this.opts.pagination.lastPage) { + this.opts.pagination.pageNumber = this.opts.pagination.lastPage; + this.opts.onchange(this.opts.pagination); } }; this.onPreviousPage = function() { - if (this.pageNumber > 0) { - this.pageNumber--; - this.refresh(); + if (this.opts.pagination.pageNumber > 0) { + this.opts.pagination.pageNumber--; + this.opts.onchange(this.opts.pagination); } }; this.onNextPage = function() { - if (this.pageNumber + 1 < this.lastPageNumber) { - this.pageNumber++; - this.refresh(); + if (this.opts.pagination.pageNumber < this.opts.pagination.lastPage) { + this.opts.pagination.pageNumber++; + this.opts.onchange(this.opts.pagination); } }; - this.refresh = function() { - let pagination = { - pageNumber: this.pageNumber, - pageSize: this.pageSize, - order: this.sortName, - desc: this.sortValue - }; - // console.info("Request: "); - // console.info(pagination); - this.callback(pagination).then((result) => { - // console.info("update pagination"); - // console.info(result.pagination); - this.onContextChange(result.pagination); - this.update(); - }); + this.onSetPage = (page) => () => { + this.opts.pagination.pageNumber = page; + this.opts.onchange(this.opts.pagination); }; </script> <style> - - .fa-15x { - font-size: 1.5em; - } - - button { - border-style: none; - background-color: white; - cursor: pointer; - padding-left: 10px; - padding-right: 10px; + .o-form-element.page-size { + display: flex; } - - .disabled { - color: gray; - cursor: not-allowed; + .o-form-element.page-size .c-label:first-child { + width: 150px; + text-align: right; + float: left; + padding: 0.25em 5px 0.25em 0; } - .pagination-right { - padding-left: 5px; - padding-right: 5px; + .o-form-element.page-size .c-field { + width: 60px; } .pagination-controls { - padding-top: 10px; display: flex; - flex-direction: row; - justify-content: space-between; - align-content: center; + flex-wrap: wrap; } - .pagination-pager { + .pagination-controls .c-pagination { + width: auto; flex-grow: 1; - display: flex; - flex-direction: row; - align-items: center; - justify-content: flex-end; + } + + .c-pagination__ellipsis { + min-width: 32px; + padding: 0; + display: inline-block; } </style> diff --git a/pollen-ui-riot-js/src/main/web/tag/SignIn.tag.html b/pollen-ui-riot-js/src/main/web/tag/SignIn.tag.html index ec3dee8..66f56ae 100644 --- a/pollen-ui-riot-js/src/main/web/tag/SignIn.tag.html +++ b/pollen-ui-riot-js/src/main/web/tag/SignIn.tag.html @@ -88,8 +88,9 @@ require("./popup/NewPassword.tag.html"); <style> - .container { + .signin { width: 250px; + margin: 0 auto; } .c-heading { diff --git a/pollen-ui-riot-js/src/main/web/tag/poll/PollCard.tag.html b/pollen-ui-riot-js/src/main/web/tag/poll/PollCard.tag.html new file mode 100644 index 0000000..d9fec89 --- /dev/null +++ b/pollen-ui-riot-js/src/main/web/tag/poll/PollCard.tag.html @@ -0,0 +1,92 @@ +<PollCard> + <div class="poll-card {opts.poll.status}"> + <div class="poll-header"> + <a class="poll-title" href="#poll/{opts.poll.id}/vote/{opts.poll.permission}"> + {opts.poll.title} + </a> + <div class="poll-status"> + {__[opts.poll.status]} + </div> + </div> + + <p>{opts.poll.description}</p> + <div class="poll-creation"> + {__.createdBy} {opts.poll.creatorName} {__.createdIn} {formatDate(opts.poll.createDate)} + </div> + <div class="beginChoiceDate" + if={opts.poll.status === "CREATED" && opts.poll.choiceAddAllowed}> + {__.beginChoiceFrom} {formatDate(opts.poll.beginChoiceDate)} + </div> + <div class="poll-created" + if={opts.poll.status === "CREATED"}> + {__.votingFrom} {formatDate(opts.poll.beginDate)} + <span if={opts.poll.endDate}> {__votingFromTo} {formatDate(opts.poll.endDate)}</span> + </div> + + <div class="poll-adding-choices" + if={opts.poll.status === "ADDING_CHOICES"}> + {__.beginChoiceTo} {formatDate(opts.poll.endChoiceDate)} ( + <span if={opts.poll.choiceCount === 0}>{__.noChoice}</span> + <span if={opts.poll.choiceCount === 1}>1 {__.choice}</span> + <span if={opts.poll.choiceCount > 1}>{opts.poll.choiceCount} {__.choices}</span> + ) + </div> + + <div class="poll-voting" + if={opts.poll.status === "VOTING"}> + <span if={opts.poll.voteCount === 0}>{__.noVote}</span> + <span if={opts.poll.voteCount === 1}>1 {__.vote}</span> + <span if={opts.poll.voteCount > 1}>{opts.poll.voteCount} {__.votes}</span> + <span if={opts.poll.endDate}> {__.votingTo} {formatDate(opts.poll.endDate)}</span> + </div> + + <div class="poll-voting" + if={opts.poll.status === "CLOSED"}> + <span if={opts.poll.voteCount === 0}>{__.noVote}</span> + <span if={opts.poll.voteCount === 1}>1 {__.vote}</span> + <span if={opts.poll.voteCount > 1}>{opts.poll.voteCount} {__.votes}</span> + <span if={opts.poll.endDate}> {__.closedFrom} {formatDate(opts.poll.endDate)}</span> + </div> + </div> + + <script type="es6"> + let session = require("../../js/Session"); + this.installBundle(session, "pollCard"); + </script> + + <style> + .poll-card { + margin: 5px auto; + border-radius: 4px; + box-shadow: 0 0 1px hsla(0,0%,7%,.6); + padding: 0.5em; + } + + .poll-card.CREATED { + background-color: grey; + } + + .poll-card.ADDING_CHOICES { + background-color: orange; + } + + .poll-card.VOTING { + background-color: #13a2ff; + color: white + } + + .poll-card.CLOSED { + background-color: #53bd41; + } + + .poll-title { + color: inherit; + } + + .poll-header { + display: flex; + justify-content: space-between; + } + + </style> +</PollCard> 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 dfdf507..9fdeae4 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 @@ -1,213 +1,96 @@ require("../Pagination.tag.html"); +require("./PollCard.tag.html"); <Polls> - <div class="body-container"> - - <div class="container"> - - <div class="legend">{__[method]}</div> - <table> - <thead> - <tr> - <th onclick="{toggleSort}"> - <div> - {__.name} <i ref="sortName" class="fa fa-sort-amount-asc"></i> - </div> - </th> - <th onclick="{toggleSort}"> - <div> - {__.createDate} <i ref="sortCreateDate" class="disabled fa fa-sort"></i> - </div> - </th> - <th> - <div> - {__.choiceDates} + <div class="container" > + <div show="{loaded}"> + <h1 class="c-heading">{__[opts.method]}</h1> + + <div show={polls.length > 0} > + <div class="o-form-element sort"> + <label class="c-label" for="sort">{__.sort}</label> + <div class="c-input-group"> + <div class="o-field"> + <select class="c-field" + onchange={selectSort}> + <option value="title">{__.name}</option> + <option value="topiaCreateDate">{__.createDate}</option> + </select> </div> - </th> - <th> - <div> - {__.voteDates} - </div> - </th> - <th> - <div>{__.status}</div> - </th> - </tr> - </thead> - <tbody> - <tr each="{poll in polls}"> - <td> - <a href="#poll/{poll.id}">{poll.title}</a> - </td> - <td>{poll.createDateStr}</td> - <td>{poll.choiceDates}</td> - <td>{poll.voteDates}</td> - <td>{poll.statusStr}</td> - </tr> - </tbody> - <tfoot> - <tr> - <th colspan="7"> - <div> - <Pagination ref="pagination" sortName="{sortName}" sortValue="false" callback="{callback}"/> - </div> - </th> - </tr> - </tfoot> - </table> + <button class="c-button c-button--brand" + onclick={toggleSort}> + <i class="fa {pagination.desc ? 'fa-sort-amount-desc' : 'fa-sort-amount-asc'}"></i> + </button> + </div> + </div> + + <Pagination pagination={pagination} onchange="{refresh}"/> + + <PollCard each={poll in polls} poll={poll}/> + + <Pagination pagination={pagination} onchange="{refresh}"/> + </div> + <div show={polls.length === 0} class="c-alert c-alert--info"> + {__.noPoll} + </div> </div> - </div> <script type="es6"> + this.loaded = false; let session = require("../../js/Session"); - this.installBundle(session, "polls", locale => { - this.moment.locale(locale); - this.refreshPolls(); - }); - - this.moment = require("moment"); - this.moment.locale(this.opts.session.locale); + this.installBundle(session, "polls"); - this.sortName = "title"; - this.sortValue = false; // means asc - this.method = this.opts.method; - this.polls = null; + this.pagination = { + order: "title", + desc: false, // means asc + pageSize: 5, + pageNumber: 0 + }; + this.polls = []; let pollService = require("../../js/PollService"); - this.callback = (pagination) => { - // console.info("Request data with pagination::"); - if (!pagination.order) { - pagination.order = this.sortName; - pagination.desc = this.sortValue; - } - // console.info(pagination); - return pollService[this.method](pagination).then((result) => { + this.refresh = () => { + return pollService[this.opts.method](this.pagination).then((result) => { this.polls = result.elements; - // console.info("Polls::"); - // console.info(this.polls); - this.refreshPolls(); + Object.assign(this.pagination, result.pagination); + this.loaded = true; this.update(); return result; }); }; - this.refreshPolls = () => { - this.polls.forEach(p => { - p.createDateStr = this.moment(p.createDate).format("llll"); - p.choiceDates = p.beginChoiceDate ? this.moment(p.beginChoiceDate).format("llll") : ""; - if (p.endChoiceDate) { - p.choiceDates += " -> " + this.moment(p.endChoiceDate).format("llll"); - } - p.voteDates = p.beginDate ? this.moment(p.beginDate).format("llll") : ""; - if (p.endDate) { - p.voteDates += " -> " + this.moment(p.endDate).format("llll"); - } - p.statusStr = this.__[p.status]; - }); + this.refresh(); + + this.toggleSort = () => { + this.pagination.desc = !this.pagination.desc; + this.refresh(); }; - this.on("mount", () => { - this.pagination = this.tags.pagination; - this.sortOwner = this.refs.sortName; - this.refs.sortName.setAttribute("sortName", "title"); - this.refs.sortCreateDate.setAttribute("sortName", "topiaCreateDate"); - }); - - this.toggleSort = (e) => { - // console.info(this.refs.sortName); - if (this.sortOwner === e.target) { - this.sortOwner.classList.toggle("fa-sort-amount-asc"); - this.sortOwner.classList.toggle("fa-sort-amount-desc"); - this.sortValue = !this.sortValue; - } else { - - this.sortOwner.classList.add("fa-sort"); - this.sortOwner.classList.add("disabled"); - this.sortOwner.classList.remove("fa-sort-amount-desc"); - this.sortOwner.classList.remove("fa-sort-amount-asc"); - - this.sortOwner = e.target; - - this.sortOwner.classList.remove("disabled"); - this.sortOwner.classList.remove("fa-sort"); - this.sortOwner.classList.remove("fa-sort-amount-desc"); - this.sortOwner.classList.add("fa-sort-amount-asc"); - this.sortValue = true; - } - - this.pagination.onSortChange(this.sortOwner.getAttribute("sortName"), this.sortValue); + + this.selectSort = (e) => { + this.pagination.order = e.target.value; + this.refresh(); }; </script> <style> - pagination { - width: 100%; - } - - .disabled { - color: gray; - } - - .wide { - width: 400px; + .c-heading { + text-align: center; } - .body-container { - max-width: 90%; + .o-form-element.sort .c-label:first-child { + width: 70px; + display: inline-block; + text-align: right; + float: left; + padding-top: 0.5em; + padding-right: 5px; } - .container { - display: flex; - justify-content: space-around; - align-items: center; - flex-direction: column; - background: white; - border: solid 2px #c8ccca; - border-radius: 10px; - padding: 15px 0; - width: 100%; + .o-form-element.sort .c-input-group { + width: 200px; } - table { - padding-top: 10px; - } - - th { - text-align: left; - } - - th > div { - justify-content: flex-start; - display: flex; - flex-direction: row; - } - - td:first-child { - width: 400px; - } - - td:nth-child(2) { - width: 210px; - } - - td:nth-child(3) { - width: 430px; - } - - td:nth-child(4) { - width: 430px; - } - - .legend { - width: 100%; - height: 30px; - border-bottom: 1px solid #b2c7d3; - display: flex; - justify-content: center; - align-items: center; - padding-bottom: 10px; - font-size: 20px; - } </style> </Polls> -- To stop receiving notification emails like this one, please contact chorem.org SCM administrator <admin+scm@chorem.org>.
participants (1)
-
chorem.org scm