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.
EHRI · Apr 8, 2024 · 50adfd0 · 50adfd0
1 parent 5e426f8
commit 50adfd0
Show file tree

Hide file tree

Showing 2 changed files with 50 additions and 18 deletions.
diff --git 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
@@ -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>