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 = (
-