Make meetings page pretty

rcos · Mar 25, 2021 · 011f57f · 011f57f
1 parent 823a0e8
commit 011f57f
Show file tree

Hide file tree

Showing 3 changed files with 54 additions and 21 deletions.
diff --git 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
@@ -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 → templates/meetings/page.hbs b/templates/meetings_page.hbs → 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">