From 992281efb877159e2e7c1713f7c753372c651807 Mon Sep 17 00:00:00 2001 From: stevekaplan123 Date: Thu, 29 Aug 2024 13:13:25 +0300 Subject: [PATCH 01/25] chore: started sidebar --- static/js/Sheet.jsx | 1 + static/js/SheetContent.jsx | 51 ++++++++++++++++---------------------- 2 files changed, 22 insertions(+), 30 deletions(-) diff --git a/static/js/Sheet.jsx b/static/js/Sheet.jsx index 02fd8db289..ac48c2415e 100644 --- a/static/js/Sheet.jsx +++ b/static/js/Sheet.jsx @@ -117,6 +117,7 @@ class Sheet extends Component { highlightedRefsInSheet={this.props.highlightedRefsInSheet} scrollToHighlighted={this.props.scrollToHighlighted} authorStatement={sheet.ownerName} + authorID={sheet.owner} authorUrl={sheet.ownerProfileUrl} authorImage={sheet.ownerImageUrl} collectionName={sheet.collectionName} diff --git a/static/js/SheetContent.jsx b/static/js/SheetContent.jsx index 09e1e7266f..3a99a38312 100644 --- a/static/js/SheetContent.jsx +++ b/static/js/SheetContent.jsx @@ -6,9 +6,7 @@ import { CollectionStatement, InterfaceText, ProfilePic, - SheetAuthorStatement, - SheetMetaDataBox, - SheetTitle + FollowButton } from "./Misc"; import React from "react"; import classNames from "classnames"; @@ -196,33 +194,26 @@ class SheetContent extends Component { return (
- {this.props.sheetNotice ? : null} - - - - - - - - {this.props.authorStatement} - - - - - - - + -1} + /> + + + + {this.props.authorStatement} + +
{sources} From 9c593dfbbca7c3b65e921d93dc2af394334b9d94 Mon Sep 17 00:00:00 2001 From: stevekaplan123 Date: Sun, 1 Sep 2024 10:46:49 +0300 Subject: [PATCH 02/25] chore: create SheetContentMetaDataBox and SheetSidebar --- static/css/s2.css | 41 +++++++++++++++++++++---- static/js/Misc.jsx | 4 +-- static/js/Sheet.jsx | 58 ++++++++++++++++++++---------------- static/js/SheetContent.jsx | 61 +++++++++++++++++++++----------------- static/js/SheetSidebar.jsx | 28 +++++++++++++++++ 5 files changed, 132 insertions(+), 60 deletions(-) create mode 100644 static/js/SheetSidebar.jsx diff --git a/static/css/s2.css b/static/css/s2.css index 27ebaf7302..c4951af1b0 100644 --- a/static/css/s2.css +++ b/static/css/s2.css @@ -3220,7 +3220,6 @@ display: none; .bookPage .tocTitle, .sheetContent .title, .bookMetaDataBox .title { - text-align: center; font-size: 30px; line-height: 1.3; unicode-bidi: plaintext; @@ -3245,11 +3244,28 @@ display: none; .sheetContent .sheetMetaDataBox .collectionStatement { margin-top: 16px; } -.sheetContent .sheetMetaDataBox .collectionStatement a, -.sheetContent .sheetMetaDataBox .authorStatement a { +.sheetContent .sheetMetaDataBox .collectionStatement a { color: #999; margin-inline-start: 5px; } +.sheetContent .sheetMetaDataBox .authorStatement a { + color: var(--midrash-green); + margin-inline-start: 5px; +} +.sheetViewer { + display: flex; +} +.sheetSidebar { + width: 33%; +} +.sheetAuthorName { + --english-font: var(--english-sans-serif-font-family); + --hebrew-font: var(--hebrew-sans-serif-font-family); + font-size: 16px; + font-weight: 600; + line-height: 18.75px; + color: var(--midrash-green); +} .bookPage .currentSection .he, .bookPage .authorStatement .he, .bookPage .sheetMeta .he { @@ -8352,8 +8368,22 @@ a .button:hover { background-color: transparent; overflow: initial; } +.sheetMetaDataBox .summary { + --english-font: var(--english-sans-serif-font-family); + --hebrew-font: var(--hebrew-sans-serif-font-family); + font-size: 16px; + font-weight: 500; + line-height: 18.75px; + text-align: left; + color: #666666; +} .sheetMetaDataBox .title { - display: block; + --english-font: var(--english-sans-serif-font-family); + --hebrew-font: var(--hebrew-sans-serif-font-family); + font-size: 30px; + font-weight: 500; + line-height: 35.16px; + margin-block-end: 15px; } .sheetMetaDataBox .title br { /* hide the line breaks that are stripped before saving */ display: none; @@ -10016,8 +10046,7 @@ span.purim-emoji img{ padding-bottom: 8px; } .sheetMetaDataBox { - margin: 40px auto 0 auto; - text-align: center; + margin-block-end: 40px; } .bookMetaDataBox { margin: 40px auto; diff --git a/static/js/Misc.jsx b/static/js/Misc.jsx index e408603ddf..c6f16eff10 100644 --- a/static/js/Misc.jsx +++ b/static/js/Misc.jsx @@ -2862,7 +2862,7 @@ const CommunityPagePreviewControls = ({date}) => { const SheetTitle = (props) => ( - ( style={{"direction": Sefaria.hebrew.isHebrew(props.title.stripHtml()) ? "rtl" :"ltr"}} > {props.title ? props.title.stripHtmlConvertLineBreaks() : ""} - +
); SheetTitle.propTypes = { title: PropTypes.string, diff --git a/static/js/Sheet.jsx b/static/js/Sheet.jsx index ac48c2415e..bd610142bb 100644 --- a/static/js/Sheet.jsx +++ b/static/js/Sheet.jsx @@ -18,7 +18,7 @@ import { ProfilePic, } from './Misc'; import SheetContent from "./SheetContent"; - +import SheetSidebar from "./SheetSidebar"; class Sheet extends Component { constructor(props) { @@ -106,29 +106,38 @@ class Sheet extends Component { } else { content = ( - +
+ + +
); } return ( @@ -154,7 +163,6 @@ class Sheet extends Component { } } - class OldSheetContent extends Component { componentDidMount() { this.$container = $(ReactDOM.findDOMNode(this).parentNode); diff --git a/static/js/SheetContent.jsx b/static/js/SheetContent.jsx index 3a99a38312..f165df5572 100644 --- a/static/js/SheetContent.jsx +++ b/static/js/SheetContent.jsx @@ -3,10 +3,7 @@ import $ from "./sefaria/sefariaJquery"; import ReactDOM from "react-dom"; import Sefaria from "./sefaria/sefaria"; import { - CollectionStatement, - InterfaceText, - ProfilePic, - FollowButton + InterfaceText, ProfilePic, SheetAuthorStatement, SheetMetaDataBox, SheetTitle } from "./Misc"; import React from "react"; import classNames from "classnames"; @@ -96,8 +93,8 @@ class SheetContent extends Component { } } } - render() { - var sources = this.props.sources.length ? this.props.sources.map(function(source, i) { + getSources() { + const sources = this.props.sources.length ? this.props.sources.map(function(source, i) { const highlightedRef = this.props.highlightedRefsInSheet ? Sefaria.normRefList(this.props.highlightedRefsInSheet) : null; if ("ref" in source) { const highlighted = this.props.highlightedNode ? @@ -191,30 +188,15 @@ class SheetContent extends Component { } }, this) : null; - + return sources; + } + render() { + const sources = this.getSources(); return (
- -1} - /> - - - - {this.props.authorStatement} - -
+
{sources}
@@ -229,6 +211,31 @@ class SheetContent extends Component { } } +const SheetContentMetaDataBox = ({title, summary, authorUrl, authorStatement, authorImage}) => { + return + +
{summary}
+ + + + {authorStatement} + + + +} class SheetSource extends Component { render() { diff --git a/static/js/SheetSidebar.jsx b/static/js/SheetSidebar.jsx new file mode 100644 index 0000000000..5a1bc8dc20 --- /dev/null +++ b/static/js/SheetSidebar.jsx @@ -0,0 +1,28 @@ +import {CollectionStatement, FollowButton, InterfaceText, ProfilePic} from "./Misc"; +import Sefaria from "./sefaria/sefaria"; +import React from "react"; + +const SheetSidebar = ({authorID, authorImage, authorStatement, authorUrl, + collectionImage, collectionSlug, collectionName}) => { + return
+ + + {authorStatement} + + -1} + /> + +
; +} +export default SheetSidebar; \ No newline at end of file From b2b6ef981ed1a4063d683fa72281eab54f7bbda8 Mon Sep 17 00:00:00 2001 From: stevekaplan123 Date: Sun, 1 Sep 2024 11:15:40 +0300 Subject: [PATCH 03/25] chore: create SheetMetaDataBoxSegment --- static/css/s2.css | 17 +++++++++++------ static/js/Misc.jsx | 23 ++++++++++++++++++++--- static/js/SheetContent.jsx | 9 +++++---- 3 files changed, 36 insertions(+), 13 deletions(-) diff --git a/static/css/s2.css b/static/css/s2.css index c4951af1b0..c8c42f69cc 100644 --- a/static/css/s2.css +++ b/static/css/s2.css @@ -3259,13 +3259,17 @@ display: none; width: 33%; } .sheetAuthorName { - --english-font: var(--english-sans-serif-font-family); - --hebrew-font: var(--hebrew-sans-serif-font-family); - font-size: 16px; - font-weight: 600; - line-height: 18.75px; - color: var(--midrash-green); + --english-font: var(--english-sans-serif-font-family); + --hebrew-font: var(--hebrew-sans-serif-font-family); + font-size: 16px; + font-weight: 600; + line-height: 18.75px; + color: var(--midrash-green); +} +.sheetAuthorName:hover { + text-decoration: none; } + .bookPage .currentSection .he, .bookPage .authorStatement .he, .bookPage .sheetMeta .he { @@ -8376,6 +8380,7 @@ a .button:hover { line-height: 18.75px; text-align: left; color: #666666; + margin-block-end: 15px; } .sheetMetaDataBox .title { --english-font: var(--english-sans-serif-font-family); diff --git a/static/js/Misc.jsx b/static/js/Misc.jsx index c6f16eff10..06086f1ad6 100644 --- a/static/js/Misc.jsx +++ b/static/js/Misc.jsx @@ -2862,7 +2862,7 @@ const CommunityPagePreviewControls = ({date}) => { const SheetTitle = (props) => ( -
( style={{"direction": Sefaria.hebrew.isHebrew(props.title.stripHtml()) ? "rtl" :"ltr"}} > {props.title ? props.title.stripHtmlConvertLineBreaks() : ""} -
+ ); SheetTitle.propTypes = { title: PropTypes.string, }; +const SheetMetaDataBoxSegment = (props) => ( +
+ {props.text ? props.text.stripHtmlConvertLineBreaks() : ""} +
+); +SheetMetaDataBoxSegment.propTypes = { + title: PropTypes.string, +}; + const SheetAuthorStatement = (props) => ( -
+
{props.children}
); @@ -3398,6 +3414,7 @@ export { SheetMetaDataBox, SheetAuthorStatement, SheetTitle, + SheetMetaDataBoxSegment, InterfaceLanguageMenu, Autocompleter, DonateLink, diff --git a/static/js/SheetContent.jsx b/static/js/SheetContent.jsx index f165df5572..5e39c7dcad 100644 --- a/static/js/SheetContent.jsx +++ b/static/js/SheetContent.jsx @@ -3,7 +3,8 @@ import $ from "./sefaria/sefariaJquery"; import ReactDOM from "react-dom"; import Sefaria from "./sefaria/sefaria"; import { - InterfaceText, ProfilePic, SheetAuthorStatement, SheetMetaDataBox, SheetTitle + InterfaceText, ProfilePic, SheetAuthorStatement, + SheetMetaDataBox, SheetMetaDataBoxSegment } from "./Misc"; import React from "react"; import classNames from "classnames"; @@ -213,8 +214,8 @@ class SheetContent extends Component { const SheetContentMetaDataBox = ({title, summary, authorUrl, authorStatement, authorImage}) => { return - -
{summary}
+ + @@ -230,7 +231,7 @@ const SheetContentMetaDataBox = ({title, summary, authorUrl, authorStatement, au marginInlineEnd: "10px" }} /> - + {authorStatement} From 37f211d04842a6a16847b84ea987231ce8d9130c Mon Sep 17 00:00:00 2001 From: stevekaplan123 Date: Sun, 1 Sep 2024 13:31:02 +0300 Subject: [PATCH 04/25] chore: num of followers for sheet sidebar --- static/css/s2.css | 8 ++++++++ static/js/SheetSidebar.jsx | 12 +++++++++++- 2 files changed, 19 insertions(+), 1 deletion(-) diff --git a/static/css/s2.css b/static/css/s2.css index c8c42f69cc..0a7fb81aed 100644 --- a/static/css/s2.css +++ b/static/css/s2.css @@ -3252,6 +3252,14 @@ display: none; color: var(--midrash-green); margin-inline-start: 5px; } +.sheetFollowers { + --english-font: var(--english-sans-serif-font-family); + --hebrew-font: var(--hebrew-sans-serif-font-family); + font-size: 16px; + font-weight: 400; + line-height: 18.75px; + text-align: left; +} .sheetViewer { display: flex; } diff --git a/static/js/SheetSidebar.jsx b/static/js/SheetSidebar.jsx index 5a1bc8dc20..1774db34ae 100644 --- a/static/js/SheetSidebar.jsx +++ b/static/js/SheetSidebar.jsx @@ -1,18 +1,28 @@ import {CollectionStatement, FollowButton, InterfaceText, ProfilePic} from "./Misc"; import Sefaria from "./sefaria/sefaria"; -import React from "react"; +import React, {useEffect, useState} from "react"; const SheetSidebar = ({authorID, authorImage, authorStatement, authorUrl, collectionImage, collectionSlug, collectionName}) => { + const [loading, setLoading] = useState(true); + const [followers, setFollowers] = useState(0); + useEffect(() => { + Sefaria.followAPI(authorUrl.replace("/profile/", ""), "followers").then(data => { + setFollowers(data.length); + setLoading(false); + }) + }); return
{authorStatement} + {!loading &&
{followers} followers
} Date: Sun, 1 Sep 2024 13:40:50 +0300 Subject: [PATCH 05/25] chore: fix styling for sheet sidebar --- static/css/s2.css | 1 + static/js/SheetSidebar.jsx | 2 +- 2 files changed, 2 insertions(+), 1 deletion(-) diff --git a/static/css/s2.css b/static/css/s2.css index 0a7fb81aed..b75e375a44 100644 --- a/static/css/s2.css +++ b/static/css/s2.css @@ -3259,6 +3259,7 @@ display: none; font-weight: 400; line-height: 18.75px; text-align: left; + margin-block-end: 20px; } .sheetViewer { display: flex; diff --git a/static/js/SheetSidebar.jsx b/static/js/SheetSidebar.jsx index 1774db34ae..13499180ab 100644 --- a/static/js/SheetSidebar.jsx +++ b/static/js/SheetSidebar.jsx @@ -17,7 +17,7 @@ const SheetSidebar = ({authorID, authorImage, authorStatement, authorUrl, url={authorImage} len={100} name={authorStatement} - outerStyle={{display: "block"}} + outerStyle={{"display": "block", "margin-block-end": "20px"}} /> {authorStatement} From 7054c715342cab30d208275f84ee6497d08e4dde Mon Sep 17 00:00:00 2001 From: stevekaplan123 Date: Sun, 1 Sep 2024 14:20:43 +0300 Subject: [PATCH 06/25] chore: remove CollectionStatement --- static/js/Sheet.jsx | 2 +- static/js/SheetContent.jsx | 2 +- static/js/SheetSidebar.jsx | 9 ++------- 3 files changed, 4 insertions(+), 9 deletions(-) diff --git a/static/js/Sheet.jsx b/static/js/Sheet.jsx index bd610142bb..185e7704b5 100644 --- a/static/js/Sheet.jsx +++ b/static/js/Sheet.jsx @@ -106,7 +106,7 @@ class Sheet extends Component { } else { content = ( -
+
{ return - + {summary && } diff --git a/static/js/SheetSidebar.jsx b/static/js/SheetSidebar.jsx index 13499180ab..5cb471a57e 100644 --- a/static/js/SheetSidebar.jsx +++ b/static/js/SheetSidebar.jsx @@ -1,7 +1,6 @@ -import {CollectionStatement, FollowButton, InterfaceText, ProfilePic} from "./Misc"; +import {FollowButton, InterfaceText, ProfilePic} from "./Misc"; import Sefaria from "./sefaria/sefaria"; import React, {useEffect, useState} from "react"; - const SheetSidebar = ({authorID, authorImage, authorStatement, authorUrl, collectionImage, collectionSlug, collectionName}) => { const [loading, setLoading] = useState(true); @@ -28,11 +27,7 @@ const SheetSidebar = ({authorID, authorImage, authorStatement, authorUrl, uid={authorID} following={Sefaria.following.indexOf(authorID) > -1} /> - + {/**/}
; } export default SheetSidebar; \ No newline at end of file From 6c4d65c3d71698d9643986c10ee3dccf1d56076a Mon Sep 17 00:00:00 2001 From: stevekaplan123 Date: Tue, 3 Sep 2024 12:22:07 +0300 Subject: [PATCH 07/25] chore: remove unused case in handleSheetSegmentClick --- static/js/ReaderPanel.jsx | 6 ------ 1 file changed, 6 deletions(-) diff --git a/static/js/ReaderPanel.jsx b/static/js/ReaderPanel.jsx index 32730d4a41..b80ad0eb28 100644 --- a/static/js/ReaderPanel.jsx +++ b/static/js/ReaderPanel.jsx @@ -144,12 +144,6 @@ class ReaderPanel extends Component { } } handleSheetSegmentClick(source) { - if(source === 0){ - //the click may be coming from the sheet reader controls, and so we need to find - // the first node or the node thats in the url - const sheet = Sefaria.sheets.loadSheetByID(this.state.sheetID); // Should already be loaded and in cache - source = this.state.highlightedNode ? sheet.sources.find(source => source.node === this.state.highlightedNode) : sheet.sources[0]; - } this.conditionalSetState({highlightedNode: source.node}); } handleCitationClick(citationRef, textRef, replace, currVersions) { From d37a9d49e4cead41da4730cc37d0376f75355951 Mon Sep 17 00:00:00 2001 From: stevekaplan123 Date: Sun, 8 Sep 2024 10:52:37 +0300 Subject: [PATCH 08/25] chore: SheetContent displays public collections and summary --- static/js/Sheet.jsx | 2 ++ static/js/SheetSidebar.jsx | 18 +++++++++++++++--- 2 files changed, 17 insertions(+), 3 deletions(-) diff --git a/static/js/Sheet.jsx b/static/js/Sheet.jsx index 185e7704b5..0ecb0d4980 100644 --- a/static/js/Sheet.jsx +++ b/static/js/Sheet.jsx @@ -136,6 +136,8 @@ class Sheet extends Component { collectionName={sheet.collectionName} collectionSlug={sheet.displayedCollection} collectionImage={sheet.collectionImage} + collections={sheet.collections} + summary={sheet.summary} />
); diff --git a/static/js/SheetSidebar.jsx b/static/js/SheetSidebar.jsx index 5cb471a57e..43a2fcc05f 100644 --- a/static/js/SheetSidebar.jsx +++ b/static/js/SheetSidebar.jsx @@ -1,8 +1,8 @@ import {FollowButton, InterfaceText, ProfilePic} from "./Misc"; import Sefaria from "./sefaria/sefaria"; import React, {useEffect, useState} from "react"; -const SheetSidebar = ({authorID, authorImage, authorStatement, authorUrl, - collectionImage, collectionSlug, collectionName}) => { +const SheetSidebar = ({authorID, authorImage, authorStatement, authorUrl, summary, + collectionImage, collectionSlug, collectionName, collections}) => { const [loading, setLoading] = useState(true); const [followers, setFollowers] = useState(0); useEffect(() => { @@ -21,12 +21,24 @@ const SheetSidebar = ({authorID, authorImage, authorStatement, authorUrl, {authorStatement} - {!loading &&
{followers} followers
} +
{summary}
+ {!loading &&
{followers} {Sefaria._("followers")}
} -1} /> + {collections.length > 0 && +
+

Public Collections

+
+ +
+
} {/**/}
; } From 4c44caaa1a94fdf2b9dadd4561ec4a2cfce788c8 Mon Sep 17 00:00:00 2001 From: stevekaplan123 Date: Sun, 8 Sep 2024 11:40:35 +0300 Subject: [PATCH 09/25] chore: Sheet Sidebar css fixes --- static/css/s2.css | 20 +++++++++--- static/js/SheetSidebar.jsx | 64 ++++++++++++++++++++------------------ 2 files changed, 48 insertions(+), 36 deletions(-) diff --git a/static/css/s2.css b/static/css/s2.css index 8be0b07ecc..33761a6b29 100644 --- a/static/css/s2.css +++ b/static/css/s2.css @@ -3258,7 +3258,15 @@ display: none; font-size: 16px; font-weight: 400; line-height: 18.75px; - text-align: left; + margin-block-end: 20px; + color: #666666; +} +.sheetSidebar .summary { + --english-font: var(--english-sans-serif-font-family); + --hebrew-font: var(--hebrew-sans-serif-font-family); + font-size: 14px; + font-weight: 400; + line-height: 18px; margin-block-end: 20px; } .sheetViewer { @@ -3274,6 +3282,8 @@ display: none; font-weight: 600; line-height: 18.75px; color: var(--midrash-green); + display: block; + margin-block-end: 10px; } .sheetAuthorName:hover { text-decoration: none; @@ -9090,12 +9100,12 @@ h3.aboutSheetHeader { border: 1px solid var(--light-grey); } -.aboutSheetPanel div.description { - color: var(--dark-grey); +.sheetSidebar div.description { --english-font: var(--english-sans-serif-font-family); --hebrew-font: var(--hebrew-sans-serif-font-family); - font-size: var(--sans-serif-body-font-size); - margin: 20px 0px; + font-size: 14px; + font-weight: 400; + line-height: 18px; } .aboutSheetPanel h2 { diff --git a/static/js/SheetSidebar.jsx b/static/js/SheetSidebar.jsx index 43a2fcc05f..dd3aec0092 100644 --- a/static/js/SheetSidebar.jsx +++ b/static/js/SheetSidebar.jsx @@ -3,43 +3,45 @@ import Sefaria from "./sefaria/sefaria"; import React, {useEffect, useState} from "react"; const SheetSidebar = ({authorID, authorImage, authorStatement, authorUrl, summary, collectionImage, collectionSlug, collectionName, collections}) => { - const [loading, setLoading] = useState(true); + const [loadingFollowers, setLoadingFollowers] = useState(true); const [followers, setFollowers] = useState(0); useEffect(() => { Sefaria.followAPI(authorUrl.replace("/profile/", ""), "followers").then(data => { setFollowers(data.length); - setLoading(false); + setLoadingFollowers(false); }) }); return
- - - {authorStatement} - -
{summary}
- {!loading &&
{followers} {Sefaria._("followers")}
} - -1} - /> - {collections.length > 0 && -
-

Public Collections

-
- -
-
} - {/**/} -
; + + + {Sefaria._(authorStatement)} + + {!loadingFollowers &&
{followers} {Sefaria._("followers")}
} +
{summary}
+ -1} + /> + {collections.length > 0 && +
+

Part of Collections

+
+ +
+
} + {/**/} +
; } export default SheetSidebar; \ No newline at end of file From 5ed16e044b72b1438c0f59522376b3690b165e2d Mon Sep 17 00:00:00 2001 From: stevekaplan123 Date: Thu, 12 Sep 2024 15:01:34 +0300 Subject: [PATCH 10/25] chore: reorganize css for sheetmetadatabox --- static/css/s2.css | 55 +++++++++++++++++++++++------------------------ 1 file changed, 27 insertions(+), 28 deletions(-) diff --git a/static/css/s2.css b/static/css/s2.css index 7f0e6e0a04..35490f315c 100644 --- a/static/css/s2.css +++ b/static/css/s2.css @@ -3268,27 +3268,6 @@ a.cardTitle:hover { flex-direction: row; justify-content: space-between; } -.bookPage .currentSection, -.bookPage .authorStatement, -.sheetContent .sheetMetaDataBox .authorStatement, -.sheetContent .sheetMetaDataBox .collectionStatement { - font-size: 17px; - color: #999; - margin-top: 6px; - letter-spacing: 1px; -} -.sheetContent .sheetMetaDataBox .authorStatement, -.sheetContent .sheetMetaDataBox .collectionStatement { - margin-top: 16px; -} -.sheetContent .sheetMetaDataBox .collectionStatement a { - color: #999; - margin-inline-start: 5px; -} -.sheetContent .sheetMetaDataBox .authorStatement a { - color: var(--midrash-green); - margin-inline-start: 5px; -} .sheetFollowers { --english-font: var(--english-sans-serif-font-family); --hebrew-font: var(--hebrew-sans-serif-font-family); @@ -8423,11 +8402,37 @@ a .button:hover { overflow: hidden; flex-shrink: 0; } -.sheetMetaDataBox .collectionListingImageBox, .tocTop .collectionListingImageBox { background-color: transparent; overflow: initial; } +.interface-hebrew .sheetMetaDataBox .authorStatement { + direction: rtl; +} +.sheetMetaDataBox { + margin-block-end: 40px; +} +.bookPage .currentSection, +.bookPage .authorStatement, +.sheetContent .sheetMetaDataBox .authorStatement, +.sheetContent .sheetMetaDataBox .collectionStatement { + font-size: 17px; + color: #999; + margin-top: 6px; + letter-spacing: 1px; +} +.sheetContent .sheetMetaDataBox .authorStatement, +.sheetContent .sheetMetaDataBox .collectionStatement { + margin-top: 16px; +} +.sheetContent .sheetMetaDataBox .collectionStatement a { + color: #999; + margin-inline-start: 5px; +} +.sheetContent .sheetMetaDataBox .authorStatement a { + color: var(--midrash-green); + margin-inline-start: 5px; +} .sheetMetaDataBox .summary { --english-font: var(--english-sans-serif-font-family); --hebrew-font: var(--hebrew-sans-serif-font-family); @@ -8702,9 +8707,6 @@ body.interface-english .publishBox .react-tags__suggestions ul { opacity: 0.5; cursor: auto; } -.interface-hebrew .sheetMetaDataBox .authorStatement { - direction: rtl; -} .editorSidebarToggle { position: fixed; top: 150px; @@ -10106,9 +10108,6 @@ span.purim-emoji img{ margin-bottom: 0; padding-bottom: 8px; } -.sheetMetaDataBox { - margin-block-end: 40px; -} .bookMetaDataBox { margin: 40px auto; text-align: center; From 3f28204442463df9f7029b79dd7dac7c49c1a37f Mon Sep 17 00:00:00 2001 From: stevekaplan123 Date: Wed, 18 Sep 2024 11:07:50 +0300 Subject: [PATCH 11/25] chore: profile-pic for sheets sidebar should have own class and not set outerStyle in JS --- static/css/s2.css | 17 +++++++++++++---- static/js/Sheet.jsx | 3 --- static/js/SheetSidebar.jsx | 4 +--- 3 files changed, 14 insertions(+), 10 deletions(-) diff --git a/static/css/s2.css b/static/css/s2.css index 35490f315c..af4e19c026 100644 --- a/static/css/s2.css +++ b/static/css/s2.css @@ -3285,12 +3285,19 @@ a.cardTitle:hover { line-height: 18px; margin-block-end: 20px; } +.sheetSidebar .profile-pic { + display: block; + margin-block-end: 20px; + margin-block-start: 25px; + margin-inline-start: -5px; +} .sheetViewer { display: flex; } .sheetSidebar { width: 33%; } + .sheetAuthorName { --english-font: var(--english-sans-serif-font-family); --hebrew-font: var(--hebrew-sans-serif-font-family); @@ -3299,7 +3306,7 @@ a.cardTitle:hover { line-height: 18.75px; color: var(--midrash-green); display: block; - margin-block-end: 10px; + margin-block-end: 5px; } .sheetAuthorName:hover { text-decoration: none; @@ -9096,9 +9103,11 @@ body.interface-english .publishBox .react-tags__suggestions ul { ul.aboutSheetLinks { list-style-type: none; padding-inline-start: 0; - --english-font: var(--english-serif-font-family); - --hebrew-font: var(--hebrew-serif-font-family); - font-size: var(--serif-body-font-size); + --english-font: var(--english-sans-serif-font-family); + --hebrew-font: var(--hebrew-sans-serif-font-family); + font-size: 16px; + font-weight: 400; + line-height: 18.75px; } h3.aboutSheetHeader { diff --git a/static/js/Sheet.jsx b/static/js/Sheet.jsx index d0129e7844..33cfd1d746 100644 --- a/static/js/Sheet.jsx +++ b/static/js/Sheet.jsx @@ -133,9 +133,6 @@ class Sheet extends Component { authorID={sheet.owner} authorUrl={sheet.ownerProfileUrl} authorImage={sheet.ownerImageUrl} - collectionName={sheet.collectionName} - collectionSlug={sheet.displayedCollection} - collectionImage={sheet.collectionImage} collections={sheet.collections} summary={sheet.summary} /> diff --git a/static/js/SheetSidebar.jsx b/static/js/SheetSidebar.jsx index dd3aec0092..2a0265216f 100644 --- a/static/js/SheetSidebar.jsx +++ b/static/js/SheetSidebar.jsx @@ -1,8 +1,7 @@ import {FollowButton, InterfaceText, ProfilePic} from "./Misc"; import Sefaria from "./sefaria/sefaria"; import React, {useEffect, useState} from "react"; -const SheetSidebar = ({authorID, authorImage, authorStatement, authorUrl, summary, - collectionImage, collectionSlug, collectionName, collections}) => { +const SheetSidebar = ({authorID, authorImage, authorStatement, authorUrl, summary, collections}) => { const [loadingFollowers, setLoadingFollowers] = useState(true); const [followers, setFollowers] = useState(0); useEffect(() => { @@ -16,7 +15,6 @@ const SheetSidebar = ({authorID, authorImage, authorStatement, authorUrl, summar url={authorImage} len={100} name={authorStatement} - outerStyle={{"display": "block", "margin-block-end": "20px"}} /> {Sefaria._(authorStatement)} From f503d909c046e0f7cf42ca7b377c47c68df474b5 Mon Sep 17 00:00:00 2001 From: stevekaplan123 Date: Thu, 19 Sep 2024 08:52:16 +0300 Subject: [PATCH 12/25] chore: deal with sheetAuthorName for sidebar --- static/css/s2.css | 22 +++++----------------- 1 file changed, 5 insertions(+), 17 deletions(-) diff --git a/static/css/s2.css b/static/css/s2.css index 056f831863..26b6cab0d5 100644 --- a/static/css/s2.css +++ b/static/css/s2.css @@ -3296,20 +3296,6 @@ a.cardTitle:hover { .sheetSidebar { width: 33%; } - -.sheetAuthorName { - --english-font: var(--english-sans-serif-font-family); - --hebrew-font: var(--hebrew-sans-serif-font-family); - font-size: 16px; - font-weight: 600; - line-height: 18.75px; - color: var(--midrash-green); - display: block; - margin-block-end: 5px; -} -.sheetAuthorName:hover { - text-decoration: none; -} .bookPage .currentSection, .bookPage .authorStatement { font-size: 17px; @@ -8431,9 +8417,8 @@ a .button:hover { .sheetMetaDataBox { margin-block-end: 40px; } -.sheetContent .sheetMetaDataBox a.sheetAuthorName { +a.sheetAuthorName { color: var(--midrash-green); - margin-inline-start: 5px; --english-font: var(--english-sans-serif-font-family); --hebrew-font: var(--hebrew-sans-serif-font-family); font-size: 16px; @@ -8442,9 +8427,12 @@ a .button:hover { display: inline; margin-block-end: 10px; } -.sheetContent .sheetMetaDataBox a.sheetAuthorName:hover { +a.sheetAuthorName:hover { text-decoration: none; } +.sheetSidebar a.sheetAuthorName { + display: block; +} .sheetMetaDataBox .summary { --english-font: var(--english-sans-serif-font-family); --hebrew-font: var(--hebrew-sans-serif-font-family); From ba2110cf514e55f8e5163b1f4efc107b707a97b8 Mon Sep 17 00:00:00 2001 From: stevekaplan123 Date: Thu, 19 Sep 2024 09:11:53 +0300 Subject: [PATCH 13/25] chore: update profile pic position --- static/css/s2.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/static/css/s2.css b/static/css/s2.css index 26b6cab0d5..ea2e2fcfa2 100644 --- a/static/css/s2.css +++ b/static/css/s2.css @@ -3287,7 +3287,7 @@ a.cardTitle:hover { .sheetSidebar .profile-pic { display: block; margin-block-end: 20px; - margin-block-start: 25px; + margin-block-start: 30px; margin-inline-start: -5px; } .sheetViewer { From a0126765fd51e33c0e37e1308beabd07f5d81346 Mon Sep 17 00:00:00 2001 From: stevekaplan123 Date: Mon, 23 Sep 2024 13:21:56 +0300 Subject: [PATCH 14/25] chore: fix imports --- static/js/Sheet.jsx | 2 +- static/js/{ => sheets}/SheetSidebar.jsx | 4 ++-- 2 files changed, 3 insertions(+), 3 deletions(-) rename static/js/{ => sheets}/SheetSidebar.jsx (94%) diff --git a/static/js/Sheet.jsx b/static/js/Sheet.jsx index d380b6db37..7d8cba24cf 100644 --- a/static/js/Sheet.jsx +++ b/static/js/Sheet.jsx @@ -11,7 +11,7 @@ import { InterfaceText, LoadingMessage, } from './Misc'; -import SheetSidebar from "../sheets/SheetSidebar"; +import SheetSidebar from "./sheets/SheetSidebar"; import SheetContent from "./sheets/SheetContent"; class Sheet extends Component { diff --git a/static/js/SheetSidebar.jsx b/static/js/sheets/SheetSidebar.jsx similarity index 94% rename from static/js/SheetSidebar.jsx rename to static/js/sheets/SheetSidebar.jsx index 2a0265216f..b30b3eae64 100644 --- a/static/js/SheetSidebar.jsx +++ b/static/js/sheets/SheetSidebar.jsx @@ -1,5 +1,5 @@ -import {FollowButton, InterfaceText, ProfilePic} from "./Misc"; -import Sefaria from "./sefaria/sefaria"; +import {FollowButton, InterfaceText, ProfilePic} from "../Misc"; +import Sefaria from "../sefaria/sefaria"; import React, {useEffect, useState} from "react"; const SheetSidebar = ({authorID, authorImage, authorStatement, authorUrl, summary, collections}) => { const [loadingFollowers, setLoadingFollowers] = useState(true); From 2ca531f4e98824d88e61eb25933eb27efc07cea9 Mon Sep 17 00:00:00 2001 From: stevekaplan123 Date: Mon, 30 Sep 2024 10:45:31 +0300 Subject: [PATCH 15/25] chore: use ProfileSummary in SheetSIdebar --- static/css/s2.css | 18 +-- static/js/ReaderApp.jsx | 1 + static/js/ReaderPanel.jsx | 2 +- static/js/UserProfile.jsx | 218 ++++++++++++++++-------------- static/js/sheets/SheetSidebar.jsx | 19 +-- 5 files changed, 126 insertions(+), 132 deletions(-) diff --git a/static/css/s2.css b/static/css/s2.css index ea2e2fcfa2..1fab278cc8 100644 --- a/static/css/s2.css +++ b/static/css/s2.css @@ -3267,23 +3267,7 @@ a.cardTitle:hover { flex-direction: row; justify-content: space-between; } -.sheetFollowers { - --english-font: var(--english-sans-serif-font-family); - --hebrew-font: var(--hebrew-sans-serif-font-family); - font-size: 16px; - font-weight: 400; - line-height: 18.75px; - margin-block-end: 20px; - color: #666666; -} -.sheetSidebar .summary { - --english-font: var(--english-sans-serif-font-family); - --hebrew-font: var(--hebrew-sans-serif-font-family); - font-size: 14px; - font-weight: 400; - line-height: 18px; - margin-block-end: 20px; -} + .sheetSidebar .profile-pic { display: block; margin-block-end: 20px; diff --git a/static/js/ReaderApp.jsx b/static/js/ReaderApp.jsx index f86da795a9..5a808a0316 100644 --- a/static/js/ReaderApp.jsx +++ b/static/js/ReaderApp.jsx @@ -1749,6 +1749,7 @@ toggleSignUpModal(modalContentKind = SignUpModalKind.Default) { } openProfile(slug, tab) { tab = tab || "sheets"; + console.log('slug', slug); Sefaria.profileAPI(slug).then(profile => { this.setSinglePanelState({ menuOpen: "profile", profile, tab: tab}); }); diff --git a/static/js/ReaderPanel.jsx b/static/js/ReaderPanel.jsx index ec47ff1b36..3a52ea61b7 100644 --- a/static/js/ReaderPanel.jsx +++ b/static/js/ReaderPanel.jsx @@ -24,7 +24,7 @@ import TopicsPage from './TopicsPage'; import CollectionPage from "./CollectionPage" import { NotificationsPanel } from './NotificationsPanel'; import UserHistoryPanel from './UserHistoryPanel'; -import UserProfile from './UserProfile'; +import {UserProfile} from './UserProfile'; import CommunityPage from './CommunityPage'; import CalendarsPage from './CalendarsPage' import UserStats from './UserStats'; diff --git a/static/js/UserProfile.jsx b/static/js/UserProfile.jsx index 424acacd51..6a4f815fe8 100644 --- a/static/js/UserProfile.jsx +++ b/static/js/UserProfile.jsx @@ -348,7 +348,6 @@ class UserProfile extends Component {
{ } -const ProfileSummary = ({ profile:p, follow, openFollowers, openFollowing, toggleSignUpModal }) => { - // collect info about this profile in `infoList` - const social = ['facebook', 'twitter', 'youtube', 'linkedin']; - let infoList = []; - if (p.location) { infoList.push(p.location); } - infoList = infoList.concat(p.jewish_education); - if (p.website) { - infoList.push(Website); - } - const socialList = social.filter(s => !!p[s]); - if (socialList.length) { - infoList = infoList.concat( - // we only store twitter handles so twitter needs to be hardcoded - +const ProfileSummary = ({ profile:p, openFollowers, openFollowing, toggleSignUpModal, showFollowersAndFollowing=true }) => { + const getFollowComponent = () => { + if (showFollowersAndFollowing) { + return ; + } else { + return
+ {String(p.followers.length)}  + followers +
; + } + + // collect info about this profile in `infoList` + const social = ['facebook', 'twitter', 'youtube', 'linkedin']; + let infoList = []; + if (p.location) { + infoList.push(p.location); + } + infoList = infoList.concat(p.jewish_education); + if (p.website) { + infoList.push(Website); + } + const socialList = social.filter(s => !!p[s]); + if (socialList.length) { + infoList = infoList.concat( + // we only store twitter handles so twitter needs to be hardcoded + { - socialList.map(s => ()) + socialList.map(s => ()) } - ); - } - return ( -
-
-
- {p.full_name} - {p.full_name} -
- { p.position || p.organization ? -
- {p.position} - { p.position && p.organization ? { Sefaria._(" at ") } : null } - {p.organization} -
: null - } - { infoList.length ? -
- { - infoList.map((i, ii) => ( - - { ii !== 0 ? '\u2022' : null } - {i} + ); + } + const followComponent = getFollowComponent(); + return ( +
+
+
+ {p.full_name} + {p.full_name} +
+ {p.position || p.organization ? +
+ {p.position} + {p.position && p.organization ? {Sefaria._(" at ")} : null} + {p.organization} +
: null + } + {infoList.length ? +
+ { + infoList.map((i, ii) => ( + + {ii !== 0 ? '\u2022' : null} + {i} - )) - } -
: null - } - { - Sefaria._uid === p.id ? ( - ) : ( -
- -1} - toggleSignUpModal={toggleSignUpModal} - /> -
) - } - -
-
- -
-
- ); -}; -ProfileSummary.propTypes = { - profile: PropTypes.object.isRequired, - follow: PropTypes.func.isRequired, - openFollowers: PropTypes.func.isRequired, - openFollowing: PropTypes.func.isRequired, - toggleSignUpModal: PropTypes.func.isRequired, -}; - + )) + } +
: null + } + { + Sefaria._uid === p.id ? ( + ) : ( +
+ -1} + toggleSignUpModal={toggleSignUpModal} + /> +
) + } + {followComponent} +
+
+ +
+
+ ); + }; + ProfileSummary.propTypes = { + profile: PropTypes.object.isRequired, + openFollowers: PropTypes.func, + openFollowing: PropTypes.func, + showFollowersAndFollowing: PropTypes.bool, + toggleSignUpModal: PropTypes.func.isRequired, + }; +} -export default UserProfile; \ No newline at end of file +export {UserProfile, ProfileSummary}; diff --git a/static/js/sheets/SheetSidebar.jsx b/static/js/sheets/SheetSidebar.jsx index b30b3eae64..96727c0d76 100644 --- a/static/js/sheets/SheetSidebar.jsx +++ b/static/js/sheets/SheetSidebar.jsx @@ -1,13 +1,14 @@ import {FollowButton, InterfaceText, ProfilePic} from "../Misc"; import Sefaria from "../sefaria/sefaria"; import React, {useEffect, useState} from "react"; +import {ProfileSummary} from "../UserProfile"; const SheetSidebar = ({authorID, authorImage, authorStatement, authorUrl, summary, collections}) => { - const [loadingFollowers, setLoadingFollowers] = useState(true); - const [followers, setFollowers] = useState(0); + const [loading, setLoading] = useState(true); + const [profile, setProfile] = useState(null); useEffect(() => { - Sefaria.followAPI(authorUrl.replace("/profile/", ""), "followers").then(data => { - setFollowers(data.length); - setLoadingFollowers(false); + Sefaria.profileAPI(authorUrl.replace("/profile/", "")).then(profile => { + setProfile(profile); + setLoading(false); }) }); return
@@ -19,13 +20,7 @@ const SheetSidebar = ({authorID, authorImage, authorStatement, authorUrl, summar {Sefaria._(authorStatement)} - {!loadingFollowers &&
{followers} {Sefaria._("followers")}
} -
{summary}
- -1} - /> + {!loading && } {collections.length > 0 &&

Part of Collections

From 737feef0b60ca32ef5f83c527d15eb076d11357f Mon Sep 17 00:00:00 2001 From: stevekaplan123 Date: Mon, 30 Sep 2024 14:27:56 +0300 Subject: [PATCH 16/25] chore: start refactoring ProfileSummary --- static/js/ReaderPanel.jsx | 1 + static/js/Sheet.jsx | 3 +- static/js/UserProfile.jsx | 46 +++++++++++++++---------------- static/js/sheets/SheetSidebar.jsx | 2 +- 4 files changed, 26 insertions(+), 26 deletions(-) diff --git a/static/js/ReaderPanel.jsx b/static/js/ReaderPanel.jsx index 3a52ea61b7..f54561f424 100644 --- a/static/js/ReaderPanel.jsx +++ b/static/js/ReaderPanel.jsx @@ -676,6 +676,7 @@ class ReaderPanel extends Component { setDivineNameReplacement={this.props.setDivineNameReplacement} divineNameReplacement={this.props.divineNameReplacement} hasSidebar={this.props.hasSidebar} + toggleSideUpModal={this.props.toggleSignUpModal} /> ); } diff --git a/static/js/Sheet.jsx b/static/js/Sheet.jsx index 7d8cba24cf..ad3859575b 100644 --- a/static/js/Sheet.jsx +++ b/static/js/Sheet.jsx @@ -124,11 +124,10 @@ class Sheet extends Component { />
); diff --git a/static/js/UserProfile.jsx b/static/js/UserProfile.jsx index 6a4f815fe8..45cba5eaab 100644 --- a/static/js/UserProfile.jsx +++ b/static/js/UserProfile.jsx @@ -556,22 +556,23 @@ const EditorToggleHeader = ({usesneweditor}) => { const ProfileSummary = ({ profile:p, openFollowers, openFollowing, toggleSignUpModal, showFollowersAndFollowing=true }) => { const getFollowComponent = () => { if (showFollowersAndFollowing) { - return ; - } else { - return ; + } else { + return
+ {String(p.followers.length)}  + followers +
; + } } // collect info about this profile in `infoList` @@ -663,14 +664,13 @@ const ProfileSummary = ({ profile:p, openFollowers, openFollowing, toggleSignUpM
); - }; - ProfileSummary.propTypes = { - profile: PropTypes.object.isRequired, - openFollowers: PropTypes.func, - openFollowing: PropTypes.func, - showFollowersAndFollowing: PropTypes.bool, - toggleSignUpModal: PropTypes.func.isRequired, - }; -} +}; +ProfileSummary.propTypes = { + profile: PropTypes.object.isRequired, + openFollowers: PropTypes.func, + openFollowing: PropTypes.func, + showFollowersAndFollowing: PropTypes.bool, + toggleSignUpModal: PropTypes.func.isRequired, +}; export {UserProfile, ProfileSummary}; diff --git a/static/js/sheets/SheetSidebar.jsx b/static/js/sheets/SheetSidebar.jsx index 96727c0d76..3cf4573d20 100644 --- a/static/js/sheets/SheetSidebar.jsx +++ b/static/js/sheets/SheetSidebar.jsx @@ -2,7 +2,7 @@ import {FollowButton, InterfaceText, ProfilePic} from "../Misc"; import Sefaria from "../sefaria/sefaria"; import React, {useEffect, useState} from "react"; import {ProfileSummary} from "../UserProfile"; -const SheetSidebar = ({authorID, authorImage, authorStatement, authorUrl, summary, collections}) => { +const SheetSidebar = ({authorImage, authorStatement, authorUrl, toggleSignUpModal, collections}) => { const [loading, setLoading] = useState(true); const [profile, setProfile] = useState(null); useEffect(() => { From adc796d7aeada07dbe574d01f2c437811701f6f2 Mon Sep 17 00:00:00 2001 From: stevekaplan123 Date: Tue, 1 Oct 2024 10:42:00 +0300 Subject: [PATCH 17/25] chore: refactor UserProfile to use new component ProfileBio --- static/css/s2.css | 36 ++++-- static/js/UserProfile.jsx | 177 ++++++++++++++---------------- static/js/sheets/SheetSidebar.jsx | 67 +++++++---- 3 files changed, 156 insertions(+), 124 deletions(-) diff --git a/static/css/s2.css b/static/css/s2.css index 1fab278cc8..7478420fc2 100644 --- a/static/css/s2.css +++ b/static/css/s2.css @@ -3274,6 +3274,15 @@ a.cardTitle:hover { margin-block-start: 30px; margin-inline-start: -5px; } +.sheetSidebar .profileFollowers { + --english-font: var(--english-sans-serif-font-family); + --hebrew-font: var(--hebrew-sans-serif-font-family); + font-size: 16px; + font-weight: 400; + line-height: 18.75px; + margin-block-end: 20px; + color: #666666; +} .sheetViewer { display: flex; } @@ -11196,11 +11205,22 @@ cursor: pointer; opacity: 0.6; cursor:pointer; } -.profile-page .social-icon img { +.profile-page .social-icon img, .sheetSidebar .social-icon img { width: 13px; height: 13px; opacity: 0.4; } +.sheetSidebar .title.sub-title, .sheetSidebar .title.sub-sub-title { + --english-font: var(--english-sans-serif-font-family); + --hebrew-font: var(--hebrew-sans-serif-font-family); + font-size: 14px; + font-weight: 400; + line-height: 18px; + margin-block-end: 10px; +} +.sheetSidebar .title.sub-sub-title { + margin-block-end: 20px; +} .profile-page .social-icon + .social-icon { padding: 0 5px; } @@ -11480,19 +11500,19 @@ cursor: pointer; .profile-page .profile-summary .summary-column.end { flex-grow: 1; } -.profile-page .profile-summary .small-margin { +.profile-summary .small-margin { margin: 0 4px; } -.profile-page .profile-summary .sub-sub-title > .small-margin:first-child, -.profile-page .profile-summary .sub-sub-title > span:first-child .small-margin { +.profile-summary .sub-sub-title > .small-margin:first-child, +.profile-summary .sub-sub-title > span:first-child .small-margin { margin: 0 4px 0 0; } -.profile-page .profile-summary .sub-sub-title > .small-margin:last-child, -.profile-page .profile-summary .sub-sub-title > span:last-child .small-margin { +.profile-summary .sub-sub-title > .small-margin:last-child, +.profile-summary .sub-sub-title > span:last-child .small-margin { margin: 0 0 0 4px; } -.interface-hebrew .profile-page .profile-summary .sub-sub-title > .small-margin:last-child, -.interface-hebrew .profile-page .profile-summary .sub-sub-title > span:last-child .small-margin { +.interface-hebrew .profile-summary .sub-sub-title > .small-margin:last-child, +.interface-hebrew .profile-summary .sub-sub-title > span:last-child .small-margin { margin: 0 4px 0 0; } .profile-page .aboutText { diff --git a/static/js/UserProfile.jsx b/static/js/UserProfile.jsx index 45cba5eaab..30c674b94d 100644 --- a/static/js/UserProfile.jsx +++ b/static/js/UserProfile.jsx @@ -552,30 +552,8 @@ const EditorToggleHeader = ({usesneweditor}) => { ) } - -const ProfileSummary = ({ profile:p, openFollowers, openFollowing, toggleSignUpModal, showFollowersAndFollowing=true }) => { - const getFollowComponent = () => { - if (showFollowersAndFollowing) { - return ; - } else { - return
- {String(p.followers.length)}  - followers -
; - } - } - - // collect info about this profile in `infoList` +const ProfileBio = ({profile: p}) => { + // used in ProfileSummary and in SheetSidebar, renders user education, organization, and location info const social = ['facebook', 'twitter', 'youtube', 'linkedin']; let infoList = []; if (p.location) { @@ -598,79 +576,94 @@ const ProfileSummary = ({ profile:p, openFollowers, openFollowing, toggleSignUpM ); } - const followComponent = getFollowComponent(); + const subTitle =
+ {p.position} + {p.position && p.organization ? {Sefaria._(" at ")} : null} + {p.organization} +
; + const infoListComponent =
+ { + infoList.map((i, ii) => ( + + {ii !== 0 && '\u2022'} + {i} + + )) + } +
; + + return <>{(p.position || p.organization) && subTitle} + {infoList.length && infoListComponent} + ; +} +const ProfileSummary = ({ + profile: p, + openFollowers, + openFollowing, + toggleSignUpModal, + }) => { + const followInfo = ; + const profileButtons = Sefaria._uid === p.id ? ( + ) : ( +
+ -1} + toggleSignUpModal={toggleSignUpModal} + /> +
); + const profileName =
+ {p.full_name} + {p.full_name} +
; return ( -
-
-
- {p.full_name} - {p.full_name} -
- {p.position || p.organization ? -
- {p.position} - {p.position && p.organization ? {Sefaria._(" at ")} : null} - {p.organization} -
: null - } - {infoList.length ? -
- { - infoList.map((i, ii) => ( - - {ii !== 0 ? '\u2022' : null} - {i} - - )) - } -
: null - } - { - Sefaria._uid === p.id ? ( - ) : ( -
- -1} - toggleSignUpModal={toggleSignUpModal} - /> -
) - } - {followComponent} -
-
- -
-
- ); +
+
+ {profileName} + + {profileButtons} + {followInfo} +
+ +
+ ); }; ProfileSummary.propTypes = { - profile: PropTypes.object.isRequired, + profile: PropTypes.object.isRequired, openFollowers: PropTypes.func, openFollowing: PropTypes.func, - showFollowersAndFollowing: PropTypes.bool, toggleSignUpModal: PropTypes.func.isRequired, }; -export {UserProfile, ProfileSummary}; +export {UserProfile, ProfileBio}; diff --git a/static/js/sheets/SheetSidebar.jsx b/static/js/sheets/SheetSidebar.jsx index 3cf4573d20..518c92533a 100644 --- a/static/js/sheets/SheetSidebar.jsx +++ b/static/js/sheets/SheetSidebar.jsx @@ -1,7 +1,7 @@ import {FollowButton, InterfaceText, ProfilePic} from "../Misc"; import Sefaria from "../sefaria/sefaria"; import React, {useEffect, useState} from "react"; -import {ProfileSummary} from "../UserProfile"; +import {ProfileBio} from "../UserProfile"; const SheetSidebar = ({authorImage, authorStatement, authorUrl, toggleSignUpModal, collections}) => { const [loading, setLoading] = useState(true); const [profile, setProfile] = useState(null); @@ -11,30 +11,49 @@ const SheetSidebar = ({authorImage, authorStatement, authorUrl, toggleSignUpModa setLoading(false); }) }); + const authorName = + {Sefaria._(authorStatement)} + ; return
- - - {Sefaria._(authorStatement)} - - {!loading && } - {collections.length > 0 && -
-

Part of Collections

-
- -
-
} - {/**/} + + {authorName} + {!loading && } + {}
; } + +const SheetProfileInfo = ({profile}) => { + const profileFollowers =
+ {String(profile.followers.length)}  + followers +
; + return + {profileFollowers} + + {Sefaria._uid !== profile.id && -1}/> + } + ; +} +const PartOfCollections = ({collections}) => { + return collections.length > 0 && +
+

Part of Collections

+
+ +
+
; +} export default SheetSidebar; \ No newline at end of file From b7a24e29e26f301310ec5234a0eeb2d83a0e63de Mon Sep 17 00:00:00 2001 From: stevekaplan123 Date: Tue, 1 Oct 2024 13:58:34 +0300 Subject: [PATCH 18/25] chore: rename SheetSidebar to SheetContentSidebar --- static/css/s2.css | 22 +++++++--------------- static/js/Sheet.jsx | 4 ++-- static/js/sheets/SheetSidebar.jsx | 6 +++--- 3 files changed, 12 insertions(+), 20 deletions(-) diff --git a/static/css/s2.css b/static/css/s2.css index 7478420fc2..3b3a5d908b 100644 --- a/static/css/s2.css +++ b/static/css/s2.css @@ -3268,13 +3268,13 @@ a.cardTitle:hover { justify-content: space-between; } -.sheetSidebar .profile-pic { +.sheetContentSidebar .profile-pic { display: block; margin-block-end: 20px; margin-block-start: 30px; margin-inline-start: -5px; } -.sheetSidebar .profileFollowers { +.sheetContentSidebar .profileFollowers { --english-font: var(--english-sans-serif-font-family); --hebrew-font: var(--hebrew-sans-serif-font-family); font-size: 16px; @@ -3286,7 +3286,7 @@ a.cardTitle:hover { .sheetViewer { display: flex; } -.sheetSidebar { +.sheetContentSidebar { width: 33%; } .bookPage .currentSection, @@ -8423,7 +8423,7 @@ a.sheetAuthorName { a.sheetAuthorName:hover { text-decoration: none; } -.sheetSidebar a.sheetAuthorName { +.sheetContentSidebar a.sheetAuthorName { display: block; } .sheetMetaDataBox .summary { @@ -9119,14 +9119,6 @@ h3.aboutSheetHeader { border: 1px solid var(--light-grey); } -.sheetSidebar div.description { - --english-font: var(--english-sans-serif-font-family); - --hebrew-font: var(--hebrew-sans-serif-font-family); - font-size: 14px; - font-weight: 400; - line-height: 18px; -} - .aboutSheetPanel h2 { font-size: var(--serif-h3-font-size); color: #000000; @@ -11205,12 +11197,12 @@ cursor: pointer; opacity: 0.6; cursor:pointer; } -.profile-page .social-icon img, .sheetSidebar .social-icon img { +.profile-page .social-icon img, .sheetContentSidebar .social-icon img { width: 13px; height: 13px; opacity: 0.4; } -.sheetSidebar .title.sub-title, .sheetSidebar .title.sub-sub-title { +.sheetContentSidebar .title.sub-title, .sheetContentSidebar .title.sub-sub-title { --english-font: var(--english-sans-serif-font-family); --hebrew-font: var(--hebrew-sans-serif-font-family); font-size: 14px; @@ -11218,7 +11210,7 @@ cursor: pointer; line-height: 18px; margin-block-end: 10px; } -.sheetSidebar .title.sub-sub-title { +.sheetContentSidebar .title.sub-sub-title { margin-block-end: 20px; } .profile-page .social-icon + .social-icon { diff --git a/static/js/Sheet.jsx b/static/js/Sheet.jsx index ad3859575b..21ce9d33a3 100644 --- a/static/js/Sheet.jsx +++ b/static/js/Sheet.jsx @@ -11,7 +11,7 @@ import { InterfaceText, LoadingMessage, } from './Misc'; -import SheetSidebar from "./sheets/SheetSidebar"; +import SheetContentSidebar from "./sheets/SheetSidebar"; import SheetContent from "./sheets/SheetContent"; class Sheet extends Component { @@ -122,7 +122,7 @@ class Sheet extends Component { authorImage={sheet.ownerImageUrl} summary={sheet.summary} /> - { +const SheetContentSidebar = ({authorImage, authorStatement, authorUrl, toggleSignUpModal, collections}) => { const [loading, setLoading] = useState(true); const [profile, setProfile] = useState(null); useEffect(() => { @@ -14,7 +14,7 @@ const SheetSidebar = ({authorImage, authorStatement, authorUrl, toggleSignUpModa const authorName = {Sefaria._(authorStatement)} ; - return
+ return
{
; } -export default SheetSidebar; \ No newline at end of file +export default SheetContentSidebar; \ No newline at end of file From f1039345a47828c91229f2e4c7d9e22860cba3bf Mon Sep 17 00:00:00 2001 From: stevekaplan123 Date: Tue, 1 Oct 2024 14:02:59 +0300 Subject: [PATCH 19/25] chore: finish renaming SheetSidebar to SheetContentSidebar --- static/js/Sheet.jsx | 2 +- static/js/UserProfile.jsx | 2 +- static/js/sheets/{SheetSidebar.jsx => SheetContentSidebar.jsx} | 0 3 files changed, 2 insertions(+), 2 deletions(-) rename static/js/sheets/{SheetSidebar.jsx => SheetContentSidebar.jsx} (100%) diff --git a/static/js/Sheet.jsx b/static/js/Sheet.jsx index 21ce9d33a3..fd4d463b53 100644 --- a/static/js/Sheet.jsx +++ b/static/js/Sheet.jsx @@ -11,7 +11,7 @@ import { InterfaceText, LoadingMessage, } from './Misc'; -import SheetContentSidebar from "./sheets/SheetSidebar"; +import SheetContentSidebar from "./sheets/SheetContentSidebar"; import SheetContent from "./sheets/SheetContent"; class Sheet extends Component { diff --git a/static/js/UserProfile.jsx b/static/js/UserProfile.jsx index 30c674b94d..ec12bed05f 100644 --- a/static/js/UserProfile.jsx +++ b/static/js/UserProfile.jsx @@ -553,7 +553,7 @@ const EditorToggleHeader = ({usesneweditor}) => { } const ProfileBio = ({profile: p}) => { - // used in ProfileSummary and in SheetSidebar, renders user education, organization, and location info + // used in ProfileSummary and in SheetContentSidebar, renders user education, organization, and location info const social = ['facebook', 'twitter', 'youtube', 'linkedin']; let infoList = []; if (p.location) { diff --git a/static/js/sheets/SheetSidebar.jsx b/static/js/sheets/SheetContentSidebar.jsx similarity index 100% rename from static/js/sheets/SheetSidebar.jsx rename to static/js/sheets/SheetContentSidebar.jsx From 330a592a358cd9e2b1bf4c7c5e2267fa629ad0a7 Mon Sep 17 00:00:00 2001 From: stevekaplan123 Date: Tue, 1 Oct 2024 14:28:26 +0300 Subject: [PATCH 20/25] chore: changed component name but forgot to change its usage --- static/js/UserProfile.jsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/static/js/UserProfile.jsx b/static/js/UserProfile.jsx index ec12bed05f..c25de57e98 100644 --- a/static/js/UserProfile.jsx +++ b/static/js/UserProfile.jsx @@ -645,7 +645,7 @@ const ProfileSummary = ({
{profileName} - + {profileButtons} {followInfo}
From aebe5fca8c1f4b8c1c6670c985710150d0559ee3 Mon Sep 17 00:00:00 2001 From: stevekaplan123 Date: Thu, 10 Oct 2024 10:08:00 +0300 Subject: [PATCH 21/25] chore: remove 0 from ProfileBio --- static/js/UserProfile.jsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/static/js/UserProfile.jsx b/static/js/UserProfile.jsx index 107581e024..0d8a495242 100644 --- a/static/js/UserProfile.jsx +++ b/static/js/UserProfile.jsx @@ -591,7 +591,7 @@ const ProfileBio = ({profile: p}) => {
; return <>{(p.position || p.organization) && subTitle} - {infoList.length && infoListComponent} + {infoList.length > 0 && infoListComponent} ; } const ProfileSummary = ({ From e368269c5d40e58b3a79fea9458c4985fccfe2ed Mon Sep 17 00:00:00 2001 From: stevekaplan123 Date: Tue, 15 Oct 2024 11:19:31 +0300 Subject: [PATCH 22/25] chore: use var for css color --- static/css/s2.css | 2 +- static/js/ReaderApp.jsx | 1 - 2 files changed, 1 insertion(+), 2 deletions(-) diff --git a/static/css/s2.css b/static/css/s2.css index 3728147d38..a869160d9b 100644 --- a/static/css/s2.css +++ b/static/css/s2.css @@ -3297,7 +3297,7 @@ a.cardTitle:hover { font-weight: 400; line-height: 18.75px; margin-block-end: 20px; - color: #666666; + color: var(--dark-grey); } .sheetViewer { display: flex; diff --git a/static/js/ReaderApp.jsx b/static/js/ReaderApp.jsx index 5fa989a2c0..13c3a09895 100644 --- a/static/js/ReaderApp.jsx +++ b/static/js/ReaderApp.jsx @@ -1752,7 +1752,6 @@ toggleSignUpModal(modalContentKind = SignUpModalKind.Default) { } openProfile(slug, tab) { tab = tab || "sheets"; - console.log('slug', slug); Sefaria.profileAPI(slug).then(profile => { this.setSinglePanelState({ menuOpen: "profile", profile, tab: tab}); }); From fd8b8740d8618ec6fff41fa12d4d4ebc67bff41a Mon Sep 17 00:00:00 2001 From: stevekaplan123 Date: Tue, 15 Oct 2024 11:47:20 +0300 Subject: [PATCH 23/25] chore: use better css names for PartOfCollections component --- static/css/s2.css | 4 ++-- static/js/sheets/SheetContentSidebar.jsx | 4 ++-- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/static/css/s2.css b/static/css/s2.css index a869160d9b..215ebc371e 100644 --- a/static/css/s2.css +++ b/static/css/s2.css @@ -9094,7 +9094,7 @@ body.interface-english .publishBox .react-tags__suggestions ul { opacity: 0.6; } -ul.aboutSheetLinks { +ul.sheetCollectionsLinks { list-style-type: none; padding-inline-start: 0; --english-font: var(--english-sans-serif-font-family); @@ -9104,7 +9104,7 @@ ul.aboutSheetLinks { line-height: 18.75px; } -h3.aboutSheetHeader { +h3.sheetCollections { text-transform: none; color: var(--dark-grey); font-size: var(--sans-serif-h3-font-size); diff --git a/static/js/sheets/SheetContentSidebar.jsx b/static/js/sheets/SheetContentSidebar.jsx index 8f841a4e3a..dc76489eb1 100644 --- a/static/js/sheets/SheetContentSidebar.jsx +++ b/static/js/sheets/SheetContentSidebar.jsx @@ -44,9 +44,9 @@ const SheetProfileInfo = ({profile}) => { const PartOfCollections = ({collections}) => { return collections.length > 0 &&
-

Part of Collections

+

Part of Collections

-
    +
      {collections.map((collection, i) => (
    • {collection.name} From a83b0fda994fb43a32e354bdd70f9ea79f190873 Mon Sep 17 00:00:00 2001 From: stevekaplan123 Date: Tue, 15 Oct 2024 12:54:36 +0300 Subject: [PATCH 24/25] chore: undo changes to SheetAuthorStatement which is unused by Sheets Viewer --- static/js/Misc.jsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/static/js/Misc.jsx b/static/js/Misc.jsx index 90f76eee26..255b81f9bb 100644 --- a/static/js/Misc.jsx +++ b/static/js/Misc.jsx @@ -2895,7 +2895,7 @@ SheetMetaDataBoxSegment.propTypes = { const SheetAuthorStatement = (props) => ( -
      +
      {props.children}
      ); From c1221a09a8338ad01677221a355c41d1b77a3acb Mon Sep 17 00:00:00 2001 From: stevekaplan123 Date: Tue, 15 Oct 2024 12:55:08 +0300 Subject: [PATCH 25/25] chore: remove unnecessary import --- static/js/sheets/SheetContent.jsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/static/js/sheets/SheetContent.jsx b/static/js/sheets/SheetContent.jsx index 41a23df949..eb58d59070 100644 --- a/static/js/sheets/SheetContent.jsx +++ b/static/js/sheets/SheetContent.jsx @@ -3,7 +3,7 @@ import $ from "../sefaria/sefariaJquery"; import ReactDOM from "react-dom"; import Sefaria from "../sefaria/sefaria"; import { - InterfaceText, ProfilePic, SheetAuthorStatement, + InterfaceText, ProfilePic, SheetMetaDataBox, SheetMetaDataBoxSegment } from "../Misc"; import React from "react";