Skip to content

Commit

Permalink
redesign repos + cosmetics
Browse files Browse the repository at this point in the history
  • Loading branch information
@dzikoysk
dzikoysk committed Nov 3, 2024
1 parent 1ea5de4 commit dbe2e73
Show file tree
Hide file tree
Showing 4 changed files with 64 additions and 63 deletions.
10 changes: 10 additions & 0 deletions reposilite-backend/src/main/kotlin/com/reposilite/ui/views/IndexView.kt
View file
Original file line number Diff line number Diff line change
Expand Up @@ -39,4 +39,14 @@ data class IndexView(
val name: String,
) : Entry
}
data class GroupedRepository(
val type: String,
val repositories: List<Repository>
)
fun getGroupedRepositories(): List<GroupedRepository> =
repositories
.groupBy { it.type }
.entries
.map { GroupedRepository(type = it.key, repositories = it.value) }
.sortedByDescending { it.repositories.size }
}
2 changes: 2 additions & 0 deletions reposilite-test/workspace/ui/component/Head.jte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,8 @@
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!--suppress HtmlUnknownTarget -->
<link rel="icon" href="/favicon.png" type="image/x-icon">
<title>${title}</title>

@template.lib.Theme()
Expand Down
24 changes: 15 additions & 9 deletions reposilite-test/workspace/ui/component/Header.jte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,16 +8,22 @@
<div class="h-4 w-4">
@template.lib.icons.SearchIcon()
</div>
<input class="w-full text-sm bg-white dark:bg-zinc-800 py-1.5 rounded-full px-3 focus-visible:outline-none focus-visible:ring-0 placeholder:focus-visible:text-white" placeholder="Search" />
<input
class="w-full text-sm bg-white dark:bg-zinc-800 py-1.5 px-3 focus-visible:outline-none focus-visible:ring-0 placeholder:focus-visible:text-white"
placeholder="Search"
/>
</div>
<nav>
<button id="theme-switcher" class="flex bg-white dark:bg-zinc-800 rounded-full px-2 py-2">
<span class="sun-icon color-white">
@template.lib.icons.SunIcon()
</span>
<span class="moon-icon color-black">
@template.lib.icons.MoonIcon()
</span>
<nav class="flex gap-2">
<button class="bg-white dark:bg-zinc-800 px-3 py-0.5 rounded-md text-sm">
Sign in
</button>
<button id="theme-switcher" class="flex bg-white dark:bg-zinc-800 rounded-md px-2 py-1.5">
<span class="sun-icon color-white">
@template.lib.icons.SunIcon()
</span>
<span class="moon-icon color-black">
@template.lib.icons.MoonIcon()
</span>
</button>
</nav>
</nav>
Expand Down
91 changes: 37 additions & 54 deletions reposilite-test/workspace/ui/index.jte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -25,24 +25,29 @@
</p>
</div>
</div>
<div class="flex justify-between flex-wrap w-full pt-12 gap-2">
<div class="flex justify-between flex-wrap w-full pt-14 gap-2">
@for(Project project : view.getHighlightedProjects())
<div class="flex flex-1 flex-col justify-between border rounded-md border-white shadow-sm dark:border-zinc-700 min-w-1/3 max-w-1/3 px-4 pt-3 pb-4 bg-white dark:bg-zinc-800">
<div class="
flex flex-1 flex-col justify-between
min-w-1/3 max-w-1/3 px-4 pt-3 pb-4
border rounded-md border-white shadow-sm dark:border-zinc-700
bg-white dark:bg-zinc-800
">
<div class="flex-col">
<h2 class="font-bold">${project.getName()}</h2>
<p class="text-wrap break-normal text-sm pt-1">${project.getDescription()}</p>
</div>
<div class="flex pt-3 gap-2">
@for(String packageName : project.getSupportedPackages())
<p class="text-sm">
<p class="text-xs">
@if(packageName.equals("Generic"))
<span class="px-3 py-0.5 bg-zinc-500 text-black rounded-full">Generic</span>
<span class="px-3 py-0.5 bg-zinc-300 text-black rounded-full">Generic</span>
@elseif(packageName.equals("Maven"))
<span class="px-3 py-0.5 bg-orange-500 text-black rounded-full">Maven</span>
<span class="px-3 py-0.5 bg-orange-300 text-black rounded-full">Maven</span>
@elseif(packageName.equals("Docker"))
<span class="px-3 py-0.5 bg-blue-500 text-black rounded-full">Docker</span>
<span class="px-3 py-0.5 bg-blue-300 text-black rounded-full">Docker</span>
@elseif(packageName.equals("NPM"))
<span class="px-3 py-0.5 bg-yellow-500 text-black rounded-full">NPM</span>
<span class="px-3 py-0.5 bg-yellow-200 text-black rounded-full">NPM</span>
@endif
</p>
@endfor
Expand All @@ -54,56 +59,34 @@
<hr class="border-zinc-200 dark:border-zinc-700" />
</div>
<div class="flex">
<div class="flex flex-col gap-2">
@for(IndexView.Repository repository : view.getRepositories())
<div class="flex flex-1 bg-white dark:bg-zinc-800 rounded-md items-center min-w-44">
<div class="
@if(repository.getType().equals("Generic"))
bg-zinc-500
@elseif(repository.getType().equals("Maven"))
bg-orange-500
@elseif(repository.getType().equals("Docker"))
bg-blue-500
@elseif(repository.getType().equals("NPM"))
bg-yellow-500
@endif
w-1 h-full">
</div>
<a href="/${repository.getName()}" class="h-full w-full">
<div class="flex justify-between h-full w-full">
<p class="px-5 py-3 text-sm font-bold">${repository.getName().toUpperCase()}</p>
<div class="w-2 h-full
@if(view.getBrowsedRepository() != null && repository.getName().equals(view.getBrowsedRepository().getName()))
bg-white dark:bg-zinc-800
@else
bg-zinc-100 dark:bg-zinc-900
<div class="flex flex-wrap items-center w-full gap-2">
@for(var group : view.getGroupedRepositories())
<div class="
flex flex-col flex-1 px-4 py-3 h-full
bg-white dark:bg-zinc-800 border border-white shadow-sm dark:border-zinc-700 rounded-md
">
<h2 class="font-semibold pb-1.5">${group.getType()}</h2>
<div class="flex flex-col px-0.5">
@for(IndexView.Repository repository : group.getRepositories())
<div class="flex flex-1 items-center gap-2">
<div class="w-2 h-2 rounded-md
@if(repository.getType().equals("Generic"))
bg-zinc-300
@elseif(repository.getType().equals("Maven"))
bg-orange-300
@elseif(repository.getType().equals("Docker"))
bg-blue-300
@elseif(repository.getType().equals("NPM"))
bg-yellow-200
@endif
"></div>
</div>
</a>
</div>
@endfor
</div>
<div class="flex flex-col w-full">
@if (view.getBrowsedRepository() == null)
<%-- <input class="w-full bg-white dark:bg-zinc-800 rounded-sm py-2.5 px-3" placeholder="🔍 Search" />--%>
@else
<div class="bg-white dark:bg-zinc-800 w-fit px-4 py-2 rounded-md min-w-44">
@for(IndexView.BrowsedRepository.Entry entry : view.getBrowsedRepository().getFiles())
@if (entry instanceof IndexView.BrowsedRepository.Directory directory)
<div class="py-1 flex items-center gap-3">
<div class="bg-yellow-300 w-2 h-2 mt-0.5 rounded-full"></div>
<p>${directory.getName()}</p>
">
</div>
<p class="px-2 py-1.5 text-sm">${repository.getName()}</p>
</div>
@elseif (entry instanceof IndexView.BrowsedRepository.File file)
<div class="py-1 flex items-center gap-3">
<div class="bg-white w-2 h-2 mt-0.5 rounded-full"></div>
<p>${file.getName()}</p>
</div>
@endif
@endfor
@endfor
</div>
</div>
@endif
@endfor
</div>
</div>

Expand Down

0 comments on commit dbe2e73

Please sign in to comment.