Restructure source sheet numbers on sheets in reader

Sefaria · Mar 21, 2022 · 74bce37 · 74bce37
1 parent 86673ad
commit 74bce37
Show file tree

Hide file tree

Showing 2 changed files with 40 additions and 59 deletions.
diff --git a/static/css/s2.css b/static/css/s2.css
@@ -8940,6 +8940,7 @@ span.purim-emoji img{
   max-width: 760px;
   position: relative;
   padding: 0 30px;
+  counter-reset: css-counter 0;
 }
 .sheetContent .ref {
   cursor: pointer;
@@ -9580,6 +9581,42 @@ section.SheetOutsideBiText {
   box-shadow: 0px 1px 6px rgba(0, 0, 0, 0.25);
   margin-bottom: 30px;
 }
+
+.SheetOutsideBiText, .SheetSource {
+    counter-increment: css-counter 1;
+}
+
+.SheetOutsideBiText:before,
+.SheetSource:before {
+  position: absolute;
+  color:  var(--medium-grey);
+  font-size: 12px;
+}
+
+.english .SheetOutsideBiText:before,
+.english .SheetSource:before {
+  content: counter(css-counter);
+  left: -34px;
+  font-family: var(--english-sans-serif-font-family);
+}
+
+.bilingual .SheetOutsideBiText:before,
+.bilingual .SheetSource:before {
+  content: counter(css-counter);
+  right: -34px;
+  font-family: var(--english-sans-serif-font-family);
+
+}
+
+
+.hebrew .SheetOutsideBiText:before,
+.hebrew .SheetSource:before {
+  content: counter(css-counter, hebrew);
+  right: -34px;
+  font-family: var(--hebrew-sans-serif-font-family);
+}
+
+
 .readerPanel.hebrew section.SheetSource .sheetItem > .he,
 .readerPanel.english section.SheetSource .sheetItem > .en,
 .readerPanel.hebrew section.SheetOutsideBiText .sheetItem > .he,

diff --git a/static/js/Sheet.jsx b/static/js/Sheet.jsx
@@ -242,7 +242,6 @@ class SheetContent extends Component {
             key={i}
             source={source}
             sourceNum={i + 1}
-            linkCount={Sefaria.linkCount(source.ref)}
             cleanHTML={this.cleanHTML}
             sheetSourceClick={this.props.sheetSourceClick.bind(this, source)}
             highlighted={highlighted}
@@ -372,17 +371,6 @@ class SheetContent extends Component {
 
 class SheetSource extends Component {
   render() {
-    var linkCountElement;
-    var linkCount = this.props.linkCount;
-    var minOpacity = 20, maxOpacity = 70;
-    var linkScore = linkCount ? Math.min(linkCount + minOpacity, maxOpacity) / 100.0 : 0;
-    var style = {opacity: linkScore};
-
-    linkCountElement = (
-      <div className="linkCount sans-serif"  title={linkCount + " Connections Available"}>
-        <span className="linkCountDot" style={style}></span>
-      </div>
-    );
 
     const sectionClasses= classNames(
       "SheetSource",
@@ -404,7 +392,7 @@ class SheetSource extends Component {
         <div className={containerClasses} 
           onClick={this.props.sheetSourceClick}
           data-node={this.props.source.node}
-          aria-label={"Click to see " + this.props.linkCount +  " connections to this source"}
+          aria-label={"Click to see connections to this source"}
           tabIndex="0"
           onKeyPress={function(e) {
             e.charCode === 13 ? this.props.sheetSourceClick(e):null}.bind(this)
@@ -413,22 +401,7 @@ class SheetSource extends Component {
           <div className="customSourceTitle" role="heading" aria-level="3">
             <div className="titleBox">{this.props.source.title.stripHtml()}</div>
           </div> : null}
-
-          <div className="segmentNumber sheetSegmentNumber sans-serif">
-            <span className="en">
-              <span className="segmentNumberInner">
-                {this.props.sheetNumbered === 0 ? null : this.props.sourceNum}
-              </span>
-            </span>
-            <span className="he">
-              <span className="segmentNumberInner">
-                {this.props.sheetNumbered === 0 ? null : Sefaria.hebrew.encodeHebrewNumeral(this.props.sourceNum)}
-              </span>
-            </span>
-          </div>
-
-          {linkCountElement}
-
+
           {this.props.source.text && this.props.source.text.he && this.props.source.text.he !== "" ?
           <div className="he">
             {this.props.source.options && this.props.source.options.sourcePrefix && this.props.source.options.sourcePrefix != "" ? <sup className="sourcePrefix">{this.props.source.options.sourcePrefix}</sup> : null }
@@ -478,15 +451,7 @@ class SheetComment extends Component {
     return (
       <section className="SheetComment">
         <div className={containerClasses} data-node={this.props.source.node} onClick={this.props.sheetSourceClick} aria-label={"Click to see " + this.props.linkCount +  " connections to this source"} tabIndex="0" onKeyPress={function(e) {e.charCode == 13 ? this.props.sheetSourceClick(e):null}.bind(this)} >
-          <div className="segmentNumber sheetSegmentNumber sans-serif">
-            <span className="en">
-              <span className="segmentNumberInner">{this.props.sheetNumbered == 0 ? null : this.props.sourceNum}</span>
-            </span>
-            <span className="he">
-              <span className="segmentNumberInner">{this.props.sheetNumbered == 0 ? null : Sefaria.hebrew.encodeHebrewNumeral(this.props.sourceNum)}</span>
-            </span>
-          </div>
-
+
           <div className={lang}>
               <div 
                 className="sourceContentText"
@@ -545,14 +510,6 @@ class SheetOutsideText extends Component {
     return (
       <section className="SheetOutsideText">
         <div className={containerClasses} data-node={this.props.source.node} onClick={this.props.sheetSourceClick} aria-label={"Click to see " + this.props.linkCount +  " connections to this source"} tabIndex="0" onKeyPress={function(e) {e.charCode == 13 ? this.props.sheetSourceClick(e):null}.bind(this)} >
-          <div className="segmentNumber sheetSegmentNumber sans-serif">
-            <span className="en">
-              <span className="segmentNumberInner">{this.props.sheetNumbered === 0 ? null : this.props.sourceNum}</span>
-            </span>
-            <span className="he">
-              <span className="segmentNumberInner">{this.props.sheetNumbered === 0 ? null : Sefaria.hebrew.encodeHebrewNumeral(this.props.sourceNum)}</span>
-            </span>
-          </div>
 
           <div className={lang}>{this.props.source.options && this.props.source.options.sourcePrefix && this.props.source.options.sourcePrefix != "" ? <sup className="sourcePrefix">{this.props.source.options.sourcePrefix}</sup> : null }
               <div className="sourceContentText" dangerouslySetInnerHTML={ {__html: Sefaria.util.cleanHTML(this.props.source.outsideText)} }></div>
@@ -590,14 +547,6 @@ class SheetOutsideBiText extends Component {
     return (
       <section className={sectionClasses}>
         <div className={containerClasses} data-node={this.props.source.node} onClick={this.props.sheetSourceClick} aria-label={"Click to see " + this.props.linkCount +  " connections to this source"} tabIndex="0" onKeyPress={function(e) {e.charCode == 13 ? this.props.sheetSourceClick(e):null}.bind(this)} >
-          <div className="segmentNumber sheetSegmentNumber sans-serif">
-            <span className="en">
-                <span className="segmentNumberInner">{this.props.sheetNumbered === 0 ? null : this.props.sourceNum}</span>
-            </span>
-            <span className="he">
-                <span className="segmentNumberInner">{this.props.sheetNumbered === 0 ? null : Sefaria.hebrew.encodeHebrewNumeral(this.props.sourceNum)}</span>
-            </span>
-          </div>
 
           <div className="he">
             {this.props.source.options && this.props.source.options.sourcePrefix && this.props.source.options.sourcePrefix != "" ? <sup className="sourcePrefix">{this.props.source.options.sourcePrefix}</sup> : null }
@@ -678,11 +627,6 @@ class SheetMedia extends Component {
     return (
       <section className="SheetMedia">
         <div className={containerClasses} data-node={this.props.source.node} onClick={this.props.sheetSourceClick} aria-label={"Click to  " + this.props.linkCount +  " connections to this source"} tabIndex="0" onKeyPress={function(e) {e.charCode == 13 ? this.props.sheetSourceClick(e):null}.bind(this)} >
-          <div className="segmentNumber sheetSegmentNumber sans-serif">
-            <span className="en"> <span className="segmentNumberInner">{this.props.sheetNumbered === 0 ? null : this.props.sourceNum}</span> </span>
-            <span className="he"> <span
-              className="segmentNumberInner">{this.props.sheetNumbered === 0 ? null : Sefaria.hebrew.encodeHebrewNumeral(this.props.sourceNum)}</span> </span>
-          </div>
 
           <div className="sourceContentText centeredSheetContent" dangerouslySetInnerHTML={ {__html: this.makeMediaEmbedContent()} }></div>
           <div className="clearFix"></div>