clean up claim_search filters

config.js

@@ -2,6 +2,8 @@
 // On Desktop App, this will find .env.defaults and optional .env in root dir
 require('dotenv-defaults').config({ silent: false });
 
+console.log('process.env.SIMPLE_SITE', process.env.SIMPLE_SITE);
+
 const config = {
   MATOMO_URL: process.env.MATOMO_URL,
   MATOMO_ID: process.env.MATOMO_ID,

ui/component/claimListDiscover/view.jsx

@@ -279,7 +279,7 @@ function ClaimListDiscover(props: Props) {
 
   if (durationParam) {
     if (durationParam === CS.DURATION_SHORT) {
-      options.duration = '<=1800';
+      options.duration = '<=240';
     } else if (durationParam === CS.DURATION_LONG) {
       options.duration = '>=1800';
     }
@@ -472,7 +472,7 @@ function ClaimListDiscover(props: Props) {
           {!repostedClaimId && (
             <div className="section__header--actions">
               {headerToUse}
-              {meta && <div className="card__actions--inline">{meta}</div>}
+              {meta && <div className="section__actions--no-margin">{meta}</div>}
             </div>
           )}
           <ClaimList
@@ -501,7 +501,7 @@ function ClaimListDiscover(props: Props) {
         <div>
           <div className="section__header--actions">
             {headerToUse}
-            {meta && <div className="card__actions--inline">{meta}</div>}
+            {meta && <div className="section__actions--no-margin">{meta}</div>}
           </div>
 
           <ClaimList

ui/component/claimListHeader/view.jsx

@@ -15,8 +15,6 @@ import SEARCHABLE_LANGUAGES from 'constants/searchable_languages';
 
 type Props = {
   defaultTags: string,
-  followedTags?: Array<Tag>,
-  tags: string,
   freshness?: string,
   defaultFreshness?: string,
   claimType?: Array<string>,
@@ -40,8 +38,6 @@ type Props = {
 function ClaimListHeader(props: Props) {
   const {
     defaultTags,
-    followedTags,
-    tags,
     freshness,
     defaultFreshness,
     claimType,
@@ -66,12 +62,7 @@ function ClaimListHeader(props: Props) {
   const [expanded, setExpanded] = usePersistedState(`expanded-${location.pathname}`, false);
   const [orderParamEntry, setOrderParamEntry] = usePersistedState(`entry-${location.pathname}`, CS.ORDER_BY_TRENDING);
   const [orderParamUser, setOrderParamUser] = usePersistedState(`orderUser-${location.pathname}`, CS.ORDER_BY_TRENDING);
-  const followed = (followedTags && followedTags.map(t => t.name)) || [];
   const urlParams = new URLSearchParams(search);
-  const tagsParam = // can be 'x,y,z' or 'x' or ['x','y'] or CS.CONSTANT
-    (tags && getParamFromTags(tags)) ||
-    (urlParams.get(CS.TAGS_KEY) !== null && urlParams.get(CS.TAGS_KEY)) ||
-    (defaultTags && getParamFromTags(defaultTags));
   const freshnessParam = freshness || urlParams.get(CS.FRESH_KEY) || defaultFreshness;
   const contentTypeParam = urlParams.get(CS.CONTENT_KEY);
   const streamTypeParam =
@@ -148,14 +139,6 @@ function ClaimListHeader(props: Props) {
     push(newSearch);
   }
 
-  function getParamFromTags(t) {
-    if (t === CS.TAGS_ALL || t === CS.TAGS_FOLLOWED) {
-      return t;
-    } else if (Array.isArray(t)) {
-      return t.join(',');
-    }
-  }
-
   function buildUrl(delta) {
     const newUrlParams = new URLSearchParams(location.search);
     CS.KEYS.forEach(k => {
@@ -226,7 +209,7 @@ function ClaimListHeader(props: Props) {
     <>
       <div className="claim-search__wrapper">
         <div className="claim-search__top">
-          <div className="claim-search__top-row">
+          <div className="claim-search__menu-group">
             {!hideFilters &&
               CS.ORDER_BY_TYPES.map(type => (
                 <Button
@@ -249,13 +232,14 @@ function ClaimListHeader(props: Props) {
               ))}
           </div>
 
-          <div className="claim-search__top-row">
+          <div className="claim-search__menu-group">
             {!hideAdvancedFilter && !SIMPLE_SITE && (
               <Button
                 button="alt"
                 aria-label={__('More')}
                 className={classnames(`button-toggle button-toggle--top button-toggle--more`, {
                   'button-toggle--custom': isFiltered(),
+                  'button-toggle--active': expanded,
                 })}
                 icon={ICONS.SLIDERS}
                 onClick={() => setExpanded(!expanded)}
@@ -277,7 +261,7 @@ function ClaimListHeader(props: Props) {
         </div>
         {expanded && !SIMPLE_SITE && (
           <>
-            <div className={classnames('card--inline', `claim-search__menus`)}>
+            <div className={classnames(`card claim-search__menus`)}>
               {/* FRESHNESS FIELD */}
               {orderParam === CS.ORDER_BY_TOP && (
                 <div className="claim-search__input-container">
@@ -421,8 +405,8 @@ function ClaimListHeader(props: Props) {
                     {CS.DURATION_TYPES.map(dur => (
                       <option key={dur} value={dur}>
                         {/* i18fixme */}
-                        {dur === CS.DURATION_SHORT && __('Short')}
+                        {dur === CS.DURATION_SHORT && __('Short (< 4 minutes)')}
-                        {dur === CS.DURATION_LONG && __('Long')}
+                        {dur === CS.DURATION_LONG && __('Long (> 20 min)')}
                         {dur === CS.DURATION_ALL && __('Any')}
                       </option>
                     ))}
@@ -430,51 +414,6 @@ function ClaimListHeader(props: Props) {
                 </div>
               )}
 
-              {/* TAGS FIELD */}
-              {!tags && (
-                <div className={'claim-search__input-container'}>
-                  <FormField
-                    className={classnames('claim-search__dropdown', {
-                      'claim-search__dropdown--selected':
-                        ((!defaultTags || defaultTags === CS.TAGS_ALL) && tagsParam && tagsParam !== CS.TAGS_ALL) ||
-                        (defaultTags === CS.TAGS_FOLLOWED && tagsParam !== CS.TAGS_FOLLOWED),
-                    })}
-                    label={__('Tags')}
-                    type="select"
-                    name="tags"
-                    value={tagsParam || CS.TAGS_ALL}
-                    onChange={e =>
-                      handleChange({
-                        key: CS.TAGS_KEY,
-                        value: e.target.value,
-                      })
-                    }
-                  >
-                    {[
-                      CS.TAGS_ALL,
-                      CS.TAGS_FOLLOWED,
-                      ...followed,
-                      ...(followed.includes(tagsParam) || tagsParam === CS.TAGS_ALL || tagsParam === CS.TAGS_FOLLOWED
-                        ? []
-                        : [tagsParam]), // if they unfollow while filtered, add Other
-                    ].map(tag => (
-                      <option
-                        key={tag}
-                        value={tag}
-                        className={classnames({
-                          'claim-search__input-special': !followed.includes(tag),
-                        })}
-                      >
-                        {followed.includes(tag) && typeof tag === 'string' && toCapitalCase(tag)}
-                        {tag === CS.TAGS_ALL && __('Any')}
-                        {tag === CS.TAGS_FOLLOWED && __('Following')}
-                        {!followed.includes(tag) && tag !== CS.TAGS_ALL && tag !== CS.TAGS_FOLLOWED && __('Other')}
-                      </option>
-                    ))}
-                  </FormField>
-                </div>
-              )}
-
               {/* PAID FIELD */}
               <div className={'claim-search__input-container'}>
                 <FormField
@@ -503,7 +442,12 @@ function ClaimListHeader(props: Props) {
               {channelIdsInUrl && (
                 <div className={'claim-search__input-container'}>
                   <label>{__('Advanced Filters from URL')}</label>
-                  <Button button="alt" label={__('Clear')} onClick={handleAdvancedReset} />
+                  <Button
+                    button="alt"
+                    className="claim-search__filter-button"
+                    label={__('Clear')}
+                    onClick={handleAdvancedReset}
+                  />
                 </div>
               )}
             </div>

ui/page/top/view.jsx

@@ -31,7 +31,7 @@ function TopPage(props: Props) {
           </span>
         )}
         header={
-          <div className="claim-search__top-row">
+          <div className="claim-search__menu-group">
             <Button
               label={name}
               button="alt"

ui/scss/component/_channel.scss

@@ -206,7 +206,8 @@ $metadata-z-index: 1;
   @media (max-width: $breakpoint-small) {
     flex-direction: column;
 
-    > * {
+    > .button,
+    > .button-group {
       margin-right: 0;
       margin-bottom: var(--spacing-xs);
       margin-left: auto;

ui/scss/component/_claim-list.scss

@@ -51,7 +51,6 @@
   display: flex;
   align-items: center;
   margin-left: auto;
-  //   padding-top: var(--spacing-m);
 
   & > * {
     margin-left: var(--spacing-s);
@@ -414,10 +413,6 @@
     &:not(:first-child) {
       margin-top: var(--spacing-s);
     }
-
-    .channel-thumbnail {
-      display: none;
-    }
   }
 }
 
@@ -467,7 +462,6 @@
   flex-direction: row;
   justify-content: space-between;
   align-items: center;
-  height: 2.1rem;
   font-size: var(--font-body);
 }
 

ui/scss/component/_claim-search.scss

@@ -1,30 +1,37 @@
+.claim-search__wrapper {
+  width: 100%;
+
+  @media (min-width: $breakpoint-small) {
+    width: auto;
+  }
+}
+
 .claim-search__menus {
-  background-color: var(--color-card-background);
-  position: relative;
   display: flex;
+  flex-direction: column;
   flex-wrap: wrap;
   justify-content: flex-start;
   align-items: center;
   padding: var(--spacing-m);
   padding-bottom: var(--spacing-s);
   margin-top: var(--spacing-m);
+  margin-bottom: var(--spacing-m);
   color: var(--color-text-subtitle);
+  align-items: flex-start;
 
-  @media (max-width: $breakpoint-small) {
+  @media (min-width: $breakpoint-small) {
-    flex-direction: column;
+    flex-direction: row;
-    align-items: flex-start;
   }
 }
 
 .claim-search__dropdown {
   padding: 0 var(--spacing-m);
-  max-width: 400px;
+  padding-right: var(--spacing-l);
   font-size: var(--font-body);
   background-color: var(--color-card-background);
-  width: var(--option-select-width);
 
-  @media (max-width: $breakpoint-small) {
+  @media (min-width: $breakpoint-small) {
-    margin-left: 0;
+    max-width: var(--option-select-width);
   }
 }
 
@@ -36,31 +43,29 @@
   display: flex;
   flex-direction: column;
   font-size: var(--font-body);
-
+  width: 100%;
-  .button {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    padding: 0;
-  }
 
   &:not(:first-of-type) {
-    padding-left: var(--spacing-m);
+    margin-top: var(--spacing-s);
   }
 
-  @media (max-width: $breakpoint-small) {
+  @media (min-width: $breakpoint-small) {
-    padding-left: 0px;
+    width: auto;
 
     &:not(:first-of-type) {
-      margin-top: var(--spacing-s);
+      margin-top: 0;
-    }
+      padding-left: var(--spacing-m);
-
-    &:not(:first-of-type) {
-      padding-left: 0;
     }
   }
 }
 
+.claim-search__filter-button {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding: 0;
+}
+
 .claim-search__input-special {
   font-weight: var(--font-weight-bold);
 }
@@ -73,6 +78,11 @@
 .claim-search__top {
   display: flex;
   flex-wrap: wrap;
+  justify-content: space-between;
+
+  @media (min-width: $breakpoint-small) {
+    justify-content: flex-start;
+  }
 }
 
 .claim-search__top > div {
@@ -81,7 +91,13 @@
   }
 }
 
-.claim-search__top-row {
+.claim-search__menu-group {
   display: flex;
   flex-wrap: nowrap;
+
+  &:last-of-type {
+    .button-toggle:last-of-type {
+      margin-right: 0;
+    }
+  }
 }

ui/scss/component/_form-field.scss

@@ -43,12 +43,13 @@ select {
 }
 
 select {
-  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 96 96' xmlns='http://www.w3.org/2000/svg' fill='%23212529'%3E%3Cpath d='M17.172, 31.172c1.562, -1.562 4.095, -1.562 5.656, 0l25.172, 25.171l25.172, -25.171c1.562, -1.562 4.095, -1.562 5.656, 0c1.562, 1.562 1.562, 4.095 0, 5.656l-28, 28c-1.562, 1.562 -4.095, 1.562 -5.656, 0l-28, -28c-0.781, -0.781 -1.172, -1.805 -1.172, -2.828c0, -1.023 0.391, -2.047 1.172, -2.828Z'/%3E%3C/svg%3E%0A");
+  background-image: var(--select-toggle-background);
   background-position: 99% center;
   background-repeat: no-repeat;
   background-size: 1rem;
   padding-right: var(--spacing-l);
   padding-left: var(--spacing-s);
+  font-weight: bold;
 }
 
 fieldset-group {

ui/scss/themes/dark.scss

@@ -84,6 +84,7 @@
   --color-input-toggle-bg: var(--color-input-bg);
   --color-input-toggle-bg-hover: var(--color-secondary);
   --color-input-bg-selected: var(--color-primary-alt);
+  --select-toggle-background: url("data:image/svg+xml,%3Csvg viewBox='0 0 96 96' xmlns='http://www.w3.org/2000/svg' fill='%23ffffff'%3E%3Cpath d='M17.172, 31.172c1.562, -1.562 4.095, -1.562 5.656, 0l25.172, 25.171l25.172, -25.171c1.562, -1.562 4.095, -1.562 5.656, 0c1.562, 1.562 1.562, 4.095 0, 5.656l-28, 28c-1.562, 1.562 -4.095, 1.562 -5.656, 0l-28, -28c-0.781, -0.781 -1.172, -1.805 -1.172, -2.828c0, -1.023 0.391, -2.047 1.172, -2.828Z'/%3E%3C/svg%3E%0A");
 
   // Menu
   --color-menu-background: var(--color-header-background);

ui/scss/themes/light.scss

@@ -49,6 +49,7 @@
   --color-blockquote: var(--color-gray-3);
   --color-blockquote-bg: var(--color-gray-1);
   --color-input-bg-selected: var(--color-primary-alt);
+  --select-toggle-background: url("data:image/svg+xml,%3Csvg viewBox='0 0 96 96' xmlns='http://www.w3.org/2000/svg' fill='%23212529'%3E%3Cpath d='M17.172, 31.172c1.562, -1.562 4.095, -1.562 5.656, 0l25.172, 25.171l25.172, -25.171c1.562, -1.562 4.095, -1.562 5.656, 0c1.562, 1.562 1.562, 4.095 0, 5.656l-28, 28c-1.562, 1.562 -4.095, 1.562 -5.656, 0l-28, -28c-0.781, -0.781 -1.172, -1.805 -1.172, -2.828c0, -1.023 0.391, -2.047 1.172, -2.828Z'/%3E%3C/svg%3E%0A");
 
   --color-spinner-light: #ffffff;
   --color-spinner-dark: #212529;