mirror
/
soapbox
kopia lustrzana https://gitlab.com/soapbox-pub/soapbox
1
0
Forkuj 1
Kod Zgłoszenia Packages Projekty Wydania Wiki Aktywność

Refactor promo and features panels

merge-requests/391/head
Sean King 2020-11-10 17:22:02 -07:00
rodzic bd8081537a
commit d769ee7c90
Nie znaleziono w bazie danych klucza dla tego podpisu
ID klucza GPG: 510C52BACD6E7257
3 zmienionych plików z 33 dodań i 61 usunięć
Pokaż statystyki Ściągnij plik aktualizacji Ściągnij plik porównania Expand all files Collapse all files

51
app/soapbox/features/ui/components/features_panel.js
Wyświetl plik

@ -27,40 +27,31 @@ class FeaturesPanel extends React.PureComponent {
<div className='wtf-panel promo-panel'>
<div className='promo-panel__container'>
<div className='promo-panel-item'>
<NavLink className='promo-panel-item__btn' to='/settings/profile'>
<Icon id='user' className='promo-panel-item__icon' fixedWidth />
{intl.formatMessage(messages.edit_profile)}
</NavLink>
</div>
<NavLink className='promo-panel-item' to='/settings/profile'>
<Icon id='user' className='promo-panel-item__icon' fixedWidth />
{intl.formatMessage(messages.edit_profile)}
</NavLink>
<div className='promo-panel-item'>
<NavLink className='promo-panel-item__btn' to='/bookmarks'>
<Icon id='bookmark' className='promo-panel-item__icon' fixedWidth />
{intl.formatMessage(messages.bookmarks)}
</NavLink>
</div>
<div className='promo-panel-item'>
<NavLink className='promo-panel-item__btn' to='/lists'>
<Icon id='list' className='promo-panel-item__icon' fixedWidth />
{intl.formatMessage(messages.lists)}
</NavLink>
</div>
<NavLink className='promo-panel-item' to='/bookmarks'>
<Icon id='bookmark' className='promo-panel-item__icon' fixedWidth />
{intl.formatMessage(messages.bookmarks)}
</NavLink>
<div className='promo-panel-item'>
<NavLink className='promo-panel-item__btn' to='/auth/edit'>
<Icon id='lock' className='promo-panel-item__icon' fixedWidth />
{intl.formatMessage(messages.security)}
</NavLink>
</div>
<NavLink className='promo-panel-item' to='/lists'>
<Icon id='list' className='promo-panel-item__icon' fixedWidth />
{intl.formatMessage(messages.lists)}
</NavLink>
<div className='promo-panel-item'>
<NavLink className='promo-panel-item__btn' to='/settings/preferences'>
<Icon id='cog' className='promo-panel-item__icon' fixedWidth />
{intl.formatMessage(messages.preferences)}
</NavLink>
</div>
<NavLink className='promo-panel-item' to='/auth/edit'>
<Icon id='lock' className='promo-panel-item__icon' fixedWidth />
{intl.formatMessage(messages.security)}
</NavLink>
<NavLink className='promo-panel-item' to='/settings/preferences'>
<Icon id='cog' className='promo-panel-item__icon' fixedWidth />
{intl.formatMessage(messages.preferences)}
</NavLink>
</div>
</div>

10
app/soapbox/features/ui/components/promo_panel.js
Wyświetl plik

@ -23,12 +23,10 @@ class PromoPanel extends React.PureComponent {
<div className='wtf-panel promo-panel'>
<div className='promo-panel__container'>
{promoItems.map((item, i) =>
(<div className='promo-panel-item' key={i}>
<a className='promo-panel-item__btn' href={item.get('url')} target='_blank'>
<Icon id={item.get('icon')} className='promo-panel-item__icon' fixedWidth />
{item.get('text')}
</a>
</div>),
(<a className='promo-panel-item' href={item.get('url')} target='_blank' key={i}>
<Icon id={item.get('icon')} className='promo-panel-item__icon' fixedWidth />
{item.get('text')}
</a>),
)}
</div>
</div>

33
app/styles/components/promo-panel.scss
Wyświetl plik

@ -9,39 +9,22 @@
display: block;
height: 42px;
line-height: 42px;
color: var(--primary-text-color);
border-bottom: 1px solid var(--brand-color--med);
background: var(--foreground-color);
&--highlighted {
background-color: #30ce7d;
border-radius: 10px;
font-weight: 600;
margin-bottom: 10px;
}
&--top-rounded {
border-top-right-radius: 10px;
border-top-left-radius: 10px;
}
text-decoration: none;
font-size: 15px;
padding: 0 20px;
&:last-of-type {
border-bottom: 0;
}
&__btn {
display: block;
text-align: left;
color: var(--primary-text-color);
text-decoration: none;
font-size: 15px;
padding: 0 20px;
&:hover {
color: var(--primary-text-color--faint);
&:hover {
color: var(--primary-text-color--faint);
span {
text-decoration: underline;
}
span {
text-decoration: underline;
}
}