Skip to content

Commit

Permalink
dev: first iteration of horizontal tabs
Browse files Browse the repository at this point in the history
  • Loading branch information
Michael committed Sep 7, 2017
1 parent 4a88511 commit 4d0997b
Show file tree
Hide file tree
Showing 6 changed files with 203 additions and 65 deletions.
9 changes: 9 additions & 0 deletions app/assets/javascripts/tabs.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,3 +15,12 @@ $('ul.tab__nav--grey li a').click(function(){
$('.tab__content').not(target).addClass('js-hidden');
$(target).removeClass('js-hidden');
});

function hide(id) {
var e = document.getElementById(id);
e.style.display = 'none';
}
function show(id) {
var e = document.getElementById(id);
e.style.display = 'block';
}
1 change: 1 addition & 0 deletions app/assets/sass/application.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -26,6 +26,7 @@ $box-shadow: 0 2px 10px rgba($text-colour, 0.5);
// Patterns
@import "patterns/confirm-pages";
@import "patterns/case";
@import "patterns/tabs-horizontal";
@import "patterns/header";
@import "patterns/flashcard";
@import "patterns/highlights";
Expand Down
111 changes: 111 additions & 0 deletions app/assets/sass/patterns/_tabs-horizontal.scss
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,111 @@
// Pattern: tabs
// Problem: Switching between views of grouped content

.section-tabs {

a:visited {
color: $link-colour;
}

a:hover{
color: $link-hover-colour;
text-decoration: underline;
}

@extend %contain-floats;
border-bottom: 2px solid $border-colour;
margin: $gutter * 2 0 $gutter;

@include media(mobile) {
border-bottom: none;
margin: $gutter 0;
}

ul {
position: relative;
top: 2px;
margin: -2px 0 0 0;
padding: 0;

li {
margin: 0;
padding: 0;
float: left;
display: inline;
list-style: none;
@include media(mobile) {
float: none;
display: block;
}
}

a {
@include core-19;
font-weight: 700;
display: block;
overflow: hidden;
margin: 5px 2px 6px 0;
padding: 5px 0;
text-decoration: underline;
background: $white;
border: 2px solid $white;
border-bottom: none;

&:hover, &:focus {
background: $grey-3;
color:$link-colour;
text-decoration: underline;
}

@include media(mobile) {
@include core-16;
border-bottom: 2px solid $border-colour;
width: 98.5%;
@include calc(width, "100% - 10px");
margin: 5px 0 0 0;
padding: 5px 0 5px 5px;
text-decoration: underline;
font-weight: normal;
}

@include media(tablet) {
padding: 10px 15px;
}

@include ie(6) {
float: left;
}
}

li.active a {
background: $white;
margin: 0 2px 0 0;
border-color: $border-colour;
color: $black;
text-decoration: none;
cursor: hand;

@include media(mobile) {
border-bottom: 2px solid $border-colour;
width: 98.5%;
@include calc(width, "100% - 10px");
padding: 5px 0 5px 5px;
margin: 5px 0 0 0;
text-decoration: none;
font-weight: bold;
}

@include media(tablet) {
padding: 15px 15px 16px ;
}
}

li.disabled a {
background: $white;
border-color: transparent;
color: $grey-2;
text-decoration: none;
cursor: hand;
}
}
}
5 changes: 3 additions & 2 deletions app/views/includes/patterns/tabs-list.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -30,6 +30,9 @@
London Boroughs - North
</a>
</li>
<li class="locked">
Locked content (locked)
</li>
</ul>
</div><!-- </ CONTENT NAVIGATION > -->

Expand Down Expand Up @@ -244,6 +247,4 @@
</div>
</div>

</div>

</form>
131 changes: 71 additions & 60 deletions app/views/includes/patterns/tabs.html
View file
Original file line number Diff line number Diff line change
@@ -1,76 +1,87 @@
<form action="" method="" enctype="multipart/form-data">
<div class="grid-row">
<div class="column-one-third">

<!-- < CONTENT NAVIGATION > -->
<ul class="tab__nav">
<li>
<a href="#0" class="active" data-target="main-content">
Main content
</a>
</li>
<li>
<a href="#0" class="" data-target="hidden-content-1">
Hidden content #1
</a>
</li>
<li>
<a href="#0" class="" data-target="hidden-content-2">
Hidden content #2
</a>
</li>
<li class="locked">
Locked content (locked)
</li>
<li>
<hr style="margin:0">
<a href="#0" class="" data-target="hidden-content-3">
Hidden content of a different type
</a>
</li>
</ul>
<!-- </ CONTENT NAVIGATION > -->
<!-- Tab 1 -->
<div id="history" style="display:block;">
<div class="grid-row">
<div class="column-full">
<div class="section-tabs">
<ul>
<li class="active">
<a id="open-tab">Timeline</a>
</li>
<li>
<a id="closed-tab" onclick="show('application-form');hide('history');">Application</a>
</li>
<li>
<a id="closed-tab" onclick="show('options');hide('history');">Actions</a>
</li>
</ul>
</div>
</div>
</div>

<div class="grid-row">
<div class="column-two-thirds">
<p>Timeline form</p>
</div>
</div>

