diff --git a/docker-entrypoint.sh b/docker-entrypoint.sh index 1d1eda9..82523db 100644 --- a/docker-entrypoint.sh +++ b/docker-entrypoint.sh @@ -11,6 +11,7 @@ sed -i -e 's/(PAGETITLE = ")My Website(")/'"$1${TITLE}$2"'/g' /app/src/variables sed -i -e 's/(PAGEICON = ")\/logo\.png(")/'"$1${LOGO}$2"'/g' /app/src/variables.ts sed -i -e 's/(SHOWHEADER = )true/'"$1${HEADER}"'/g' /app/src/variables.ts sed -i -e 's/(SHOWHEADERLINE = )true/'"$1${HEADERLINE}"'/g' /app/src/variables.ts +sed -i -e 's/(SHOWHEADERTOP = )false/'"$1${HEADERTOP}"'/g' /app/src/variables.ts sed -i -e 's/(CATEGORIES = ")normal(")/'"$1${CATEGORIES}$2"'/g' /app/src/variables.ts sed -i -e 's/(THEME = ")light(")/'"$1${THEME}$2"'/g' /app/src/variables.ts diff --git a/dockerfile b/dockerfile index 1690e22..dbfdf65 100644 --- a/dockerfile +++ b/dockerfile @@ -13,6 +13,7 @@ ENV TITLE "My Website" ENV LOGO "/logo.png" ENV HEADER "true" ENV HEADERLINE "true" +ENV HEADERTOP "false" ENV CATEGORIES "normal" ENV BGCOLOR "theme(colors.slate.50)" ENV BGCOLORDARK "theme(colors.gray.950)" diff --git a/readme.md b/readme.md index 675241c..3094c0a 100644 --- a/readme.md +++ b/readme.md @@ -87,6 +87,7 @@ services: - LOGO=/starbase80.jpg # defaults to /logo.png, set to LOGO= to hide the logo - HEADER=true # defaults to true, set to false to hide the title and logo - HEADERLINE=true # defaults to true, set to false to turn off the header border line + - HEADERTOP=true # defaults to false, set to true to force the header to always stay on top - CATEGORIES=small # defaults to normal, set to small for smaller, uppercase category labels - BGCOLOR=#fff # defaults to theme(colors.slate.50), set to any hex color or Tailwind color using the theme syntax - BGCOLORDARK=#000 # defaults to theme(colors.gray.950), set to any hex color or Tailwind color using the theme syntax diff --git a/src/pages/index.tsx b/src/pages/index.tsx index a75dae9..d1e82c9 100644 --- a/src/pages/index.tsx +++ b/src/pages/index.tsx @@ -3,7 +3,7 @@ import { Header } from "../components/header"; import { ServiceCatalogList } from "../components/service-catalogs"; import userServices from "../config.json"; import { IServiceCatalog } from "../shared/types"; -import { SHOWHEADER, SHOWHEADERLINE } from "../variables"; +import { SHOWHEADER, SHOWHEADERLINE, SHOWHEADERTOP } from "../variables"; interface IProps { title?: string; @@ -13,22 +13,45 @@ interface IProps { export const IndexPage: React.FunctionComponent = ({ icon, title }) => { const mySerices = userServices as IServiceCatalog[]; - let headerClassName = "w-full xl:w-auto xl:max-w-xs xl:min-h-screen p-4"; + let headerClassName = "p-4"; + + if (SHOWHEADERTOP) { + headerClassName += " w-full"; + } else { + headerClassName += " w-full xl:w-auto xl:max-w-xs xl:min-h-screen"; + } if (SHOWHEADERLINE) { - headerClassName += - "border-0 border-solid border-b xl:border-r xl:border-b-0 border-gray-300 dark:border-gray-700"; + headerClassName += "border-0 border-solid border-gray-300 dark:border-gray-700"; + + if (SHOWHEADERTOP) { + headerClassName += " border-b"; + } else { + headerClassName += " border-b xl:border-r xl:border-b-0"; + } + } + + let pageWrapperClassName = "min-h-screen flex flex-col max-w-screen-2xl mx-auto"; + + if (!SHOWHEADERTOP) { + pageWrapperClassName += " xl:flex-row"; + } + + let serviceCatalogListWrapperClassName = "p-4 flex-grow"; + + if (!SHOWHEADERTOP) { + serviceCatalogListWrapperClassName += " min-h-screen"; } return (
-
+
{SHOWHEADER && (
)} -
+
diff --git a/src/variables.ts b/src/variables.ts index 7e5e07a..85118b6 100644 --- a/src/variables.ts +++ b/src/variables.ts @@ -2,5 +2,6 @@ export const PAGETITLE = "My Website"; export const PAGEICON = "/logo.png"; export const SHOWHEADER = true; export const SHOWHEADERLINE = true; +export const SHOWHEADERTOP = true; export const CATEGORIES = "normal"; export const THEME = "light";