Merge pull request #105 from LemmyNet/revert-redesign

Revert "Redesign instance list"

src/assets/css/main.css

@@ -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 {
+.join-banner {
-  width: 80px; 
+  width: 100%;
-  height: 80px; 
+  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;
-}

src/shared/components/instances.tsx

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