mirror of
https://github.com/lukaszraczylo/ghtracker.git
synced 2026-10-14 00:58:36 +00:00
lukaszraczylo
ac5eb2f16a
At 1024px the project list took 24rem and squeezed the alert column to about 500px, which clipped the search box and filter counts. The list now sits beside the alerts from 1280px. The alert cards use two columns from 90rem, so a 1440px screen no longer shows one very wide column.
19 lines
630 B
TypeScript
19 lines
630 B
TypeScript
import { onBeforeUnmount, onMounted, ref, type Ref } from 'vue'
|
|
|
|
/** 1 column below the breakpoint, 2 at or above it; follows the viewport live. */
|
|
export function useColumns(minWidth = '(min-width: 90rem)'): Ref<number> {
|
|
const columns = ref(1)
|
|
let query: MediaQueryList | null = null
|
|
const update = () => {
|
|
columns.value = query?.matches ? 2 : 1
|
|
}
|
|
onMounted(() => {
|
|
if (typeof window.matchMedia !== 'function') return
|
|
query = window.matchMedia(minWidth)
|
|
update()
|
|
query.addEventListener('change', update)
|
|
})
|
|
onBeforeUnmount(() => query?.removeEventListener('change', update))
|
|
return columns
|
|
}
|