mirror/php-phpbb
1
0
Fork 0
mirror of https://github.com/phpbb/phpbb.git synced 2025-07-09 11:24:35 +02:00
Code Issues Releases Wiki Activity

[ticket/13713] Fix styles for mentions

Browse Source 
PHPBB3-13713
This commit is contained in:
lavigor
2018-06-21 01:13:29 +03:00
committed by Marc Alexander
parent b66d298dde
commit ad97751d68
8 changed files with 219 additions and 146 deletions
Download Patch File Download Diff File Expand all files Collapse all files

123
phpBB/adm/style/admin.css
View File

@ -1676,76 +1676,99 @@ fieldset.submit-buttons legend {
font-weight: bold;
}
.atwho-view {
background: #ffffff;
border: 1px solid #dddddd;
border-radius: 3px;
box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
color: #000000;
.atwho-view { /* mention-container */
text-align: left;
background-color: #ffffff;
border-radius: 2px;
box-shadow:
0 3px 1px -2px rgba(0, 0, 0, 0.2),
0 2px 2px 0 rgba(0, 0, 0, 0.14),
0 1px 5px 0 rgba(0, 0, 0, 0.12);
position: absolute;
z-index: 11110 !important;
top: 0;
left: 0;
display: none;
min-width: 260px;
margin-top: 18px;
z-index: 999;
top: 20px;
overflow: auto;
transition: all 0.2s ease;
}
.atwho-view-ul {
overflow-y: auto;
max-height: 200px;
margin: auto;
.rtl .atwho-view { /* mention-container */
text-align: right;
}
.atwho-view-ul { /* mention-list */
margin: 0;
padding: 0;
list-style: none;
list-style-type: none;
}
.mention-name {
font-size: 12px;
.mention-media {
color: #757575;
display: inline-flex;
flex-shrink: 0;
justify-content: center;
align-items: center;
margin-right: 10px;
margin-left: 0;
}
.rtl .mention-media {
margin-right: 0;
margin-left: 10px;
}
.mention-media-avatar {
font-size: 32px;
line-height: 36px;
text-align: center;
vertical-align: center;
width: 36px;
height: 36px;
}
.mention-item {
font-size: 14px;
font-weight: 400;
line-height: 1.5;
letter-spacing: 0.04em;
border-bottom: 1px solid #dddddd;
color: #212121;
position: relative;
display: block;
padding: 15px 5px 15px 45px;
display: flex;
overflow: hidden;
justify-content: flex-start;
align-items: center;
max-width: 300px;
padding: 10px;
cursor: pointer;
}
.rtl .mention-name {
padding-right: 45px;
padding-left: 15px;
.mention-item:hover,
.mention-item.cur {
text-decoration: none;
background-color: #eeeeee;
color: #2d80d2;
}
.mention-name:hover,
.mention-name.cur {
background-color: #0077b3;
color: #ffffff;
.mention-item:hover .mention-media-avatar,
.mention-item.cur .mention-media-avatar {
color: #2d80d2;
}
.mention-avatar {
font-size: 14px;
line-height: 30px;
text-align: center;
vertical-align: middle;
background-color: #0077b3;
border: 1px solid #ffffff;
border-radius: 100%;
color: #ffffff;
position: absolute;
top: 50%;
left: 7px;
display: inline-block;
width: 30px;
height: 30px;
margin-top: -16px;
.mention-name,
.mention-rank {
display: block;
}
.rtl .mention-avatar {
right: 7px;
left: auto;
.mention-name {
line-height: 1.25;
}
.mention-rank {
font-size: 10px;
display: block;
margin-top: 2px;
font-size: 12px;
font-weight: 400;
line-height: 1.2871;
letter-spacing: 0.04em;
color: #757575;
}
/* Input field styles

10
phpBB/assets/javascript/editor.js
View File

@ -386,17 +386,17 @@ function getCaretPosition(txtarea) {
(function($) {
function handle_mentions(txtarea) {
var $mentionDataContainer = $('#format-buttons'),
var $mentionDataContainer = $('[data-mention-url]'),
mentionURL = $mentionDataContainer.data('mentionUrl'),
mentionNamesLimit = $mentionDataContainer.data('mentionNamesLimit'),
mentionTopicId = $mentionDataContainer.data('topicId');
$(txtarea).atwho({
at: "@",
displayTpl: function(data) {
var avatar = (data.avatar.src) ? "<img src='" + data.avatar.src + "'>" :
"<span class='mention-avatar'><i class='fa fa-" + data.avatar.type + "'></i></span>",
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>",
rank = (data.rank) ? "<span class='mention-rank'>" + data.rank + "</span>" : '';
return "<li class='mention-name'>" + avatar + "<span>" + data.name + "</span>" + rank + "</li>";
return "<li class='mention-item'><span class='mention-media'>" + avatar + "</span><span class='mention-name'>" + data.name + rank + "</span></li>";
},
insertTpl: "[mention ${param}=${id}]${name}[/mention]",
limit: mentionNamesLimit,
@ -436,7 +436,7 @@ function getCaretPosition(txtarea) {
phpbb.showDragNDrop(textarea);
}
if ($('#mention_params').length) {
if ($('[data-mention-url]').length) {
handle_mentions(textarea);
}

29
phpBB/styles/prosilver/theme/bidi.css
View File

@ -365,6 +365,24 @@
float: left;
}
/**
* mentions.css
*/
/* Mention block
---------------------------------------- */
/* Mention dropdown
---------------------------------------- */
.rtl .atwho-view { /* mention-container */
text-align: right;
}
.rtl .mention-media {
margin-right: 0;
margin-left: 10px;
}
/**
* content.css
*/
@ -930,17 +948,6 @@
float: left;
}
/* Mention dropdown */
.rtl .mention-name {
padding-right: 45px;
padding-left: 15px;
}
.rtl .mention-avatar {
right: 7px;
left: auto;
}
/* Search box
---------------------------------------- */

58
phpBB/styles/prosilver/theme/colours.css
View File

@ -369,6 +369,41 @@ p.post-notice {
background-image: none;
}
/* colours and backgrounds for mentions.css */
/* mention dropdown */
.atwho-view { /* mention-container */
background-color: #ffffff;
box-shadow:
0 3px 1px -2px rgba(0, 0, 0, 0.2),
0 2px 2px 0 rgba(0, 0, 0, 0.14),
0 1px 5px 0 rgba(0, 0, 0, 0.12);
}
.mention-media {
color: #757575;
}
.mention-item {
border-bottom-color: #dddddd;
color: #212121;
}
.mention-item:hover,
.mention-item.cur {
background-color: #eeeeee;
color: #2d80d2;
}
.mention-item:hover .mention-media-avatar,
.mention-item.cur .mention-media-avatar {
color: #2d80d2;
}
.mention-rank {
color: #757575;
}
/* colours and backgrounds for content.css */
ul.forums {
background-color: #edf4f7;
@ -983,29 +1018,6 @@ fieldset.fields2 dl:hover dt label {
outline-color: rgba(19, 164, 236, 0.5);
}
.atwho-view {
background: #ffffff;
border-color: #dddddd;
box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
color: #000000;
}
.mention-name {
border-bottom-color: #dddddd;
}
.mention-name:hover,
.mention-name.cur {
background-color: #0077b3;
color: #ffffff;
}
.mention-avatar {
background-color: #0077b3;
border-color: #ffffff;
color: #ffffff;
}
/* input field styles */
.inputbox {
background-color: #ffffff;

5
phpBB/styles/prosilver/theme/content.css
View File

@ -576,11 +576,6 @@ blockquote .codebox {
padding: 5px 3px;
}
/* Mention block */
.mention {
font-weight: bold;
}
/* Attachments
---------------------------------------- */
.attachbox {

52
phpBB/styles/prosilver/theme/forms.css
View File

@ -284,58 +284,6 @@ fieldset.submit-buttons input {
margin: 3px;
}
/* Mention dropdown */
.atwho-view {
border: 1px solid transparent;
border-radius: 3px;
position: absolute;
z-index: 11110 !important;
top: 0;
left: 0;
display: none;
min-width: 260px;
margin-top: 18px;
}
.atwho-view-ul {
overflow-y: auto;
max-height: 200px;
margin: auto;
padding: 0;
list-style: none;
}
.mention-name {
font-size: 12px;
border-bottom: 1px solid transparent;
position: relative;
display: block;
padding: 15px 5px 15px 45px;
cursor: pointer;
}
.mention-avatar {
font-size: 14px;
line-height: 30px;
text-align: center;
vertical-align: middle;
border: 1px solid transparent;
border-radius: 100%;
position: absolute;
top: 50%;
left: 7px;
display: inline-block;
width: 30px;
height: 30px;
margin-top: -16px;
}
.mention-rank {
font-size: 10px;
display: block;
margin-top: 2px;
}
/* Input field styles
---------------------------------------- */
.inputbox {

87
phpBB/styles/prosilver/theme/mentions.css Normal file
View File

@ -0,0 +1,87 @@
/* -------------------------------------------------------------- /*
$Mentions
/* -------------------------------------------------------------- */
/* stylelint-disable selector-max-compound-selectors */
/* stylelint-disable selector-no-qualifying-type */
/* Mention block
---------------------------------------- */
.mention {
font-weight: bold;
}
/* Mention dropdown
---------------------------------------- */
.atwho-view { /* mention-container */
text-align: left;
border-radius: 2px;
position: absolute;
z-index: 999;
top: 20px;
overflow: auto;
transition: all 0.2s ease;
}
.atwho-view-ul { /* mention-list */
margin: 0;
padding: 0;
list-style-type: none;
}
.mention-media {
display: inline-flex;
flex-shrink: 0;
justify-content: center;
align-items: center;
margin-right: 10px;
margin-left: 0;
}
.mention-media-avatar {
font-size: 32px;
line-height: 36px;
text-align: center;
vertical-align: center;
width: 36px;
height: 36px;
}
.mention-item {
font-size: 14px;
font-weight: 400;
line-height: 1.5;
letter-spacing: 0.04em;
border-bottom: 1px solid transparent;
position: relative;
display: flex;
overflow: hidden;
justify-content: flex-start;
align-items: center;
max-width: 300px;
padding: 10px;
cursor: pointer;
}
.mention-item:hover {
text-decoration: none;
}
.mention-name,
.mention-rank {
display: block;
}
.mention-name {
line-height: 1.25;
}
.mention-rank {
font-size: 12px;
font-weight: 400;
line-height: 1.2871;
letter-spacing: 0.04em;
}
/* stylelint-enable selector-max-compound-selectors */
/* stylelint-enable selector-no-qualifying-type */

1
phpBB/styles/prosilver/theme/stylesheet.css
View File

@ -14,6 +14,7 @@
@import url("common.css?hash=658f990b");
@import url("buttons.css?hash=eb16911f");
@import url("links.css?hash=5fec3654");
@import url("mentions.css?hash=a67fa183");
@import url("content.css?hash=f7bdea58");
@import url("buttons.css?hash=eb16911f");
@import url("cp.css?hash=73c6f37d");