branch feature/small-screen updated (ce12b87 -> adcf381)
This is an automated email from the git hooks/post-receive script. New change to branch feature/small-screen in repository pollen. See https://gitlab.nuiton.org/chorem/pollen.git from ce12b87 Merge branch 'feature/add_password_to_registration' into 'develop' new adcf381 style de l'entête du pied et de l'ecran d'acceuille 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 adcf3813eb6d76479eab5d75d7153722deec250c Author: Sylvain Bavencoff <bavencoff@codelutin.com> Date: Thu Mar 2 17:06:33 2017 +0100 style de l'entête du pied et de l'ecran d'acceuille Summary of changes: pollen-ui-riot-js/src/main/web/css/main.css | 23 +++-- pollen-ui-riot-js/src/main/web/i18n.json | 28 +++--- pollen-ui-riot-js/src/main/web/index.html | 1 + pollen-ui-riot-js/src/main/web/tag/Footer.tag.html | 7 +- pollen-ui-riot-js/src/main/web/tag/Header.tag.html | 112 +++++++++------------ .../src/main/web/tag/HeaderI18n.tag.html | 6 +- pollen-ui-riot-js/src/main/web/tag/Home.tag.html | 50 ++++----- 7 files changed, 107 insertions(+), 120 deletions(-) -- 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 feature/small-screen in repository pollen. See https://gitlab.nuiton.org/chorem/pollen.git commit adcf3813eb6d76479eab5d75d7153722deec250c Author: Sylvain Bavencoff <bavencoff@codelutin.com> Date: Thu Mar 2 17:06:33 2017 +0100 style de l'entête du pied et de l'ecran d'acceuille --- pollen-ui-riot-js/src/main/web/css/main.css | 23 +++-- pollen-ui-riot-js/src/main/web/i18n.json | 28 +++--- pollen-ui-riot-js/src/main/web/index.html | 1 + pollen-ui-riot-js/src/main/web/tag/Footer.tag.html | 7 +- pollen-ui-riot-js/src/main/web/tag/Header.tag.html | 112 +++++++++------------ .../src/main/web/tag/HeaderI18n.tag.html | 6 +- pollen-ui-riot-js/src/main/web/tag/Home.tag.html | 50 ++++----- 7 files changed, 107 insertions(+), 120 deletions(-) diff --git a/pollen-ui-riot-js/src/main/web/css/main.css b/pollen-ui-riot-js/src/main/web/css/main.css index c24af36..3a79b15 100644 --- a/pollen-ui-riot-js/src/main/web/css/main.css +++ b/pollen-ui-riot-js/src/main/web/css/main.css @@ -18,12 +18,21 @@ * along with this program. If not, see <http://www.gnu.org/licenses/>. * #L% */ + + +html { + -webkit-text-size-adjust:none; +} + +body { + font-size: 16px; +} + * { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Open Sans', sans-serif; - font-size: 16px; -webkit-user-select: none; /* Chrome all / Safari all */ -moz-user-select: none; /* Firefox all */ @@ -56,7 +65,7 @@ input, textarea { flex-flow: row wrap; flex-direction: column; - max-width: 1055px; + margin-left: auto; margin-right: auto; justify-content: center; @@ -81,7 +90,6 @@ label { width: 235px; display: block; margin: 0 10px; - font-size: 14px; text-align: left; } @@ -109,16 +117,13 @@ textarea { .button { display: inline-block; - width: 235px; height: 41px; line-height: 41px; text-align: center; - - background-color: black; - color: white; + background-color: white; + color: #13a2ff; padding: 0 10px; border-radius: 5px; - - font-size: 16px; + border-style: none; cursor: pointer; } diff --git a/pollen-ui-riot-js/src/main/web/i18n.json b/pollen-ui-riot-js/src/main/web/i18n.json index 59494b2..f29b9ba 100644 --- a/pollen-ui-riot-js/src/main/web/i18n.json +++ b/pollen-ui-riot-js/src/main/web/i18n.json @@ -85,14 +85,14 @@ "newpassword_placeholder": "Entrer votre courriel", "newpassword_error_emailNotFound": "Le courriel n'a pas été trouvé", "newpassword_sent": "Un nouveau mot de passe vient d'être envoyé", - "footer_doc": "Pollen 2.0", + "footer_doc": "Pollen 3.0", "footer_download": "Télécharger", "footer_contact": "Nous contacter", "footer_participate": "Contribuer au projet", "footer_license": "Licence", - "header_signin": "Vous connecter", - "header_signup": "Vous inscrire", - "header_signout": "Se déconnecter", + "header_signin": "Connexion", + "header_signup": "Inscription", + "header_signout": "Déconnexion", "header_home": "Accueil", "header_i18n_lang": "Langue", "header_myProfile": "Mon profile", @@ -102,12 +102,10 @@ "header_polls": "Sondages", "header_users": "Utilisateurs", "header_myFavoriteLists": "Mes listes de favoris", - "header_createTextPoll": "Créer un sondage de type text", - "header_createImagePoll": "Créer un sondage de type image", - "header_createDatePoll": "Créer un sondage de type date", - "home_createTextPoll": "Créer un sondage de type text", - "home_createImagePoll": "Créer un sondage de type image", - "home_createDatePoll": "Créer un sondage de type date", + "header_createOtherPoll": "Nouveau sondage standard", + "header_createDatePoll": "Nouveau sondage de dates", + "home_createOtherPoll": "Nouveau sondage standard", + "home_createDatePoll": "Nouveau sondage de dates", "poll_description_cancel": "Annuler", "poll_description_next": "Suivant", "poll_description_title": "Titre", @@ -330,12 +328,10 @@ "header_polls": "Polls", "header_users": "Users", "header_myFavoriteLists": "My favorite lists", - "header_createTextPoll": "Create a text poll", - "header_createImagePoll": "Create a image poll", - "header_createDatePoll": "Create a date poll", - "home_createTextPoll": "Create a text poll", - "home_createImagePoll": "Create a image poll", - "home_createDatePoll": "Create a date poll", + "header_createOtherPoll": "New standard poll", + "header_createDatePoll": "New date poll", + "home_createOtherPoll": "New standard poll", + "home_createDatePoll": "New date poll", "poll_description_cancel": "Cancel", "poll_description_next": "Next", "poll_description_title": "Title", diff --git a/pollen-ui-riot-js/src/main/web/index.html b/pollen-ui-riot-js/src/main/web/index.html index a587cd8..37c1f3f 100644 --- a/pollen-ui-riot-js/src/main/web/index.html +++ b/pollen-ui-riot-js/src/main/web/index.html @@ -23,6 +23,7 @@ <html> <head> <meta charset="utf-8"> + <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Pollen</title> <link href="./css/main.css" rel="stylesheet"> <link href="./css/font-awesome.css" rel="stylesheet"> diff --git a/pollen-ui-riot-js/src/main/web/tag/Footer.tag.html b/pollen-ui-riot-js/src/main/web/tag/Footer.tag.html index dfcd89a..4834db9 100644 --- a/pollen-ui-riot-js/src/main/web/tag/Footer.tag.html +++ b/pollen-ui-riot-js/src/main/web/tag/Footer.tag.html @@ -27,7 +27,7 @@ <a href="http://www.gnu.org/licenses/agpl.html">{__.license}</a> <a href="http://www.codelutin.com/" target="_blank">Code Lutin</a> </div> - + <script type="es6"> let session = require("../js/Session"); this.installBundle(session, "footer"); @@ -39,15 +39,14 @@ } footer .links { - display: block; width: 100%; - min-height: 40px; - line-height: 40px; background-color: black; text-align: center; } footer .links a { + display: inline-block; + font-size: 0.8em; text-decoration: none; color: white; padding: 0 20px; diff --git a/pollen-ui-riot-js/src/main/web/tag/Header.tag.html b/pollen-ui-riot-js/src/main/web/tag/Header.tag.html index 0a57caf..b5504ab 100644 --- a/pollen-ui-riot-js/src/main/web/tag/Header.tag.html +++ b/pollen-ui-riot-js/src/main/web/tag/Header.tag.html @@ -20,44 +20,43 @@ */ require("./HeaderI18n.tag.html"); <Header> - <div class="header-home"> - <a class="header-link" href="#home" target="_top">{__.home}</a> - </div> - <div class="header-separator"></div> <div class="create dropdown"> - <a class="header-link"><i class="fa fa-plus-circle fa-2x"/></a> + <a class="header-link"><i class="fa fa-bars"/></a> <div class="dropdown-content"> - <a href="#poll/new/text/0">{__.createTextPoll}</a> - <a href="#poll/new/date/0">{__.createDatePoll}</a> - <a href="#poll/new/image/0">{__.createImagePoll}</a> + <a href="#poll/new/text/0"><i class="fa fa-list-ol"/> {__.createOtherPoll}</a> + <a href="#poll/new/date/0"><i class="fa fa-calendar"/> {__.createDatePoll}</a> + <virtual if="{admin}"> + <span role="separator" class="divider"></span> + <a href="#user">{__.users}</a> + <a href="#poll">{__.polls}</a> + </virtual> </div> </div> - <div class="header-space"></div> - <div if="{admin}" class="dropdown"> - <a class="header-link"><i class="fa fa-gear fa-2x"/></a> - <div class="dropdown-content"> - <a href="#user">{__.users}</a> - <a href="#poll">{__.polls}</a> - </div> + <div class="header-home"> + <a class="header-link" href="#home" target="_top">Pollen</a> </div> - <a class="button header-button header-signin" if="{!user}" onclick="{signIn}">{__.signin}</a> - - <a class="button header-button header-signup" if="{!user}" href="#signup">{__.signup}</a> - <div if="{user}" class="dropdown"> - <a class="header-link">{user.email}</a> - <div class="dropdown-content"> - <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="#user/favoriteLists">{__.myFavoriteLists}</a> - <span role="separator" class="divider"></span> - <a onclick="{signOut}">{__.signout}</a> + + <HeaderI18n/> + + <div class="dropdown"> + <a class="header-link"><i class="fa fa-ellipsis-v"/></a> + <div class="dropdown-content right"> + <virtual if="{!user}"> + <a onclick="{signIn}">{__.signin}</a> + <a href="#signup">{__.signup}</a> + </virtual> + <virtual if="{user}"> + <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="#user/favoriteLists">{__.myFavoriteLists}</a> + <span role="separator" class="divider"></span> + <a onclick="{signOut}">{__.signout}</a> + </virtual> </div> </div> - <div class="header-separator"></div> - <HeaderI18n/> <script type="es6"> let route = require("riot-route"); @@ -81,6 +80,7 @@ require("./HeaderI18n.tag.html"); }; + this.user = null; if (session.isConnected()) { @@ -110,56 +110,32 @@ require("./HeaderI18n.tag.html"); header { display: flex; align-items: center; + background-color: #13a2ff; + color : #ffffff; } .header-home { - /*FIXME #CSS Trouver un belle icone */ - /*background-image: url(../img/pollen.png);*/ - /*background-repeat: no-repeat;*/ - /*background-position: left;*/ - margin-left: 10px; - width: 80px; + font-size: 1.3em; + flex-grow: 1; + margin: 0 20px; + text-transform: uppercase; + } + + header a { + color : #ffffff; } .header-link { + font-size: 1.3em; display: flex; text-align: center; justify-content: center; align-items: center; - - height: 62px; + height: 3rem; padding: 10px 20px; cursor: pointer; } - .header-separator { - display: block; - width: 1px; - background-color: #a9c8ba; - height: 30px; - margin: 5px 20px; - } - - .header-space { - flex-grow: 1; - margin: 0 20px; - background-color: transparent; - } - - .header-button { - width: 155px; - } - - .header-signin { - background-color: white; - color: black; - } - - .header-signup { - background-color: #13a2ff; - color: white; - } - /* The container <div> - needed to position the dropdown content */ .dropdown { position: relative; @@ -175,6 +151,10 @@ require("./HeaderI18n.tag.html"); box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2); } + .dropdown-content.right { + right: 10px; + } + /* Links inside the dropdown */ .dropdown-content a { color: black; diff --git a/pollen-ui-riot-js/src/main/web/tag/HeaderI18n.tag.html b/pollen-ui-riot-js/src/main/web/tag/HeaderI18n.tag.html index 2cd054d..515f3ae 100644 --- a/pollen-ui-riot-js/src/main/web/tag/HeaderI18n.tag.html +++ b/pollen-ui-riot-js/src/main/web/tag/HeaderI18n.tag.html @@ -21,7 +21,7 @@ <HeaderI18n> <div class="dropdown2"> - <a class="hlink flag {locale}"><i class="select"></i></a> + <a class="hlink"><i class="fa fa-globe"/></a> <div class="dropdown-content2"> <a onclick="{toEnglish}" class="flag en">English</a> <a onclick="{toFrench}" class="flag fr">Français</a> @@ -51,13 +51,14 @@ <style> .hlink { + font-size: 1.3em; display: flex; text-align: center; justify-content: center; align-items: center; padding: 0 20px 0 0; cursor: pointer; - height: 41px; + height: 3rem; } .select { @@ -105,6 +106,7 @@ /* Links inside the dropdown */ .dropdown-content2 a { + color: black; text-decoration: none; display: block; padding: 12px 16px 12px 42px; diff --git a/pollen-ui-riot-js/src/main/web/tag/Home.tag.html b/pollen-ui-riot-js/src/main/web/tag/Home.tag.html index 9984363..9e0b3f3 100644 --- a/pollen-ui-riot-js/src/main/web/tag/Home.tag.html +++ b/pollen-ui-riot-js/src/main/web/tag/Home.tag.html @@ -20,11 +20,13 @@ */ <Home> <div class="body-container"> - - <div class="split"> - <div onclick="{createText}">{__.createTextPoll}</div> - <div onclick="{createImage}">{__.createImagePoll}</div> - <div onclick="{createDate}">{__.createDatePoll}</div> + <div class="wrapper"> + <button class="button" onclick="{createOther}"> + <i class="fa fa-list-ol"/> {__.createOtherPoll} + </button> + <button class="button" onclick="{createDate}"> + <i class="fa fa-calendar"/> {__.createDatePoll} + </button> </div> </div> @@ -35,7 +37,7 @@ this.installBundle(session, "home"); - this.createText = () => { + this.createOther = () => { session.getUser().then(user => { form.init("TEXT", user).then(() => { route("/poll/new/text/0"); @@ -43,13 +45,6 @@ }); }; - this.createImage = () => { - session.getUser().then(user => { - form.init("RESOURCE", user).then(() => { - route("/poll/new/image/0"); - }); - }); - }; this.createDate = () => { session.getUser().then(user => { form.init("DATE", user).then(() => { @@ -68,7 +63,7 @@ margin-top: 30px; } - .split { + .wrapper { flex-grow: 1; display: flex; flex-direction: row; @@ -77,15 +72,24 @@ } - .split div { - cursor: pointer; - margin: 20px; - width: 400px; - height: 300px; - border: solid 2px #c8ccca; - padding: 145px 5px; - border-radius: 10px; - text-align: center; + .wrapper .button { + padding: 0px 30px; + height: 60px; + margin: 10px + } + + + @media (max-width: 640px) { + .wrapper { + flex-direction: column; /* affichage vertical */ + } + .wrapper .button { + width: 100%; + } } + + + + </style> </Home> -- To stop receiving notification emails like this one, please contact chorem.org SCM administrator <admin+scm@chorem.org>.
participants (1)
-
chorem.org scm