Feature/sc 27331/new sidebar component

static/css/s2.css

@@ -3272,7 +3272,6 @@ a.cardTitle:hover {
 }
 .bookPage .tocTitle,
 .bookMetaDataBox .title {
-  text-align: center;
   font-size: 30px;
   line-height: 1.3;
   unicode-bidi: plaintext;
@@ -3284,6 +3283,28 @@ a.cardTitle:hover {
   flex-direction: row;
   justify-content: space-between;
 }
+
+.sheetContentSidebar .profile-pic {
+  display: block;
+  margin-block-end: 20px;
+  margin-block-start: 30px;
+  margin-inline-start: -5px;
+}
+.sheetContentSidebar .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: var(--dark-grey);
+}
+.sheetViewer {
+  display: flex;
+}
+.sheetContentSidebar {
+  width: 33%;
+}
 .bookPage .currentSection,
 .bookPage .authorStatement {
   font-size: 17px;
@@ -8412,9 +8433,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;
@@ -8423,9 +8443,12 @@ a .button:hover {
   display: inline;
   margin-block-end: 10px;
 }
-.sheetContent .sheetMetaDataBox a.sheetAuthorName:hover {
+a.sheetAuthorName:hover {
   text-decoration: none;
 }
+.sheetContentSidebar a.sheetAuthorName {
+  display: block;
+}
 .sheetMetaDataBox .summary {
   --english-font: var(--english-sans-serif-font-family);
   --hebrew-font: var(--hebrew-sans-serif-font-family);
@@ -9071,15 +9094,17 @@ 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-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 {
+h3.sheetCollections {
   text-transform: none;
   color: var(--dark-grey);
   font-size: var(--sans-serif-h3-font-size);
@@ -9117,14 +9142,6 @@ h3.aboutSheetHeader {
   border: 1px solid var(--light-grey);
 }
 
-.aboutSheetPanel div.description {
-  color: var(--dark-grey);
-  --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;
-}
-
 .aboutSheetPanel h2 {
   font-size: var(--serif-h3-font-size);
   color: #000000;
@@ -11236,11 +11253,22 @@ cursor: pointer;
   opacity: 0.6;
   cursor:pointer;
 }
-.profile-page .social-icon img {
+.profile-page .social-icon img, .sheetContentSidebar .social-icon img {
   width: 13px;
   height: 13px;
   opacity: 0.4;
 }
+.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;
+  font-weight: 400;
+  line-height: 18px;
+  margin-block-end: 10px;
+}
+.sheetContentSidebar .title.sub-sub-title {
+  margin-block-end: 20px;
+}
 .profile-page .social-icon + .social-icon {
   padding: 0 5px;
 }
@@ -11520,19 +11548,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 {

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';
@@ -678,6 +678,7 @@ class ReaderPanel extends Component {
           setDivineNameReplacement={this.props.setDivineNameReplacement}
           divineNameReplacement={this.props.divineNameReplacement}
           hasSidebar={this.props.hasSidebar}
+          toggleSideUpModal={this.props.toggleSignUpModal}
         />
       );
     }

static/js/Sheet.jsx

@@ -11,9 +11,9 @@ import {
   InterfaceText,
   LoadingMessage,
 } from './Misc';
+import SheetContentSidebar from "./sheets/SheetContentSidebar";
 import SheetContent from "./sheets/SheetContent";
 
-
 class Sheet extends Component {
   constructor(props) {
     super(props);
@@ -100,29 +100,36 @@ class Sheet extends Component {
     }
     else {
       content = (
-            <SheetContent
-                sheetNotice={sheet.sheetNotice}
-                sources={sheet.sources}
-                title={sheet.title}
-                onRefClick={this.props.onRefClick}
-                handleClick={this.handleClick}
-                sheetSourceClick={this.props.onSegmentClick}
-                highlightedNode={this.props.highlightedNode}
-                highlightedRefsInSheet={this.props.highlightedRefsInSheet}
-                scrollToHighlighted={this.props.scrollToHighlighted}
-                authorStatement={sheet.ownerName}
-                authorUrl={sheet.ownerProfileUrl}
-                authorImage={sheet.ownerImageUrl}
-                collectionName={sheet.collectionName}
-                collectionSlug={sheet.displayedCollection}
-                collectionImage={sheet.collectionImage}
-                editable={Sefaria._uid === sheet.owner}
-                setSelectedWords={this.props.setSelectedWords}
-                sheetNumbered={sheet.options.numbered}
-                hideImages={!!sheet.hideImages}
-                sheetID={sheet.id}
-                summary={sheet.summary}
-        />
+            <div className="sidebarLayout">
+              <SheetContent
+                  sheetNotice={sheet.sheetNotice}
+                  sources={sheet.sources}
+                  title={sheet.title}
+                  onRefClick={this.props.onRefClick}
+                  handleClick={this.handleClick}
+                  sheetSourceClick={this.props.onSegmentClick}
+                  highlightedNode={this.props.highlightedNode}
+                  highlightedRefsInSheet={this.props.highlightedRefsInSheet}
+                  scrollToHighlighted={this.props.scrollToHighlighted}
+                  editable={Sefaria._uid === sheet.owner}
+                  setSelectedWords={this.props.setSelectedWords}
+                  sheetNumbered={sheet.options.numbered}
+                  hideImages={!!sheet.hideImages}
+                  sheetID={sheet.id}
+                  authorStatement={sheet.ownerName}
+                  authorID={sheet.owner}
+                  authorUrl={sheet.ownerProfileUrl}
+                  authorImage={sheet.ownerImageUrl}
+                  summary={sheet.summary}
+            />
+              <SheetContentSidebar
+                  authorStatement={sheet.ownerName}
+                  authorUrl={sheet.ownerProfileUrl}
+                  authorImage={sheet.ownerImageUrl}
+                  collections={sheet.collections}
+                  toggleSignUpModal={this.props.toggleSignUpModal}
+              />
+          </div>
       );
     }
     return (

static/js/UserProfile.jsx

@@ -347,7 +347,6 @@ class UserProfile extends Component {
               <div>
                 <ProfileSummary
                   profile={this.props.profile}
-                  follow={this.follow}
                   openFollowers={this.openFollowers}
                   openFollowing={this.openFollowing}
                   toggleSignUpModal={this.props.toggleSignUpModal}
@@ -551,7 +550,6 @@ const EditorToggleHeader = ({usesneweditor}) => {
  )
 }
 
-
 const ProfileBio = ({profile: p}) => {
     // used in ProfileSummary and in SheetContentSidebar, renders user education, organization, and location info
     const social = ['facebook', 'twitter', 'youtube', 'linkedin'];

static/js/sheets/SheetContentSidebar.jsx

@@ -0,0 +1,59 @@
+import {FollowButton, InterfaceText, ProfilePic} from "../Misc";
+import Sefaria from "../sefaria/sefaria";
+import React, {useEffect, useState} from "react";
+import {ProfileBio} from "../UserProfile";
+const SheetContentSidebar = ({authorImage, authorStatement, authorUrl, toggleSignUpModal, collections}) => {
+    const [loading, setLoading] = useState(true);
+    const [profile, setProfile] = useState(null);
+    useEffect(() => {
+        Sefaria.profileAPI(authorUrl.replace("/profile/", "")).then(profile => {
+            setProfile(profile);
+            setLoading(false);
+        })
+    });
+    const authorName = <a href={authorUrl} className="sheetAuthorName">
+                                    {Sefaria._(authorStatement)}
+                                </a>;
+    return <div className="sheetContentSidebar">
+            <ProfilePic
+                url={authorImage}
+                len={100}
+                name={authorStatement}
+            />
+            {authorName}
+            {!loading && <SheetProfileInfo profile={profile}/>}
+            {<PartOfCollections collections={collections}/>}
+    </div>;
+}
+
+const SheetProfileInfo = ({profile}) => {
+    const profileFollowers = <div className="profileFollowers">
+                                             <InterfaceText>{String(profile.followers.length)}</InterfaceText>&nbsp;
+                                             <InterfaceText>followers</InterfaceText>
+                                         </div>;
+    return <span className="profile-summary">
+             {profileFollowers}
+             <ProfileBio profile={profile}/>
+             {Sefaria._uid !== profile.id && <FollowButton
+                                                large={true}
+                                                uid={profile.id}
+                                                following={Sefaria.following.indexOf(profile.id) > -1}/>
+             }
+           </span>;
+}
+const PartOfCollections = ({collections}) => {
+    return collections.length > 0 &&
+                <div>
+                    <h3 className="sheetCollections"><InterfaceText>Part of Collections</InterfaceText></h3>
+                    <div>
+                        <ul className="sheetCollectionsLinks">
+                            {collections.map((collection, i) => (
+                                <li key={i}><a
+                                    href={"/collections/" + collection.slug}><InterfaceText>{collection.name}</InterfaceText></a>
+                                </li>
+                            ))}
+                        </ul>
+                    </div>
+                </div>;
+}
+export default SheetContentSidebar;