From c5f071709aaeee4a772ac1bbda25f115a0f3c0e4 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Marc-Fran=C3=A7ois=20Cochaux-Laberge?= Date: Tue, 9 Jan 2024 20:51:21 -0500 Subject: [PATCH 1/2] Redesign the client --- src/App.tsx | 2 +- src/components/Header.tsx | 9 +- src/components/MainContent.tsx | 2 +- src/components/MenuPane.tsx | 2 +- src/components/NotificationPane.tsx | 141 +++++++++++++++++----------- src/index.css | 3 +- 6 files changed, 96 insertions(+), 63 deletions(-) diff --git a/src/App.tsx b/src/App.tsx index 2cf3202e..9dba7c35 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -139,7 +139,7 @@ type props = {}; const StyledApp = styled.div` display: grid; - grid-template-rows: 50px 1fr; + grid-template-rows: 60px 1fr; gap: 10px; height: 100%; max-width: 1200px; diff --git a/src/components/Header.tsx b/src/components/Header.tsx index f91918a8..6e2960b0 100644 --- a/src/components/Header.tsx +++ b/src/components/Header.tsx @@ -53,9 +53,12 @@ const HeaderStyle = styled.div` grid-template-columns: 1fr 1fr; grid-row: 1; grid-column: 1; - height: 50px; - border-radius: 0 0 4px 4px; - background: #423d39; + height: 100%; + // border-radius: 0 0 4px 4px; + // background: #444; + // border: 2px solid #444; + border-bottom: 4px solid #444; + border-top: 0; padding: 0 10px; color: #fff; z-index: 110; diff --git a/src/components/MainContent.tsx b/src/components/MainContent.tsx index b5b27678..bbd0bf2a 100644 --- a/src/components/MainContent.tsx +++ b/src/components/MainContent.tsx @@ -80,7 +80,7 @@ const StyledMainContent = styled.div` min-height: 0; height: 100%; width: 100%; - background: #fff; + // background: #fff; border-radius: 4px; @media all and (max-width: 699px) { diff --git a/src/components/MenuPane.tsx b/src/components/MenuPane.tsx index f1e481d0..3684b033 100644 --- a/src/components/MenuPane.tsx +++ b/src/components/MenuPane.tsx @@ -205,7 +205,7 @@ const StyledMenuPane = styled.div` min-height: 0; height: 100%; width: 200px; - background: #ede7d4; + // background: #ede7d4; footer { display: grid; diff --git a/src/components/NotificationPane.tsx b/src/components/NotificationPane.tsx index 5bf6858d..20b4ce1e 100644 --- a/src/components/NotificationPane.tsx +++ b/src/components/NotificationPane.tsx @@ -83,66 +83,80 @@ const NotificationPane: FunctionComponent = ({ return ( - +
+ Resources +
+
+ +
- +
+ Money +
+
+ +
- {!loggedIn &&

You are not logged in.

} - {loggedIn && error &&

Construction sites could not be loaded.

} - {loggedIn && !hasSites &&

Nothing is currently being built.

} - {loggedIn && - hasSites && - sites.map((site) => { - return ( - -
- -
-
-

- - Construction on{' '} - - {site.infrastructure.toLocaleLowerCase()} ( - {site.tilePosition}) - {' '} - -

-

- Level {site.tile.level} → {site.tile.level + 1} -

-
-
-

- Done{' '} - { - client.cache.evict({ - id: 'ConstructionSite:' + site.id, - }); - }} +

+ {!loggedIn &&

You are not logged in.

} + {loggedIn && error && ( +

Construction sites could not be loaded.

+ )} + {loggedIn && !hasSites &&

Nothing is currently being built.

} + {loggedIn && + hasSites && + sites.map((site) => { + return ( + +
+ -

-
- - ); - })} +
+
+

+ + Construction on{' '} + + {site.infrastructure.toLocaleLowerCase()} ( + {site.tilePosition}) + {' '} + +

+

+ Level {site.tile.level} → {site.tile.level + 1} +

+
+
+

+ Done{' '} + { + client.cache.evict({ + id: 'ConstructionSite:' + site.id, + }); + }} + /> +

+
+ + ); + })} +
@@ -222,9 +236,24 @@ const StyledNotification = styled.div` const StyledContent = styled.div` display: grid; grid-gap: 10px; - padding: 10px; - background: #fff; + // padding: 10px; + // background: #fff; border-radius: 4px; + + .notification-pane-title { + background: #666; + padding: 8px 10px; + color: #fff; + border-radius: 4px 4px 0 0; + + @media all and (min-width: 700px) and (max-width: 999px) { + border-radius: 0; + } + } + + .notification-pane-content { + padding: 0 10px 10px 10px; + } `; export default NotificationPane; diff --git a/src/index.css b/src/index.css index f9a2a232..e2a81408 100644 --- a/src/index.css +++ b/src/index.css @@ -12,7 +12,8 @@ body { } body { - background: #ede7d4; + /* background: #ede7d4; */ + background: #f8f8f8; background-size: 800px 400px; } From 3ead7b1813b35f76a849f18bef53b1f4af8883f9 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Marc-Fran=C3=A7ois=20Cochaux-Laberge?= Date: Wed, 10 Apr 2024 00:32:52 -0400 Subject: [PATCH 2/2] wip --- src/components/Header.tsx | 1 + src/components/MenuPane.tsx | 1 + src/components/NotificationPane.tsx | 138 ++++++++++++++-------------- 3 files changed, 72 insertions(+), 68 deletions(-) diff --git a/src/components/Header.tsx b/src/components/Header.tsx index 6e2960b0..0f7c0e87 100644 --- a/src/components/Header.tsx +++ b/src/components/Header.tsx @@ -62,6 +62,7 @@ const HeaderStyle = styled.div` padding: 0 10px; color: #fff; z-index: 110; + border: 1px solid red; div { display: grid; diff --git a/src/components/MenuPane.tsx b/src/components/MenuPane.tsx index 3684b033..aa2ff783 100644 --- a/src/components/MenuPane.tsx +++ b/src/components/MenuPane.tsx @@ -206,6 +206,7 @@ const StyledMenuPane = styled.div` height: 100%; width: 200px; // background: #ede7d4; + border: 1px solid pink; footer { display: grid; diff --git a/src/components/NotificationPane.tsx b/src/components/NotificationPane.tsx index 20b4ce1e..cdde3f50 100644 --- a/src/components/NotificationPane.tsx +++ b/src/components/NotificationPane.tsx @@ -83,82 +83,82 @@ const NotificationPane: FunctionComponent = ({ return ( -
- Resources +
+ {!loggedIn &&

You are not logged in.

}
+ + +
+ -
- Money -
- - -
- {!loggedIn &&

You are not logged in.

} - {loggedIn && error && ( -

Construction sites could not be loaded.

- )} - {loggedIn && !hasSites &&

Nothing is currently being built.

} - {loggedIn && - hasSites && - sites.map((site) => { - return ( - -
- -
-
-

- - Construction on{' '} - - {site.infrastructure.toLocaleLowerCase()} ( - {site.tilePosition}) - {' '} - -

-

- Level {site.tile.level} → {site.tile.level + 1} -

-
-
-

- Done{' '} - { - client.cache.evict({ - id: 'ConstructionSite:' + site.id, - }); - }} + + {loggedIn && ( + + +

+ {error &&

Construction sites could not be loaded.

} + {!hasSites &&

Nothing is currently being built.

} + {hasSites && + sites.map((site) => { + return ( + +
+ -

-
- - ); - })} -
- - +
+
+

+ + Construction on{' '} + + {site.infrastructure.toLocaleLowerCase()} ( + {site.tilePosition}) + {' '} + +

+

+ Level {site.tile.level} → {site.tile.level + 1} +

+
+
+

+ Done{' '} + { + client.cache.evict({ + id: 'ConstructionSite:' + site.id, + }); + }} + /> +

+
+ + ); + })} +
+ + + )} ); }; @@ -170,7 +170,7 @@ type props = { const StyledNotificationPane = styled.div` display: grid; - grid-template-rows: auto auto 1fr; + grid-template-rows: auto auto auto 1fr; gap: 10px; grid-row: 1; grid-column: 2; @@ -179,6 +179,7 @@ const StyledNotificationPane = styled.div` height: 100%; width: 300px; z-index: 110; + border: 1px solid blue; @media all and (max-width: 699px) { display: var(--display); @@ -238,7 +239,8 @@ const StyledContent = styled.div` grid-gap: 10px; // padding: 10px; // background: #fff; - border-radius: 4px; + // border-radius: 4px; + border: 1px solid green; .notification-pane-title { background: #666; @@ -252,7 +254,7 @@ const StyledContent = styled.div` } .notification-pane-content { - padding: 0 10px 10px 10px; + padding: 10px; } `;