Skip to content

Commit

Permalink
Merge pull request #1928 from Sefaria/feature/sc-26953/frontend-for-s…
Browse files Browse the repository at this point in the history
…heets-topics-component

Feature/sc 26953/frontend for sheets topics component
  • Loading branch information
akiva10b authored Oct 8, 2024
2 parents 91e16ea + c6499f9 commit 7019aff
Show file tree
Hide file tree
Showing 8 changed files with 233 additions and 36 deletions.
2 changes: 1 addition & 1 deletion reader/views.py
Original file line number Diff line number Diff line change
Expand Up @@ -1604,7 +1604,7 @@ def find_holiday_in_hebcal_results(response):
topic = Topic.init(result['key'])
if topic:
return topic.contents()
return null
return None

@catch_error_as_json
def next_holiday(request):
Expand Down
2 changes: 1 addition & 1 deletion sefaria/urls.py
Original file line number Diff line number Diff line change
Expand Up @@ -76,7 +76,7 @@

# Source Sheet Builder
urlpatterns += [
url(r'^sheets$', sheets_views.sheets_home_page),
url(r'^sheets/?$', sheets_views.sheets_home_page),
url(r'^sheets/new/?$', sheets_views.new_sheet),
url(r'^sheets/(?P<sheet_id>\d+)$', sheets_views.view_sheet),
url(r'^sheets/visual/(?P<sheet_id>\d+)$', sheets_views.view_visual_sheet),
Expand Down
167 changes: 141 additions & 26 deletions static/css/s2.css
Original file line number Diff line number Diff line change
Expand Up @@ -2802,15 +2802,12 @@ display: none;
.sidebarDescription.lowlight{
color: var(--light-grey);
}
.card::before {
content: '';
position: absolute;
top: 0;
width: 95%;

div.sheetsWrapper :nth-child(1 of .card) {
border-top: 1px solid #EDEDEC;
}
.card {
flex: 1 1 50%;
flex: 1 1 45%;
position: relative;
padding-bottom: 12px;
}
Expand Down Expand Up @@ -7962,24 +7959,7 @@ But not to use a display block directive that might break continuous mode for ot
--hebrew-font: var(--hebrew-sans-serif-font-family);
border: none;
}
.sheetsHomepage .button {
background-color: var(--midrash-green);
}
.button.getStartedSheets {
width: 111px;
height: 39px;
padding: 10px 15px 10px 15px;
border-radius: 6px;
border: 1px solid #CCCCCC;
display: block;
background-color: white;
color: black;
font-size: 16px;
white-space: nowrap;
}
.button.getStartedSheets:hover {
color: black;
}

.button.disabled{
border: 1px solid var(--light-grey);
background-color: var(--lightest-grey);
Expand Down Expand Up @@ -10149,7 +10129,6 @@ span.purim-emoji img{
}
.overlayTextOnSheetsHero {
color: white;
text-shadow: 0 0 10px rgba(0, 0, 0, 0.7);
--english-font: var(--english-sans-serif-font-family);
--hebrew-font: var(--hebrew-sans-serif-font-family);
font-weight: 400;
Expand All @@ -10168,10 +10147,14 @@ span.purim-emoji img{
line-height: 18px;
top: 227px;
}
@media screen and (max-width: 600px) {
@media screen and (max-width: 800px) {
.overlayTextOnSheetsHero {
margin-inline-start: 15%;
}
.overlayTextOnSheetsHero #title {
font-size: 24px;
top: 115px;
line-height: revert;
}
.overlayTextOnSheetsHero #message {
font-size: 16px;
Expand All @@ -10182,6 +10165,36 @@ span.purim-emoji img{
padding: 130px 0;
}
}
@media screen and (min-width: 900px) {
.contentInner .table {
display: flex;
flex-direction: row;
}
div.sheetsWrapper :nth-child(-n+2 of .card) {
border-top: 1px solid #EDEDEC;
}
}
@media screen and (min-width: 700px) and (max-width: 900px) {
.contentInner .table {
display: flex;
flex-direction: column;
}
}
@media screen and (min-width: 600px) and (max-width: 700px) {
.contentInner .table {
display: flex;
flex-direction: row;
}
div.sheetsWrapper :nth-child(-n+2 of .card) {
border-top: 1px solid #EDEDEC;
}
}
@media screen and (max-width: 600px) {
.contentInner .table {
display: flex;
flex-direction: column;
}
}
.readerPanel.hebrew .sheetContent .sheetItem.segment .sourceContentText.outsideBiText.en {
display: none;
}
Expand Down Expand Up @@ -13318,7 +13331,109 @@ span.ref-link-color-3 {color: blue}
.blockButton {
cursor: pointer;
}
.sheetsHomepage .button {
background-color: var(--midrash-green);
}
.sheetsHomepage .sheetsHomepageSectionTitle {
color: var(--midrash-green);
font-family: 'Roboto', "Helvetica Neue", "Helvetica", sans-serif;
font-size: 14px;
font-weight: 400;
line-height: 18px;
margin-bottom: 15px;
}
.multiPanel .sheetsHomepage .sheetsTopicTOC .sheetsHomepageSectionTitle {
flex: 1 1 100%;
}
.sheetsHomepage .sidebarLayout {
justify-content: space-between;
margin-top: 50px;
}
.sheetsHomepage .sidebarLayout .sheetsTopics {
display: flex;
flex-direction: column;
}
.sheetsHomepage .content .contentInner {
width: 875px;
}
.sheetsHomepage .sidebarLayout .sheetsTopicsCalendar, .sheetsHomepage .sidebarLayout .sheetsTopicTOC {
margin-inline-start: 10%;
}
.sheetsHomepage .sidebarLayout .sheetsTopicsCalendar {
column-gap: 20px;
}
.sheetsHomepage .sheetsTopicTOC .sheetsWrapper {
flex: 1;
display: flex;
flex-wrap: wrap;
column-gap: 20px;
}
.sheetsHomepage .sheetsTopicsCalendar .sheetsWrapper {
flex: 1;
display: flex;
flex-direction: column;
}
.singlePanel .sheetsTopicTOC, .singlePanel .sheetsTopicsCalendar {
margin-top: 30px;
}
.multiPanel .sheetsTopicTOC {
margin-top: 30px;
}
.singlePanel .sheetsHomepage .navSidebar {
margin-block-start: 5px;
width: revert;
}
.singlePanel .sheetsHomepage .navSidebarModule {
padding: 0 10%;
}
.singlePanel .sheetsHomepage .sheetsWrapper, .singlePanel .sheetsHomepage .sheetsTopicsCalendar {
flex-direction: column;
margin-bottom: 10px;
}
.singlePanel .sheetsHomepage .sidebarLayout {
margin-top: revert;
}

.singlePanel .sheetsHomepage .sidebarLayout .sheetsTopics {
width: revert;
}
.singlePanel .sheetsHomepage .button {
display: block;
}
@media screen and (max-width: 840px) {
.sheetsHomepage .sidebarLayout .sheetsTopics {
width: 100%;
}
.sheetsHomepage .button {
display: block;
}
.sheetsHomepage .navSidebar {
width: revert;
border-top: 40px solid #FBFBFA;
margin-block-start: -40px;
border-bottom: 40px solid #FBFBFA;
}
}
@media screen and (max-width: 700px) {
.sheetsHomepage .navSidebar {
margin-top: 30px;
}
}
.button.getStartedSheets {
width: 111px;
height: 39px;
padding: 10px 15px 10px 15px;
border-radius: 6px;
border: 1px solid #CCCCCC;
display: block;
background-color: white;
color: black;
font-size: 16px;
white-space: nowrap;
}
.button.getStartedSheets:hover {
color: black;
}
.image-in-text {
display: flex;
justify-content: center;
Expand Down
4 changes: 3 additions & 1 deletion static/js/ReaderPanel.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -1052,7 +1052,9 @@ class ReaderPanel extends Component {
);

} else if (this.state.menuOpen === "sheets") {
menu = (<SheetsHomePage/>);
menu = (<SheetsHomePage setNavTopic={this.setNavigationTopic}
multiPanel={this.props.multiPanel}
setTopic={this.setTopic}/>);
} else if (this.state.menuOpen === "profile") {
menu = (
<UserProfile
Expand Down
4 changes: 2 additions & 2 deletions static/js/TopicsPage.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -14,8 +14,8 @@ import Component from 'react-class';
// The root topics page listing topic categories to browse
const TopicsPage = ({setNavTopic, multiPanel, initialWidth}) => {
let categoryListings = Sefaria.topic_toc.map(cat => {
const openCat = e => {e.preventDefault(); setNavTopic(cat.slug, {en: cat.en, he: cat.he})};
return (
const openCat = e => {e.preventDefault(); setNavTopic(cat.slug, {en: cat.en, he: cat.he})};
return (
<div className="navBlock">
<a href={`/topics/category/${cat.slug}`} className="navBlockTitle" onClick={openCat}>
<InterfaceText text={cat} />
Expand Down
12 changes: 12 additions & 0 deletions static/js/sefaria/sefaria.js
Original file line number Diff line number Diff line change
Expand Up @@ -2649,6 +2649,18 @@ _media: {},
stories: [],
page: 0
},
_upcomingDay: {}, // for example, possible keys are 'parasha' and 'holiday'
getUpcomingDay: function(day) {
// currently `day` can be 'holiday' or 'parasha'
if (day !== 'holiday' && day !== 'parasha') {
throw new Error('Invalid day. Expected "holiday" or "parasha".');
}
return this._cachedApiPromise({
url: `${this.apiHost}/api/calendars/topics/${day}`,
key: day,
store: this._upcomingDay,
});
},
_parashaNextRead: {},
getParashaNextRead: function(parasha) {
return this._cachedApiPromise({
Expand Down
20 changes: 15 additions & 5 deletions static/js/sheets/SheetsHomePage.jsx
Original file line number Diff line number Diff line change
@@ -1,11 +1,11 @@
import React from 'react';
import {NavSidebar} from "../NavSidebar";
import Footer from "../Footer";

import {SheetsTopicsCalendar, SheetsTopicsTOC} from "./SheetsTopics";
const SheetsHeroBanner = ({title, message, videoOptions, posterImg}) => {
/*
`title` and `message` are shown on top of the video. `posterImg` is shown while video is downloaded,
and `videoOptions` is an array of videos that the browser selects from.
* `title` and `message` are shown on top of the video. `posterImg` is shown while video is downloaded,
* and `videoOptions` is an array of videos that the browser selects from.
*/
return <div id="aboutCover">
<video id="aboutVideo" poster={posterImg} preload="auto" autoPlay={true} loop muted>
Expand All @@ -30,7 +30,12 @@ const SheetsSidebar = () => {



const SheetsHomePage = () => {
const SheetsHomePage = ({setNavTopic, setTopic, multiPanel}) => {
const handleClick = (func) => (e, slug, en, he) => {
e.preventDefault();
func(slug, {en, he}); // setTopic or setNavTopic
}
const sheetsTopicsTOC = <SheetsTopicsTOC handleClick={handleClick(setNavTopic)}/>;
return <div className="readerNavMenu sheetsHomepage" key="0">
<div className="content">
<SheetsHeroBanner title="Join the Torah Conversation"
Expand All @@ -40,8 +45,13 @@ const SheetsHomePage = () => {
/>
<div className="sidebarLayout">
<div className="contentInner">
<SheetsSidebar/>
<div className="sheetsTopics">
<SheetsTopicsCalendar handleClick={handleClick(setTopic)}/>
{multiPanel && sheetsTopicsTOC}
</div>
</div>
<SheetsSidebar/>
{!multiPanel && sheetsTopicsTOC}
</div>
<Footer/>
</div>
Expand Down
58 changes: 58 additions & 0 deletions static/js/sheets/SheetsTopics.jsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,58 @@
import React, {useEffect, useState} from "react";
import Sefaria from "../sefaria/sefaria";
import {Card} from "../shared/Card";
const SheetsTopicsTOC = ({handleClick}) => {
const categoryListings = Sefaria.topic_toc.map(cat => {
return <Card cardTitleHref={`/topics/category/${cat.slug}`}
cardTitle={cat}
cardText={cat.categoryDescription}
oncardTitleClick={(e) => handleClick(e, cat.slug, cat.en, cat.he)}/>;
});
return (
<div className="sheetsTopicTOC">
<SheetsWrapper title="Browse by Topic">{categoryListings}</SheetsWrapper>
</div>
);
}

const SheetsWrapper = ({title, children}) => {
return <div className="sheetsWrapper table">
<div className="sheetsHomepageSectionTitle">{title}</div>
{children}
</div>
}

const SheetsParashah = ({handleClick}) => {
const [parashah, setParashah] = useState({});
useEffect(() => {
Sefaria.getUpcomingDay('parasha').then(setParashah);
}, []);
const parashahTitle = parashah.displayValue;
const parashahDesc = parashah.description;
return <Card cardTitleHref={`/topics/${parashah.topic}`}
cardTitle={parashahTitle}
cardText={parashahDesc}
oncardTitleClick={(e) => handleClick(e, parashah.topic, parashahTitle.en, parashahTitle.he)}/>;
}

const SheetsHoliday = ({handleClick}) => {
const [holiday, setHoliday] = useState({});
useEffect( () => {
Sefaria.getUpcomingDay('holiday').then(setHoliday);
}, []);
if (Object.keys(holiday).length === 0) {
return <div className="navBlock">Loading...</div>
}
return <Card cardTitleHref={`/topics/${holiday.slug}`}
cardTitle={holiday.primaryTitle}
cardText={holiday.description}
oncardTitleClick={(e) => handleClick(e, holiday.slug, holiday.primaryTitle.en, holiday.primaryTitle.he)}/>;
}
const SheetsTopicsCalendar = ({handleClick}) => {
return <div className="sheetsTopicsCalendar table">
<SheetsWrapper title="This Week's Torah Portion"><SheetsParashah handleClick={handleClick}/></SheetsWrapper>
<SheetsWrapper title="Upcoming Holiday"><SheetsHoliday handleClick={handleClick}/></SheetsWrapper>
</div>
}

export { SheetsTopicsCalendar, SheetsTopicsTOC }

0 comments on commit 7019aff

Please sign in to comment.