react/livequestions: style filter sort and like card

changelog/_8467.md

@@ -0,0 +1,12 @@
+### Removed
+
+- Removed `Infobox` component
+
+### Changed
+
+- Restyled `Filters` component and added filter button
+
+### Added
+
+- Added new `LikeCard` component
+– Added `LikedCard` component to `QuestionModerator` and `QuestionUser` components

meinberlin/assets/scss/components/_live_questions.scss

@@ -1,109 +1,3 @@
-.live_questions__filters {
-    @media screen and (min-width: $breakpoint-xs) {
-        display: inline-flex;
-    }
-}
-
-.live_questions__filters--parent {
-    width: 100%;
-    justify-content: space-between;
-    margin-bottom: $spacer;
-
-    @media screen and (min-width: $breakpoint-xs) {
-        display: inline-flex;
-    }
-}
-
-.live_questions__filters--dropdown {
-    @media screen and (min-width: $breakpoint-xs) {
-        margin-right: $spacer;
-        margin-bottom: 0;
-    }
-
-    button {
-        min-width: 100%;
-    }
-}
-
-.live_questions__filters--btns {
-    width: 100%;
-    display: inline-flex;
-    justify-content: flex-end;
-
-    .switch--btn {
-        border-radius: $border-radius;
-    }
-}
-
-.live_questions__filters--screen-btn {
-    width: 100%;
-}
-
-.live-question__action-bar {
-    width: 100%;
-    display: inline-flex;
-    justify-content: space-between;
-}
-
-.live_questions__question {
-    font-size: $font-size-lg;
-    margin-bottom: 0.25 * $spacer;
-}
-
-.infobox__box {
-    background-color: $bg-tertiary;
-    padding: 0.5 * $spacer $spacer;
-    font-size: $font-size-sm;
-    margin-bottom: $spacer;
-
-    i {
-        position: absolute;
-        color: $primary;
-        line-height: 1.2rem;
-    }
-}
-
-.infobox__text {
-    margin-left: 2 * $spacer;
-}
-
-.infobox__icon {
-    margin-left: -0.6 * $spacer;
-    position: absolute;
-}
-
-// infobox bigger
-@media screen and (min-width: $breakpoint-xs) {
-    .infobox {
-        display: inline-flex;
-    }
-
-    .infobox__box {
-        text-align: center;
-        padding: $spacer;
-        margin-right: $spacer;
-    }
-
-    .infobox__box > i {
-        display: block;
-        position: relative;
-    }
-
-    .infobox__text {
-        margin-left: 0;
-    }
-
-    .infobox__icon {
-        display: block;
-        position: relative;
-        margin: auto;
-    }
-
-    .infobox__box--last {
-        margin-right: 0;
-    }
-}
-
 .progress {
     margin-bottom: $spacer;
     position: relative;
@@ -122,10 +16,6 @@
     z-index: 1;
 }
 
-.checkbox-btn {
-    display: inline-block;
-}
-
 .live_questions_infographic__footer {
     position: fixed;
     right: 0;
@@ -177,10 +67,6 @@
     }
 }
 
-.live_questions__like {
-    padding-top: 0.5 * $spacer;
-}
-
 .live_question__presentation {
     margin-top: 5 * $spacer;
 }
@@ -196,11 +82,3 @@
     font-size: 0.6rem;
     line-height: inherit;
 }
-
-.live_questions__select > .select2-container {
-    min-width: 100%;
-
-    @media screen and (min-width: $breakpoint-xs) {
-        min-width: 15rem;
-    }
-}

meinberlin/assets/scss/components_user_facing/_card.scss

@@ -30,3 +30,7 @@
 .card__link--hover {
     text-decoration: underline !important; // BO overide
 }
+
+.card__pill {
+    margin-bottom: 0.3em;
+}

meinberlin/assets/scss/components_user_facing/_rating.scss

@@ -20,11 +20,11 @@
     i {
         margin-right: 0.4em;
         margin-bottom: 0.4em;
-        display: block;
+        display: inline;
+    }
 
-        @media screen and (min-width: $breakpoint-palm) {
-            display: inline;
-        }
+    &--active {
+        font-weight: bold;
     }
 
     .fa-chevron-up:before {

meinberlin/react/livequestions/Filters.jsx

@@ -4,15 +4,16 @@ import django from 'django'
 export default class Filter extends React.Component {
   selectCategory (e) {
     e.preventDefault()
-    const category = e.target.getAttribute('data-value')
-    this.props.setCategories(category)
+    this.setState({
+      category: e.target.value
+    })
   }
 
-  getButtonClass () {
-    if (this.props.currentCategory === '-1') {
-      return 'btn btn--light btn--select live_questions__filters--dropdown dropdown-toggle'
-    } else {
-      return 'btn btn--light btn--select live_questions__filters--dropdown dropdown-toggle'
+  handleSubmit (e) {
+    e.preventDefault()
+    const category = this.state?.category
+    if (category) {
+      this.props.setCategories(category)
     }
   }
 
@@ -21,27 +22,36 @@ export default class Filter extends React.Component {
     const onlyShowMarkedText = django.gettext('only show marked questions')
     const displayNotHiddenText = django.gettext('display only questions which are not hidden')
     const orderLikesText = django.gettext('order by likes')
+    const questionsText = django.gettext('Questions')
+    const filterText = django.gettext('Filter')
+    const affiliationText = django.gettext('Affiliation')
     return (
-      <div className="live_questions__filters">
-        {this.props.categories.length > 0
-          ? <div className="dropdown live_questions__filters--dropdown">
-            <button
-              className={this.getButtonClass()} type="button" id="dropdownMenuButton"
-              data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false"
-            >
-              {this.props.currentCategoryName}
-              <i className="fa fa-caret-down" aria-label={onlyShowMarkedText} />
-            </button>
-            <div className="dropdown-menu" aria-labelledby="dropdownMenuButton">
-              <button className="dropdown-item" data-value={-1} onClick={this.selectCategory.bind(this)} href="#">{allTag}</button>
-              {this.props.categories.map((category, index) => {
-                return <button className="dropdown-item" key={index} data-value={category} onClick={this.selectCategory.bind(this)} href="#">{category}</button>
-              })}
+      <>
+        <h2 id="filter-form-heading">{questionsText}</h2>
+        <form className="form panel--heavy" onSubmit={this.handleSubmit.bind(this)} aria-labelledby="filter-form-heading">
+          {this.props.categories.length > 0
+            ? <div className="form-group">
+              <label htmlFor="filterCategorySelect">{affiliationText}*</label>
+              <select
+                id="filterCategorySelect"
+                className="form-control"
+                onChange={this.selectCategory.bind(this)}
+              >
+                <option value={-1}>{allTag}</option>
+                {this.props.categories.map((category, index) => {
+                  return <option key={index} value={category}>{category}</option>
+                })}
+              </select>
+            </div> // eslint-disable-line react/jsx-closing-tag-location
+            : ''}
+          <div className="form-actions">
+            <div className="form-actions__right">
+              <button type="submit" className="button">{filterText}</button>
             </div>
-          </div> // eslint-disable-line react/jsx-closing-tag-location
-          : ''}
+          </div>
+        </form>
         {this.props.isModerator &&
-          <div className="live_questions__filters--btns">
+          <div className="block">
             <div className="checkbox-btn u-spacer-right">
               <label
                 htmlFor="markedCheck"
@@ -97,7 +107,7 @@ export default class Filter extends React.Component {
               </label>
             </div>
           </div>}
-      </div>
+      </>
     )
   }
 }