mirror of
https://github.com/hrfee/jfa-go.git
synced 2024-12-22 09:00:10 +00:00
Improve mobile experience
the generate invite box now wraps into 1 column automatically. the invite code is ellipsized on small displays. the dropdown button has a large tappable area, and is aligned correctly.
This commit is contained in:
parent
6781316474
commit
8fc9ed1c3c
@ -147,8 +147,8 @@ function addItem(parsedInvite) {
|
||||
|
||||
let code = document.createElement('div');
|
||||
code.classList.add('d-flex', 'align-items-center', 'font-monospace');
|
||||
code.setAttribute('style', 'width: 40%;');
|
||||
let codeLink = document.createElement('a');
|
||||
codeLink.setAttribute('style', 'margin-right: 0.5rem;');
|
||||
codeLink.textContent = parsedInvite[0].replace(/-/g, '-');
|
||||
|
||||
code.appendChild(codeLink);
|
||||
@ -156,6 +156,7 @@ function addItem(parsedInvite) {
|
||||
listItem.appendChild(code);
|
||||
|
||||
let listRight = document.createElement('div');
|
||||
listRight.setAttribute('style', 'text-align: right;');
|
||||
let listText = document.createElement('span');
|
||||
listText.id = parsedInvite[0] + '_expiry';
|
||||
listText.setAttribute('style', 'margin-right: 1rem;');
|
||||
@ -167,9 +168,11 @@ function addItem(parsedInvite) {
|
||||
let inviteCode = window.location.href.split('#')[0] + 'invite/' + parsedInvite[0];
|
||||
//
|
||||
codeLink.href = inviteCode;
|
||||
codeLink.classList.add('invite-link');
|
||||
let copyButton = document.createElement('i');
|
||||
copyButton.onclick = function() { toClipboard(inviteCode); };
|
||||
copyButton.classList.add('fa', 'fa-clipboard', 'icon-button');
|
||||
copyButton.setAttribute('style', 'margin-right: 0.5rem; margin-left: 0.5rem;');
|
||||
|
||||
code.appendChild(copyButton);
|
||||
|
||||
@ -190,9 +193,12 @@ function addItem(parsedInvite) {
|
||||
deleteButton.classList.add('btn', 'btn-outline-danger');
|
||||
deleteButton.textContent = "Delete";
|
||||
|
||||
listRight.appendChild(deleteButton);
|
||||
let block = document.createElement('div');
|
||||
block.setAttribute('styile', 'display: inline-block;');
|
||||
block.appendChild(deleteButton);
|
||||
let dropButton = document.createElement('i');
|
||||
dropButton.classList.add('fa', 'fa-angle-down', 'collapsed', 'icon-button', 'not-rotated');
|
||||
dropButton.setAttribute('style', 'padding: 1rem; margin: -1rem -1rem -1rem 0;');
|
||||
dropButton.setAttribute('data-toggle', 'collapse');
|
||||
dropButton.setAttribute('aria-expanded', 'false');
|
||||
dropButton.setAttribute('data-target', '#' + CSS.escape(parsedInvite[0]) + '_collapse');
|
||||
@ -206,7 +212,8 @@ function addItem(parsedInvite) {
|
||||
}
|
||||
};
|
||||
dropButton.setAttribute('style', 'margin-left: 1rem;');
|
||||
listRight.appendChild(dropButton);
|
||||
block.appendChild(dropButton);
|
||||
listRight.appendChild(block);
|
||||
}
|
||||
|
||||
listItem.appendChild(listRight);
|
||||
|
@ -117,6 +117,13 @@
|
||||
-o-transition: all 150ms cubic-bezier(0.770, 0.000, 0.175, 1.000);
|
||||
transition: all 150ms cubic-bezier(0.770, 0.000, 0.175, 1.000); /* easeInOutQuart */
|
||||
}
|
||||
|
||||
.invite-link {
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
width: auto;
|
||||
}
|
||||
</style>
|
||||
<title>Admin</title>
|
||||
</head>
|
||||
@ -280,7 +287,7 @@
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col">
|
||||
<div class="col-md-auto">
|
||||
<div class="form-group">
|
||||
<label for="multiUseCount">
|
||||
Multiple uses
|
||||
|
Loading…
Reference in New Issue
Block a user