Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Put back Bootstrap 2 nav-list styles #22

Merged
merged 6 commits into from
Jun 12, 2014
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions .gitignore
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
*.gem
*.rbc
*.log
.DS_Store
.bundle
.config
.yardoc
Expand Down
1 change: 1 addition & 0 deletions app/assets/stylesheets/govuk_admin_template.scss
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@
@import 'govuk_admin_template/theme';
@import 'govuk_admin_template/mixins';
@import 'govuk_admin_template/bootstrap_overrides';
@import 'govuk_admin_template/nav_list';
@import 'govuk_admin_template/base';

// Components
Expand Down
59 changes: 59 additions & 0 deletions app/assets/stylesheets/govuk_admin_template/nav_list.css.scss
Original file line number Diff line number Diff line change
@@ -0,0 +1,59 @@
/* ==========================================================================
Bootstrap 2 navigation list (removed from Bootstrap 3)
http://getbootstrap.com/2.3.2/components.html#navs
Ported from http://bit.ly/1pbZRYA, variable names updated
========================================================================== */

.nav-list {
padding-left: 15px;
padding-right: 15px;
margin-bottom: 0;

.well & {
margin: -11px -20px;
}

// Nav headers (for dropdowns and lists)
.nav-header {
display: block;
padding: 3px 15px;
font-size: 11px;
font-weight: bold;
line-height: $line-height-computed;
color: $gray-light;
text-transform: uppercase;
}

// Space them out when they follow another list item (link)
li + .nav-header {
margin-top: 9px;
}
}

.nav-list > li > a,
.nav-list .nav-header {
margin-left: -15px;
margin-right: -15px;
}

.nav-list > li > a {
padding: 3px 15px;
}

.nav-list > .active > a,
.nav-list > .active > a:visited,
.nav-list > .active > a:hover,
.nav-list > .active > a:focus {
color: #fff;
background-color: $link-color;
}

.nav-list [class^="glyphicon-"],
.nav-list [class*=" glyphicon-"] {
margin-right: 2px;
}

// Dividers (basically an hr) within the dropdown
.nav-list .divider {
@include nav-divider();
}
Original file line number Diff line number Diff line change
@@ -1,6 +1,8 @@
module GovukAdminTemplate
class StyleGuideController < ApplicationController
def index
@normal_link_href = "#{request.original_url}##{Time.now.utc.to_i}"
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

tiny nitpick: this would probably read better if it were:

@normal_link_href = request.original_url + "#" +Time.now.utc.to_i

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

come to think of it, it might be more a bit more railsy to define these as helper methods in ApplicationHelper, rather than in the controller

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Should the style guide expand to multiple pages, I'd make the helpers change.
Re: the format, I stuck to the style guide, but I agree, it looks a little odd.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Re: the format, I stuck to the style guide, but I agree, it looks a little odd.

The style guide is a guide - I think readability should trump the guide.
but it's a minor point.

@visited_link_href = request.original_url
end
end
end
114 changes: 86 additions & 28 deletions app/views/govuk_admin_template/style_guide/index.html.erb
Original file line number Diff line number Diff line change
Expand Up @@ -82,15 +82,15 @@
UK Space Agency
</h1>
</div>
<p class="subtitle">UKSA is an executive agency of <a href="#">BIS</a></p>
<p class="subtitle">UKSA is an executive agency of <a href="<%= @normal_link_href %>">BIS</a></p>

<div class="page-title with-border">
<h1>
<span class="small">www.ukspaceagency.com</span>
UK Space Agency
</h1>
</div>
<p class="subtitle">UKSA is an executive agency of <a href="#">BIS</a></p>
<p class="subtitle">UKSA is an executive agency of <a href="<%= @normal_link_href %>">BIS</a></p>

