12 layout design #26
12 layout design #26
Conversation
agnesl10
commented
Nov 12, 2025
agnesl10
commented
- colors
- side bar
- nav bar
- kinda light to dark mode color matching
- upload page (sorta)
need to fix modal thing and the back drop problem
…e-capsule-frontend into 12-layout-design
christinac09
left a comment
christinac09
left a comment
There was a problem hiding this comment.
can you make sure all the files are formatted with prettier
and we should figure out dark mode stuff
app/components/FilterDropdown.vue
Outdated
|
|
||
| <style scoped></style> | ||
| <style scoped> | ||
| .label { |
There was a problem hiding this comment.
can't you do this with tailwind too
app/components/ConfirmModal.vue
Outdated
| <button @click="$emit('cancel')" class="rounded bg-gray-200 px-4 py-2 text-gray-700 hover:bg-gray-300">Cancel</button> | ||
| <button @click="$emit('confirm')" class="rounded bg-blue-600 px-4 py-2 text-white hover:bg-blue-700">Confirm</button> | ||
| <button @click="$emit('cancel')" class="rounded-xl bg-gray-200 px-4 py-2 text-gray-700 hover:bg-gray-300">Cancel</button> | ||
| <button @click="$emit('confirm')" class="rounded=xl bg-secondary rounded px-4 py-2 text-white hover:bg-[#3E69A3]">Confirm</button> |
| }); | ||
| </script> | ||
|
|
||
| <style scoped> |
There was a problem hiding this comment.
can't you put this in tailwind
There was a problem hiding this comment.
i did most of it, but font family is way too complicated in tailwind so i js left it there
app/pages/index.vue
Outdated
| @confirm="deletePhoto(deletePhotoIndex)" | ||
| /> | ||
| </div> | ||
| <div class="uploadnav"> |
There was a problem hiding this comment.
add the nuxtlink to the upload page
app/pages/upload.vue
Outdated
| @@ -1,7 +1,20 @@ | |||
| <template> | |||
| <div class="bg-base-200 text-base-content flex min-h-screen items-center justify-center p-6 pt-20"> | |||
| <div class="dropdown"> | |||
There was a problem hiding this comment.
why is this here
its already in navbar
app/components/PhotoCard.vue
Outdated
|
|
||
| <div class="tooltip" data-tip="Delete"> | ||
| <button class="btn btn-circle btn-ghost btn-sm content-center text-center" @click="emit('delete')"> | ||
| <img v-if="store.theme === 'light'" src="/trash-outline.svg" aria-hidden="true" class="h-5 opacity-60 select-none" draggable="false" /> |
There was a problem hiding this comment.
for this also this prob isn't the best way to do this we should be using classes
There was a problem hiding this comment.
theres not even any difference between these imgs ??
There was a problem hiding this comment.
yeahhh sooo we gotta get the icon problem figured out
| <h2 class="mb-6 text-xl font-bold">Filters</h2> | ||
| <div v-if="!isCollapsed" class="align-center border-base-300 dark:border-base-300 w-full items-center border-r p-4 shadow-sm"> | ||
| <div class="header w-full content-center items-center"> | ||
| <img v-if="store.theme === 'light'" src="/filterlight.svg" class="w-full scale-75 items-center" alt="header" /> |
app/components/SideBar.vue
Outdated
| <label class="label dark:invert"> | ||
| <span class="label-text">Upload Date</span> | ||
| <label class="label w-full"> | ||
| <span v-if="store.theme === 'light'" class="label-text m-4 w-full text-center text-xl tracking-widest text-black">Upload Date</span> |
app/components/SideBar.vue
Outdated
| <span class="label-text">People (comma-separated)</span> | ||
| <div class="w-full content-center items-center"> | ||
| <label for="people" class="flex w-full flex-col items-center"> | ||
| <span v-if="store.theme === 'light'" class="mt-4 mb-0 text-xl leading-none tracking-widest text-black">People</span> |
There was a problem hiding this comment.
^
and doesn't dark:invert does work on most of the text?
There was a problem hiding this comment.
no it doesnt---- it kinda broke everything
app/components/SideBar.vue
Outdated
| <button type="button" class="btn btn-xs btn-circle btn-ghost" @click="removePerson(index)"> | ||
| <img src="/close-outline.svg" aria-hidden="true" class="h-4 opacity-50 select-none dark:invert" draggable="false" /> | ||
| <div class="contents-center w-full items-center text-center"> | ||
| <button v-if="store.theme === 'light'" type="reset" class="btn btn-outline-[#779FD3] mb-2 w-full bg-[#779FD3] text-center font-normal text-white hover:bg-[#567CAD]" @click="resetInputs"> |
| <label :for="category" class="label dark:text-neutral-content"> | ||
| <span class="label-text dark:invert">{{ category }}</span> | ||
| <label :for="category" class="label"> | ||
| <span v-if="store.theme === 'light'" class="label-text text-[#5d6a7b]">{{ category }}</span> |
There was a problem hiding this comment.
https://tailwindcss.com/docs/dark-mode#toggling-dark-mode-manually
and whenever the theme changes, just toggle the dark class on document.body
and then u can just do text-wtv dark:text-wtv
but yea definitely do not make separate elements just for dark mode
| </div> | ||
| <div class="navbar-center"> | ||
| <a class="btn btn-ghost text-xl">TimeCapsule</a> | ||
| <img v-if="store.theme === 'light'" src="/logo.svg" alt="logo" class="scale-85" /> |
There was a problem hiding this comment.
can just change the src instead of rendering new element
<img :src="store.theme === 'light' ? '/logo.svg' : '/logodark.svg'" ... />
app/components/PhotoCard.vue
Outdated
|
|
||
| <div class="tooltip" data-tip="Delete"> | ||
| <button class="btn btn-circle btn-ghost btn-sm content-center text-center" @click="emit('delete')"> | ||
| <img v-if="store.theme === 'light'" src="/trash-outline.svg" aria-hidden="true" class="h-5 opacity-60 select-none" draggable="false" /> |
There was a problem hiding this comment.
theres not even any difference between these imgs ??
