mirror of
https://github.com/phpbb/phpbb.git
synced 2025-06-08 04:18:52 +00:00
[ticket/13713] Use SVGs and the styling by @hanakin
PHPBB3-13713
This commit is contained in:
parent
ad97751d68
commit
659928f042
4 changed files with 27 additions and 24 deletions
|
@ -1707,26 +1707,26 @@ fieldset.submit-buttons legend {
|
|||
flex-shrink: 0;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
margin-right: 10px;
|
||||
margin-right: 16px;
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
.rtl .mention-media {
|
||||
margin-right: 0;
|
||||
margin-left: 10px;
|
||||
margin-left: 16px;
|
||||
}
|
||||
|
||||
.mention-media-avatar {
|
||||
font-size: 32px;
|
||||
line-height: 36px;
|
||||
text-align: center;
|
||||
vertical-align: center;
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
}
|
||||
|
||||
svg.mention-media-avatar { /* TODO: remove it after general normalization */
|
||||
fill: currentColor;
|
||||
}
|
||||
|
||||
.mention-item {
|
||||
font-size: 14px;
|
||||
font-size: 16px;
|
||||
font-weight: 400;
|
||||
line-height: 1.5;
|
||||
letter-spacing: 0.04em;
|
||||
|
@ -1738,7 +1738,7 @@ fieldset.submit-buttons legend {
|
|||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
max-width: 300px;
|
||||
padding: 10px;
|
||||
padding: 16px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
|
@ -1764,7 +1764,7 @@ fieldset.submit-buttons legend {
|
|||
}
|
||||
|
||||
.mention-rank {
|
||||
font-size: 12px;
|
||||
font-size: 14px;
|
||||
font-weight: 400;
|
||||
line-height: 1.2871;
|
||||
letter-spacing: 0.04em;
|
||||
|
|
|
@ -385,6 +385,10 @@ function getCaretPosition(txtarea) {
|
|||
}
|
||||
|
||||
(function($) {
|
||||
function mention_default_avatar(type) {
|
||||
return (type === 'group') ? '<svg class="mention-media-avatar" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24"><path fill-rule="evenodd" d="M16 11c1.66 0 2.99-1.34 2.99-3S17.66 5 16 5c-1.66 0-3 1.34-3 3s1.34 3 3 3zm-8 0c1.66 0 2.99-1.34 2.99-3S9.66 5 8 5C6.34 5 5 6.34 5 8s1.34 3 3 3zm0 2c-2.33 0-7 1.17-7 3.5V19h14v-2.5c0-2.33-4.67-3.5-7-3.5zm8 0c-.29 0-.62.02-.97.05 1.16.84 1.97 1.97 1.97 3.45V19h6v-2.5c0-2.33-4.67-3.5-7-3.5z"/></svg>' : '<svg class="mention-media-avatar" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24"><path fill-rule="evenodd" d="M12,19.2C9.5,19.2 7.29,17.92 6,16C6.03,14 10,12.9 12,12.9C14,12.9 17.97,14 18,16C16.71,17.92 14.5,19.2 12,19.2M12,5A3,3 0 0,1 15,8A3,3 0 0,1 12,11A3,3 0 0,1 9,8A3,3 0 0,1 12,5M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12C22,6.47 17.5,2 12,2Z"/></svg>';
|
||||
}
|
||||
|
||||
function handle_mentions(txtarea) {
|
||||
var $mentionDataContainer = $('[data-mention-url]'),
|
||||
mentionURL = $mentionDataContainer.data('mentionUrl'),
|
||||
|
@ -393,8 +397,7 @@ function getCaretPosition(txtarea) {
|
|||
$(txtarea).atwho({
|
||||
at: "@",
|
||||
displayTpl: function(data) {
|
||||
var avatar = (data.avatar.src) ? "<img src='" + data.avatar.src + "' class='mention-media-avatar'>" :
|
||||
"<i class='mention-media-avatar fa fa-" + data.avatar.type + "'></i>",
|
||||
var avatar = (data.avatar.src) ? "<img src='" + data.avatar.src + "' class='mention-media-avatar'>" : mention_default_avatar(data.avatar.type),
|
||||
rank = (data.rank) ? "<span class='mention-rank'>" + data.rank + "</span>" : '';
|
||||
return "<li class='mention-item'><span class='mention-media'>" + avatar + "</span><span class='mention-name'>" + data.name + rank + "</span></li>";
|
||||
},
|
||||
|
|
|
@ -380,7 +380,7 @@
|
|||
|
||||
.rtl .mention-media {
|
||||
margin-right: 0;
|
||||
margin-left: 10px;
|
||||
margin-left: 16px;
|
||||
}
|
||||
|
||||
/**
|
||||
|
|
|
@ -34,21 +34,21 @@
|
|||
flex-shrink: 0;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
margin-right: 10px;
|
||||
margin-right: 16px;
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
.mention-media-avatar {
|
||||
font-size: 32px;
|
||||
line-height: 36px;
|
||||
text-align: center;
|
||||
vertical-align: center;
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
}
|
||||
|
||||
svg.mention-media-avatar { /* TODO: remove it after general normalization */
|
||||
fill: currentColor;
|
||||
}
|
||||
|
||||
.mention-item {
|
||||
font-size: 14px;
|
||||
font-size: 16px;
|
||||
font-weight: 400;
|
||||
line-height: 1.5;
|
||||
letter-spacing: 0.04em;
|
||||
|
@ -59,7 +59,7 @@
|
|||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
max-width: 300px;
|
||||
padding: 10px;
|
||||
padding: 16px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
|
@ -77,7 +77,7 @@
|
|||
}
|
||||
|
||||
.mention-rank {
|
||||
font-size: 12px;
|
||||
font-size: 14px;
|
||||
font-weight: 400;
|
||||
line-height: 1.2871;
|
||||
letter-spacing: 0.04em;
|
||||
|
|
Loading…
Add table
Reference in a new issue