10392815513

Committed 14 Aug 2024 06:14PM UTC coverage: 32.087% (+0.06%) from 32.024%

Build # 10392815513

Build Type

Pull #9556

github

Committed by

web-flow

Commit Message

Update packages/lesswrong/components/tagging/FooterTagList.tsx

Co-authored-by: Sarah Cheng <sarah.cheng@centreforeffectivealtruism.org>

Pull Request Pull Request #9556: Minimalist Post Header

Run Details

4941 of 40171 branches covered (12.3%)

Branch coverage included in aggregate %.

74 of 146 new or added lines in 27 files covered. (50.68%)

6 existing lines in 5 files now uncovered.

28815 of 65030 relevant lines covered (44.31%)

180.49 hits per line

Source File
Press 'n' to go to next uncovered line, 'b' for previous

55.77

/packages/lesswrong/components/posts/TableOfContents/MultiToCLayout.tsx

import classNames from 'classnames';
import React, { useEffect } from 'react';
import { Components, registerComponent } from "../../../lib/vulcan-lib";
import { MAX_COLUMN_WIDTH } from '../PostsPage/PostsPage';
import { fullHeightToCEnabled } from '../../../lib/betas';
import { HEADER_HEIGHT } from '@/components/common/Header';

const FULL_HEIGHT_TOC_LEFT_MARGIN = '1fr'
const DEFAULT_TOC_MARGIN = '1.5fr'
const MAX_TOC_WIDTH = 270
const MIN_TOC_WIDTH = 200
export const MAX_CONTENT_WIDTH = 720;
const TOC_OFFSET_TOP = 92
const TOC_OFFSET_BOTTOM = 64
const LEFT_COLUMN_WIDTH = fullHeightToCEnabled ? '0fr' : '1fr';
const RIGHT_COLUMN_WIDTH = fullHeightToCEnabled ? '0fr' : '1.5fr';

export const HOVER_CLASSNAME = 'ToCRowHover'
export const FIXED_TOC_COMMENT_COUNT_HEIGHT = 50;

const STICKY_BLOCK_SCROLLER_CLASS_NAME = 'MultiToCLayoutStickyBlockScroller';

const styles = (theme: ThemeType) => ({
  root: {
    [`&:has($gap1:hover) .${HOVER_CLASSNAME}, &:has($toc:hover) .${HOVER_CLASSNAME}, &:has($commentCount:hover) .${HOVER_CLASSNAME}`]: {
      opacity: 1
    },
  },
  tableOfContents: {
    position: "relative",
    display: "grid",
    [theme.breakpoints.down('sm')]: {
      paddingTop: 12,
    },

    gridTemplateColumns: `
      ${LEFT_COLUMN_WIDTH}
      minmax(${MIN_TOC_WIDTH}px, ${MAX_TOC_WIDTH}px)
      minmax(50px, ${FULL_HEIGHT_TOC_LEFT_MARGIN})
      minmax(min-content, ${MAX_COLUMN_WIDTH}px)
      minmax(300px, ${DEFAULT_TOC_MARGIN})
      minmax(min-content, 300px)
      10px
      ${RIGHT_COLUMN_WIDTH}
    `,
    [theme.breakpoints.down('sm')]: {
      display: 'block',
      paddingTop: 12
    },
  },
  toc: {
    position: 'unset',
    width: 'unset',
    left: -DEFAULT_TOC_MARGIN,
    marginTop: fullHeightToCEnabled ? -50 : -TOC_OFFSET_TOP,
    marginBottom: fullHeightToCEnabled ? undefined : -TOC_OFFSET_BOTTOM,
    [theme.breakpoints.down('sm')]:{
      display: "none",
      marginTop: 0,
      marginBottom: 0,
    },
  },
  splashPageHeaderToc: {
    marginTop: 'calc(-100vh - 64px)'
  },
  normalHeaderToc: {
    
  },
  commentToCMargin: {
    marginTop: 'unset',
  },
  // This is needed for an annoying IntersectionObserver hack to prevent the title from being hidden when scrolling up
  commentToCIntersection: {
    // And unfortunately we need !important because otherwise this style gets overriden by the `top: 0` in `stickyBlockScroller`
    top: '-1px !important'
  },
  stickyBlockScroller: {
    position: "sticky",
    fontSize: 12,
    top: 0,
    transition: 'top 0.2s ease-in-out, height 0.2s ease-in-out',
    lineHeight: 1.0,
    marginLeft: 1,
    paddingLeft: theme.spacing.unit*2,
    textAlign: "left",
    maxHeight: `calc(100vh - ${FIXED_TOC_COMMENT_COUNT_HEIGHT}px)`,
    height: fullHeightToCEnabled ? `calc(100vh - ${FIXED_TOC_COMMENT_COUNT_HEIGHT}px)` : undefined,
    overflowY: "auto",
    
    scrollbarWidth: "none", //Firefox-specific
    "&::-webkit-scrollbar": { //Everything-else
      width: 0,
    },

    [theme.breakpoints.down('sm')]:{
      display:'none'
    },
  },
  '@global': {
    // Hard-coding this class name as a workaround for one of the JSS plugins being incapable of parsing a self-reference ($titleContainer) while inside @global
    [`body:has(.headroom--pinned) .${STICKY_BLOCK_SCROLLER_CLASS_NAME}, body:has(.headroom--unfixed) .${STICKY_BLOCK_SCROLLER_CLASS_NAME}`]: {
      top: HEADER_HEIGHT,
      height: `calc(100vh - ${HEADER_HEIGHT}px - ${FIXED_TOC_COMMENT_COUNT_HEIGHT}px)`
    }
  },
  stickyBlock: {
    // Cancels the direction:rtl in stickyBlockScroller
    direction: "ltr",
    height: fullHeightToCEnabled ? "100%" : undefined,
    paddingTop: fullHeightToCEnabled ? undefined : TOC_OFFSET_TOP,
    paddingBottom: fullHeightToCEnabled ? undefined : TOC_OFFSET_BOTTOM,
  },
  content: {},
  gap1: { 
    gridArea: 'gap1'
  },
  gap2: { gridArea: 'gap2' },
  gap3: { gridArea: 'gap3' },
  rhs: {},
  hideTocButton: {
    position: "fixed",
    top: 0,
    left: 0,
    fontSize: 14,
    fontWeight: 500,
    fontFamily: theme.palette.fonts.sansSerifStack,
    color: theme.palette.grey[600],
    margin: 18,
    display: "flex",
    alignItems: "center",
    gap: "10px",
    userSelect: "none",
    cursor: "pointer",
    [theme.breakpoints.down("sm")]: {
      display: "none",
    },
  },
  hideTocButtonHidden: {
    display: "none",
  },
  commentCount: {}
});

