Salut, les animations sont fluides, mais les composants de choix de date et de temps sont coupés sous firefox... Donc on ne peut pas faire des votes de date. Kevin -------- Forwarded Message -------- Subject: [Pollen-commits] 01/02: Fix animation in Choice tag Date: Wed, 31 May 2017 14:05:39 +0200 From: chorem.org scm <scm@users.chorem.org> Reply-To: pollen devel mailing-list <pollen-devel@list.chorem.org>, pollen-commits@list.chorem.org To: pollen commits mailing-list <pollen-commits@list.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 fb8573a7d21f6ad3e274778cc6b91e15caa20d79 Author: Julien Ruchaud <ruchaud@codelutin.com> Date: Wed May 31 14:05:01 2017 +0200 Fix animation in Choice tag --- .../src/main/web/tag/poll/Choice.tag.html | 57 ++++++++-------------- .../src/main/web/tag/poll/Choices.tag.html | 4 ++ 2 files changed, 25 insertions(+), 36 deletions(-) diff --git a/pollen-ui-riot-js/src/main/web/tag/poll/Choice.tag.html b/pollen-ui-riot-js/src/main/web/tag/poll/Choice.tag.html index a5515d0..310c759 100644 --- a/pollen-ui-riot-js/src/main/web/tag/poll/Choice.tag.html +++ b/pollen-ui-riot-js/src/main/web/tag/poll/Choice.tag.html @@ -229,6 +229,7 @@ require("../components/time-picker.tag.html"); .choice-container { display: flex; flex-flow: row nowrap; + height: 40px; } .choice-type-button { @@ -237,62 +238,45 @@ require("../components/time-picker.tag.html"); border: none; border-radius: 4px; padding: 4px; - width:auto; - opacity: 1; - margin: 2px 1px 2px 0; - transition: opacity 0.3s ease-in-out 0s, width 0s linear 0.5s; - } - - .choice-container > .hidden { - visibility: hidden; - opacity: 0; - width: 0; - padding: 0; - border: none; + min-width: 22px; + width: 22px; + margin: 2px 5px 2px 0; } .choice-container > input, .choice-container date-picker, .choice-container time-picker { - display: inline-block; - opacity: 1; - height: auto; - flex-grow: 0; - margin: 0; - padding: 0; - border: none; - transition: width 0.5s ease-in-out 0s, - flex-grow 0s linear 0.5s, - visibility 0.5s ease-in-out 0s, - border 0s linear 0s; + overflow: hidden; + display: flex; + align-items: center; + transition: width .4s ease-in-out; } - .choice-container input { - border: none; + .choice-container > .hidden { + width: 0; } .choice-container > .selected { - visibility: visible; - flex-grow: 1; - } - - .choice-container > input.selected, - .choice-container date-picker.selected .calendar-field, - .choice-container time-picker.selected .calendar-field { width: 100%; - min-width: 20px; - padding: 8px; } + .choice-container input { + border: none; + } + .original-file, .add-file { + white-space: nowrap; display: flex; + align-items: center; + overflow: hidden; + transition: width .4s ease-in-out; } .original-file > *, .add-file > * { - white-space: nowrap; - padding: 8px; + display: flex; + align-items: center; } .original-file img, @@ -304,6 +288,7 @@ require("../components/time-picker.tag.html"); .add-file input[type="file"] { width: 0px; padding-left: 1px; + font-size: 0px; } textarea { diff --git a/pollen-ui-riot-js/src/main/web/tag/poll/Choices.tag.html b/pollen-ui-riot-js/src/main/web/tag/poll/Choices.tag.html index f884c69..8b224e4 100644 --- a/pollen-ui-riot-js/src/main/web/tag/poll/Choices.tag.html +++ b/pollen-ui-riot-js/src/main/web/tag/poll/Choices.tag.html @@ -68,5 +68,9 @@ require("./Choice.tag.html"); padding: 0 0 0 1px; } + /* Force the size of the container to avoid overlap when change choice */ + .o-field { + width: 93.5%; + } </style> </Choices> -- To stop receiving notification emails like this one, please contact chorem.org SCM administrator <admin+scm@chorem.org>. _______________________________________________ Pollen-commits mailing list Pollen-commits@list.chorem.org http://list.chorem.org/cgi-bin/mailman/listinfo/pollen-commits