Unified style for clickable buttons

This commit is contained in:
Marcin Kurczewski 2014-09-17 11:48:10 +02:00
parent b4d2c5ecbb
commit 4ac91374b9
9 changed files with 33 additions and 29 deletions

View file

@ -41,3 +41,14 @@ hr {
border-top: 1px solid #eee; border-top: 1px solid #eee;
box-sizing: content-box; box-sizing: content-box;
} }
.big-button.active {
background: #f7fbfc;
color: #8ba !important;
}
.big-button:focus,
.big-button:hover {
background: #f3f7f8;
color: #7a9 !important;
}

View file

@ -21,16 +21,9 @@
font-size: 15px; font-size: 15px;
} }
#top-navigation li.active a {
color: #8ba;
background: #f7fbfc;
}
#top-navigation li a:focus, #top-navigation li a:focus,
#top-navigation li a:hover { #top-navigation li a:hover {
outline: 0; outline: 0;
background: #f3f7f8;
color: #7a9;
} }
#top-navigation li:first-child a { #top-navigation li:first-child a {

View file

@ -17,10 +17,6 @@
margin: 0 0.5em; margin: 0 0.5em;
} }
#user-list ul.order li.active a {
background: #f7fbfc;
}
#user-list ul.order a { #user-list ul.order a {
cursor: pointer; cursor: pointer;
display: inline-block; display: inline-block;

View file

@ -28,10 +28,6 @@
padding: 0.2em 0.5em; padding: 0.2em 0.5em;
} }
#user-view ul a.active {
background: #f7fbfc;
}
#user-view .tab { #user-view .tab {
display: none; display: none;
margin-top: 1.5em; margin-top: 1.5em;

View file

@ -23,8 +23,8 @@ App.Presenters.TopNavigationPresenter = function(
function select(newSelectedElement) { function select(newSelectedElement) {
selectedElement = newSelectedElement; selectedElement = newSelectedElement;
$el.find('li').removeClass('active'); $el.find('li a').removeClass('active');
$el.find('li.' + selectedElement).addClass('active'); $el.find('li.' + selectedElement).find('a').addClass('active');
} }
function loginStateChanged() { function loginStateChanged() {
@ -42,7 +42,7 @@ App.Presenters.TopNavigationPresenter = function(
canListTags: auth.hasPrivilege(auth.privileges.listTags), canListTags: auth.hasPrivilege(auth.privileges.listTags),
canUploadPosts: auth.hasPrivilege(auth.privileges.uploadPosts), canUploadPosts: auth.hasPrivilege(auth.privileges.uploadPosts),
})); }));
$el.find('li.' + selectedElement).addClass('active'); $el.find('li.' + selectedElement).find('a').addClass('active');
} }
function changeTitle(subTitle) { function changeTitle(subTitle) {

View file

@ -61,8 +61,8 @@ App.Presenters.UserListPresenter = function(
} }
function updateActiveOrder(activeOrder) { function updateActiveOrder(activeOrder) {
$el.find('.order li').removeClass('active'); $el.find('.order li a').removeClass('active');
$el.find('.order [data-order="' + activeOrder + '"]').parent('li').addClass('active'); $el.find('.order [data-order="' + activeOrder + '"]').addClass('active');
} }
function renderUsers(users, clear) { function renderUsers(users, clear) {

View file

@ -27,7 +27,7 @@
<% _.each(links, function(link) { %><!-- <% _.each(links, function(link) { %><!--
--><% var className = link[0], target=link[1], title=link[2], iconClassName=link[3] %><!-- --><% var className = link[0], target=link[1], title=link[2], iconClassName=link[3] %><!--
--><li class="<%= className %>"> --><li class="<%= className %>">
<a href="<%= target %>"> <a class="big-button" href="<%= target %>">
<i class="fa <%= iconClassName %>"></i><br/> <i class="fa <%= iconClassName %>"></i><br/>
<%= title %> <%= title %>
</a> </a>

View file

@ -1,16 +1,16 @@
<div id="user-list"> <div id="user-list">
<ul class="order"> <ul class="order">
<li> <li>
<a data-order="name">Sort A&rarr;Z</a> <a class="big-button" data-order="name">Sort A&rarr;Z</a>
</li> </li>
<li> <li>
<a data-order="name,desc">Sort Z&rarr;A</a> <a class="big-button" data-order="name,desc">Sort Z&rarr;A</a>
</li> </li>
<li> <li>
<a data-order="registrationTime">Sort old&rarr;new</a> <a class="big-button" data-order="registrationTime">Sort old&rarr;new</a>
</li> </li>
<li> <li>
<a data-order="registrationTime,desc">Sort new&rarr;old</a> <a class="big-button" data-order="registrationTime,desc">Sort new&rarr;old</a>
</li> </li>
</ul> </ul>

View file

@ -12,24 +12,32 @@
<ul> <ul>
<li> <li>
<a href="#/user/<%= user.name %>" data-tab="basic-info">Basic information</a> <a class="big-button" href="#/user/<%= user.name %>" data-tab="basic-info">
Basic information
</a>
</li> </li>
<% if (canChangeBrowsingSettings) { %> <% if (canChangeBrowsingSettings) { %>
<li> <li>
<a href="#/user/<%= user.name %>/browsing-settings" data-tab="browsing-settings">Browsing settings</a> <a class="big-button" href="#/user/<%= user.name %>/browsing-settings" data-tab="browsing-settings">
Browsing settings
</a>
</li> </li>
<% } %> <% } %>
<% if (canChangeAccountSettings) { %> <% if (canChangeAccountSettings) { %>
<li> <li>
<a href="#/user/<%= user.name %>/account-settings" data-tab="account-settings">Account settings</a> <a class="big-button" href="#/user/<%= user.name %>/account-settings" data-tab="account-settings">
Account settings
</a>
</li> </li>
<% } %> <% } %>
<% if (canDeleteAccount) { %> <% if (canDeleteAccount) { %>
<li> <li>
<a href="#/user/<%= user.name %>/account-removal" data-tab="account-removal">Account removal</a> <a class="big-button" href="#/user/<%= user.name %>/account-removal" data-tab="account-removal">
Account removal
</a>
</li> </li>
<% } %> <% } %>
</ul> </ul>