Karl/homepage
1
0
Fork 0
mirror of https://github.com/karl0ss/homepage.git synced 2025-05-02 05:23:39 +01:00
Code Issues Packages Projects Releases Wiki Activity

tweak mobile layouts for widgets

Browse Source
This commit is contained in:
Ben Phelps 2022-09-03 12:40:04 +03:00
parent 229c5dac59
commit 8f001ad88a
4 changed files with 14 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -33,7 +33,7 @@ export default function OpenWeatherMap({ options }) {
} }
return ( return (
<div className="flex flex-col"> <div className="flex flex-col justify-center">
<div className="flex flex-row items-center justify-end"> <div className="flex flex-row items-center justify-end">
<div className="flex flex-col items-center"> <div className="flex flex-col items-center">
<Icon <Icon

6
src/components/widgets/resources/resources.jsx
View File

@ -5,11 +5,11 @@ import Memory from "./memory";
export default function Resources({ options }) { export default function Resources({ options }) {
return ( return (
<> <>
<div className="pr-2 flex flex-col max-w:full overflow-y-scroll"> <div className="flex flex-col max-w:full basis-1/2 sm:basis-auto self-center">
<div className="flex flex-row space-x-4"> <div className="flex flex-row space-x-4 self-center">
{options.disk && <Disk options={options} />}
{options.cpu && <Cpu />} {options.cpu && <Cpu />}
{options.memory && <Memory />} {options.memory && <Memory />}
{options.disk && <Disk options={options} />}
</div> </div>
{options.label && ( {options.label && (
<div className="border-t-2 border-theme-800 dark:border-theme-200 mt-1 pt-1 text-center text-theme-800 dark:text-theme-200 text-xs"> <div className="border-t-2 border-theme-800 dark:border-theme-200 mt-1 pt-1 text-center text-theme-800 dark:text-theme-200 text-xs">

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

@ -33,7 +33,7 @@ export default function WeatherApi({ options }) {
} }
return ( return (
<div className="flex flex-col justify-center md:justify-start mt-2 lg:mt-0 !-ml-1 lg:!ml-2"> <div className="flex flex-col justify-center">
<div className="flex flex-row items-center justify-end"> <div className="flex flex-row items-center justify-end">
<div className="flex flex-col items-center"> <div className="flex flex-col items-center">
<Icon condition={data.current.condition.code} timeOfDay={data.current.is_day ? "day" : "night"} /> <Icon condition={data.current.condition.code} timeOfDay={data.current.is_day ? "day" : "night"} />

24
src/pages/index.js
View File

@ -19,6 +19,7 @@ const ColorToggle = dynamic(() => import("components/color-toggle"), {
}); });
const rightAlignedWidgets = ["weatherapi", "openweathermap", "weather", "search"]; const rightAlignedWidgets = ["weatherapi", "openweathermap", "weather", "search"];
const expandedWidgets = ["search"];
export default function Home() { export default function Home() {
const { data: services, error: servicesError } = useSWR("/api/services"); const { data: services, error: servicesError } = useSWR("/api/services");
@ -32,7 +33,7 @@ export default function Home() {
<title>Welcome</title> <title>Welcome</title>
</Head> </Head>
<div className="w-full container m-auto flex flex-col h-screen justify-between"> <div className="w-full container m-auto flex flex-col h-screen justify-between">
<div className="flex flex-wrap space-x-4 m-8 pb-4 mt-10 border-b-2 border-theme-800 dark:border-theme-200 justify-between"> <div className="flex flex-row flex-wrap space-x-0 sm:space-x-4 m-8 pb-4 mt-10 border-b-2 border-theme-800 dark:border-theme-200 justify-between md:justify-start">
{widgets && ( {widgets && (
<> <>
{widgets {widgets
@ -40,21 +41,14 @@ export default function Home() {
.map((widget, i) => ( .map((widget, i) => (
<Widget key={i} widget={widget} /> <Widget key={i} widget={widget} />
))} ))}
{widgets
.filter((widget) => widget.type === "search") <div className="flex flex-wrap basis-full space-x-0 sm:space-x-4 grow sm:basis-auto justify-between md:justify-end mt-2 md:mt-0">
.map( {widgets
(widget, i) => .filter((widget) => rightAlignedWidgets.includes(widget.type))
<Search options={widget.options} classN={"hidden sm:block"} /> ?? <div className="grow"></div> .map((widget, i) => (
)}
{widgets
.filter((widget) => rightAlignedWidgets.includes(widget.type))
.map((widget, i) =>
widget.type === "search" ? (
<Search options={widget.options} classN={"block sm:hidden !ml-0 sm:!ml-1"} />
) : (
<Widget key={i} widget={widget} /> <Widget key={i} widget={widget} />
) ))}
)} </div>
</> </>
)} )}
</div> </div>