Commit a76a0f97 authored by Jono Mingard's avatar Jono Mingard
Browse files

Simplify home info for screen reader users (Bug #1259401)



Make the table layout more logical (3 rows and 3 columns), changed
inner tables to divs and made complex links into simple ones.

Change-Id: I0625ff6a4b99ffd0d35324cdc8da96a03948876d
Signed-off-by: default avatarJono Mingard <jonom@catalyst.net.nz>
parent b721e8cf
......@@ -1035,19 +1035,19 @@ $string['choosetheme'] = 'Choose theme...';
$string['Hide'] = 'Hide';
$string['createcollect'] = 'Create and collect';
$string['createcollectsubtitle'] = 'Develop your portfolio';
$string['updateyourprofile'] = 'Update your <a href="%s">profile</a>';
$string['uploadyourfiles'] = 'Upload your <a href="%s">files</a>';
$string['createyourresume'] = 'Create your <a href="%s">résumé</a>';
$string['publishablog'] = 'Publish a <a href="%s">journal</a>';
$string['updateprofile'] = 'Update your profile';
$string['uploadfiles'] = 'Upload your files';
$string['createresume'] = 'Create your résumé';
$string['publishblog'] = 'Publish a journal';
$string['Organise'] = 'Organise';
$string['organisesubtitle'] = 'Showcase your portfolio';
$string['organisedescription'] = 'Organise your portfolio into <a href="%s">pages.</a> Create different pages for different audiences - you choose the elements to include.';
$string['sharenetwork'] = 'Share and network';
$string['sharenetworksubtitle'] = 'Find friends and join groups';
$string['findfriendslinked'] = 'Find <a href="%s">friends</a>';
$string['joingroups'] = 'Join <a href="%s">groups</a>';
$string['controlyourprivacylinked'] = 'Control your <a href="%s">privacy</a>';
$string['discusstopicslinked'] = 'Discuss <a href="%s">topics</a>';
$string['findfriends'] = 'Find friends';
$string['joinsomegroups'] = 'Join groups';
$string['controlyourprivacy'] = 'Control your privacy';
$string['discusstopics'] = 'Discuss topics';
$string['howtodisable'] = 'You have hidden the information box. You can control its visibility in <a href="%s">Settings</a>.';
// Blocktype
......
......@@ -2075,12 +2075,12 @@ a.persona-button:after {
background: linear-gradient(to bottom, #EFEFEF 0%, #FFFFFF 100%); /* W3C */
}
.home-info {
padding: 10px;
padding: 0 10px 5px 10px;
text-align: center;
vertical-align: top;
}
.home-info .title {
margin: 0 0 5px 0;
margin: 10px 0 0 0;
font-size: 1.333em;
white-space: nowrap;
}
......@@ -2089,11 +2089,22 @@ a.persona-button:after {
border-top: 2px solid #CCCCCC;
border-bottom: 2px solid #CCCCCC;
white-space: nowrap;
margin: 0 0 10px 0;
margin: 0 0 5px 0;
padding: 3px 0;
color: #666666;
}
.home-info-grid {
display: table;
}
.home-info-grid > div {
display: table-row;
}
.home-info-grid > div > div {
display: table-cell;
padding: 3px 5px;
}
.home-info .caption {
display: block;
padding-bottom: 5px;
line-height: 1.25em;
}
......
......@@ -2,96 +2,118 @@
{if $USER->is_logged_in()}<div id="hideinfo" class="nojs-hidden-block"><a title="{str tag=Hide}"><img src="{theme_url filename='images/btn_close.png'}" alt="[x]" /></a></div>{/if}
<table class="home-info-table{if $USER->is_logged_in()} loggedin{/if} fullwidth">
<tr>
<td class="home-info rel home-info-1">
<div>
<h2 class="title">{str tag=createcollect}</h2>
</div>
<p class="subtitle">{str tag=createcollectsubtitle}</p>
<table class="fullwidth">
<tr>
<td>
{if $USER->is_logged_in()}<a href="{$url.profile}">{/if}
<img src="{theme_url filename='images/dashboard_profile.png'}" alt="" />
{if $USER->is_logged_in()}</a>{/if}
<div class="caption">{assign var=s value="updateyourprofile"|str:mahara:$url.profile}
{if $USER->is_logged_in()}{$s|safe}{else}{$s|safe|strip_tags}{/if}</div>
</td>
<td>
{if $USER->is_logged_in()}<a href="{$url.files}">{/if}
<img src="{theme_url filename='images/dashboard_files.png'}" alt="" />
{if $USER->is_logged_in()}</a>{/if}
<div class="caption">{assign var=s value="uploadyourfiles"|str:mahara:$url.files}
{if $USER->is_logged_in()}{$s|safe}{else}{$s|safe|strip_tags}{/if}</div>
</td>
</tr>
<tr>
<td>
{if $USER->is_logged_in()}<a href="{$url.resume}">{/if}
<img src="{theme_url filename='images/dashboard_resume.png'}" alt="" />
{if $USER->is_logged_in()}</a>{/if}
<div class="caption">{assign var=s value="createyourresume"|str:mahara:$url.resume}
{if $USER->is_logged_in()}{$s|safe}{else}{$s|safe|strip_tags}{/if}</div>
</td>
<td>
{if $USER->is_logged_in()}<a href="{$url.blog}">{/if}
<img src="{theme_url filename='images/dashboard_journal.png'}" alt="" />
{if $USER->is_logged_in()}</a>{/if}
<div class="caption">{assign var=s value="publishablog"|str:mahara:$url.blog}
{if $USER->is_logged_in()}{$s|safe}{else}{$s|safe|strip_tags}{/if}</div>
</td>
</tr>
</table>
<th class="home-info home-info-1">
<h2 class="title">{str tag=createcollect}</h2>
</th>
<th class="home-info home-info-2">
<h2 class="title">{str tag=Organise}</h2>
</th>
<th class="home-info home-info-3">
<h2 class="title">{str tag=sharenetwork}</h2>
</th>
</tr>
<tr>
<td class="home-info home-info-1">
<p class="subtitle">{str tag=createcollectsubtitle}</p>
</td>
<td class="home-info home-info-2">
<h2 class="title">{str tag=Organise}</h2>
<p class="subtitle">{str tag=organisesubtitle}</p>
<p class="subtitle">{str tag=organisesubtitle}</p>
</td>
<td class="home-info home-info-3">
<p class="subtitle">{str tag=sharenetworksubtitle}</p>
</td>
</tr>
<tr>
<td class="home-info home-info-1">
<div class="home-info-grid fullwidth">
<div>
{if $USER->is_logged_in()}<a href="{$url.views}">{/if}
<img class="organise" src="{theme_url filename='images/dashboard_organise.png'}" alt="" />
{if $USER->is_logged_in()}</a>{/if}
<div>
{if $USER->is_logged_in()}<a href="{$url.profile}">{/if}
<img src="{theme_url filename='images/dashboard_profile.png'}" alt="" />
<span class="caption">
{str tag=updateprofile arg1=$url.profile}
</span>
{if $USER->is_logged_in()}</a>{/if}
</div>
<div>
{if $USER->is_logged_in()}<a href="{$url.files}">{/if}
<img src="{theme_url filename='images/dashboard_files.png'}" alt="" />
<span class="caption">
{str tag=uploadfiles arg1=$url.files}
</span>
{if $USER->is_logged_in()}</a>{/if}
</div>
</div>
<p class="desc">
{assign var=s value="organisedescription"|str:mahara:$url.views}
{if $USER->is_logged_in()}{$s|safe}{else}{$s|safe|strip_tags}{/if}
</p>
<div>
<div>
{if $USER->is_logged_in()}<a href="{$url.resume}">{/if}
<img src="{theme_url filename='images/dashboard_resume.png'}" alt="" />
<span class="caption">
{str tag=createresume arg1=$url.resume}
</span>
{if $USER->is_logged_in()}</a>{/if}
</div>
<div>
{if $USER->is_logged_in()}<a href="{$url.blog}">{/if}
<img src="{theme_url filename='images/dashboard_journal.png'}" alt="" />
<span class="caption">
{str tag=publishblog arg1=$url.blog}
</span>
{if $USER->is_logged_in()}</a>{/if}
</div>
</div>
</div>
</td>
<td class="home-info home-info-2">
<div>
{if $USER->is_logged_in()}<a href="{$url.views}">{/if}
<img class="organise" src="{theme_url filename='images/dashboard_organise.png'}" alt="{str tag=views}" />
{if $USER->is_logged_in()}</a>{/if}
</div>
<p class="desc">
{assign var=s value="organisedescription"|str:mahara:$url.views}
{if $USER->is_logged_in()}{$s|safe}{else}{$s|safe|strip_tags}{/if}
</p>
</td>
<td class="home-info home-info-3">
<h2 class="title">{str tag=sharenetwork}</h2>
<p class="subtitle">{str tag=sharenetworksubtitle}</p>
<table class="fullwidth">
<tr>
<td>
{if $USER->is_logged_in()}<a href="{$url.friends}">{/if}
<img src="{theme_url filename='images/dashboard_friends.png'}" alt="" />
{if $USER->is_logged_in()}</a>{/if}
<div class="caption">{assign var=s value="findfriendslinked"|str:mahara:$url.friends}
{if $USER->is_logged_in()}{$s|safe}{else}{$s|safe|strip_tags}{/if}</div>
</td>
<td>
{if $USER->is_logged_in()}<a href="{$url.groups}">{/if}
<img src="{theme_url filename='images/dashboard_groups.png'}" alt="" />
{if $USER->is_logged_in()}</a>{/if}
<div class="caption">{assign var=s value="joingroups"|str:mahara:$url.groups}
{if $USER->is_logged_in()}{$s|safe}{else}{$s|safe|strip_tags}{/if}</div>
</td>
</tr>
<tr>
<td>
{if $USER->is_logged_in()}<a href="{$url.share}">{/if}
<img src="{theme_url filename='images/dashboard_share.png'}" alt="" />
{if $USER->is_logged_in()}</a>{/if}
<div class="caption">{assign var=s value="controlyourprivacylinked"|str:mahara:$url.share}
{if $USER->is_logged_in()}{$s|safe}{else}{$s|safe|strip_tags}{/if}</div>
</td>
<td>
{if $USER->is_logged_in()}<a href="{$url.topics}">{/if}
<img src="{theme_url filename='images/dashboard_topics.png'}" alt="" />
{if $USER->is_logged_in()}</a>{/if}
<div class="caption">{assign var=s value="discusstopicslinked"|str:mahara:$url.topics}
{if $USER->is_logged_in()}{$s|safe}{else}{$s|safe|strip_tags}{/if}</div>
</td>
</tr>
</table>
<div class="home-info-grid fullwidth">
<div>
<div>
{if $USER->is_logged_in()}<a href="{$url.friends}">{/if}
<img src="{theme_url filename='images/dashboard_friends.png'}" alt="" />
<span class="caption">
{str tag=findfriends arg1=$url.friends}
</span>
{if $USER->is_logged_in()}</a>{/if}
</div>
<div>
{if $USER->is_logged_in()}<a href="{$url.groups}">{/if}
<img src="{theme_url filename='images/dashboard_groups.png'}" alt="" />
<span class="caption">
{str tag=joinsomegroups arg1=$url.groups}
</span>
{if $USER->is_logged_in()}</a>{/if}
</div>
</div>
<div>
<div>
{if $USER->is_logged_in()}<a href="{$url.share}">{/if}
<img src="{theme_url filename='images/dashboard_share.png'}" alt="" />
<span class="caption">
{str tag=controlyourprivacy arg1=$url.share}
</span>
{if $USER->is_logged_in()}</a>{/if}
</div>
<div>
{if $USER->is_logged_in()}<a href="{$url.topics}">{/if}
<img src="{theme_url filename='images/dashboard_topics.png'}" alt="" />
<span class="caption">
{str tag=discusstopics arg1=$url.topics}
</span>
{if $USER->is_logged_in()}</a>{/if}
</div>
</div>
</div>
</td>
</tr>
</table>
......
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment