LemmyNet/joinlemmy-site
2
0
Fork 0
mirror of https://github.com/LemmyNet/joinlemmy-site.git synced 2024-11-21 20:01:16 +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
parent 2a8787aaa8
commit a19edf1d94
2 changed files with 58 additions and 36 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;
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;
@ -32,11 +38,29 @@
p {
font: 1.2em/1.62 sans-serif;
}
.join-banner {
width: 100%;
height: 100px;
.join-icon {
width: 80px;
height: 80px;
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;
@ -65,3 +89,7 @@ img {
margin-top: 7px;
background-color: #333;
}
.button-yellow {
background-color: #b5932e !important;
}

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

@ -36,42 +36,36 @@ export class Instances extends Component<any, any> {
<br />
<p>{i18n.t("choose_and_join")}</p>
<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(i.users_active_month)} {i18n.t("users")} /{" "}
{i18n.t("month")}
</i>
</h4>
</div>
</header>
<div class="is-center">
<img
class="join-banner"
src={i.icon || "/static/assets/images/lemmy.svg"}
/>
{instances.map(i => (
<div class="card">
<img
class="join-icon"
src={i.icon || "/static/assets/images/lemmy.svg"}
/>
<div class="join-text">
<div class="join-header">
<h4 class="join-title">{i.name}</h4>
<i>
{numToSI(i.users_active_month)} {i18n.t("users")} /{" "}
{i18n.t("month")}
</i>
</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://${i.domain}`}>
{i18n.t("join")}
</a>
)}
</footer>
</div>
))}
</div>
{i.require_application ? (
<a
class="button primary button-yellow"
href={`https://${i.domain}`}
>
{i18n.t("apply_to_join")}
</a>
) : (
<a class="button primary" href={`https://${i.domain}`}>
{i18n.t("join")}
</a>
)}
</div>
))}
</div>
</div>
);