Commit ef7bc6f8 authored by Eugen Rochko's avatar Eugen Rochko

Redesign server list and add covenant banner

parent cdff78d9
import React from 'react';
import { injectIntl, FormattedMessage } from 'react-intl';
const Counter = ({ number, id, defaultMessage, intl }) => {
const label = number >= 1000 ? `${intl.formatNumber(number / 1000, { maximumFractionDigits: 1 })}K` : number;
const color = number > 200000 ? 'red' : (number > 100000 ? 'yellow' : 'green');
return (
<span className={`indicator-text ${color}`}>
<i className={`indicator ${color}`} /> <FormattedMessage id={id} defaultMessage={defaultMessage} values={{ label, count: number }} />
</span>
);
};
export default injectIntl(Counter);
import React from 'react';
import WizardRow from './WizardRow';
import { Scrollbars } from 'react-custom-scrollbars';
import WizardCard from './WizardCard';
import { FormattedHTMLMessage as FormattedMessage, injectIntl, defineMessages } from 'react-intl';
import ReactResponsiveSelect from 'react-responsive-select';
import { Link } from 'react-router-dom';
const messages = defineMessages({
i_am: { id: 'wizard.filters.i_am', defaultMessage: 'I am ' },
i_speak: { id: 'wizard.filters.i_speak', defaultMessage: 'I speak ' },
artist: { id: 'wizard.filters.artist', defaultMessage: 'an artist' },
musician: { id: 'wizard.filters.musician', defaultMessage: 'a musician' },
writer: { id: 'wizard.filters.writer', defaultMessage: 'a writer' },
reader: { id: 'wizard.filters.reader', defaultMessage: 'a book lover' },
activist: { id: 'wizard.filters.activist', defaultMessage: 'an activist' },
sports_fan: { id: 'wizard.filters.sports_fan', defaultMessage: 'a sports fan' },
gamer: { id: 'wizard.filters.gamer', defaultMessage: 'a gamer' },
dev: { id: 'wizard.filters.dev', defaultMessage: 'a developer' },
sysadmin: { id: 'wizard.filters.sysadmin', defaultMessage: 'a sysadmin' },
academia: { id: 'wizard.filters.academia', defaultMessage: 'in academia' },
journalist: { id: 'wizard.filter.journalist', defaultMessage: 'a journalist' },
adult_content_creator: { id: 'wizard.filter.adult_content_creator', defaultMessage: 'an adult content creator' },
art: { id: 'wizard.filters.art', defaultMessage: 'Art' },
music: { id: 'wizard.filters.music', defaultMessage: 'Music' },
books: { id: 'wizard.filters.books', defaultMessage: 'Books' },
activism: { id: 'wizard.filters.activism', defaultMessage: 'Activism' },
sports: { id: 'wizard.filters.sports', defaultMessage: 'Sports' },
gaming: { id: 'wizard.filters.gaming', defaultMessage: 'Gaming' },
tech: { id: 'wizard.filters.technology', defaultMessage: 'Technology' },
academia: { id: 'wizard.filters.academia', defaultMessage: 'Academia' },
journalism: { id: 'wizard.filter.journalism', defaultMessage: 'Journalism' },
adult: { id: 'wizard.filter.adult_content', defaultMessage: 'Adult content' },
lgbt: { id: 'wizard.filter.lgbt', defaultMessage: 'LGBTQ+' },
poc_aa: { id: 'wizard.filter.poc_aa', defaultMessage: 'Black American' },
humor: { id: 'wizard.filter.humor', defaultMessage: 'a humorist' },
furry: { id: 'wizard.filter.furry', defaultMessage: 'a furry' },
poc: { id: 'wizard.filter.poc_aa', defaultMessage: 'Black American' },
humor: { id: 'wizard.filter.humor', defaultMessage: 'Humour' },
furry: { id: 'wizard.filter.furry', defaultMessage: 'Furry' },
category: { id: 'wizard.filter.category', defaultMessage: 'Category: ' },
language: { id: 'wizard.filter.language', defaultMessage: 'Language: ' },
general: { id: 'wizard.filter.general', defaultMessage: 'General' },
all_languages: { id: 'wizard.filter.all_languages', defaultMessage: 'All languages' },
});
const caretIcon = (
......@@ -62,12 +63,25 @@ class Wizard extends React.PureComponent {
const { instances, category, language, intl } = this.props;
const content = instances.length > 0 ? (
instances.map(item => <WizardRow key={item.id} instance={item} />)
<div>
<div className='wizard__row'>
{instances.slice(0, 3).map(item => <WizardCard key={item.id} instance={item} />)}
</div>
<div className='covenant-banner'>
<i className='ion-md-heart' /> <FormattedMessage id='covenant_banner.text' defaultMessage='We only list servers that are committed to active moderation against <strong>racism, sexism and transphobia</strong>.' /> <Link to='/covenant' className='link-button'><FormattedMessage id='covenant_banner.learn_more' defaultMessage='Learn more about this policy or how to submit your own server' /> <i className='ion-ios-arrow-forward' /></Link>
</div>
<div className='wizard__list'>
{instances.slice(3).map(item => <WizardRow key={item.id} instance={item} />)}
</div>
</div>
) : (
<div className='empty'>
<FormattedMessage id='wizard.empty' defaultMessage='No results… for now!' />
</div>
);
return (
<div className='wizard-page' id='getting-started'>
<h1><i className='ion-md-person-add' /> <FormattedMessage id='wizard.sign_up' defaultMessage='Sign up' /></h1>
......@@ -81,27 +95,25 @@ class Wizard extends React.PureComponent {
<ReactResponsiveSelect
name="category"
options={[
{ value: '', text: '…' },
{ value: 'art', text: intl.formatMessage(messages.artist) },
{ value: 'music', text: intl.formatMessage(messages.musician) },
{ value: 'books-0', text: intl.formatMessage(messages.writer) },
{ value: 'books-1', text: intl.formatMessage(messages.reader) },
{ value: 'journalism', text: intl.formatMessage(messages.journalist) },
{ value: 'activism', text: intl.formatMessage(messages.activist) },
{ value: '', text: intl.formatMessage(messages.general) },
{ value: 'art', text: intl.formatMessage(messages.art) },
{ value: 'music', text: intl.formatMessage(messages.music) },
{ value: 'books', text: intl.formatMessage(messages.books) },
{ value: 'journalism', text: intl.formatMessage(messages.journalism) },
{ value: 'activism', text: intl.formatMessage(messages.activism) },
{ value: 'lgbt', text: intl.formatMessage(messages.lgbt) },
{ value: 'poc-0', text: intl.formatMessage(messages.poc_aa) },
{ value: 'sports', text: intl.formatMessage(messages.sports_fan) },
{ value: 'games', text: intl.formatMessage(messages.gamer) },
{ value: 'tech-0', text: intl.formatMessage(messages.dev) },
{ value: 'tech-1', text: intl.formatMessage(messages.sysadmin) },
{ value: 'poc', text: intl.formatMessage(messages.poc) },
{ value: 'sports', text: intl.formatMessage(messages.sports) },
{ value: 'games', text: intl.formatMessage(messages.gaming) },
{ value: 'tech', text: intl.formatMessage(messages.tech) },
{ value: 'academia', text: intl.formatMessage(messages.academia) },
{ value: 'adult', text: intl.formatMessage(messages.adult_content_creator) },
{ value: 'adult', text: intl.formatMessage(messages.adult) },
{ value: 'humor', text: intl.formatMessage(messages.humor) },
{ value: 'furry', text: intl.formatMessage(messages.furry) },
]}
caretIcon={caretIcon}
selectedValue={category}
prefix={intl.formatMessage(messages.i_am)}
prefix={intl.formatMessage(messages.category)}
onChange={this.handleCategoryChange}
/>
......@@ -110,7 +122,7 @@ class Wizard extends React.PureComponent {
<ReactResponsiveSelect
name="language"
options={[
{ value: '', text: '…' },
{ value: '', text: intl.formatMessage(messages.all_languages) },
{ value: 'ar', text: 'العربية' },
{ value: 'ca', text: 'Català' },
{ value: 'cs', text: 'Česky' },
......@@ -135,16 +147,14 @@ class Wizard extends React.PureComponent {
]}
caretIcon={caretIcon}
selectedValue={language}
prefix={intl.formatMessage(messages.i_speak)}
prefix={intl.formatMessage(messages.language)}
onChange={this.handleLanguageChange}
/>
</div>
</form>
<div className='wizard'>
<Scrollbars className='wizard-content' style={{ height: 500 }} renderThumbVertical={this.renderThumb}>
{content}
</Scrollbars>
{content}
</div>
</div>
);
......
import React from 'react';
import { injectIntl, FormattedMessage } from 'react-intl';
import Counter from './Counter';
const WizardCard = ({ instance, intl }) => (
<div className='wizard-card'>
<div className='wizard-card__hero'>
<img src={instance.thumbnail_proxy} alt='' />
</div>
<div className='wizard-card__row'>
<div className='wizard-card__text'>
<strong>{instance.name}</strong>
<br />
<Counter number={instance.users} id='wizard_row.user_count' defaultMessage='{label} {count, plural, one {person} other {people}}' />
</div>
<a href={`https://${instance.name}/about`} target='_blank' rel='noopener noreferrer' className='cta button'>
<FormattedMessage id='wizard_card.join' defaultMessage='Join' />
</a>
</div>
<div className='wizard-card__description'>{instance.info.short_description}</div>
</div>
);
export default injectIntl(WizardCard);
import React from 'react';
import { defineMessages, injectIntl, FormattedMessage } from 'react-intl';
import classNames from 'classnames';
import Counter from './Counter';
const messages = defineMessages({
stable: { id: 'wizard_row.stability.stable', defaultMessage: 'Stable' },
intermittent: { id: 'wizard_row.stability.intermittent', defaultMessage: 'Intermittent' },
awful: { id: 'wizard_row.stability.awful', defaultMessage: 'Awful' },
art: { id: 'wizard.filters.art', defaultMessage: 'Art' },
music: { id: 'wizard.filters.music', defaultMessage: 'Music' },
books: { id: 'wizard.filters.books', defaultMessage: 'Books' },
activism: { id: 'wizard.filters.activism', defaultMessage: 'Activism' },
sports: { id: 'wizard.filters.sports', defaultMessage: 'Sports' },
gaming: { id: 'wizard.filters.gaming', defaultMessage: 'Gaming' },
tech: { id: 'wizard.filters.technology', defaultMessage: 'Technology' },
academia: { id: 'wizard.filters.academia', defaultMessage: 'Academia' },
journalism: { id: 'wizard.filter.journalism', defaultMessage: 'Journalism' },
adult: { id: 'wizard.filter.adult_content', defaultMessage: 'Adult content' },
lgbt: { id: 'wizard.filter.lgbt', defaultMessage: 'LGBTQ+' },
poc: { id: 'wizard.filter.poc_aa', defaultMessage: 'Black American' },
humor: { id: 'wizard.filter.humor', defaultMessage: 'Humour' },
furry: { id: 'wizard.filter.furry', defaultMessage: 'Furry' },
general: { id: 'wizard.filter.general', defaultMessage: 'General' },
});
const WizardRow = ({ instance, intl }) => {
const theme = (instance.info && instance.info.theme) || 'General';
const description = (instance.info && instance.info.short_description) || theme;
const population = instance.users >= 1000 ? `${intl.formatNumber(instance.users / 1000, { maximumFractionDigits: 1 })}K` : instance.users;
let stabilityColor, stabilityLabel,
populationColor;
if (instance.uptime > 0.95) {
stabilityLabel = intl.formatMessage(messages.stable);
stabilityColor = 'green';
} else if (instance.uptime > 0.50) {
stabilityLabel = intl.formatMessage(messages.intermittent);
stabilityColor = 'yellow';
} else {
stabilityLabel = intl.formatMessage(messages.awful);
stabilityColor = 'red';
}
if (instance.users > 200000) {
populationColor = 'red';
} else if (instance.users > 100000) {
populationColor = 'yellow';
} else {
populationColor = 'green';
}
const populationSpan = <FormattedMessage id='wizard_row.user_count' defaultMessage='{population} {count, plural, one {person} other {people}}' values={{ population, count: instance.users }} />;
const category = instance.info && instance.info.categories[0] ? instance.info.categories[0] : 'general';
return (
<a href={`https://${instance.name}/about`} target='_blank' rel='noopener noreferrer' className={classNames('wizard-row', { offline: !instance.up })}>
<div className='wizard-row__thumbnail'>
<div>
<img src={instance.thumbnail_proxy} alt='' />
<div className={classNames('wizard-row', { offline: !instance.up })}>
<div className='wizard-row__row'>
<div className='wizard-row__main'>
<div className='wizard-row__row'>
<div className='wizard-row__thumbnail'>
<div>
<img src={instance.thumbnail_proxy} alt='' />
</div>
</div>
<div className='wizard-row__details'>
<div className='wizard-row__name'><strong>{instance.name}</strong></div>
<div className='wizard-row__description'>{intl.formatMessage(messages[category] || messages.general)}<span className='wizard-row__description__sep' />v{instance.version}</div>
</div>
</div>
<div className='wizard-row__more'>{instance.info ? instance.info.short_description : 'Missing description'}</div>
</div>
</div>
<div className='wizard-row__details'>
<div className='wizard-row__name'>{instance.name}<span className={`xs-show indicator-text ${populationColor}`}>{populationSpan}</span></div>
<div className='wizard-row__description'>{description}</div>
</div>
<div className='wizard-row__meta'>
<a href={`https://${instance.name}/about`} target='_blank' rel='noopener noreferrer' className='cta button'>
<FormattedMessage id='wizard_card.join' defaultMessage='Join' />
</a>
<div className='wizard-row__meta'>
<div className='wizard-row__stability'><span className={`indicator-text ${stabilityColor}`}><i className={`indicator ${stabilityColor}`} /> {stabilityLabel}</span></div>
<div className='wizard-row__population'><span className={`indicator-text ${populationColor}`}><i className={`indicator ${populationColor}`} /> {populationSpan}</span></div>
<Counter number={instance.users} id='wizard_row.user_count' defaultMessage='{label} {count, plural, one {person} other {people}}' />
</div>
</div>
</a>
</div>
);
};
......
......@@ -89,5 +89,5 @@
"wizard_row.stability.awful": "ممتلئ كفاية",
"wizard_row.stability.intermittent": "غير منتظم",
"wizard_row.stability.stable": "ثابت",
"wizard_row.user_count": "{population} {count, plural, one {person} other {people}}"
}
\ No newline at end of file
"wizard_row.user_count": "{label} {count, plural, one {person} other {people}}"
}
......@@ -89,5 +89,5 @@
"wizard_row.stability.awful": "Otřesný",
"wizard_row.stability.intermittent": "Nestabilní",
"wizard_row.stability.stable": "Stabilní",
"wizard_row.user_count": "{population} {count, plural, one {člověk} few {lidé} many {lidí} other {lidí}}"
"wizard_row.user_count": "{label} {count, plural, one {člověk} few {lidé} many {lidí} other {lidí}}"
}
......@@ -89,5 +89,5 @@
"wizard_row.stability.awful": "Ofnadwy",
"wizard_row.stability.intermittent": "Ysbeidiol",
"wizard_row.stability.stable": "Dibynadwy",
"wizard_row.user_count": "{population} {count, plural, one {person} other {people}}"
"wizard_row.user_count": "{label} {count, plural, one {person} other {people}}"
}
......@@ -89,5 +89,5 @@
"wizard_row.stability.awful": "Furchtbar",
"wizard_row.stability.intermittent": "Mittelmäßig",
"wizard_row.stability.stable": "Stabil",
"wizard_row.user_count": "{population} {count, plural, one {Person} other {Leute}}"
}
\ No newline at end of file
"wizard_row.user_count": "{label} {count, plural, one {Person} other {Leute}}"
}
......@@ -63,24 +63,6 @@
"sponsorship.thanks_to": "Mastodon is <strong>free, open-source software</strong>. There is no advertising, monetizing, or venture capital. <strong>Your donations directly support full-time development of the project</strong>. Thank you to the following people and companies:",
"title": "Giving social networking back to you - The Mastodon Project",
"wizard.empty": "No results… for now!",
"wizard.filter.adult_content_creator": "an adult content creator",
"wizard.filter.furry": "a furry",
"wizard.filter.humor": "a humorist",
"wizard.filter.journalist": "a journalist",
"wizard.filter.lgbt": "LGBTQ+",
"wizard.filter.poc_aa": "Black American",
"wizard.filters.academia": "in academia",
"wizard.filters.activist": "an activist",
"wizard.filters.artist": "an artist",
"wizard.filters.dev": "a developer",
"wizard.filters.gamer": "a gamer",
"wizard.filters.i_am": "I am ",
"wizard.filters.i_speak": "I speak ",
"wizard.filters.musician": "a musician",
"wizard.filters.reader": "a book lover",
"wizard.filters.sports_fan": "a sports fan",
"wizard.filters.sysadmin": "a sysadmin",
"wizard.filters.writer": "a writer",
"wizard.find_twitter_friends": "Find Twitter friends",
"wizard.hint2": "All you need to do to sign up is choose a server. Just like when signing up for an e-mail address, one server is going to be hosting your account and be part of your identity.",
"wizard.hint3": "These servers are operated by independent organizations and may have different moderation policies. If you are unsure what to pick, you can try this button.",
......@@ -89,5 +71,5 @@
"wizard_row.stability.awful": "Awful",
"wizard_row.stability.intermittent": "Intermittent",
"wizard_row.stability.stable": "Stable",
"wizard_row.user_count": "{population} {count, plural, one {person} other {people}}"
"wizard_row.user_count": "{label} {count, plural, one {person} other {people}}"
}
......@@ -89,5 +89,5 @@
"wizard_row.stability.awful": "Horrible",
"wizard_row.stability.intermittent": "Intermitente",
"wizard_row.stability.stable": "Estable",
"wizard_row.user_count": "{population} {count, plural, one {person} other {people}}"
}
\ No newline at end of file
"wizard_row.user_count": "{label} {count, plural, one {person} other {people}}"
}
......@@ -89,5 +89,5 @@
"wizard_row.stability.awful": "Horrible",
"wizard_row.stability.intermittent": "Intermittent",
"wizard_row.stability.stable": "Stable",
"wizard_row.user_count": "{population} {count, plural, one {utilisateur·ice} other {utilisateur·ice·s}}"
}
\ No newline at end of file
"wizard_row.user_count": "{label} {count, plural, one {utilisateur·ice} other {utilisateur·ice·s}}"
}
......@@ -89,5 +89,5 @@
"wizard_row.stability.awful": "Terribile",
"wizard_row.stability.intermittent": "Intermittente",
"wizard_row.stability.stable": "Stabile",
"wizard_row.user_count": "{population} {count, plural, one {persona} other {persone}}"
}
\ No newline at end of file
"wizard_row.user_count": "{label} {count, plural, one {persona} other {persone}}"
}
......@@ -89,5 +89,5 @@
"wizard_row.stability.awful": "不安定",
"wizard_row.stability.intermittent": "断続的",
"wizard_row.stability.stable": "安定",
"wizard_row.user_count": "{population} 人"
"wizard_row.user_count": "{label} 人"
}
......@@ -89,5 +89,5 @@
"wizard_row.stability.awful": "불안정",
"wizard_row.stability.intermittent": "간헐적",
"wizard_row.stability.stable": "안정",
"wizard_row.user_count": "{population} 명"
}
\ No newline at end of file
"wizard_row.user_count": "{label} 명"
}
......@@ -15,7 +15,7 @@
"features.find_your_community": "Vind de gemeenschap die bij je past",
"features.find_your_community_text2": "Mastodon staat niet op zichzelf, maar maakt onderdeel uit van een gefedereerd netwerk. Dit netwerk bestaat uit duizenden onafhankelijke servers en gemeenschappen die samen een geheel vormen. Als je onderdeel bent van één van deze gemeenschappen ben je onderdeel van het hele netwerk.",
"features.for_individual": "Mastodon voor jou",
"features.for_individual_text": "Omdat Mastodon geen winstoogmerk heeft, kun je ongestoord je berichten lezen en schrijven. Je tijdlijn is chronologisch, vrij van advertenties en niet gefilterd door algoritmes. Jij bepaalt want je wilt zien!",
"features.for_individual_text": "Omdat Mastodon geen winstoogmerk heeft, kun je ongestoord je berichten lezen en schrijven. Je tijdlijn is chronologisch, vrij van advertenties en niet gefilterd door algoritmes. Jij bepaalt want je wilt zien!",
"features.for_organization": "Mastodon voor jouw organisatie",
"features.for_organization_text": "Beheer je eigen sociale media op je eigen infrastructuur. Laat je organisatie niet afhankelijk zijn van de grillen van grote softwarebedrijven. Bepaal je eigen regels!",
"features.install_server": "Installeer een server",
......@@ -89,5 +89,5 @@
"wizard_row.stability.awful": "Vreselijk",
"wizard_row.stability.intermittent": "Matig",
"wizard_row.stability.stable": "Stabiel",
"wizard_row.user_count": "{population} {count, plural, one {gebruiker} other {gebruikers}}"
}
\ No newline at end of file
"wizard_row.user_count": "{label} {count, plural, one {gebruiker} other {gebruikers}}"
}
......@@ -89,5 +89,5 @@
"wizard_row.stability.awful": "Okropna",
"wizard_row.stability.intermittent": "Średnia",
"wizard_row.stability.stable": "Dobra",
"wizard_row.user_count": "{population} {count, plural, one {użytkownik} few {użytkownicy} many {użytkowników} other {użytkowników}}"
"wizard_row.user_count": "{label} {count, plural, one {użytkownik} few {użytkownicy} many {użytkowników} other {użytkowników}}"
}
......@@ -89,5 +89,5 @@
"wizard_row.stability.awful": "Terrível",
"wizard_row.stability.intermittent": "Intermitente",
"wizard_row.stability.stable": "Estável",
"wizard_row.user_count": "{population} {count, plural, one {pessoa} other {pessoas}}"
}
\ No newline at end of file
"wizard_row.user_count": "{label} {count, plural, one {pessoa} other {pessoas}}"
}
......@@ -89,5 +89,5 @@
"wizard_row.stability.awful": "Ужасно",
"wizard_row.stability.intermittent": "Прерывисто",
"wizard_row.stability.stable": "Стабильно",
"wizard_row.user_count": "{population} {count, plural, one {человек} other {человек}}"
}
\ No newline at end of file
"wizard_row.user_count": "{label} {count, plural, one {человек} other {человек}}"
}
......@@ -89,5 +89,5 @@
"wizard_row.stability.awful": "E shpifur",
"wizard_row.stability.intermittent": "Me hope",
"wizard_row.stability.stable": "E qëndrueshme",
"wizard_row.user_count": "{population} {count, plural, one {person} other {vetë}}"
"wizard_row.user_count": "{label} {count, plural, one {person} other {vetë}}"
}
......@@ -87,5 +87,5 @@
"wizard_row.stability.awful": "不穩定",
"wizard_row.stability.intermittent": "中等",
"wizard_row.stability.stable": "穩定",
"wizard_row.user_count": "{population} 個使用者"
"wizard_row.user_count": "{label} 個使用者"
}
......@@ -89,5 +89,5 @@
"wizard_row.stability.awful": "不稳定",
"wizard_row.stability.intermittent": "中等",
"wizard_row.stability.stable": "稳定",
"wizard_row.user_count": "{population} 位用户"
}
\ No newline at end of file
"wizard_row.user_count": "{label} 位用户"
}
......@@ -132,12 +132,7 @@
.wizard {
margin: 15px auto;
background: lighten($darkest, 8%);
box-shadow: 1px 2px 4px rgba(0, 0, 0, 0.2);
border-radius: 10px;
max-width: 800px;
max-height: 60vh;
overflow: hidden;
.wizard-header {
display: flex;
......@@ -156,34 +151,144 @@
}
}
&__row {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-column-gap: 10px;
margin-bottom: 20px;
}
.wizard-card {
background: lighten($darkest, 4%);
border-radius: 4px;
box-shadow: 1px 2px 4px rgba(0, 0, 0, 0.2);
&__description {
padding: 10px;
font-size: 13px;
line-height: 21px;
color: darken($lighter, 12%);
}
&__hero {
overflow: hidden;
height: 130px;
border-radius: 4px 4px 0 0;
background: darken($darkest, 4%);
img {
width: 100%;
height: 100%;
object-fit: cover;
}
}
&__row {
display: flex;
padding: 10px;
align-items: center;
background: lighten($darkest, 8%);
}
&__text {
flex: 1 1 auto;
font-size: 14px;
strong {
font-weight: 700;
}
}
}
.button {
margin-right: 0;
margin-bottom: 0;
text-decoration: none;
min-width: 60px;
background: darken($success, 8%);
color: $white;
&:hover,
&:focus,
&:active {
background: darken($success, 4%);
}
}
.empty {
position: absolute;
width: 100%;
height: 100%;
min-height: 30vh;
display: flex;
align-items: center;
justify-content: center;
background: lighten($darkest, 4%);
color: $lighter;
border-radius: 4px;
box-shadow: 1px 2px 4px rgba(0, 0, 0, 0.2);
}
.wizard-row {
display: flex;
font-size: 14px;
text-decoration: none;
color: inherit;
justify-content: space-between;
&__row {
display: flex;
justify-content: space-between;
}
&__more {
padding: 10px;
padding-top: 0;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
font-size: 13px;
line-height: 21px;
color: darken($lighter, 12%);
}
&__details {
width: 75%;
flex: 1 1 auto;
padding: 10px 0;
}
&__meta {
width: 15%;
padding: 10px 0;
box-sizing: border-box;
flex: 0 0 auto;
width: 126px;
padding: 10px;
padding-top: 18px;
.button {
box-sizing: border-box;
width: 100%;
}
.indicator-text {
display: block;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
position: relative;
top: 12px;
}
}
&__description {
&__sep {
display: inline-block;
width: 10px;
}
}
&__main {
flex: 1 1 auto;
max-width: calc(100% - 126px);
}
&__thumbnail {
width: 10%;
width: 90px;
flex: 0 0 auto;
padding: 10px 0;
display: flex;
......@@ -193,6 +298,7 @@
overflow: hidden;
border-radius: 4px;
width: 100%;
height: 60px;
position: relative;
background: $darkest;
......@@ -211,81 +317,25 @@
&:nth-child(even) {
background: lighten($darkest, 2%);
}
&:hover {
.wizard-row__name {
color: $lightest;
}
}
&:focus {
background: mix($darkest, $vibrant);
color: $white;
}
&.offline {
color: lighten($darkest, 26%);
.indicator-text {
color: lighten($darkest, 26%) !important;
}
.indicator {
background: lighten($darkest, 26%) !important;
}
&:focus {
color: $white;
.indicator-text {
color: $white !important;
}
.indicator {
background: $white !important;
}
}
}
}
.wizard-column {
padding: 10px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
&:nth-child(1n) {
width: 20%;
}
&:nth-child(2n), &:nth-child(3n) {
width: 17%;
}
&:nth-child(4n) {
width: 100% - 2*17% - 20%;
}
}
.wizard-content {
height: 500px;
overflow-y: hidden;
.wizard__list {
background: lighten($darkest, 4%);
color: $lighter;
.wizard-column {
cursor: pointer;