diff --git a/static/css/s2.css b/static/css/s2.css index 4b685c1500..215ebc371e 100644 --- a/static/css/s2.css +++ b/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 { diff --git a/static/js/ReaderPanel.jsx b/static/js/ReaderPanel.jsx index 958d9a7731..272265b94f 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'; @@ -678,6 +678,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 98d52dbbdc..fd4d463b53 100644 --- a/static/js/Sheet.jsx +++ b/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 = ( - +
+ + +
); } return ( diff --git a/static/js/UserProfile.jsx b/static/js/UserProfile.jsx index cf5e1d316d..129c3ec9e0 100644 --- a/static/js/UserProfile.jsx +++ b/static/js/UserProfile.jsx @@ -347,7 +347,6 @@ class UserProfile extends Component {
{ ) } - const ProfileBio = ({profile: p}) => { // used in ProfileSummary and in SheetContentSidebar, renders user education, organization, and location info const social = ['facebook', 'twitter', 'youtube', 'linkedin']; diff --git a/static/js/sheets/SheetContentSidebar.jsx b/static/js/sheets/SheetContentSidebar.jsx new file mode 100644 index 0000000000..dc76489eb1 --- /dev/null +++ b/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 = + {Sefaria._(authorStatement)} + ; + return
+ + {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 SheetContentSidebar; \ No newline at end of file