The nggovuk from cjscommonplatform

Styling and classes improvements

We would need the following components and classes in the style guide to be able to include them in IDAM:

Grey box to reflect digit numbers like the snapshot below:
Read only menu to be able to reflect the step in which we are currently, grey tick and colour of the text like the snapshot below:
Alignment between input boxes and links like the following:

Thank you in advance.

Footer breaks at 991px

The footer wrapping is broken at 991px and below.

Have a checkbox to look like the one in the link

Search for Inline checkboxes in this link
http://govuk-elements.herokuapp.com/form-elements/

P Tag is larger than every other element!

It seems the p tag is 1.19em which is larger that a-tags etc.....?

Make Crown logo a png (attached)

global-nav - add option to hide/show underline bar in config (default true)

Could we please add an option to remove the blue bar under the global nav to the json config.

eg: "showUnderline" = true

Different font size between regular text in paragraph tags and text in lists

Basically regular text in a < p > tag is smaller than text in a list '< ul > < li >'

Validation for horizontal forms

Using horizontal forms like the screenshot, when validation errors have to be displayed for certain fields, the alignment is not correct with other that where no highlighted as the image below:

Also, regarding the error messages under the label for the form-horizontal (where label and input are aligned horizontally) I am able to get it using an

tag inside the but that flags errors in the validator since we are using a block tag inside an inline. Is there a way to accomplish the same result using span with the proper styling?

