From 011f57f527b1ec5d0b77e9a4a7625bc6e2e63ce4 Mon Sep 17 00:00:00 2001
From: Nia Calia-Bogan <acaliabogan@acaliabogan.dev>
Date: Thu, 25 Mar 2021 16:41:07 -0400
Subject: [PATCH] Make meetings page pretty

---
 src/templates/meetings.rs                     |  2 +-
 templates/meetings/link.hbs                   | 15 +++++
 .../{meetings_page.hbs => meetings/page.hbs}  | 58 ++++++++++++-------
 3 files changed, 54 insertions(+), 21 deletions(-)
 create mode 100644 templates/meetings/link.hbs
 rename templates/{meetings_page.hbs => meetings/page.hbs} (59%)

diff --git a/src/templates/meetings.rs b/src/templates/meetings.rs
index f4b39a33..2aab5230 100644
--- a/src/templates/meetings.rs
+++ b/src/templates/meetings.rs
@@ -5,7 +5,7 @@ use crate::web::api::rcos::meetings::get::meetings::MeetingsMeetings;
 use crate::web::services::meetings::MeetingsQuery;
 
 /// The path to the template's handlebars file.
-const TEMPLATE_NAME: &'static str = "meetings_page";
+const TEMPLATE_NAME: &'static str = "meetings/page";
 
 /// The handlebars key for the list of meetings from the RCOS API response.
 pub const MEETINGS: &'static str = "meetings";
diff --git a/templates/meetings/link.hbs b/templates/meetings/link.hbs
new file mode 100644
index 00000000..3e89f3ae
--- /dev/null
+++ b/templates/meetings/link.hbs
@@ -0,0 +1,15 @@
+<a href="{{url}}" class="btn btn-{{class}} w-100 h-100">
+    <div class="row">
+        <div class="col-2">
+            <h2>
+                <i data-feather="external-link"></i>
+            </h2>
+        </div>
+        <div class="col-10 pl-0">
+            {{text}} <br>
+            <span class="small">
+                {{domain_of url}}
+            </span>
+        </div>
+    </div>
+</a>
diff --git a/templates/meetings_page.hbs b/templates/meetings/page.hbs
similarity index 59%
rename from templates/meetings_page.hbs
rename to templates/meetings/page.hbs
index 2128648c..2d5e85d1 100644
--- a/templates/meetings_page.hbs
+++ b/templates/meetings/page.hbs
@@ -79,36 +79,54 @@
                 </div>
             {{/if}}
 
-            {{#if is_remote}}
-                <div class="list-group-item">
-                    <div class="row row-cols-1 row-cols-md-3">
-                        <div class="col align-content-center my-1">
+            <div class="list-group-item">
+                <div class="row row-cols-1 row-cols-md-3">
+                    <div class="col align-content-center my-1">
+                        {{#if is_remote}}
                             {{#if meeting_url}}
-                                <a href="{{meeting_url}}" class="btn btn-primary w-100">Join</a>
+                                {{> meetings/link url=meeting_url text="Join" class="primary"}}
                             {{else}}
-                                <span class="btn btn-secondary disabled w-100">Cannot join meeting</span>
+                                <span class="btn btn-outline-primary disabled w-100 h-100 d-flex align-items-center justify-content-center">
+                                    Cannot join meeting
+                                </span>
                             {{/if}}
-                        </div>
+                        {{else}}
+                            {{! Meeting is not remote }}
+                            <span class="btn btn-outline-primary disabled w-100 h-100 d-flex align-items-center justify-content-center">
+                                Meeting is not remote
+                            </span>
+                        {{/if}}
+                    </div>
 
-                        <div class="col align-content-center my-1">
-                            {{#if external_presentation_url}}
-                            {{! TODO: Support hosted native slides }}
-                                <a href="{{external_presentation_url}}" class="btn-secondary btn w-100">Slides</a>
-                            {{else}}
-                                <span class="btn btn-secondary disabled w-100">Slides unavailable</span>
-                            {{/if}}
-                        </div>
+                    <div class="col align-content-center my-1">
+                        {{#if external_presentation_url}}
+                        {{! TODO: Support hosted native slides }}
+                            {{> meetings/link url=external_presentation_url text="Slides" class="secondary"}}
+                        {{else}}
+                            <span class="btn btn-secondary disabled w-100 h-100 d-flex align-items-center justify-content-center">
+                                Slides unavailable
+                            </span>
+                        {{/if}}
+                    </div>
 
-                        <div class="col align-content-center my-1">
+                    <div class="col align-content-center my-1">
+                        {{#if is_remote}}
                             {{#if recording_url}}
-                                <a href="{{recording_url}}" class="btn btn-secondary w-100">View Recording</a>
+                                {{> meetings/link url=recording_url text="View Recording" class="secondary"}}
                             {{else}}
-                                <span class="btn-secondary btn disabled w-100">Recording unavailable</span>
+                                <span class="btn btn-secondary disabled w-100 h-100 d-flex align-items-center justify-content-center">
+                                    Recording unavailable
+                                </span>
                             {{/if}}
-                        </div>
+                        {{else}}
+                            {{! Meeting is not remote }}
+                            <span class="btn btn-outline-secondary disabled w-100 h-100 d-flex align-items-center justify-content-center">
+                                Meeting is not remote
+                            </span>
+                        {{/if}}
                     </div>
                 </div>
-            {{/if}}
+            </div>
         </div>
 
         <div class="card-footer text-dark">