Skip to content

Commit

Permalink
refact: ui: use mobile layout in desktop (#216)
Browse files Browse the repository at this point in the history
  • Loading branch information
crlssn authored Dec 13, 2024
1 parent 7a75553 commit 766ec89
Show file tree
Hide file tree
Showing 9 changed files with 135 additions and 248 deletions.
2 changes: 1 addition & 1 deletion web/src/ui/components/AppBackdrop.vue
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@ const close = () => {
</script>

<template>
<div v-if="open" class="z-20 fixed inset-0 bg-black opacity-50" @click="close" />
<div v-if="open" class="z-30 fixed inset-0 bg-black opacity-50" @click="close" />
</template>

<style scoped></style>
2 changes: 1 addition & 1 deletion web/src/ui/components/AppButton.vue
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,7 @@ const computedClasses = computed(() => {
</script>

<template>
<div :class="containerClass">
<div :class="containerClass" class="lg:px-0">
<RouterLink v-if="props.type === 'link'" :to="props.to as string" :class="computedClasses">
<slot />
</RouterLink>
Expand Down
1 change: 1 addition & 0 deletions web/src/ui/components/AppList.vue
Original file line number Diff line number Diff line change
Expand Up @@ -25,6 +25,7 @@ const onFetch = async () => {
<style scoped>
ul {
@apply divide-y divide-gray-100 bg-white border-t border-b border-gray-200 mb-4;
@apply lg:rounded-md lg:border-x;
li.fetching {
@apply h-16 flex justify-center items-center text-gray-800;
Expand Down
1 change: 1 addition & 0 deletions web/src/ui/components/AppListItemInput.vue
Original file line number Diff line number Diff line change
Expand Up @@ -43,5 +43,6 @@ const onChange = () => {
<style scoped>
input {
@apply block w-full border-0 bg-white px-4 py-5 text-gray-900 focus:ring-0 placeholder:text-gray-400 font-medium;
@apply lg:rounded-md;
}
</style>
Original file line number Diff line number Diff line change
Expand Up @@ -39,22 +39,27 @@ const navigation = [

<template>
<nav>
<RouterLink v-for="item in navigation" :key="item.href" :to="item.href" class="relative">
<component :is="isActive(item.href) ? item.iconActive : item.icon" class="h-6 w-6" />
<span
v-if="item.href === '/notifications' && notificationStore.unreadCount > 0"
class="badge"
>
{{ notificationStore.unreadCount }}
</span>
</RouterLink>
<div class="container">
<RouterLink v-for="item in navigation" :key="item.href" :to="item.href" class="relative">
<component :is="isActive(item.href) ? item.iconActive : item.icon" class="h-6 w-6" />
<span
v-if="item.href === '/notifications' && notificationStore.unreadCount > 0"
class="badge"
>
{{ notificationStore.unreadCount }}
</span>
</RouterLink>
</div>
</nav>
</template>

<style scoped>
nav {
@apply fixed w-full bottom-0 z-10 h-16 px-8 bg-white border-t-2 border-gray-200;
@apply lg:hidden flex justify-between items-center;
@apply fixed w-full bottom-0 z-10 bg-white border-t-2 border-gray-200;
.container {
@apply flex justify-between items-center max-w-7xl h-16 px-8 mx-auto;
}
}
.badge {
Expand Down
94 changes: 94 additions & 0 deletions web/src/ui/components/AppNavTop.vue
Original file line number Diff line number Diff line change
@@ -0,0 +1,94 @@
<script setup lang="ts">
import { type User } from '@/proto/api/v1/shared_pb.ts'
import { nextTick, ref } from 'vue'
import { searchUsers } from '@/http/requests.ts'
import { usePageTitleStore } from '@/stores/pageTitle.ts'
import { MagnifyingGlassIcon } from '@heroicons/vue/20/solid'
import { XMarkIcon } from '@heroicons/vue/24/outline'
const searchBarOpen = ref(false)
const input = ref<HTMLInputElement | null>(null)
const users = ref(Array<User>())
const pageTitleStore = usePageTitleStore()
const openSearchBar = () => {
searchBarOpen.value = true
nextTick(() => {
input.value?.focus()
})
}
const closeSearchBar = () => {
users.value = []
searchBarOpen.value = false
}
const onSearchUsers = async () => {
if (!input.value) return
if ((input.value.value?.length ?? 0) < 3) {
users.value = []
return
}
const res = await searchUsers(input.value.value, new Uint8Array(0))
if (!res) return
users.value = res.users
}
</script>

<template>
<nav>
<div class="container">
<template v-if="searchBarOpen">
<form class="w-full">
<input
ref="input"
type="text"
class="w-full text-sm border-none focus:ring-0"
placeholder="Search users"
@keyup="onSearchUsers"
/>
</form>
<ul
v-if="users.length > 0"
class="absolute bg-gray-100 border-b-white border-b-2 left-0 right-0 top-16 divide-y divide-white max-w-7xl mx-auto lg:rounded-b-md"
>
<li v-for="user in users" :key="user.id" @click="closeSearchBar">
<RouterLink :to="`/users/${user.id}`" class="block px-5 py-5 text-sm font-medium">
{{ user.firstName }} {{ user.lastName }}
</RouterLink>
</li>
</ul>
<XMarkIcon class="w-8 h-6 cursor-pointer" @click="closeSearchBar" />
</template>
<template v-else>
<RouterLink to="/">
<img class="h-auto w-8" src="/favicon.png" />
</RouterLink>
<div class="flex flex-1 gap-x-4 justify-center">
<p class="uppercase text-sm font-semibold text-gray-900">
{{ pageTitleStore.pageTitle }}
</p>
</div>
<MagnifyingGlassIcon class="w-8 h-6 cursor-pointer" @click="openSearchBar" />
</template>
</div>
</nav>
<div
v-if="searchBarOpen"
class="fixed z-20 top-0 left-0 right-0 bottom-0 bg-black opacity-50"
@click="closeSearchBar"
/>
</template>

<style scoped>
nav {
@apply sticky top-0 z-30 border-b-2 border-gray-200 bg-white;
.container {
@apply flex items-center justify-between max-w-7xl mx-auto gap-x-4 px-4 h-16;
}
}
</style>
10 changes: 5 additions & 5 deletions web/src/ui/components/CardWorkout.vue
Original file line number Diff line number Diff line change
Expand Up @@ -60,9 +60,9 @@ const formatComment = computed(() => {
<template>
<div
v-if="!workoutDeleted"
class="divide-y divide-gray-100 bg-white mb-4 border-t border-b border-gray-200"
class="divide-y divide-gray-100 bg-white mb-4 border-t border-b border-gray-200 lg:rounded-md lg:border-x"
>
<div class="px-4 py-3">
<div class="px-4 py-4">
<div class="flex items-center justify-between">
<div class="flex items-center">
<UserCircleIcon class="size-10 text-gray-900" />
Expand All @@ -76,7 +76,7 @@ const formatComment = computed(() => {
<DropdownButton v-if="workout.user?.id === authStore.userID" :items="dropdownItems" />
</div>
</div>
<div class="pl-16 pr-4 py-3">
<div class="pl-16 pr-4 py-4">
<CardWorkoutExercise
v-for="exerciseSet in workout.exerciseSets"
:key="exerciseSet.exercise?.id"
Expand All @@ -85,15 +85,15 @@ const formatComment = computed(() => {
:sets="exerciseSet.sets"
/>
</div>
<div class="pl-16 pr-4 py-3">
<div class="pl-16 pr-4 py-4">
<RouterLink
:to="`/workouts/${workout.id}`"
class="pl-1 text-sm text-gray-900 uppercase font-medium"
>
{{ workout.comments.length }} {{ formatComment }}
</RouterLink>
</div>
<div v-if="!compact" class="px-4 py-3">
<div v-if="!compact" class="px-4 py-4">
<CardWorkoutComment
v-for="comment in comments"
:key="comment.id"
Expand Down
Loading

0 comments on commit 766ec89

Please sign in to comment.