LemmyNet/joinlemmy-site
2
0
Fork 0
mirror of https://github.com/LemmyNet/joinlemmy-site.git synced 2024-11-22 04:11:15 +00:00
Code Issues Projects Releases Wiki Activity

Redesign instance list

Browse source
This commit is contained in:
Felix Ableitner 2022-03-02 13:34:37 +01:00 committed by Dessalines
parent db0eabda95
commit 702d1651b6
2 changed files with 66 additions and 34 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

34
src/assets/css/main.css
View file

@ -14,6 +14,12 @@
webkit-box-shadow: unset; webkit-box-shadow: unset;
box-shadow: unset; box-shadow: unset;
border: 1px solid var(--color-darkGrey) !important; 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 { .stylized {
font-family: "CaviarDreams", Fallback, sans-serif; font-family: "CaviarDreams", Fallback, sans-serif;
@ -32,11 +38,29 @@
p { p {
font: 1.2em/1.62 sans-serif; font: 1.2em/1.62 sans-serif;
} }
.join-banner { .join-icon {
width: 100%; width: 80px;
height: 100px; height: 80px;
object-fit: scale-down; 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 { .app-banner {
width: 100%; width: 100%;
height: 300px; height: 300px;
@ -65,3 +89,7 @@ img {
margin-top: 7px; margin-top: 7px;
background-color: #333; background-color: #333;
} }
.button-yellow {
background-color: #b5932e !important;
}

66
src/shared/components/instances.tsx
View file

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