Karl/homepage
1
0
Fork 0
mirror of https://github.com/karl0ss/homepage.git synced 2025-11-04 08:20:58 +00:00
Code Issues Packages Projects Releases Wiki Activity

add styled headers option

Browse Source
This commit is contained in:
Ben Phelps 2022-10-08 16:40:36 +03:00
parent e56dccc7f1
commit 94a518f4a8
3 changed files with 26 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
src/components/widgets/openweathermap/weather.jsx
View File

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

12
src/components/widgets/weather/weather.jsx
View File

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

16
src/pages/index.jsx
View File

@ -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]} />
))}