[Pollen-commits] 03/03: style

30 Jun 2017

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 c3ba73e2f0df0902cce409657ba00930d80bbdea
Author: Kevin Morin <morin@codelutin.com>
Date:   Fri Jun 30 17:25:35 2017 +0200

    style
---
 pollen-ui-riot-js/src/main/web/conf.js             |   2 +-
 pollen-ui-riot-js/src/main/web/css/Pacifico.ttf    | Bin 0 -> 75568 bytes
 pollen-ui-riot-js/src/main/web/css/custom.css      |  40 ++-
 pollen-ui-riot-js/src/main/web/css/main.css        | 148 +++++++--
 pollen-ui-riot-js/src/main/web/i18n.json           |  31 +-
 pollen-ui-riot-js/src/main/web/tag/Pollen.tag.html |   8 +-
 .../src/main/web/tag/PollenFooter.tag.html         |   2 +-
 .../src/main/web/tag/PollenHeader.tag.html         | 101 ++++---
 pollen-ui-riot-js/src/main/web/tag/SignIn.tag.html |  13 +-
 pollen-ui-riot-js/src/main/web/tag/SignUp.tag.html |   7 +-
 .../web/tag/components/date-time-picker.tag.html   |  16 +-
 .../src/main/web/tag/poll/ChoiceDate.tag.html      | 249 ---------------
 .../src/main/web/tag/poll/Choices.tag.html         |   9 +
 .../src/main/web/tag/poll/Description.tag.html     | 109 +++----
 .../src/main/web/tag/poll/EditPoll.tag.html        | 114 ++++---
 .../src/main/web/tag/poll/Poll.tag.html            | 221 ++++++++------
 .../src/main/web/tag/poll/Polls.tag.html           |   2 +-
 .../src/main/web/tag/poll/Settings.tag.html        | 334 +++++++++++----------
 .../src/main/web/tag/poll/Summary.tag.html         | 100 +++---
 19 files changed, 763 insertions(+), 743 deletions(-)

