From a9cd99042fb235fc40a54a3fcca7a4faa8f5b1d8 Mon Sep 17 00:00:00 2001 From: lumatijev <lumatijev@gmail.com> Date: Mon, 3 Aug 2015 20:52:21 +0200 Subject: [PATCH 1/4] Redesigned for Semantic UI 2. --- lib/at_error.html | 8 ++--- lib/at_form.html | 73 ++++++++++++++++++++------------------ lib/at_form.js | 8 +++++ lib/at_input.html | 8 ++--- lib/at_input.js | 9 ++++- lib/at_message.html | 2 +- lib/at_pwd_form.html | 24 +++++++------ lib/at_result.html | 2 +- lib/at_semantic-ui.less | 21 +++++++---- lib/at_social.js | 12 +++---- lib/at_terms_link.html | 1 + lib/at_title.html | 2 +- lib/full_page_at_form.html | 4 +-- 13 files changed, 103 insertions(+), 71 deletions(-) diff --git a/lib/at_error.html b/lib/at_error.html index 5420d5b..7126040 100644 --- a/lib/at_error.html +++ b/lib/at_error.html @@ -1,18 +1,18 @@ <template name="atError"> - <div class="at-error ui icon error message"> + <div class="at-error ui large icon error message"> <i class="warning icon"></i> <div class="content"> {{#if singleError}} {{#each error}} - <p>{{errorText}}</p> + <p><strong>{{errorText}}</strong></p> {{/each}} {{else}} <ul class="list"> {{#each error}} - <li>{{errorText}}</li> + <li><strong>{{errorText}}</strong></li> {{/each}} </ul> - {{/if}} + {{/if}} </div> </div> </template> diff --git a/lib/at_form.html b/lib/at_form.html index 6216dac..3d6b664 100644 --- a/lib/at_form.html +++ b/lib/at_form.html @@ -1,39 +1,44 @@ <template name="atForm"> {{#unless hide}} - <div class="at-form ui large fluid {{#if showError}} error {{/if}} {{#if showResult}} success {{/if}} form segment"> - {{#if showTitle}} - {{> atTitle}} - {{/if}} + {{#if showTitle}} + {{> atTitle}} {{#if showOauthServices}} - {{> atOauth}} - {{/if}} - {{#if showServicesSeparator}} - {{> atSep}} - {{/if}} - {{#if showError}} - {{> atError}} - {{/if}} - {{#if showResult}} - {{> atResult}} - {{/if}} - {{#if showMessage}} - {{> atMessage}} - {{/if}} - {{#if showPwdForm}} - {{> atPwdForm}} - {{/if}} - {{#if showTermsLink}} - {{> atTermsLink}} - {{/if}} - {{#if showSignInLink}} - {{> atSigninLink}} - {{/if}} - {{#if showSignUpLink}} - {{> atSignupLink}} - {{/if}} - {{#if showResendVerificationEmailLink}} - {{> atResendVerificationEmailLink}} - {{/if}} - </div> + <div class="ui divider"></div> + {{/if}} + {{/if}} + {{#if showOauthServices}} + {{> atOauth}} + {{/if}} + {{#if showServicesSeparator}} + {{> atSep}} + {{/if}} + {{#if showPwdForm}} + {{> atPwdForm}} + {{/if}} + {{#if showError}} + {{> atError}} + {{/if}} + {{#if showResult}} + {{> atResult}} + {{/if}} + {{#if showMessage}} + {{> atMessage}} + {{/if}} + {{#if any showTermsLink showSignInLink showSignUpLink showResendVerificationEmailLink}} + <div class="ui large message"> + {{#if showTermsLink}} + {{> atTermsLink}} + {{/if}} + {{#if showSignInLink}} + {{> atSigninLink}} + {{/if}} + {{#if showSignUpLink}} + {{> atSignupLink}} + {{/if}} + {{#if showResendVerificationEmailLink}} + {{> atResendVerificationEmailLink}} + {{/if}} + </div> + {{/if}} {{/unless}} </template> diff --git a/lib/at_form.js b/lib/at_form.js index f44f74c..04078d1 100644 --- a/lib/at_form.js +++ b/lib/at_form.js @@ -1,2 +1,10 @@ // Simply 'inherites' helpers from AccountsTemplates Template.atForm.helpers(AccountsTemplates.atFormHelpers); + +// Helper for checking if you should hide message div under atPwdForm +// if there is nothing to display in it +Template.atForm.helpers({ + any: function (a, b, c) { + return a || b || c ? true : false; + } +}); diff --git a/lib/at_input.html b/lib/at_input.html index ec5cd08..a6a6914 100644 --- a/lib/at_input.html +++ b/lib/at_input.html @@ -3,7 +3,7 @@ </template> <template name="atTextInput"> - <div class="at-input {{#if required}} required {{/if}} {{#if isValidating}} validating {{/if}} field {{#if hasError}}error{{/if}}"> + <div class="at-input {{#if required}} required {{/if}} {{#if isValidating}} validating {{/if}} {{#if hasError}} error {{/if}} field"> {{#if showLabels}} <label> {{displayName}} @@ -24,14 +24,14 @@ <template name="atCheckboxInput"> <div class="at-input inline field"> <div class="ui toggle checkbox"> - <input type="{{type}}" id="at-field-{{_id}}" name="at-field-{{_id}}" {{disabled}}> + <input type="{{type}}" id="at-field-{{_id}}" name="at-field-{{_id}}" {{disabled}} tabindex="0" class="hidden"> <label for="at-field-{{_id}}">{{displayName}}</label> </div> </div> </template> <template name="atSelectInput"> - <div class="at-input {{#if required}} required {{/if}} {{#if hasError}}error{{/if}} field"> + <div class="at-input {{#if required}} required {{/if}} {{#if hasError}} error {{/if}} field"> <label>{{displayName}}</label> <div class="ui fluid selection dropdown"> <input type="hidden" id="at-field-{{_id}}" name="at-field-{{_id}}"> @@ -57,7 +57,7 @@ {{#each values}} <div class="at-input field"> <div class="ui radio checkbox"> - <input id="at-field-{{id}}-choice-{{value}}" type="radio" name="at-field-{{id}}" value= {{value}}> + <input id="at-field-{{id}}-choice-{{value}}" type="radio" name="at-field-{{id}}" value= {{value}} tabindex="0" class="hidden"> <label for="at-field-{{id}}-choice-{{value}}">{{text}}</label> </div> </div> diff --git a/lib/at_input.js b/lib/at_input.js index c84e8c1..0a87374 100644 --- a/lib/at_input.js +++ b/lib/at_input.js @@ -12,7 +12,14 @@ Template.atTextInput.helpers(AccountsTemplates.atInputHelpers); // Simply 'inherites' helpers from AccountsTemplates Template.atCheckboxInput.helpers(AccountsTemplates.atInputHelpers); -Template.atSelectInput.rendered = function() { +// Fixes focused toggle checkbox after click (does not change color to blue) +Template.atCheckboxInput.events({ + 'click .toggle.checkbox > input': function (event) { + $(event.currentTarget).blur(); + } +}); + +Template.atSelectInput.rendered = function () { $('.ui.dropdown').dropdown(); }; diff --git a/lib/at_message.html b/lib/at_message.html index 807fd72..283f61d 100644 --- a/lib/at_message.html +++ b/lib/at_message.html @@ -1,5 +1,5 @@ <template name="atMessage"> - <div class="at-message ui icon info message"> + <div class="at-message ui large icon info message"> <i class="info icon"></i> <div class="content"> <p><strong>{{message}}</strong></p> diff --git a/lib/at_pwd_form.html b/lib/at_pwd_form.html index 1ae8b9c..e6b90db 100644 --- a/lib/at_pwd_form.html +++ b/lib/at_pwd_form.html @@ -1,16 +1,18 @@ <template name="atPwdForm"> <div class="at-pwd-form"> - <form id="at-pwd-form" action="#" method="POST" novalidate> - {{#each fields}} - {{> atInput}} - {{/each}} - {{#if showReCaptcha}} - {{> atReCaptcha}} - {{/if}} - {{#if showForgotPasswordLink}} - {{> atPwdLink}} - {{/if}} - {{> atPwdFormBtn}} + <form id="at-pwd-form" action="#" method="POST" novalidate class="ui large form"> + <div class="ui stacked segment"> + {{#each fields}} + {{> atInput}} + {{/each}} + {{#if showReCaptcha}} + {{> atReCaptcha}} + {{/if}} + {{#if showForgotPasswordLink}} + {{> atPwdLink}} + {{/if}} + {{> atPwdFormBtn}} + </div> </form> </div> </template> diff --git a/lib/at_result.html b/lib/at_result.html index b3329fc..778cf2b 100644 --- a/lib/at_result.html +++ b/lib/at_result.html @@ -1,5 +1,5 @@ <template name="atResult"> - <div class="at-result ui icon success message"> + <div class="at-result ui large icon success message"> <i class="checkmark icon"></i> <div class="content"> <p><strong>{{result}}</strong></p> diff --git a/lib/at_semantic-ui.less b/lib/at_semantic-ui.less index 4c74d5a..3938af5 100644 --- a/lib/at_semantic-ui.less +++ b/lib/at_semantic-ui.less @@ -1,17 +1,22 @@ .at-title { - margin-bottom: 1rem; + margin-bottom: 1em; } .at-social-btn { - margin-top: 1rem !important; - margin-bottom: 1rem !important; + margin-top: 1em !important; + margin-bottom: 1em !important; } .at-wrap { text-align: center; } -.at-left { +.at-grid.grid { + height: 100%; +} + +.at-column.column { + max-width: 520px; text-align: left !important; } @@ -20,9 +25,13 @@ } .at-pwd-link { - margin-bottom: 1rem; + margin-bottom: 1em; } .at-signin-link, .at-signup-link { - margin-top: 1rem; + margin-top: 1em; +} + +.at-resend-verification-email-link { + margin-top: 1em; } diff --git a/lib/at_social.js b/lib/at_social.js index 32885b8..44c8407 100644 --- a/lib/at_social.js +++ b/lib/at_social.js @@ -2,16 +2,16 @@ Template.atSocial.helpers(AccountsTemplates.atSocialHelpers); // Overrides Font Awesome icon class name with simple service name Template.atSocial.helpers({ - serviceName: function() { + serviceName: function () { var serviceStr = this._id; - if (serviceStr[0] === "g" && serviceStr[1] === "o") - serviceStr += " plus"; + if (serviceStr === 'google') + serviceStr += ' plus'; return serviceStr; }, - iconClass: function() { + iconClass: function () { var classStr = this._id; - if (classStr[0] === "g" && classStr[1] === "o") - classStr += " plus"; + if (classStr === 'google') + classStr += ' plus'; return classStr; }, }); diff --git a/lib/at_terms_link.html b/lib/at_terms_link.html index c1e4f13..18422b2 100644 --- a/lib/at_terms_link.html +++ b/lib/at_terms_link.html @@ -2,6 +2,7 @@ <div class="at-terms-link at-wrap"> <p> {{text}} + <br> {{#if privacyUrl}} <a href="{{privacyUrl}}" class="{{disabled}}">{{privacyLinkText}}</a> {{/if}} diff --git a/lib/at_title.html b/lib/at_title.html index 49d5eca..0f8852b 100644 --- a/lib/at_title.html +++ b/lib/at_title.html @@ -1,6 +1,6 @@ <template name="atTitle"> <div class="at-title"> - <h2 class="ui center aligned dividing header"> + <h2 class="ui center aligned header"> {{title}} </h2> </div> diff --git a/lib/full_page_at_form.html b/lib/full_page_at_form.html index 54147d0..b61f971 100644 --- a/lib/full_page_at_form.html +++ b/lib/full_page_at_form.html @@ -1,6 +1,6 @@ <template name="fullPageAtForm"> - <div class="ui center aligned three column stackable page grid"> - <div class="at-left eight wide column"> + <div class="at-grid ui center aligned grid"> + <div class="at-column middle aligned column"> {{> atForm}} </div> </div> From b4c2c39389c2e43849453a9143aee9d323312f20 Mon Sep 17 00:00:00 2001 From: lumatijev <lumatijev@gmail.com> Date: Mon, 3 Aug 2015 21:06:54 +0200 Subject: [PATCH 2/4] Removed LESS dependency. --- lib/{at_semantic-ui.less => at_semantic-ui.css} | 0 package.js | 3 +-- 2 files changed, 1 insertion(+), 2 deletions(-) rename lib/{at_semantic-ui.less => at_semantic-ui.css} (100%) diff --git a/lib/at_semantic-ui.less b/lib/at_semantic-ui.css similarity index 100% rename from lib/at_semantic-ui.less rename to lib/at_semantic-ui.css diff --git a/package.js b/package.js index fcca455..497cf79 100644 --- a/package.js +++ b/package.js @@ -9,7 +9,6 @@ Package.on_use(function(api, where) { api.versionsFrom('METEOR@1.0'); api.use([ - 'less', 'templating', ], 'client'); @@ -59,7 +58,7 @@ Package.on_use(function(api, where) { 'lib/at_title.html', 'lib/at_title.js', 'lib/full_page_at_form.html', - 'lib/at_semantic-ui.less', + 'lib/at_semantic-ui.css', ], ['client']); }); From e7caf5ae3c45a18acc083504887ef2c41efc3dc9 Mon Sep 17 00:00:00 2001 From: lumatijev <lumatijev@gmail.com> Date: Mon, 3 Aug 2015 21:20:25 +0200 Subject: [PATCH 3/4] Updated readme and bumped to version 1.12.0. --- README.md | 6 +++--- package.js | 2 +- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/README.md b/README.md index 646d7fe..03907b6 100644 --- a/README.md +++ b/README.md @@ -2,9 +2,9 @@ useraccounts:semantic-ui ======================== -Meteor sign up and sign in templates styled for Semantic UI +Meteor sign up and sign in templates styled for Semantic UI. -This package depends on [useraccounts:core](https://atmospherejs.com/useraccounts/core) +This package depends on [useraccounts:core](https://atmospherejs.com/useraccounts/core). Learn more [here](http://useraccounts.meteor.com) or have a look at a [live demo application](http://useraccounts-semantic-ui.meteor.com/) or at the full [documentation](https://github.com/meteor-useraccounts/core). @@ -13,7 +13,7 @@ Learn more [here](http://useraccounts.meteor.com) or have a look at a [live demo Adding this package with `meteor add useraccounts:semantic-ui` does not add any other packages providing Semantic UI. This is to let you choose the flavour you prefer, being it compiled, less, sass, or from CDN! -At the moment it is up to date with Semantic UI 1.0. +At the moment it is up to date with Semantic UI 2.0.7. ## Contributing diff --git a/package.js b/package.js index 497cf79..e38aeb3 100644 --- a/package.js +++ b/package.js @@ -1,6 +1,6 @@ Package.describe({ summary: 'Accounts Templates styled for Semantic UI.', - version: '1.11.1', + version: '1.12.0', name: 'useraccounts:semantic-ui', git: 'https://github.com/meteor-useraccounts/semantic-ui.git', }); From a1ddf3d6409569ebffcc60ec82f2d9d2e1d7a95b Mon Sep 17 00:00:00 2001 From: lumatijev <lumatijev@gmail.com> Date: Tue, 4 Aug 2015 09:23:58 +0200 Subject: [PATCH 4/4] Revert back to 1.11.1. --- package.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.js b/package.js index e38aeb3..497cf79 100644 --- a/package.js +++ b/package.js @@ -1,6 +1,6 @@ Package.describe({ summary: 'Accounts Templates styled for Semantic UI.', - version: '1.12.0', + version: '1.11.1', name: 'useraccounts:semantic-ui', git: 'https://github.com/meteor-useraccounts/semantic-ui.git', });