trending_mobile_update (#448)

OpenPecha · Dec 5, 2024 · e8490e2 · e8490e2
2 parents 7129d68 + 5650a4d
commit e8490e2
Show file tree

Hide file tree

Showing 3 changed files with 75 additions and 2 deletions.
diff --git a/static/css/s2.css b/static/css/s2.css
@@ -293,6 +293,54 @@ body, .sans-serif {
       display: none;
     }
   }
+
+  /* Hide on desktop screens */
+  @media (min-width: 768px) {
+    .hide-on-desktop {
+      display: none;
+    }
+  }
+
+  /* Trending_topic_box */
+
+  .trending-topics-box {
+    background-color: #f0f0f0; /* Grey background */
+    padding: 2px 8px 25px;
+    border-radius: 8px; /* Rounded corners */
+    margin: 20px 0; /* Margin to separate it from other elements */
+  }
+
+  .box-title {
+  font-family: 'roboto', sans-serif;  
+  font-size: 1.5em;
+  margin: 0;
+  color: #333; /* Darker text for contrast */
+  border-bottom: 1px solid #ddd; /* Light line beneath the title */
+  padding-bottom: 5px; /* Space between title text and the line */
+}
+
+  .topics-list {
+    font-family: 'roboto', sans-serif; 
+    display: flex;
+    flex-direction: column; /* Stack topics vertically */
+    gap: 10px; /* Space between each topic */
+    padding-right: 20px;
+    padding-top: 20px;
+  }
+
+  .topic-item {
+    font-size: 1em;
+  }
+
+  .topic-item a {
+    text-decoration: none;
+    color: #21130d; /* Link color */
+  }
+
+  .topic-item a:hover {
+    text-decoration: underline;
+  }
+
 
 
 .serif {

diff --git a/static/js/NavSidebar.jsx b/static/js/NavSidebar.jsx
@@ -487,9 +487,11 @@ const AboutTopics = ({hideTitle}) => (
 
 const TrendingTopics = () => (
   <Module>
+    <div className="hide-on-mobile">
     <ModuleTitle>topic.trend</ModuleTitle>
+    </div>
     {Sefaria.trendingTopics.map((topic, i) =>
-      <div className="navSidebarLink ref serif" key={i}>
+      <div className="navSidebarLink ref serif hide-on-mobile" key={i}>
         <a href={"/topics/" + topic.slug}><InterfaceText text={{en: topic.en, he: topic.he}}/></a>
       </div>
     )}

diff --git a/static/js/TopicsPage.jsx b/static/js/TopicsPage.jsx
@@ -57,15 +57,38 @@ const TopicsPage = ({setNavTopic, multiPanel, initialWidth}) => {
     {type: "SupportSefaria"},
   ];
 
+  const TrendingTopicsBox = () => (
+    <div className="trending-topics-box">
+      <h2 className="box-title">Trending Topics</h2>
+      <div className="topics-list">
+        {Sefaria.trendingTopics.map((topic, i) => (
+          <div className="topic-item" key={i}>
+            <a href={`/topics/${topic.slug}`}>
+              <span>{topic.en}</span>
+            </a>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+
+
+
 
   return (
     <div className="readerNavMenu noLangToggleInHebrew" key="0">
       <div className="content">
         <div className="sidebarLayout">
           <div className="contentInner">
+              <div className='hide-on-desktop'>
+                <TrendingTopicsBox />               
+              </div>
               <div className="navTitle tight sans-serif">
                   <CategoryHeader type="topics" buttonsToDisplay={["subcategory", "reorder"]}>
-                    <h1><InterfaceText>topic.expore</InterfaceText></h1>
+                    <h1><InterfaceText>topic.expore</InterfaceText></h1><br></br>
+                    <div className="navBlockDescription hide-on-desktop">
+                      <InterfaceText>Selection of texts and user created source sheets about thousands of subjects</InterfaceText>
+                    </div>
                   </CategoryHeader>
               </div>
               { about }