feat(frontend/controller): re-order search result fields for readability

- use non-location based css names - use opacity for theme compatibility
shabados · May 15, 2020 · 5826ab9 · 5826ab9
1 parent 1fe6a8f
commit 5826ab9
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 27 deletions.
diff --git a/app/frontend/src/Controller/Search.css b/app/frontend/src/Controller/Search.css
@@ -56,26 +56,19 @@
   overflow: hidden;
 }
 
-.search .result .result-header {
-  display: flex;
-  flex-direction: row;
+.search .result .secondary {
   font-size: 0.8em;
-  margin-bottom: 0.2em;
-  color: rgba(121, 118, 118, 0.863);
+  opacity: .85;
 }
 
-.search .result .result-header .page {
-  margin-left: 30px;
+.search .result .citation {
+  display: flex;
+  flex-direction: row;
+  font-size: 0.8em;
+  opacity: 0.55;
+  font-style: italic;
 }
 
-.search .result .result-header .author {
-  margin-left: 30px;
+.search .result .citation > span + span {
+  padding-left: .25em;
 }
-
-.search .result .result-footer {
-  font-size: 0.8em;
-  color: rgba(121, 118, 118, 0.863);
-  overflow: hidden;
-  white-space: nowrap;
-  text-overflow: ellipsis;
-}
diff --git a/app/frontend/src/Controller/Search.js b/app/frontend/src/Controller/Search.js
@@ -143,23 +143,24 @@ const Search = ( { updateFocus, register, focused } ) => {
     return (
       <ListItem className={classNames( { focused } )} key={lineId} onClick={onClick} ref={ref}>
         <div className="result">
-          <span className="result-header">
-            <span className="section">{shabad.section.nameEnglish}</span>
-            <span className="page">
-              {pageName}
-              {' '}
-              {sourcePage}
-            </span>
-            <span className="author">{writerName}</span>
-          </span>
           <span className="gurmukhi text">
             {beforeMatch ? <span className="words">{beforeMatch}</span> : null}
             {match ? <span className="matched words">{match}</span> : null}
             {afterMatch ? <span className="words">{afterMatch}</span> : null}
           </span>
-          <span className="result-footer">
+          <span className="secondary text">
             <span className="english-translation">{englishTranslation}</span>
           </span>
+          <span className="citation">
+            <span className="author">({writerName}.</span>
+            <span className="section">"{shabad.section.nameEnglish}",</span>
+            <span className="page">
+              {pageName}
+              {' '}
+              {sourcePage})
+            </span>
+          </span>
+
         </div>
       </ListItem>
     )