shrimpo cards styling

datafruits · Mar 11, 2024 · e90c4d5 · e90c4d5
1 parent 789ea01
commit e90c4d5
Show file tree

Hide file tree

Showing 5 changed files with 60 additions and 25 deletions.
diff --git a/app/components/shrimpo/card.hbs b/app/components/shrimpo/card.hbs
@@ -1,23 +1,37 @@
-<div class="m-4 classic:bg-df-pink blm:bg-black rounded-lg border-4 border-white flex flex-col items-center justify-between w-full md:w-1/4 p-2 shadow-md">
+<LinkTo
+  class="m-4 classic:bg-df-pink blm:bg-black rounded-lg border-4 border-white flex justify-between w-full p-2 shadow-md"
+  @route="home.shrimpos.show"
+  @model={{@shrimpo.slug}}>
   <div>
-    {{#if @shrimpo.coverArtUrl}}
-      <img src={{@shrimpo.coverArtUrl}} />
-    {{else}}
-      <img src={{@shrimpo.user.avatarUrlOrDefault}} />
-    {{/if}}
-  </div>
-  <h2 class="text-xl">
-    <LinkTo @route="home.shrimpos.show" @model={{@shrimpo.slug}}>
-      {{@shrimpo.title}}
-    </LinkTo>
-  </h2>
-  <div>
-    {{@shrimpo.entriesCount}} entries
+    <div>
+      {{#if @shrimpo.coverArtUrl}}
+        <img
+          style="height: 6rem;"
+          src={{@shrimpo.coverArtUrl}}
+        />
+      {{else}}
+        <img src={{@shrimpo.user.avatarUrlOrDefault}} />
+      {{/if}}
+    </div>
+    <div class="flex flex-col">
+      <h2 class="text-xl">
+        {{@shrimpo.title}}
+      </h2>
+      <div class="text-white">
+        {{@shrimpo.entriesCount}} entries
+      </div>
+    </div>
   </div>
   <div>
-    {{@shrimpo.status}}
+    <div class="text-white font-bold">
+      {{@shrimpo.status}}
+    </div>
+    {{#if (eq @shrimpo.status 'running')}}
+      <Shrimpo::Countdown @endAt={{@shrimpo.endAt}} />
+    {{/if}}
+    <div class="text-white">
+      <span class="font-bold">Host:</span>
+      {{@shrimpo.username}}
+    </div>
   </div>
-  {{#if (eq @shrimpo.status 'running')}}
-    <Shrimpo::Countdown @endAt={{@shrimpo.endAt}} />
-  {{/if}}
-</div>
+</LinkTo>
diff --git a/app/components/shrimpo/countdown.hbs b/app/components/shrimpo/countdown.hbs
@@ -1 +1,3 @@
-Time left: {{this.currentTimeLeft}}
+<span class="text-white">
+  Time left: {{this.currentTimeLeft}}
+</span>
diff --git a/app/controllers/home/shrimpos.ts b/app/controllers/home/shrimpos.ts
@@ -12,6 +12,18 @@ export default class HomeShrimpos extends Controller {
       return !shrimpo.isNew;
     });
   }
+
+  get currentShrimpos() {
+    return this.model.filter((shrimpo: any) => {
+      return !shrimpo.isNew && (shrimpo.status === 'running' || shrimpo.status === 'voting');
+    });
+  }
+
+  get completedShrimpos() {
+    return this.model.filter((shrimpo: any) => {
+      return !shrimpo.isNew && shrimpo.status === 'completed';
+    });
+  }
 }
 
 // DO NOT DELETE: this is how TypeScript knows how to look up your controllers.

diff --git a/app/templates/home/shrimpos.hbs b/app/templates/home/shrimpos.hbs
@@ -1,9 +1,9 @@
 <section class="page-spacing">
-  <h1 class="text-2xl">
-    THE POWER OF SHRIMPO<span class="ml-2 text-xs italic">beta</span> COMPELS YOU
+  <h1>
+    THE POWER OF SHRIMPO<span class="ml-2 text-lg italic">beta</span> COMPELS YOU
   </h1>
-  <p>
-  Improve your skills. Create new music.
+  <p class="italic">
+    Improve your skills. Create new music.
   </p>
 
   {{#if this.session.isAuthenticated}}
@@ -14,7 +14,13 @@
     </div>
   {{/if}}
 
-  {{#each this.savedShrimpos as |shrimpo|}}
+  <h3>Shrimpos in Progress</h3>
+  {{#each this.currentShrimpos as |shrimpo|}}
+    <Shrimpo::Card @shrimpo={{shrimpo}} />
+  {{/each}}
+
+  <h3>Completed Shrimpos</h3>
+  {{#each this.completedShrimpos as |shrimpo|}}
     <Shrimpo::Card @shrimpo={{shrimpo}} />
   {{/each}}
 </section>
diff --git a/app/validations/shrimpo-entry.js b/app/validations/shrimpo-entry.js
@@ -2,4 +2,5 @@ import { validatePresence } from 'ember-changeset-validations/validators';
 
 export default {
   title: validatePresence(true),
+  audio: validatePresence(true),
 };