Merge pull request #1432 from openworld-community/feature/1401-create…

…_event

Feature/1401 create event

frontend/components/common/Button.vue

@@ -175,6 +175,7 @@ const loaderColor = computed(() => loaderColorDict[props.buttonKind] ?? '');
 
 	&__content {
 		font-size: var(--font-size-M);
+		
 	}
 
 	&__icon {

frontend/components/detailes/Actions.vue

@@ -75,7 +75,6 @@ patchDeleteEventModal({
 
 	@media (min-width: 1440px) {
 		flex-direction: row;
-		width: 167px;
 	}
 
 	&__button-admin {

frontend/components/detailes/Description.vue

@@ -0,0 +1,148 @@
+<script setup lang="ts">
+import type { PropType } from 'vue';
+import type { EventOnPoster } from '../../../common/types';
+import { PEREDELANO_CREATOR_ID } from '../../../common/const/eventTypes';
+
+const mobile = inject<boolean>('mobile');
+
+defineProps({
+	posterEvent: {
+		type: Object as PropType<EventOnPoster>,
+		default: null
+	}
+});
+</script>
+<template>
+	<div class="description">
+		<div class="description__content">
+			<h4
+				v-if="!mobile && posterEvent.creatorId !== PEREDELANO_CREATOR_ID"
+				class="description__title"
+			>
+				{{ $t('event.description_title') }}
+			</h4>
+			<p
+				v-if="posterEvent.creatorId !== PEREDELANO_CREATOR_ID"
+				class="description__text text3"
+			>
+				{{ posterEvent.description }}
+			</p>
+			<div
+				v-if="posterEvent.creatorId === PEREDELANO_CREATOR_ID"
+				class="description__html"
+				v-html="useSanitizer(posterEvent.description)"
+			/>
+		</div>
+		<DetailesInfoPoster v-if="!mobile" />
+	</div>
+</template>
+<style lang="less" scoped>
+.description {
+	display: flex;
+	width: 100%;
+	margin-bottom: 30px;
+
+	@media (min-width: 768px) {
+		gap: 20px;
+	}
+	&__content {
+		padding-top: 22px;
+		flex-grow: 1;
+
+		@media (max-width: 768px) {
+			margin-bottom: 24px;
+		}
+		@media (min-width: 768px) {
+			border-top: 1px solid var(--color-input-field);
+		}
+	}
+	&__title {
+		padding-bottom: 30px;
+		@media (min-width: 768px) {
+			display: flex;
+		}
+	}
+
+	&__text {
+		word-wrap: break-word;
+		white-space: pre-line;
+	}
+
+	&__html {
+		word-wrap: break-word;
+		white-space: pre-line;
+		font-size: var(--font-size-S);
+		line-height: 20px;
+		margin-bottom: 24px;
+		padding-top: 8px;
+
+		&:deep(h1),
+		&:deep(h2),
+		&:deep(h3),
+		&:deep(h4),
+		&:deep(h5) {
+			line-height: normal;
+			font-size: var(--font-size-S);
+		}
+
+		&:deep(h2) {
+			font-size: var(--font-size-L);
+			border-top: 1px solid var(--color-input-field);
+			padding-top: 24px;
+
+			@media (min-width: 768px) {
+				font-size: var(--font-size-ML);
+			}
+
+			@media (min-width: 1440px) {
+				margin-bottom: 14px;
+			}
+		}
+
+		&:deep(a) {
+			text-decoration: underline;
+			text-underline-offset: 0.2rem;
+		}
+
+		&:deep(img) {
+			min-width: 0 !important;
+			max-width: 100% !important;
+			box-sizing: content-box;
+		}
+
+		&:deep(blockquote) {
+			padding: 0 1em;
+			border-left: 0.25em solid var(--color-input-icons);
+		}
+
+		&:deep(table) {
+			width: max-content;
+			max-width: 100%;
+			overflow: auto;
+			margin-top: 0;
+			margin-bottom: 16px;
+			border-collapse: collapse;
+			border-spacing: 0;
+		}
+
+		&:deep(tr) {
+			border-top: 1px solid var(--color-input-icons);
+		}
+
+		&:deep(th),
+		&:deep(td) {
+			padding: 6px 13px;
+			border: 1px solid var(--color-input-icons);
+		}
+
+		&:deep(th) {
+			font-weight: var(--font-weight-bold);
+		}
+
+		&:deep(hr) {
+			border-style: none;
+			border-top: 1px solid var(--color-input-field);
+		}
+	}
+}
+</style>

frontend/components/detailes/EventSummary.vue

@@ -0,0 +1,108 @@
+<script setup lang="ts">
+import type { PropType } from 'vue';
+import type { EventOnPoster } from '../../../common/types';
+
+defineEmits(['toggleFavourites', 'deleteCard', 'editClick']);
+defineProps({
+	posterEvent: {
+		type: Object as PropType<EventOnPoster>,
+		default: null
+	},
+	isInFavourites: {
+		type: Boolean,
+		default: false
+	},
+	isShowFavourites: {
+		type: Boolean,
+		default: false
+	},
+	isOwner: {
+		type: Boolean,
+		default: false
+	},
+	isActiveButtons: {
+		type: Boolean,
+		default: false
+	}
+});
+</script>
+<template>
+	<div class="event-summary">
+		<div class="event-summary__wrapper">
+			<div class="event-summary__header">
+				<DetailesItemsOrganizer
+					v-if="posterEvent.organizer"
+					:organizer="posterEvent.organizer"
+				/>
+				<DetailesItemsTitle
+					:title="posterEvent.title"
+					:is-show-favourites="isShowFavourites"
+					:is-in-favourites="isInFavourites"
+					@toggle-favourites="$emit('toggleFavourites')"
+				/>
+			</div>
+			<CommonEventDetails
+				class="event-summary__details"
+				:price="posterEvent.price"
+				:date="posterEvent.date"
+				:duration="posterEvent.durationInSeconds"
+				:is-online="posterEvent.isOnline"
+				:location="posterEvent.location"
+				:timezone="posterEvent.timezone"
+				has-link-to-g-maps
+				size="big"
+			/>
+		</div>
+		<DetailesActions
+			v-if="isActiveButtons"
+			:creator-id="posterEvent.creatorId"
+			@edit-click="$emit('editClick')"
+			@delete-click="$emit('deleteCard')"
+		/>
+	</div>
+</template>
+<style scoped lang="less">
+.event-summary {
+	display: flex;
+	width: 100%;
+	overflow: hidden;
+	flex-direction: column;
+
+	@media (min-width: 768px) {
+		flex-direction: row;
+	}
+
+	&__wrapper {
+		@media (min-width: 768px) {
+			flex-grow: 1;
+		}
+
+		@media (min-width: 1440px) {
+			width: 50%;
+		}
+	}
+	&__header {
+		display: flex;
+		width: 100%;
+		flex-direction: column;
+		margin-bottom: 10px;
+
+		@media (min-width: 768px) {
+			flex-direction: column-reverse;
+			margin-bottom: 30px;
+		}
+	}
+
+	&__details {
+		display: flex;
+		width: 100%;
+		flex-direction: column;
+
+		@media (min-width: 768px) {
+			padding-top: 24px;
+			border-top: 1px solid var(--color-input-field);
+			padding-bottom: 24px;
+		}
+	}
+}
+</style>