export type ToCLayoutSegment = {
  toc?: React.ReactNode,
  centralColumn: React.ReactNode,
  rightColumn?: React.ReactNode,
  isCommentToC?: boolean,
};

const MultiToCLayout = ({segments, classes, tocRowMap = [], showSplashPageHeader = false, answerCount, commentCount}: {
  segments: ToCLayoutSegment[],
  classes: ClassesType<typeof styles>,
  tocRowMap?: number[], // This allows you to specify which row each ToC should be in, where maybe you want a ToC to span more than one row
  showSplashPageHeader?: boolean,
  answerCount?: number,
  commentCount?: number,
}) => {
  const { FixedTableOfContentsCommentCount } = Components;
  const tocVisible = true;
  const gridTemplateAreas = segments
    .map((_segment,i) => `"... toc${tocRowMap[i] ?? i} gap1 content${i} gap2 rhs${i} gap3 ..."`)
    .join('\n')

  return <div className={classes.root}>
    <div className={classNames(classes.tableOfContents)} style={{ gridTemplateAreas }}>
      {segments.map((segment,i) => <React.Fragment key={i}>
        {segment.toc && tocVisible && <>
          <div className={classNames(classes.toc, { [classes.commentToCMargin]: segment.isCommentToC, [classes.splashPageHeaderToc]: showSplashPageHeader, [classes.normalHeaderToc]: !showSplashPageHeader })} 
            style={{ "gridArea": `toc${i}` }} 
          >
            <div className={classNames(classes.stickyBlockScroller, STICKY_BLOCK_SCROLLER_CLASS_NAME, { [classes.commentToCIntersection]: segment.isCommentToC })}>
              <div className={classes.stickyBlock}>
                {segment.toc}
              </div>
            </div>
          </div>
        </>}
        <div className={classes.gap1}/>
        <div className={classes.content} style={{ "gridArea": `content${i}` }} >
          {segment.centralColumn}
        </div>
        <div className={classes.gap2}/>
        {segment.rightColumn && <div className={classes.rhs} style={{ "gridArea": `rhs${i}` }}>
          {segment.rightColumn}
        </div>}
        <div className={classes.gap3}/>
      </React.Fragment>)}
    </div>
    <div className={classes.commentCount}>
      <FixedTableOfContentsCommentCount
        answerCount={answerCount}
        commentCount={commentCount}
      />
    </div>
  </div>
}

const MultiToCLayoutComponent = registerComponent('MultiToCLayout', MultiToCLayout, {styles});

declare global {
  interface ComponentTypes {
    MultiToCLayout: typeof MultiToCLayoutComponent
  }
}


