aboutsummaryrefslogtreecommitdiffstats
path: root/web
diff options
context:
space:
mode:
Diffstat (limited to 'web')
-rw-r--r--web/cobrands/fixmystreet/fixmystreet.js130
-rw-r--r--web/cobrands/oxfordshire/assets.js3
-rw-r--r--web/cobrands/sass/_base.scss41
3 files changed, 127 insertions, 47 deletions
diff --git a/web/cobrands/fixmystreet/fixmystreet.js b/web/cobrands/fixmystreet/fixmystreet.js
index 15cc6b26a..8f115fd1e 100644
--- a/web/cobrands/fixmystreet/fixmystreet.js
+++ b/web/cobrands/fixmystreet/fixmystreet.js
@@ -312,22 +312,17 @@ $.extend(fixmystreet.set_up, {
});
});
- /* set correct required status depending on what we submit
- * NB: need to add things to form_category as the JS updating
- * of this we do after a map click removes them */
+ /* set correct required status depending on what we submit */
$('.js-submit_sign_in').click( function(e) {
- $('#form_category').addClass('required validCategory').removeClass('valid');
$('.js-form-name').removeClass('required');
} );
$('.js-submit_register').click( function(e) {
- $('#form_category').addClass('required validCategory').removeClass('valid');
$('.js-form-name').addClass('required');
} );
$('#facebook_sign_in, #twitter_sign_in').click(function(e){
- $('#form_username').removeClass();
- $('#username').removeClass();
+ $('#username, #form_username_register, #form_username_sign_in').removeClass('required');
});
$('#planned_form').submit(function(e) {
@@ -469,7 +464,7 @@ $.extend(fixmystreet.set_up, {
if ($category_select.length === 0) {
return;
}
- var $group_select = $("<select></select>").addClass("form-control").attr('id', 'category_group');
+ var $group_select = $("<select></select>").addClass("form-control validCategory").attr('id', 'category_group');
var $subcategory_label = $("#form_subcategory_label");
var $empty_option = $category_select.find("option").first();
@@ -509,7 +504,7 @@ $.extend(fixmystreet.set_up, {
$opt.data("subcategory_id", subcategory_id);
$group_select.append($opt);
- var $sub_select = $("<select></select>").addClass("form-control js-subcategory");
+ var $sub_select = $("<select></select>").addClass("form-control js-subcategory validCategory");
$sub_select.attr("id", subcategory_id);
$sub_select.append($empty_option.clone());
$options.each(function() {
@@ -859,24 +854,102 @@ $.extend(fixmystreet.set_up, {
$('.js-sign-in-password').show().css('visibility', 'visible');
});
- // Log in with email button
- var email_form = $('#js-social-email-hide'),
- button = $('<button class="btn btn--social btn--social-email">'+translation_strings.login_with_email+'</button>'),
- form_box = $('<div class="form-box"></div>');
- button.click(function(e) {
+ var show = function(selector) {
+ var deferred = $.Deferred();
+ $(selector).hide().removeClass('hidden-js').slideDown(400, function(){
+ $(this).css('display', '');
+ deferred.resolveWith(this);
+ });
+ return deferred.promise();
+ };
+
+ var hide = function(selector) {
+ var deferred = $.Deferred();
+ $(selector).slideUp(400, function(){
+ $(this).addClass('hidden-js').css('display', '');
+ deferred.resolveWith(this);
+ });
+ return deferred.promise();
+ };
+
+ var focusFirstVisibleInput = function() {
+ // Ignore logged-in form here, because it should all be pre-filled already!
+ $('#form_sign_in_yes input, #form_sign_in_no input').filter(':visible').eq(0).focus();
+ };
+
+ // Display tweak
+ $('.js-new-report-sign-in-hidden.form-box, .js-new-report-sign-in-shown.form-box').removeClass('form-box');
+
+ $('#js-new-report-user-hide').click(function(e) {
+ e.preventDefault();
+ $('.js-new-report-user-shown')[0].scrollIntoView({behavior: "smooth"});
+ hide('.js-new-report-user-shown');
+ show('.js-new-report-user-hidden');
+ });
+ $('#js-new-report-user-show').click(function(e) {
+ e.preventDefault();
+ if (!$(this).closest('form').validate().form()) {
+ return;
+ }
+ $('.js-new-report-user-hidden')[0].scrollIntoView({behavior: "smooth"});
+ hide('.js-new-report-user-hidden');
+ show('.js-new-report-user-shown').then(function(){
+ focusFirstVisibleInput();
+ });
+ });
+
+ $('#js-new-report-show-sign-in').click(function(e) {
+ $('.js-new-report-sign-in-shown').removeClass('hidden-js');
+ $('.js-new-report-sign-in-hidden').addClass('hidden-js');
+ focusFirstVisibleInput();
+ });
+
+ $('#js-new-report-hide-sign-in').click(function(e) {
e.preventDefault();
- email_form.fadeIn(500);
- form_box.hide();
+ $('.js-new-report-sign-in-shown').addClass('hidden-js');
+ $('.js-new-report-sign-in-hidden').removeClass('hidden-js');
+ focusFirstVisibleInput();
+ });
+
+ $('#js-new-report-sign-in-forgotten').click(function() {
+ $('.js-new-report-sign-in-shown').addClass('hidden-js');
+ $('.js-new-report-sign-in-hidden').removeClass('hidden-js');
+ $('.js-new-report-forgotten-shown').removeClass('hidden-js');
+ $('.js-new-report-forgotten-hidden').addClass('hidden-js');
+ focusFirstVisibleInput();
});
- form_box.append(button).insertBefore(email_form);
- if ($('.form-error').length) {
- button.click();
+
+ var err = $('.form-error');
+ if (err.length) {
$('.js-sign-in-password-btn').click();
+ if (err.closest(".js-new-report-sign-in-shown").length) {
+ $('.js-new-report-user-shown').removeClass('hidden-js');
+ $('.js-new-report-user-hidden').addClass('hidden-js');
+ $('.js-new-report-sign-in-shown').removeClass('hidden-js');
+ $('.js-new-report-sign-in-hidden').addClass('hidden-js');
+ } else if (err.closest('.js-new-report-sign-in-hidden, .js-new-report-user-shown').length) {
+ $('.js-new-report-user-shown').removeClass('hidden-js');
+ $('.js-new-report-user-hidden').addClass('hidden-js');
+ }
}
},
+ form_section_previews: function() {
+ $('.js-form-section-preview').each(function(){
+ var $el = $(this);
+ var $source = $( $el.attr('data-source') );
+ $source.on('change', function(){
+ var val = $source.val();
+ if ( val.length > 80 ) {
+ val = val.substring(0, 80) + '…';
+ }
+ $el.text( val );
+ });
+ });
+ },
+
reporting_hide_phone_email: function() {
- $('#form_username').on('keyup change', function() {
+ $('#form_username_register').on('keyup change', function() {
var username = $(this).val();
if (/^[^a-z]+$/i.test(username)) {
$('#js-hide-if-username-phone').hide();
@@ -897,22 +970,6 @@ $.extend(fixmystreet.set_up, {
}
},
- form_focus_triggers: function() {
- // If all of the form-focus-triggers are empty, hide form-focus-hidden.
- // (If the triggers aren't empty, then chances are we're being re-shown
- // the form after a validation error, so don't hide form-focus-hidden.)
- // Unhide form-focus-hidden when any of the triggers are focussed.
- var form_focus_data = $('.form-focus-trigger').map(function() {
- return $(this).val();
- }).get().join('');
- if (!form_focus_data) {
- $('.form-focus-hidden').hide();
- $('.form-focus-trigger').on('focus', function() {
- $('.form-focus-hidden').fadeIn(500);
- });
- }
- },
-
alert_page_buttons: function() {
// Go directly to RSS feed if RSS button clicked on alert page
// (due to not wanting around form to submit, though good thing anyway)
@@ -1332,7 +1389,6 @@ fixmystreet.display = {
fixmystreet.set_up.email_login_form();
fixmystreet.set_up.fancybox_images();
fixmystreet.set_up.dropzone($sideReport);
- fixmystreet.set_up.form_focus_triggers();
fixmystreet.run(fixmystreet.set_up.moderation);
fixmystreet.run(fixmystreet.set_up.response_templates);
diff --git a/web/cobrands/oxfordshire/assets.js b/web/cobrands/oxfordshire/assets.js
index 46357b061..28cffc04c 100644
--- a/web/cobrands/oxfordshire/assets.js
+++ b/web/cobrands/oxfordshire/assets.js
@@ -1,7 +1,6 @@
(function(){
function disable_form(disable) {
- $('#post_category_details_form').toggle(!disable);
- $('#private_form').toggle(!disable);
+ $('.js-hide-if-invalid-category').toggle(!disable);
}
function check_rights_of_way() {
diff --git a/web/cobrands/sass/_base.scss b/web/cobrands/sass/_base.scss
index c9cf79136..282553456 100644
--- a/web/cobrands/sass/_base.scss
+++ b/web/cobrands/sass/_base.scss
@@ -359,6 +359,27 @@ select.form-control {
line-height: 1em * (22/16);
}
+.form-section-preview {
+ // If social_auth_enabled, but no javascript, we want the "Next" preview
+ // to be visible but without any other styling. Once javascript is enabled,
+ // the "next"/"back" buttons will work, so we want the styling back.
+ html.js & {
+ background-color: #eee;
+ border-radius: 4px;
+ padding: 1em;
+
+ .form-section-heading {
+ margin: 0 0 0.5em 0;
+ }
+ }
+}
+
+// Purposefully *not* wrapped in `html.js` because the margin-top helps
+// separate the social login buttons from the .description_tips list.
+.form-section-preview--next {
+ margin-top: 1.5em;
+}
+
// grey background, full width box
.form-box {
margin: 0 -1em 0.25em;
@@ -395,12 +416,6 @@ select.form-control {
}
}
-// When the user is logged in, we show a shorter form-box,
-// without a heading before it. So add some space before.
-#form-box--logged-in-name {
- margin-top: 1.25em;
-}
-
.change_location {
color: #666;
margin: 0;
@@ -889,12 +904,22 @@ input.final-submit {
@include box-sizing(border-box);
}
+// Don't want space between block-level buttons,
+// because they don't sit beside each other anyway.
+.btn--block + .btn--block {
+ margin-#{$left}: 0;
+ margin-top: 1em;
+}
+
.btn--small {
font-size: 0.8em;
}
-.js #js-social-email-hide {
- display: none;
+// Most of our forms get their vertical spacing from the margin-top on labels.
+// This means the final submit button can end up uncomfortably close to the
+// bottom of the final input. Add a class of `btn--final` to fix this.
+.btn--final {
+ margin-top: 1.25em; // matches margin-top on `label`
}
.banner {
generated by cgit v1.2.3 (git 2.25.1) at 2025-04-26 14:34:15 +0000