</header>
</section>
Expand Down Expand Up @@ -138,7 +138,7 @@
</label>
</div>
</th>
<th><a href="#" class="btn btn-default">Action</a></th>
<th><a href="<%= @normal_link_href %>" class="btn btn-default">Action</a></th>
</tr>
</thead>
<tbody>
Expand Down Expand Up @@ -175,12 +175,12 @@
<p>Purple <code>:visited</code> styles have been added. These apply to the main content but not to buttons.</p>
</div>
<div class="col-md-6">
<a href="/style-guide" class="link-muted">Muted link</a><br><br>
<a href="/style-guide">Visited link</a><br><br>
<a href="/style-guide#<%= "#{Time.now.utc.to_i}" %>">Normal link</a><br><br>
An <a href="/style-guide" class="link-inherit">underlined link</a> that inherits its colour<br><br>
<a href="/style-guide" class="btn btn-default">Visited button link</a><br><br>
<a href="/style-guide" class="btn btn-success">Another visited button link</a><br><br>
<a href="<%= @normal_link_href %>" class="link-muted">Muted link</a><br><br>
<a href="<%= @visited_link_href %>">Visited link</a><br><br>
<a href="<%= @normal_link_href %>">Normal link</a><br><br>
An <a href="<%= @visited_link_href %>" class="link-inherit">underlined link</a> that inherits its colour<br><br>
<a href="<%= @visited_link_href %>" class="btn btn-default">Visited button link</a><br><br>
<a href="<%= @visited_link_href %>" class="btn btn-success">Another visited button link</a><br><br>
</div>
</div>

Expand All @@ -189,19 +189,19 @@
<div class="col-md-3">
<h4 class="add-bottom-margin">List group with content</h4>
<div class="list-group">
<a href="/style-guide" class="list-group-item active">
<a href="<%= @visited_link_href %>" class="list-group-item active">
<h4 class="list-group-item-heading">Active visited link</h4>
<p class="list-group-item-text">Active visited link</p>
</a>
<a href="/style-guide#<%= "#{Time.now.utc.to_i}" %>" class="list-group-item active">
<a href="<%= @normal_link_href %>" class="list-group-item active">
<h4 class="list-group-item-heading">Active normal link</h4>
<p class="list-group-item-text">Active normal link</p>
</a>
<a href="/style-guide" class="list-group-item">
<a href="<%= @visited_link_href %>" class="list-group-item">
<h4 class="list-group-item-heading">Visited link</h4>
<p class="list-group-item-text">Visited link</p>
</a>
<a href="/style-guide#<%= "#{Time.now.utc.to_i}" %>" class="list-group-item">
<a href="<%= @normal_link_href %>" class="list-group-item">
<h4 class="list-group-item-heading">Normal link</h4>
<p class="list-group-item-text">Normal link</p>
</a>
Expand All @@ -210,31 +210,31 @@
<div class="col-md-3">
<h4 class="add-bottom-margin">List group</h4>
<div class="list-group">
<a href="/style-guide" class="list-group-item active">
<a href="<%= @visited_link_href %>" class="list-group-item active">
Active visited link style
</a>
<a href="/style-guide#<%= "#{Time.now.utc.to_i}" %>" class="list-group-item active">
<a href="<%= @normal_link_href %>" class="list-group-item active">
Active normal link style
</a>
<a href="/style-guide" class="list-group-item">Visited link</a>
<a href="/style-guide#<%= "#{Time.now.utc.to_i}" %>" class="list-group-item">Normal link</a>
<a href="<%= @visited_link_href %>" class="list-group-item">Visited link</a>
<a href="<%= @normal_link_href %>" class="list-group-item">Normal link</a>
</div>
</div>
<div class="col-md-3">
<h4 class="add-bottom-margin">Navigation pills</h4>
<ul class="nav nav-pills nav-stacked">
<li class="active"><a href="/style-guide">Active visited link</a></li>
<li class="active"><a href="/style-guide#<%= "#{Time.now.utc.to_i}" %>">Active normal link</a></li>
<li><a href="/style-guide">Visited link</a></li>
<li><a href="/style-guide#<%= "#{Time.now.utc.to_i}" %>">Normal link</a></li>
<li class="active"><a href="<%= @visited_link_href %>">Active visited link</a></li>
<li class="active"><a href="<%= @normal_link_href %>">Active normal link</a></li>
<li><a href="<%= @visited_link_href %>">Visited link</a></li>
<li><a href="<%= @normal_link_href %>">Normal link</a></li>
<li>
<div class="btn-group open">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
Dropdown in navigation pill <span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu">
<li><a href="/style-guide">Visited link</a></li>
<li><a href="/style-guide#<%= "#{Time.now.utc.to_i}" %>">Normal link</a></li>
<li><a href="<%= @visited_link_href %>">Visited link</a></li>
<li><a href="<%= @normal_link_href %>">Normal link</a></li>
</ul>
</div>
</li>
Expand All @@ -248,10 +248,68 @@
Action <span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu">
<li class="active"><a href="/style-guide">Active visited link</a></li>
<li class="active"><a href="/style-guide#<%= "#{Time.now.utc.to_i}" %>">Active normal link</a></li>
<li><a href="/style-guide">Visited link</a></li>
<li><a href="/style-guide#<%= "#{Time.now.utc.to_i}" %>">Normal link</a></li>
<li class="active"><a href="<%= @visited_link_href %>">Active visited link</a></li>
<li class="active"><a href="<%= @normal_link_href %>">Active normal link</a></li>
<li><a href="<%= @visited_link_href %>">Visited link</a></li>
<li><a href="<%= @normal_link_href %>">Normal link</a></li>
</ul>
</div>
</div>
</div>
<hr>

