hyperzlib
/
nodebb-theme-persona
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

WIP user-icons

Browse Source
main
Julian Lam 10 years ago
parent 49517de3cf
commit eefad3dad7
16 changed files with 88 additions and 22 deletions
Show Stats Download Patch File Download Diff File

2
less/account.less
Unescape Escape View File

@ -33,6 +33,8 @@
width:128px; width:128px;
height:128px; height:128px;
border-radius: 50%; border-radius: 50%;
line-height: 128px;
font-size: 7.5rem;
} }
.user-picture-label { .user-picture-label {

5
less/categories.less
Unescape Escape View File

@ -21,10 +21,13 @@
margin-top: 2px; margin-top: 2px;
} }
img { img, .user-icon {
margin-right: 15px; margin-right: 15px;
width: 46px; width: 46px;
height: 46px; height: 46px;
line-height: 46px;
font-size: 2.4rem;
border-radius: 50%;
} }
h2 { h2 {

6
less/category.less
Unescape Escape View File

@ -42,11 +42,11 @@
} }
} }
.user-img { .user-img, .user-icon {
opacity: 1; opacity: 1;
} }
.fa-check, .user-img { .fa-check, .user-img, .user-icon {
.transition(.2s ease-in-out opacity); .transition(.2s ease-in-out opacity);
} }
@ -55,7 +55,7 @@
} }
&.selected { &.selected {
.user-img { .user-img, .user-icon {
opacity: 0; opacity: 0;
} }

7
less/groups.less
Unescape Escape View File

@ -26,9 +26,10 @@
list-style-type: none; list-style-type: none;
display: inline-block; display: inline-block;
img { img, .user-icon {
width: 32px; width: 32px;
height: 32px; height: 32px;
line-height: 32px;
} }
} }
@ -133,8 +134,10 @@
} }
[component="groups/members"], [component="groups/pending"], [component="groups/invited"] { [component="groups/members"], [component="groups/pending"], [component="groups/invited"] {
img { img, .user-icon {
width: 32px; width: 32px;
height: 32px;
line-height: 32px;
} }
.member-name { .member-name {

4
less/header.less
Unescape Escape View File

@ -127,11 +127,13 @@
#user_dropdown { #user_dropdown {
padding: 10px 15px; padding: 10px 15px;
img { img, .user-icon {
width: 30px; width: 30px;
height: 30px; height: 30px;
border-radius: 50%; border-radius: 50%;
border: 0px none; border: 0px none;
font-size: 1.8rem;
line-height: 30px;
span { span {
font-size: 14px; font-size: 14px;

2
less/posts_list.less
Unescape Escape View File

@ -10,6 +10,8 @@
height: 24px; height: 24px;
float: left; float: left;
border-radius: 50%; border-radius: 50%;
line-height: 24px;
font-size: 1.5rem;
} }
a { a {

19
less/topic.less
Unescape Escape View File

@ -40,11 +40,13 @@
min-height: 46px; min-height: 46px;
margin-top: 2px; margin-top: 2px;
img { img, .user-icon {
margin-right: 15px; margin-right: 15px;
width: 46px; width: 46px;
height: 46px; height: 46px;
border-radius: 50%; border-radius: 50%;
font-size: 2.4rem;
line-height: 46px;
} }
} }
@ -190,9 +192,11 @@
min-height: 0; min-height: 0;
margin-top: 5px; margin-top: 5px;
img { img, .user-icon {
width: 23px; width: 23px;
height: 23px; height: 23px;
font-size: 1.3rem;
line-height: 23px;
} }
} }
} }
@ -308,13 +312,14 @@
a[data-uid] { a[data-uid] {
position: relative; position: relative;
margin-left: 14px;
img { img, .user-icon {
border-radius: 50%; border-radius: 50%;
width: 20px; width: 20px;
height: 20px; height: 20px;
vertical-align: middle; vertical-align: middle;
line-height: 20px;
margin: 0 7px;
} }
&::after { &::after {
@ -325,15 +330,15 @@
font-family: "FontAwesome"; font-family: "FontAwesome";
content: "\f11c"; content: "\f11c";
padding: 4px 0.25em; padding: 4px 0.25em;
top: 0px; top: -36px;
left: 0px; left: 7px;
.transition(~"opacity ease 250ms, top ease 250ms") .transition(~"opacity ease 250ms, top ease 250ms")
} }
&.replying::after { &.replying::after {
opacity: 1; opacity: 1;
top: -24px; top: -50px;
.animation(topic-reply-pulse 2s ease-in infinite); .animation(topic-reply-pulse 2s ease-in infinite);
} }
} }

4
less/users.less
Unescape Escape View File

@ -43,10 +43,12 @@
vertical-align: top; vertical-align: top;
width: 104px; width: 104px;
img { img, .user-icon {
width:80px; width:80px;
height:80px; height:80px;
border-radius: 50%; border-radius: 50%;
line-height: 80px;
font-size: 4rem;
} }
a { a {

4
templates/account/profile.tpl
Unescape Escape View File

@ -8,7 +8,11 @@
<div class="account-picture-block panel panel-default"> <div class="account-picture-block panel panel-default">
<div class="panel-body"> <div class="panel-body">
<div class="text-center"> <div class="text-center">
<!-- IF picture -->
<img src="{picture}" class="user-profile-picture" /> <img src="{picture}" class="user-profile-picture" />
<!-- ELSE -->
<div class="user-icon user-profile-picture" style="background-color: {icon:bgColor};" title="{username}">{icon:text}</div>
<!-- ENDIF picture -->
</div> </div>
<div> <div>

16
templates/groups/details.tpl
Unescape Escape View File

@ -41,7 +41,11 @@
<!-- BEGIN members --> <!-- BEGIN members -->
<tr data-uid="{group.members.uid}"> <tr data-uid="{group.members.uid}">
<td> <td>
<!-- IF group.members.picture -->
<a href="{config.relative_path}/user/{group.members.userslug}"><img src="{group.members.picture}" /></a> <a href="{config.relative_path}/user/{group.members.userslug}"><img src="{group.members.picture}" /></a>
<!-- ELSE -->
<div class="user-icon" style="background-color: {group.members.icon:bgColor};">{group.members.icon:text}</div>
<!-- ENDIF group.members.picture -->
</td> </td>
<td class="member-name"> <td class="member-name">
<a href="{config.relative_path}/user/{group.members.userslug}">{group.members.username}</a> <i title="[[groups:owner]]" class="fa fa-star text-warning <!-- IF !group.members.isOwner -->invisible<!-- ENDIF !group.members.isOwner -->"></i> <a href="{config.relative_path}/user/{group.members.userslug}">{group.members.username}</a> <i title="[[groups:owner]]" class="fa fa-star text-warning <!-- IF !group.members.isOwner -->invisible<!-- ENDIF !group.members.isOwner -->"></i>
@ -98,7 +102,11 @@
<!-- BEGIN pending --> <!-- BEGIN pending -->
<tr data-uid="{group.pending.uid}"> <tr data-uid="{group.pending.uid}">
<td> <td>
<a href="{config.relative_path}/user/{group.pending.userslug}"><img src="{group.pending.picture}" /></a> <!-- IF group.members.picture -->
<a href="{config.relative_path}/user/{group.members.userslug}"><img src="{group.members.picture}" /></a>
<!-- ELSE -->
<div class="user-icon" style="background-color: {group.members.icon:bgColor};">{group.members.icon:text}</div>
<!-- ENDIF group.members.picture -->
</td> </td>
<td class="member-name"> <td class="member-name">
<a href="{config.relative_path}/user/{group.pending.userslug}">{group.pending.username}</a> <a href="{config.relative_path}/user/{group.pending.userslug}">{group.pending.username}</a>
@ -134,7 +142,11 @@
<!-- BEGIN invited --> <!-- BEGIN invited -->
<tr data-uid="{group.invited.uid}"> <tr data-uid="{group.invited.uid}">
<td> <td>
<a href="{config.relative_path}/user/{group.invited.userslug}"><img src="{group.invited.picture}" /></a> <!-- IF group.members.picture -->
<a href="{config.relative_path}/user/{group.members.userslug}"><img src="{group.members.picture}" /></a>
<!-- ELSE -->
<div class="user-icon" style="background-color: {group.members.icon:bgColor};">{group.members.icon:text}</div>
<!-- ENDIF group.members.picture -->
</td> </td>
<td class="member-name"> <td class="member-name">
<a href="{config.relative_path}/user/{group.invited.userslug}">{group.invited.username}</a> <a href="{config.relative_path}/user/{group.invited.userslug}">{group.invited.username}</a>

6
templates/partials/groups/list.tpl
Unescape Escape View File

@ -9,7 +9,11 @@
<!-- BEGIN members --> <!-- BEGIN members -->
<li> <li>
<a href="{config.relative_path}/user/{groups.members.userslug}"> <a href="{config.relative_path}/user/{groups.members.userslug}">
<img src="{groups.members.picture}" title="{groups.members.userslug}" /> <!-- IF groups.members.picture -->
<img src="{groups.members.picture}" title="{groups.members.username}" />
<!-- ELSE -->
<div class="user-icon" style="background-color: {groups.members.icon:bgColor};" title="{groups.members.username}">{groups.members.icon:text}</div>
<!-- ENDIF groups.members.picture -->
</a> </a>
</li> </li>
<!-- END members --> <!-- END members -->

7
templates/partials/menu.tpl
Unescape Escape View File

@ -27,7 +27,12 @@
<ul id="logged-in-menu" class="nav navbar-nav navbar-right"> <ul id="logged-in-menu" class="nav navbar-nav navbar-right">
<li id="user_label" class="dropdown"> <li id="user_label" class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#" id="user_dropdown" title="[[global:header.profile]]"> <a class="dropdown-toggle" data-toggle="dropdown" href="#" id="user_dropdown" title="[[global:header.profile]]">
<img component="header/userpicture" src="{user.picture}" alt="{user.username}" /> <span id="user-header-name" class="visible-xs-inline">{user.username}</span> <!-- IF user.picture -->
<img component="header/userpicture" src="{user.picture}" alt="{user.username}" />
<!-- ELSE -->
<div component="header/usericon" class="user-icon" style="background-color: {user.icon:bgColor};">{user.icon:text}</div>
<!-- ENDIF user.picture -->
<span id="user-header-name" class="visible-xs-inline">{user.username}</span>
</a> </a>
<ul id="user-control-list" component="header/usercontrol" class="dropdown-menu" aria-labelledby="user_dropdown"> <ul id="user-control-list" component="header/usercontrol" class="dropdown-menu" aria-labelledby="user_dropdown">
<li> <li>

4
templates/partials/posts_list.tpl
Unescape Escape View File

@ -6,7 +6,11 @@
<div class="panel panel-default"> <div class="panel panel-default">
<div class="panel-body"> <div class="panel-body">
<a href="{config.relative_path}/user/{posts.user.userslug}"> <a href="{config.relative_path}/user/{posts.user.userslug}">
<!-- IF posts.user.picture -->
<img title="{posts.user.username}" class="img-rounded user-img" src="{posts.user.picture}"> <img title="{posts.user.username}" class="img-rounded user-img" src="{posts.user.picture}">
<!-- ELSE -->
<div class="user-icon user-img" style="background-color: {posts.user.icon:bgColor};" title="{posts.user.username}">{posts.user.icon:text}</div>
<!-- ENDIF posts.user.picture -->
</a> </a>
<a href="{config.relative_path}/user/{posts.user.userslug}"> <a href="{config.relative_path}/user/{posts.user.userslug}">

4
templates/partials/topic/post.tpl
Unescape Escape View File

@ -1,7 +1,11 @@
<div class="clearfix"> <div class="clearfix">
<div class="icon pull-left"> <div class="icon pull-left">
<a href="<!-- IF posts.user.userslug -->{config.relative_path}/user/{posts.user.userslug}<!-- ELSE -->#<!-- ENDIF posts.user.userslug -->"> <a href="<!-- IF posts.user.userslug -->{config.relative_path}/user/{posts.user.userslug}<!-- ELSE -->#<!-- ENDIF posts.user.userslug -->">
<!-- IF posts.user.picture -->
<img src="{posts.user.picture}" align="left" itemprop="image" /> <img src="{posts.user.picture}" align="left" itemprop="image" />
<!-- ELSE -->
<div class="user-icon" style="background-color: {posts.user.icon:bgColor};">{posts.user.icon:text}</div>
<!-- ENDIF posts.user.picture -->
<!-- IF posts.user.banned --> <!-- IF posts.user.banned -->
<span class="label label-danger">[[user:banned]]</span> <span class="label label-danger">[[user:banned]]</span>
<!-- ENDIF posts.user.banned --> <!-- ENDIF posts.user.banned -->

12
templates/partials/topics_list.tpl
Unescape Escape View File

@ -8,12 +8,20 @@
<div class="avatar pull-left"> <div class="avatar pull-left">
<!-- IF showSelect --> <!-- IF showSelect -->
<div class="select fa-square-o"> <div class="select fa-square-o">
<img src="<!-- IF topics.thumb -->{topics.thumb}<!-- ELSE -->{topics.user.picture}<!-- ENDIF topics.thumb -->" class="img-circle user-img" /> <!-- IF topics.user.picture -->
{function.renderTopicImage}
<!-- ELSE -->
<div class="user-icon" style="background-color: {topics.user.icon:bgColor};" title="{topics.user.username}">{topics.user.icon:text}</div>
<!-- ENDIF topics.user.picture -->
<i class="fa fa-check"></i> <i class="fa fa-check"></i>
</div> </div>
<!-- ELSE --> <!-- ELSE -->
<a href="{config.relative_path}/user/{topics.user.userslug}" class="pull-left"> <a href="{config.relative_path}/user/{topics.user.userslug}" class="pull-left">
<img src="<!-- IF topics.thumb -->{topics.thumb}<!-- ELSE -->{topics.user.picture}<!-- ENDIF topics.thumb -->" class="img-circle user-img" title="{topics.user.username}"/> <!-- IF topics.user.picture -->
{function.renderTopicImage}
<!-- ELSE -->
<div class="user-icon" style="background-color: {topics.user.icon:bgColor};" title="{topics.user.username}">{topics.user.icon:text}</div>
<!-- ENDIF topics.user.picture -->
</a> </a>
<!-- ENDIF showSelect --> <!-- ENDIF showSelect -->
</div> </div>

8
templates/partials/users_list.tpl
Unescape Escape View File

@ -1,6 +1,12 @@
<!-- BEGIN users --> <!-- BEGIN users -->
<li class="users-box registered-user" data-uid="{users.uid}"> <li class="users-box registered-user" data-uid="{users.uid}">
<a href="{config.relative_path}/user/{users.userslug}"><img src="{users.picture}" /></a> <a href="{config.relative_path}/user/{users.userslug}">
<!-- IF users.picture -->
<img src="{users.picture}" />
<!-- ELSE -->
<div class="user-icon" style="background-color: {users.icon:bgColor};">{users.icon:text}</div>
<!-- ENDIF users.picture -->
</a>
<br/> <br/>
<div class="user-info"> <div class="user-info">
<span> <span>

Write Preview
Loading…
Cancel
Save