Why is search so weird

lbryio · Nov 12, 2018 · aaf119a · aaf119a
1 parent de5a151
commit aaf119a
Show file tree

Hide file tree

Showing 6 changed files with 45 additions and 9 deletions.
diff --git a/src/renderer/component/common/form-components/form-field.jsx b/src/renderer/component/common/form-components/form-field.jsx
@@ -121,7 +121,7 @@ export class FormField extends React.PureComponent<Props> {
           </label>
         )}
         <div
-          className={classnames('form-field__input', {
+          className={classnames('form-field__input form-field__input--level', {
             'form-field--auto-height': type === 'markdown',
           })}
         >

diff --git a/src/renderer/modal/modalCreditIntro/view.jsx b/src/renderer/modal/modalCreditIntro/view.jsx
@@ -37,6 +37,9 @@ const ModalCreditIntro = (props: Props) => {
             {__('in free rewards for participating in the LBRY beta.')}
           </p>
         )}
+      </section>
+
+      <section className="card__content">
         <div className="card__actions card__actions--center">
           <Button button="primary" onClick={addBalance} label={__('Get Credits')} />
           <Button

diff --git a/src/renderer/scss/component/_file-list.scss b/src/renderer/scss/component/_file-list.scss
@@ -7,12 +7,15 @@
 }
 
 .tile__info {
+  @extend .media__info;
 }
 
 .tile__subtitle {
+  @extend .media__subtitle;
 }
 
 .tile__title {
+  @extend .media__title;
 }
 
 /*

diff --git a/src/renderer/scss/component/_form-field.scss b/src/renderer/scss/component/_form-field.scss
@@ -74,6 +74,10 @@
     padding: 0;
   }
 
+  &--level {
+    line-height: 2;
+  }
+
   input {
     &[type='checkbox'] {
       margin-top: 4px;
@@ -121,7 +125,7 @@
 .form-field__prefix,
 .form-field__postfix {
   font-weight: 500;
-  line-height: 2;
+  // line-height: 2;
 
   &.form-field--align-center {
     align-self: center;

diff --git a/src/renderer/scss/component/_media.scss b/src/renderer/scss/component/_media.scss
@@ -1,4 +1,25 @@
 .media {
+  &--large {
+    .media__thumb {
+      width: 40rem;
+      height: 20rem;
+      margin-bottom: 1rem;
+    }
+
+    .media__title {
+      @media (min-width: 601px) {
+        font-size: 1.15rem;
+        // height: 4rem;
+        line-height: 1.33;
+      }
+
+      @media (max-width: 600px) {
+        // height: 3rem;
+        margin-bottom: 0.5rem;
+      }
+    }
+  }
+
   &--placeholder {
     > * {
       animation-duration: 2.5s;

diff --git a/src/renderer/scss/component/_search.scss b/src/renderer/scss/component/_search.scss
@@ -3,13 +3,6 @@
 
 .search-results-wrapper {
   padding: 2rem;
-  // flex-flow: wrap column;
-  // margin-top: -$spacing-width;
-  // padding-bottom: $spacing-vertical;
-
-  .media__thumb--no-img {
-    width: 20rem; height: 10rem;
-  }
 }
 
 .search-results__content__row {
@@ -80,6 +73,18 @@
 }
 
 .search__results__row {
+  @extend .card__list;
+  position: relative;
+
+  &:not(:last-of-type) {
+    margin-bottom: 2rem;
+  }
+
+  .file-list__header {
+    @extend .media-group__header__title;
+    top: -1.5rem; left: 0;
+    position: absolute;
+  }
 }
 
 .search__top {