Also, in some forms the space between form-groups is more than the normal as the screenshot below. I know there is spacing feature for bootstrap, but is in the 4 alpha version (http://v4-alpha.getbootstrap.com/components/utilities/), is there anything similar to do so?

Make the footer directive data driven like globa nav

The div with class nav-side should be replaced with the aside tag

The div with class nav-side should be replaced with the aside tag inline with W3C standards.

Please refer:

Components for IdAM Support Admin App

Please add style classes which allow us to create

a header for a group of fields which is can be placed above a set of radio buttons,
an input field with a label on the left side where there can be specified the field is optional.

The screenshot has been provided by IdAM UX template IdAM_MVP_support_admin_v6_FINAL.pdf

Success or Invalid Notification frames wrapping around the text in them

Hello,

Whenever I'm using the Notification frames, they appear throughout the whole length of the screen like this:

Would it be possible for the frame to wrap around the text inside like:

New notification colours

These new notification colours would need to be added:

Thanks in advance!

Alignment in horizontal forms between label and input

When using horizontal forms where labels and inputs are aligned horizontally, the alignment of the label is to the top of the input. In the following screenshot, the "Address line 1" is aligned to the top but after tweaking the css for the "Address line 2" in is aligned to the center of the input. Is there any specific class to achieve that?

Thank you in advance

Code preview plugin

Update code preview plugin

Styles for List of users in IdAM

Please provide style classes which would allow us to set colours in cells of a data table.
There are green, orange and grey colours needed.

Breadcrumbs not gov uk styles

gov.uk has a breadcrumb style (example from https://www.gov.uk/service-manual/making-software/apis.html)

and ngGovUk is using bootstrap breadcrumb
styles only:

border on the inset text is unequal

The left border on the inset text block needs to extend above and below the text block equally.

At the moment it is larger below.

List of links with appropriate padding

Can a new class be provided with the appropriate spacing between links such as:

I am currently using the < p > tag, but that provides too much spacing between the links and it looks like this:

Thanks in advance!

Stacked radio buttons and check buttons width

I found the style for stacked radio buttons and check buttons could me improved by setting the same width (from the one with biggest width) for all the buttons in the same group.

Docs: broken class list in Hidden text (progressive disclosure)

The class list in the docs example for Hidden text (progressive disclosure) reads:

<p class="main-summary summary" data-ng-click="isOpen = !isOpen">

note the which blocks the cascade of .summary styles to the arrow span within - when the class list is fixed the arrow is no longer positioned correctly (margin bottom declaration kicks in).

This also explains why the docs example does not show a pointer cursor.

left side nav font and size

The top level left nav items font should be GDS New Transport Bold 19px

Fix icon notifications

As discussed, there is currently an issue with the notifications that were added where a notification that has an icon doesn't position the icon the the correct way:

We can't set width for form fields

I'd like to be able to controller the width of form fields, e.g. title should be ~30% of regular width.

This is what we have now:

This is something I'd like to have (but it's done in different type of form):

When I tried to apply this solution to the form (image 1) I'm working on at the moment I've got something like this:

Our current code:

    <div class="form-group">
        <label class="form-label" for="user-title-input">
            Title <span class="text-muted">(optional)</span>
        </label>
        <input class="form-control" id="user-title-input" name="title" type="text"
               data-ng-model="userIdam.title">
    </div>

What I tried to add:
<div class="col-sm-3">...</div>

I also tried to use "col-sm-3" as a class of <input />, but it didn't work as I'd expect:

Is there any way to control the width of form fields that I can use? If not, can you please provide a set of classes?

Thank you

Stacked radio buttons & Stacked checkboxes

These need to match the gov.uk style guide

http://govuk-elements.herokuapp.com/form-elements/#form-toggle-content

footer font size items are incorrect

Footer font size is too large, this should be 16px.

reference https://www.gov.uk/

IE8 issues

the docs fails to bootstrap on IE8 - as far as I'm aware the browser should be supported.

New notification component

Hello,

As discussed, we need new UI component for notifications. Please have a look at image attached.

Update gutter spacing between left nav and the content

The gutter (spacing) between the left nav and content should be 30px.

Update plunker

plunker version being used is cpp-ui; this needs to be updated to use ng-gov-uk

sticky nav in the docs app

make the nav in the docs app sticky

Page footer styling a.k.a. Page content min-height.

On pages with little content the footer is rendered un-naturally high in the page and with no white space.

I believe a content min-height + padding/margin top would improve the User Experience.

New Plain Notification and improving current Notifications

I currently need to create an Invalid Notification with a link next to it. However the current Notification and its padding is about three times bigger than the link element. It has to look like:

However, the current two elements have these paddings:

I am currently using icon-notification-invalid for the Notification and btn-plain for the link. Is there a way to align the two to look like they're supposed to or is it possible to create a new type of notification (maybe icon-notification-plain) that has a transparent background and looks like a link, but has the padding and spacing of a Notification element?

Another question that I need to raise after talking with one of the UX people is can we make the Notification element wrap around the text inside? I am currently using col-sm to restrict it and simulate the effect of the notification wrapping around the text inside, but I was told that this isn't the right way of doing it and that in the future, the notification frame should wrap around the text inside.

Thanks in advance.

Deploy script runs on a failed PR

When I created an experimental branch and raised a PR against, it, the build failed but the deploy.sh script was still executed, breaking the gh-pages site.

Very low contrast errors thrown for text-muted and badge styles

Using the WAVE accessibility plugin for Chrome we get very low contrast errors for the .text-muted text colour (#DEE0E2 on white) and .badge colours (white text on #DEE0E2) - in fact without WAVE we can see they are barely legible. My thoughts on the project I'm working on is that we don't use text-muted at all and I'll be seeking User Research guidance on removing it anyway and also on not using default badges - seems to be a bootstrap only thing and not a gov.uk thing! But where it is used it will fail accessibility assessments.

Default anchor icon appearing as cursor icon VS interactive click icon

I thought this would be best included in the global CSS rather than contained in our local CSS. But if an anchor tag does not have an href attribute, it is not treated as a link and there is the default cursor during a mouse hover/click. This is misleading with the UI pattern guide for error messages presented at the top of the pages.

Giving a blank href attribute currently works (href="") but this is something that can and is probably best defined in our CSS.

New alert/notification style

I couldn't find notification/alert as in the design provided by Larry. Have a look at the screenshot

Modal dialog positioning is off if loading ngGovUk styles on top of bootstrap css

The combination of bootstrap 3 and ngGovUk breaks positioning on modal dialogs - overriding the bootstrap declaration:

.modal-dialog { left: 50%; }

with local css:

.modal-dialog { left: 0; }

fixes it

Linting

Get all files linting and validated

Register your account left hand menu

Hello,
I have not been able to find the right styling for the left hand menu during the registration process. There are some tables but if we need to use any of those, I would like the confirmation. Can you please advice whether it is necessary to be created or we need to use existing components with some tweaking?
Find the image below:

Thank you in advance.

Alerts text not in line with the icon when there is just one line of text

Create a "vertical spacer" helper div class

Create a helper class that can be added to div that adds the correct vertical space between elements

eg:

not sure what the correct space should be ... trying to find the correct style guide!

Component documentation

update documentation for all components

Badges

Add https://badge.fury.io/ badges

Styling and classes improvements regarding labels and legends

I would like to get the same look as the following screenshots>

Labels should be either bold or not depending on the screen, input, etc, is there any classes to achieve that?
Legend size for small class is 1.19em and it should be as the rest, is there any specific class for that to achieve that look, removing the small class makes it bigger?

Inactive fields in form should have opacity 50%

At the moment the difference between inactive and active (editable) inputs is not easy to recognise.
According to our UX team they should have opacity: 50%, but apparently they do not have it at all.

Can you please either let me know if we are doing it wrong or update CSS to display it more clearly.

This is example of our HTML code:

<div class="form-group" data-ng-class="{'cpp-form-error': viewuservm.form.firstName.$invalid}">
    <label class="form-label" id="user-first-name" for="user-first-name-input">
        First name
    </label>
    <div data-ng-if="viewuservm.form.firstName.$error.required">
        <h6 class="cpp-form-error-message">First name is required</h6>
    </div>
    <input class="form-control" id="user-first-name-input" name="firstName" type="text"
           data-ng-model="userIdam.firstName" data-ng-required="true">
</div>

Thanks

Links underline

According to the following screenshot from the UX the links a the top and in the table should have the underline to none. I have been able to find in the end app.css file bundled these styles:

a {
  color: #005ea5;
  text-decoration: underline;
}

  a {
  color: #005ea5;
  text-decoration: none;
}

The final result is always with the underline. Can you please advise to be able to accomplish the result as the image below?

cjscommonplatform / nggovuk Goto Github PK

nggovuk's Introduction

nggovuk's People

Contributors

Watchers

Forkers

nggovuk's Issues

Recommend Projects

Recommend Topics

Recommend Org