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
parent
53d6869c25
commit
c32ff5707b
7 changed files with 65 additions and 36 deletions
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
||||
|
|
|
|||
|
|
@ -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; }
|
||||
|
|
|
|||
|
|
@ -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 |
12
public/assets/images/icons/crown.svg
Normal file
12
public/assets/images/icons/crown.svg
Normal 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 |
Loading…
Reference in a new issue