diff --git a/pollen-ui-riot-js/src/main/web/conf.js b/pollen-ui-riot-js/src/main/web/conf.js
index a6203bac..eeb2148f 100644
--- a/pollen-ui-riot-js/src/main/web/conf.js
+++ b/pollen-ui-riot-js/src/main/web/conf.js
@@ -1,6 +1,6 @@
 window.pollenConf = {
     endPoint: "http://localhost:8888/pollen-rest-api",
-    piwikUrl: "", // add the piwik url, eg: http://localhost/piwik<;
+    piwikUrl: "", // add the piwik url, eg: http://localhost/piwik
     piwikSiteId: "", // add the site id, eg: 3
     defaultMessageTimeout: 15,
     resourceMaxSize: 10000000 // octets => 10 Mo
diff --git a/pollen-ui-riot-js/src/main/web/css/Pacifico.ttf b/pollen-ui-riot-js/src/main/web/css/Pacifico.ttf
new file mode 100644
index 00000000..6d47cdc9
Binary files /dev/null and b/pollen-ui-riot-js/src/main/web/css/Pacifico.ttf differ
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 7a5e5d68..bdf67d1b 100644
--- a/pollen-ui-riot-js/src/main/web/css/custom.css
+++ b/pollen-ui-riot-js/src/main/web/css/custom.css
@@ -1,15 +1,16 @@
 
 :root{
-    --main: #13a2ff;
+    --main: #04c4bb;
     --background: #ffffff;
-    --default: #042d44;
+    --default: #2c3e50;
+    --field-border: #96a8b2;
 
     --winner: #ff9e0d;
     --anonymous: #666666;
 
     --poll-created: grey;
     --poll-adding_choices: orange;
-    --poll-voting: #13a2ff;
+    --poll-voting: #04c4bb;
     --poll-closed: #53bd41;
 
     --link: #96a8b2;
@@ -17,17 +18,23 @@
     --separator: #b2c7d3;
 
     --dropdown: #f9f9f9;
-    --dropdown-text: #96a8b2;
+    --dropdown-text: #353535;
     --dropdown-shadow: #aaa;
     --dropdown-hover: #f1f1f1;
 
+    --header: #353535;
+    --header-title: #04c4bb;
+    --header-actions: #535353;
+    --header-link: #eeeeee;
+    --header-link-hover: #04c4bb;
+
     --footer: black;
     --footer-text: #ffffff;
-    --footer-text-hover: blue;
+    --footer-text-hover: #eeeeee;
 
     --qrcode: #ffffff;
 
-    --focus: #2196f3;
+    --focus: #04c4bb;
     --shadow: #4dabf5;
     --active: #7b929e;
     --btn-hover: #b0bec5;
@@ -36,9 +43,9 @@
     --brand: #2c3e50;
     --brand-active: #1c2732;
     --brand-hover: #3c556e;
-    --info: #2196f3;
-    --info-active: #0c7fda;
-    --info-hover: #4dabf5;
+    --info: #04c4bb;
+    --info-active: #00aba3;
+    --info-hover: #32c7bd;
     --warning: #ff9800;
     --warning-active: #d17d00;
     --warning-hover: #ffab2e;
@@ -61,4 +68,19 @@
     --favorit-member: #ffffff;
 
     --title: "Pollen";
+    --title-font: pacifico;
+
+    --h1: #777777;
+    --h1-background: #f3f3f3;
+
+    --h4: #555555;
+
+    --body-content-background: #fff;
+    --container-border: #a9a9a9;
+
+    --tabs-background: #f3f3f3;
+    --tab-color: #777;
+    --tab-selected-background: #fff;
+
+    --poll-info: #aaa;
 }
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 7f8d622c..bd434d0d 100644
--- a/pollen-ui-riot-js/src/main/web/css/main.css
+++ b/pollen-ui-riot-js/src/main/web/css/main.css
@@ -18,14 +18,17 @@
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  * #L%
  */
-
+@font-face {
+font-family: 'pacifico';
+src: url('Pacifico.ttf');
+}
 
 html {
     -webkit-text-size-adjust:none;
 }
 
 body {
-   font-size: 16px;
+   font-size: 14px;
 }
 
 * {
@@ -74,6 +77,7 @@ input, textarea {
 .body-content {
     flex-grow: 1;
     overflow: hidden;
+    background-color: var(--body-content-background);
 }
 
 @media (orientation: portrait) {
@@ -97,20 +101,14 @@ a {
 }
 
 .container {
-    max-width: 1024px;
-    margin: 15px auto 0 auto;
-}
-
-@media (max-width: 1034px) {
-    .container {
-        margin: 15px 5px 0 5px;
-    }
+    height: 100%;
+    background-color: var(--background);
 }
 
 .actions {
-    padding: 5px 0;
+    padding: 10px 0;
     display: flex;
-    justify-content: space-between;
+    justify-content: center;
 }
 
 .actions .c-button,
@@ -152,6 +150,10 @@ ul {
     cursor: pointer;
 }
 
+.cursor-help {
+    cursor: help;
+}
+
 .c-overlay, .o-modal {
     position: fixed;
 }
@@ -161,7 +163,7 @@ ul {
 .colors-main textarea,
 .colors-main select {
     background-color: var(--background);
-    color: var(--default);
+    color: var(--main);
 }
 
 .colors-main-invers,
@@ -170,6 +172,28 @@ ul {
     color: var(--background);
 }
 
+.colors-default,
+.colors-default input,
+.colors-default textarea,
+.colors-default select {
+    background-color: var(--background);
+    color: var(--default);
+}
+
+.colors-default-invers,
+.colors-default-invers a  {
+    background-color: var(--default);
+    color: var(--background);
+}
+
+.border-main {
+    border-color: var(--main);
+}
+
+.border-main-invers {
+    border-color: var(--background);
+}
+
 .card {
     display: block;
     margin: 5px auto;
@@ -222,43 +246,79 @@ ul {
 
 /* Steps */
 .tabs {
-    border-bottom: 1px solid var(--separator);
     display: flex;
     flex-direction: row;
-    justify-content: center;
+    justify-content: left;
     align-items: center;
     margin: 0 auto;
 }
 
+.tabs.below-h1 {
+    background-color: var(--tabs-background);
+    border-bottom: 1px solid var(--separator);
+}
+
+.tab-container {
+    display: flex;
+    position: relative;
+    top: 1px;
+    padding: 0 10px;
+}
+
 .tab {
-    margin-left: 12px;
-    margin-right: 12px;
+    padding: 0.5em 1.5em 0.75em;
+    text-align: center;
 }
 
+.tab,
 .tab button,
 .tab a {
     border: none;
     font-size: 1em;
-    color: var(--default);
+    color: var(--tab-color);
     background: transparent;
 }
 
+.tab span {
+    font-style: italic;
+}
+
+.tab.selected span {
+    font-style: normal;
+}
+
+.tab.selected {
+    background: var(--tab-selected-background);
+    border: 1px solid var(--separator);
+    border-bottom: 0;
+    border-radius: 4px 4px 0 0;
+}
+
 .tab.selected,
-.tab.selected a {
+.tab.selected a,
+.tab.selected button {
+    color: var(--main);
+    font-weight: bold;
+}
+
+.tab a:hover,
+.tab button:hover {
     color: var(--main);
-    border-bottom: 2px solid;
 }
 
 @media (max-width: 640px) {
+
+    .tabs.tabs-one-small .tab-container {
+        flex-grow: 1;
+    }
+
     .tabs.tabs-one-small .tab {
         display: none;
     }
 
     .tabs.tabs-one-small .tab.selected {
         display: block;
-        width: 100%;
-        text-align: center;
-        border-bottom: none;
+        flex-grow: 1;
     }
 }
 
@@ -304,7 +364,7 @@ time-picker .next:hover {
 
 .dropdown-content {
     background-color: var(--dropdown);
-    box-shadow: 0 8px 16px 0 var(--dropdown-shadow);
+    box-shadow: 0 2px 2px 0 var(--dropdown-shadow);
 }
 
 .dropdown-content a {
@@ -346,6 +406,38 @@ qrcode {
     background-color: var(--qrcode);
 }
 
+pollenheader {
+    background-color: var(--header);
+}
+
+pollenheader .header-home {
+    font-family: var(--title-font);
+    color: var(--header-title);
+}
+
+pollenheader .header-actions {
+    background-color: var(--header-actions);
+}
+
+pollenheader .header-link {
+    color: var(--header-link);
+}
+
+pollenheader .header-link:hover {
+    color: var(--header-link-hover);
+}
+
+h1 {
+    color: var(--h1);
+    background-color: var(--h1-background);
+    padding: 30px 20px 15px 20px;
+    border-bottom: 1px solid var(--separator);
+}
+
+h4 {
+    color: var(--h4);
+}
+
 pollenfooter,
 pollenfooter a {
     background-color: var(--footer);
@@ -375,3 +467,11 @@ pollenfooter a:hover {
 .error {
     color: var(--error);
 }
+
+.c-field {
+    border-color: var(--field-border);
+}
+
+.no-border {
+    border: 0;
+}
\ No newline at end of file
diff --git a/pollen-ui-riot-js/src/main/web/i18n.json b/pollen-ui-riot-js/src/main/web/i18n.json
index 90ab739e..80581654 100644
--- a/pollen-ui-riot-js/src/main/web/i18n.json
+++ b/pollen-ui-riot-js/src/main/web/i18n.json
@@ -31,6 +31,7 @@
     "summary_members": "Participants",
     "summary_membersNb": "participants ont reçu un email avec un lien pour voter.",
     "poll_403": "Erreur : le sondage n'est pas accessible",
+    "poll_newPoll": "Nouveau sondage",
     "poll_closePoll": "Clôturer le sondage",
     "poll_reopenPoll": "Réouvrir le sondage",
     "poll_clonePoll": "Cloner le sondage",
@@ -47,17 +48,15 @@
     "poll_ADDING_CHOICES": "Ajout de choix",
     "poll_VOTING": "Ouvert",
     "poll_CREATED": "Créé",
-    "poll_createdBy": "Créé par",
-    "poll_createdIn": "le",
+    "poll_createdBy": "Auteur :",
     "poll_voteCountingType": "Type de sondage : ",
-    "poll_beginChoiceFrom": "ajout de choix à partir du",
-    "poll_votingFrom": "ouverture à partir du",
-    "poll_votingFromTo": "jusqu'au",
-    "poll_beginChoiceTo": "ajout de choix jusqu'au",
+    "poll_dateVotes": "Période de vote",
+    "poll_dateAddChoices": "Période d'ajout de choix",
+    "poll_dateFrom": "Du",
+    "poll_dateTo": "Au",
     "poll_noChoice": "aucun choix",
     "poll_choice": "choix",
     "poll_choices": "choix",
-    "poll_votingTo": "ouvert jusqu'au",
     "poll_noVote": "aucun vote",
     "poll_vote": "vote",
     "poll_votes": "votes",
@@ -223,10 +222,12 @@
     "home_createPoll": "Créer un sondage",
     "poll_cancel": "Annuler",
     "poll_description_next": "Suivant",
+    "poll_description_info": "Informations",
     "poll_description_title": "Titre",
     "poll_description_titlePlaceHolder": "Renseignez le titre du sondage",
     "poll_description_description": "Description",
     "poll_description_descriptionPlaceHolder": "Renseignez la description du sondage",
+    "poll_description_user": "Créateur",
     "poll_description_name": "Votre nom",
     "poll_description_namePlaceHolder": "Renseignez votre nom",
     "poll_description_email": "Votre courriel",
@@ -285,7 +286,7 @@
     "poll_settings_addChoices": "Ajout de choix par les participants",
     "poll_settings_limitChoices": "Limiter le nombre de choix par vote",
     "poll_settings_votesConfiguration": "Configuration des votes",
-    "poll_settings_voteCountingType": "Type de scrutin pour effecter le dépouillement du sondage",
+    "poll_settings_voteCountingType": "Type de scrutin pour effectuer le dépouillement du sondage",
     "poll_settings_voteCountingType_normal": "Normal",
     "poll_settings_voteCountingType_pourcentage": "Pourcentage",
     "poll_settings_voteCountingType_condorcet": "Condorcet",
@@ -306,9 +307,11 @@
     "poll_settings_restrictedPoll": "Seul les invités peuvent voter (Sondage privé)",
     "poll_settings_restrictedPoll_withMe": "Je participe au sondage",
     "poll_settings_voteNotification": "Recevoir des notifications",
+    "poll_settings_voteNotification_disabled": "Pour activer les notifications, vous devez renseigner votre courriel dans la partie 'Description'.",
     "poll_settings_voteNotification_never": "Jamais",
     "poll_settings_voteNotification_everyVote": "À chaque vote",
     "poll_settings_notifyMeBeforePollEnds": "Recevoir une notification avant la fin des votes",
+    "poll_settings_notifyMeBeforePollEnds_disabled": "Pour activer le rappel de la fin du sondage, vous devez renseigner votre courriel dans la partie 'Description', et choisir une date de fin pour le sondage en activant la période d'ouverture des votes.",
     "poll_settings_notifyMeHoursBeforePollEnds": "Combien d'heures avant ?",
     "poll_choices_title": "Liste des choix",
     "poll_choices_label": "Choix",
@@ -552,17 +555,15 @@
     "poll_ADDING_CHOICES": "Adding choices",
     "poll_VOTING": "Voting",
     "poll_CREATED": "Created",
-    "poll_createdBy": "Create by",
-    "poll_createdIn": "in",
+    "poll_createdBy": "Author",
     "poll_voteCountingType": "Poll type: ",
     "poll_beginChoiceFrom": "add choice from",
-    "poll_votingFrom": "voting from",
-    "poll_votingFromTo": "to",
+    "poll_votingFrom": "Start date:",
+    "poll_votingTo": "End date:",
     "poll_beginChoiceTo": "add choice to",
     "poll_noChoice": "no choice",
     "poll_choice": "choice",
     "poll_choices": "choices",
-    "poll_votingTo": "voting to",
     "poll_noVote": "no vote",
     "poll_vote": "vote",
     "poll_votes": "votes",
@@ -729,10 +730,12 @@
     "poll_saveSuccess": "Your poll {0} has been successfully saved.",
     "poll_description_cancel": "Cancel",
     "poll_description_next": "Next",
+    "poll_description_info": "Information",
     "poll_description_title": "Title",
     "poll_description_titlePlaceHolder": "Enter poll title",
     "poll_description_description": "Description",
     "poll_description_descriptionPlaceHolder": "Enter poll description",
+    "poll_description_user": "Creator",
     "poll_description_name": "Your name",
     "poll_description_namePlaceHolder": "Enter your name",
     "poll_description_email": "Your email",
@@ -803,9 +806,11 @@
     "poll_settings_restrictedPoll": "Only invited people can vote (Private poll)",
     "poll_settings_restrictedPoll_withMe": "I also want to participate",
     "poll_settings_voteNotification": "Receive notifications",
+    "poll_settings_voteNotification_disabled": "To enable the notifications, you need to enter you email address in the 'Description' part.",
     "poll_settings_voteNotification_never": "Never",
     "poll_settings_voteNotification_everyVote": "For every vote",
     "poll_settings_notifyMeBeforePollEnds": "Receive a notification before the end of the votes",
+    "poll_settings_notifyMeBeforePollEnds_disabled": "To enable the notifications, you need to enter you email address in the 'Description' part, and select an end date for the poll by enabling the vote opening period.",
     "poll_settings_notifyMeHoursBeforePollEnds": "How many hours before?",
     "poll_choices_title": "Choices List",
     "poll_choices_label": "Choice",
diff --git a/pollen-ui-riot-js/src/main/web/tag/Pollen.tag.html b/pollen-ui-riot-js/src/main/web/tag/Pollen.tag.html
index 56c85f3d..8825148a 100644
--- a/pollen-ui-riot-js/src/main/web/tag/Pollen.tag.html
+++ b/pollen-ui-riot-js/src/main/web/tag/Pollen.tag.html
@@ -36,7 +36,7 @@ require("./favoriteList/FavoriteLists.tag.html");
 require("./favoriteList/FavoriteList.tag.html");
 require("./popup/ConfirmPopup.tag.html");
 require("./popup/InformationPopup.tag.html");
-<Pollen class="body-wrapper colors-main">
+<Pollen class="body-wrapper colors-default">
     <ConfirmPopup/>
     <InformationPopup/>
     <PollenHeader/>
@@ -189,7 +189,7 @@ require("./popup/InformationPopup.tag.html");
             this.bus.trigger("pageChanged", "editPoll");
             riot.mount(this.refs.content, "editpoll", {pollId: pollId, permission: permission, clone: true});
         });
-        route("/poll/*/summary/*/*", (pollId, permission) => {
+        route("/poll/*/summary/*", (pollId, permission) => {
             riot.mount(this.refs.content, "editpoll", {pollId: pollId, permission: permission, showSummary:true});
         });
         route("/poll/*", (pollId) => {
@@ -235,6 +235,10 @@ require("./popup/InformationPopup.tag.html");
             position: relative;
         }
 
+        .body-content > div {
+            height: 100%;
+        }
+
         pollenmessagemanager {
             position: fixed;
             bottom: 20px;
diff --git a/pollen-ui-riot-js/src/main/web/tag/PollenFooter.tag.html b/pollen-ui-riot-js/src/main/web/tag/PollenFooter.tag.html
index 93b8d385..359ad824 100644
--- a/pollen-ui-riot-js/src/main/web/tag/PollenFooter.tag.html
+++ b/pollen-ui-riot-js/src/main/web/tag/PollenFooter.tag.html
@@ -45,7 +45,7 @@
 
         .links a {
             display: inline-block;
-            font-size: 0.8em;
+            font-size: 0.9em;
             padding: 0 20px;
         }
 
diff --git a/pollen-ui-riot-js/src/main/web/tag/PollenHeader.tag.html b/pollen-ui-riot-js/src/main/web/tag/PollenHeader.tag.html
index f91e4474..7a434820 100644
--- a/pollen-ui-riot-js/src/main/web/tag/PollenHeader.tag.html
+++ b/pollen-ui-riot-js/src/main/web/tag/PollenHeader.tag.html
@@ -19,46 +19,46 @@
 * #L%
 */
 require("./HeaderI18n.tag.html");
-<PollenHeader class="colors-main-invers">
-    <a class="header-link "href="#home" ><i class="fa fa-home"/></a>
-
-    <div class="header-home">
-        <a class="header-link instance-title" href="#home" target="_top"></a>
-    </div>
+<PollenHeader>
+
+    <a class="header-home instance-title" href="#home" target="_top"></a>
+
+    <div class="header-actions">
+        <div class="dropdown" if="{user && user.administrator}">
+            <a class="header-link">
+                <i class="fa fa-wrench"/>
+            </a>
+            <div class="dropdown-content right">
+                <a href="#user">{__.users}</a>
+                <a href="#poll">{__.polls}</a>
+            </div>
+        </div>
 
-    <div class="dropdown" if="{user && user.administrator}">
-        <a class="header-link">
-            <i class="fa fa-wrench"/>
-        </a>
-        <div class="dropdown-content right">
-            <a href="#user">{__.users}</a>
-            <a href="#poll">{__.polls}</a>
+        <div class="dropdown" if={user}>
+            <a class="header-link">
+                <i class="fa fa-user-circle"/>
+                <span class="user-name action-label"> {user && user.name}</span>
+            </a>
+            <div class="dropdown-content right">
+                <a href="#user/profile">{__.myProfile}</a>
+                <a href="#poll/created">{__.myPolls}</a>
+                <a href="#poll/invited">{__.myInvitedPolls}</a>
+                <a href="#poll/participated">{__.myParticipatedPolls}</a>
+                <a href="#favoriteLists">{__.myFavoriteLists}</a>
+                <span role="separator" class="divider"></span>
+                <a onclick="{signOut}">{__.signout}</a>
+            </div>
         </div>
-    </div>
 
-    <div class="dropdown" if={user}>
-        <a class="header-link">
-            <i class="fa fa-user"/>
-            <span class="user-name"> {user && user.name}</span>
-        </a>
-        <div class="dropdown-content right">
-            <a href="#user/profile">{__.myProfile}</a>
-            <a href="#poll/created">{__.myPolls}</a>
-            <a href="#poll/invited">{__.myInvitedPolls}</a>
-            <a href="#poll/participated">{__.myParticipatedPolls}</a>
-            <a href="#favoriteLists">{__.myFavoriteLists}</a>
-            <span role="separator" class="divider"></span>
-            <a onclick="{signOut}">{__.signout}</a>
+        <div if="{!user}">
+            <a class="header-link" onclick="{signIn}">
+                <i class="fa fa-sign-in" aria-hidden="true" /><span class="action-label">{__.signin}</span>
+            </a>
         </div>
-    </div>
 
-    <div if="{!user}">
-        <button type="button" class="c-button c-button--ghost-info colors-main" onclick="{signIn}">
-            <i class="fa fa-sign-in" aria-hidden="true" /> {__.signin}
-        </button>
-    </div>
+        <HeaderI18n/>
 
-    <HeaderI18n/>
+    </div>
 
     <script type="es6">
         let route = require("riot-route");
@@ -97,26 +97,39 @@ require("./HeaderI18n.tag.html");
         pollenheader {
             display: flex;
             align-items: center;
+            justify-content: space-between;
         }
 
         .header-home {
-            font-size: 1.3em;
-            flex-grow: 1;
-            min-width: 0px;
+            font-size: 2em;
+            margin-left: 50px;
+            height: 3.5rem;
+            line-height: 3.3rem;
         }
 
-        .header-home .header-link {
-            text-transform: uppercase;
+        .header-actions {
+            display: flex;
+            align-items: center;
         }
 
-        .header-link {
-            font-size: 1.3em;
+        .header-actions .header-link {
+            font-size: 1em;
             display: flex;
             text-align: center;
-            justify-content: center;
             align-items: center;
-            height: 3rem;
-            padding: 10px 10px;
+            height: 3.5rem;
+        }
+
+        .header-actions .header-link i {
+            font-size: 1.5em;
+        }
+
+        .header-actions .header-link .action-label {
+            margin-left: 5px;
+        }
+
+        .header-link {
+            padding: 0px 15px;
             cursor: pointer;
         }
 
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 0a0d8405..f4cdc57c 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
@@ -22,7 +22,7 @@ require("./popup/NewPassword.tag.html");
 require("./SignUp.tag.html");
 require("./components/HumanInput.tag.html");
 <SignIn>
-    <div class="body-container colors-main sign-in-layer" show={openSignIn}>
+    <div class="body-container colors-default sign-in-layer" show={openSignIn}>
         <div class="body-content">
             <h1 class="c-heading">{__.title}</h1>
             <form class="signin">
@@ -138,5 +138,16 @@ require("./components/HumanInput.tag.html");
             font-size: 1em;
         }
 
+        .body-content {
+            margin-bottom: 20px;
+        }
+
+        @media (orientation: landscape) {
+            .body-content {
+                flex-basis: 50%;
+            }
+        }
+
+
     </style>
 </SignIn>
diff --git a/pollen-ui-riot-js/src/main/web/tag/SignUp.tag.html b/pollen-ui-riot-js/src/main/web/tag/SignUp.tag.html
index 5fb2c701..52c6e6ee 100644
--- a/pollen-ui-riot-js/src/main/web/tag/SignUp.tag.html
+++ b/pollen-ui-riot-js/src/main/web/tag/SignUp.tag.html
@@ -161,7 +161,6 @@ require("./components/HumanInput.tag.html");
     <style>
 
         .container {
-            max-width: 450px;
             margin-top: 0px;
         }
 
@@ -169,6 +168,12 @@ require("./components/HumanInput.tag.html");
             text-align: center;
         }
 
+        form {
+            padding: 0 1em;
+            margin: 0 auto;
+            max-width: 450px;
+        }
+
         @media (min-width: 640px) {
             .o-form-element .c-label:first-child {
                 width: 35%;
diff --git a/pollen-ui-riot-js/src/main/web/tag/components/date-time-picker.tag.html b/pollen-ui-riot-js/src/main/web/tag/components/date-time-picker.tag.html
index 3c1331d4..032d1d95 100644
--- a/pollen-ui-riot-js/src/main/web/tag/components/date-time-picker.tag.html
+++ b/pollen-ui-riot-js/src/main/web/tag/components/date-time-picker.tag.html
@@ -2,7 +2,7 @@ require("./date-picker.tag.html");
 require("./time-picker.tag.html");
 
 <date-time-picker>
-    <div if={!session.dateInputSupported} class="c-input-group">
+    <div if={!session.dateInputSupported} class="c-input-group date-time-field">
         <date-picker class="o-field o-field--icon-left"
                      inputclass="c-field o-field--icon-left"
                      iconleftclass="calendar"
@@ -18,15 +18,15 @@ require("./time-picker.tag.html");
                      disabled={opts.disabled}
                      time="{time}"
                      onchange="{opts.onchange}"/>
-      <button if="{!opts.required}"
-              class="c-button c-button--brand input-right-button"
-              disabled={opts.disabled}
-              onclick="{reset}">
+      <a if="{!opts.required}"
+         class="c-button c-button--brand input-right-button"
+         disabled={opts.disabled}
+         onclick="{reset}">
         <i class="fa fa-fw fa-times"></i>
-      </button>
+      </a>
     </div>
     <input if={session.dateInputSupported}
-           class="c-field"
+           class="c-field date-time-field"
            ref="dateInputSupportedField"
            value="{dateTime}"
            type="datetime-local"
@@ -71,7 +71,7 @@ require("./time-picker.tag.html");
 
   <style scoped>
     .input-right-button {
-        padding: 0;
+        padding: 0.5em 0.1em;
     }
   </style>
 
diff --git a/pollen-ui-riot-js/src/main/web/tag/poll/ChoiceDate.tag.html b/pollen-ui-riot-js/src/main/web/tag/poll/ChoiceDate.tag.html
deleted file mode 100644
index 8beab761..00000000
--- a/pollen-ui-riot-js/src/main/web/tag/poll/ChoiceDate.tag.html
+++ /dev/null
@@ -1,249 +0,0 @@
-/*-
-* #%L
-* Pollen :: UI (Riot Js)
-* %%
-* Copyright (C) 2009 - 2017 CodeLutin
-* %%
-* This program is free software: you can redistribute it and/or modify
-* it under the terms of the GNU Affero General Public License as published by
-* the Free Software Foundation, either version 3 of the License, or
-* (at your option) any later version.
-*
-* This program is distributed in the hope that it will be useful,
-* but WITHOUT ANY WARRANTY; without even the implied warranty of
-* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
-* GNU General Public License for more details.
-*
-* You should have received a copy of the GNU Affero General Public License
-* along with this program. If not, see <http://www.gnu.org/licenses/>.
-* #L%
-*/
-<ChoiceDate>
-
-    <div class="choice-body">
-
-        <div class="choice-actions">
-            <div show="{mode =='edit' && !editing}" id="{choice.id}">
-                <a onclick="{deleteChoice}"><i class="fa fa-trash danger fa-15x"/></a>
-                <a onclick="{onEditChoice}"><i class="fa fa-pencil-square-o fa-15x"/></a>
-            </div>
-            <div show="{editing}">
-                <a onclick="{cancelEditChoice}" class="danger">
-                    <i class="fa fa-remove fa-15x"/>
-                </a>
-                <button class="icon" type="submit" onclick="{prepareSave}">
-                    <i class="fa fa-check fa-15x"/>
-                </button>
-            </div>
-        </div>
-        <div ref="edit_choice" id="edit_choice_{number}" class="choice-container">
-            <div class="choice-container-child">
-                <label class="choice-wide" for="choice{number}">{__.label} {number + 1}</label>
-                <label class="choice-wider" if="{number == 0}">{__.description}</label>
-                <label class="choice-wider" if="{number > 0}"/>
-            </div>
-            <div class="choice-container-child">
-                <input type="hidden" name="id{number}" value="{choice.id}">
-                <div class="choice-inputs">
-                    <div class="choice-wide choice-date">
-                        <input type="hidden" ref="choice" name="choice{number}" id="choice{number}"
-                               value="{choice.choiceValue}">
-                        <input type="date" ref="date" name="date{number}" id="date{number}" value="{choice.date}"
-                               class="choice-wide"
-                               disabled="{!edit || (mode==='edit' && !editing && choice.choiceValue)?'disabled':''}">
-                        <i class="fa fa-clock-o fa-15x"/>
-                        <input type="checkbox" ref="timed" checked="{timed?'checked':''}" onclick="{toggleTimed}"
-                               disabled="{!edit || (mode==='edit' && !editing)?'disabled':''}">
-                        <input type="time" ref="time" name="time{number}" id="time{number}" value="{choice.time}"
-                               disabled="{!edit || (mode==='edit' && !editing) || !timed?'disabled':''}"
-                               required="{timed?'required':''}">
-                    </div>
-                    <input type="text" ref="description" name="description{number}" value="{choice.description}"
-                           disabled="{!edit || (mode==='edit' && !editing && choice.choiceValue)?'disabled':''}"
-                           class="choice-wider">
-                </div>
-            </div>
-        </div>
-    </div>
-
-    <script type="es6">
-        this.installBundle(this.opts.session, "poll_choices");
-        this.number = parseInt(this.opts.number, 10);
-        this.mode = this.opts.mode;
-        this.edit = this.opts.mode === "create" || this.opts.mode === "edit";
-        this.choice = this.opts.choice;
-
-        this.opts.emitter.on("prepareSave", () => {
-            let choiceValue = this.refs.date.value;
-            if (choiceValue && this.timed && this.refs.time.value) {
-                choiceValue += "T" + this.refs.time.value;
-            }
-            this.refs.choice.value = choiceValue;
-        });
-
-        let choiceValue = this.choice.choiceValue;
-
-        if (choiceValue) {
-            let index = choiceValue.indexOf("T");
-            if (index === -1) {
-                this.choice.date = choiceValue;
-                this.timed = false;
-            } else {
-                this.choice.date = choiceValue.substring(0, index);
-                this.choice.time = choiceValue.substring(index + 1);
-                this.timed = true;
-            }
-            this.logger.info("init choice: (" + this.timed + ")");
-            this.logger.info(this.choice);
-        }
-
-        this.on("mount", () => {
-            if (this.number === 0 || this.mode === "edit") {
-                this.refs.choice.required = "required";
-            }
-            if (this.mode === "edit") {
-                this.refs.edit_choice.classList.add("choice-view");
-            }
-        });
-
-        this.toggleTimed = () => {
-            this.timed = !this.timed;
-        };
-
-        this.prepareSave = () => {
-            let date = this.refs.choice.value;
-            let time = this.refs.time.value;
-            let choiceValue2 = date;
-            if (this.timed) {
-                choiceValue2 += "T" + time;
-            }
-            this.$choice = {
-                date: date,
-                time: time,
-                choiceValue: choiceValue2,
-                description: this.refs.description.value
-            };
-        };
-
-        this.onEditChoice = () => {
-            this.editing = true;
-            let ref = this.refs.edit_choice;
-            ref.classList.add("choice-edit");
-            ref.classList.remove("choice-view");
-            this.trigger("editChoice", this.number);
-            Object.assign(this.$choice = {}, this.choice);
-            this.logger.info(this.$choice);
-        };
-
-        this.cancelEditChoice = () => {
-            if (this.editing) {
-                let ref = this.refs.edit_choice;
-                ref.classList.remove("choice-edit");
-                ref.classList.add("choice-view");
-                Object.assign(this.choice, this.$choice);
-                this.logger.info(this.choice);
-                this.refs.choice.value = this.choice.date;
-                this.refs.time.value = this.choice.time;
-                this.timed = !!this.choice.time;
-                this.refs.description.value = this.choice.description;
-
-            }
-            this.editing = false;
-            this.trigger("cancelEditChoice", this.number);
-        };
-
-        this.deleteChoice = () => {
-            if (this.confirm("Delete choice?")) {
-                this.trigger("deleteChoice", this.number);
-            }
-        };
-
-    </script>
-
-    <style>
-
-        .fa-15x {
-            font-size: 1.5em;
-        }
-
-        .icon {
-            border-style: none;
-            background-color: white;
-            cursor: pointer;
-            color: #13a2ff;
-        }
-
-        .danger {
-            color: red;
-        }
-
-        .choice-wide {
-            width: 440px;
-        }
-
-        .choice-wider {
-            width: 640px;
-        }
-
-        .choice-actions {
-            padding-right: 5px;
-        }
-
-        .choice-body {
-            display: flex;
-            flex-direction: row;
-            justify-content: flex-start;
-            align-items: center;
-        }
-
-        .choice-container {
-            display: flex;
-            flex-direction: column;
-            justify-content: flex-start;
-            align-items: center;
-        }
-
-        .choice-container-child {
-            display: flex;
-        }
-
-        .choice-inputs {
-            display: flex;
-            flex-direction: row;
-        }
-
-        .choice-date {
-            display: flex;
-            flex-direction: row;
-        }
-
-        .choice-date > i {
-            padding-top: 5px;
-        }
-
-        .choice-edit {
-            border: 2px solid #13a2ff;
-        }
-
-        .choice-view {
-            border: 2px solid white;
-        }
-
-        input[type=date] {
-            width: 165px;
-        }
-
-        input[type=time] {
-            width: 130px;
-        }
-
-        input[type=checkbox] {
-            width: 20px;
-        }
-
-        input[disabled=disabled] {
-            cursor: not-allowed;
-        }
-
-    </style>
-</ChoiceDate>
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 068a991e..2130a4e1 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
@@ -64,6 +64,11 @@ require("./Choice.tag.html");
     </script>
 
     <style>
+
+        h4 {
+            margin-bottom: 1em;
+        }
+
         .choice.c-field {
             padding: 0 0 0 1px;
         }
@@ -73,5 +78,9 @@ require("./Choice.tag.html");
             width: 90%;
         }
 
+        .choices-actions {
+            margin-top: 1em;
+        }
+
     </style>
 </Choices>
diff --git a/pollen-ui-riot-js/src/main/web/tag/poll/Description.tag.html b/pollen-ui-riot-js/src/main/web/tag/poll/Description.tag.html
index c71b2f23..956c27ae 100644
--- a/pollen-ui-riot-js/src/main/web/tag/poll/Description.tag.html
+++ b/pollen-ui-riot-js/src/main/web/tag/poll/Description.tag.html
@@ -19,45 +19,55 @@
  * #L%
  */
 <Description>
-    <div class="o-form-element">
-        <label class="c-label" for="title">{__.title}</label>
-        <input ref="title"
-               type="text"
-               class="c-field"
-               required
-               name="title"
-               value="{form.model.title}"
-               disabled={opts.form.model.isClosed}
-               placeholder="{__.titlePlaceHolder}"/>
-    </div>
-    <div class="o-form-element">
-      <label class="c-label" for="description">{__.description}</label>
-      <textarea ref="description"
-                class="c-field"
-                name="description"
-                disabled={opts.form.model.isClosed}
-                placeholder="{__.descriptionPlaceHolder}">{form.model.description}</textarea>
-    </div>
-    <div class="o-form-element">
-        <label class="c-label" for="name">{__.name}</label>
-        <input ref="name"
-               type="text"
-               class="c-field"
-               required
-               name="name"
-               value="{form.model.creatorName}"
-               disabled={opts.form.model.isClosed}
-               placeholder="{__.namePlaceHolder}"/>
+
+    <div class="description-part">
+        <h4><i class="fa fa-info-circle"></i> {__.info}</h4>
+
+        <div class="o-form-element">
+            <label class="c-label" for="title">{__.title}</label>
+            <input ref="title"
+                   type="text"
+                   class="c-field c-field--label"
+                   required
+                   name="title"
+                   value="{form.model.title}"
+                   disabled={opts.form.model.isClosed}
+                   placeholder="{__.titlePlaceHolder}"/>
+        </div>
+        <div class="o-form-element">
+          <label class="c-label" for="description">{__.description}</label>
+          <textarea ref="description"
+                    class="c-field c-field--label"
+                    name="description"
+                    disabled={opts.form.model.isClosed}
+                    placeholder="{__.descriptionPlaceHolder}">{form.model.description}</textarea>
+        </div>
     </div>
-    <div class="o-form-element">
-        <label class="c-label" for="email">{__.email}</label>
-        <input ref="email"
-               type="email"
-               class="c-field"
-               name="email"
-               value="{form.model.creatorEmail}"
-               disabled={opts.form.model.isClosed}
-               placeholder="{__.emailPlaceHolder}"/>
+
+    <div class="description-part">
+        <h4><i class="fa fa-user-circle"></i> {__.user}</h4>
+
+        <div class="o-form-element">
+            <label class="c-label" for="name">{__.name}</label>
+            <input ref="name"
+                   type="text"
+                   class="c-field c-field--label"
+                   required
+                   name="name"
+                   value="{form.model.creatorName}"
+                   disabled={opts.form.model.isClosed}
+                   placeholder="{__.namePlaceHolder}"/>
+        </div>
+        <div class="o-form-element">
+            <label class="c-label" for="email">{__.email}</label>
+            <input ref="email"
+                   type="email"
+                   class="c-field c-field--label"
+                   name="email"
+                   value="{form.model.creatorEmail}"
+                   disabled={opts.form.model.isClosed}
+                   placeholder="{__.emailPlaceHolder}"/>
+        </div>
     </div>
 
     <script type="es6">
@@ -73,20 +83,17 @@
     </script>
 
     <style>
-        @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;
-            }
+        description {
+            display: flex;
+            flex-wrap: wrap;
+            justify-content: space-around;
+        }
+
+        .description-part {
+            flex-grow: 1;
+            max-width: 500px;
+            padding: 0 5px;
         }
 
     </style>
diff --git a/pollen-ui-riot-js/src/main/web/tag/poll/EditPoll.tag.html b/pollen-ui-riot-js/src/main/web/tag/poll/EditPoll.tag.html
index e9dc00e7..f3609140 100644
--- a/pollen-ui-riot-js/src/main/web/tag/poll/EditPoll.tag.html
+++ b/pollen-ui-riot-js/src/main/web/tag/poll/EditPoll.tag.html
@@ -26,26 +26,34 @@ require("./Summary.tag.html");
 require("../components/HumanInput.tag.html");
 
 <EditPoll>
-    <form show={loaded} ref="poll" class="form">
-        <HumanInput onsubmit="{submitStep}"/>
-        <div class="tabs tabs-one-small">
-            <div each={step, index in form.steps} class="tab {selected : !showSummary && form.step === index}">
-                <button type="submit" if="{form.step > index || !form.creation}" class="{cursor-pointer: !form.creation}" onclick="{goto(index)}">
-                    {getStepLabel(step)}
-                </button>
-                <span if="{form.step <= index && form.creation}" class="cursor-pointer">
-                    {getStepLabel(step)}
-                </span>
-            </div>
-            <div if="{showSummary}" class="tab selected">
-                <button type="submit" class="cursor-pointer">
-                    {__.summaryTab}
-                </button>
+
+    <form show={loaded} ref="poll" onsubmit="{submitStep}" class="container">
+
+        <h1 class="no-border">
+          <span if="{form.creation}">{__.newPoll}</span>
+          <span if="{!form.creation}">{form.model.title}</span>
+        </h1>
+
+
+        <div class="tabs tabs-one-small below-h1">
+            <div class="tab-container">
+                <div each={step, index in form.steps} class="tab {selected : !showSummary && form.step === index}">
+                    <button type="submit" if="{form.step > index || !form.creation}" class="cursor-pointer" onclick="{goto(index)}">
+                        {getStepLabel(step)}
+                    </button>
+                    <span if="{form.step <= index && form.creation}" class="{cursor-pointer: !form.creation}">
+                        {getStepLabel(step)}
+                    </span>
+                </div>
+                <div if="{showSummary}" class="tab selected">
+                    <button type="submit" class="cursor-pointer">
+                        {__.summaryTab}
+                    </button>
+                </div>
             </div>
         </div>
 
-        <div class="container">
-
+        <div class="form">
             <Description if={!showSummary && form.step === 0} form={form}/>
             <Choices     if={!showSummary && form.step === 1} form={form}/>
             <Settings    if={!showSummary && form.step === 2} form={form}/>
@@ -53,36 +61,33 @@ require("../components/HumanInput.tag.html");
             <Summary     if={showSummary} form={form}/>
 
             <div class="actions" if={!showSummary}>
-                <div class="actions-left">
-                    <a class="c-button c-button--ghost-info"
-                       href={form.creation ? "#/home" : ("#/poll/" + form.model.id + "/vote/" + form.model.permission)}>
-                        <i class="fa fa-undo" aria-hidden="true"></i>
-                        {__.cancel}
-                    </a>
-                    <button type={form.creation || form.model.isClosed ? "button" : "submit"} if={form.step > 0}
-                            class="c-button c-button--ghost-info"
-                            onclick={previousStep}>
-                        <i class="fa fa-chevron-left" aria-hidden="true"></i>
-                        {__.previous}
-                    </button>
-                </div>
-                <div class="actions-right">
-                    <button if={form.step < form.steps.length - 1}
-                            type="submit"
-                            class="c-button c-button--info"
-                            onclick={nextStep}>
-                        {__.next}
-                        <i class="fa fa-chevron-right " aria-hidden="true"></i>
-                    </button>
+                <a class="c-button c-button--ghost"
+                   href={form.creation ? "#/home" : ("#/poll/" + form.model.id + "/vote/" + form.model.permission)}>
+                    <i class="fa fa-undo" aria-hidden="true"></i>
+                    {__.cancel}
+                </a>
+                <button type={form.creation || form.model.isClosed ? "button" : "submit"} if={form.step > 0}
+                        class="c-button c-button--ghost"
+                        onclick={previousStep}>
+                    <i class="fa fa-chevron-left" aria-hidden="true"></i>
+                    {__.previous}
+                </button>
+                <button if={form.step < form.steps.length - 1}
+                        type="submit"
+                        class="c-button c-button--ghost-info"
+                        onclick={nextStep}>
+                    {__.next}
+                    <i class="fa fa-chevron-right " aria-hidden="true"></i>
+                </button>
 
-                    <button type="submit"
-                            if={!form.creation || form.step === form.steps.length - 1}
-                            class="c-button c-button--info"
-                            show={!form.model.isClosed}
-                            onclick={savePoll}>
-                        <i class="fa fa-{form.creation ? 'plus' : 'check'}" aria-hidden="true"></i>
-                        {__.save}
-                    </button>
+                <button type="submit"
+                        if={!form.creation || form.step === form.steps.length - 1}
+                        class="c-button c-button--info"
+                        show={!form.model.isClosed}
+                        onclick={savePoll}>
+                    <i class="fa fa-{form.creation ? 'plus' : 'check'}" aria-hidden="true"></i>
+                    {__.save}
+                </button>
                 </div>
             </div>
         </div>
@@ -130,6 +135,7 @@ require("../components/HumanInput.tag.html");
                 this.tags.voters.submit();
             }
             if (this.callAfterSubmit) {
+            console.log("callAfterSubmit");
                 this.callAfterSubmit();
                 this.update();
             }
@@ -148,7 +154,7 @@ require("../components/HumanInput.tag.html");
                 if (this.form.creation) {
                     this.form.create().then(() => {
                         let route = require("riot-route");
-                        route("poll/" + this.form.model.id + "/summary/" + this.form.model.permission + "/creation");
+                        route("poll/" + this.form.model.id + "/summary/" + this.form.model.permission);
                         this.bus.trigger("successMessage", this._l("creationSuccess", this.form.model.title));
                     }, errorFn);
 
@@ -173,4 +179,18 @@ require("../components/HumanInput.tag.html");
 
     </script>
 
+    <style>
+
+        .form {
+            padding: 30px 20px 60px 20px;
+        }
+
+        .actions {
+            position: absolute;
+            bottom: 0;
+            left: 0;
+            width: 100%;
+        }
+    </style>
+
 </EditPoll>
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 8017a2f3..64eed951 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
@@ -7,94 +7,111 @@ require("../popup/QrCodeButton.tag.html");
 require("./Report.tag.html");
 <Poll>
 
-    <div class="tabs">
-        <div class={tab : true, selected : selectedTab === "votes"}>
-            <a href="#poll/{poll.id}/vote{poll.getPermission()?'/' + poll.getPermission() : ''}">
-                <i class="fa fa-thumbs-o-up fa-flip-horizontal fa-15x"></i> {__.votes} ({poll.voteCount})
-            </a>
-        </div>
-        <div class={tab : true, selected : selectedTab === "results"}>
-            <a href="#poll/{poll.id}/result{poll.getPermission()?'/' + poll.getPermission() : ''}">
-                <i class="fa fa-trophy fa-15x"></i> {__.results}
-            </a>
-        </div>
-
-        <div if="{poll.permission}"
-             class="poll-options dropdown">
-            <a class="header-link"><i class="fa fa-bars"/></a>
-            <div class="dropdown-content">
-                <a href="#/poll/{poll.id}/edit/{poll.permission}">
-                    <i class="link fa fa-pencil-square-o"/>
-                    {__.editPoll}
-                </a>
-                <a if="{!poll.isClosed}" onclick="{closePoll}">
-                    <i class="link fa fa-close"/>
-                    {__.closePoll}</a>
-                <a if="{poll.isClosed}" onclick="{reopenPoll}">
-                    <i class="link fa fa-play"/>
-                    {__.reopenPoll}</a>
-                <a href="#/poll/{poll.id}/clone/{poll.permission}">
-                  <i class="link fa fa-clone"/>
-                  {__.clonePoll}
-                </a>
-                <a onclick="{deletePoll}">
-                    <i class="link fa fa-trash"/>
-                    {__.deletePoll}
-                </a>
-            </div>
-        </div>
-    </div>
-
     <div class="container">
 
-        <div class="poll-info">
-            <h1>
-                <QrCodeButton if={poll.pollType === "FREE"} value="{window.location.origin}{window.location.pathname}#poll/{poll.id}/vote"/>
-                {poll.title}
-                <Report target={poll}/>
-              <a href="{session.configuration.endPoint}/v1/polls/{poll.id}/feed?permission={poll.permission}" class="fa fa-rss-square" aria-hidden="true"></a>
-            </h1>
-
-            <h3>{poll.description}</h3>
-
-            <div>
-                {__.createdBy} {poll.creatorName} {__.createdIn} {formatDate(poll.createDate)}
+        <h1 class="no-border">
+          <span class="title">{poll.title}</span>
+            <QrCodeButton if="{poll.pollType === 'FREE'}" value="{window.location.origin}{window.location.pathname}#poll/{poll.id}/vote"/>
+            <a href="{session.configuration.endPoint}/v1/polls/{poll.id}/feed?permission={poll.permission}" class="c-button c-button--info">
+                <i class="fa fa-rss" aria-hidden="true"></i>
+            </a>
+            <Report target={poll}/>
+        </h1>
+
+        <div class="tabs below-h1">
+            <div class="tab-container">
+                <div class="tab {selected : selectedTab === 'votes'}">
+                    <a href="#poll/{poll.id}/vote{poll.getPermission()?'/' + poll.getPermission() : ''}">
+                        <i class="fa fa-thumbs-o-up fa-flip-horizontal fa-15x"></i> {__.votes} ({poll.voteCount})
+                    </a>
+                </div>
+                <div class="tab {selected : selectedTab === 'results'}">
+                    <a href="#poll/{poll.id}/result{poll.getPermission()?'/' + poll.getPermission() : ''}">
+                        <i class="fa fa-trophy fa-15x"></i> {__.results}
+                    </a>
+                </div>
             </div>
 
-            <div if={poll.status === "CREATED" && poll.choiceAddAllowed}>
-                  {__.beginChoiceFrom} {formatDate(poll.beginChoiceDate)}
-            </div>
-            <div if={poll.status === "CREATED"}>
-                {__.votingFrom} {formatDate(poll.beginDate)}
-                <span if={poll.endDate}> {__votingFromTo} {formatDate(poll.endDate)}</span>
+            <div if="{poll.permission}"
+                 class="poll-options dropdown">
+                <a class="header-link"><i class="fa fa-bars"/></a>
+                <div class="dropdown-content">
+                    <a href="#/poll/{poll.id}/edit/{poll.permission}">
+                        <i class="link fa fa-pencil-square-o"/>
+                        {__.editPoll}
+                    </a>
+                    <a if="{!poll.isClosed}" onclick="{closePoll}">
+                        <i class="link fa fa-close"/>
+                        {__.closePoll}</a>
+                    <a if="{poll.isClosed}" onclick="{reopenPoll}">
+                        <i class="link fa fa-play"/>
+                        {__.reopenPoll}</a>
+                    <a href="#/poll/{poll.id}/clone/{poll.permission}">
+                      <i class="link fa fa-clone"/>
+                      {__.clonePoll}
+                    </a>
+                    <a onclick="{deletePoll}">
+                        <i class="link fa fa-trash"/>
+                        {__.deletePoll}
+                    </a>
+                </div>
             </div>
+        </div>
 
-            <div if={poll.status === "ADDING_CHOICES"}>
-                {__.beginChoiceTo} {formatDate(poll.endChoiceDate)}
+        <div class="main-content">
+            <div class="poll-info">
+
+                <div class="left-icon">
+                  <i class="fa fa-clock-o"></i>
+                  <p>{__.dateVotes}</p>
+                  <p>{__.dateFrom} <span class="brand">{formatDate(poll.beginDate)}</span></p>
+                  <p if={poll.endDate}> {__.dateTo} <span class="brand">{formatDate(poll.endDate)}</span></p>
+                </div>
+
+                <div class="left-icon" if={poll.choiceAddAllowed}>
+                  <i class="fa fa-check-square"></i>
+                  <p>{__.dateAddChoices}</p>
+                  <p>{__.dateFrom} <span class="brand">{formatDate(poll.beginChoiceDate)}</span></p>
+                  <p if={poll.endDate}> {__.dateTo} <span class="brand">{formatDate(poll.endChoiceDate)}</span></p>
+                </div>
+
+                <div class="cursor-pointer left-icon" if="{poll.voteCountingTypeValue}" onclick="{toggleHelp}">
+                    <i class="fa fa-cog" aria-hidden="true"></i>
+                    <p>
+                      {__.voteCountingType} <span class="brand">{poll.voteCountingTypeValue.name}</span>
+                      <i class="info-label fa fa-question-circle" aria-hidden="true"></i>
+                    </p>
+                </div>
+
+                <div class="left-icon">
+                    <i class="fa fa-user-circle"></i>
+                  <p>{__.createdBy} <span class="brand">{poll.creatorName}</span></p>
+                </div>
+
+                <div class="left-icon">
+                    <i class="fa fa-envelope"></i>
+                    <p if={poll.voteCount === 0}>{__.noVote}</p>
+                    <p if={poll.voteCount === 1}><span class="brand">1</span> {__.vote}</p>
+                    <p if={poll.voteCount > 1}><span class="brand">{poll.voteCount}</span> {__.votes}</p>
+                </div>
+
+                <div class="left-icon" if="{poll.pollType === 'RESTRICTED'}">
+                    <i class="fa fa-users"></i>
+                    <p><span class="brand">{poll.participantCount}</span> {__.subscribers}</p>
+                    <p><span class="brand">{((poll.voteCount / poll.participantCount) * 100).toFixed(2)} %</span> {__.participation}</p>
+                </div>
             </div>
 
-            <div class="cursor-pointer" if="{poll.voteCountingTypeValue}" onclick="{toggleHelp}">
-                {__.voteCountingType} {poll.voteCountingTypeValue.name}
-                <span class="info-label">
-                  <i class="fa fa-question-circle" aria-hidden="true"></i>
-              </span>
+            <div class="poll-description left-icon" if="{poll.description}">
+                <i class="fa fa-info-circle"></i>
+                <p>{poll.description}</p>
             </div>
 
-            <div if={poll.status === "VOTING" || poll.status === "CLOSED"}>
-                 <span if={poll.voteCount === 0}>{__.noVote}</span>
-                 <span if={poll.voteCount === 1}>1 {__.vote}</span>
-                 <span if={poll.voteCount > 1}>{poll.voteCount} {__.votes}</span>
-                 <span if={poll.pollType === "RESTRICTED"}>
-                     - {poll.participantCount} {__.subscribers}
-                     - {((poll.voteCount / poll.participantCount) * 100).toFixed(2)} % {__.participation}</span>
-                 <span if={poll.status === "VOTING" && poll.endDate}> {__.votingTo} {formatDate(poll.endDate)}</span>
-                 <span if={poll.status === "CLOSED" && poll.endDate}> {__.closedFrom} {formatDate(poll.endDate)}</span>
-            </div>
-        </div>
+            <Votes if={selectedTab === "votes"}/>
 
-        <Votes if={selectedTab === "votes"}/>
+            <Results if={selectedTab === "results"}/>
 
-        <Results if={selectedTab === "results"}/>
+        </div>
 
         <Comments/>
     </div>
@@ -167,10 +184,6 @@ require("./Report.tag.html");
     </script>
     <style>
 
-        .poll-info {
-            text-align: center;
-        }
-
         /* The container <div> - needed to position the dropdown content */
         .dropdown {
             position: relative;
@@ -201,21 +214,53 @@ require("./Report.tag.html");
             z-index: 1;
         }
 
-        .container {
-            padding-bottom: 1.2em;
+        .info-label {
+            vertical-align: text-top;
         }
 
-        .poll-urls .o-form-element {
-            padding: 0.3em 0;
+        h1 {
+            display: flex;
         }
 
-        .info-label {
-            vertical-align: text-top;
+        h1 .title {
+            flex-grow: 1;
         }
 
-        h1 QrCodeButton {
+        h1 .c-button {
             font-size: 1rem;
-            font-weight: normal;
+            margin: 0 2px;
+        }
+
+        .main-content {
+            padding: 20px 20px 40px 20px;
+        }
+
+        .poll-info {
+            display: flex;
+            flex-direction: row;
+            flex-wrap: wrap;
+            color: var(--poll-info);
+        }
+
+        .poll-info > div {
+            padding: 15px 30px;
+        }
+
+        .poll-info p {
+            margin-bottom: 5px;
+        }
+
+        .poll-description {
+            padding: 10px 30px;
+            color: var(--poll-info);
+        }
+
+        .left-icon > i {
+            float: left;
+        }
+
+        .left-icon p {
+            margin-left: 20px;
         }
 
     </style>
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 9a4c60db..9cb22265 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
@@ -4,7 +4,7 @@ require("../components/HumanInput.tag.html");
 <Polls>
     <div class="container" >
         <div show="{loaded}">
-            <h1 class="c-heading">{__[opts.method]}</h1>
+            <h1>{__[opts.method]}</h1>
 
             <div show={polls.length > 0} >
                 <div class="o-form-element sort">
diff --git a/pollen-ui-riot-js/src/main/web/tag/poll/Settings.tag.html b/pollen-ui-riot-js/src/main/web/tag/poll/Settings.tag.html
index 2b44bdef..cb9051b0 100644
--- a/pollen-ui-riot-js/src/main/web/tag/poll/Settings.tag.html
+++ b/pollen-ui-riot-js/src/main/web/tag/poll/Settings.tag.html
@@ -21,73 +21,75 @@
 require("../components/date-time-picker.tag.html");
 
 <Settings>
-    <div class="form-section"
-         show={form.creation}>
-        <div class="section-title">
-            <h4>{__.basic_usage}</h4>
+    <div class="form-section" show={form.creation}>
+        <h4><i class="fa fa-cogs"></i> {__.basic_usage}</h4>
+        <div class="o-form-element">
+            <label class="c-toggle c-toggle--info">
+                {__.use_basic_usage}
+                <input type="checkbox"
+                       checked={!showOptions}
+                       onclick={toggleShowOptions}
+                       disabled={opts.form.model.isClosed}>
+                <div class="c-toggle__track">
+                    <div class="c-toggle__handle"></div>
+                </div>
+            </label>
         </div>
-        <div class="section-content">
-            <div class="o-form-element">
-                <label class="c-toggle c-toggle--info">
-                    {__.use_basic_usage}
-                    <input type="checkbox"
-                           checked={!showOptions}
-                           onclick={toggleShowOptions}
-                           disabled={opts.form.model.isClosed}>
-                    <div class="c-toggle__track">
-                        <div class="c-toggle__handle"></div>
-                    </div>
-                </label>
-            </div>
-            <div class="c-alert c-alert--info" if={!showOptions}>
-                {__.basic_usage_detail}
-                <ul>
-                    <li>{__.basic_usage_detail_type}</li>
-                    <li>{__.basic_usage_detail_multi_choices}</li>
-                    <li>{__.basic_usage_detail_opening}</li>
-                    <li>{__.basic_usage_detail_closing}</li>
-                    <li>{__.basic_usage_detail_comments}</li>
-                    <li>{__.basic_usage_detail_results}</li>
-                    <li>{__.basic_usage_detail_notifications}</li>
-                </ul>
-            </div>
+        <div class="c-alert c-alert--info" if={!showOptions}>
+            {__.basic_usage_detail}
+            <ul>
+                <li>{__.basic_usage_detail_type}</li>
+                <li>{__.basic_usage_detail_multi_choices}</li>
+                <li>{__.basic_usage_detail_opening}</li>
+                <li>{__.basic_usage_detail_closing}</li>
+                <li>{__.basic_usage_detail_comments}</li>
+                <li>{__.basic_usage_detail_results}</li>
+                <li>{__.basic_usage_detail_notifications}</li>
+            </ul>
         </div>
     </div>
-    <div show={showOptions || !form.creation}>
-        <hr>
-        <div class="form-section">
-          <div class="section-title">
-            <h4>{__.nav_voteCountingType}</h4>
-          </div>
-          <div class="section-content">
-            <div class="o-form-element">
-              <label class="c-label">
-                {__.voteCountingType}
-              </label>
-              <select class="c-field"
-                      ref="voteCountingType"
-                      value={form.model.voteCountingType}
-                      disabled={form.hasVotes || opts.form.model.isClosed}
-                      onchange={voteCountingTypeChanged}>
-                <option each={type in form.voteCountingTypes}
-                        value={type.id}>
-                  {type.name}
-                </option>
-              </select>
-              <p>
-                <i class="fa fa-question-circle" aria-hidden="true"></i>
-                <span ref="voteCountingTypeHelper"></span>
-              </p>
-            </div>
-          </div>
-        </div>
-        <hr>
-        <div class="form-section">
-            <div class="section-title">
-                <h4>{__.nav_choices}</h4>
+    <div class="settings-options {with-default: form.creation}" show={showOptions || !form.creation}>
+
+        <div class="settings-options-row">
+            <div class="form-section">
+                <h4><i class="fa fa-cog"></i> {__.nav_voteCountingType}</h4>
+                <div class="o-form-element select-or-radio">
+                    <fieldset class="o-fieldset choice-radio"
+                              disabled={form.hasVotes || opts.form.model.isClosed}>
+                        <legend class="o-fieldset__legend">{__.voteCountingType}</legend>
+                        <label each={type in form.voteCountingTypes}
+                               class="c-field c-field--choice"
+                               title="{type.shortHelper}">
+                            <input type="radio"
+                                   name="voteCountingTypeRadios"
+                                   ref="voteCountingType{type.id}"
+                                   checked="{type && type.id.toString() === form.model.voteCountingType}"
+                                   onchange={voteCountingTypeChanged}/>
+                            <span>{type.name}</span>
+                        </label>
+                    </fieldset>
+
+                    <select class="c-field choice-select"
+                            ref="voteCountingType"
+                            value={form.model.voteCountingType}
+                            disabled={form.hasVotes || opts.form.model.isClosed}
+                            onchange={voteCountingTypeChanged}>
+                        <option each={type in form.voteCountingTypes}
+                                value={type.id}
+                                title="{type.shortHelper}">
+                          {type.name}
+                        </option>
+                    </select>
+
+                    <div class="help-selected">
+                      <i class="fa fa-info-circle" aria-hidden="true"></i>
+                      <span ref="voteCountingTypeHelper"></span>
+                    </div>
+                </div>
             </div>
-            <div class="section-content">
-                <div class="o-form-element">
+            <div class="form-section">
+                <h4><i class="fa fa-check-square"></i> {__.nav_choices}</h4>
+                    <div class="o-form-element">
                     <label class="c-toggle c-toggle--info">
                         {__.addChoices}
                         <input type="checkbox"
@@ -146,7 +148,7 @@ require("../components/date-time-picker.tag.html");
                     <input name="maxChoiceNumber"
                            id="maxChoiceNumber"
                            ref="maxChoiceNumber"
-                           class="c-field"
+                           class="c-field c-field--label"
                            disabled={form.hasVotes || opts.form.model.isClosed}
                            value={form.model.maxChoiceNumber}
                            min="{form.model.limitChoices ? 1 : 0}" max="{form.choices.length}"
@@ -154,12 +156,10 @@ require("../components/date-time-picker.tag.html");
                 </div>
             </div>
         </div>
-        <hr>
-        <div class="form-section">
-            <div class="section-title">
-                <h4>{__.nav_votes}</h4>
-            </div>
-            <div class="section-content">
+
+        <div class="settings-options-row">
+            <div class="form-section">
+                <h4><i class="fa fa-envelope"></i> {__.nav_votes}</h4>
                 <div class="o-form-element">
                     <label class="c-toggle c-toggle--info">
                         {__.votePeriod}
@@ -203,7 +203,7 @@ require("../components/date-time-picker.tag.html");
                     <label class="c-label">
                         {__.voteVisibility}
                     </label>
-                    <select class="c-field"
+                    <select class="c-field c-field--label"
                             ref="voteVisibility"
                             disabled={form.hasVotes || opts.form.model.isClosed}
                             value={form.model.voteVisibility}>
@@ -229,18 +229,13 @@ require("../components/date-time-picker.tag.html");
                     </label>
                 </div>
             </div>
-        </div>
-        <hr>
-        <div class="form-section">
-            <div class="section-title">
-                <h4>{__.nav_result}</h4>
-            </div>
-            <div class="section-content">
+            <div class="form-section">
+                <h4><i class="fa fa-trophy"></i> {__.nav_result}</h4>
                 <div class="o-form-element">
                     <label class="c-label">
                         {__.resultVisibility}
                     </label>
-                    <select class="c-field"
+                    <select class="c-field c-field--label"
                             ref="resultVisibility"
                             disabled={form.hasVotes || opts.form.model.isClosed}
                             value={form.model.resultVisibility}>
@@ -266,17 +261,15 @@ require("../components/date-time-picker.tag.html");
                 </div>
             </div>
         </div>
-        <hr>
-        <div class="form-section">
-            <div class="section-title">
-                <h4>{__.nav_comments}</h4>
-            </div>
-            <div class="section-content">
+
+        <div class="settings-options-row">
+            <div class="form-section">
+                <h4><i class="fa fa-comments"></i> {__.nav_comments}</h4>
                 <div class="o-form-element">
                     <label class="c-label">
                         {__.commentVisibility}
                     </label>
-                    <select class="c-field"
+                    <select class="c-field c-field--label"
                             ref="commentVisibility"
                             disabled={form.hasVotes || opts.form.model.isClosed}
                             value={form.model.commentVisibility}>
@@ -286,50 +279,48 @@ require("../components/date-time-picker.tag.html");
                     </select>
                 </div>
             </div>
-        </div>
-      <hr>
-      <div class="form-section">
-        <div class="section-title">
-          <h4>{__.nav_notification}</h4>
-        </div>
-        <div class="section-content">
-          <div class="o-form-element">
-            <label class="c-toggle c-toggle--info">
-              {__.voteNotification}
-              <input type="checkbox"
-                     ref="voteNotification"
-                     checked={form.model.voteNotification}
-                     disabled={!form.model.creatorEmail || opts.form.model.isClosed}>
-              <div class="c-toggle__track">
-                <div class="c-toggle__handle"></div>
-              </div>
-            </label>
-          </div>
-          <div class="o-form-element">
-            <label class="c-toggle c-toggle--info">
-              {__.notifyMeBeforePollEnds}
-              <input type="checkbox"
-                     checked={notifyMeBeforePollEnds}
-                     onclick={toggleNotifyMeBeforePollEnds}
-                     disabled={disableNotifyMeBeforePollEnds || opts.form.model.isClosed}>
-              <div class="c-toggle__track">
-                <div class="c-toggle__handle"></div>
-              </div>
-            </label>
-            <div if={notifyMeBeforePollEnds}>
-              <label class="c-label">
-                {__.notifyMeHoursBeforePollEnds}
-              </label>
-              <input type="number"
-                     class="c-field"
-                     ref="notifyMeHoursBeforePollEnds"
-                     value={form.model.notifyMeHoursBeforePollEnds}
-                     min="{notifyMeBeforePollEnds ? 1 : 0}"
-                     disabled={opts.form.model.isClosed}>
+
+            <div class="form-section">
+                <h4><i class="fa fa-paper-plane"></i> {__.nav_notification}</h4>
+                <div class="o-form-element">
+                    <label class="c-toggle c-toggle--info">
+                        {__.voteNotification}
+                        <input type="checkbox"
+                               ref="voteNotification"
+                               checked={form.model.voteNotification}
+                               disabled={!form.model.creatorEmail || opts.form.model.isClosed}>
+                        <div class="c-toggle__track">
+                            <div class="c-toggle__handle"></div>
+                        </div>
+                        <i class="fa fa-question-circle cursor-help warning" if="{!form.model.creatorEmail}" title="{__.voteNotification_disabled}"></i>
+                    </label>
+                </div>
+                <div class="o-form-element">
+                    <label class="c-toggle c-toggle--info">
+                        {__.notifyMeBeforePollEnds}
+                        <input type="checkbox"
+                               checked={notifyMeBeforePollEnds}
+                               onclick={toggleNotifyMeBeforePollEnds}
+                               disabled={disableNotifyMeBeforePollEnds || opts.form.model.isClosed}>
+                        <div class="c-toggle__track">
+                            <div class="c-toggle__handle"></div>
+                        </div>
+                        <i class="fa fa-question-circle cursor-help warning" if="{disableNotifyMeBeforePollEnds}" title="{__.notifyMeBeforePollEnds_disabled}"></i>
+                    </label>
+                    <div if={notifyMeBeforePollEnds}>
+                        <label class="c-label">
+                            {__.notifyMeHoursBeforePollEnds}
+                        </label>
+                        <input type="number"
+                               class="c-field c-field--label"
+                               ref="notifyMeHoursBeforePollEnds"
+                               value={form.model.notifyMeHoursBeforePollEnds}
+                               min="{notifyMeBeforePollEnds ? 1 : 0}"
+                               disabled={opts.form.model.isClosed}>
+                    </div>
+                </div>
             </div>
-          </div>
         </div>
-      </div>
     </div>
 
     <script type="es6">
@@ -350,6 +341,7 @@ require("../components/date-time-picker.tag.html");
         this.disableNotifyMeBeforePollEnds = !this.form.model.creatorEmail || !this.form.model.votePeriod || !this.form.model.endDate;
 
         this.on("mount", () => {
+            this.refs["voteCountingType" + this.form.model.voteCountingType].checked = true;
             this.refs.voteCountingType.value = this.form.model.voteCountingType;
             if (!this.form.model.creatorEmail) {
                 this.refs.voteNotification.value = "NEVER";
@@ -359,6 +351,15 @@ require("../components/date-time-picker.tag.html");
 
         this.updateVoteCountingTypeHelp = () => {
             this.refs.voteCountingTypeHelper.innerHTML = this.voteCountingTypes.get(this.form.model.voteCountingType.toString()).helper;
+            this.update();
+        };
+
+        this.updateHelpHover = (helper) => () => {
+            this.refs.voteCountingTypeHelpHover.innerHTML = helper;
+        };
+
+        this.clearHelpHover = () => {
+            this.refs.voteCountingTypeHelpHover.innerHTML = "";
         };
 
         this.updateDisableNotifyMeBeforePollEnds = () => {
@@ -404,7 +405,11 @@ require("../components/date-time-picker.tag.html");
         };
 
         this.voteCountingTypeChanged = e => {
-            this.form.model.voteCountingType = e.target.value;
+            if (e.item) {
+                this.form.model.voteCountingType = e.item.type.id.toString();
+            } else {
+                this.form.model.voteCountingType = e.target.value;
+            }
             this.canLimitNumberOfChoices = this.voteCountingTypes.get(this.form.model.voteCountingType).canLimitNumberOfChoices;
             this.form.model.limitChoices &= this.canLimitNumberOfChoices;
             this.updateVoteCountingTypeHelp();
@@ -428,8 +433,6 @@ require("../components/date-time-picker.tag.html");
                     this.form.model.endChoiceDate = this.refs.addChoices.checked ? this.refs.endChoiceDate.getValue() : undefined;
                     this.form.model.maxChoiceNumber = this.refs.limitChoices.checked ? this.refs.maxChoiceNumber.value : undefined;
 
-                    this.form.model.voteCountingType = this.refs.voteCountingType.value;
-
                     this.form.model.beginDate = this.refs.votePeriod.checked ? this.refs.beginDate.getValue() : undefined;
                     this.form.model.voteVisibility = this.refs.voteVisibility.value;
                     this.form.model.anonymousVoteAllowed = this.refs.anonymousVote.checked;
@@ -453,42 +456,71 @@ require("../components/date-time-picker.tag.html");
     </script>
     <style>
 
-        .config-period {
-            display: flex;
+        ul {
+            padding-left: 40px;
         }
 
-        .config-period .o-form-element {
-            flex-grow: 1;
+        h4 {
+            margin-bottom: 0.5em;
         }
 
-        .config-period .o-form-element:first-child {
-            margin-right: 3px;
+        .settings-options.with-default {
+            border-radius: 4px;
+            box-shadow: 0 0 1px hsla(0,0%,7%,.6);
+            padding: 0.1em 1.5em;
+            margin-bottom: 1em;
         }
 
-        .form-section {
+        .settings-options-row {
             display: flex;
-            flex-wrap: wrap;
+            flex-direction: column;
         }
 
-        .form-section .section-title {
-            width : 25%;
-            padding: 1em 0;
+        @media (min-width: 640px) {
+            .settings-options-row {
+                flex-direction: row;
+            }
+
+            .settings-options-row .form-section {
+                flex-basis: 50%;
+                padding: 0 2em;
+            }
+
+            .settings-options-row .form-section:first-child {
+                padding-left: 0;
+            }
+
+            .settings-options-row .form-section:last-child {
+                padding-right: 0;
+            }
         }
-        .form-section .section-content {
-            width : 75%;
+
+        .o-form-element {
+            margin: 0.5em 0;
+            padding: 0.5em 0;
+        }
+
+        .settings-options .form-section {
+            margin: 1.5em 0;
+        }
+
+        .select-or-radio .choice-select {
+            display: none;
+        }
+
+        .choice-radio label {
+            cursor: help;
         }
 
         @media (max-width: 640px) {
-            .form-section .section-title {
-                width : 100%;
+            .select-or-radio .choice-radio {
+                display: none;
             }
-            .form-section .section-content {
-                width : 100%;
+
+            .select-or-radio .choice-select {
+                display: inline;
             }
-        }
 
-        ul {
-            padding-left: 40px;
         }
 
     </style>
diff --git a/pollen-ui-riot-js/src/main/web/tag/poll/Summary.tag.html b/pollen-ui-riot-js/src/main/web/tag/poll/Summary.tag.html
index 6e79a749..7f246767 100644
--- a/pollen-ui-riot-js/src/main/web/tag/poll/Summary.tag.html
+++ b/pollen-ui-riot-js/src/main/web/tag/poll/Summary.tag.html
@@ -4,73 +4,69 @@ require("../popup/QrCodeButton.tag.html");
 
 <Summary>
 
-    <div class="container">
+    <div if={successMessage} class="c-alert c-alert--success">{successMessage}</div>
 
-        <div if={successMessage} class="c-alert c-alert--success">{successMessage}</div>
+    <div class="summary-part">
+        <h2>
+            {opts.form.model.title}
+        </h2>
 
-        <div class="poll-info">
-            <h2>
-                {opts.form.model.title}
-            </h2>
+        <p><em>{opts.form.model.description}</em></p>
 
-            <p><em>{opts.form.model.description}</em></p>
-
-            <div if="{opts.form.model.voteCountingTypeValue}">
-              {__.voteCountingType} :
-              <strong>{opts.form.model.voteCountingTypeValue.name}</strong> (<em>{opts.form.model.voteCountingTypeValue.helper}</em>)
-            </div>
+        <div if="{opts.form.model.voteCountingTypeValue}">
+          {__.voteCountingType} :
+          <strong>{opts.form.model.voteCountingTypeValue.name}</strong> (<em>{opts.form.model.voteCountingTypeValue.helper}</em>)
         </div>
+    </div>
 
-        <div>
-            <h3>{__.choices}</h3>
-            <div each={choice, index in opts.form.choices} class="{odd-row: index % 2 > 0}">
-                <ChoiceView choice={choice} showdescription="true"/>
-            </div>
+    <div class="summary-part">
+        <h3>{__.choices}</h3>
+        <div each={choice, index in opts.form.choices} class="{odd-row: index % 2 > 0}">
+            <ChoiceView choice={choice} showdescription="true"/>
         </div>
+    </div>
 
+    <div class="summary-part">
+        <h3>{__.dates}</h3>
+        <div if={opts.form.model.choiceAddAllowed}>
+            {__.addingChoices}
+            <span if={opts.form.model.beginChoiceDate}>{__.fromDate} <strong>{formatDate(opts.form.model.beginChoiceDate)}</strong></span>
+            <span if={opts.form.model.endChoiceDate}> {__.toDate} <strong>{formatDate(opts.form.model.endChoiceDate)}</strong></span>
+        </div>
         <div>
-            <h3>{__.dates}</h3>
-            <div if={opts.form.model.choiceAddAllowed}>
-                {__.addingChoices}
-                <span if={opts.form.model.beginChoiceDate}>{__.fromDate} <strong>{formatDate(opts.form.model.beginChoiceDate)}</strong></span>
-                <span if={opts.form.model.endChoiceDate}> {__.toDate} <strong>{formatDate(opts.form.model.endChoiceDate)}</strong></span>
-            </div>
-            <div>
-                {__.voting}
-                {__.fromDate} <strong>{formatDate(opts.form.model.beginDate)}</strong>
-                <span if={opts.form.model.endDate}> {__.toDate} <strong>{formatDate(opts.form.model.endDate)}</strong></span>
-            </div>
+            {__.voting}
+            {__.fromDate} <strong>{formatDate(opts.form.model.beginDate)}</strong>
+            <span if={opts.form.model.endDate}> {__.toDate} <strong>{formatDate(opts.form.model.endDate)}</strong></span>
         </div>
+    </div>
 
-        <div if={opts.form.model.pollType === "FREE"}>
-            <h3>{__.sharing}</h3>
-            <div if={opts.form.model.participants && opts.form.model.participants.length > 0}>
-              {__.invitations} <strong>{opts.form.model.participants.length}</strong>
-            </div>
-            <div>
-                <QrCodeButton value="{voteUrl}" title="{__.shareByQR}"/>
-                <a href="mailto:?subject={opts.form.model.title}&body={opts.form.model.title}%0D%0A{opts.form.model.description}%0D%0A{voteUrl}"
-                   title="{__.shareByEmail}"
-                   class="c-button c-button--info">
-                    <i class="fa fa-paper-plane"></i>
-                </a>
-            </div>
+    <div if={opts.form.model.pollType === "FREE"} class="summary-part">
+        <h3>{__.sharing}</h3>
+        <div if={opts.form.model.participants && opts.form.model.participants.length > 0}>
+          {__.invitations} <strong>{opts.form.model.participants.length}</strong>
         </div>
-
-        <div if={opts.form.model.pollType === "RESTRICTED"}>
-            <h3>{__.members}</h3>
-            <div>
-                <strong>{opts.form.model.participantCount}</strong> {__.membersNb}
-            </div>
+        <div>
+            <QrCodeButton value="{voteUrl}" title="{__.shareByQR}"/>
+            <a href="mailto:?subject={opts.form.model.title}&body={opts.form.model.title}%0D%0A{opts.form.model.description}%0D%0A{voteUrl}"
+               title="{__.shareByEmail}"
+               class="c-button c-button--info">
+                <i class="fa fa-paper-plane"></i>
+            </a>
         </div>
+    </div>
 
+    <div if={opts.form.model.pollType === "RESTRICTED"} class="summary-part">
+        <h3>{__.members}</h3>
         <div>
-            <a if={opts.form.model.pollType === "FREE"}
-                href="{window.location.origin}{window.location.pathname}#poll/{opts.form.model.id}/vote" class="c-button c-button--info">{__.vote}</a>
-            <a href="{window.location.origin}{window.location.pathname}#poll/{opts.form.model.id}/vote/{opts.form.model.permission}"
-               class="c-button c-button--info">{__.administrate}</a>
+            <strong>{opts.form.model.participantCount}</strong> {__.membersNb}
         </div>
+    </div>
 
+    <div class="summary-part">
+        <a if={opts.form.model.pollType === "FREE"}
+            href="{window.location.origin}{window.location.pathname}#poll/{opts.form.model.id}/vote" class="c-button c-button--info">{__.vote}</a>
+        <a href="{window.location.origin}{window.location.pathname}#poll/{opts.form.model.id}/vote/{opts.form.model.permission}"
+           class="c-button c-button--info">{__.administrate}</a>
     </div>
 
     <script type="es6">
@@ -96,7 +92,7 @@ require("../popup/QrCodeButton.tag.html");
 
     <style>
 
-        .container > div {
+        .summary-part {
             margin-bottom: 20px;
             line-height: 25px;
         }

-- 
To stop receiving notification emails like this one, please contact
chorem.org SCM administrator <admin+scm@chorem.org>.

    

[Pollen-commits] 03/03: style

chorem.org scm