Shiloh/githaven
Shiloh/githaven
1
0
Fork 1
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

Fix Citation modal responsiveness and clipboard copy (#29799)

Browse Source 
The modal was broken in two ways:

- On small screens, the input box was partially hanging outside the
modal. Fixed with flexbox and increased modal width.
- The clipboard copy was not working because the modal had both
`data-clipboard-text` and `data-clipboard-target`, while we only support
one of those. Made a small tweak in clipboard as well so that it will
still fall back to target if text is empty.
This commit is contained in:
silverwind 2024-03-15 03:38:13 +01:00 committed by GitHub
parent 256a1eeb9a
commit 94512ee062
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
4 changed files with 12 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
templates/repo/cite/cite_buttons.tmpl
View File

@ -6,6 +6,6 @@ BibTeX
</button> </button>
<!-- the value will be updated by initCitationFileCopyContent, the code below is used to avoid UI flicking --> <!-- the value will be updated by initCitationFileCopyContent, the code below is used to avoid UI flicking -->
<input id="citation-copy-content" value="" size="1" readonly> <input id="citation-copy-content" value="" size="1" readonly>
<button class="ui icon button" id="citation-clipboard-btn" data-tooltip-content="{{ctx.Locale.Tr "copy"}}" data-clipboard-text="" data-clipboard-target="#citation-copy-content"> <button class="ui icon button" id="citation-clipboard-btn" data-tooltip-content="{{ctx.Locale.Tr "copy"}}" data-clipboard-target="#citation-copy-content">
{{svg "octicon-copy"}} {{svg "octicon-copy"}}
</button> </button>

4
templates/repo/cite/cite_modal.tmpl
View File

@ -1,10 +1,9 @@
<div class="ui tiny modal" id="cite-repo-modal"> <div class="ui small modal" id="cite-repo-modal">
<div class="header"> <div class="header">
{{ctx.Locale.Tr "repo.cite_this_repo"}} {{ctx.Locale.Tr "repo.cite_this_repo"}}
</div> </div>
<div class="content"> <div class="content">
<div class="ui stackable secondary menu"> <div class="ui stackable secondary menu">
<div class="fitted item">
<div class="ui action input" id="citation-panel"> <div class="ui action input" id="citation-panel">
{{template "repo/cite/cite_buttons" .}} {{template "repo/cite/cite_buttons" .}}
<a id="goto-citation-btn" class="ui basic jump icon button" href="{{$.RepoLink}}/src/{{$.BranchName}}/CITATION.cff" data-tooltip-content="{{ctx.Locale.Tr "repo.find_file.go_to_file"}}"> <a id="goto-citation-btn" class="ui basic jump icon button" href="{{$.RepoLink}}/src/{{$.BranchName}}/CITATION.cff" data-tooltip-content="{{ctx.Locale.Tr "repo.find_file.go_to_file"}}">
@ -13,7 +12,6 @@
</div> </div>
</div> </div>
</div> </div>
</div>
<div class="actions"> <div class="actions">
<button class="ui cancel button"> <button class="ui cancel button">
{{ctx.Locale.Tr "cancel"}} {{ctx.Locale.Tr "cancel"}}

8
web_src/css/repo.css
View File

@ -2035,14 +2035,9 @@
} }
#cite-repo-modal #citation-panel { #cite-repo-modal #citation-panel {
width: 500px; display: flex;
}
@media (max-width: 767.98px) {
#cite-repo-modal #citation-panel {
width: 100%; width: 100%;
} }
}
#cite-repo-modal #citation-panel input { #cite-repo-modal #citation-panel input {
border-radius: 0; border-radius: 0;
@ -2061,6 +2056,7 @@
padding: 5px 10px; padding: 5px 10px;
font-size: 1.2em; font-size: 1.2em;
line-height: 1.4; line-height: 1.4;
flex: 1;
} }
#cite-repo-modal #citation-panel #citation-copy-apa, #cite-repo-modal #citation-panel #citation-copy-apa,

6
web_src/js/features/clipboard.js
View File

@ -15,10 +15,8 @@ export function initGlobalCopyToClipboardListener() {
e.preventDefault(); e.preventDefault();
let text; let text = target.getAttribute('data-clipboard-text');
if (target.hasAttribute('data-clipboard-text')) { if (!text) {
text = target.getAttribute('data-clipboard-text');
} else {
text = document.querySelector(target.getAttribute('data-clipboard-target'))?.value; text = document.querySelector(target.getAttribute('data-clipboard-target'))?.value;
} }