From 7e17fd05200fc3523fac0c941375cd0682c411d2 Mon Sep 17 00:00:00 2001 From: toprogramm Date: Tue, 29 Oct 2024 03:28:38 +0600 Subject: [PATCH 01/35] deleted unusable property --- frontend/assets/less/global.less | 1 - 1 file changed, 1 deletion(-) diff --git a/frontend/assets/less/global.less b/frontend/assets/less/global.less index 3500ff0c..b4815619 100644 --- a/frontend/assets/less/global.less +++ b/frontend/assets/less/global.less @@ -57,7 +57,6 @@ body { .root { display: flex; flex-direction: column; - height: vh; min-width: 100%; min-height: 100%; } From 44f8b4c59ddea18857e21a68566f0a7b89961b71 Mon Sep 17 00:00:00 2001 From: toprogramm Date: Tue, 29 Oct 2024 03:29:15 +0600 Subject: [PATCH 02/35] edited on 5px for mobile --- frontend/components/common/EventDetails.vue | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/frontend/components/common/EventDetails.vue b/frontend/components/common/EventDetails.vue index 35c98e15..2dfbfb79 100644 --- a/frontend/components/common/EventDetails.vue +++ b/frontend/components/common/EventDetails.vue @@ -93,6 +93,9 @@ const dataPrice = computed(() => { width: 100%; flex-direction: column; overflow: hidden; - gap: 12px; + gap: 5px; + @media (min-width: 768px) { + gap: 12px; + } } From 594e19613c1b14833351f53b7d9d1cf220fc23b3 Mon Sep 17 00:00:00 2001 From: toprogramm Date: Tue, 29 Oct 2024 03:29:34 +0600 Subject: [PATCH 03/35] 16/9 image on preview --- frontend/components/common/ImageLoader.vue | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/frontend/components/common/ImageLoader.vue b/frontend/components/common/ImageLoader.vue index e30383f6..aed4d768 100644 --- a/frontend/components/common/ImageLoader.vue +++ b/frontend/components/common/ImageLoader.vue @@ -116,14 +116,14 @@ const removeImage = async () => { .image { min-width: unset; width: 248px; - aspect-ratio: 2/1.33; + aspect-ratio: 16 / 9; overflow: hidden; object-fit: cover; border-radius: 4px; @media (min-width: 768px) { width: 248px; - aspect-ratio: 2 / 1.25; + aspect-ratio: 16 / 9; } } From 4eaaf6f83f42c3518450b8e8772707125adeb454 Mon Sep 17 00:00:00 2001 From: toprogramm Date: Tue, 29 Oct 2024 03:29:49 +0600 Subject: [PATCH 04/35] 16/9 on the main page --- frontend/components/detailes/Image.vue | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/frontend/components/detailes/Image.vue b/frontend/components/detailes/Image.vue index e8db7b3b..85b56407 100644 --- a/frontend/components/detailes/Image.vue +++ b/frontend/components/detailes/Image.vue @@ -36,7 +36,7 @@ defineProps({ &__container { display: flex; width: 100%; - aspect-ratio: 2 / 1.43; + aspect-ratio: 16 / 9; height: auto; max-height: 450px; line-height: 0; @@ -46,7 +46,7 @@ defineProps({ overflow: hidden; @media (min-width: 768px) { - aspect-ratio: 2 / 1; + aspect-ratio: 16 / 9; max-height: 540px; margin-bottom: 24px; } @@ -61,13 +61,13 @@ defineProps({ width: 100%; min-width: 100%; max-width: 100%; - aspect-ratio: 2 / 1.43; + aspect-ratio: 16 / 9; height: auto; object-fit: cover; border-radius: 8px; @media (min-width: 768px) { - aspect-ratio: 2 / 1; + aspect-ratio: 16 / 9; } } } From c7aed36e33c89d6b9a784923b4fd2a8a6edda9d4 Mon Sep 17 00:00:00 2001 From: toprogramm Date: Tue, 29 Oct 2024 03:31:17 +0600 Subject: [PATCH 05/35] deleted duplicated properties --- frontend/components/detailes/Info.vue | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/frontend/components/detailes/Info.vue b/frontend/components/detailes/Info.vue index ec389e42..0a38f874 100644 --- a/frontend/components/detailes/Info.vue +++ b/frontend/components/detailes/Info.vue @@ -99,7 +99,7 @@ defineProps({ display: flex; width: 100%; flex-direction: column; - margin-bottom: var(--space-related-items); + // margin-bottom: var(--space-related-items); @media (min-width: 768px) { flex-direction: column-reverse; @@ -111,11 +111,12 @@ defineProps({ display: flex; width: 100%; flex-direction: column; - margin-bottom: var(--space-unrelated-items); + margin-bottom: 10px; @media (min-width: 768px) { padding-top: 24px; border-top: 1px solid var(--color-input-field); + margin-bottom: var(--space-unrelated-items); } } From 91975cce8acde804b2f8178912ab95360f0fcc5d Mon Sep 17 00:00:00 2001 From: toprogramm Date: Tue, 29 Oct 2024 03:33:10 +0600 Subject: [PATCH 06/35] added some loader and not found properties --- frontend/components/search/CardsWrapper.vue | 7 ++----- frontend/components/search/Loader.vue | 14 +++++++++----- frontend/components/search/NotFound.vue | 9 ++++++++- 3 files changed, 19 insertions(+), 11 deletions(-) diff --git a/frontend/components/search/CardsWrapper.vue b/frontend/components/search/CardsWrapper.vue index 8dd24300..69e20247 100644 --- a/frontend/components/search/CardsWrapper.vue +++ b/frontend/components/search/CardsWrapper.vue @@ -6,11 +6,8 @@ diff --git a/frontend/components/search/Loader.vue b/frontend/components/search/Loader.vue index a36159fd..fc9b4ec4 100644 --- a/frontend/components/search/Loader.vue +++ b/frontend/components/search/Loader.vue @@ -21,15 +21,19 @@ defineProps({ .loader { display: flex; width: 100%; - justify-content: center; - align-items: center; - + justify-content: flex-end; position: absolute; + align-items: center; top: 0px; - left: 0px; + right: 2px; z-index: 10; @media (min-width: 768px) { - top: 8px; + justify-content: flex-end; + right: var(--padding-side); + } + @media (min-width: 1440px) { + justify-content: center; + right: 0px; } } diff --git a/frontend/components/search/NotFound.vue b/frontend/components/search/NotFound.vue index a0430e47..4fc93247 100644 --- a/frontend/components/search/NotFound.vue +++ b/frontend/components/search/NotFound.vue @@ -17,7 +17,14 @@ defineProps({ width: 100%; justify-content: center; align-items: center; - font-size: 24px; + margin-top: 20px; + transition: all 0.4s ease-in-out; + @media (min-width: 375px) { + margin-top: 32px; + } + @media (min-width: 768px) { + margin-top: 60px; + } } From 72ff28d661f7ebf83b427bb3388beb8a18855236 Mon Sep 17 00:00:00 2001 From: toprogramm Date: Tue, 29 Oct 2024 03:34:00 +0600 Subject: [PATCH 07/35] row gap between events --- frontend/components/search/EventCardsList.vue | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/frontend/components/search/EventCardsList.vue b/frontend/components/search/EventCardsList.vue index e4130d72..0461d7f9 100644 --- a/frontend/components/search/EventCardsList.vue +++ b/frontend/components/search/EventCardsList.vue @@ -53,7 +53,7 @@ defineProps({ @media (min-width: 768px) { grid-template-columns: 1fr 1fr; - row-gap: 40px; + row-gap: 20px; column-gap: var(--gap); padding-left: var(--padding-side); padding-right: var(--padding-side); From c0cda43f6c7368999eee8c7065405984b6a7fa4f Mon Sep 17 00:00:00 2001 From: toprogramm Date: Tue, 29 Oct 2024 03:35:10 +0600 Subject: [PATCH 08/35] wrapping and adding divider --- frontend/components/search/Heading.vue | 13 +++++-------- frontend/pages/city/[city].vue | 12 ++++++++---- frontend/pages/country/[country].vue | 7 +++++++ 3 files changed, 20 insertions(+), 12 deletions(-) diff --git a/frontend/components/search/Heading.vue b/frontend/components/search/Heading.vue index 2c4891fc..025099d3 100644 --- a/frontend/components/search/Heading.vue +++ b/frontend/components/search/Heading.vue @@ -36,16 +36,13 @@ defineProps({ } &--up { - margin-bottom: 20px; - @media (max-width: 768px) { - margin-left: 11px; - } - - @media (min-width: 768px) { - margin-bottom: 28px; - } + padding-left: var(--padding-side); + padding-right: var(--padding-side); + margin-top: 23px; + margin-bottom: 17px; @media (min-width: 768px) { + margin-top: 40px; margin-bottom: 30px; } } diff --git a/frontend/pages/city/[city].vue b/frontend/pages/city/[city].vue index 47f4ef54..6c8ba2c5 100644 --- a/frontend/pages/city/[city].vue +++ b/frontend/pages/city/[city].vue @@ -140,7 +140,7 @@ watch( );