mirror of
https://github.com/karl0ss/homepage.git
synced 2025-05-03 05:53:40 +01:00
add styled headers option
This commit is contained in:
parent
e56dccc7f1
commit
94a518f4a8
@ -16,7 +16,7 @@ function Widget({ options }) {
|
||||
|
||||
if (error || data?.cod === 401 || data?.error) {
|
||||
return (
|
||||
<div className="flex flex-col justify-center first:ml-auto ml-4">
|
||||
<div className="flex flex-col justify-center first:ml-auto ml-4 mr-2">
|
||||
<div className="flex flex-row items-center justify-end">
|
||||
<div className="hidden sm:flex flex-col items-center">
|
||||
<BiError className="w-8 h-8 text-theme-800 dark:text-theme-200" />
|
||||
@ -32,7 +32,7 @@ function Widget({ options }) {
|
||||
|
||||
if (!data) {
|
||||
return (
|
||||
<div className="flex flex-col justify-center first:ml-auto ml-4">
|
||||
<div className="flex flex-col justify-center first:ml-auto ml-4 mr-2">
|
||||
<div className="flex flex-row items-center justify-end">
|
||||
<div className="hidden sm:flex flex-col items-center">
|
||||
<WiCloudDown className="w-8 h-8 text-theme-800 dark:text-theme-200" />
|
||||
@ -49,7 +49,7 @@ function Widget({ options }) {
|
||||
const unit = options.units === "metric" ? "celsius" : "fahrenheit";
|
||||
|
||||
return (
|
||||
<div className="flex flex-col justify-center first:ml-auto ml-2">
|
||||
<div className="flex flex-col justify-center first:ml-auto ml-2 mr-2">
|
||||
<div className="flex flex-row items-center justify-end">
|
||||
<div className="hidden sm:flex flex-col items-center">
|
||||
<Icon
|
||||
@ -105,7 +105,7 @@ export default function OpenWeatherMap({ options }) {
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => requestLocation()}
|
||||
className="flex flex-col justify-center first:ml-auto ml-4"
|
||||
className="flex flex-col justify-center first:ml-auto ml-4 mr-2"
|
||||
>
|
||||
<div className="flex flex-row items-center justify-end">
|
||||
<div className="hidden sm:flex flex-col items-center">
|
||||
|
@ -16,7 +16,7 @@ function Widget({ options }) {
|
||||
|
||||
if (error || data?.error) {
|
||||
return (
|
||||
<div className="flex flex-col justify-center first:ml-0 ml-4">
|
||||
<div className="flex flex-col justify-center first:ml-0 ml-4 mr-2">
|
||||
<div className="flex flex-row items-center justify-end">
|
||||
<div className="flex flex-col items-center">
|
||||
<BiError className="w-8 h-8 text-theme-800 dark:text-theme-200" />
|
||||
@ -32,7 +32,7 @@ function Widget({ options }) {
|
||||
|
||||
if (!data) {
|
||||
return (
|
||||
<div className="flex flex-col justify-center first:ml-0 ml-4">
|
||||
<div className="flex flex-col justify-center first:ml-0 ml-4 mr-2">
|
||||
<div className="flex flex-row items-center justify-end">
|
||||
<div className="flex flex-col items-center">
|
||||
<WiCloudDown className="w-8 h-8 text-theme-800 dark:text-theme-200" />
|
||||
@ -49,7 +49,7 @@ function Widget({ options }) {
|
||||
const unit = options.units === "metric" ? "celsius" : "fahrenheit";
|
||||
|
||||
return (
|
||||
<div className="flex flex-col justify-center first:ml-0 ml-4">
|
||||
<div className="flex flex-col justify-center first:ml-0 ml-4 mr-2">
|
||||
<div className="flex flex-row items-center justify-end">
|
||||
<div className="flex flex-col items-center">
|
||||
<Icon condition={data.current.condition.code} timeOfDay={data.current.is_day ? "day" : "night"} />
|
||||
@ -103,7 +103,11 @@ export default function WeatherApi({ options }) {
|
||||
|
||||
if (!location) {
|
||||
return (
|
||||
<button type="button" onClick={() => requestLocation()} className="flex flex-col justify-center first:ml-0 ml-4">
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => requestLocation()}
|
||||
className="flex flex-col justify-center first:ml-0 ml-4 mr-2"
|
||||
>
|
||||
<div className="flex flex-row items-center justify-end">
|
||||
<div className="flex flex-col items-center">
|
||||
{requesting ? (
|
||||
|
@ -153,6 +153,13 @@ function Index({ initialSettings, fallback }) {
|
||||
);
|
||||
}
|
||||
|
||||
const headerStyles = {
|
||||
boxed:
|
||||
"m-4 mb-0 sm:m-8 sm:mb-0 rounded-md shadow-md shadow-theme-900/10 dark:shadow-theme-900/20 bg-theme-100/20 dark:bg-white/5 p-3",
|
||||
underlined: "m-4 mb-0 sm:m-8 sm:mb-1 border-b-2 pb-4 border-theme-800 dark:border-theme-200/50",
|
||||
clean: "m-4 mb-0 sm:m-8 sm:mb-0",
|
||||
};
|
||||
|
||||
function Home({ initialSettings }) {
|
||||
const { i18n } = useTranslation();
|
||||
const { theme, setTheme } = useContext(ThemeContext);
|
||||
@ -198,7 +205,12 @@ function Home({ initialSettings }) {
|
||||
<meta name="theme-color" content={themes[initialSettings.color || "slate"][initialSettings.theme || "dark"]} />
|
||||
</Head>
|
||||
<div className="relative container m-auto flex flex-col justify-between z-10">
|
||||
<div className="flex flex-row flex-wrap m-4 mb-0 sm:m-8 sm:mb-0 pb-6 border-b-2 border-theme-800 dark:border-theme-400 justify-between">
|
||||
<div
|
||||
className={classNames(
|
||||
"flex flex-row flex-wrap justify-between",
|
||||
headerStyles[initialSettings.headerStyle || "underlined"]
|
||||
)}
|
||||
>
|
||||
{widgets && (
|
||||
<>
|
||||
{widgets
|
||||
@ -219,7 +231,7 @@ function Home({ initialSettings }) {
|
||||
</div>
|
||||
|
||||
{services && (
|
||||
<div className="flex flex-wrap p-4 sm:p-8 items-start pb-2">
|
||||
<div className="flex flex-wrap p-4 sm:p-8 sm:pt-4 items-start pb-2">
|
||||
{services.map((group) => (
|
||||
<ServicesGroup key={group.name} services={group} layout={initialSettings.layout?.[group.name]} />
|
||||
))}
|
||||
|
Loading…
x
Reference in New Issue
Block a user