1
0
mirror of https://github.com/hrfee/jfa-go.git synced 2024-12-23 01:20:11 +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:
Harvey Tindall 2020-08-19 15:34:16 +01:00
parent 6781316474
commit 8fc9ed1c3c
Signed by: hrfee
GPG Key ID: BBC65952848FB1A2
2 changed files with 18 additions and 4 deletions

View File

@ -147,8 +147,8 @@ function addItem(parsedInvite) {
let code = document.createElement('div'); let code = document.createElement('div');
code.classList.add('d-flex', 'align-items-center', 'font-monospace'); code.classList.add('d-flex', 'align-items-center', 'font-monospace');
code.setAttribute('style', 'width: 40%;');
let codeLink = document.createElement('a'); let codeLink = document.createElement('a');
codeLink.setAttribute('style', 'margin-right: 0.5rem;');
codeLink.textContent = parsedInvite[0].replace(/-/g, '-'); codeLink.textContent = parsedInvite[0].replace(/-/g, '-');
code.appendChild(codeLink); code.appendChild(codeLink);
@ -156,6 +156,7 @@ function addItem(parsedInvite) {
listItem.appendChild(code); listItem.appendChild(code);
let listRight = document.createElement('div'); let listRight = document.createElement('div');
listRight.setAttribute('style', 'text-align: right;');
let listText = document.createElement('span'); let listText = document.createElement('span');
listText.id = parsedInvite[0] + '_expiry'; listText.id = parsedInvite[0] + '_expiry';
listText.setAttribute('style', 'margin-right: 1rem;'); listText.setAttribute('style', 'margin-right: 1rem;');
@ -167,9 +168,11 @@ function addItem(parsedInvite) {
let inviteCode = window.location.href.split('#')[0] + 'invite/' + parsedInvite[0]; let inviteCode = window.location.href.split('#')[0] + 'invite/' + parsedInvite[0];
// //
codeLink.href = inviteCode; codeLink.href = inviteCode;
codeLink.classList.add('invite-link');
let copyButton = document.createElement('i'); let copyButton = document.createElement('i');
copyButton.onclick = function() { toClipboard(inviteCode); }; copyButton.onclick = function() { toClipboard(inviteCode); };
copyButton.classList.add('fa', 'fa-clipboard', 'icon-button'); copyButton.classList.add('fa', 'fa-clipboard', 'icon-button');
copyButton.setAttribute('style', 'margin-right: 0.5rem; margin-left: 0.5rem;');
code.appendChild(copyButton); code.appendChild(copyButton);
@ -190,9 +193,12 @@ function addItem(parsedInvite) {
deleteButton.classList.add('btn', 'btn-outline-danger'); deleteButton.classList.add('btn', 'btn-outline-danger');
deleteButton.textContent = "Delete"; 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'); let dropButton = document.createElement('i');
dropButton.classList.add('fa', 'fa-angle-down', 'collapsed', 'icon-button', 'not-rotated'); 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('data-toggle', 'collapse');
dropButton.setAttribute('aria-expanded', 'false'); dropButton.setAttribute('aria-expanded', 'false');
dropButton.setAttribute('data-target', '#' + CSS.escape(parsedInvite[0]) + '_collapse'); dropButton.setAttribute('data-target', '#' + CSS.escape(parsedInvite[0]) + '_collapse');
@ -206,7 +212,8 @@ function addItem(parsedInvite) {
} }
}; };
dropButton.setAttribute('style', 'margin-left: 1rem;'); dropButton.setAttribute('style', 'margin-left: 1rem;');
listRight.appendChild(dropButton); block.appendChild(dropButton);
listRight.appendChild(block);
} }
listItem.appendChild(listRight); listItem.appendChild(listRight);

View File

@ -117,6 +117,13 @@
-o-transition: all 150ms cubic-bezier(0.770, 0.000, 0.175, 1.000); -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 */ 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> </style>
<title>Admin</title> <title>Admin</title>
</head> </head>
@ -280,7 +287,7 @@
</select> </select>
</div> </div>
</div> </div>
<div class="col"> <div class="col-md-auto">
<div class="form-group"> <div class="form-group">
<label for="multiUseCount"> <label for="multiUseCount">
Multiple uses Multiple uses