Tucker McKnight <tmcknight@instructure.com> | Sat Jul 25 2026
[WIP] add new commits list design to the commits page
54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74
})
)
),
m('div', data.patchPage.commits.map((commit) => {
return m('div', {
class: "bezel-gray p-2 my-2",
style: "max-width: 40rem;"
}, [
commit.isMerge ? m('span', {class: 'badge rounded-pill bg-primary me-1'}, 'merge') : null,
m('a', {
class: "fs-5",
href: nav.commit(commit.hash),
}, commit.message.split('\n').slice(0, 1)),
m('br'),
m('span', date(commit.date)),
m('br'),
m('span', commit.author),
m('p', {class: "commit-hash font-monospace mb-0"}, commit.hash),
])
})),
m('nav',
m('ul', {class: "pagination"},54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127
})
)
),
m('div', {class: "container"}, data.patchPage.commits.map((commit) => {
return [
m('div', {class: "row border py-2"}, [
m('div', {class: "col-lg-auto col-12 commit-date"}, [
m('span', {class: "date mb-1 me-2 font-monospace d-inline-block"}, '2026-04-01'),
m('span', {class: "bg-danger mb-1 badge rounded-pill d-inline-block"}, 'v1.2')
]),
m('div', {class: "col-12 col-md"}, [
m('div', {class: "row mb-1"},
m('a', {href: "#", class: "commit-msg"}, 'This one has a different style, and is responsive')
),
m('div', {class: "row mb-3 mb-lg-0"}, [
m('div', {class: "col d-flex flex-direction-row align-items-center flex-wrap"}, [
m('span', {class: "author me-2"}, 'Tucker McKnight'),
m('span', {class: "bg-primary badge rounded-pill me-2"}, 'tuckerm.us'),
m('span', {class: "copy-sha"}, [
m('span', {class: "sha font-monospace me-1"}, '123abc'),
m('a', {href: "#"}, 'Copy')
])
])
])
]),
m('div', {class: "col col-lg-4"}, [
m('div', {class: "row"}, [
m('div', {class: "col-auto language-names pe-1"}, [
m('div', 'js'),
m('div', 'css'),
m('div', 'md'),
m('div', 'other'),
]),
m('div', {class: "col ps-0"}, [
m('div', {class: "flex-grow-1 d-flex"}, [
m('div', {class: "lang-diff plus-1"}, '+510'),
m('div', {class: "lang-diff minus-1"}, '-245')
]),
m('div', {class: "flex-grow-1 d-flex"}, [
m('div', {class: "lang-diff plus-2 text-white"}, '+314'),
m('div', {class: "lang-diff minus-2 text-white"}, '-275')
]),
m('div', {class: "flex-grow-1 d-flex"}, [
m('div', {class: "lang-diff plus-3 text-white"}, '+45'),
m('div', {class: "lang-diff minus-3 text-white"}, '-20')
]),
m('div', {class: "flex-grow-1 d-flex"}, [
m('div', {class: "lang-diff plus-4 text-white"}, '+890'),
m('div', {class: "lang-diff minus-4 text-white"}, '-789')
])
])
])
])
]),
m('div', {
class: "bezel-gray p-2 my-2",
style: "max-width: 40rem;"
}, [
commit.isMerge ? m('span', {class: 'badge rounded-pill bg-primary me-1'}, 'merge') : null,
m('a', {
class: "fs-5",
href: nav.commit(commit.hash),
}, commit.message.split('\n').slice(0, 1)),
m('br'),
m('span', date(commit.date)),
m('br'),
m('span', commit.author),
m('p', {class: "commit-hash font-monospace mb-0"}, commit.hash),
])
]
})),
m('nav',
m('ul', {class: "pagination"},243 244 245 246 247
}
}
/* Commit page */
.hunk {
box-sizing: border-box;243 244 245 246 247 248 249 250 251 252 253 254 255 256 257 258 259 260
}
}
/* Commits page */
.commit-date {
display: flex;
align-items: center;
align-self: start;
flex-wrap: wrap;
}
@include media-breakpoint-up(md) {
.commit-date {
width: min-content;
}
}
/* Commit page */
.hunk {
box-sizing: border-box;