hide_topic_description_and_text_des_in_mobile_view (#446)

OpenPecha · Dec 5, 2024 · 7129d68 · 7129d68
2 parents 0aa78dc + 26c0b2a
commit 7129d68
Show file tree

Hide file tree

Showing 3 changed files with 30 additions and 9 deletions.
diff --git a/static/css/s2.css b/static/css/s2.css
@@ -282,6 +282,19 @@ body, .sans-serif {
 
 /* TILL HERE | edited to yakpotibetanUni from wujin */
 
+/* Default styles for desktop */
+.hide-on-mobile {
+    display: block;
+  }
+
+  /* Hide on mobile screens */
+  @media (max-width: 768px) {
+    .hide-on-mobile {
+      display: none;
+    }
+  }
+
+
 .serif {
     --english-font: var(--english-serif-font-family);
     --hebrew-font: var(--hebrew-serif-font-family);

diff --git a/static/js/NavSidebar.jsx b/static/js/NavSidebar.jsx
@@ -92,21 +92,25 @@ const Promo = () =>
     </Module>
 ;
 
-const AboutSefaria = ({hideTitle}) => (
+const AboutSefaria = ({ hideTitle }) => (
   <Module>
-    {!hideTitle ?
-    <ModuleTitle h1={true}>side_nav.about_pecha_title</ModuleTitle> : null }
+    {!hideTitle ? (
+      <ModuleTitle h1={true}>side_nav.about_pecha_title</ModuleTitle>
+    ) : null}
+    <a className="hide-on-mobile">
     <InterfaceText>side_nav.about_pecha_description</InterfaceText>
-    {<a href="/about" className="inTextLink">
+    </a>
+    <a href="/about" className="inTextLink hide-on-mobile">
       <InterfaceText>
-          <EnglishText>Learn More ›</EnglishText>
-          <HebrewText> མུ་མཐུད་གཟིགས། ›</HebrewText>
+        <EnglishText>Learn More ›</EnglishText>
+        <HebrewText> མུ་མཐུད་གཟིགས། ›</HebrewText>
       </InterfaceText>
-    </a>}
+    </a>
   </Module>
 );
 
 
+
 const AboutTranslatedText = ({translationsSlug}) => {
 
   const translationLookup = {
@@ -473,8 +477,10 @@ const Visualizations = ({categories}) => {
 const AboutTopics = ({hideTitle}) => (
   <Module>
     {hideTitle ? null :
-    <ModuleTitle>topic.about</ModuleTitle> }
+    <ModuleTitle className='hide-on-mobile'>topic.about</ModuleTitle> }
+    <a className='hide-on-mobile'>
     <InterfaceText>topic.about_description</InterfaceText>
+    </a>
   </Module>
 );
 

diff --git a/static/js/TopicsPage.jsx b/static/js/TopicsPage.jsx
@@ -30,10 +30,12 @@ const TopicsPage = ({setNavTopic, multiPanel, initialWidth}) => {
   const letter = Sefaria.interfaceLang === "hebrew" ? "ཀ" : "a";
   categoryListings.push(
     <div className="navBlock">
+      <div className='hide-on-mobile'>
       <a href={"/topics/all/" + letter} className="navBlockTitle">
         <InterfaceText>topic.a_to_z</InterfaceText>
       </a>
-      <div className="navBlockDescription">
+      </div>
+      <div className="navBlockDescription hide-on-mobile">
         <InterfaceText>topic.browse_topic</InterfaceText>
       </div>
     </div>