Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat(web): UX improvements for Repo and Cluster Views #110

Draft
wants to merge 1 commit into
base: main
Choose a base branch
from
Draft

feat(web): UX improvements for Repo and Cluster Views #110

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 4 additions & 4 deletions packages/web/app/components/GitHubIssue.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -39,9 +39,9 @@ function labelColors(color: string) {
</script>

<template>
<article class="flex flex-row gap-2 leading-tightest">
<span class="flex-shrink-0 inline-block w-5 h-5 i-tabler-circle-dot text-green-500" />
<div class="flex flex-row gap-2 flex-wrap md:flex-nowrap md:pb-6 flex-grow">
<article class="border-solid border border-gray-600 rounded-md max-w-full overflow-hidden flex flex-row gap-2 leading-tightest">
<span class="flex-shrink-0 inline-block h-5 i-tabler-circle-dot text-green-500" />
<div class="flex flex-col flex-wrap md:flex-nowrap md:pb-2 flex-grow">
<NuxtLink
class="line-clamp-1 flex-grow text-sm md:text-base lg:flex-grow-0 no-underline color-current hover:underline"
:href="url"
Expand All @@ -50,7 +50,7 @@ function labelColors(color: string) {
{{ title?.trim() }}
</NuxtLink>
<div
class="text-xs relative md:absolute md:mt-6 text-gray-400 mb-1"
class=" text-xs relative md:mt-1 text-gray-400 mb-1 break-words"
>
<NuxtLink
v-if="owner && repository"
Expand Down
6 changes: 4 additions & 2 deletions packages/web/app/pages/[owner]/[repo]/index.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -160,13 +160,14 @@ const openState = reactive<Record<string, boolean>>({})
</section>
</template>
<template v-else>
<section class="grid grid-cols-4 gap-4 ">
<section
v-for="(cluster, c) of clusters"
:key="c"
:style="{ '--section-index': c }"
class="flex flex-col gap-4 md:rounded-md md:border-solid md:border border-gray-700 md:px-4 pb-8 mt-6 columns-1 lg:columns-2 border-b-solid"
class=" overflow-hidden flex flex-col gap-4 md:rounded-md md:border-solid md:border border-gray-700 md:px-4 pb-8 mt-6 columns-1 lg:columns-2 border-b-solid"
>
<h2 class="my-4 font-bold text-2xl flex items-baseline">
<h2 class=" my-4 font-bold text-2xl flex items-baseline">
<span class="text-gray-500 inline-block mr-1 font-normal">#</span>{{ c + 1 }}
<span class="ml-2 font-normal text-lg color-gray-300">&mdash; {{ cluster.title }}</span>
<span class="ml-auto text-white bg-gray-700 text-sm font-normal rounded-full px-2 py-0.5 whitespace-pre border-solid border-1 border-gray-700 inline-block leading-tight flex items-center">
Expand Down Expand Up @@ -195,6 +196,7 @@ const openState = reactive<Record<string, boolean>>({})
show {{ cluster.issues.length - 5 }} more
</button>
</section>
</section>
</template>
</div>
</template>
Expand Down