UI Improvements for GC Landing page #35

conservationtimothy · 2025-11-10T11:20:18Z

Goal

Closes #19.

Screenshots

What I changed

Redesigned GC Landing page header with new tab-style design featuring curved SVG edges
Implemented responsive behavior:
- Desktop layout shows above 1000px with progressive tab button positioning
- Mobile layout with hamburger menu shows below 1000px
- Text sizes scale down to text-xs at 1200px and below for Guardian Connector, welcome message, and sign out button
Added mobile hamburger menu with:
- User icon with checkmark (represents logged-in user)
- User Management link (admin only)
- Language Picker with text label
- Sign Out button
Centered service cards for better display when communities have 1-2 services

What I'm not doing here

No changes to authentication logic
No changes to service functionality
No changes to mobile menu behavior beyond UI

LLM use disclosure

Used LLM for consultation and code generation throughout the responsive redesign implementation, including:

Responsive breakpoint strategy and Tailwind class selection
Mobile menu structure and styling

IamJeffG

@rudokemper I think you will do a better review of the Vue code than I am able. Can I punt to you?

IamJeffG · 2025-11-10T16:55:20Z

i18n/locales/en.json

    "userManagement": "User Management",
    "secureAccessRequired": "Secure Access Required",
-    "pleaseSignInToAccess": "Please sign in to access your community tools"
+    "pleaseSignInToAccess": "Please sign in to access your partner tools"


This change seems awkward to me. Did someone ask for it?

Yeah I remember a conversation with Rudo about how not everyone we support is a community, some are "partners"

I don't think "partner" is quite right either. If someone self-deploys GC, they are not our partner.

Maybe just "access your tools"

IamJeffG · 2025-11-10T16:56:06Z

public/Screenshot 2025-11-06 at 20.40.07.svg

is this file needed? if so, can you at least rename it?

IamJeffG · 2025-11-10T16:56:25Z

middleware/oauth.global.ts

+
+  // if (loggedIn.value && to.path === "/login") {
+  //   return router.push("/");
+  // }


Is this intended to be commented out?

I've restored

rudokemper · 2025-11-10T17:05:40Z

@IamJeffG @conservationtimothy Yes, I will review this.

rudokemper

Largely looks good but a handful requested changes throughout.

pages/index.vue

i18n/locales/en.json

rudokemper · 2025-11-12T14:33:09Z

pages/index.vue

-          <p class="text-gray-400">
+          <p class="text-gray-600">
            {{ t('services.noServicesDescription') }}
          </p>


Below this (glancing at the code, not sure if it's exactly here or a higher level of <div> containment), can we add a helpful paragraph (localized text), maybe italicized:

Need help? Visit the Guardian Connector documentation website. (link to docs.guardianconnector.net)

pages/index.vue

rudokemper · 2025-11-12T14:34:25Z

components/shared/GlobeLanguagePicker.vue

@@ -0,0 +1,126 @@
+<script lang="ts" setup>


Let's use the same icon on UserManagement

Also, Auth0Login has a warning complaining about the absence of LanguagePicker component. Could implement this there too to resolve that warning.

In fact, I now see there is also a LanguagePicker. Can we just use one?

I'm not sure and haven't looked into it, but I suspect this warning for the Auth0Login page could also be related:

WARN [Vue warn]: Component <Anonymous> is missing template or render function. at <Anonymous theme="white" > at <Auth0Login error-message="" > at <Login onVnodeUnmounted=fn<onVnodeUnmounted> ref=Ref< undefined > >

Yeah this is kinda nicer I think since we've redesigned maybe we use this one thru out

I see you didn't do this, which is fine. Shall we create an issue to do this work?

Actually, maybe that issue can just request implementing the same folder+tab header design for the User Management page. In order to have a consistent design across all pages of the this application.

Oh, and then separately, an issue to track the warnings / errors in Auth0Login

Co-authored-by: Rudo Kemper <[email protected]>

…ges)

rudokemper

Looks great! Please just go ahead and make the one requested change about actually adding the "Need help" blurb to the index before merging, and create an issue to track user management header redesign work.

rudokemper · 2025-11-13T14:13:33Z

components/shared/GlobeLanguagePicker.vue

@@ -0,0 +1,126 @@
+<script lang="ts" setup>


I see you didn't do this, which is fine. Shall we create an issue to do this work?

Actually, maybe that issue can just request implementing the same folder+tab header design for the User Management page. In order to have a consistent design across all pages of the this application.

rudokemper · 2025-11-13T14:17:49Z

i18n/locales/en.json

+    "needHelp": "Need help? Visit the Guardian Connector",
+    "documentationWebsite": "documentation website",


I don't see this implemented on index.vue. Can we add?

This is what I had in mind btw;

conservationtimothy added 2 commits November 10, 2025 12:11

feat: build out landing page

9f0c7e1

remove redudant styles

c23ec72

conservationtimothy requested review from IamJeffG and rudokemper November 10, 2025 11:20

update apache

ff516f0

IamJeffG reviewed Nov 10, 2025

View reviewed changes

minor improvements

0c17f66

mobile language picker accordion + actually change language

77277e0

rudokemper requested changes Nov 12, 2025

View reviewed changes

rudokemper mentioned this pull request Nov 12, 2025

Implement modest UX improvements on User Management page #36

Merged

conservationtimothy and others added 14 commits November 12, 2025 16:19

Update i18n/locales/en.json

ea70026

Co-authored-by: Rudo Kemper <[email protected]>

Update pages/index.vue

050c80f

Co-authored-by: Rudo Kemper <[email protected]>

Update pages/index.vue

4cb098e

Co-authored-by: Rudo Kemper <[email protected]>

Update i18n/locales/en.json

32f93ea

Co-authored-by: Rudo Kemper <[email protected]>

Update pages/index.vue

22b5212

Co-authored-by: Rudo Kemper <[email protected]>

Update pages/index.vue

899c1e7

Co-authored-by: Rudo Kemper <[email protected]>

Update pages/index.vue

71de764

Co-authored-by: Rudo Kemper <[email protected]>

Update pages/index.vue

7e5ba85

Co-authored-by: Rudo Kemper <[email protected]>

Update pages/index.vue

191d450

Co-authored-by: Rudo Kemper <[email protected]>

Update pages/index.vue

846e5db

Co-authored-by: Rudo Kemper <[email protected]>

Update i18n/locales/en.json

8033a99

Co-authored-by: Rudo Kemper <[email protected]>

minor improvements and pnpm prettier

e443a58

Revert Prettier formatting from unintended files (keep index.vue chan…

429eee1

…ges)

fix minor type issues

62aced7

conservationtimothy requested a review from rudokemper November 13, 2025 11:16

rudokemper approved these changes Nov 13, 2025

View reviewed changes

conservationtimothy mentioned this pull request Nov 13, 2025

Converge on a design for localisation #38

Open

improveemnts and refinements to UI

b644c2c

conservationtimothy merged commit 834033a into main Nov 13, 2025
1 check passed

conservationtimothy deleted the feat/landing-page-redesign branch November 13, 2025 17:19

		"needHelp": "Need help? Visit the Guardian Connector",
		"documentationWebsite": "documentation website",

UI Improvements for GC Landing page #35

UI Improvements for GC Landing page #35

Uh oh!

Conversation

conservationtimothy commented Nov 10, 2025

Goal

Screenshots

What I changed

What I'm not doing here

LLM use disclosure

Uh oh!

IamJeffG left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

rudokemper commented Nov 10, 2025

Uh oh!

rudokemper left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

rudokemper left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants