feat(topic page): merge new feat branch

Sefaria · Apr 14, 2024 · 3bdfd90 · 3bdfd90
2 parents aa66964 + 5bf2970
commit 3bdfd90
Show file tree

Hide file tree

Showing 7 changed files with 482 additions and 266 deletions.
diff --git a/static/css/s2.css b/static/css/s2.css
@@ -2353,7 +2353,8 @@ div.interfaceLinks-row a {
   --hebrew-font: var(--hebrew-sans-serif-font-family);
 }
 .topicPanel .mainColumn .story {
-    padding: 0 0 20px 0;
+    padding: 0;
+    margin-bottom: 20px;
 }
 .topicPanel .mainColumn .storySheetListItem {
   padding: 0 0 30px 0;
@@ -2391,8 +2392,17 @@ div.interfaceLinks-row a {
   font-size: 29px;
 }
 .topicPanel .story .storyTitle {
-  font-size: 24px;
+  --english-font: var(--english-sans-serif-font-family);
+  --hebrew-font: var(--hebrew-sans-serif-font-family);
+  font-size: 16px;
+  font-weight: 600;
+}
+
+.topicPanel .story .storyTitle .int-he {
+  font-size: 18px;
+  font-weight: 600;
 }
+
 .topicPanel h1 {
   --english-font: var(--english-serif-font-family);
   --hebrew-font: var(--hebrew-serif-font-family);
@@ -10640,6 +10650,13 @@ cursor: pointer;
   margin-inline-end: 30px;
   cursor: pointer;
 }
+
+.tab-view .tab-list .tab.popover {
+  margin-inline-end: 0;
+  margin-inline-start: 5px;
+}
+
+
 .tab-view .tab-list .tab a {
   color: inherit;
 }
@@ -10672,17 +10689,21 @@ cursor: pointer;
   font-size: 16px;
   margin: 0;
   padding: 6px 9px;
-  border: 1px solid #EDEDEC;
-  background-color: #EDEDEC;
-  border-radius: 6px;
 }
