Skip to content

Commit

Permalink
react/live-questions: remove tab, use icon switch instead
Browse files Browse the repository at this point in the history
  • Loading branch information
@vellip
vellip committed Nov 13, 2024
1 parent bb4dcc0 commit 0a7e0c1
Show file tree
Hide file tree
Showing 6 changed files with 127 additions and 136 deletions.
10 changes: 10 additions & 0 deletions changelog/8465.md
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,10 @@
### Removed
- Old tab navigation from live questions

### Added
- IconSwitch to live questions
- new scss file for live questions

### Changed
- IconSwitch now always has full width on mobile
- IconSwitch title is now optional
13 changes: 13 additions & 0 deletions meinberlin/assets/scss/components_user_facing/_icon_switch.scss
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,19 @@
.icon-switch {
display: inline-block;
text-align: left;
width: 100%;

.button {
flex: 1;
}

@media screen and (min-width: $breakpoint-tablet) {
width: auto;

.button {
flex: none;
}
}
}

.icon-switch--full-width {
Expand Down
9 changes: 9 additions & 0 deletions meinberlin/assets/scss/components_user_facing/_live_questions.scss
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,9 @@
.live-question {
display: flex;
flex-direction: column;
}

.live-question__icon-switch {
margin-left: auto;
margin-bottom: .625em;
}
1 change: 1 addition & 0 deletions meinberlin/assets/scss/style_user_facing.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -31,6 +31,7 @@
@import "components_user_facing/herounit_image_with_aside";
@import "components_user_facing/input";
@import "components_user_facing/item_detail";
@import "components_user_facing/live_questions";
@import "components_user_facing/moderator_feedback";
@import "components_user_facing/moderator_notes";
@import "components_user_facing/moderator_status";
Expand Down
2 changes: 1 addition & 1 deletion meinberlin/react/contrib/IconSwitch.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@ import { classNames } from './helpers'

export const IconSwitch = ({ buttons, viewModeStr, fullWidth, className }) => (
<div className={classNames('icon-switch', fullWidth && 'icon-switch--full-width', className)}>
<span className="text--strong">{viewModeStr}</span>
{viewModeStr && <span className="text--strong">{viewModeStr}</span>}
<div className="icon-switch__group" role="group">
{buttons.map((button) => (
<button
Expand Down
228 changes: 93 additions & 135 deletions meinberlin/react/livequestions/QuestionBox.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,9 +6,9 @@ import QuestionList from './QuestionList'
import InfoBox from './InfoBox'
import Filters from './Filters'
import StatisticsBox from './StatisticsBox'
import { IconSwitch } from '../contrib/IconSwitch'

const selectAffiliationStr = django.gettext('select affiliation')
const informationStr = django.gettext('Information')
const questionsStr = django.gettext('Questions')
const statisticsStr = django.gettext('Statistics')
const displayStr = django.gettext('display on screen')
Expand All @@ -30,7 +30,8 @@ export default class QuestionBox extends React.Component {
orderedByLikes: false,
filterChanged: false,
orderingChanged: false,
pollingPaused: false
pollingPaused: false,
showQuestions: true
}
}

Expand Down Expand Up @@ -175,145 +176,102 @@ export default class QuestionBox extends React.Component {

render () {
return (
<div>
<div className="tablist mb-0">
<div className="container">
<nav className="nav justify-content-center">
<a
id="tab-information"
className="tab"
data-bs-toggle="tab"
href="#tabpanel-information"
role="tab"
aria-controls="tabpanel-information"
aria-expanded="false"
>
{informationStr}
</a>
<a
id="tab-questions"
className="tab active"
data-bs-toggle="tab"
href="#tabpanel-questions"
role="tab"
aria-controls="tabpanel-questions"
aria-expanded="true"
>
{questionsStr}
</a>
<a
id="tab-statistics"
className="tab"
data-bs-toggle="tab"
href="#tabpanel-statistics"
role="tab"
aria-controls="tabpanel-statistics"
aria-expanded="false"
>
{statisticsStr}
</a>
</nav>
</div>
</div>
<div
className="tabpanel"
id="tabpanel-information"
role="tabpanel"
aria-labelledby="tab-information"
aria-hidden="false"
>
<div className="container">
<div className="offset-lg-2 col-lg-8">
{this.props.information}
</div>
</div>
</div>

<div
className="tabpanel active"
id="tabpanel-questions"
role="tabpanel"
aria-labelledby="tab-questions"
aria-hidden="true"
>
{this.props.hasAskQuestionsPermission &&
<div className="container">
<div className="offset-lg-2 col-lg-8">
<QuestionForm
restartPolling={this.restartPolling}
category_dict={this.props.category_dict}
questions_api_url={this.props.questions_api_url}
privatePolicyLabel={this.props.privatePolicyLabel}
/>
</div>
</div>}
<div>
<div className="container">
<div className="offset-lg-2 col-lg-8">
<InfoBox
isModerator={this.props.isModerator}
/>
<div className="live_questions__filters--parent">
<Filters
categories={this.props.categories}
currentCategory={this.state.category}
currentCategoryName={this.state.categoryName}
setCategories={this.setCategory.bind(this)}
orderedByLikes={this.state.orderedByLikes}
toggleOrdering={this.toggleOrdering.bind(this)}
displayOnShortlist={this.state.displayOnShortlist}
displayNotHiddenOnly={this.state.displayNotHiddenOnly}
toggleDisplayOnShortlist={this.toggleDisplayOnShortlist.bind(this)}
toggledisplayNotHiddenOnly={this.toggledisplayNotHiddenOnly.bind(this)}
isModerator={this.props.isModerator}
/>
{this.props.isModerator &&
<div>
<a className="btn btn--light live_questions__filters--screen-btn" rel="noopener noreferrer" href={this.props.present_url} target="_blank">
<span className="fa-stack fa-1x">
<i className="fas fa-tv fa-stack-2x" aria-label="hidden"> </i>
<i className="fas fa-arrow-up fa-stack-1x" aria-label="hidden"> </i>
</span>
{displayStr}
</a>
</div>}
</div>
</div>
</div>
<div className="module-content--light u-spacer-bottom">
<div className="live-question">
{this.props.hasAskQuestionsPermission && (
<QuestionForm
restartPolling={this.restartPolling}
category_dict={this.props.category_dict}
questions_api_url={this.props.questions_api_url}
privatePolicyLabel={this.props.privatePolicyLabel}
/>
)}
<IconSwitch
className="live-question__icon-switch"
buttons={[
{
label: questionsStr,
icon: 'fa fa-list',
id: 'show_questions',
isActive: this.state.showQuestions,
handleClick: () => {
this.setState({
showQuestions: true
})
}
},
{
label: statisticsStr,
icon: 'fas fa-chart-bar',
id: 'show_stats',
isActive: !this.state.showQuestions,
handleClick: () => {
this.setState({
showQuestions: false
})
}
}
]}
/>
{this.state.showQuestions
? (
<>
<div className="container">
<div className="offset-lg-2 col-lg-8">
<QuestionList
questions={this.state.filteredQuestions}
removeFromList={this.removeFromList.bind(this)}
updateQuestion={this.updateQuestion.bind(this)}
handleLike={this.handleLike.bind(this)}
<InfoBox
isModerator={this.props.isModerator}
togglePollingPaused={this.togglePollingPaused.bind(this)}
hasLikingPermission={this.props.hasLikingPermission}
/>
<div className="live_questions__filters--parent">
<Filters
categories={this.props.categories}
currentCategory={this.state.category}
currentCategoryName={this.state.categoryName}
setCategories={this.setCategory.bind(this)}
orderedByLikes={this.state.orderedByLikes}
toggleOrdering={this.toggleOrdering.bind(this)}
displayOnShortlist={this.state.displayOnShortlist}
displayNotHiddenOnly={this.state.displayNotHiddenOnly}
toggleDisplayOnShortlist={this.toggleDisplayOnShortlist.bind(this)}
toggledisplayNotHiddenOnly={this.toggledisplayNotHiddenOnly.bind(this)}
isModerator={this.props.isModerator}
/>
{this.props.isModerator &&
<div>
<a className="btn btn--light live_questions__filters--screen-btn" rel="noopener noreferrer" href={this.props.present_url} target="_blank">
<span className="fa-stack fa-1x">
<i className="fas fa-tv fa-stack-2x" aria-label="hidden"> </i>
<i className="fas fa-arrow-up fa-stack-1x" aria-label="hidden"> </i>
</span>
{displayStr}
</a>
</div>}
</div>
</div>
</div>
</div>
<div className="live_questions__anchor">
<span id="question-list-end" />
</div>
</div>
</div>
<div
className="tabpanel module-content--light"
id="tabpanel-statistics"
role="tabpanel"
aria-labelledby="tab-statistics"
aria-hidden="false"
>
<StatisticsBox
answeredQuestions={this.state.answeredQuestions}
questions_api_url={this.props.questions_api_url}
categories={this.props.categories}
isModerator={this.props.isModerator}
/>
</div>
<div className="module-content--light u-spacer-bottom">
<div className="container">
<div className="offset-lg-2 col-lg-8">
<QuestionList
questions={this.state.filteredQuestions}
removeFromList={this.removeFromList.bind(this)}
updateQuestion={this.updateQuestion.bind(this)}
handleLike={this.handleLike.bind(this)}
isModerator={this.props.isModerator}
togglePollingPaused={this.togglePollingPaused.bind(this)}
hasLikingPermission={this.props.hasLikingPermission}
/>
</div>
</div>
</div>
<div className="live_questions__anchor">
<span id="question-list-end" />
</div>
</>)
: <StatisticsBox
answeredQuestions={this.state.answeredQuestions}
questions_api_url={this.props.questions_api_url}
categories={this.props.categories}
isModerator={this.props.isModerator}
/>}
</div>
)
}
Expand Down

0 comments on commit 0a7e0c1

Please sign in to comment.