Skip to content
GitLab
Projects Groups Snippets
  • /
  • Help
    • Help
    • Support
    • Community forum
    • Submit feedback
  • Sign in
  • infrastructure infrastructure
  • Project information
    • Project information
    • Activity
    • Labels
    • Members
  • Repository
    • Repository
    • Files
    • Commits
    • Branches
    • Tags
    • Contributors
    • Graph
    • Compare
    • Locked Files
  • Issues 106
    • Issues 106
    • List
    • Boards
    • Service Desk
    • Milestones
    • Iterations
  • Merge requests 14
    • Merge requests 14
  • CI/CD
    • CI/CD
    • Pipelines
    • Jobs
    • Schedules
    • Test Cases
  • Deployments
    • Deployments
    • Environments
    • Releases
  • Monitor
    • Monitor
    • Incidents
  • Analytics
    • Analytics
    • Value stream
    • CI/CD
    • Code review
    • Insights
    • Issue
    • Repository
  • Wiki
    • Wiki
  • Activity
  • Graph
  • Create a new issue
  • Jobs
  • Commits
  • Issue Boards
Collapse sidebar
  • Arch LinuxArch Linux
  • infrastructureinfrastructure
  • Merge requests
  • !67

Make custom Keycloak theme responsive

  • Review changes

  • Download
  • Email patches
  • Plain diff
Merged Ira ¯\_(ツ)_/¯ requested to merge lambdaclan/infrastructure:keycloak-theme-responsive into master Aug 29, 2020
  • Overview 0
  • Commits 3
  • Pipelines 4
  • Changes 1

Description

The login screen of the custom Keycloak theme archlinux is not responsive. This means the Arch Linux logo and background do not properly scale as the window is being resized resulting in bad experience on smaller screens such as mobile devices.

Summary

The custom login CSS file was modified to modify the dimensions as the screen size changes setting the minimum threshold to the same value the default Keycloak theme does.

Breakdown

  • Make the login screen background and logo scalable (responsive)

Test Environment

  • Ungoogled Chromium normal window resizing
  • Chrome web developer device emulation mode

Demo

simplescreenrecorder-2020-08-29_15.26.35

simplescreenrecorder-2020-08-29_15.37.51

Before (Wide)

image

After (Wide)

image

Before (Mobile)

image

After (Mobile)

image

Edited Aug 30, 2020 by Ira ¯\_(ツ)_/¯
Assignee
Assign to
Reviewers
Request review from
Time tracking
Source branch: keycloak-theme-responsive