3fbaa79c6e
- Apparently `<input>` elements differ from other elements have a size attribute that act as a `min-width` CSS property, this causes a overflow on mobile. By setting this size to `1` it doesn't try to force a min-width and nicely shrink down.
24 lines
1.1 KiB
Handlebars
24 lines
1.1 KiB
Handlebars
<!-- there is always at least one button (by context/repo.go) -->
|
|
{{if $.CloneButtonShowHTTPS}}
|
|
<button class="ui basic clone button no-transition" id="repo-clone-https" data-link="{{$.CloneButtonOriginLink.HTTPS}}">
|
|
{{if UseHTTPS}}HTTPS{{else}}HTTP{{end}}
|
|
</button>
|
|
{{end}}
|
|
{{if $.CloneButtonShowSSH}}
|
|
<button class="ui basic clone button no-transition" id="repo-clone-ssh" data-link="{{$.CloneButtonOriginLink.SSH}}">
|
|
SSH
|
|
</button>
|
|
{{end}}
|
|
<!-- the value will be updated by initRepoCloneLink, the code below is used to avoid UI flicking -->
|
|
<input id="repo-clone-url" value="" size="1" readonly>
|
|
<script>
|
|
(() => {
|
|
const proto = localStorage.getItem('repo-clone-protocol') || 'https';
|
|
const btn = document.getElementById(`repo-clone-${proto}`);
|
|
// it's ok if we don't find the btn here, initRepoCloneLink will take care of it
|
|
document.getElementById('repo-clone-url').value = btn ? btn.getAttribute('data-link') : '';
|
|
})();
|
|
</script>
|
|
<button class="ui basic icon button tooltip" id="clipboard-btn" data-content="{{.i18n.Tr "copy_url"}}" data-clipboard-target="#repo-clone-url">
|
|
{{svg "octicon-paste"}}
|
|
</button>
|