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>.