Fix button alignment for form button on view badge page

When adding an assignment and there are three submit buttons in a row then 'input[type="submit"] + input[type="submit"] + input[type="submit"]' is needed but that will have to be a separate issue?

Really annoying, went to do a screen shot and cannot replicate with the assignment.

Hi Gareth,

I have to confess this isn't really my area of my expertise, but I was just discussing this with Damyon and we're not so sure about this solution, it makes us think that the input[type="text"] + input[type="submit"] rule is a bit too fragile. Your solution works well for this specific scenario, but then we wonder about other elements in a row, and also if a line jsut contained two submit buttons then the second one will get the padding and not the first.

A solution that might better suit this is to add padding to the input elements in all cases - in fact to make sure that if we get input types together which fit together that they always align, no matter what order they are put into. So, we think that is the way to investigate and solve this issue better.

Moving this reopened issue out from current integration. Please, re-submit it for integration once ready.

Dear Dan Poltawski and Damyon,

No problem. I think the contradiction here is between:

input[name="searchwikicontent"] + input[type="submit"],
select + input[type="submit"],
input[type="text"] + input[type="button"],
input[type="password"] + input[type="submit"],
input[type="text"] + button,
input[type="text"] + input[type="submit"],
input[type="submit"] + input[type="submit"] {
    margin: 0 0 10px 5px;
}

and

button,
input.form-submit,
input[type="button"],
input[type="submit"],
input[type="reset"],
{
    .btn
}

Where the former overrides the margin settings of the latter. So not sure why the former existed in the first place bar to make 'input[name="searchwikicontent"]', 'input[type="password"]', 'input[type="text"] and 'select' line up with the buttons. Which could be the solution somehow!

Cheers,

Gareth

Dear Dan Poltawski and Damyon Wiese,

Ok, a bit tricky as the initial solution broke standalone cancel buttons (Purge all caches page). But did a search in the moodle less area and that seemed to be the only place that required additional fixing as could not change the Bootstrap less area.

I also could not include two mixins on the same definition did not seem to work and reference was no help -> http://lesscss.org/#-mixins

Resubmitting for peer review.

Cheers,

Gareth

