Skip to content

Commit

Permalink
refactor: split CourseListTabs styles
Browse files Browse the repository at this point in the history
  • Loading branch information
@injoonH
injoonH committed May 12, 2024
1 parent 5afcc20 commit dbc53a7
Show file tree
Hide file tree
Showing 4 changed files with 111 additions and 59 deletions.
46 changes: 19 additions & 27 deletions src/components/sections/dictionary/courselist/CourseListTabs.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,8 @@ import courseListsShape from '../../../../shapes/state/dictionary/CourseListsSha

import Scroller from '../../../Scroller';

import styles from './CourseListTabs.module.scss';

class CourseListTabs extends Component {
componentDidUpdate(prevProps, prevState, snapshot) {
const { user, selectedListCode } = this.props;
Expand Down Expand Up @@ -176,58 +178,48 @@ class CourseListTabs extends Component {
const { user, selectedListCode } = this.props;

return (
<div className={classNames('tabs', 'tabs--course-list')}>
<div className={classNames('tabs', styles.wrapper)}>
<Scroller noScrollX={false} noScrollY={true} expandBottom={2}>
<div className={classNames('tabs__flexbox')}>
<div className={styles.list}>
<div
className={classNames(
'tabs__elem',
selectedListCode === CourseListCode.SEARCH ? 'tabs__elem--selected' : null,
)}
className={styles.tab}
aria-selected={selectedListCode === CourseListCode.SEARCH}
onClick={() => this.changeTab(CourseListCode.SEARCH)}>
<i className={classNames('icon', 'icon--tab-search')} />
<span>{t('ui.tab.searchShort')}</span>
<span className={styles.title}>{t('ui.tab.searchShort')}</span>
</div>
<div
className={classNames(
'tabs__elem',
selectedListCode === CourseListCode.BASIC ? 'tabs__elem--selected' : null,
)}
className={styles.tab}
aria-selected={selectedListCode === CourseListCode.BASIC}
onClick={() => this.changeTab(CourseListCode.BASIC)}>
<i className={classNames('icon', 'icon--tab-basic')} />
<span>{t('ui.tab.basicShort')}</span>
<span className={styles.title}>{t('ui.tab.basicShort')}</span>
</div>
{!user
? null
: user.departments.map((d) => (
<div
className={classNames(
'tabs__elem',
selectedListCode === d.code ? 'tabs__elem--selected' : null,
)}
key={d.code}
className={styles.tab}
aria-selected={selectedListCode === d.code}
onClick={() => this.changeTab(d.code)}>
<i className={classNames('icon', 'icon--tab-major')} />
<span>{t('ui.tab.majorShort')}</span>
<span className={styles.title}>{t('ui.tab.majorShort')}</span>
</div>
))}
<div
className={classNames(
'tabs__elem',
selectedListCode === CourseListCode.HUMANITY ? 'tabs__elem--selected' : null,
)}
className={styles.tab}
aria-selected={selectedListCode === CourseListCode.HUMANITY}
onClick={() => this.changeTab(CourseListCode.HUMANITY)}>
<i className={classNames('icon', 'icon--tab-humanity')} />
<span>{t('ui.tab.humanityShort')}</span>
<span className={styles.title}>{t('ui.tab.humanityShort')}</span>
</div>
<div
className={classNames(
'tabs__elem',
selectedListCode === CourseListCode.TAKEN ? 'tabs__elem--selected' : null,
)}
className={styles.tab}
aria-selected={selectedListCode === CourseListCode.TAKEN}
onClick={() => this.changeTab(CourseListCode.TAKEN)}>
<i className={classNames('icon', 'icon--tab-taken')} />
<span>{t('ui.tab.takenShort')}</span>
<span className={styles.title}>{t('ui.tab.takenShort')}</span>
</div>
</div>
</Scroller>
Expand Down
72 changes: 72 additions & 0 deletions src/components/sections/dictionary/courselist/CourseListTabs.module.scss
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,72 @@
@use '@/sass/abstracts/color' as color;
@use '@/sass/abstracts/font' as font;
@use '@/sass/abstracts/mixins' as *;
@use '@/sass/abstracts/variables' as *;

.wrapper {
grid-area: course-list-tabs;

overflow: hidden;

font-size: font.$size-small;
line-height: font.$line-height-small;
color: color.$text-light;
}

.list {
@include mixin-media-portrait {
display: flex;
flex-direction: row;
}
}

.tab {
display: inline-block;

padding: $tab-padding;

background-color: color.$tab-background-dark;

text-align: center;
white-space: nowrap;

&[aria-selected='true'] {
background-color: color.$tab-background;

color: color.$text-normal;
}
&[aria-selected='false']:hover {
background-color: color.$tab-background-darker;
cursor: pointer;
}

@include mixin-media-landscape {
margin-bottom: $tab-margin;
margin-left: auto;
border-radius: $tab-border-radius 0 0 $tab-border-radius;

line-height: 0;

touch-action: pinch-zoom;
}
@include mixin-media-portrait {
flex: 1 1 0;

margin-right: $tab-margin;
border-radius: $tab-border-radius $tab-border-radius 0 0;

touch-action: pan-x pinch-zoom;

&:last-child {
margin-right: 0;
}
}
}

.title {
margin-left: 6px;

@include mixin-media-landscape {
display: none;
}
}
47 changes: 20 additions & 27 deletions src/components/sections/planner/courselist/CourseListTabs.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,9 @@ import courseListsShape from '../../../../shapes/state/dictionary/CourseListsSha

import Scroller from '../../../Scroller';

// FIXME: It uses the dictionary style as the structure is the same.
import styles from '../../dictionary/courselist/CourseListTabs.module.scss';

class CourseListTabs extends Component {
componentDidUpdate(prevProps, prevState, snapshot) {
const { user, selectedListCode } = this.props;
Expand Down Expand Up @@ -176,58 +179,48 @@ class CourseListTabs extends Component {
const { user, selectedListCode } = this.props;

return (
<div className={classNames('tabs', 'tabs--course-list', 'mobile-hidden')}>
<div className={classNames('tabs', styles.wrapper, 'mobile-hidden')}>
<Scroller noScrollX={false} noScrollY={true} expandBottom={2}>
<div className={classNames('tabs__flexbox')}>
<div className={styles.list}>
<div
className={classNames(
'tabs__elem',
selectedListCode === CourseListCode.SEARCH ? 'tabs__elem--selected' : null,
)}
className={styles.tab}
aria-selected={selectedListCode === CourseListCode.SEARCH}
onClick={() => this.changeTab(CourseListCode.SEARCH)}>
<i className={classNames('icon', 'icon--tab-search')} />
<span>{t('ui.tab.searchShort')}</span>
<span className={styles.title}>{t('ui.tab.searchShort')}</span>
</div>
<div
className={classNames(
'tabs__elem',
selectedListCode === CourseListCode.BASIC ? 'tabs__elem--selected' : null,
)}
className={styles.tab}
aria-selected={selectedListCode === CourseListCode.BASIC}
onClick={() => this.changeTab(CourseListCode.BASIC)}>
<i className={classNames('icon', 'icon--tab-basic')} />
<span>{t('ui.tab.basicShort')}</span>
<span className={styles.title}>{t('ui.tab.basicShort')}</span>
</div>
{!user
? null
: user.departments.map((d) => (
<div
className={classNames(
'tabs__elem',
selectedListCode === d.code ? 'tabs__elem--selected' : null,
)}
key={d.code}
className={styles.tab}
aria-selected={selectedListCode === d.code}
onClick={() => this.changeTab(d.code)}>
<i className={classNames('icon', 'icon--tab-major')} />
<span>{t('ui.tab.majorShort')}</span>
<span className={styles.title}>{t('ui.tab.majorShort')}</span>
</div>
))}
<div
className={classNames(
'tabs__elem',
selectedListCode === CourseListCode.HUMANITY ? 'tabs__elem--selected' : null,
)}
className={styles.tab}
aria-selected={selectedListCode === CourseListCode.HUMANITY}
onClick={() => this.changeTab(CourseListCode.HUMANITY)}>
<i className={classNames('icon', 'icon--tab-humanity')} />
<span>{t('ui.tab.humanityShort')}</span>
<span className={styles.title}>{t('ui.tab.humanityShort')}</span>
</div>
<div
className={classNames(
'tabs__elem',
selectedListCode === CourseListCode.TAKEN ? 'tabs__elem--selected' : null,
)}
className={styles.tab}
aria-selected={selectedListCode === CourseListCode.TAKEN}
onClick={() => this.changeTab(CourseListCode.TAKEN)}>
<i className={classNames('icon', 'icon--tab-taken')} />
<span>{t('ui.tab.takenShort')}</span>
<span className={styles.title}>{t('ui.tab.takenShort')}</span>
</div>
{/* 장바구니로 바꾸기 */}
</div>
Expand Down
5 changes: 0 additions & 5 deletions src/sass/App.module.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -332,7 +332,6 @@ a {
}
}

&--course-list,
&--lecture-list {
& .tabs__flexbox {
@include mixin-media-portrait {
Expand Down Expand Up @@ -371,10 +370,6 @@ a {
grid-area: lecture-list-tabs;
}

&--course-list {
grid-area: course-list-tabs;
}

&--timetable {
grid-area: timetable-tabs;

Expand Down

0 comments on commit dbc53a7

Please sign in to comment.