Added headertop option

This commit is contained in:
Jordan Roher 2023-04-21 16:01:14 -07:00
parent 9eec88713e
commit 0774530fdb
5 changed files with 33 additions and 6 deletions

View File

@ -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

View File

@ -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)"

View File

@ -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

View File

@ -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<IProps> = ({ 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 (
<div className="min-h-screen">
<div className="min-h-screen flex flex-col xl:flex-row max-w-screen-2xl mx-auto">
<div className={pageWrapperClassName}>
{SHOWHEADER && (
<div className={headerClassName}>
<Header title={title} icon={icon} />
</div>
)}
<div className="min-h-screen p-4 flex-grow">
<div className={serviceCatalogListWrapperClassName}>
<ServiceCatalogList catalogs={mySerices} />
</div>
</div>

View File

@ -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";