The underlying issue is that Bootstrap has specific HTML for form items laid out "inline" (http://twitter.github.io/bootstrap/base-css.html and search for "inline-form")in order for the CSS to work.

Moodle's HTML for these things is of course different and you end up with a partial clash where you might get the padding on a button, but be missing the margin to match it. Things then end up out of line.

If Moodle's HTML was a bit more structured and consistent then you'd be able to target that structure and fix each issue with one simple workround. But since it's not you get hand-coded tweaks like the first code sample above.

My ideal solution would be to update these inline forms to follow the Bootstrap guidelines. I think just adding the appropriate class name to the form would possibly fix it in many cases.

Actually, scratch that. I just went and looked at the specific example given. The HTML a bit of a mess. You've got a label ("search by name") which isn't connected to any controls, immediately followed by a hidden accessible label (which only says "search", so people needing accessibility get shortchanged). This is all wrapped in the same* HTML that's used almost everywhere else* for standard forms, but instead of putting the buttons at the bottom where they normally go they've tacked them on at the end.

I'd suggest either making this a normal Moodle form or rewriting the HTML so that it's not got the HTML for a normal Moodle form. If it copied the HTML for one of the other search forms in Moodle it would probably just work (even though pretty much every one of them is implemented differently).

• except fieldset is used in a weird way to wrap everything but the (visible) label

• there's another bug recently filed where someone else has used the standard form HTML then overridden it with specific CSS to make it one big horizontal line kind of like this.

I was tying to test this yesterday in the qa.moodle.net site and realised I needed badges. I presume that badges can be uploaded somewhere but could not quite figure it out so gave up.

How do you actually add badges to BackPack? I tried that and it would not upload the badge I had made to test. Is there a specific format for the images? Have they to be a certain filetype like .png or a scalable vector image or what?

Hi Mary,

Ironically you don't actually need a badge to test - the screen shot is deceiving. But, badges can be created from any png file from within Moodle then awarded to a user, which can then be downloaded and then uploaded or directly transferred to a backpack. I did this at iMoot but never tried with a local installation. I wonder if there is a document about it.

Cheers,

Gareth

Dear David,

To be honest I think that Bootstrap has uncovered both in Moodle and itself many little things that need to be sorted to tidy up HTML production and therefore mapping to CSS styles. Perhaps it's up to the Frontend team to organise this and for us to help them.

Cheers,

Gareth

Gareth is right that you can make a badge out of any png butjust adding for the record here that you can't upload to your backpack from a local installation.

Just tested and true, but you can create a test user, create a badge for them, award it and then login as them in your local installation and it will appear in 'My Badges' so should help with testing. Not sure you can upload a badge from somebody else, so just eMailed you one Mary E.

It says in the Moodle Doc for Badges that you can create a Badge in Moodle, but where? There must be a form and then, if I am correct in this, the Badge created IN Moodle will have the correct issuing body referencing the name of the person it is awarding their email address and lots of other necessary authenticating data which is in turn added "baked" into the image using some JSON scripting, otherwise the badge is not recognised by Backpack.

Got the badge Gareth...thanks.

You can't create a badge IN Moodle-you can upload a badge that you have created offline and use it in Moodle and when you add it you give the name and possibly the email of the badge issuer (then set the criteria)

Just looking at this without an image as you say you can see the missaligmnet of the clear button, isn;t that becasue the clearsearch is not listed in the set of input types because of the class selector clearsearch? That's the problem with base theme everything seems to have different names yet they are buttons.

The problem I have found with adding all the items to a class selector like .btn or .well as I found today, that the all the css for the .btn is repeated once for .btn anf once again for all the other items that share that CSS, so its duplication.
However if you add the clearsearch to the list, tedius I know, the CSS in only written once.

input[name="searchwikicontent"] + input[type="submit"],
input[name="searchclear"] + input[type="submit"],
select + input[type="submit"],
input[type="text"] + input[type="button"],
input[type="password"] + input[type="submit"],
input[type="text"] + button,
input[type="text"] + input[type="submit"],
input[type="submit"] + input[type="submit"] {
margin: 0 0 10px 5px;
}

Which is by the way all that that button needs the other code is to syle the button with padding and gradient color.

Just looking at this without an image as you say you can see the missaligmnet of the clear button, isn;t that becasue the clearsearch is not listed in the set of input types because of the class selector clearsearch? That's the problem with base theme everything seems to have different names yet they are buttons.

The problem I have found with adding all the items to a class selector like .btn or .well as I found today, that the all the css for the .btn is repeated once for .btn and once again for all the other items that share that CSS, so its duplication.
However if you add the "searchclear" to the list, tedius I know, the CSS in only written once.

input[name="searchwikicontent"] + input[type="submit"],
input[name="searchclear"] + input[type="submit"],
select + input[type="submit"],
input[type="text"] + input[type="button"],
input[type="password"] + input[type="submit"],
input[type="text"] + button,
input[type="text"] + input[type="submit"],
input[type="submit"] + input[type="submit"]

Which is by the way all that that button needs the other code is to syle the button with padding and gradient color.

Comments seem to be getting duplicated too!

You CAN create one I just did.

Mind you there is more than one meaning for create in this context.

You could in actual fact use the same image but 'create' different conditions as to when it is awarded either by merit of doing something extra 'good' or completing something when all conditions are met. You can set time frames so that the Badge will expire and will no longer be able to displayed.

Dear Mary Evans,

I think that my first solution https://github.com/gjb2048/moodle/compare/master...wip-MDL-39820_master is closer to your suggestion as you add an additional selector, which did solve this particular issue but was judged not to be a complete solution as it may not cater for three buttons in a row. Therefore the second solution as posted attempts to level the playing field through applying the extra 10px to all buttons. But my gut says this might not be 100% correct, so open to other thoughts.

As for the badge issue, you can create a badge in a localhost Moodle - this is through the add badge functionality within the course where you upload a bog standard png image and then adding in the details of the issuer etc. then creates the badge with scripting to add the JavaScript Object Notation data as you describe. I think this is the same as what you have described - it's late! So, to hopefully answer the question, there is 'add / create badge' functionality in the course menu when you are an editing teacher. I hope I've got this right Mary Cooch

Cheers,

Gareth

What I mean to say is it is only an image which you upload, or use one that is already uploaded, but it does not become a badge until it is 'created' as a 'Badge' in Moodle.

Oh I did not know that Gareth. In that case do you want me to pear view it?

Yes - I think we are talking semantics here - you "create" an image which will be your badge offline and then when you upload it either as a site badge or course badge it then becomes an "official" badge. See http://docs.moodle.org/25/en/Using_badges But although you can create/add/upload "badges" on local host you cannot add to your Mozilla backpack without a site that is connected to the internet.

Dear Mary Evans,

If you would like to peer review the second solution or think the first is the better then please feel free as I'd value your opinion and expertise on this .

I spent about an hour and half trying to get the second solution working in both the badge situation and then not breaking anything else like the 'Purge all caches', plus I looked at the 'Add submission' page for an assignment.

Indeed Mary Cooch - semantics - Ode to have badges from Moodle.org . Mary Evans, would a link to a public badge backpack help?

Cheers,

Gareth

Sorry to say I don't even see a search or clear. Is this because I don't have any badges?

Dear Mary Evans,

Odd as you don't need badges. Are you navigating to 'Home' -> 'My Profile' -> 'My Badges' in the 'Navigation' block?

Cheers,

Gareth

Scrub that ^^^^, just seen the testing instructions

As Admin you don't see the My Badges so I created a new user and logged in and found the page.

Anyway...the main problem with the form is the with these settings these are really OTT

// Increase form label width.
@horizontalComponentOffset: 200px;
// On Wider screens.
@horizontalComponentOffset768: 220px;
@horizontalComponentOffset980: 265px;

In the good old days of Moodle 'base' I would have fixed the search bar like this using what is available...

.form-item .form-setting,
.form-item .form-description,
.mform .fitem .felement,
#page-mod-forum-search .c1,
.mform .fdescription.required,
.userprofile dl.list dd,
.form-horizontal .controls {
margin-left: auto;
padding-left: 10px;
}

.form-item .form-label,
.mform .fitem div.fitemtitle,
.userprofile dl.list dt,
.form-horizontal .control-label {
width: auto;
}

input[name="clearsearch"] {
margin: 0 0 10px 5px;
}

How that equates to LESS I am clueLESS

I was looking in Administration block...silly me.
No wonder I couldn't find My Badges!

This is what it could look like without those oversized left-margins.

The extra wide labels are a bug, MDL-39608 to be exact.

So as MDL-39608 is separate and this fixes the bottom margin of the clear button, is it good to go?

If I were you, I would be inclined to do a quick fix with this in Clean theme (custom.css) by just adding the margin round the .clearsearch submit button.

You could then open a new tracker to remaster those @horizontalComponantOffset label left-margins after MDL-39608 has been passed.

It would also be wise to check these values against those set in Base theme. Switch theme to Base and look at how the search label looks in the badges view page.
They are two different extremes!

You might want to fix base theme too!
By the way can you set stuff for Integration Review?

If you feel your fix above it the better way, then go for it.

Dear Mary Evans,

As this fix only deals with a vertical issue and MDL-39608 deals with a horizontal one with the buttons (not the label ), then perhaps to avoid future conflicts in code, then leave this as is - please see http://youtu.be/noYdGa3DpxE <- I think I'd rather have this done in the 'less' .

I've looked at the base theme and indeed it is different with the label as it appears to be out of line and higher than in Bootstrap - but is that not a separate issue as this is to do with the 'Clear' button being lower than the 'Search' button?

Then perhaps look at other issues too .

As 'less is more' and as 'Bootstrap base' is 'Clean' and to keep 'Clean' as clean as possible I think that the more fixes that are generic that can go into 'Bootstrap base' as possible should be done and then only leave small changes in 'Clean' that make it unique and special.

I am only a mere mortal so cannot set for integration

Cheers,

Gareth

Ok!

Just set this for Integration Review. I forgot to do this the other evening. I think I got distracted baking badges!

If you are interested there is a nice tutorial explaining how to add the embedded code to a badge, so that you can create your own official ones.

Dear Mary,

Awesome, thank you - I did not know Mozilla had a walk in self-bake bakery

Cheers,

Gareth

Thanks guys, this has been integrated now.

Test result: Success!

Tested in 2.5 and master.

Thanks for your awesome work! This has now become a part of Moodle.

Closing as fixed!