<h2>Nav lists</h2>
<div class="row">
<p class="col-md-4 lead">
<a href="http://stackoverflow.com/questions/18281636/what-replaces-nav-lists-in-bootstrap-3">Bootstrap 3 removed</a> the <code>nav-list</code> classes and <a href="http://getbootstrap.com/2.3.2/components.html#navs">design pattern</a>. For backwards compatibility these styles have been put back, but it’s advised to avoid this pattern.
</p>
<div class="col-md-4">
<div class="well sidebar-nav">
<ul class="nav nav-list">
<li class="nav-header">Filter by Status</li>
<li class="active status-option drafts">
<a href="<%= @normal_link_href %>">Normal active <span class="badge pull-right">80</span></a>
</li>
<li class="status-option amends_needed">
<a href="<%= @normal_link_href %>">Normal link <span class="badge pull-right">33</span></a>
</li>
<li class="active status-option in_review">
<a href="<%= @visited_link_href %>">Visited active <span class="badge pull-right">19</span></a>
</li>
<li class="status-option out_for_fact_check">
<a href="<%= @visited_link_href %>">Visited link <span class="badge pull-right">71</span></a>
</li>
<li class="status-option fact_check_received">
<a href="<%= @normal_link_href %>">Fact check received <span class="badge pull-right">15</span></a>
</li>
<li class="status-option ready">
<a href="<%= @normal_link_href %>">Ready <span class="badge pull-right">89</span></a>
</li>
<li class="status-option scheduled_for_publishing">
<a href="<%= @normal_link_href %>">Scheduled <span class="badge pull-right">3</span></a>
</li>
<li class="status-option published">
<a href="<%= @normal_link_href %>">Published <span class="badge pull-right">3161</span></a>
</li>
<li class="status-option archived">
<a href="<%= @normal_link_href %>">Archived <span class="badge pull-right">12583</span></a>
</li>
</ul>
</div>
</div>
<div class="col-md-4">
<div class="well">
<ul class="nav nav-list">
<li class="nav-header">List header</li>
<li class="active"><a href="<%= @normal_link_href %>">Home</a></li>
<li><a href="<%= @normal_link_href %>">Library</a></li>
<li><a href="<%= @normal_link_href %>">Applications</a></li>
<li class="nav-header">Another list header</li>
<li><a href="<%= @normal_link_href %>">Profile</a></li>
<li><a href="<%= @normal_link_href %>">Settings</a></li>
<li><a href="<%= @normal_link_href %>">Drafts</a></li>
<li class="divider"></li>
<li><a href="<%= @normal_link_href %>">Help</a></li>
</ul>
</div>
</div>
Expand Down Expand Up @@ -304,7 +362,7 @@
<div class="col-md-6">
<p class="no-content">No mappings available</p>
<p class="no-content no-content-bordered">Bordered message</p>
<p class="no-content">A longer, multi-line no content message. Do labore et <a href="#">dolore magna aliqua</a>.</p>
<p class="no-content">A longer, multi-line no content message. Do labore et <a href="<%= @normal_link_href %>">dolore magna aliqua</a>.</p>
</div>
</div>
<hr>