Tucker McKnight <tmcknight@instructure.com> | Sun Aug 09 2026
Remove the Clone dropdown button, just have it always show up instead Having it be in a dropdown doesn't add anything useful, since there's only one clone optional. There is no interactive content inside of the dropdown, it can just be hard-coded. No need to have the separate noscript content now, then. Some restyling of the extra homepage buttons, too. Make them smaller and a little more subtle, and give them the drop shadow, now that the clone button isn't there with the drop shadow.
19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48
}, 5000)
}
const createClonePopover = (popoverBtn, url) => {
const div = document.createElement('div')
// div.id = "clone-popover"
div.innerHTML = `
<label class='form-label'>HTTPS URL</label>
<div class='input-group d-flex flex-nowrap'>
<span class='clone overflow-scroll input-group-text'>${url || window.cloneUrl}</span>
<button data-copy-text='${url || window.cloneUrl}' class='btn btn-primary shadow-none text-white' id='copy-button'>Copy</button>
</div>`
div.querySelector("#copy-button").addEventListener('click', copyCommand)
// const popoverBtn = document.querySelector(".clone-popover-btn")
const bsPopover = new bootstrap.Popover(popoverBtn, {
sanitize: false,
html: true,
content: div,
title: 'Clone',
placement: 'bottom',
container: 'body',
})
window.popovers.push(bsPopover)
}
const toggleLastTouch = (event) => {
const isOn = event.target.checked
setShowLastTouch(isOn)19 20 21 22 23
}, 5000)
}
const toggleLastTouch = (event) => {
const isOn = event.target.checked
setShowLastTouch(isOn)145 146 147 148 149 150 151 152
const jsVars = window.jsVars
window.popovers ||= []
document.querySelectorAll('.clone-popover-btn').forEach((button) => {
createClonePopover(button, button.dataset['copyText'])
})
document.querySelectorAll(".copy-button").forEach((button) => {
button.addEventListener('click', copyCommand)
})145 146 147 148 149
const jsVars = window.jsVars
window.popovers ||= []
document.querySelectorAll(".copy-button").forEach((button) => {
button.addEventListener('click', copyCommand)
})48 49 50 51 52 53
window.defaultBranch = "${repo.defaultBranch}";
window.currentRef = "${ref.name}";
window.currentRefType = "${data.currentRefType}";
window.cloneUrl = "${repo.cloneUrl}";
`)),
// TODO: don't include prism.css if the user doesn't have the syntaxHighlight plugin
// also allow them to use a custom prism theme48 49 50 51 52
window.defaultBranch = "${repo.defaultBranch}";
window.currentRef = "${ref.name}";
window.currentRefType = "${data.currentRefType}";
`)),
// TODO: don't include prism.css if the user doesn't have the syntaxHighlight plugin
// also allow them to use a custom prism theme154 155 156 157 158 159 160 161 162 163
]),
m('div', {class: "row align-items-center"}, [
m('div', {class: "col-12"}, [
m('div', {class: "header-button-container"}, [
m('button', {class: "btn btn-info btn-lg dropdown-toggle clone-popover-btn"}, 'Clone'),
nav.homepageButtons.map((buttonConfig) => {
return m('a', {
class: "btn btn-outline-info btn-lg shadow-none",
href: buttonConfig.url,
target: buttonConfig.newTab ? "_blank" : "_self"
}, m.trust(buttonConfig.text + `${buttonConfig.newTab ? ' <span>⧉</span>' : ''}`))154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170
]),
m('div', {class: "row align-items-center"}, [
m('div', {class: "col-12"}, [
m('div', { class: 'clone-text-group input-group flex-nowrap mt-3' }, [
m('label', { class: 'input-group-text' }, 'Clone URL'),
m('span', {class: 'clone overflow-scroll input-group-text flex-grow-1'}, repo.cloneUrl),
m('button', {
class: 'btn btn-info shadow-none copy-button',
['data-copy-text']: repo.cloneUrl,
}, 'Copy' )
]),
m('div', {class: "header-button-container"}, [
nav.homepageButtons.map((buttonConfig) => {
return m('a', {
class: "btn btn-secondary",
href: buttonConfig.url,
target: buttonConfig.newTab ? "_blank" : "_self"
}, m.trust(buttonConfig.text + `${buttonConfig.newTab ? ' <span>⧉</span>' : ''}`))168 169 170 171 172 173 174 175 176 177 178 179 180 181
])
])
]),
m('noscript',
m('div', {class: "row mt-2"},
m('div', {class: "col"},
m('p', {class: "font-monospace text-white"},
`Clone URL: ${repo.cloneUrl}`
)
)
)
),
])
])
]),168 169 170 171 172
])
])
]),
])
])
]),70 71 72 73 74
border-right: 6px solid color.adjust($lightblue, $lightness: -40%);
}
@include color-mode(dark) {
$blue: #354BC6;
70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89
border-right: 6px solid color.adjust($lightblue, $lightness: -40%);
}
.clone-text-group {
border: 1px solid $info;
label.input-group-text {
color: white;
border: none;
background-color: color.adjust(#7388FA, $lightness: -3%);
}
span.input-group-text {
color: white;
border: none;
background: none;
}
}
@include color-mode(dark) {
$blue: #354BC6;
81 82 83 84 85
border-right: 6px solid color.adjust($blue, $lightness: -18%);
}
.nav-item a {
color: $lightblue;
}81 82 83 84 85 86 87 88 89 90 91
border-right: 6px solid color.adjust($blue, $lightness: -18%);
}
.clone-text-group {
label.input-group-text {
background-color: color.adjust($blue, $lightness: 3%);
}
}
.nav-item a {
color: $lightblue;
}