Unified style for clickable buttons
This commit is contained in:
parent
b4d2c5ecbb
commit
4ac91374b9
9 changed files with 33 additions and 29 deletions
|
@ -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;
|
||||||
|
}
|
||||||
|
|
|
@ -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 {
|
||||||
|
|
|
@ -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;
|
||||||
|
|
|
@ -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;
|
||||||
|
|
|
@ -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) {
|
||||||
|
|
|
@ -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) {
|
||||||
|
|
|
@ -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>
|
||||||
|
|
|
@ -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→Z</a>
|
<a class="big-button" data-order="name">Sort A→Z</a>
|
||||||
</li>
|
</li>
|
||||||
<li>
|
<li>
|
||||||
<a data-order="name,desc">Sort Z→A</a>
|
<a class="big-button" data-order="name,desc">Sort Z→A</a>
|
||||||
</li>
|
</li>
|
||||||
<li>
|
<li>
|
||||||
<a data-order="registrationTime">Sort old→new</a>
|
<a class="big-button" data-order="registrationTime">Sort old→new</a>
|
||||||
</li>
|
</li>
|
||||||
<li>
|
<li>
|
||||||
<a data-order="registrationTime,desc">Sort new→old</a>
|
<a class="big-button" data-order="registrationTime,desc">Sort new→old</a>
|
||||||
</li>
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
|
|
||||||
|
|
|
@ -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>
|
||||||
|
|
Loading…
Reference in a new issue