diff --git a/public/icons/remove.svg b/public/icons/remove.svg new file mode 100644 index 00000000..a0723869 --- /dev/null +++ b/public/icons/remove.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/src/components/Nav/ProfilePopup.tsx b/src/components/Nav/ProfilePopup.tsx index fbd8de48..895458d5 100644 --- a/src/components/Nav/ProfilePopup.tsx +++ b/src/components/Nav/ProfilePopup.tsx @@ -30,7 +30,7 @@ export const ProfilePopup = (props: ProfilePopupProps) => { Закладки
  • - Настройки + Настройки
  • { return ( -
    +

    diff --git a/src/components/Pages/about/DiscussionRulesPage.tsx b/src/components/Pages/about/DiscussionRulesPage.tsx index 935639bc..51c1d38c 100644 --- a/src/components/Pages/about/DiscussionRulesPage.tsx +++ b/src/components/Pages/about/DiscussionRulesPage.tsx @@ -5,7 +5,7 @@ export const DiscussionRulesPage = () => { const title = t('Discussion rules') return ( -
    +

    diff --git a/src/components/Pages/about/DogmaPage.tsx b/src/components/Pages/about/DogmaPage.tsx index 789ceddf..aec59c8b 100644 --- a/src/components/Pages/about/DogmaPage.tsx +++ b/src/components/Pages/about/DogmaPage.tsx @@ -5,7 +5,7 @@ import { PageWrap } from '../../_shared/PageWrap' export const DogmaPage = () => { return ( -
    +

    Редакционные принципы

    diff --git a/src/components/Pages/about/GuidePage.tsx b/src/components/Pages/about/GuidePage.tsx index aac38377..8d74df65 100644 --- a/src/components/Pages/about/GuidePage.tsx +++ b/src/components/Pages/about/GuidePage.tsx @@ -20,9 +20,9 @@ export const GuidePage = () => { {/**/} {/**/} -
    +
    -
    +
    +
    +
    + + +
    +
    + + +
    +
    + +
    +

    + +

    + +
    +
    +
    +

    + + ) +} + +// for lazy loading +export default ProfileSettingsPage diff --git a/src/components/Pages/profile/Settings.module.scss b/src/components/Pages/profile/Settings.module.scss new file mode 100644 index 00000000..70b5246d --- /dev/null +++ b/src/components/Pages/profile/Settings.module.scss @@ -0,0 +1,105 @@ +h4 { + font-weight: 500; +} + +.avatarContainer { + border-radius: 100%; + overflow: hidden; + position: relative; + height: 18rem; + width: 18rem; +} + +.avatar, +.avatarInput { + height: 100%; + left: 0; + position: absolute; + top: 0; + width: 100%; +} + +.avatar { + background: #ccc; + border: none; + object-fit: cover; + object-position: center; +} + +.avatarInput { + border-radius: 100%; + cursor: pointer; + opacity: 0; + z-index: 1; +} + +.multipleControls { + margin-top: 3rem; +} + +.multipleControlsItem { + position: relative; + + button { + background-color: #fff; + padding: 0.5em; + position: absolute; + right: 0.8em; + top: 50%; + transform: translateY(-50%); + transition: background-color 0.3s; + + &:hover { + background-color: #000; + + .icon { + filter: invert(1); + } + } + + .icon { + filter: invert(0); + transition: filter 0.3s; + } + } + + form & input { + padding-right: 5rem; + } +} + +.multipleControlsHeader { + display: flex; + margin-bottom: 0.5em; + + h4 { + flex: 1; + margin-bottom: 0; + } + + button { + margin-left: 1em; + padding-bottom: 0.5rem; + padding-top: 0.5rem; + } +} + +.discoursName { + display: flex; + + @include media-breakpoint-down(sm) { + flex-wrap: wrap; + + input { + min-width: 250px; + } + } + + label { + margin: 0.6em 0.5em 0 0; + } +} + +.discoursNameField { + flex: 1; +} diff --git a/src/components/Root.tsx b/src/components/Root.tsx index 9e9e751a..75a470f5 100644 --- a/src/components/Root.tsx +++ b/src/components/Root.tsx @@ -32,6 +32,7 @@ import { ConnectPage } from './Pages/ConnectPage' import { InboxPage } from './Pages/InboxPage' import { LayoutShoutsPage } from './Pages/LayoutShoutsPage' import { SessionProvider } from '../context/session' +import { ProfileSettingsPage } from './Pages/profile/ProfileSettingsPage' // TODO: lazy load // const SomePage = lazy(() => import('./Pages/SomePage')) @@ -58,7 +59,8 @@ const pagesMap: Record> = { partners: PartnersPage, principles: PrinciplesPage, termsOfUse: TermsOfUsePage, - thanks: ThanksPage + thanks: ThanksPage, + profileSettings: ProfileSettingsPage } export const Root = (props: PageProps) => { diff --git a/src/pages/profile/settings.astro b/src/pages/profile/settings.astro new file mode 100644 index 00000000..98564ae8 --- /dev/null +++ b/src/pages/profile/settings.astro @@ -0,0 +1,12 @@ +--- +import Prerendered from '../../main.astro' +import { Root } from '../../components/Root' +import { initRouter } from '../../stores/router' + +const { pathname, search } = Astro.url +initRouter(pathname, search) +--- + + + + diff --git a/src/stores/router.ts b/src/stores/router.ts index 67358486..7a960fb6 100644 --- a/src/stores/router.ts +++ b/src/stores/router.ts @@ -27,6 +27,8 @@ export interface Routes { thanks: void expo: 'layout' inbox: void // TODO: добавить ID текущего юзера + profile: void + profileSettings: void } const searchParamsStore = createSearchParams() @@ -53,7 +55,9 @@ const routerStore = createRouter( projects: '/about/projects', termsOfUse: '/about/terms-of-use', thanks: '/about/thanks', - expo: '/expo/:layout' + expo: '/expo/:layout', + profile: '/profile', + profileSettings: '/profile/settings' }, { search: false, diff --git a/src/styles/app.scss b/src/styles/app.scss index 34ae8298..869b2fe4 100644 --- a/src/styles/app.scss +++ b/src/styles/app.scss @@ -67,6 +67,7 @@ section { margin: 0 auto; max-width: 1400px; padding: 0 divide($container-padding-x, 2); + width: 100%; @include media-breakpoint-up(sm) { padding: 0 $container-padding-x; @@ -299,6 +300,12 @@ button { } } +.button--submit { + @include font-size(2rem); + + padding: 1.6rem 2rem; +} + form { .pretty-form__item { position: relative; @@ -317,6 +324,7 @@ form { input[type='password'], input[type='search'], input[type='tel'], + input[type='date'], textarea, select { border: 2px solid #e8e8e8; @@ -351,6 +359,19 @@ form { transition-timing-function: cubic-bezier(0, 0.25, 0.5, 1); user-select: none; } + + & + .form-message { + margin-top: -1.2rem; + } + + &.nolabel { + padding-bottom: 1.8rem; + padding-top: 1.7rem; + } + } + + .form-message--error { + color: #d00820; } select { @@ -378,6 +399,10 @@ form { top: 3rem; } } + + .form-message { + @include font-size(1.2rem); + } } .input--short { @@ -415,45 +440,6 @@ input[type='checkbox'] { display: none !important; } -.article__author { - font-size: 1.5rem; - font-weight: 400; - - &, - a { - color: #9fa1a7; - } - - a { - background: transparent; - transition: background-color 0.2s; - - &:hover { - background: #000; - color: #fff; - } - } -} - -.article__topic { - font-size: 1.2rem; - letter-spacing: 0.08em; - margin-bottom: 0.8rem; - text-transform: uppercase; - transition: background-color 0.2s; - - a { - background: transparent; - border: none; - color: $link-color; - - &:hover { - background: $link-color; - color: #fff; - } - } -} - figure { margin: 2em 0; } @@ -677,6 +663,8 @@ astro-island { } .shift-content { + position: relative; + @include media-breakpoint-up(md) { margin-left: 161px; } @@ -684,6 +672,27 @@ astro-island { @include media-breakpoint-up(lg) { margin-left: 235px; } + + .left-col { + height: 100%; + padding-right: 2rem; + position: absolute; + right: 100%; + top: 0; + + @include media-breakpoint-up(md) { + width: 161px; + } + + @include media-breakpoint-up(lg) { + width: 235px; + } + } + + .left-navigation { + position: sticky; + top: 0; + } } .center { @@ -790,3 +799,8 @@ details { -webkit-box-orient: vertical; white-space: normal; } + +.description { + @include font-size(1.4rem); + color: rgba(0 0 0 / 40%); +}