{{ item.value.body }}
{{ messageTime(item.value.created_at) }} @@ -845,45 +1461,151 @@ onMounted(async () => { />
-
+
@@ -449,126 +541,144 @@ onMounted(loadMonth)
.calendar {
+ --color-primary: transparent;
--accent: #ff3b30;
--bg: #000;
--elevated: #1c1c1e;
@@ -854,7 +975,7 @@ onMounted(loadMonth)
--muted: #6e6e73;
}
-.calendar button,
+.calendar button:not(.k-fab),
.calendar input,
.calendar textarea {
border: 0;
@@ -862,101 +983,52 @@ onMounted(loadMonth)
font: inherit;
}
-.calendar button {
+.calendar button:not(.k-fab) {
cursor: pointer;
}
.calendar__toolbar {
position: relative;
z-index: 8;
- height: 64px;
- padding: 10px 14px;
- display: grid;
- grid-template-columns: minmax(0, 1fr) auto;
- align-items: center;
- gap: 7px;
-}
-
-.calendar__glass-button {
- width: 40px;
- height: 40px;
- padding: 0;
- border: 1px solid var(--line) !important;
- border-radius: 50%;
- display: grid;
- place-items: center;
- background: var(--glass);
- box-shadow:
- inset 0 1px 0 rgb(255 255 255 / 16%),
- 0 4px 14px rgb(0 0 0 / 14%);
- backdrop-filter: blur(18px) saturate(170%);
- -webkit-backdrop-filter: blur(18px) saturate(170%);
-}
-
-.calendar__glass-button--accent {
- background: var(--accent);
- color: #fff !important;
-}
-
-.calendar__month-title {
- min-width: 0;
- padding: 5px 0;
+ height: 68px;
+ padding: 11px 14px 9px;
display: flex;
align-items: center;
- justify-content: flex-start;
- gap: 4px;
- background: transparent;
- color: var(--accent) !important;
- font-size: 19px !important;
- font-weight: 720 !important;
- text-transform: capitalize;
-}
-
-.calendar__month-title span {
- overflow: hidden;
- white-space: nowrap;
- text-overflow: ellipsis;
-}
-
-.calendar__month-title svg {
- flex: none;
- transition: transform 0.18s ease;
-}
-
-.calendar__month-title svg.open {
- transform: rotate(180deg);
+ justify-content: space-between;
+ gap: 10px;
}
.calendar__toolbar-actions {
+ margin-left: auto;
display: flex;
- justify-content: flex-end;
- gap: 7px;
+ align-items: center;
+ gap: 8px;
}
.calendar__view-menu {
position: absolute;
- z-index: 10;
- top: 58px;
- left: 14px;
+ z-index: 12;
+ top: 62px;
+ right: 91px;
width: 190px;
padding: 8px;
border: 1px solid var(--line);
border-radius: 18px;
background: var(--glass);
- box-shadow: 0 15px 45px rgb(0 0 0 / 32%);
+ box-shadow: 0 16px 44px rgb(0 0 0 / 38%);
backdrop-filter: blur(28px) saturate(180%);
-webkit-backdrop-filter: blur(28px) saturate(180%);
}
.calendar__view-menu button {
width: 100%;
- min-height: 44px;
- padding: 8px 10px;
+ min-height: 42px;
+ padding: 7px 9px;
border-radius: 11px;
display: grid;
- grid-template-columns: 20px 1fr 18px;
+ grid-template-columns: 22px 1fr 18px;
align-items: center;
- gap: 6px;
+ gap: 7px;
background: transparent;
font-size: 14px;
text-align: left;
@@ -989,55 +1061,170 @@ onMounted(loadMonth)
}
.calendar__content {
- height: calc(100% - 64px);
- padding: 0 14px 24px;
+ height: calc(100% - 68px);
+ padding: 4px 0 100px;
overflow-y: auto;
+ overscroll-behavior: contain;
+ scroll-behavior: smooth;
scrollbar-width: none;
}
.calendar__search + .calendar__content {
- height: calc(100% - 117px);
+ height: calc(100% - 121px);
}
-.calendar__month {
+.calendar__year-overview {
+ height: calc(100% - 68px);
+ padding: 4px 14px 100px;
+ overflow-y: auto;
+ overscroll-behavior: contain;
+ scroll-behavior: smooth;
+ scrollbar-width: none;
+}
+
+.calendar__search + .calendar__year-overview {
+ height: calc(100% - 121px);
+}
+
+.calendar__year-overview::-webkit-scrollbar {
+ display: none;
+}
+
+.calendar__overview-year {
+ scroll-margin-top: 4px;
+ padding-bottom: 36px;
+}
+
+.calendar__overview-year > h1 {
+ margin: 0 0 14px;
+ padding: 10px 2px 9px;
border-bottom: 1px solid var(--line);
+ color: var(--accent);
+ font-size: 40px;
+ font-weight: 780;
+ line-height: 1;
+ letter-spacing: -1.4px;
}
-.calendar__month-navigation {
- height: 38px;
+.calendar__overview-months {
display: grid;
- grid-template-columns: 30px 1fr 30px;
- align-items: center;
+ grid-template-columns: repeat(3, minmax(0, 1fr));
+ gap: 24px 11px;
}
-.calendar__month-navigation button {
+.calendar__overview-month {
+ min-width: 0;
+}
+
+.calendar__overview-month h2 {
+ margin: 0 0 7px;
+ overflow: hidden;
+ color: var(--label);
+ font-size: 16px;
+ font-weight: 680;
+ line-height: 1.1;
+ text-overflow: ellipsis;
+ text-transform: capitalize;
+ white-space: nowrap;
+}
+
+.calendar__overview-month h2.current {
+ color: var(--accent);
+}
+
+.calendar__overview-month > div {
+ display: grid;
+ grid-template-columns: repeat(7, minmax(0, 1fr));
+}
+
+.calendar__overview-month button,
+.calendar__overview-month > div > span {
+ min-width: 0;
+ height: 17px;
+}
+
+.calendar__overview-month button {
padding: 0;
+ border-radius: 50%;
display: grid;
place-items: center;
background: transparent;
- color: var(--accent);
- font-size: 13px;
- font-weight: 650;
+ color: var(--label);
+ font-size: 10px;
+ font-weight: 540;
+}
+
+.calendar__overview-month button.today,
+.calendar__overview-month button.selected {
+ background: var(--accent);
+ color: #fff;
+ font-weight: 750;
+}
+
+.calendar__content::-webkit-scrollbar {
+ display: none;
+}
+
+.calendar__year-month {
+ scroll-margin-top: 8px;
+ margin-bottom: 30px;
+}
+
+.calendar__year-month h1 {
+ margin: 0;
+ padding: 13px 18px 16px;
+ font-size: 34px;
+ font-weight: 780;
+ line-height: 1;
+ letter-spacing: -1.2px;
+ text-transform: capitalize;
}
.calendar__weekdays,
-.calendar__grid {
+.calendar__year-grid {
display: grid;
grid-template-columns: repeat(7, minmax(0, 1fr));
}
.calendar__weekdays {
- height: 27px;
+ height: 28px;
+ padding: 0 7px;
align-items: center;
- color: var(--muted);
- font-size: 11px;
- font-weight: 700;
+ color: var(--label);
+ font-size: 10px;
+ font-weight: 680;
text-align: center;
}
-.calendar__grid button {
+.calendar__weekdays span.weekend {
+ color: var(--muted);
+}
+
+.calendar__year-grid {
+ padding: 0 7px;
+}
+
+.calendar__year-grid button,
+.calendar__blank-day {
+ height: 92px;
+ border-top: 1px solid var(--line) !important;
+}
+
+.calendar__year-grid--compact > * {
+ height: 72px;
+}
+
+.calendar__year-grid--stacked > * {
+ height: 88px;
+}
+
+.calendar__year-grid--details > * {
+ height: 112px;
+}
+
+.calendar__year-grid button {
min-width: 0;
- padding: 2px 1px;
+ padding: 11px 1px 8px;
display: flex;
flex-direction: column;
align-items: center;
@@ -1046,55 +1233,45 @@ onMounted(loadMonth)
color: var(--label);
}
-.calendar__grid--compact button {
- height: 41px;
-}
-
-.calendar__grid--stacked button {
- height: 48px;
-}
-
-.calendar__grid--details button {
- height: 54px;
-}
-
-.calendar__grid button.outside {
- opacity: 0.28;
+.calendar__year-grid button.weekend {
+ color: var(--muted);
}
.calendar__day-number {
- width: 30px;
- height: 30px;
+ width: 34px;
+ height: 34px;
flex: none;
border-radius: 50%;
display: grid;
place-items: center;
- font-size: 13px;
- font-weight: 560;
+ font-size: 17px;
+ font-weight: 600;
}
-.calendar__grid button.today .calendar__day-number {
+.calendar__year-grid button.today .calendar__day-number {
color: var(--accent);
font-weight: 800;
}
-.calendar__grid button.selected .calendar__day-number {
+.calendar__year-grid button.selected .calendar__day-number {
background: var(--accent);
color: #fff;
font-weight: 800;
}
.calendar__compact-indicator {
- width: 12px;
- height: 2px;
+ width: 5px;
+ height: 5px;
margin-top: 2px;
- border-radius: 2px;
- background: var(--accent);
+ border-radius: 50%;
+ background: #a855f7;
}
.calendar__event-bars {
- width: 78%;
+ width: 74%;
+ margin-top: 3px;
display: flex;
+ align-items: center;
gap: 2px;
}
@@ -1103,12 +1280,23 @@ onMounted(loadMonth)
min-width: 0;
flex: 1;
border-radius: 2px;
- background: var(--accent);
+}
+
+.calendar__event-dot--0 {
+ background: #a855f7;
+}
+
+.calendar__event-dot--1 {
+ background: #0ea5e9;
+}
+
+.calendar__event-dot--2 {
+ background: #f59e0b;
}
.calendar__event-titles {
width: 100%;
- padding: 0 1px;
+ padding: 0 2px;
display: flex;
flex-direction: column;
gap: 1px;
@@ -1117,12 +1305,41 @@ onMounted(loadMonth)
.calendar__event-titles i {
overflow: hidden;
color: var(--accent);
- font-size: 8.5px;
+ font-size: 8px;
font-style: normal;
font-weight: 650;
- line-height: 11px;
- white-space: nowrap;
+ line-height: 10px;
+ text-align: left;
text-overflow: ellipsis;
+ white-space: nowrap;
+}
+
+.calendar__next-year {
+ width: calc(100% - 28px);
+ height: 48px;
+ margin: 0 14px 20px;
+ border-top: 1px solid var(--line) !important;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ gap: 4px;
+ background: transparent;
+ color: var(--accent) !important;
+ font-size: 15px !important;
+ font-weight: 650 !important;
+}
+
+.calendar__footer {
+ position: absolute;
+ z-index: 9;
+ bottom: 29px;
+ left: 14px;
+ display: flex;
+ align-items: center;
+}
+
+.calendar__list-view {
+ padding: 0 14px;
}
.calendar__agenda {
@@ -1851,16 +2068,6 @@ onMounted(loadMonth)
transform: translateY(100%);
}
-/* Keep dense month and agenda copy readable at the physical phone scale. */
-.calendar__weekdays {
- font-size: 13px;
-}
-
-.calendar__event-titles i {
- font-size: 10.5px;
- line-height: 13px;
-}
-
.calendar__agenda > header span,
.calendar__list-group > header span {
font-size: 13px;
diff --git a/frontend/src/views/apps/CameraApp.vue b/frontend/src/views/apps/CameraApp.vue
index eae808e..efd2b98 100644
--- a/frontend/src/views/apps/CameraApp.vue
+++ b/frontend/src/views/apps/CameraApp.vue
@@ -7,6 +7,7 @@ import {
kSegmentedButton,
} from 'konsta/vue'
import {
+ ArrowLeft,
Images,
RefreshCw,
RotateCcwSquare,
@@ -38,7 +39,7 @@ const messageMedia = useMessageMediaStore()
const route = useRoute()
const router = useRouter()
const requestedMessageMedia = computed(() => {
- const value = route.query.messageAttachment
+ const value = route.query.mediaAttachment ?? route.query.messageAttachment
return value === 'photo' || value === 'video' ? value : null
})
const mode = ref(requestedMessageMedia.value ?? 'photo')
@@ -205,6 +206,10 @@ function capture(): void {
void requestPhoto()
}
+function cancelMediaSelection(): void {
+ void router.replace(messageMedia.cancel())
+}
+
function setMode(nextMode: MediaType): void {
if (recording.value || savingVideo.value) return
mode.value = nextMode
@@ -413,7 +418,17 @@ onBeforeUnmount(() => {
{{ phone.t('Apps.calendar.signInBody') }}
+
+
+
+
+
{{ overview.year }}
+
+
+
+
+ + {{ month.label }} +
+
+
+
+
+
+
+
-
-
+
+
-
-
-
-
+
@@ -612,6 +722,16 @@ onMounted(loadMonth)
+
+
{{ month.label }}
-
+
{{ weekday }}
-
-
+
+
+
+
+ {{ event.title }}
+
+
+
+
+
- {{ selectedDateLabel }}
-
- {{ selectedEvents.length }}
-
-
-
- - {{ phone.t('Common.loading') }} -
-
- {{ phone.t('Apps.calendar.noEvents') }}
- {{ phone.t('Apps.calendar.noEventsBody') }}
-
-
-
-
-
-
- {{ phone.t(tab === 'discover' ? 'Apps.citymarkt.name' : `Apps.citymarkt.tabs.${tab}`) }}
-
-
- {{ phone.t('Apps.citymarkt.freshOffers') }}{{ marketplace.items.length }} {{ phone.t('Apps.citymarkt.offers') }}
- {{ phone.t('Common.loading') }}
-
-
-
-
+
+ {{ phone.t('Common.loading') }}
+
+
+
+
+
+
+
- {{ phone.t('Apps.citymarkt.signInTitle') }}
{{ phone.t('Apps.citymarkt.signInBody') }}
-
+
+
+ {{ phone.t('Apps.citymarkt.signInTitle') }}
+{{ phone.t('Apps.citymarkt.signInBody') }}
+
+
+
+
+
+
- {{ phone.t('Apps.citymarkt.signInTitle') }}
{{ phone.t('Apps.citymarkt.signInBody') }}
+
- {{ phone.t('Apps.citymarkt.signInTitle') }}
+{{ phone.t('Apps.citymarkt.signInBody') }}
+{{ account.email.charAt(0).toUpperCase() }}
- {{ account.email.split('@')[0] }}{{ account.email }}
+ {{ account.email.charAt(0).toUpperCase() }}
+
+
+
+
+ {{ account.email.split('@')[0] }}{{ account.email }}
+
+
-
-
+
-
+ {
:photo-label="phone.t('Apps.citymarkt.photo')"
/>
-
+
+
+
+
+
+
+
+
+
-
-
+
+
+
+
-
+
+
+
+
- {{ relativeDate(selectedListing.created_at) }}
+ {{
+ phone.t('Apps.citymarkt.signInToMessage')
+ }}
{{ formatPrice(selectedListing) }}
{{ label('status', selectedListing.status) }}
+
+
+ {{ relativeDate(selectedListing.created_at) }}
+ {{ formatPrice(selectedListing) }}
+ {{ + label('status', selectedListing.status) + }} +{{ selectedListing.title }}
- +{{ selectedListing.description }}
-{{ selectedListing.seller_name.charAt(0).toUpperCase() }}
- {{ selectedListing.seller_name }}{{ selectedListing.seller_active }} {{ phone.t('Apps.citymarkt.activeListings') }}
{{ phone.t('Apps.citymarkt.phone') }}: {{ selectedListing.phone_number }}
+
+ {{ selectedListing.seller_name.charAt(0).toUpperCase() }}
+
+
+ {{ selectedListing.seller_name }}{{ selectedListing.seller_active }}
+ {{ phone.t('Apps.citymarkt.activeListings') }}
+
+ + {{ phone.t('Apps.citymarkt.phone') }}: + {{ selectedListing.phone_number }} +
- + > +
+
+
-
+
+
+
- {{ phone.t('Apps.citymarkt.signInToMessage') }}
+ {{ phone.t(editing ? 'Apps.citymarkt.editListing' : 'Apps.citymarkt.createListing') }}{{ phone.t('Apps.citymarkt.step', { current: String(sellStep), total: '4' }) }}
+
+
+
{{ phone.t('Apps.citymarkt.addPhotos') }}
{{ phone.t('Apps.citymarkt.addPhotosBody') }}
-
-
+
+
+
+
+
+
{{ phone.t('Apps.citymarkt.selectedPhotos') }}
@@ -768,10 +1252,15 @@ onMounted(async () => {
:key="photo.media_id"
type="button"
:style="{ background: photo.gradient }"
- :aria-label="phone.t('Apps.citymarkt.removePhoto', { number: String(index + 1) })"
+ :aria-label="
+ phone.t('Apps.citymarkt.removePhoto', {
+ number: String(index + 1),
+ })
+ "
@click="togglePhoto(photo.media_id)"
>
- {{ index + 1 }}
@@ -780,55 +1269,182 @@ onMounted(async () => {
-
-
+
+
- {{ phone.t('Apps.citymarkt.priceAndPlace') }}
-{{ phone.t('Apps.citymarkt.preview') }}
{{ draft.title }}
{{ draft.description }}
-
-
-
+
- {{ phone.t('Apps.citymarkt.addPhotos') }}
- {{ phone.t(photoSource === 'gallery' ? 'Apps.citymarkt.gallery' : 'Apps.citymarkt.camera') }}
-
- {{ selectedPhotoIds.length }} / 6
-
-
-
-
-
-
+
-
-
-
- {{ phone.t('Apps.citymarkt.cameraHint') }}
- -{{ phone.t('Apps.citymarkt.priceAndPlace') }}
+ +{{ phone.t('Apps.citymarkt.preview') }}
+{{ draft.title }}
+{{ draft.description }}
+{{ selectedChat.inquiry.seller_account_id === selectedChat.accountId ? selectedChat.inquiry.buyer_name : selectedChat.inquiry.seller_name }}{{ selectedChat.inquiry.title }}
{{ formatPrice(selectedChat.inquiry) }}{{ selectedChat.inquiry.title }}
{{ label('status', selectedChat.inquiry.status) }}
+ {{
+ selectedChat.inquiry.seller_account_id === selectedChat.accountId
+ ? selectedChat.inquiry.buyer_name
+ : selectedChat.inquiry.seller_name
+ }}{{ selectedChat.inquiry.title }}
+
+
+ {{ formatPrice(selectedChat.inquiry) }}{{ selectedChat.inquiry.title }}
+
+ {{ label('status', selectedChat.inquiry.status) }}
+
- {{ phone.t('Apps.citymarkt.reportListing') }}
-
+
+
+
-
-
+
+
+
+
+ {{ phone.t(`Apps.citymarkt.tabs.${item.id}`) }}
+
+
+
+
+
+
+
+
+ (() => {
- const value = route.query.messageAttachment
+ const value = route.query.mediaAttachment ?? route.query.messageAttachment
return value === 'photo' || value === 'video' ? value : null
})
+const multipleSelection = computed(
+ () => requestedMessageMedia.value !== null && (messageMedia.request?.maxSelection ?? 1) > 1,
+)
+const selectedMediaIds = ref([])
const media = ref([])
const filter = ref(requestedMessageMedia.value ?? 'all')
const loading = ref(true)
@@ -203,6 +207,14 @@ function observeMore(): void {
function openMedia(entry: PhoneMedia): void {
if (requestedMessageMedia.value) {
+ if (multipleSelection.value) {
+ const index = selectedMediaIds.value.indexOf(entry.id)
+ if (index >= 0) selectedMediaIds.value.splice(index, 1)
+ else if (selectedMediaIds.value.length < (messageMedia.request?.maxSelection ?? 1)) {
+ selectedMediaIds.value.push(entry.id)
+ }
+ return
+ }
const returnPath = messageMedia.complete(entry)
if (returnPath) void router.replace(returnPath)
return
@@ -214,6 +226,15 @@ function openMedia(entry: PhoneMedia): void {
imagePan.value = { x: 0, y: 0 }
}
+function completeMultipleSelection(): void {
+ const selectedMedia = selectedMediaIds.value.flatMap((id) => {
+ const entry = media.value.find((item) => item.id === id)
+ return entry ? [entry] : []
+ })
+ const returnPath = messageMedia.completeMany(selectedMedia)
+ if (returnPath) void router.replace(returnPath)
+}
+
function cancelMessageSelection(): void {
void router.replace(messageMedia.cancel())
}
@@ -352,6 +373,15 @@ onBeforeUnmount(() => {
@click="cancelMessageSelection"
/>
+
+
+ {{ phone.t('Common.done') }}
+
+
-
+
+
+
+ {{ phone.t('Apps.localPages.discover') }}
+
+
+ {{ phone.t('Apps.localPages.create') }}
+
+
+
+ {{ phone.t('Apps.localPages.profile') }}
+
+
+
- {{ phone.t('Apps.localPages.post') }}
+
-
+
+
+
+
+
+
+
-
+
+
-
+
-
+
- {{ phone.t('Apps.citymarkt.reportWhy') }}
+
{{ phone.t('Apps.citymarkt.reportWhy') }}
+{{ feedback }}
+ {{ feedback }}
+
@@ -375,6 +405,7 @@ onBeforeUnmount(() => {
v-for="entry in media"
:key="entry.id"
class="gallery-tile"
+ :class="{ 'gallery-tile--selected': selectedMediaIds.includes(entry.id) }"
type="button"
:aria-label="
phone.t(
@@ -401,6 +432,12 @@ onBeforeUnmount(() => {
+ district: string
+ images: string[]
+ title: string
+}
+type MediaContext = { draft: ComposeDraft; photos: SelectedPhoto[] }
+
type Screen = 'main' | 'detail' | 'compose'
type Tab = 'feed' | 'create' | 'profile'
const phone = usePhoneStore()
const account = useAccountStore()
-const media = useMediaStore()
+const messageMedia = useMessageMediaStore()
const pages = usePagesStore()
+const route = useRoute()
const router = useRouter()
const screen = ref('main')
const tab = ref('feed')
@@ -46,9 +66,8 @@ const search = ref('')
const category = ref('all')
const feedback = ref('')
const reactionPending = ref(false)
-const photoSource = ref<'camera' | 'gallery' | null>(null)
-const cameraFlash = ref(false)
-const draft = ref({
+const pickedPhotos = ref([])
+const draft = ref({
body: '',
category: 'recommendation' as Exclude,
district: 'los_santos',
@@ -76,10 +95,10 @@ const displayedPosts = computed(() => tab.value === 'profile'
: pages.items)
const isAuthenticated = computed(() => Boolean(account.email))
const selectedPhotos = computed(() => draft.value.images
- .map((id) => media.photos.find((photo) => photo.id === id))
+ .map((id) => pickedPhotos.value.find((photo) => photo.id === id))
.filter((photo) => photo !== undefined))
const selectedImages = computed(() => selectedPhotos.value.map((photo, index) => ({
- gradient: photo.gradient,
+ gradient: photo.background,
media_id: photo.id,
sort_order: index + 1,
})))
@@ -110,6 +129,15 @@ async function loadFeed(): Promise {
await pages.load({ category: category.value, search: search.value })
}
+function updateSearch(event: Event): void {
+ search.value = (event.target as HTMLInputElement).value
+}
+
+function clearSearch(): void {
+ search.value = ''
+ void loadFeed()
+}
+
async function selectTab(next: Tab): Promise {
if (next === 'create') {
if (!isAuthenticated.value) {
@@ -134,19 +162,29 @@ async function openPost(post: PagesPost): Promise {
function togglePhoto(id: string): void {
const index = draft.value.images.indexOf(id)
- if (index >= 0) draft.value.images.splice(index, 1)
- else if (draft.value.images.length < 6) draft.value.images.push(id)
- else showFeedback('Apps.localPages.photoLimit')
+ if (index >= 0) {
+ draft.value.images.splice(index, 1)
+ pickedPhotos.value = pickedPhotos.value.filter((photo) => photo.id !== id)
+ }
}
-function capturePhoto(): void {
- if (draft.value.images.length >= 6) {
+function openMediaApp(app: 'camera' | 'photos'): void {
+ const remaining = 6 - draft.value.images.length
+ if (remaining < 1) {
showFeedback('Apps.localPages.photoLimit')
return
}
- cameraFlash.value = true
- draft.value.images.push(media.capture().id)
- window.setTimeout(() => (cameraFlash.value = false), 120)
+ messageMedia.begin(
+ 'local-pages:compose',
+ 'photo',
+ '/apps/local-pages?compose=1',
+ app === 'photos' ? remaining : 1,
+ {
+ draft: { ...draft.value, images: [...draft.value.images] },
+ photos: [...pickedPhotos.value],
+ } satisfies MediaContext,
+ )
+ void router.push({ path: `/apps/${app}`, query: { mediaAttachment: 'photo' } })
}
async function publish(): Promise {
@@ -166,7 +204,7 @@ async function publish(): Promise {
return
}
draft.value = { body: '', category: 'recommendation', district: 'los_santos', images: [], title: '' }
- photoSource.value = null
+ pickedPhotos.value = []
tab.value = 'feed'
screen.value = 'main'
showFeedback('Apps.localPages.published')
@@ -225,40 +263,72 @@ function openCityMarktListing(): void {
})
}
-onMounted(() => void loadFeed())
+onMounted(() => {
+ const selection = messageMedia.consumeMany('local-pages:compose')
+ if (selection) {
+ if (selection.context) {
+ draft.value = selection.context.draft
+ pickedPhotos.value = selection.context.photos
+ }
+ for (const media of selection.media) {
+ const id = String(media.id)
+ if (draft.value.images.includes(id) || draft.value.images.length >= 6) continue
+ draft.value.images.push(id)
+ pickedPhotos.value.push({ background: `url(${JSON.stringify(media.url)})`, id })
+ }
+ }
+ if (route.query.compose === '1') screen.value = 'compose'
+ void loadFeed()
+})
-
+
-
-
+
-
+
+
+
+
+
+
-
-
- {{ phone.t(tab === 'feed' ? 'Apps.localPages.name' : 'Apps.localPages.profile') }}
-{{ phone.t('Apps.localPages.cityPulse') }}{{ phone.t('Apps.localPages.heroTitle') }}{{ phone.t('Apps.localPages.heroBody') }}
{{ phone.t('Apps.localPages.cityPulse') }}{{ phone.t('Apps.localPages.heroTitle') }}{{ phone.t('Apps.localPages.heroBody') }}
{{ account.email.charAt(0).toUpperCase() }}
-
+ {{ phone.t('Apps.localPages.localCreator') }}@{{ account.email.split('@')[0] }}{{ pages.ownItems.length }} {{ phone.t('Apps.localPages.posts') }}
{{ account.email.charAt(0).toUpperCase() }}
+ {{ phone.t('Apps.localPages.localCreator') }}@{{ account.email.split('@')[0] }}{{ pages.ownItems.length }} {{ phone.t('Apps.localPages.posts') }}
{{ phone.t('Common.loading') }}
-
+
+
-
+
+
{{ galleryIndex + 1 }} / {{ selected.images.length }}
{{ selected.title }}
{{ selected.body }}
{{ phone.t('Apps.localPages.location') }}{{ selected.district ? phone.t(`Apps.citymarkt.districts.${selected.district}`) : phone.t('Apps.localPages.allLosSantos') }}
{{ phone.t('Apps.localPages.newPost') }}{{ phone.t('Apps.localPages.shareWithCity') }}
-
-
+
+
- {{ phone.t('Apps.citymarkt.addPhotos') }}
{{ phone.t('Apps.citymarkt.addPhotosBody') }}
-
{{ phone.t('Apps.citymarkt.selectedPhotos') }}
@@ -330,27 +451,9 @@ onMounted(() => void loadFeed())
-
-
-
{{ phone.t('Apps.citymarkt.addPhotos') }}{{ phone.t(photoSource === 'gallery' ? 'Apps.citymarkt.gallery' : 'Apps.citymarkt.camera') }}
- {{ draft.images.length }} / 6
-
-
-
-
-
-
-
-
-
-
- {{ phone.t('Apps.citymarkt.cameraHint') }}
- -{{ feedback }}
{{ phone.t('Apps.memory.eyebrow') }}
-
+
+
{{ phone.t('Apps.memory.name') }}
@@ -278,6 +282,10 @@ onBeforeUnmount(() => { user-select: none; } +.memory-app--playing { + padding: 0; +} + .memory-header { height: 52px; display: flex; @@ -405,50 +413,67 @@ onBeforeUnmount(() => { .memory-difficulty__best { align-self: start; color: #74698f; font-size: 11.5px; line-height: 1.2; } .memory-difficulties svg { grid-column: 3; grid-row: 1 / 3; color: #7658c7; } -.memory-game { padding-top: 5px; } - -.memory-stats { - height: 50px; - display: grid; - grid-template-columns: 30px auto auto 1fr; - align-items: center; - gap: 11px; +.memory-game { + position: absolute; + inset: 0; } -.memory-stats div { display: grid; } -.memory-stats span { color: #74698f; font-size: 10.5px; font-weight: 800; text-transform: uppercase; } -.memory-stats strong { font-size: 19px; line-height: 1.05; } -.memory-stats button { justify-self: end; border: 0; color: #7052bf; background: transparent; font-size: 14px; font-weight: 800; } +.memory-stats { + position: absolute; + z-index: 7; + top: 66px; + right: 18px; + left: 18px; + height: 42px; + display: grid; + grid-template-columns: 32px 1fr 1fr auto; + align-items: center; + gap: 4px; + padding: 4px; + border: 1px solid rgb(105 79 160 / 10%); + border-radius: 21px; + background: rgb(246 241 255 / 64%); + box-shadow: 0 8px 24px rgb(75 52 121 / 13%); + backdrop-filter: blur(14px); + box-sizing: border-box; +} + +.memory-stats div { height: 32px; display: grid; grid-template-rows: 10px 20px; align-content: center; justify-items: center; } +.memory-stats span { color: #74698f; font-size: 10.5px; font-weight: 800; line-height: 10px; text-transform: uppercase; } +.memory-stats strong { display: block; font-size: 19px; line-height: 20px; } +.memory-stats button { justify-self: end; border: 0; color: #7052bf; background: transparent; font-size: 13px; font-weight: 800; } .memory-stats .memory-menu-button { - width: 30px; - height: 30px; + width: 32px; + height: 32px; display: grid; place-items: center; justify-self: start; padding: 0; - border: 1px solid rgb(105 79 160 / 10%); - border-radius: 10px; + border: 0; + border-radius: 50%; background: rgb(255 255 255 / 48%); - box-shadow: 0 3px 8px rgb(75 52 121 / 8%); cursor: pointer; } .memory-board { - position: relative; + position: absolute; + inset: 0; display: grid; gap: 8px; - padding: 9px; - border: 1px solid rgb(101 77 153 / 9%); - border-radius: 20px; - background: rgb(255 255 255 / 31%); - box-shadow: inset 0 1px 0 rgb(255 255 255 / 50%); + align-content: center; + padding: 108px 17px 28px; + border: 0; + border-radius: 0; + background: + radial-gradient(circle at 12% 88%, rgb(135 105 207 / 12%), transparent 31%), + radial-gradient(circle at 88% 16%, rgb(255 255 255 / 54%), transparent 28%); perspective: 900px; } .memory-board--small { grid-template-columns: repeat(3, minmax(0, 1fr)); } .memory-board--medium, .memory-board--large { grid-template-columns: repeat(4, minmax(0, 1fr)); } -.memory-board--large { gap: 6px; padding: 7px; } +.memory-board--large { gap: 6px; padding-right: 15px; padding-left: 15px; } .memory-game-card { aspect-ratio: 0.82; @@ -545,7 +570,7 @@ onBeforeUnmount(() => { align-items: center; justify-content: center; gap: 10px; - border-radius: 20px; + border-radius: 0; background: rgb(244 239 255 / 90%); backdrop-filter: blur(6px); text-align: center; diff --git a/frontend/src/views/apps/MinesweeperApp.vue b/frontend/src/views/apps/MinesweeperApp.vue index ba3cb91..63b1612 100644 --- a/frontend/src/views/apps/MinesweeperApp.vue +++ b/frontend/src/views/apps/MinesweeperApp.vue @@ -198,8 +198,12 @@ onBeforeUnmount(() => { -
{{ phone.t('Apps.minesweeper.eyebrow') }}
-
+
+
{{ phone.t('Apps.minesweeper.name') }}
@@ -420,6 +424,10 @@ onBeforeUnmount(() => { user-select: none; } +.minesweeper-app--playing { + padding: 0; +} + .minesweeper-header { height: 55px; display: flex; @@ -524,22 +532,59 @@ onBeforeUnmount(() => { .minesweeper-difficulties small { align-self: start; color: #658a89; font-size: 8px; } .minesweeper-long-press { margin: 0; color: #628887; font-size: 9px; } -.minesweeper-game { position: relative; padding-top: 5px; } -.minesweeper-toolbar { height: 46px; display: grid; grid-template-columns: 36px 1fr 1fr 36px; align-items: center; gap: 7px; } -.minesweeper-toolbar div { display: grid; justify-items: center; line-height: 1.05; } -.minesweeper-toolbar span { color: #5a8484; font-size: 8px; font-weight: 800; text-transform: uppercase; } -.minesweeper-toolbar strong { font-size: 16px; } +.minesweeper-game { + position: absolute; + inset: 0; + background: + radial-gradient(circle at 12% 88%, rgb(26 129 130 / 14%), transparent 32%), + radial-gradient(circle at 88% 16%, rgb(238 255 249 / 45%), transparent 29%); +} + +.minesweeper-toolbar { + position: absolute; + z-index: 10; + top: 66px; + right: 18px; + left: 18px; + height: 42px; + display: grid; + grid-template-columns: 32px 1fr 1fr 32px; + align-items: center; + gap: 4px; + padding: 4px; + border: 1px solid rgb(23 83 87 / 10%); + border-radius: 21px; + background: rgb(226 249 242 / 65%); + box-shadow: 0 8px 24px rgb(23 73 75 / 13%); + backdrop-filter: blur(14px); + box-sizing: border-box; +} +.minesweeper-toolbar div { height: 32px; display: grid; grid-template-rows: 10px 20px; align-content: center; justify-items: center; } +.minesweeper-toolbar span { color: #5a8484; font-size: 10px; font-weight: 800; line-height: 10px; text-transform: uppercase; } +.minesweeper-toolbar strong { display: block; font-size: 18px; line-height: 20px; } + +.minesweeper-toolbar .minesweeper-toolbar__icon { + width: 32px; + height: 32px; + border: 0; + border-radius: 50%; + box-shadow: none; +} .minesweeper-board { - position: relative; + position: absolute; + top: 50%; + right: 14px; + left: 14px; display: grid; grid-template-columns: repeat(var(--minesweeper-columns), minmax(0, 1fr)); gap: 3px; padding: 7px; - border: 1px solid rgb(16 78 82 / 10%); + border: 0; border-radius: 18px; background: #187a7e; box-shadow: inset 0 2px 2px rgb(255 255 255 / 10%), 0 15px 27px rgb(20 79 81 / 18%); + transform: translateY(-45%); } .minesweeper-cell { @@ -582,8 +627,7 @@ onBeforeUnmount(() => { .minesweeper-game--exploding::after { position: absolute; z-index: 9; - inset: 46px 0 0; - border-radius: 18px; + inset: 0; background: #ffb341; content: ""; pointer-events: none; @@ -767,13 +811,13 @@ onBeforeUnmount(() => { } @keyframes minesweeper-board-shake { - 0%, 100% { transform: translate(0); } - 12% { transform: translate(-7px, 3px) rotate(-1deg); } - 24% { transform: translate(6px, -4px) rotate(1deg); } - 38% { transform: translate(-5px, -2px); } - 52% { transform: translate(4px, 3px); } - 68% { transform: translate(-2px, -2px); } - 82% { transform: translate(2px, 1px); } + 0%, 100% { transform: translate(0, -45%); } + 12% { transform: translate(-7px, calc(-45% + 3px)) rotate(-1deg); } + 24% { transform: translate(6px, calc(-45% - 4px)) rotate(1deg); } + 38% { transform: translate(-5px, calc(-45% - 2px)); } + 52% { transform: translate(4px, calc(-45% + 3px)); } + 68% { transform: translate(-2px, calc(-45% - 2px)); } + 82% { transform: translate(2px, calc(-45% + 1px)); } } @keyframes minesweeper-bomb-drop { @@ -866,7 +910,22 @@ onBeforeUnmount(() => { .minesweeper-secondary { position: relative; z-index: 1; min-width: 155px; min-height: 40px; border-radius: 13px; font-size: 11px; font-weight: 850; pointer-events: auto; } .minesweeper-primary { border: 0; color: #104d51; background: #8ce3d2; } .minesweeper-secondary { border: 1px solid rgb(255 255 255 / 13%); color: #e6faf5; background: rgb(255 255 255 / 7%); } -.minesweeper-game__hint { margin: 9px 0 0; color: #668c8c; font-size: 9px; text-align: center; } +.minesweeper-game__hint { + position: absolute; + z-index: 6; + right: 45px; + bottom: 27px; + left: 45px; + margin: 0; + padding: 7px 10px; + border-radius: 999px; + color: #668c8c; + background: rgb(226 249 242 / 52%); + backdrop-filter: blur(10px); + font-size: 9px; + text-align: center; + pointer-events: none; +} button:active { transform: scale(0.96); } diff --git a/frontend/src/views/apps/NeonDropApp.vue b/frontend/src/views/apps/NeonDropApp.vue index 16d4964..1f24c40 100644 --- a/frontend/src/views/apps/NeonDropApp.vue +++ b/frontend/src/views/apps/NeonDropApp.vue @@ -1,14 +1,9 @@ -
{{ phone.t('Apps.neonDrop.eyebrow') }}
- {{ phone.t('Apps.neonDrop.name') }}
@@ -335,51 +334,11 @@ onBeforeUnmount(() => { {{ phone.t('Apps.neonDrop.level') }}{{ game.level }}
-
+
-
-
-
-
-
-
{{ phone.t('Apps.neonDrop.gameHint') }}