From 50adfd0d6a89a711228046089960c220ce9c7916 Mon Sep 17 00:00:00 2001
From: Mike Bryant <mikesname@gmail.com>
Date: Mon, 8 Apr 2024 17:47:10 +0100
Subject: [PATCH] Fix various styling issues on the home page

This was caused by changing the OAuth login icons and forgetting
they were also used here! CSS  strikes again.

Also adjust homepage grid to behave better with responsive scaling.
---
 .../portal/app/assets/css/portal/_style.scss  | 43 +++++++++++++++----
 modules/portal/app/views/index.scala.html     | 25 ++++++-----
 2 files changed, 50 insertions(+), 18 deletions(-)

diff --git a/modules/portal/app/assets/css/portal/_style.scss b/modules/portal/app/assets/css/portal/_style.scss
index 4128e5cf7..31dd6af7e 100644
--- a/modules/portal/app/assets/css/portal/_style.scss
+++ b/modules/portal/app/assets/css/portal/_style.scss
@@ -479,17 +479,30 @@ body.home {
     input::placeholder {
       font-size: $font-size-sm;
     }
+
+    .oauth-providers {
+      flex-direction: row;
+      justify-content: start;
+      column-gap: $margin-sm;
+      margin-bottom: 0;
+      flex-wrap: wrap;
+      .btn {
+        background-position: center;
+        padding-inline-start: $margin-lg;
+        min-height: 2.2rem;
+      }
+      .btn:not(:hover) {
+        background-color: inherit;
+      }
+    }
   }
 
   @include media-breakpoint-up(md) {
     #portal-sections {
       display: grid;
-      grid-template-areas: ". . ." ". . .";
-      grid-template-columns: 1fr 1fr 1fr;
-      // FIXME: this makes the cells look a bit big. Better
-      // to somehow size them *all* by the height of the largest
-      // cell (not largest cell per row).
-      grid-template-rows: repeat(2, minmax(250px, auto));
+      grid-template-areas: ". . " " . ." ". .";
+      grid-auto-rows: 1fr;
+      grid-template-columns: repeat(2, minmax(0, 1fr));
       grid-column-gap: $margin-lg;
       grid-row-gap: $margin-lg;
 
@@ -504,8 +517,8 @@ body.home {
   @include media-breakpoint-up(md) {
     #portal-info {
       display: grid;
-      grid-template-areas: "video video .";
-      grid-template-columns: 1fr 1fr 1fr;
+      grid-template-areas: "video .";
+      grid-template-columns: repeat(2, minmax(250px, 1fr));
       grid-column-gap: $margin-lg;
 
       #intro-video {
@@ -514,6 +527,20 @@ body.home {
     }
   }
 
+  @include media-breakpoint-up(lg) {
+    #portal-sections {
+      grid-template-areas: ". . ." ". . .";
+      grid-template-columns: repeat(3, minmax(0, 1fr));
+    }
+  }
+
+  @include media-breakpoint-up(lg) {
+    #portal-info {
+      grid-template-areas: "video video .";
+      grid-template-columns: repeat(3, minmax(0, 1fr));
+    }
+  }
+
   .rss-feed-description {
     font-size: $font-size-sm;
     color: $text-darkened;
diff --git a/modules/portal/app/views/index.scala.html b/modules/portal/app/views/index.scala.html
index 0868ef208..2b1c58638 100644
--- a/modules/portal/app/views/index.scala.html
+++ b/modules/portal/app/views/index.scala.html
@@ -134,16 +134,6 @@ <h2><a href="@controllers.portal.users.routes.UserProfiles.profile()">@Messages(
                         <a class="signup" href="@controllers.portal.account.routes.Accounts.signup()">@Messages("login.signup")</a>
                         <h2>@Messages("login")</h2>
 
-                        <div class="oauth-providers form-field">
-                            @accountForms.oAuth2Config.providers.map { provider =>
-                                <a href="@controllers.portal.account.routes.Accounts.oauth2Login(provider.name)" class="btn btn-@provider.name"
-                                title="@Html(Messages("login.loginWith", provider.name.capitalize))"
-                                aria-label="@Html(Messages("login.loginWith", provider.name.capitalize))">
-                                    <i class="fa fa-fw fa-@provider.name.replace("microsoft", "windows")" aria-hidden="true"></i>
-                                </a>
-                            }
-                        </div>
-
                         @helper.form(action = controllers.portal.account.routes.Accounts.passwordLoginPost()) {
                             @formHelpers.csrfToken()
                             @helper.inputText(
@@ -173,6 +163,21 @@ <h2>@Messages("login")</h2>
                                 <button type="submit" class="btn btn-primary">@Messages("login")</button>
                             </div>
                         }
+
+                        <hr/>
+                        <div class="oauth-providers form-field">
+                        @accountForms.oAuth2Config.providers.map { provider =>
+                            <a href="@controllers.portal.account.routes.Accounts.oauth2Login(provider.name)" class="btn btn-signin-@provider.name"
+                            title="@Html(Messages("login.loginWith", provider.name.capitalize))"
+                            aria-label="@Html(Messages("login.loginWith", provider.name.capitalize))">
+                                <span class="sr-only">
+                                @Messages("login.loginWith", provider.name.capitalize)
+                                </span>
+                            </a>
+                        }
+                        </div>
+
+
                     }
                 </div>
             </section>