add vip crown

todo for martin:
- seperate avatar html into template
- don't add the crown if the user is the logged-in user?
This commit is contained in:
Felix Niklas 2015-09-15 12:42:13 +02:00
parent 53d6869c25
commit c32ff5707b
7 changed files with 65 additions and 36 deletions

View file

@ -61,10 +61,13 @@ class App.User extends App.Model
if !@image || @image is 'none' || unique
return @uniqueAvatar(size, placement, cssClass, avatar)
else
if @vip
cssClass += " vip"
image = @imageUrl()
"<span class=\"avatar user-popover #{cssClass}\" data-id=\"#{@id}\" style=\"background-image: url(#{image})\" #{placement}></span>"
# TODO: don't show vip when its the avatar of the logged-in user
if @vip
return "<span class=\"avatar user-popover #{cssClass}\" data-id=\"#{@id}\" style=\"background-image: url(#{image})\" #{placement}><svg class='icon icon-crown'><use xlink:href='#icon-crown'></svg></span>"
else
return "<span class=\"avatar user-popover #{cssClass}\" data-id=\"#{@id}\" style=\"background-image: url(#{image})\" #{placement}></span>"
uniqueAvatar: (size, placement = '', cssClass = '', avatar) ->
width = 300
@ -82,8 +85,9 @@ class App.User extends App.Model
data = "data-avatar-id=\"#{avatar.id}\""
if @vip
cssClass += " vip"
"<span class=\"avatar unique #{cssClass}\" #{data} style=\"background-position: -#{ x }px -#{ y }px;\" #{placement}>#{ @initials() }</span>"
return "<span class=\"avatar unique #{cssClass}\" #{data} style=\"background-position: -#{ x }px -#{ y }px;\" #{placement}><svg class='icon icon-crown'><use xlink:href='#icon-crown'></svg>#{ @initials() }</span>"
else
return "<span class=\"avatar unique #{cssClass}\" #{data} style=\"background-position: -#{ x }px -#{ y }px;\" #{placement}>#{ @initials() }</span>"
imageUrl: ->
return if !@image

View file

@ -28,6 +28,20 @@
<p><code>.avatar.size-80</code></p>
<h2>VIP Avatars</h2>
<div class="avatar avatar--vip" style="background-image: url(https://pbs.twimg.com/profile_images/1216362658/DSC_0084-p_bigger.jpg)"><svg class='icon icon-crown'><use xlink:href='#icon-crown'></svg></div>
<p><code>.avatar</code></p>
<div class="avatar avatar--vip size-50" style="background-image: url(https://pbs.twimg.com/profile_images/1216362658/DSC_0084-p_bigger.jpg)"><svg class='icon icon-crown'><use xlink:href='#icon-crown'></svg></div>
<p><code>.avatar.size-50</code></p>
<div class="avatar avatar--vip size-80" style="background-image: url(https://pbs.twimg.com/profile_images/1216362658/DSC_0084-p_bigger.jpg)"><svg class='icon icon-crown'><use xlink:href='#icon-crown'></svg></div>
<p><code>.avatar.size-80</code></p>
<h2>Unique Avatars</h2>

View file

@ -9,6 +9,7 @@
.icon-clock { width: 16px; height: 16px; }
.icon-cloud { width: 16px; height: 16px; }
.icon-cog { width: 20px; height: 20px; }
.icon-crown { width: 32px; height: 27px; }
.icon-dashboard { width: 24px; height: 24px; }
.icon-diagonal-cross { width: 13px; height: 13px; }
.icon-download { width: 14px; height: 13px; }

View file

@ -2542,24 +2542,35 @@ footer {
border-radius: 100%;
display: inline-block;
vertical-align: bottom;
}
:not(.navigation) .avatar.vip {
border: 2px dotted;
border-color: #fff;
position: relative;
.icon-crown {
position: absolute;
width: 16px;
top: -12px;
left: 0;
}
.avatar.size-50 {
&.size-50 {
width: 50px;
height: 50px;
.icon-crown {
width: 20px;
}
}
.avatar.size-80 {
&.size-80 {
width: 82px;
height: 82px;
.icon-crown {
width: 32px;
top: -11px;
}
}
.unique.avatar {
&.unique {
background-image: image_url("/assets/images/avatar-bg.png");
background-size: auto;
color: white;
@ -2570,31 +2581,18 @@ footer {
text-transform: uppercase;
text-shadow: 0 1px rgba(0,0,0,.2);
cursor: default;
}
:not(.navigation) .unique.avatar.vip {
border: 2px dotted;
line-height: 36px;
}
&.size-50 {
font-size: 16px;
line-height: 52px;
}
.unique.avatar.size-50 {
font-size: 16px;
line-height: 52px;
}
:not(.navigation) .unique.avatar.size-50.vip {
line-height: 46px;
}
.unique.avatar.size-80 {
font-size: 20px;
line-height: 84px;
}
:not(.navigation) .unique.avatar.size-80.vip {
font-size: 20px;
line-height: 78px;
&.size-80 {
font-size: 20px;
line-height: 84px;
}
}
}
.sidebar {
width: 32%;

Binary file not shown.

File diff suppressed because one or more lines are too long

Before

Width:  |  Height:  |  Size: 50 KiB

After

Width:  |  Height:  |  Size: 51 KiB

View file

@ -0,0 +1,12 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg width="32px" height="27px" viewBox="0 0 32 27" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
<!-- Generator: Sketch 3.3.3 (12072) - http://www.bohemiancoding.com/sketch -->
<title>crown</title>
<desc>Created with Sketch.</desc>
<defs></defs>
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">
<g id="crown" sketch:type="MSArtboardGroup" fill="#FFEC00">
<path d="M30.1634955,9.17391304 L30.1634955,20.4782609 L2.33740854,20.4782609 L2.33740854,9.17391304 C1.73709903,9.17391304 1.25045202,8.68726603 1.25045202,8.08695652 C1.25045202,7.48664701 1.73709903,7 2.33740854,7 C2.93771805,7 3.42436506,7.48664701 3.42436506,8.08695652 C3.42436506,8.53544627 3.15274074,8.92049476 2.76502515,9.08656894 L2.76502515,9.08656894 L9.29393028,14.3913044 L15.8228354,9.08656894 L15.8228354,9.08656894 C15.4351198,8.92049476 15.1634955,8.53544627 15.1634955,8.08695652 C15.1634955,7.48664701 15.6501425,7 16.250452,7 C16.8507615,7 17.3374085,7.48664701 17.3374085,8.08695652 C17.3374085,8.53544627 17.0657842,8.92049476 16.6780686,9.08656894 L23.2069738,14.3913044 L29.7358789,9.08656894 C29.3481633,8.92049476 29.076539,8.53544627 29.076539,8.08695652 C29.076539,7.48664701 29.563186,7 30.1634955,7 C30.763805,7 31.250452,7.48664701 31.250452,8.08695652 C31.250452,8.68726603 30.763805,9.17391304 30.1634955,9.17391304 Z" id="Path-1-Copy-4" sketch:type="MSShapeGroup" transform="translate(16.250452, 13.739130) rotate(-33.000000) translate(-16.250452, -13.739130) "></path>
</g>
</g>
</svg>

After

Width:  |  Height:  |  Size: 1.7 KiB