1	import classNames from 'classnames';	4✔
2	import React, { useEffect } from 'react';	1✔
3	import { Components, registerComponent } from "../../../lib/vulcan-lib";	1✔
4	import { MAX_COLUMN_WIDTH } from '../PostsPage/PostsPage';	1✔
5	import { fullHeightToCEnabled } from '../../../lib/betas';	1✔
6	import { HEADER_HEIGHT } from '@/components/common/Header';	1✔
7
8	const FULL_HEIGHT_TOC_LEFT_MARGIN = '1fr'	1✔
9	const DEFAULT_TOC_MARGIN = '1.5fr'	1✔
10	const MAX_TOC_WIDTH = 270	1✔
11	const MIN_TOC_WIDTH = 200	1✔
12	export const MAX_CONTENT_WIDTH = 720;	1✔
13	const TOC_OFFSET_TOP = 92	1✔
14	const TOC_OFFSET_BOTTOM = 64	1✔
15	const LEFT_COLUMN_WIDTH = fullHeightToCEnabled ? '0fr' : '1fr';	1!
16	const RIGHT_COLUMN_WIDTH = fullHeightToCEnabled ? '0fr' : '1.5fr';	1!
17
18	export const HOVER_CLASSNAME = 'ToCRowHover'	1✔
19	export const FIXED_TOC_COMMENT_COUNT_HEIGHT = 50;	1✔
20
21	const STICKY_BLOCK_SCROLLER_CLASS_NAME = 'MultiToCLayoutStickyBlockScroller';	1✔
22
23	const styles = (theme: ThemeType) => ({	1✔
24	root: {
25	[`&:has($gap1:hover) .${HOVER_CLASSNAME}, &:has($toc:hover) .${HOVER_CLASSNAME}, &:has($commentCount:hover) .${HOVER_CLASSNAME}`]: {
26	opacity: 1
27	},
28	},
29	tableOfContents: {
30	position: "relative",
31	display: "grid",
32	[theme.breakpoints.down('sm')]: {
33	paddingTop: 12,
34	},
35
36	gridTemplateColumns: `
37	${LEFT_COLUMN_WIDTH}
38	minmax(${MIN_TOC_WIDTH}px, ${MAX_TOC_WIDTH}px)
39	minmax(50px, ${FULL_HEIGHT_TOC_LEFT_MARGIN})
40	minmax(min-content, ${MAX_COLUMN_WIDTH}px)
41	minmax(300px, ${DEFAULT_TOC_MARGIN})
42	minmax(min-content, 300px)
43	10px
44	${RIGHT_COLUMN_WIDTH}
45	`,
46	[theme.breakpoints.down('sm')]: {
47	display: 'block',
48	paddingTop: 12
49	},
50	},
51	toc: {
52	position: 'unset',
53	width: 'unset',
54	left: -DEFAULT_TOC_MARGIN,
55	marginTop: fullHeightToCEnabled ? -50 : -TOC_OFFSET_TOP,	1!
56	marginBottom: fullHeightToCEnabled ? undefined : -TOC_OFFSET_BOTTOM,	1!
57	[theme.breakpoints.down('sm')]:{
58	display: "none",
59	marginTop: 0,
60	marginBottom: 0,
61	},
62	},
63	splashPageHeaderToc: {
64	marginTop: 'calc(-100vh - 64px)'
65	},
66	normalHeaderToc: {
67
68	},
69	commentToCMargin: {
70	marginTop: 'unset',
71	},
72	// This is needed for an annoying IntersectionObserver hack to prevent the title from being hidden when scrolling up
73	commentToCIntersection: {
74	// And unfortunately we need !important because otherwise this style gets overriden by the `top: 0` in `stickyBlockScroller`
75	top: '-1px !important'
76	},
77	stickyBlockScroller: {
78	position: "sticky",
79	fontSize: 12,
80	top: 0,
81	transition: 'top 0.2s ease-in-out, height 0.2s ease-in-out',
82	lineHeight: 1.0,
83	marginLeft: 1,
84	paddingLeft: theme.spacing.unit*2,
85	textAlign: "left",
86	maxHeight: `calc(100vh - ${FIXED_TOC_COMMENT_COUNT_HEIGHT}px)`,
87	height: fullHeightToCEnabled ? `calc(100vh - ${FIXED_TOC_COMMENT_COUNT_HEIGHT}px)` : undefined,	1!
88	overflowY: "auto",
89
90	scrollbarWidth: "none", //Firefox-specific
91	"&::-webkit-scrollbar": { //Everything-else
92	width: 0,
93	},
94
95	[theme.breakpoints.down('sm')]:{
96	display:'none'
97	},
98	},
99	'@global': {
100	// Hard-coding this class name as a workaround for one of the JSS plugins being incapable of parsing a self-reference ($titleContainer) while inside @global
101	[`body:has(.headroom--pinned) .${STICKY_BLOCK_SCROLLER_CLASS_NAME}, body:has(.headroom--unfixed) .${STICKY_BLOCK_SCROLLER_CLASS_NAME}`]: {
102	top: HEADER_HEIGHT,
103	height: `calc(100vh - ${HEADER_HEIGHT}px - ${FIXED_TOC_COMMENT_COUNT_HEIGHT}px)`
104	}
105	},
106	stickyBlock: {
107	// Cancels the direction:rtl in stickyBlockScroller
108	direction: "ltr",
109	height: fullHeightToCEnabled ? "100%" : undefined,	1!
110	paddingTop: fullHeightToCEnabled ? undefined : TOC_OFFSET_TOP,	1!
111	paddingBottom: fullHeightToCEnabled ? undefined : TOC_OFFSET_BOTTOM,	1!
112	},
113	content: {},
114	gap1: {
115	gridArea: 'gap1'
116	},
117	gap2: { gridArea: 'gap2' },
118	gap3: { gridArea: 'gap3' },
119	rhs: {},
120	hideTocButton: {
121	position: "fixed",
122	top: 0,
123	left: 0,
124	fontSize: 14,
125	fontWeight: 500,
126	fontFamily: theme.palette.fonts.sansSerifStack,
127	color: theme.palette.grey[600],
128	margin: 18,
129	display: "flex",
130	alignItems: "center",
131	gap: "10px",
132	userSelect: "none",
133	cursor: "pointer",
134	[theme.breakpoints.down("sm")]: {
135	display: "none",
136	},
137	},
138	hideTocButtonHidden: {
139	display: "none",
140	},
141	commentCount: {}
142	});
143
144	export type ToCLayoutSegment = {
145	toc?: React.ReactNode,
146	centralColumn: React.ReactNode,
147	rightColumn?: React.ReactNode,
148	isCommentToC?: boolean,
149	};
150
151	const MultiToCLayout = ({segments, classes, tocRowMap = [], showSplashPageHeader = false, answerCount, commentCount}: {	1!
152	segments: ToCLayoutSegment[],
153	classes: ClassesType<typeof styles>,
154	tocRowMap?: number[], // This allows you to specify which row each ToC should be in, where maybe you want a ToC to span more than one row
155	showSplashPageHeader?: boolean,
156	answerCount?: number,
157	commentCount?: number,
158	}) => {
NEW 159	const { FixedTableOfContentsCommentCount } = Components;	×
160	const tocVisible = true;	×
161	const gridTemplateAreas = segments	×
NEW 162	.map((_segment,i) => `"... toc${tocRowMap[i] ?? i} gap1 content${i} gap2 rhs${i} gap3 ..."`)	×
163	.join('\n')
164
NEW 165	return <div className={classes.root}>	×
166	<div className={classNames(classes.tableOfContents)} style={{ gridTemplateAreas }}>
NEW 167	{segments.map((segment,i) => <React.Fragment key={i}>	×
168	{segment.toc && tocVisible && <>	×
169	<div className={classNames(classes.toc, { [classes.commentToCMargin]: segment.isCommentToC, [classes.splashPageHeaderToc]: showSplashPageHeader, [classes.normalHeaderToc]: !showSplashPageHeader })}
170	style={{ "gridArea": `toc${i}` }}
171	>
172	<div className={classNames(classes.stickyBlockScroller, STICKY_BLOCK_SCROLLER_CLASS_NAME, { [classes.commentToCIntersection]: segment.isCommentToC })}>
173	<div className={classes.stickyBlock}>
174	{segment.toc}
175	</div>
176	</div>
177	</div>
178	</>}
179	<div className={classes.gap1}/>
180	<div className={classes.content} style={{ "gridArea": `content${i}` }} >
181	{segment.centralColumn}
182	</div>
183	<div className={classes.gap2}/>
184	{segment.rightColumn && <div className={classes.rhs} style={{ "gridArea": `rhs${i}` }}>	×
185	{segment.rightColumn}
186	</div>}
187	<div className={classes.gap3}/>
188	</React.Fragment>)}
189	</div>
190	<div className={classes.commentCount}>
191	<FixedTableOfContentsCommentCount
192	answerCount={answerCount}
193	commentCount={commentCount}
194	/>
195	</div>
196	</div>
197	}
198
199	const MultiToCLayoutComponent = registerComponent('MultiToCLayout', MultiToCLayout, {styles});	1✔
200
201	declare global {
202	interface ComponentTypes {
203	MultiToCLayout: typeof MultiToCLayoutComponent
204	}
205	}
206

ForumMagnum / ForumMagnum / 10392815513

Source File Press 'n' to go to next uncovered line, 'b' for previous

Source File
Press 'n' to go to next uncovered line, 'b' for previous