From 69d522fe099ec82789d4742db7e1bcedeab1f832 Mon Sep 17 00:00:00 2001 From: Jim Liu Date: Mon, 17 Nov 2025 19:52:27 -0500 Subject: [PATCH 1/2] Fix: Churchill layout and getQuoteIndex definition --- src/api/services/quotesService.js | 2 +- src/layouts/layout.js | 10 ++++++++-- 2 files changed, 9 insertions(+), 3 deletions(-) diff --git a/src/api/services/quotesService.js b/src/api/services/quotesService.js index 6969190..d26bf6b 100644 --- a/src/api/services/quotesService.js +++ b/src/api/services/quotesService.js @@ -5,7 +5,7 @@ const Template = require("../../models/Template"); const getValidUrl = require("../../utils/validateUrl"); const quoteFromCategory = require('../../../customQuotes/category.json'); -getQuoteIndex = (apiResponseLength, quoteType) => { +const getQuoteIndex = (apiResponseLength, quoteType) => { // Determine the quote index let today = new Date(); let epoch = new Date(today.getFullYear(), today.getMonth(), today.getDate()).getTime() / 1000 diff --git a/src/layouts/layout.js b/src/layouts/layout.js index 59ec4df..bf1c002 100644 --- a/src/layouts/layout.js +++ b/src/layouts/layout.js @@ -114,6 +114,12 @@ const layouts = { }, churchill: { style: (template) => { + + //if background image is provided the titlebackground should be transparent and it should be moved down a bit so it isn't crossing through the borders + const titleBackground = template.bgImage ? 'transparent' : 'var(--bg-color)'; + const titleTopPosition = template.bgImage ? '10px' : '-12px'; + + return `* { box-sizing: border-box; } @@ -139,12 +145,12 @@ const layouts = { .title-container { position: absolute; width: 100%; - top: -12px; + top: ${titleTopPosition}; z-index: 1; } .title-container span { - background: var(--bg-color); + background: ${titleBackground}; background-size: 600px; background-repeat: no-repeat; background-position: center; From d6ab24aa7686fc13b65656532a925e1520e14fd7 Mon Sep 17 00:00:00 2001 From: Jim Liu Date: Mon, 17 Nov 2025 20:22:03 -0500 Subject: [PATCH 2/2] fixed resizing issues for border color and unsplash query box --- frontend/src/components/Pages/Home/index.js | 22 ++++++++++----------- 1 file changed, 11 insertions(+), 11 deletions(-) diff --git a/frontend/src/components/Pages/Home/index.js b/frontend/src/components/Pages/Home/index.js index 6e63eaf..64b5fa9 100644 --- a/frontend/src/components/Pages/Home/index.js +++ b/frontend/src/components/Pages/Home/index.js @@ -77,7 +77,7 @@ const Home = () => { return ( - + 🚀 After migrating to Vercel, our application now has separate UI and server deployments for PRODUCTION, while still maintaining server-side rendering locally for DEVELOPMENT. 🚀 @@ -96,7 +96,7 @@ const Home = () => { id="theme" options={themes} value={theme} - style={{ width: 300, margin: '0 auto' }} + style={{margin: '0 auto' }} onChange={(_event, newValue) => { if (newValue != null) setTheme(newValue) @@ -113,7 +113,7 @@ const Home = () => { if (newValue != null) setLayout(newValue) }} - style={{ width: 300, margin: '0 auto' }} + style={{margin: '0 auto' }} renderInput={(params) => } /> @@ -126,7 +126,7 @@ const Home = () => { if (newValue != null) setAnimation(newValue) }} - style={{ width: 300, margin: '0 auto' }} + style={{margin: '0 auto' }} renderInput={(params) => } /> @@ -137,7 +137,7 @@ const Home = () => { id="font" options={fonts} value={font} - style={{ width: 300, margin: '0 auto' }} + style={{margin: '0 auto' }} onChange={(_event, newValue) => { if (newValue != null) setFont(newValue) @@ -151,7 +151,7 @@ const Home = () => { id="font-color" options={colorValues} value={fontColor} - style={{ width: 300, margin: '0 auto' }} + style={{margin: '0 auto' }} onChange={(_event, newValue) => { setFontColor(newValue) }} @@ -163,7 +163,7 @@ const Home = () => { id="bg-color" options={colorValues} value={bgColor} - style={{ width: 300, margin: '0 auto' }} + style={{margin: '0 auto' }} onChange={(_event, newValue) => { setBgColor(newValue) }} @@ -182,7 +182,7 @@ const Home = () => { id="border-color" options={colorValues} value={borderColor} - style={{ width: 300 }} + style={{margin: '0 auto'}} onChange={(_event, newValue) => { setBorderColor(newValue) }} @@ -196,7 +196,7 @@ const Home = () => { id="quote-type" options={quoteTypes} value={quoteType} - style={{ width: 300, margin: '0 auto' }} + style={{margin: '0 auto' }} onChange={(_event, newValue) => { if (newValue != null) setQuoteType(newValue) @@ -210,7 +210,7 @@ const Home = () => { id="bg-source" options={['unsplash']} value={bgSource} - style={{ width: 300, margin: '0 auto' }} + style={{margin: '0 auto' }} onChange={(_event, newValue) => { setBgSource(newValue); }} @@ -223,7 +223,7 @@ const Home = () => { label="Unsplash query" variant="outlined" value={unsplashQuery} - style={{ width: 300, margin: '0 auto' }} + style={{ width: '100%' }} onChange={(event) => setUnsplashQuery(event.target.value)} onKeyDown={(e) => e.key === "Enter" && setQueryKeyEnter(true)} disabled={bgSource !== 'unsplash'}