diff --git a/src/App.vue b/src/App.vue index 8d75741..42d7029 100644 --- a/src/App.vue +++ b/src/App.vue @@ -1,17 +1,10 @@ diff --git a/src/assets/images/bigLogo.svg b/src/assets/images/bigLogo.svg new file mode 100644 index 0000000..3f8236e --- /dev/null +++ b/src/assets/images/bigLogo.svg @@ -0,0 +1,8 @@ + + + + + + + + diff --git a/src/assets/images/dots.svg b/src/assets/images/dots.svg new file mode 100644 index 0000000..0f48d04 --- /dev/null +++ b/src/assets/images/dots.svg @@ -0,0 +1,359 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/assets/images/ellipseBottom.svg b/src/assets/images/ellipseBottom.svg new file mode 100644 index 0000000..b589276 --- /dev/null +++ b/src/assets/images/ellipseBottom.svg @@ -0,0 +1,12 @@ + + + + + + + + + + + + diff --git a/src/assets/images/ellipseTop.svg b/src/assets/images/ellipseTop.svg new file mode 100644 index 0000000..45d3ba0 --- /dev/null +++ b/src/assets/images/ellipseTop.svg @@ -0,0 +1,12 @@ + + + + + + + + + + + + diff --git a/src/assets/images/logoText.svg b/src/assets/images/logoText.svg new file mode 100644 index 0000000..dbe2d71 --- /dev/null +++ b/src/assets/images/logoText.svg @@ -0,0 +1,17 @@ + + + + + + + + + + + + + + + + + diff --git a/src/components/LoggedInLayout/LoggedInLayout.vue b/src/components/LoggedInLayout/LoggedInLayout.vue new file mode 100644 index 0000000..6c7c8d7 --- /dev/null +++ b/src/components/LoggedInLayout/LoggedInLayout.vue @@ -0,0 +1,17 @@ + + + diff --git a/src/components/TheSidebar.vue b/src/components/TheSidebar.vue index b291ab7..c3ac0cd 100644 --- a/src/components/TheSidebar.vue +++ b/src/components/TheSidebar.vue @@ -19,8 +19,8 @@ export default { pageSettings: [ { id: "calendar", - path: "#/", - active: false, + path: "#/calendar", + active: true, icon: "icon-calendar-2", }, { diff --git a/src/pages/calendar/components/CalendarSidebar.vue b/src/pages/calendar/components/CalendarSidebar.vue index f78e731..8194e4a 100644 --- a/src/pages/calendar/components/CalendarSidebar.vue +++ b/src/pages/calendar/components/CalendarSidebar.vue @@ -11,8 +11,9 @@ .flex.flex-col.items-center.gap-y-2.justify-center base-button.mb-2(left-icon="icon-plus", rounded, :size="24", :icon-left-size="10", secondary ) .team-card(v-for="teammate in teamData" :key="teammate.id") - BaseAvatar(:size="32") - img(:src="avatar" alt="Team member") + base-avatar(:size="32") + img(:src="teammate.avatar" alt="Team member" v-if="teammate.avatar") + span(v-if="!teammate.avatar") {{`${teammate.last_name[0]}${teammate.first_name[0]}`}} .sidebar-content.items-center.flex.flex-col.gap-y-8.px-4.py-19px(v-else) base-button(right-icon="icon-plus", split, :size="40", :icon-right-size="10", @click="openFormCreate" ) Создать событие .flex.items-center.flex-col.gap-y-4 @@ -35,8 +36,9 @@ v-for="teammate in teamData" :key="teammate.id") .flex.items-center - BaseAvatar(:size="32") - img(:src="avatar" alt="Team member") + base-avatar(:size="32") + img(:src="teammate.avatar" alt="Team member" v-if="teammate.avatar") + span(v-if="!teammate.avatar") {{`${teammate.last_name[0]}${teammate.first_name[0]}`}} .flex.ml-2.not-italic.font-medium.text-xxs {{ changeName(teammate.last_name, teammate.first_name, teammate.patronymic) }} span.icon-change-place.cursor-pointer.w-5.flex.items-center.justify-center.w-6.h-6 .button-wrapper.flex.justify-center.mb-23px @@ -101,6 +103,9 @@ export default { width: this.widthSidebarClose, }; }, + defaultName(last, first) { + return `${last[0]}${first[0]}`; + }, }, methods: { changeSize() { diff --git a/src/pages/login/TheLogin.vue b/src/pages/login/TheLogin.vue new file mode 100644 index 0000000..fc7208c --- /dev/null +++ b/src/pages/login/TheLogin.vue @@ -0,0 +1,63 @@ + + + + + diff --git a/src/router.js b/src/router.js index d2926a7..d845592 100644 --- a/src/router.js +++ b/src/router.js @@ -2,12 +2,24 @@ import { createRouter, createWebHashHistory } from "vue-router"; import TheCalendar from "@/pages/calendar/TheCalendar"; import TheUser from "@/pages/clients/TheClients"; import TheSettings from "@/pages/settings/TheSettings"; +import TheLogin from "@/pages/login/TheLogin"; +import LoggedInLayout from "@/components/LoggedInLayout/LoggedInLayout"; export default createRouter({ history: createWebHashHistory(), routes: [ - { path: "/", component: TheCalendar }, - { path: "/clients", component: TheUser }, - { path: "/settings", component: TheSettings }, + { + path: "/login", + component: TheLogin, + }, + { + path: "/", + component: LoggedInLayout, + children: [ + { path: "calendar", component: TheCalendar }, + { path: "clients", component: TheUser }, + { path: "settings", component: TheSettings }, + ], + }, ], }); diff --git a/tailwind.config.js b/tailwind.config.js index ad2dafc..7ad63ba 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -20,8 +20,11 @@ module.exports = { "2xl": ["28px", { lineHeight: "33px" }], "3xl": ["60px", { lineHeight: "70px" }], "4xl": ["44px", { lineHeight: "48px" }], + "5xl": ["28px", { lineHeight: "38px" }], }, gap: { + 6: "6px", + 11: "11px", 43: "43px", }, spacing: {