Fix Clock App UI by Utilising the viewport height and width as values.

[salmanfarisvp]

User description

• Make it more responsive across all the screens with vw and vh => 🛠️ On going.

---

PR Type

• Enhancement

---

Description

• Use viewport-based CSS clamp units for responsiveness

• Update font-face and CSS variables for modern fonts

• Refactor clock sizing and media query gap settings

• Introduce JS configuration for rendering control

---

Changes walkthrough 📝

Relevant files

Enhancement

common.css Update common CSS for responsive design and fonts                edge-apps/clock/static/css/common.css Changed font-family to "Inter" and updated src URL Added CSS reset and responsive gap/padding with clamp Updated theme colors and introduced new CSS variables +136/-152 style.css Refactor clock styling with dynamic viewport units              edge-apps/clock/static/css/style.css Replaced fixed dimensions with clamp responsive units Adjusted clock container, hands, and media queries Tweaked border-radius and spacing for dynamic layouts +103/-65 main.js Implement screenly config and render signal in JS                edge-apps/clock/static/js/main.js Added a new screenly configuration object Set coordinates, color settings, and proxy URL example Included signaling function for rendering readiness +21/-0    index.html Modify HTML layout for improved component sections              edge-apps/clock/index.html Updated HTML structure for time and info sections Added time-container and info-container classes Minor markup adjustments for better layout grouping +5/-2

---

Need help?

Type /help how to ... in the comments thread for any questions about PR-Agent usage.

Check out the documentation for more information.

[github-actions]

PR Reviewer Guide 🔍

Here are some key observations to aid the review process:

⏱️ Estimated effort to review: 4 🔵🔵🔵🔵⚪

🧪 No relevant tests

🔒 No security concerns identified

⚡ Recommended focus areas for review Cleanup Comments Several new CSS sections include commented-out code—for example, alternative media queries and transform scales—that make the file harder to read. Consider removing unused code or adding clear documentation on why these blocks are retained. .clock-container { /* transform: scale(var(--scale-factor)); */ /* transform: scale(10); */ } Potential Oversized Font The clamp function for font-size in the secondary card number uses a maximum value of 1000rem. This unusually high upper bound might lead to rendering issues and should be reviewed to ensure it matches the intended design. /* font-size: clamp(1rem, 11vw + 1rem, 18rem); */ font-size: clamp(1rem, 11vw + 5vh, 1000rem); color: var(--theme-color-primary); /* letter-spacing: 1rem; */ } Refine Config Object The newly introduced configuration object includes several commented alternatives (e.g., for coordinates and timezone overrides). Cleaning up or externalizing these settings could improve clarity and maintainability. const screenly = { metadata: { coordinates: [11.27985,76.2363243], // Example coordinates (San Francisco) //coordinates: [50.1210954,8.4717603], }, settings: { screenly_color_accent: '#972eff', // Example accent color screenly_color_light: '#adafbe', // Example light color screenly_logo_dark: 'https://example.com/logo.png', // Example logo URL sentry_dsn: null, // Example for Sentry DSN (not initialized) override_locale: 'en', // Example locale override override_timezone: 'Asia/Kolkata' // Example timezone override //override_timezone: 'Europe/Berlin' },

[github-actions]

PR Code Suggestions ✨

No code suggestions found for the PR.