<div class="column-two-thirds">

<!-- < MAIN CONTENT > -->
<div class="tab__content" id="main-content">
<h3 class="bold-medium">Main content heading</h3>
<p>
A 19px body copy paragraph, maecenas sed diam eget risus varius blandit sit amet non magna. Donec ullamcorper nulla non metus auctor fringilla.
</p>
</div>
<!-- < / MAIN CONTENT > -->
</div>

<!-- Tab 2 -->
<div id="application-form" style="display:none;">

<!-- < HIDDEN CONTENT 1 > -->
<div class="tab__content js-hidden" id="hidden-content-1">
<h3 class="bold-medium">Hidden content #1 heading</h3>
<p>
A 19px body copy paragraph, maecenas sed diam eget risus varius blandit sit amet non magna. Donec ullamcorper nulla non metus auctor fringilla.
</p>
<div class="grid-row">
<div class="column-full">
<div class="section-tabs">
<ul>
<li>
<a id="closed-tab" onclick="hide('application-form');show('history');">Timeline</a>
</li>
<li class="active">
<a id="open-tab">Application</a>
</li>
<li>
<a id="closed-tab" onclick="show('options');hide('application-form');">Actions</a>
</li>
</ul>
</div>
</div>
<!-- </ HIDDEN CONTENT 1 > -->
</div>

<!-- < HIDDEN CONTENT 2 > -->
<div class="tab__content js-hidden" id="hidden-content-2">
<h3 class="bold-medium">Hidden content #2 heading</h3>
<p>
A 19px body copy paragraph, maecenas sed diam eget risus varius blandit sit amet non magna. Donec ullamcorper nulla non metus auctor fringilla.
</p>
<div class="grid-row">
<div class="column-two-thirds">
<p>Application form</p>
</div>
<!-- </ HIDDEN CONTENT 2 > -->
</div>
</div>

<!-- < HIDDEN CONTENT OF A DIFFERENT TYPE > -->
<div class="tab__content js-hidden" id="hidden-content-3">
<h3 class="bold-medium">Hidden content of a different type heading</h3>
<p>
A 19px body copy paragraph, maecenas sed diam eget risus varius blandit sit amet non magna. Donec ullamcorper nulla non metus auctor fringilla.
</p>
<!-- Tab 3 -->
<div id="options" style="display:none;">
<div class="grid-row">
<div class="column-full">
<div class="section-tabs">
<ul>
<li>
<a id="closed-tab" onclick="hide('options');show('history');">Timeline</a>
</li>
<li>
<a id="closed-tab" onclick="show('application-form');hide('options');">Application</a>
</li>
<li class="active">
<a id="open-tab">Actions</a>
</li>
</ul>
</div>
</div>
<!-- </ HIDDEN CONTENT OF A DIFFERENT TYPE > -->
</div>
<div class="grid-row">
<div class="column-two-thirds">
<p>Actions form</p>

</div>
</div>
</div>

</form>
11 changes: 8 additions & 3 deletions app/views/patterns/tabs.html
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
{% extends "layout.html" %}

{% block page_title %}
Pattern - In-page tabs
Pattern - In-page tabs
{% endblock %}

{% block content %}
Expand All @@ -20,7 +20,7 @@ <h1 class="heading-section">In-page tabs</h1>
<li>Last updated: 28 June 2017</li>
</ul>

<h2 class="heading-medium" id="example-component">Example</h2>
<h2 class="heading-medium" id="example-component">Horizontal tab</h2>
<div class="example example-images">
<div class="grid-row">
{% include "includes/patterns/tabs.html" %}
Expand All @@ -31,12 +31,16 @@ <h2 class="heading-medium" id="example-component">Example</h2>
<pre class="language-markup"><code class="language-markup">{% filter escape %}{% include "includes/patterns/tabs.html" %}{% endfilter %}</code></pre>
</details>

<h2 class="heading-medium" id="example-component">Example when picking from a long list</h2>
<h2 class="heading-medium" id="example-component">Side tab</h2>
<div class="example example-images">
<div class="grid-row">
{% include "includes/patterns/tabs-list.html" %}
</div>
</div>
<details>
<summary>Show code snippet</summary>
<pre class="language-markup"><code class="language-markup">{% filter escape %}{% include "includes/patterns/tabs-list.html" %}{% endfilter %}</code></pre>
</details>
</div>

<div class="column-two-thirds">
Expand All @@ -57,6 +61,7 @@ <h2 class="heading-medium">Accessibility principles</h2>
<h2 class="heading-medium">User research</h2>
<p>Syrian refugee resettlement found no problems with the pattern. Users have a good understanding of what to expect from the tabs</p>
<p>Application platform uses the pattern for long lists. When combined with a search, the pattern performs very well when users don't know the contents of the list.</p>
<p>Dyslexic users were ignoring the horizontal tab. So the line around the horizontal tabs were made thicker and the blue links were underlined to avoid this issue.</p>

<h2 class="heading-medium">Services using this pattern</h2>
<ul class="list list-bullet">
Expand Down

0 comments on commit 4d0997b

Please sign in to comment.