[ticket/13713] Fix styles for mention dropdown

PHPBB3-13713
This commit is contained in:
lavigor 2018-06-15 02:38:48 +03:00 committed by Marc Alexander
parent 31e4fb4729
commit 50400cb785
No known key found for this signature in database
GPG key ID: 50E0D2423696F995
8 changed files with 75 additions and 16 deletions

View file

@ -11,7 +11,6 @@
<!-- IF S_ALLOW_MENTIONS -->
<div id="mention_params" style="display: none;" data-mention-url="{U_MENTION_URL}" data-mention-names-limit="{S_MENTION_NAMES_LIMIT}" data-topic-id="{S_TOPIC_ID}"></div>
<!-- ENDIF -->
<!-- INCLUDECSS {T_ASSETS_PATH}/css/jquery.atwho.min.css -->
<!-- INCLUDEJS {T_ASSETS_PATH}/javascript/jquery.caret.min.js -->
<!-- INCLUDEJS {T_ASSETS_PATH}/javascript/jquery.atwho.min.js -->
<!-- INCLUDEJS {T_ASSETS_PATH}/javascript/editor.js -->

View file

@ -1676,18 +1676,45 @@ fieldset.submit-buttons legend {
font-weight: bold;
}
.atwho-container .atwho-view {
font-size: 12px;
.atwho-view {
background: #ffffff;
border: 1px solid #dddddd;
border-radius: 3px;
box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
color: #000000;
position: absolute;
z-index: 11110 !important;
top: 0;
left: 0;
display: none;
min-width: 260px;
margin-top: 18px;
}
.atwho-container .atwho-view ul li {
.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 #dddddd;
position: relative;
display: block;
padding: 15px 5px 15px 45px;
cursor: pointer;
}
.atwho-container .atwho-view ul li:hover,
.atwho-container .atwho-view ul li.cur {
.rtl .mention-name {
padding-right: 45px;
padding-left: 15px;
}
.mention-name:hover,
.mention-name.cur {
background-color: #0077b3;
color: #ffffff;
}
@ -1710,6 +1737,11 @@ fieldset.submit-buttons legend {
margin-top: -16px;
}
.rtl .mention-avatar {
right: 7px;
left: auto;
}
.mention-rank {
font-size: 10px;
display: block;

View file

@ -1 +0,0 @@
.atwho-view{position:absolute;top:0;left:0;display:none;margin-top:18px;background:#fff;color:#000;border:1px solid #DDD;border-radius:3px;box-shadow:0 0 5px rgba(0,0,0,.1);min-width:120px;z-index:11110!important}.atwho-view .atwho-header{padding:5px;margin:5px;cursor:pointer;border-bottom:solid 1px #eaeff1;color:#6f8092;font-size:11px;font-weight:700}.atwho-view .atwho-header .small{color:#6f8092;float:right;padding-top:2px;margin-right:-5px;font-size:12px;font-weight:400}.atwho-view .atwho-header:hover{cursor:default}.atwho-view .cur{background:#36F;color:#fff}.atwho-view .cur small{color:#fff}.atwho-view strong{color:#36F}.atwho-view .cur strong{color:#fff;font:700}.atwho-view ul{list-style:none;padding:0;margin:auto;max-height:200px;overflow-y:auto}.atwho-view ul li{display:block;padding:5px 10px;border-bottom:1px solid #DDD;cursor:pointer}.atwho-view small{font-size:smaller;color:#777;font-weight:400}

View file

@ -396,7 +396,7 @@ function getCaretPosition(txtarea) {
var avatar = (data.avatar.src) ? "<img src='" + data.avatar.src + "'>" :
"<span class='mention-avatar'><i class='fa fa-" + data.avatar.type + "'></i></span>",
rank = (data.rank) ? "<span class='mention-rank'>" + data.rank + "</span>" : '';
return "<li>" + avatar + "<span>" + data.name + "</span>" + rank + "</li>";
return "<li class='mention-name'>" + avatar + "<span>" + data.name + "</span>" + rank + "</li>";
},
insertTpl: "[mention ${param}=${id}]${name}[/mention]",
limit: mentionNamesLimit,

View file

@ -29,7 +29,6 @@
<!-- IF S_ALLOW_MENTIONS -->
<div id="mention_params" style="display: none;" data-mention-url="{U_MENTION_URL}" data-mention-names-limit="{S_MENTION_NAMES_LIMIT}" data-topic-id="{S_TOPIC_ID}"></div>
<!-- ENDIF -->
<!-- INCLUDECSS {T_ASSETS_PATH}/css/jquery.atwho.min.css -->
<!-- INCLUDEJS {T_ASSETS_PATH}/javascript/jquery.caret.min.js -->
<!-- INCLUDEJS {T_ASSETS_PATH}/javascript/jquery.atwho.min.js -->
<!-- INCLUDEJS {T_ASSETS_PATH}/javascript/editor.js -->

View file

@ -931,12 +931,12 @@
}
/* Mention dropdown */
.atwho-container .atwho-view ul li {
.rtl .mention-name {
padding-right: 45px;
padding-left: 15px;
}
.mention-avatar {
.rtl .mention-avatar {
right: 7px;
left: auto;
}

View file

@ -983,8 +983,19 @@ fieldset.fields2 dl:hover dt label {
outline-color: rgba(19, 164, 236, 0.5);
}
.atwho-container .atwho-view ul li:hover,
.atwho-container .atwho-view ul li.cur {
.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;
}

View file

@ -285,14 +285,33 @@ fieldset.submit-buttons input {
}
/* Mention dropdown */
.atwho-container .atwho-view {
font-size: 12px;
.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-container .atwho-view ul li {
.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 {