discours.io/webapp
5
0
Fork 0
Code Issues Pull Requests Actions Projects Wiki Activity

Fixed profile left column

Browse Source
This commit is contained in:
kvakazyambra 2023-03-24 01:05:23 +03:00
parent fc3f944a22
commit f73456cea5
8 changed files with 342 additions and 349 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
src/components/Discours/ProfileSettingsNavigation.module.scss
View File

@ -1,8 +1,7 @@
.navigationHeader { .navigationHeader {
@include font-size(1.8rem); @include font-size(1.8rem);
font-weight: bold; font-weight: bold;
margin-top: 1.1em !important; margin-top: 1.1em;
} }
.navigation { .navigation {

2
src/components/Views/Author.module.scss
View File

@ -1,7 +1,7 @@
.ratingContainer { .ratingContainer {
@include font-size(1.5rem); @include font-size(1.5rem);
display: inline-block; display: inline-flex;
vertical-align: top; vertical-align: top;
} }

2
src/components/Views/Feed.tsx
View File

@ -84,7 +84,7 @@ export const FeedView = () => {
<> <>
<div class="wide-container feed"> <div class="wide-container feed">
<div class="row"> <div class="row">
<div class={clsx('left-col col-md-5 col-xl-4', styles.feedNavigation)}> <div class={clsx('col-md-5 col-xl-4', styles.feedNavigation)}>
<FeedSidebar authors={sortedAuthors()} /> <FeedSidebar authors={sortedAuthors()} />
</div> </div>

4
src/pages/profile/Settings.module.scss
View File

@ -114,6 +114,10 @@ h5 {
.leftNavigation { .leftNavigation {
top: 9rem !important; top: 9rem !important;
h4:first-child {
margin-top: 0;
}
} }
.passwordToggleControl { .passwordToggleControl {

204
src/pages/profile/profileSecurity.page.tsx
View File

@ -8,120 +8,122 @@ export const ProfileSecurityPage = () => {
return ( return (
<PageLayout> <PageLayout>
<div class="wide-container"> <div class="wide-container">
<div class="offset-md-5"> <div class="row">
<div class="left-col"> <div class="col-md-5">
<div class={clsx('left-navigation', styles.leftNavigation)}> <div class={clsx('left-navigation', styles.leftNavigation)}>
<ProfileSettingsNavigation /> <ProfileSettingsNavigation />
</div> </div>
</div> </div>
<div class="row"> <div class="col-md-19">
<div class="col-md-20 col-lg-18 col-xl-16"> <div class="row">
<h1>Вход и&nbsp;безопасность</h1> <div class="col-md-20 col-lg-18 col-xl-16">
<p class="description">Настройки аккаунта, почты, пароля и&nbsp;способов входа.</p> <h1>Вход и&nbsp;безопасность</h1>
<p class="description">Настройки аккаунта, почты, пароля и&nbsp;способов входа.</p>
<form> <form>
<h4>Почта</h4> <h4>Почта</h4>
<div class="pretty-form__item"> <div class="pretty-form__item">
<input type="text" name="email" id="email" placeholder="Почта" /> <input type="text" name="email" id="email" placeholder="Почта" />
<label for="email">Почта</label> <label for="email">Почта</label>
</div> </div>
<h4>Изменить пароль</h4> <h4>Изменить пароль</h4>
<h5>Текущий пароль</h5> <h5>Текущий пароль</h5>
<div class="pretty-form__item"> <div class="pretty-form__item">
<input <input
type="text" type="text"
name="password-current" name="password-current"
id="password-current" id="password-current"
class={clsx(styles.passwordInput, 'nolabel')} class={clsx(styles.passwordInput, 'nolabel')}
/> />
<button type="button" class={styles.passwordToggleControl}> <button type="button" class={styles.passwordToggleControl}>
<Icon name="password-hide" /> <Icon name="password-hide" />
</button> </button>
</div> </div>
<h5>Новый пароль</h5> <h5>Новый пароль</h5>
<div class="pretty-form__item"> <div class="pretty-form__item">
<input <input
type="password" type="password"
name="password-new" name="password-new"
id="password-new" id="password-new"
class={clsx(styles.passwordInput, 'nolabel')} class={clsx(styles.passwordInput, 'nolabel')}
/> />
<button type="button" class={styles.passwordToggleControl}> <button type="button" class={styles.passwordToggleControl}>
<Icon name="password-open" /> <Icon name="password-open" />
</button> </button>
</div> </div>
<h5>Подтвердите новый пароль</h5> <h5>Подтвердите новый пароль</h5>
<div class="pretty-form__item"> <div class="pretty-form__item">
<input <input
type="password" type="password"
name="password-new-confirm" name="password-new-confirm"
id="password-new-confirm" id="password-new-confirm"
class={clsx(styles.passwordInput, 'nolabel')} class={clsx(styles.passwordInput, 'nolabel')}
/> />
<button type="button" class={styles.passwordToggleControl}> <button type="button" class={styles.passwordToggleControl}>
<Icon name="password-open" /> <Icon name="password-open" />
</button> </button>
</div> </div>
<h4>Социальные сети</h4> <h4>Социальные сети</h4>
<h5>Google</h5> <h5>Google</h5>
<div class="pretty-form__item"> <div class="pretty-form__item">
<p>
<button class={clsx('button', 'button--light', styles.socialButton)} type="button">
<Icon name="google" class={styles.icon} />
Привязать
</button>
</p>
</div>
<h5>VK</h5>
<div class="pretty-form__item">
<p>
<button class={clsx(styles.socialButton, 'button', 'button--light')} type="button">
<Icon name="vk" class={styles.icon} />
Привязать
</button>
</p>
</div>
<h5>Facebook</h5>
<div class="pretty-form__item">
<p>
<button class={clsx(styles.socialButton, 'button', 'button--light')} type="button">
<Icon name="facebook" class={styles.icon} />
Привязать
</button>
</p>
</div>
<h5>Apple</h5>
<div class="pretty-form__item">
<p>
<button
class={clsx(
styles.socialButton,
styles.socialButtonApple,
'button' + ' button--light'
)}
type="button"
>
<Icon name="apple" class={styles.icon} />
Привязать
</button>
</p>
</div>
<br />
<p> <p>
<button class={clsx('button', 'button--light', styles.socialButton)} type="button"> <button class="button button--submit" type="submit">
<Icon name="google" class={styles.icon} /> Сохранить настройки
Привязать
</button> </button>
</p> </p>
</div> </form>
</div>
<h5>VK</h5>
<div class="pretty-form__item">
<p>
<button class={clsx(styles.socialButton, 'button', 'button--light')} type="button">
<Icon name="vk" class={styles.icon} />
Привязать
</button>
</p>
</div>
<h5>Facebook</h5>
<div class="pretty-form__item">
<p>
<button class={clsx(styles.socialButton, 'button', 'button--light')} type="button">
<Icon name="facebook" class={styles.icon} />
Привязать
</button>
</p>
</div>
<h5>Apple</h5>
<div class="pretty-form__item">
<p>
<button
class={clsx(
styles.socialButton,
styles.socialButtonApple,
'button' + ' button--light'
)}
type="button"
>
<Icon name="apple" class={styles.icon} />
Привязать
</button>
</p>
</div>
<br />
<p>
<button class="button button--submit" type="submit">
Сохранить настройки
</button>
</p>
</form>
</div> </div>
</div> </div>
</div> </div>

264
src/pages/profile/profileSettings.page.tsx
View File

@ -84,145 +84,147 @@ export const ProfileSettingsPage = () => {
<PageLayout> <PageLayout>
<Show when={form}> <Show when={form}>
<div class="wide-container"> <div class="wide-container">
<div class="offset-md-5"> <div class="row">
<div class="left-col"> <div class="col-md-5">
<div class={clsx('left-navigation', styles.leftNavigation)}> <div class={clsx('left-navigation', styles.leftNavigation)}>
<ProfileSettingsNavigation /> <ProfileSettingsNavigation />
</div> </div>
</div> </div>
<div class="row"> <div class="col-md-19">
<div class="col-md-20 col-lg-18 col-xl-16"> <div class="row">
<h1>{t('Profile settings')}</h1> <div class="col-md-20 col-lg-18 col-xl-16">
<p class="description">{t('Here you can customize your profile the way you want.')}</p> <h1>{t('Profile settings')}</h1>
<form onSubmit={handleSubmit} enctype="multipart/form-data"> <p class="description">{t('Here you can customize your profile the way you want.')}</p>
<h4>{t('Userpic')}</h4> <form onSubmit={handleSubmit} enctype="multipart/form-data">
<div class="pretty-form__item"> <h4>{t('Userpic')}</h4>
<div class={styles.avatarContainer}> <div class="pretty-form__item">
<Show when={!isUserpicUpdating()} fallback={<Loading />}> <div class={styles.avatarContainer}>
<img <Show when={!isUserpicUpdating()} fallback={<Loading />}>
class={styles.avatar} <img
src={form.userpic} class={styles.avatar}
alt={form.name} src={form.userpic}
onClick={handleAvatarClick} alt={form.name}
/> onClick={handleAvatarClick}
</Show> />
</div>
</div>
<h4>{t('Name')}</h4>
<p class="description">
{t(
'Your name will appear on your profile page and as your signature in publications, comments and responses.'
)}
</p>
<div class="pretty-form__item">
<input
type="text"
name="username"
id="username"
placeholder={t('Name')}
onChange={(event) => updateFormField('name', event.currentTarget.value)}
value={form.name}
/>
<label for="username">{t('Name')}</label>
</div>
<h4>{t('Address on Discourse')}</h4>
<div class="pretty-form__item">
<div class={styles.discoursName}>
<label for="user-address">https://{hostname()}/author/</label>
<div class={styles.discoursNameField}>
<input
type="text"
name="user-address"
id="user-address"
onChange={(event) => updateFormField('slug', event.currentTarget.value)}
value={form.slug}
class="nolabel"
/>
<Show when={slugError()}>
<p class="form-message form-message--error">{t(`${slugError()}`)}</p>
</Show> </Show>
</div> </div>
</div> </div>
</div> <h4>{t('Name')}</h4>
<p class="description">
<h4>{t('Introduce')}</h4> {t(
<div class="pretty-form__item"> 'Your name will appear on your profile page and as your signature in publications, comments and responses.'
<textarea name="presentation" id="presentation" placeholder={t('Introduce')}>
{form.bio}
</textarea>
<label for="presentation">{t('Introduce')}</label>
</div>
<h4>{t('About myself')}</h4>
<div class="pretty-form__item">
<textarea
name="about"
id="about"
placeholder={t('About myself')}
value={form.about}
onChange={(event) => updateFormField('about', event.currentTarget.value)}
/>
<label for="about">{t('About myself')}</label>
</div>
{/*Нет реализации полей на бэке*/}
{/*<h4>{t('How can I help/skills')}</h4>*/}
{/*<div class="pretty-form__item">*/}
{/* <input type="text" name="skills" id="skills" />*/}
{/*</div>*/}
{/*<h4>{t('Where')}</h4>*/}
{/*<div class="pretty-form__item">*/}
{/* <input type="text" name="location" id="location" placeholder="Откуда" />*/}
{/* <label for="location">{t('Where')}</label>*/}
{/*</div>*/}
{/*<h4>{t('Date of Birth')}</h4>*/}
{/*<div class="pretty-form__item">*/}
{/* <input*/}
{/* type="date"*/}
{/* name="birthdate"*/}
{/* id="birthdate"*/}
{/* placeholder="Дата рождения"*/}
{/* class="nolabel"*/}
{/* />*/}
{/*</div>*/}
<div class={clsx(styles.multipleControls, 'pretty-form__item')}>
<div class={styles.multipleControlsHeader}>
<h4>{t('Social networks')}</h4>
<button type="button" class="button" onClick={() => setAddLinkForm(!addLinkForm())}>
+
</button>
</div>
<Show when={addLinkForm()}>
<div class={styles.multipleControlsItem}>
<input
autofocus={true}
type="text"
name="link"
class="nolabel"
onChange={(event) => handleChangeSocial(event.currentTarget.value)}
/>
</div>
<Show when={incorrectUrl()}>
<p class="form-message form-message--error">{t('It does not look like url')}</p>
</Show>
</Show>
<For each={form.links}>
{(link) => (
<div class={styles.multipleControlsItem}>
<input type="text" value={link} readonly={true} name="link" class="nolabel" />
<button type="button" onClick={() => updateFormField('links', link, true)}>
<Icon name="remove" class={styles.icon} />
</button>
</div>
)} )}
</For> </p>
</div> <div class="pretty-form__item">
<br /> <input
<Button type="submit" size="L" value={t('Save settings')} loading={isSubmitting()} /> type="text"
</form> name="username"
id="username"
placeholder={t('Name')}
onChange={(event) => updateFormField('name', event.currentTarget.value)}
value={form.name}
/>
<label for="username">{t('Name')}</label>
</div>
<h4>{t('Address on Discourse')}</h4>
<div class="pretty-form__item">
<div class={styles.discoursName}>
<label for="user-address">https://{hostname()}/author/</label>
<div class={styles.discoursNameField}>
<input
type="text"
name="user-address"
id="user-address"
onChange={(event) => updateFormField('slug', event.currentTarget.value)}
value={form.slug}
class="nolabel"
/>
<Show when={slugError()}>
<p class="form-message form-message--error">{t(`${slugError()}`)}</p>
</Show>
</div>
</div>
</div>
<h4>{t('Introduce')}</h4>
<div class="pretty-form__item">
<textarea name="presentation" id="presentation" placeholder={t('Introduce')}>
{form.bio}
</textarea>
<label for="presentation">{t('Introduce')}</label>
</div>
<h4>{t('About myself')}</h4>
<div class="pretty-form__item">
<textarea
name="about"
id="about"
placeholder={t('About myself')}
value={form.about}
onChange={(event) => updateFormField('about', event.currentTarget.value)}
/>
<label for="about">{t('About myself')}</label>
</div>
{/*Нет реализации полей на бэке*/}
{/*<h4>{t('How can I help/skills')}</h4>*/}
{/*<div class="pretty-form__item">*/}
{/* <input type="text" name="skills" id="skills" />*/}
{/*</div>*/}
{/*<h4>{t('Where')}</h4>*/}
{/*<div class="pretty-form__item">*/}
{/* <input type="text" name="location" id="location" placeholder="Откуда" />*/}
{/* <label for="location">{t('Where')}</label>*/}
{/*</div>*/}
{/*<h4>{t('Date of Birth')}</h4>*/}
{/*<div class="pretty-form__item">*/}
{/* <input*/}
{/* type="date"*/}
{/* name="birthdate"*/}
{/* id="birthdate"*/}
{/* placeholder="Дата рождения"*/}
{/* class="nolabel"*/}
{/* />*/}
{/*</div>*/}
<div class={clsx(styles.multipleControls, 'pretty-form__item')}>
<div class={styles.multipleControlsHeader}>
<h4>{t('Social networks')}</h4>
<button type="button" class="button" onClick={() => setAddLinkForm(!addLinkForm())}>
+
</button>
</div>
<Show when={addLinkForm()}>
<div class={styles.multipleControlsItem}>
<input
autofocus={true}
type="text"
name="link"
class="nolabel"
onChange={(event) => handleChangeSocial(event.currentTarget.value)}
/>
</div>
<Show when={incorrectUrl()}>
<p class="form-message form-message--error">{t('It does not look like url')}</p>
</Show>
</Show>
<For each={form.links}>
{(link) => (
<div class={styles.multipleControlsItem}>
<input type="text" value={link} readonly={true} name="link" class="nolabel" />
<button type="button" onClick={() => updateFormField('links', link, true)}>
<Icon name="remove" class={styles.icon} />
</button>
</div>
)}
</For>
</div>
<br />
<Button type="submit" size="L" value={t('Save settings')} loading={isSubmitting()} />
</form>
</div>
</div> </div>
</div> </div>
</div> </div>

196
src/pages/profile/profileSubscriptions.page.tsx
View File

@ -9,121 +9,123 @@ export const ProfileSubscriptionsPage = () => {
return ( return (
<PageLayout> <PageLayout>
<div class="wide-container"> <div class="wide-container">
<div class="offset-md-5"> <div class="row">
<div class="left-col"> <div class="col-md-5">
<div class={clsx('left-navigation', styles.leftNavigation)}> <div class={clsx('left-navigation', styles.leftNavigation)}>
<ProfileSettingsNavigation /> <ProfileSettingsNavigation />
</div> </div>
</div> </div>
<div class="row"> <div class="col-md-19">
<div class="col-md-20 col-lg-18 col-xl-16"> <div class="row">
<h1>Подписки</h1> <div class="col-md-20 col-lg-18 col-xl-16">
<p class="description">Здесь можно управлять всеми своими подписками на&nbsp;сайте.</p> <h1>Подписки</h1>
<p class="description">Здесь можно управлять всеми своими подписками на&nbsp;сайте.</p>
<form> <form>
<ul class="view-switcher"> <ul class="view-switcher">
<li class="selected"> <li class="selected">
<a href="src/components/Pages/profile#">Все</a> <a href="src/components/Pages/profile#">Все</a>
</li> </li>
<li> <li>
<a href="src/components/Pages/profile#">Авторы</a> <a href="src/components/Pages/profile#">Авторы</a>
</li> </li>
<li> <li>
<a href="src/components/Pages/profile#">Темы</a> <a href="src/components/Pages/profile#">Темы</a>
</li> </li>
<li> <li>
<a href="src/components/Pages/profile#">Сообщества</a> <a href="src/components/Pages/profile#">Сообщества</a>
</li> </li>
<li> <li>
<a href="src/components/Pages/profile#">Коллекции</a> <a href="src/components/Pages/profile#">Коллекции</a>
</li> </li>
</ul> </ul>
<div class={clsx('pretty-form__item', styles.searchContainer)}> <div class={clsx('pretty-form__item', styles.searchContainer)}>
<SearchField onChange={() => console.log('nothing')} class={styles.searchField} /> <SearchField onChange={() => console.log('nothing')} class={styles.searchField} />
</div> </div>
<div class={clsx(stylesSettings.settingsList, styles.topicsList)}> <div class={clsx(stylesSettings.settingsList, styles.topicsList)}>
<div class={stylesSettings.settingsListRow}> <div class={stylesSettings.settingsListRow}>
<div class={clsx(stylesSettings.settingsListCell, styles.topicsListItem)}> <div class={clsx(stylesSettings.settingsListCell, styles.topicsListItem)}>
<input type="checkbox" name="checkbox1" id="checkbox1" /> <input type="checkbox" name="checkbox1" id="checkbox1" />
<label for="checkbox1" /> <label for="checkbox1" />
</div>
<label for="checkbox1" class={stylesSettings.settingsListCell}>
Культура
</label>
</div> </div>
<label for="checkbox1" class={stylesSettings.settingsListCell}> <div class={stylesSettings.settingsListRow}>
Культура <div class={clsx(stylesSettings.settingsListCell, styles.topicsListItem)}>
</label> <input type="checkbox" name="checkbox2" id="checkbox2" />
</div> <label for="checkbox2" />
<div class={stylesSettings.settingsListRow}> </div>
<div class={clsx(stylesSettings.settingsListCell, styles.topicsListItem)}> <label for="checkbox2" class={stylesSettings.settingsListCell}>
<input type="checkbox" name="checkbox2" id="checkbox2" /> Eto_ya sam
<label for="checkbox2" /> </label>
</div> </div>
<label for="checkbox2" class={stylesSettings.settingsListCell}> <div class={stylesSettings.settingsListRow}>
Eto_ya sam <div class={clsx(stylesSettings.settingsListCell, styles.topicsListItem)}>
</label> <input type="checkbox" name="checkbox3" id="checkbox3" />
</div> <label for="checkbox3" />
<div class={stylesSettings.settingsListRow}> </div>
<div class={clsx(stylesSettings.settingsListCell, styles.topicsListItem)}> <label for="checkbox3" class={stylesSettings.settingsListCell}>
<input type="checkbox" name="checkbox3" id="checkbox3" /> Технопарк
<label for="checkbox3" /> </label>
</div> </div>
<label for="checkbox3" class={stylesSettings.settingsListCell}> <div class={stylesSettings.settingsListRow}>
Технопарк <div class={clsx(stylesSettings.settingsListCell, styles.topicsListItem)}>
</label> <input type="checkbox" name="checkbox4" id="checkbox4" />
</div> <label for="checkbox4" />
<div class={stylesSettings.settingsListRow}> </div>
<div class={clsx(stylesSettings.settingsListCell, styles.topicsListItem)}> <label for="checkbox4" class={stylesSettings.settingsListCell}>
<input type="checkbox" name="checkbox4" id="checkbox4" /> Лучшее
<label for="checkbox4" /> </label>
</div> </div>
<label for="checkbox4" class={stylesSettings.settingsListCell}> <div class={stylesSettings.settingsListRow}>
Лучшее <div class={clsx(stylesSettings.settingsListCell, styles.topicsListItem)}>
</label> <input type="checkbox" name="checkbox5" id="checkbox5" />
</div> <label for="checkbox5" />
<div class={stylesSettings.settingsListRow}> </div>
<div class={clsx(stylesSettings.settingsListCell, styles.topicsListItem)}> <label for="checkbox5" class={stylesSettings.settingsListCell}>
<input type="checkbox" name="checkbox5" id="checkbox5" /> Реклама
<label for="checkbox5" /> </label>
</div> </div>
<label for="checkbox5" class={stylesSettings.settingsListCell}> <div class={stylesSettings.settingsListRow}>
Реклама <div class={clsx(stylesSettings.settingsListCell, styles.topicsListItem)}>
</label> <input type="checkbox" name="checkbox6" id="checkbox6" />
</div> <label for="checkbox6" />
<div class={stylesSettings.settingsListRow}> </div>
<div class={clsx(stylesSettings.settingsListCell, styles.topicsListItem)}> <label for="checkbox6" class={stylesSettings.settingsListCell}>
<input type="checkbox" name="checkbox6" id="checkbox6" /> Искусство
<label for="checkbox6" /> </label>
</div> </div>
<label for="checkbox6" class={stylesSettings.settingsListCell}> <div class={stylesSettings.settingsListRow}>
Искусство <div class={clsx(stylesSettings.settingsListCell, styles.topicsListItem)}>
</label> <input type="checkbox" name="checkbox7" id="checkbox7" />
</div> <label for="checkbox7" />
<div class={stylesSettings.settingsListRow}> </div>
<div class={clsx(stylesSettings.settingsListCell, styles.topicsListItem)}> <label for="checkbox7" class={stylesSettings.settingsListCell}>
<input type="checkbox" name="checkbox7" id="checkbox7" /> Общество
<label for="checkbox7" /> </label>
</div> </div>
<label for="checkbox7" class={stylesSettings.settingsListCell}> <div class={stylesSettings.settingsListRow}>
Общество <div class={clsx(stylesSettings.settingsListCell, styles.topicsListItem)}>
</label> <input type="checkbox" name="checkbox8" id="checkbox8" />
</div> <label for="checkbox8" />
<div class={stylesSettings.settingsListRow}> </div>
<div class={clsx(stylesSettings.settingsListCell, styles.topicsListItem)}> <label for="checkbox8" class={stylesSettings.settingsListCell}>
<input type="checkbox" name="checkbox8" id="checkbox8" /> Личный опыт
<label for="checkbox8" /> </label>
</div> </div>
<label for="checkbox8" class={stylesSettings.settingsListCell}>
Личный опыт
</label>
</div> </div>
</div>
<br /> <br />
<p> <p>
<button class="button button--submit">Сохранить настройки</button> <button class="button button--submit">Сохранить настройки</button>
</p> </p>
</form> </form>
</div>
</div> </div>
</div> </div>
</div> </div>

16
src/styles/app.scss
View File

@ -691,22 +691,6 @@ figcaption {
margin-left: 235px; margin-left: 235px;
} }
.left-col {
height: 100%;
padding-right: 2rem;
right: 100%;
top: 0;
@include media-breakpoint-up(md) {
position: absolute;
width: 161px;
}
@include media-breakpoint-up(lg) {
width: 235px;
}
}
.left-navigation { .left-navigation {
position: sticky; position: sticky;
top: 0; top: 0;