+
+.tab-view .tab-list .tab.popover {
+  position: relative;
+  display: inline-block;
+}
+
+
 .tab-view .tab-list .tab.filter.open {
   background-color: inherit;
 }
 .tab-view .tab-list .tab.filter img {
   margin: 0 0 1px 6px;
-  width: 12px;
-  height: 12px;
+  width: 18px;
+  height: 18px;
 }
 .interface-hebrew .tab-view .tab-list .tab.filter img {
   margin: 0 6px 1px 0;
@@ -10709,6 +10730,91 @@ cursor: pointer;
 .tab-view.largeTabs .tab-list .active .tab {
   border-bottom: 4px solid var(--light-grey);
 }
+
+.langSelectPopover {
+  position: absolute;
+  top: 100%;
+  right: 0;
+  background-color: #fff;
+  border-radius: 6px;
+  box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.25);
+  text-align: start;
+  width: 266px;
+  padding-bottom: 15px;
+}
+
+.langSelectPopover .langHeader {
+  font-weight: 500;
+  font-size: 16px;
+  padding: 15px;
+  margin-bottom: 15px;
+  border-bottom: 1px solid var(--light-grey);
+}
+
+.langSelectPopover .radioChoice.active {
+  background-color: var(--sefaria-blue);
+  color: #fff;
+}
+
+.langSelectPopover .radioChoice {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  font-size: 14px;
+  color: #000;
+  margin-inline: 15px;
+  background-color: var(--lighter-grey);
+  cursor: pointer;
+}
+
+.langSelectPopover .radioChoice:nth-of-type(2) {
+  border-radius: 6px 6px 0px 0px;
+}
+
+.langSelectPopover .radioChoice:nth-of-type(4) {
+  border-radius: 0px 0px 6px 6px;
+}
+
+.langSelectPopover .radioChoice label {
+  flex-grow: 1;
+  padding: 10px;
+  cursor: pointer;
+}
+
+.langSelectPopover .radioChoice input[type=radio] {
+    appearance: none;
+    background-color: #fff;
+    width: 20px;
+    height: 20px;
+    border: 2px solid var(--medium-grey);
+    border-radius: 20px;
+    display: inline-grid;
+    place-content: center;
+    margin-top: 0;
+    margin-inline-end: 10px;
+
+  }
+
+/* Styles the radio select as a checkbox  */
+.langSelectPopover .radioChoice input[type=radio]::before {
+    content: "";
+    width: 10px;
+    height: 10px;
+    transform: scale(0);
+    transform-origin: bottom left;
+    background-color: var(--sefaria-blue);
+    clip-path: polygon(13% 50%, 34% 66%, 81% 2%, 100% 18%, 39% 100%, 0 71%);
+}
+
+.langSelectPopover .radioChoice input[type=radio]:checked::before {
+    transform: scale(1);
+}
+
+.langSelectPopover .radioChoice input[type=radio]:checked{
+    background-color:   #fff;
+    border: 0;
+}
+
 @media (max-width: 540px) {
   .profile-page .tab-view .tab .tabIcon {
     display: none;
@@ -11453,8 +11559,28 @@ body .homeFeedWrapper .content {
   color: #666;
 }
 .story .learningPrompt {
-  padding: 10px 0 20px;
+  padding: 20px 0 20px;
+}
+.story details .learningPrompt {
+  background-color: var(--highlight-blue-light);
+  margin-inline-start: -20px;
+  padding-inline-start: 20px;
+  padding-inline-end: 20px;
+  border-top: 1px solid var(--light-grey);
+}
+
+.story.topicPassageStory {
+  box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.25);
+}
+
+.story.topicPassageStory .storyBody {
+  padding-inline-end: 20px;
+  padding-top: 20px;
 }
+.story.topicPassageStory .contentText.subHeading {
+  padding-bottom: 20px;
+}
+
 .mainColumn .story .storyTitleBlock {
   clear: both;
 }
@@ -11498,6 +11624,53 @@ body .homeFeedWrapper .content {
   float: right;
 }
 
+.story details .storyBody {
+  margin-top: 0;
+}
+
+.story details > summary {
+  cursor: pointer;
+  list-style: none;
+}
+
+.story details > summary .topicStoryDescBlock {
+  background-color: var(--lightest-grey);
+  margin-inline-start: -20px;
+  padding: 20px;
+  display: flex;
+}
+
+/* extremely hacky, but required unless there's a major refactor of CategoryHeader logic */
+.story details > summary .topicStoryDescBlock > span:nth-child(1) {
+  flex: 1
+}
+
+
+.story details > summary .storyTitleBlock {
+  background: url('/static/icons/arrow-down-bold.svg') no-repeat transparent;
+  background-size: 14px;
+  background-position-y: center;
+  margin: 0;
+  padding: 0px 0px 1px 24px;
+  vertical-align: middle;
+}
+
+.interface-hebrew .story details > summary .storyTitleBlock {
+  background-position-x: right;
+  padding: 0px 24px 1px 0px;
+}
+
+.story details[open] > summary .storyTitleBlock {
+  background: url('/static/icons/arrow-up-bold.svg') no-repeat transparent;
+  background-size: 14px;
+  background-position-y: center;
+}
+
+.interface-hebrew .story details[open] > summary .storyTitleBlock {
+  background-position-x: right;
+}
+
+
 .story .storyBody {
   clear: both;
   margin: 10px 0;

diff --git a/static/icons/filter.svg b/static/icons/filter.svg
diff --git a/static/js/Misc.jsx b/static/js/Misc.jsx
@@ -510,6 +510,13 @@ const FilterableList = ({
                 key={option}
                 className={classNames({'sans-serif': 1, 'sort-option': 1, noselect: 1, active: sortOption === option})}
                 onClick={() => setSort(option)}
+                tabIndex="0"
+                onKeyDown={(e) => {
+                  if (e.key === 'Enter') {
+                    e.preventDefault();
+                    e.target.click();
+                  }
+                }}
               >
                 <InterfaceText context="FilterableList">{option}</InterfaceText>
               </span>
@@ -2091,7 +2098,7 @@ function OnInView({ children, onVisible }) {
    *  `onVisible` callback function that will be called when given component(s) are visible within the viewport
    *  Ex. <OnInView onVisible={handleImageIsVisible}><img src="..." /></OnInView>
    */
-  const elementRef = useRef(); 
+  const elementRef = useRef();
 
   useEffect(() => {
     const observer = new IntersectionObserver(
@@ -3289,11 +3296,11 @@ const Autocompleter = ({getSuggestions, showSuggestionsOnSelect, inputPlaceholde
 }
 
 const ImageWithCaption = ({photoLink, caption }) => {
-  
+
   return (
     <div>
         <img class="imageWithCaptionPhoto" src={photoLink}/>
-        <div class="imageCaption"> 
+        <div class="imageCaption">
           <InterfaceText text={caption} />
         </div>
       </div>);
@@ -3312,6 +3319,76 @@ const AppStoreButton = ({ platform, href, altText }) => {
   );
 };
 
+const LangSelectInterface = ({callback, defaultVal, closeInterface}) => {
+  const [selectedOpt, setSelectedOpt] = useState(defaultVal);
+
+  const handleOptionChange = (event) => {
+    setSelectedOpt(event.target.value);
+    callback(event.target.value);
+    closeInterface();
+  };
+
+  useEffect(()=>{
+    document.querySelector('.langSelectPopover').focus()
+  },[])
+
+  return (
+    <div className="langSelectPopover"
+      tabIndex="0"
+      onClick={(e) => {
+          e.stopPropagation();
+          e.nativeEvent.stopImmediatePropagation();
+        }
+      }
+
+      onBlur={(e) => {
+            setTimeout(() => {
+              if (!document.querySelector('.langSelectPopover').contains(document.activeElement)) {
+                closeInterface();
+              }
+            }, 50);
+        }
+      }
+    >
+      <div className="langHeader"><InterfaceText>Source Language</InterfaceText></div>
+      <div className={classNames({active: selectedOpt === "source", radioChoice: 1 })}>
+        <label htmlFor="source"><InterfaceText>Source</InterfaceText></label>
+        <input
+          type="radio"
+          id="source"
+          name="options"
+          value="source"
+          checked={selectedOpt === "source"}
+          onChange={handleOptionChange}
+        />
+      </div>
+      <div className={classNames({active: selectedOpt === "translation", radioChoice: 1 })}>
+        <label htmlFor="translation"><InterfaceText>Translation</InterfaceText></label>
+        <input
+          type="radio"
+          id="translation"
+          name="options"
+          value="translation"
+          checked={selectedOpt === "translation"}
+          onChange={handleOptionChange}
+        />
+      </div>
+      <div className={classNames({active: selectedOpt === "sourcewtrans", radioChoice: 1 })}>
+        <label htmlFor="sourcewtrans"><InterfaceText>Source with Translation</InterfaceText></label>
+        <input
+          type="radio"
+          id="sourcewtrans"
+          name="options"
+          value="sourcewtrans"
+          checked={selectedOpt === "sourcewtrans"}
+          onChange={handleOptionChange}
+        />
+      </div>
+    </div>
+  );
+
+}
+
 
 export {
   AppStoreButton,
@@ -3380,5 +3457,6 @@ export {
   requestWithCallBack,
   OnInView,
   TopicPictureUploader,
-  ImageWithCaption
+  ImageWithCaption,
+  LangSelectInterface
 };