From 854ea951aabf220de9ae485f71ad201df4ee5b43 Mon Sep 17 00:00:00 2001 From: Peter Hozak Date: Thu, 2 May 2024 12:08:43 +0200 Subject: [PATCH 1/3] reintroduce vw-based .col-x, but clamp to max-width --- app/components/Article/FeedbackForm/index.tsx | 2 +- app/components/ArticlesDropdown/index.tsx | 6 ++--- app/components/CategoriesNav/Page.tsx | 2 +- app/components/Error/index.tsx | 2 +- app/components/Footer/index.tsx | 6 ++--- app/components/SearchResults/Dropdown.tsx | 4 +-- app/components/Widget/Stampy.tsx | 4 +-- app/newRoot.css | 25 ++++++++++--------- app/routes/categories.$.tsx | 2 +- 9 files changed, 27 insertions(+), 26 deletions(-) diff --git a/app/components/Article/FeedbackForm/index.tsx b/app/components/Article/FeedbackForm/index.tsx index 0ae3e7ed..9059d36f 100644 --- a/app/components/Article/FeedbackForm/index.tsx +++ b/app/components/Article/FeedbackForm/index.tsx @@ -66,7 +66,7 @@ const FeedbackForm = ({ return (
-
+
What was the problem? {hasOptions ? options.map((option, index) => ( diff --git a/app/components/ArticlesDropdown/index.tsx b/app/components/ArticlesDropdown/index.tsx index 51184b24..a98ba688 100644 --- a/app/components/ArticlesDropdown/index.tsx +++ b/app/components/ArticlesDropdown/index.tsx @@ -65,8 +65,8 @@ export const ArticlesDropdown = ({toc, categories}: ArticlesDropdownProps) => { ) return hidden ? null : ( -
-
+
+
{ className={mobile ? 'padding-bottom-40' : ''} />
-
+
{/*sorted right side*/}
Browse by category
diff --git a/app/components/CategoriesNav/Page.tsx b/app/components/CategoriesNav/Page.tsx index f3214b7b..6b463e5e 100644 --- a/app/components/CategoriesNav/Page.tsx +++ b/app/components/CategoriesNav/Page.tsx @@ -15,7 +15,7 @@ interface CategoriesPageProps { export const CategoriesPage = ({categories}: CategoriesPageProps) => { const [search, onSearch] = useState('') return ( -
+

Categories

diff --git a/app/components/Error/index.tsx b/app/components/Error/index.tsx index 21be6004..c338939e 100644 --- a/app/components/Error/index.tsx +++ b/app/components/Error/index.tsx @@ -88,7 +88,7 @@ const errorName = (error?: ErrorType) => { const Error = ({error}: {error?: ErrorType}) => { return ( -
+

{errorName(error)}

{error?.status &&
{errors[error.status as keyof typeof errors] || ''}
}
diff --git a/app/components/Footer/index.tsx b/app/components/Footer/index.tsx index c90e8e05..b33c1db9 100644 --- a/app/components/Footer/index.tsx +++ b/app/components/Footer/index.tsx @@ -16,7 +16,7 @@ export const FooterBar: FunctionComponent = () => {
-
+

AISafety.info

@@ -26,14 +26,14 @@ export const FooterBar: FunctionComponent = () => {
-
+

Get involved

-
+

Partner projects

diff --git a/app/components/SearchResults/Dropdown.tsx b/app/components/SearchResults/Dropdown.tsx index 05fe3948..83430124 100644 --- a/app/components/SearchResults/Dropdown.tsx +++ b/app/components/SearchResults/Dropdown.tsx @@ -27,14 +27,14 @@ export const SearchResults = ({results}: {results: SearchResultsProps[]}) => { const noResults = results.length === 0 if (noResults) { return ( -
+
No results found
) } return ( -
+
{results.map((result, i) => ( diff --git a/app/components/Widget/Stampy.tsx b/app/components/Widget/Stampy.tsx index 7909181d..f5d216c0 100644 --- a/app/components/Widget/Stampy.tsx +++ b/app/components/Widget/Stampy.tsx @@ -15,8 +15,8 @@ export const WidgetStampy = () => { const stampyUrl = (question: string) => `https://chat.aisafety.info/?question=${question.trim()}` return ( -
-
+
+

Questions?

Ask Stampy, our chatbot, any question about AI safety

diff --git a/app/newRoot.css b/app/newRoot.css index 726c1398..705e1af3 100644 --- a/app/newRoot.css +++ b/app/newRoot.css @@ -73,7 +73,7 @@ input { } body { margin: auto; - max-width: 1600px; + max-width: 1608px; /* multiple of 12 for .col-x, 1 col at max width = 134px */ min-height: 100vh; } @@ -290,17 +290,18 @@ h2 { /* width classes. please turn the grid on in figma and then define widths based on how many columns there are! */ /* note I may change these to vars later */ -.fcol-2 {flex: 2;} -.fcol-3 {flex: 3;} -.fcol-4 {flex: 4;} -.fcol-5 {flex: 5;} -.fcol-6 {flex: 6;} -.fcol-7 {flex: 7;} -.fcol-8 {flex: 8;} -.fcol-9 {flex: 9;} -.fcol-10 {flex: 10;} -.fcol-11 {flex: 11;} -.fcol-12 {flex: 12;} +.col-1 {width: clamp( 65px, 8.25vw, 134px);} +.col-2 {width: clamp(130px, 16.50vw, 268px);} +.col-3 {width: clamp(195px, 24.75vw, 402px);} +.col-4 {width: clamp(260px, 33.00vw, 536px);} +.col-5 {width: clamp(325px, 41.25vw, 670px);} +.col-6 {width: clamp(390px, 49.50vw, 804px);} +.col-7 {width: clamp(455px, 57.75vw, 938px);} +.col-8 {width: clamp(520px, 66.00vw, 1072px);} +.col-9 {width: clamp(585px, 74.25vw, 1206px);} +.col-10 {width: clamp(650px, 82.50vw, 1340px);} +.col-11 {width: clamp(715px, 90.75vw, 1474px);} +.col-12 {width: clamp(780px, 99.00vw, 1608px);} .full-width { width: 100%; diff --git a/app/routes/categories.$.tsx b/app/routes/categories.$.tsx index 25c467f0..f06f5775 100644 --- a/app/routes/categories.$.tsx +++ b/app/routes/categories.$.tsx @@ -56,7 +56,7 @@ export default function Tags() { ? 'No pages found' : `${selectedTag.questions.length} pages tagged "${selectedTag.name}"`}
- {selectedTag && } + {selectedTag && } )} From dcde863be66aa8f14cf9c66a26e8b6171c1e02fa Mon Sep 17 00:00:00 2001 From: Peter Hozak Date: Fri, 3 May 2024 09:18:03 +0200 Subject: [PATCH 2/3] run lint --- app/components/ArticlesNav/articlenav.css | 4 +- app/newRoot.css | 48 +++++++++++++++++------ app/routes/_index.tsx | 4 +- 3 files changed, 41 insertions(+), 15 deletions(-) diff --git a/app/components/ArticlesNav/articlenav.css b/app/components/ArticlesNav/articlenav.css index 60acca14..b218210a 100644 --- a/app/components/ArticlesNav/articlenav.css +++ b/app/components/ArticlesNav/articlenav.css @@ -10,7 +10,9 @@ overflow-y: scroll; overflow-x: hidden; opacity: 1; - transition: opacity 200ms, width 200ms; + transition: + opacity 200ms, + width 200ms; } .articles-group.loading { diff --git a/app/newRoot.css b/app/newRoot.css index 705e1af3..b1f3be59 100644 --- a/app/newRoot.css +++ b/app/newRoot.css @@ -290,18 +290,42 @@ h2 { /* width classes. please turn the grid on in figma and then define widths based on how many columns there are! */ /* note I may change these to vars later */ -.col-1 {width: clamp( 65px, 8.25vw, 134px);} -.col-2 {width: clamp(130px, 16.50vw, 268px);} -.col-3 {width: clamp(195px, 24.75vw, 402px);} -.col-4 {width: clamp(260px, 33.00vw, 536px);} -.col-5 {width: clamp(325px, 41.25vw, 670px);} -.col-6 {width: clamp(390px, 49.50vw, 804px);} -.col-7 {width: clamp(455px, 57.75vw, 938px);} -.col-8 {width: clamp(520px, 66.00vw, 1072px);} -.col-9 {width: clamp(585px, 74.25vw, 1206px);} -.col-10 {width: clamp(650px, 82.50vw, 1340px);} -.col-11 {width: clamp(715px, 90.75vw, 1474px);} -.col-12 {width: clamp(780px, 99.00vw, 1608px);} +.col-1 { + width: clamp(65px, 8.25vw, 134px); +} +.col-2 { + width: clamp(130px, 16.5vw, 268px); +} +.col-3 { + width: clamp(195px, 24.75vw, 402px); +} +.col-4 { + width: clamp(260px, 33vw, 536px); +} +.col-5 { + width: clamp(325px, 41.25vw, 670px); +} +.col-6 { + width: clamp(390px, 49.5vw, 804px); +} +.col-7 { + width: clamp(455px, 57.75vw, 938px); +} +.col-8 { + width: clamp(520px, 66vw, 1072px); +} +.col-9 { + width: clamp(585px, 74.25vw, 1206px); +} +.col-10 { + width: clamp(650px, 82.5vw, 1340px); +} +.col-11 { + width: clamp(715px, 90.75vw, 1474px); +} +.col-12 { + width: clamp(780px, 99vw, 1608px); +} .full-width { width: 100%; diff --git a/app/routes/_index.tsx b/app/routes/_index.tsx index 067fbcf0..6a79b6b6 100644 --- a/app/routes/_index.tsx +++ b/app/routes/_index.tsx @@ -29,11 +29,11 @@ export const shouldRevalidate: ShouldRevalidateFunction = () => false export default function App() { const {advanced} = useToC() - + useEffect(() => { document.title = 'AISafety.info' }, []) - + return (
From c9e1c21d44bcf342f1ea1233ffcbbd488f9c80f1 Mon Sep 17 00:00:00 2001 From: Melissa Samworth Date: Fri, 3 May 2024 08:57:31 -0400 Subject: [PATCH 3/3] Revert "reintroduce vw-based .col-x" --- app/components/Article/FeedbackForm/index.tsx | 2 +- app/components/ArticlesDropdown/index.tsx | 6 +-- app/components/ArticlesNav/articlenav.css | 4 +- app/components/CategoriesNav/Page.tsx | 2 +- app/components/Error/index.tsx | 2 +- app/components/Footer/index.tsx | 6 +-- app/components/SearchResults/Dropdown.tsx | 4 +- app/components/Widget/Stampy.tsx | 4 +- app/newRoot.css | 49 +++++-------------- app/routes/_index.tsx | 4 +- app/routes/categories.$.tsx | 2 +- 11 files changed, 29 insertions(+), 56 deletions(-) diff --git a/app/components/Article/FeedbackForm/index.tsx b/app/components/Article/FeedbackForm/index.tsx index 9059d36f..0ae3e7ed 100644 --- a/app/components/Article/FeedbackForm/index.tsx +++ b/app/components/Article/FeedbackForm/index.tsx @@ -66,7 +66,7 @@ const FeedbackForm = ({ return (
-
+
What was the problem? {hasOptions ? options.map((option, index) => ( diff --git a/app/components/ArticlesDropdown/index.tsx b/app/components/ArticlesDropdown/index.tsx index a98ba688..51184b24 100644 --- a/app/components/ArticlesDropdown/index.tsx +++ b/app/components/ArticlesDropdown/index.tsx @@ -65,8 +65,8 @@ export const ArticlesDropdown = ({toc, categories}: ArticlesDropdownProps) => { ) return hidden ? null : ( -
-
+
+
{ className={mobile ? 'padding-bottom-40' : ''} />
-
+
{/*sorted right side*/}
Browse by category
diff --git a/app/components/ArticlesNav/articlenav.css b/app/components/ArticlesNav/articlenav.css index b218210a..60acca14 100644 --- a/app/components/ArticlesNav/articlenav.css +++ b/app/components/ArticlesNav/articlenav.css @@ -10,9 +10,7 @@ overflow-y: scroll; overflow-x: hidden; opacity: 1; - transition: - opacity 200ms, - width 200ms; + transition: opacity 200ms, width 200ms; } .articles-group.loading { diff --git a/app/components/CategoriesNav/Page.tsx b/app/components/CategoriesNav/Page.tsx index 6b463e5e..f3214b7b 100644 --- a/app/components/CategoriesNav/Page.tsx +++ b/app/components/CategoriesNav/Page.tsx @@ -15,7 +15,7 @@ interface CategoriesPageProps { export const CategoriesPage = ({categories}: CategoriesPageProps) => { const [search, onSearch] = useState('') return ( -
+

Categories

diff --git a/app/components/Error/index.tsx b/app/components/Error/index.tsx index c338939e..21be6004 100644 --- a/app/components/Error/index.tsx +++ b/app/components/Error/index.tsx @@ -88,7 +88,7 @@ const errorName = (error?: ErrorType) => { const Error = ({error}: {error?: ErrorType}) => { return ( -
+

{errorName(error)}

{error?.status &&
{errors[error.status as keyof typeof errors] || ''}
}
diff --git a/app/components/Footer/index.tsx b/app/components/Footer/index.tsx index b33c1db9..c90e8e05 100644 --- a/app/components/Footer/index.tsx +++ b/app/components/Footer/index.tsx @@ -16,7 +16,7 @@ export const FooterBar: FunctionComponent = () => {
-
+

AISafety.info

@@ -26,14 +26,14 @@ export const FooterBar: FunctionComponent = () => {
-
+

Get involved

-
+

Partner projects

diff --git a/app/components/SearchResults/Dropdown.tsx b/app/components/SearchResults/Dropdown.tsx index 83430124..05fe3948 100644 --- a/app/components/SearchResults/Dropdown.tsx +++ b/app/components/SearchResults/Dropdown.tsx @@ -27,14 +27,14 @@ export const SearchResults = ({results}: {results: SearchResultsProps[]}) => { const noResults = results.length === 0 if (noResults) { return ( -
+
No results found
) } return ( -
+
{results.map((result, i) => ( diff --git a/app/components/Widget/Stampy.tsx b/app/components/Widget/Stampy.tsx index f5d216c0..7909181d 100644 --- a/app/components/Widget/Stampy.tsx +++ b/app/components/Widget/Stampy.tsx @@ -15,8 +15,8 @@ export const WidgetStampy = () => { const stampyUrl = (question: string) => `https://chat.aisafety.info/?question=${question.trim()}` return ( -
-
+
+

Questions?

Ask Stampy, our chatbot, any question about AI safety

diff --git a/app/newRoot.css b/app/newRoot.css index b1f3be59..726c1398 100644 --- a/app/newRoot.css +++ b/app/newRoot.css @@ -73,7 +73,7 @@ input { } body { margin: auto; - max-width: 1608px; /* multiple of 12 for .col-x, 1 col at max width = 134px */ + max-width: 1600px; min-height: 100vh; } @@ -290,42 +290,17 @@ h2 { /* width classes. please turn the grid on in figma and then define widths based on how many columns there are! */ /* note I may change these to vars later */ -.col-1 { - width: clamp(65px, 8.25vw, 134px); -} -.col-2 { - width: clamp(130px, 16.5vw, 268px); -} -.col-3 { - width: clamp(195px, 24.75vw, 402px); -} -.col-4 { - width: clamp(260px, 33vw, 536px); -} -.col-5 { - width: clamp(325px, 41.25vw, 670px); -} -.col-6 { - width: clamp(390px, 49.5vw, 804px); -} -.col-7 { - width: clamp(455px, 57.75vw, 938px); -} -.col-8 { - width: clamp(520px, 66vw, 1072px); -} -.col-9 { - width: clamp(585px, 74.25vw, 1206px); -} -.col-10 { - width: clamp(650px, 82.5vw, 1340px); -} -.col-11 { - width: clamp(715px, 90.75vw, 1474px); -} -.col-12 { - width: clamp(780px, 99vw, 1608px); -} +.fcol-2 {flex: 2;} +.fcol-3 {flex: 3;} +.fcol-4 {flex: 4;} +.fcol-5 {flex: 5;} +.fcol-6 {flex: 6;} +.fcol-7 {flex: 7;} +.fcol-8 {flex: 8;} +.fcol-9 {flex: 9;} +.fcol-10 {flex: 10;} +.fcol-11 {flex: 11;} +.fcol-12 {flex: 12;} .full-width { width: 100%; diff --git a/app/routes/_index.tsx b/app/routes/_index.tsx index 6a79b6b6..067fbcf0 100644 --- a/app/routes/_index.tsx +++ b/app/routes/_index.tsx @@ -29,11 +29,11 @@ export const shouldRevalidate: ShouldRevalidateFunction = () => false export default function App() { const {advanced} = useToC() - + useEffect(() => { document.title = 'AISafety.info' }, []) - + return (
diff --git a/app/routes/categories.$.tsx b/app/routes/categories.$.tsx index f06f5775..25c467f0 100644 --- a/app/routes/categories.$.tsx +++ b/app/routes/categories.$.tsx @@ -56,7 +56,7 @@ export default function Tags() { ? 'No pages found' : `${selectedTag.questions.length} pages tagged "${selectedTag.name}"`}
- {selectedTag && } + {selectedTag && } )}