Merge pull request #105 from LemmyNet/revert-redesign

Revert "Redesign instance list"
This commit is contained in:
Dessalines 2022-05-23 15:13:13 -04:00 committed by GitHub
commit 8ea88cc292
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 29 additions and 61 deletions

View file

@ -14,12 +14,6 @@
webkit-box-shadow: unset;
box-shadow: unset;
border: 1px solid var(--color-darkGrey) !important;
padding: 10px;
margin: 10px 0 10px 0;
height: 100px;
display: flex;
flex-direction: row;
align-items: center;
}
.stylized {
font-family: "CaviarDreams", Fallback, sans-serif;
@ -38,29 +32,11 @@
p {
font: 1.2em/1.62 sans-serif;
}
.join-icon {
width: 80px;
height: 80px;
.join-banner {
width: 100%;
height: 100px;
object-fit: scale-down;
}
.join-text {
display: inline-block;
margin: 0 10px 0 10px;
display: flex;
flex-direction: column;
flex: 1;
}
.join-header {
display: flex;
flex-direction: row;
}
.join-title {
margin: 0px;
flex: 1;
}
.join-desc {
font-size: 0.9em;
}
.app-banner {
width: 100%;
height: 300px;
@ -89,7 +65,3 @@ img {
margin-top: 7px;
background-color: #333;
}
.button-yellow {
background-color: #b5932e !important;
}

View file

@ -62,46 +62,42 @@ export class Instances extends Component<any, any> {
renderList(header: string, instances: any[]) {
return (
<div>
<Helmet title={title}>
<meta property={"title"} content={title} />
</Helmet>
<div class="container">
<h1 class="is-marginless">{header}</h1>
{instances.map(instance => {
const site = instance.site_info.site_view.site;
const counts = instance.site_info.site_view.counts;
return (
<div class="card">
<img
class="join-icon"
src={site.icon || "/static/assets/images/lemmy.svg"}
/>
<div class="join-text">
<div class="join-header">
<h4 class="join-title">{site.name}</h4>
<h2>{header}</h2>
<div class="row">
{instances.map(i => (
<div class="card col-6">
<header>
<div class="row">
<h4 class="col">{i.domain}</h4>
<h4 class="col text-right">
<i>
{numToSI(counts.users_active_month)} {i18n.t("users")} /{" "}
{numToSI(i.users_active_month)} {i18n.t("users")} /{" "}
{i18n.t("month")}
</i>
</div>
<p class="join-desc">{site.description}</p>
</h4>
</div>
{site.require_application ? (
<a
class="button primary button-yellow"
href={`https://${instance.domain}`}
>
</header>
<div class="is-center">
<img
class="join-banner"
src={i.icon || "/static/assets/images/lemmy.svg"}
/>
</div>
<br />
<p class="join-desc">{i.description}</p>
<footer>
{i.require_application ? (
<a class="button primary" href={`https://${i.domain}`}>
{i18n.t("apply_to_join")}
</a>
) : (
<a class="button primary" href={`https://${instance.domain}`}>
<a class="button primary" href={`https://${i.domain}`}>
{i18n.t("join")}
</a>
)}
</div>
);
})}
</footer>
</div>
))}
</div>
</div>
);