Updating to Bootstrap v4

[n1474335]

A non-exhaustive list of things to do:

• Update Bootstrap package
• Change less to css import
• Import via sass - only the bits we need
• Remove less and less-loader packages
• Fix banner
• Get popovers working
• Fix popover scrolling
• Stop popovers appearing on operations in the recipe
• Make popovers disappear when dragging an op
• Adjust button sizes (Controls area)
• Review typography
• Review link colour
• Fix modal titles
• Fix tabs in About/Support pane
• Review all operations that use Bootstrap styling (i.e. tables)
• Review button focus highlights
• Confirm that alerts work and review their appearance
• Fix toggle-string arguments
• Check all themes
• Fix file input and output cards

[n1474335]

Progress so far.

Overall

Operation argument examples

Keen to hear feedback. I'm not 100% happy with all the operation arguments but I'm not quite sure how to improve them. Let me know your thoughts.

[mattnotmitt]

Could the key and IV labels with the options for Hex etc. be above the drop-down instead of the input?

…

On Sun, 17 Jun 2018, 14:22 n1474335, ***@***.***> wrote: Progress so far. Overall [image: screenshot from 2018-06-17 14-11-45] <https://user-images.githubusercontent.com/22770796/41508235-44f2c77a-7239-11e8-84d0-acc25e7f2c9c.png> Operation argument examples [image: screenshot from 2018-06-17 14-16-27] <https://user-images.githubusercontent.com/22770796/41508238-500fe2f0-7239-11e8-8f1a-c3a36ac057a0.png> Keen to hear feedback. I'm not 100% happy with all the operation arguments but I'm not quite sure how to improve them. Let me know your thoughts. — You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub <#248 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/ACAWfn4fpl0PihEDuZSWQfzyo2sRtuhqks5t9lgRgaJpZM4SZ80Y> .

[tlwr]

Looks nice and clean 👌 ; not as flashy as other material implementations

[n1474335]

@tlwr Thanks - I'm assuming that's a good thing! It has all the ripple animations on the inputs and buttons which are a little unnecessary on a desktop but will make it feel nicer on a phone I think.

@artemisbot I did try that, but it looked really odd because the dropdown text is centred whereas the label would be left-justified. I guess I can play around with the dropdown a bit to make it work better. The other thing is that the label starts off in the input when it's empty and then flies miles over to the left when you focus it, which also looks a little odd.

[mattnotmitt]

Right, sounds good! Everything else looks and feels good (tested it on my phone too). However with ops like To Base64 there's no text for what option is selected.

…

On Sun, 17 Jun 2018, 14:32 n1474335, ***@***.***> wrote: @tlwr <https://github.com/tlwr> Thanks - I'm assuming that's a good thing! It has all the ripple animations on the inputs and buttons which are a little unnecessary on a desktop but will make it feel nicer on a phone I think. @artemisbot <https://github.com/artemisbot> I did try that, but it looked really odd because the dropdown text is centred whereas the label would be left-justified. I guess I can play around with the dropdown a bit to make it work better. The other thing is that the label starts off in the input when it's empty and then flies miles over to the left when you focus it, which also looks a little odd. — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#248 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/ACAWfpXdpNqjOHn6eEK_bK4Ktcq233N1ks5t9lplgaJpZM4SZ80Y> .

[n1474335]

I'm now using the CSS Grid layout to organise operation arguments. I've also moved the toggle-string dropdown over to the right so that the label is lined up nicely.