From 7af007c491c244bf918791164a5842777e9a7f4f Mon Sep 17 00:00:00 2001 From: yuwol Date: Tue, 7 May 2024 20:48:27 +0900 Subject: [PATCH 01/16] refactor: split colors --- .../campaign/sass/_campaign.module.scss | 8 +- .../sass/_campaignPopupImage.module.scss | 6 +- .../sass/_imageCarouselBanner.module.scss | 10 +- .../campaign/sass/_popupMenu.module.scss | 6 +- src/sass/App.module.scss | 240 +++++++++--------- src/sass/abstracts/_color.scss | 37 +++ src/sass/abstracts/_variables.scss | 32 +-- 7 files changed, 179 insertions(+), 160 deletions(-) create mode 100644 src/sass/abstracts/_color.scss diff --git a/src/features/campaign/sass/_campaign.module.scss b/src/features/campaign/sass/_campaign.module.scss index 5fdff28..9afb915 100644 --- a/src/features/campaign/sass/_campaign.module.scss +++ b/src/features/campaign/sass/_campaign.module.scss @@ -1,8 +1,10 @@ +@use '@/sass/abstracts/color' as color; + @import '../../../sass/abstracts/variables'; .fullscreen-section { position: relative; - background-color: $color-section-background; + background-color: color.$section-background; border-radius: $section-border-radius; box-shadow: $section-box-shadow; overflow: hidden; @@ -14,12 +16,12 @@ button::before { font-size: 10px; - color: $color-highlight; + color: color.$highlight; } :global(.slick-active) { button::before { - color: $color-highlight; + color: color.$highlight; opacity: 1; } } diff --git a/src/features/campaign/sass/_campaignPopupImage.module.scss b/src/features/campaign/sass/_campaignPopupImage.module.scss index 9981a9f..15c57f7 100644 --- a/src/features/campaign/sass/_campaignPopupImage.module.scss +++ b/src/features/campaign/sass/_campaignPopupImage.module.scss @@ -1,3 +1,5 @@ +@use '@/sass/abstracts/color' as color; + @import '../../../sass/abstracts/variables'; @import '../../../sass/abstracts/mixins'; @@ -6,7 +8,7 @@ $aspect-ratio: calc(1920 / 1080); width: $width; height: calc($width / $aspect-ratio); - background-color: $color-section-background; + background-color: color.$section-background; border-radius: $section-border-radius $section-border-radius 0 0; transition: filter 0.1s ease-in-out; @@ -29,7 +31,7 @@ $aspect-ratio: calc(1080 / 1397); width: calc($height * $aspect-ratio); height: $height; - background-color: $color-section-background; + background-color: color.$section-background; border-radius: $section-border-radius $section-border-radius 0 0; transition: filter 0.1s ease-in-out; diff --git a/src/features/campaign/sass/_imageCarouselBanner.module.scss b/src/features/campaign/sass/_imageCarouselBanner.module.scss index f63d72b..8008ad0 100644 --- a/src/features/campaign/sass/_imageCarouselBanner.module.scss +++ b/src/features/campaign/sass/_imageCarouselBanner.module.scss @@ -1,3 +1,5 @@ +@use '@/sass/abstracts/color' as color; + @import 'src/sass/abstracts/_variables.scss'; @import 'src/sass/abstracts/_mixins.scss'; @@ -34,7 +36,7 @@ transition: filter 0.3s ease-in-out, scale 0.8s ease-in-out; - background-color: $color-section-background; + background-color: color.$section-background; & > img { width: 100%; @@ -63,8 +65,8 @@ } .container-cta { - // border: solid 1px $color-highlight; - // background-color: $color-section-background-transparent; + // border: solid 1px color.$highlight; + // background-color: color.$section-background-transparent; backdrop-filter: blur(10px); border-radius: 10px; padding: 5px 10px; @@ -75,7 +77,7 @@ transform: translateY(4px); & > p { - color: $color-highlight; + color: color.$highlight; } // &:hover, &:active { diff --git a/src/features/campaign/sass/_popupMenu.module.scss b/src/features/campaign/sass/_popupMenu.module.scss index 0c6dd1b..9795b35 100644 --- a/src/features/campaign/sass/_popupMenu.module.scss +++ b/src/features/campaign/sass/_popupMenu.module.scss @@ -1,3 +1,5 @@ +@use '@/sass/abstracts/color' as color; + @import '../../../sass/abstracts/variables'; @import '../../../sass/abstracts/mixins'; @@ -6,7 +8,7 @@ display: flex; justify-content: space-between; border-radius: 0 0 $section-border-radius $section-border-radius; - background-color: $color-section-background; + background-color: color.$section-background; & button { width: 100%; @@ -24,5 +26,5 @@ } .divider { - border-right: solid 1px $color-divider-line; + border-right: solid 1px color.$divider-line; } diff --git a/src/sass/App.module.scss b/src/sass/App.module.scss index 5c6f57b..b7dde03 100644 --- a/src/sass/App.module.scss +++ b/src/sass/App.module.scss @@ -1,3 +1,5 @@ +@use '@/sass/abstracts/color' as color; + @import './abstracts/_variables.scss'; @import './abstracts/_mixins.scss'; @@ -13,8 +15,8 @@ body * { body { font-size: $font-size-normal; line-height: $line-height-normal; - background-color: $color-page-background; - color: $color-text-normal; + background-color: color.$page-background; + color: color.$text-normal; margin: 0; padding: 0; width: 100%; @@ -377,13 +379,13 @@ a { .tabs { font-size: $font-size-small; line-height: $line-height-small; - color: $color-text-light; + color: color.$text-light; overflow: hidden; & .tabs__elem { padding: $tab-padding; text-align: center; - background-color: $color-tab-background-dark; + background-color: color.$tab-background-dark; white-space: nowrap; display: inline-block; @include mixin-media-landscape { @@ -393,13 +395,13 @@ a { touch-action: pan-x pinch-zoom; } &.tabs__elem--selected { - background-color: $color-tab-background; - color: $color-text-normal; + background-color: color.$tab-background; + color: color.$text-normal; } &:not(.tabs__elem--selected) { cursor: pointer; &:hover { - background-color: $color-tab-background-darker; + background-color: color.$tab-background-darker; } } &.tabs__elem--draggable { @@ -472,16 +474,16 @@ a { @include mixin-media-portrait { width: 100%; padding: $block-padding-tb $block-padding-lr; - background-color: $color-block-background; + background-color: color.$block-background; margin-bottom: $block-margin; border-radius: $block-border-radius; text-align: left; &.tabs__elem--selected { - background-color: $color-block-background-dark; + background-color: color.$block-background-dark; } &:not(.tabs__elem--selected) { &:hover { - background-color: $color-block-background-dark; + background-color: color.$block-background-dark; } } } @@ -505,7 +507,7 @@ a { } & > button { - color: $color-text-light; + color: color.$text-light; @include mixin-media-landscape { margin-left: 4px; } @@ -513,7 +515,7 @@ a { margin-left: 8px; } &:hover { - color: $color-text-dark; + color: color.$text-dark; } & > span { @@ -546,16 +548,16 @@ a { @include mixin-media-portrait { width: 100%; padding: $block-padding-tb $block-padding-lr; - background-color: $color-block-background; + background-color: color.$block-background; margin-bottom: $block-margin; border-radius: $block-border-radius; text-align: left; &.tabs__elem--selected { - background-color: $color-block-background-dark; + background-color: color.$block-background-dark; } &:not(.tabs__elem--selected) { &:hover { - background-color: $color-block-background-dark; + background-color: color.$block-background-dark; } } } @@ -579,7 +581,7 @@ a { } & > button { - color: $color-text-light; + color: color.$text-light; @include mixin-media-landscape { margin-left: 4px; } @@ -587,7 +589,7 @@ a { margin-left: 8px; } &:hover { - color: $color-text-dark; + color: color.$text-dark; } & > span { @@ -621,7 +623,7 @@ a { .section { position: relative; padding: $section-padding; - background-color: $color-section-background; + background-color: color.$section-background; border-radius: $section-border-radius; box-shadow: $section-box-shadow; overflow: hidden; @@ -971,7 +973,7 @@ a { > strong { width: 100%; text-align: right; - color: $color-text-light; + color: color.$text-light; font-size: $font-size-smallest; line-height: $line-height-smallest; display: block; @@ -1004,7 +1006,7 @@ a { text-align: center; font-size: $font-size-smallest; line-height: $line-height-smallest; - color: $color-text-light; + color: color.$text-light; padding-bottom: 6px; margin: 0 -20px; } @@ -1012,9 +1014,9 @@ a { &__line { flex: none; height: 1px; - border-bottom: 1px solid $color-normal-line; + border-bottom: 1px solid color.$normal-line; &--bold { - border-bottom-color: $color-normal-line-dark; + border-bottom-color: color.$normal-line-dark; } &--dashed { border-bottom-style: dashed; @@ -1068,10 +1070,10 @@ a { height: 13px; border-radius: 2px; padding: 2px 3px; - background-color: $color-block-background; + background-color: color.$block-background; &.highlighted { - background-color: $color-block-background-highlight; - color: $color-highlight; + background-color: color.$block-background-highlight; + color: color.$highlight; } & > span:first-child { @@ -1086,7 +1088,7 @@ a { border-radius: 50%; &.highlighted { - background-color: $color-highlight !important; + background-color: color.$highlight !important; } } } @@ -1098,10 +1100,10 @@ a { width: 0px; height: 0px; border-radius: 50%; - box-shadow: 0 0 3px 3px change-color($color-block-shadow-dark, $alpha: 0.8); + box-shadow: 0 0 3px 3px change-color(color.$block-shadow-dark, $alpha: 0.8); transform: scale(1.5, 1); &.highlighted { - box-shadow: 0 0 3px 3px change-color($color-block-shadow-highlight, $alpha: 0.8); + box-shadow: 0 0 3px 3px change-color(color.$block-shadow-highlight, $alpha: 0.8); } } @@ -1112,9 +1114,9 @@ a { margin: -3px -2px 0 -2px; border-left: 2px solid transparent; border-right: 2px solid transparent; - border-top: 3px solid $color-block-background; + border-top: 3px solid color.$block-background; &.highlighted { - border-top-color: $color-block-background-highlight; + border-top-color: color.$block-background-highlight; } } } @@ -1218,7 +1220,7 @@ a { } &.focused { - color: $color-highlight; + color: color.$highlight; } & > div:first-child { @@ -1274,7 +1276,7 @@ a { } & .disabled { - color: $color-text-disable; + color: color.$text-disable; } } } @@ -1343,7 +1345,7 @@ a { } input::placeholder { - color: $color-text-placeholder; + color: color.$text-placeholder; } button { @@ -1374,7 +1376,7 @@ a { > span, > strong { text-align: center; - color: $color-text-light; + color: color.$text-light; font-size: $font-size-smallest; line-height: $line-height-smallest; display: block; @@ -1401,9 +1403,9 @@ a { &__line { flex: none; width: 1px; - border-left: 1px solid $color-normal-line; + border-left: 1px solid color.$normal-line; &--bold { - border-left-color: $color-normal-line-dark; + border-left-color: color.$normal-line-dark; } &--dashed { border-left-style: dashed; @@ -1430,7 +1432,7 @@ a { & > div:first-child { width: 5px; height: 5px; - background-color: $color-highlight; + background-color: color.$highlight; border-radius: 50%; } @@ -1438,7 +1440,7 @@ a { width: 1px; height: 57px - 5px + 2px; margin: 0 2px; - background-color: $color-highlight; + background-color: color.$highlight; } } } @@ -1503,7 +1505,7 @@ a { justify-content: flex-end; gap: 12px; button { - color: $color-highlight; + color: color.$highlight; } } } @@ -1540,7 +1542,7 @@ a { flex-direction: column; width: 10px + 8px + 1px; padding-right: 8px; - border-right: 1px solid $color-normal-line; + border-right: 1px solid color.$normal-line; &__toptitle { flex: none; @@ -1573,7 +1575,7 @@ a { > strong { width: 100%; text-align: right; - color: $color-text-light; + color: color.$text-light; font-size: $font-size-smallest; line-height: $line-height-smallest; display: block; @@ -1592,7 +1594,7 @@ a { padding: 0 6px; margin-right: 0px; flex: 1 1 0; - border-right: 1px solid $color-normal-line; + border-right: 1px solid color.$normal-line; &:last-child { margin-right: 0; } @@ -1603,7 +1605,7 @@ a { flex: none; font-size: $font-size-smallest; line-height: $line-height-smallest; - color: $color-text-lighter; + color: color.$text-lighter; & > span:last-child { float: right; @@ -1638,16 +1640,16 @@ a { font-size: $font-size-smaller; font-weight: bold; line-height: $line-height-smaller; - color: $color-text-normal; + color: color.$text-normal; } &__line { flex: none; height: 1px; margin: 0 1px; - border-bottom: 1px solid $color-normal-line; + border-bottom: 1px solid color.$normal-line; &--bold { - border-bottom-color: $color-normal-line-dark; + border-bottom-color: color.$normal-line-dark; } &--dashed { border-bottom-style: dashed; @@ -1735,15 +1737,15 @@ a { margin $transition-duration-short ease-out, box-shadow $transition-duration-short ease-out; &.tile--highlighted { - background: $color-tile-background-highlight !important; + background: color.$tile-background-highlight !important; } &.tile--raised { margin-top: -$offset-raise; margin-bottom: $offset-raise; - box-shadow: 0 6px 3px -3px $color-block-shadow-highlight; + box-shadow: 0 6px 3px -3px color.$block-shadow-highlight; } &.tile--temp { - background-color: $color-tile-background-highlight; + background-color: color.$tile-background-highlight; opacity: $opacity-temp; z-index: 3; cursor: initial; @@ -1762,7 +1764,7 @@ a { position: absolute; cursor: pointer; padding: 4px; - background-color: rgba($color-tile-background-highlight, $opacity-text-overlay); + background-color: rgba(color.$tile-background-highlight, $opacity-text-overlay); .tile--timetable:not(:hover) &, .tile--timetable:not(.tile--highlighted):not(.tile--raised) & { display: none; @@ -1813,7 +1815,7 @@ a { } &--timetable-drag { - background-color: rgba($color-tile-background-highlight, $opacity-temp); + background-color: rgba(color.$tile-background-highlight, $opacity-temp); pointer-events: none; z-index: 1; } @@ -1849,7 +1851,7 @@ a { position: absolute; cursor: pointer; padding: 4px; - background-color: rgba($color-tile-background-highlight, $opacity-text-overlay); + background-color: rgba(color.$tile-background-highlight, $opacity-text-overlay); .tile--planner:not(:hover) &, .tile--planner:not(.tile--highlighted):not(.tile--raised) & { display: none; @@ -1901,7 +1903,7 @@ a { .tile--highlighted & { background-color: adjust-color( - $color-highlight, + color.$highlight, $saturation: -5%, $lightness: -10% ) !important; @@ -1917,7 +1919,7 @@ a { padding: $section-padding 0 ($section-padding - 2px) ($section-padding - 2px); top: 0; right: $section-padding; - background-color: rgba($color-section-background, $opacity-text-overlay); + background-color: rgba(color.$section-background, $opacity-text-overlay); z-index: 90; .section--modal & { z-index: 290; @@ -1934,7 +1936,7 @@ a { } .block { - background-color: $color-block-background; + background-color: color.$block-background; border-radius: $block-border-radius; font-size: $font-size-normal; line-height: $line-height-normal; @@ -1948,13 +1950,13 @@ a { box-shadow $transition-duration-short ease-out; &[href]:not(.block--dimmed):hover, &.block--clickable:not(.block--dimmed):hover { - background-color: $color-block-background-dark; + background-color: color.$block-background-dark; } &.block--raised { - background-color: $color-block-background-dark; + background-color: color.$block-background-dark; position: relative; top: -$offset-raise; - box-shadow: 0 6px 3px -3px $color-block-shadow-dark; + box-shadow: 0 6px 3px -3px color.$block-shadow-dark; } &.block--dimmed { opacity: 0.5; @@ -1962,11 +1964,11 @@ a { } &.block--completed { &:not(.block--raised) { - color: rgba($color-text-normal, 0.45); + color: rgba(color.$text-normal, 0.45); & .block--lecture-group__row-content__texts__sub, & .block--planner-course__text__caption { - color: rgba($color-text-lighter, 0.45); + color: rgba(color.$text-lighter, 0.45); } } @@ -1977,7 +1979,7 @@ a { & .block__completed-text { display: none; - color: darken($color-text-normal, 20%); + color: darken(color.$text-normal, 20%); font-size: $font-size-smaller; line-height: $line-height-smaller; position: absolute; @@ -2004,7 +2006,7 @@ a { &__title { padding-bottom: 6px; - border-bottom: 1px solid $color-block-line; + border-bottom: 1px solid color.$block-line; margin-bottom: 6px; & > i:first-child { @@ -2029,7 +2031,7 @@ a { &__caption { font-size: $font-size-smaller; line-height: $line-height-smaller; - color: $color-text-lighter; + color: color.$text-lighter; margin-bottom: 3px; } @@ -2093,7 +2095,7 @@ a { } &__content { - color: $color-text-light; + color: color.$text-light; line-height: $line-height-normal + $delta-line-height-longcontent; &--limit-5 { overflow: hidden; @@ -2143,7 +2145,7 @@ a { } &__content { - color: $color-text-light; + color: color.$text-light; line-height: $line-height-normal + $delta-line-height-longcontent; display: block; width: 100%; @@ -2159,7 +2161,7 @@ a { } &::placeholder { - color: $color-text-placeholder; + color: color.$text-placeholder; } } @@ -2234,7 +2236,7 @@ a { &--lecture-group { &.block--raised { - background-color: $color-block-background; + background-color: color.$block-background; } &__title { @@ -2252,7 +2254,7 @@ a { } &--highlighted { - background-color: $color-block-background-dark; + background-color: color.$block-background-dark; } .block--dimmed & { @@ -2262,7 +2264,7 @@ a { &__row-content { padding: 6px 0; - border-top: 1px solid $color-block-line; + border-top: 1px solid color.$block-line; display: flex; flex-direction: row; pointer-events: none; @@ -2294,7 +2296,7 @@ a { &__sub { font-size: $font-size-smaller; line-height: $line-height-smaller; - color: $color-text-lighter; + color: color.$text-lighter; display: none; @include mixin-media-no-hover { @at-root .block--lecture-group__row--highlighted #{&} { @@ -2344,7 +2346,7 @@ a { &__row-content { padding: 6px 0; - border-top: 1px solid $color-block-line; + border-top: 1px solid color.$block-line; display: flex; flex-direction: row; pointer-events: none; @@ -2380,7 +2382,7 @@ a { &--review-simple { & > div:first-child { - color: $color-text-lighter; + color: color.$text-lighter; font-size: $font-size-smaller; line-height: $line-height-smaller; margin-bottom: 3px; @@ -2393,7 +2395,7 @@ a { } & > div:nth-child(2) { - color: $color-text-light; + color: color.$text-light; font-size: $font-size-normal; line-height: $line-height-normal + $delta-line-height-longcontent; margin-bottom: 4px; @@ -2510,21 +2512,21 @@ a { & > *:nth-child(2) { margin-left: 6px; - color: $color-highlight; + color: color.$highlight; @at-root :hover#{&} { - color: $color-highlight-dark; + color: color.$highlight-dark; } } & > *:nth-child(3) { margin-left: 5px; - color: $color-text-lighter; + color: color.$text-lighter; font-size: $font-size-small; line-height: $line-height-small; @at-root :hover#{&} { - color: $color-text-light; + color: color.$text-light; } } } @@ -2546,10 +2548,10 @@ a { z-index: 2; line-height: $line-height-big + 1px * 2; margin: -1px 0; - color: $color-text-normal; + color: color.$text-normal; &::placeholder { - color: $color-text-placeholder; + color: color.$text-placeholder; } } @@ -2558,7 +2560,7 @@ a { position: absolute; top: 0px; z-index: 1; - color: $color-text-placeholder; + color: color.$text-placeholder; height: 100%; overflow: hidden; display: none; @@ -2630,18 +2632,18 @@ a { &, &:link { - color: $color-highlight; + color: color.$highlight; } &:not(&--disabled):hover { - color: $color-highlight-dark; + color: color.$highlight-dark; } &--black { - color: $color-text-light; + color: color.$text-light; &:not(&--disabled):hover { - color: $color-text-dark; + color: color.$text-dark; } } @@ -2655,7 +2657,7 @@ a { &--disabled { pointer-events: none; - color: $color-text-disable !important; + color: color.$text-disable !important; } &--review-write-block { @@ -2673,7 +2675,7 @@ a { .caption { font-size: $font-size-smaller; line-height: $line-height-smaller; - color: $color-text-placeholder; + color: color.$text-placeholder; } .main-date { @@ -2681,10 +2683,10 @@ a { height: 300px; padding: calc(300px / 2 - 24px) 0; background-image: linear-gradient( - rgba($color-page-background, 0) 80%, - rgba($color-page-background, 1) + rgba(color.$page-background, 0) 80%, + rgba(color.$page-background, 1) ); - color: rgba($color-highlight, 0.5); + color: rgba(color.$highlight, 0.5); text-align: center; z-index: 50; @@ -2694,7 +2696,7 @@ a { line-height: 19px; cursor: pointer; &:hover { - color: rgba($color-highlight-dark, 0.5); + color: rgba(color.$highlight-dark, 0.5); } } & > div:nth-child(2) { @@ -2771,7 +2773,7 @@ a { position: sticky; z-index: 1; left: 0; - background-color: $color-section-background; + background-color: color.$section-background; width: 10px; white-space: nowrap; padding-right: 10px; @@ -2779,13 +2781,13 @@ a { vertical-align: middle; text-align: right; line-height: $line-height-small; - color: $color-text-normal; + color: color.$text-normal; } & > td { text-align: center; padding: 0 6px; - border-left: 1px solid $color-normal-line; + border-left: 1px solid color.$normal-line; &:first-of-type { padding-left: 0; border-left: none; @@ -2799,7 +2801,7 @@ a { } &.history__cell--unopen { vertical-align: middle; - color: $color-text-placeholder; + color: color.$text-placeholder; padding-top: 8px; padding-bottom: 8px; } @@ -2932,7 +2934,7 @@ a { margin-right: 4px; &.focused { - color: $color-highlight; + color: color.$highlight; } } } @@ -2947,12 +2949,12 @@ a { margin-right: $attribute-info-margin-between; white-space: nowrap; &:hover { - color: $color-text-dark; + color: color.$text-dark; } &--dimmed { - color: $color-text-lighter; + color: color.$text-lighter; &:hover { - color: $color-text-light; + color: color.$text-light; } } @@ -3053,7 +3055,7 @@ a { &.focused, & > span.focused { - color: $color-highlight; + color: color.$highlight; } } @@ -3067,25 +3069,25 @@ a { .divider { &--desktop-horizontal { @include mixin-media-landscape { - border-bottom: 1px solid $color-divider-line; + border-bottom: 1px solid color.$divider-line; margin: $section-padding 0; } } &--desktop-vertical { @include mixin-media-landscape { - border-right: 1px solid $color-divider-line; + border-right: 1px solid color.$divider-line; margin: 0 $section-padding; } } &--mobile-horizontal { @include mixin-media-portrait { - border-bottom: 1px solid $color-divider-line; + border-bottom: 1px solid color.$divider-line; margin: $section-padding 0; } } &--mobile-vertical { @include mixin-media-portrait { - border-right: 1px solid $color-divider-line; + border-right: 1px solid color.$divider-line; margin: 0 $section-padding; } } @@ -3097,25 +3099,25 @@ a { .divider-planner { &--desktop-horizontal { @include mixin-media-landscape { - border-bottom: 1px solid $color-divider-line; + border-bottom: 1px solid color.$divider-line; margin: $section-padding 0; } } &--desktop-vertical { @include mixin-media-landscape { - border-right: 1px solid $color-normal-line; + border-right: 1px solid color.$normal-line; margin: 0 5px; //TODO } } &--mobile-horizontal { @include mixin-media-portrait { - border-bottom: 1px solid $color-divider-line; + border-bottom: 1px solid color.$divider-line; margin: $section-padding 0; } } &--mobile-vertical { @include mixin-media-portrait { - border-right: 1px solid $color-divider-line; + border-right: 1px solid color.$divider-line; margin: 0 $section-padding; } } @@ -3133,11 +3135,11 @@ a { border-radius: $tile-border-radius; z-index: 3; overflow: hidden; - background-color: rgba($color-block-background-highlight, 0.7); + background-color: rgba(color.$block-background-highlight, 0.7); &__button { text-align: center; - color: $color-highlight; + color: color.$highlight; cursor: pointer; &:not(:last-child) { @@ -3150,7 +3152,7 @@ a { } &--disabled { - color: $color-text-disable; + color: color.$text-disable; pointer-events: none; } } @@ -3183,7 +3185,7 @@ a { flex: 0 0 auto; max-height: 100%; padding: 0 $section-padding; - background-color: $color-section-background; + background-color: color.$section-background; display: flex; flex-direction: column; overflow: hidden; @@ -3264,7 +3266,7 @@ a { } .placeholder { - color: $color-text-placeholder; + color: color.$text-placeholder; } .otlplus-placeholder { @@ -3274,7 +3276,7 @@ a { flex-direction: column; justify-content: center; text-align: center; - color: $color-text-placeholder; + color: color.$text-placeholder; font-size: $font-size-normal; line-height: $line-height-normal; @@ -3294,7 +3296,7 @@ a { color: inherit; &:hover { - color: $color-text-lighter; + color: color.$text-lighter; } } } @@ -3304,7 +3306,7 @@ a { flex-direction: column; justify-content: center; text-align: center; - color: $color-text-placeholder; + color: color.$text-placeholder; font-size: 16px; line-height: 17px; white-space: nowrap; @@ -3340,7 +3342,7 @@ a { top: 0; width: 100%; height: 26px; - background-color: rgba($color-section-background, 0.8); + background-color: rgba(color.$section-background, 0.8); text-align: center; font-size: 14px; line-height: 15px; @@ -3349,7 +3351,7 @@ a { } button.disabled { - color: $color-text-disable !important; + color: color.$text-disable !important; pointer-events: none; } @@ -3820,7 +3822,7 @@ i.icon { position: sticky; top: 0; z-index: 10; - background-color: $color-section-background; + background-color: color.$section-background; } .mobile-hidden { @@ -3862,7 +3864,7 @@ i.icon { line-height: $line-height-smallest; & > span { - color: $color-highlight; + color: color.$highlight; } } } diff --git a/src/sass/abstracts/_color.scss b/src/sass/abstracts/_color.scss new file mode 100644 index 0000000..d5e8fd1 --- /dev/null +++ b/src/sass/abstracts/_color.scss @@ -0,0 +1,37 @@ +$page-background: #f9f0f0; + +$section-background: #ffffff; +$section-background-transparent: #ffffffdd; + +$tab-background: $section-background; +$tab-background-dark: #e2e2e2; +$tab-background-darker: #d8d8d8; + +$block-background: #eeeeee; +$block-background-dark: #dddddd; +$block-background-highlight: #f9f0f0; + +$tile-background-highlight: #e0546f; + +// Texts +$text-dark: #000000; +$text-normal: #333333; +$text-light: #555555; +$text-lighter: #888888; +$text-placeholder: #aaaaaa; +$text-disable: #aaaaaa; + +// Highlights +$highlight: #e54c65; +$highlight-dark: #963246; + +// Shadows +$section-shadow: rgba(#ed8c9c, 0.5); +$block-shadow-dark: rgba(#333333, 0.5); +$block-shadow-highlight: rgba(#431014, 0.5); + +// Lines +$divider-line: #edd1dc; +$block-line: #c9c9c9; +$normal-line: #e8e8e8; +$normal-line-dark: #c9c9c9; diff --git a/src/sass/abstracts/_variables.scss b/src/sass/abstracts/_variables.scss index a70271b..94e50fd 100644 --- a/src/sass/abstracts/_variables.scss +++ b/src/sass/abstracts/_variables.scss @@ -1,32 +1,4 @@ -$color-page-background: #f9f0f0; -$color-section-background: #ffffff; -$color-section-background-transparent: #ffffffdd; -$color-tab-background: $color-section-background; -$color-tab-background-dark: #e2e2e2; -$color-tab-background-darker: #d8d8d8; -$color-block-background: #eeeeee; -$color-block-background-dark: #dddddd; -$color-block-background-highlight: #f9f0f0; -$color-tile-background-highlight: #e0546f; - -$color-text-dark: #000000; -$color-text-normal: #333333; -$color-text-light: #555555; -$color-text-lighter: #888888; -$color-text-placeholder: #aaaaaa; -$color-text-disable: #aaaaaa; - -$color-highlight: #e54c65; -$color-highlight-dark: #963246; - -$color-section-shadow: rgba(#ed8c9c, 0.5); -$color-block-shadow-dark: rgba(#333333, 0.5); -$color-block-shadow-highlight: rgba(#431014, 0.5); - -$color-divider-line: #edd1dc; -$color-block-line: #c9c9c9; -$color-normal-line: #e8e8e8; -$color-normal-line-dark: #c9c9c9; +@use '@/sass/abstracts/color' as color; $font-size-big: 14px; $line-height-big: 15px; @@ -66,7 +38,7 @@ $section-margin-bottom: 12px; $section-margin-lr: 12px; $section-padding: 12px; $section-border-radius: 6px; -$section-box-shadow: 0 6px 3px -3px $color-section-shadow; +$section-box-shadow: 0 6px 3px -3px color.$section-shadow; $tab-padding: 8px; $tab-margin: 6px; From 32525e3473541d5290b19214ff849b5ebfd4c3cf Mon Sep 17 00:00:00 2001 From: yuwol Date: Tue, 7 May 2024 20:55:17 +0900 Subject: [PATCH 02/16] refactor: split fonts --- src/sass/App.module.scss | 308 +++++++++++++++-------------- src/sass/abstracts/_font.scss | 16 ++ src/sass/abstracts/_variables.scss | 26 +-- 3 files changed, 180 insertions(+), 170 deletions(-) create mode 100644 src/sass/abstracts/_font.scss diff --git a/src/sass/App.module.scss b/src/sass/App.module.scss index b7dde03..242c6a5 100644 --- a/src/sass/App.module.scss +++ b/src/sass/App.module.scss @@ -1,4 +1,5 @@ @use '@/sass/abstracts/color' as color; +@use '@/sass/abstracts/font' as font; @import './abstracts/_variables.scss'; @import './abstracts/_mixins.scss'; @@ -13,8 +14,8 @@ body * { } body { - font-size: $font-size-normal; - line-height: $line-height-normal; + font-size: font.$size-normal; + line-height: font.$line-height-normal; background-color: color.$page-background; color: color.$text-normal; margin: 0; @@ -377,8 +378,8 @@ a { } .tabs { - font-size: $font-size-small; - line-height: $line-height-small; + font-size: font.$size-small; + line-height: font.$line-height-small; color: color.$text-light; overflow: hidden; @@ -852,7 +853,7 @@ a { &--beta-popup { &__content { flex: 1 1 auto; - line-height: $line-height-normal + $delta-line-height-longcontent; + line-height: font.$line-height-normal + font.$delta-line-height-longcontent; & > div:not(:last-child) { margin-bottom: 4px; @@ -869,7 +870,7 @@ a { &--lecture-list { &__selector { position: absolute; - top: calc((100% + #{$line-height-big} + #{$list-title-margin-bottom} - 12px) / 2); + top: calc((100% + #{font.$line-height-big} + #{$list-title-margin-bottom} - 12px) / 2); right: #{$section-padding}; display: none; @include mixin-media-no-hover { @@ -890,12 +891,13 @@ a { ( (#{$screen-height} - #{$header-height} - (#{$section-margin-bottom} * 2)) / 2 - ( - #{$tabs-height-horizontal} + (#{$section-padding} * 2) + (#{$line-height-big} + + #{$tabs-height-horizontal} + (#{$section-padding} * 2) + (#{font.$line-height-big} + #{$list-title-margin-bottom}) ) ) / 2 - ( - (#{$line-height-smaller} / 2) + (6px * 2) + 1px + #{$line-height-normal} + #{$block-padding-tb} + (#{font.$line-height-smaller} / 2) + (6px * 2) + 1px + #{font.$line-height-normal} + + #{$block-padding-tb} ) ); } @@ -904,10 +906,10 @@ a { ( (#{$screen-height} - #{$header-height} - (#{$section-margin-bottom} * 2)) / 2 - ( - #{$tabs-height-horizontal} + (#{$section-padding} * 2) + (#{$line-height-big} + + #{$tabs-height-horizontal} + (#{$section-padding} * 2) + (#{font.$line-height-big} + #{$list-title-margin-bottom}) ) - ) / 2 - (#{calc($line-height-smaller / 2)} + #{$block-padding-tb}) + #{$section-padding} + ) / 2 - (#{calc(font.$line-height-smaller / 2)} + #{$block-padding-tb}) + #{$section-padding} ); } } @@ -916,8 +918,8 @@ a { } &--semester { - font-size: $font-size-small; - line-height: $line-height-small; + font-size: font.$size-small; + line-height: font.$line-height-small; display: flex; flex-direction: row; &.semester-ko { @@ -939,8 +941,8 @@ a { text-align: center; white-space: nowrap; @include mixin-media-portrait { - font-size: $font-size-big; - line-height: $line-height-big; + font-size: font.$size-big; + line-height: font.$line-height-big; } } } @@ -962,7 +964,7 @@ a { &__title { flex: none; - height: $line-height-smallest + 6px; + height: font.$line-height-smallest + 6px; } &__line { @@ -974,10 +976,10 @@ a { width: 100%; text-align: right; color: color.$text-light; - font-size: $font-size-smallest; - line-height: $line-height-smallest; + font-size: font.$size-smallest; + line-height: font.$line-height-smallest; display: block; - margin-top: calc(calc($line-height-smallest / 2) * -1) + 1px; + margin-top: calc(calc(font.$line-height-smallest / 2) * -1) + 1px; } } @@ -1002,10 +1004,10 @@ a { &__title { flex: none; - height: $line-height-smallest + 6px; + height: font.$line-height-smallest + 6px; text-align: center; - font-size: $font-size-smallest; - line-height: $line-height-smallest; + font-size: font.$size-smallest; + line-height: font.$line-height-smallest; color: color.$text-light; padding-bottom: 6px; margin: 0 -20px; @@ -1065,7 +1067,7 @@ a { &__box { position: relative; z-index: 1; - font-size: $font-size-smallest; + font-size: font.$size-smallest; line-height: 9px; height: 13px; border-radius: 2px; @@ -1171,15 +1173,15 @@ a { display: flex; flex-direction: column; min-height: calc( - (#{$line-height-normal} + #{$title-margin-bottom}) + - (#{$line-height-normal} + 2px + #{$line-height-normal}) + (#{font.$line-height-normal} + #{$title-margin-bottom}) + + (#{font.$line-height-normal} + 2px + #{font.$line-height-normal}) ); &__title { flex: 0 0 auto; text-align: center; - font-size: $font-size-normal; - line-height: $line-height-normal; + font-size: font.$size-normal; + line-height: font.$line-height-normal; margin-bottom: $title-margin-bottom; } @@ -1267,7 +1269,7 @@ a { } & span { - font-size: $font-size-small; + font-size: font.$size-small; font-weight: bold; @include mixin-media-portrait { display: none; @@ -1330,8 +1332,8 @@ a { &--main-search { display: flex; - font-size: $font-size-big; - line-height: $line-height-big; + font-size: font.$size-big; + line-height: font.$line-height-big; i { flex: 0 0 auto; @@ -1366,7 +1368,7 @@ a { &__label { display: flex; flex-direction: row; - height: $line-height-smallest; + height: font.$line-height-smallest; margin-bottom: 4px; &__line { @@ -1377,8 +1379,8 @@ a { > strong { text-align: center; color: color.$text-light; - font-size: $font-size-smallest; - line-height: $line-height-smallest; + font-size: font.$size-smallest; + line-height: font.$line-height-smallest; display: block; margin: 0 -5px; } @@ -1398,7 +1400,7 @@ a { &__body { display: flex; flex-direction: row; - height: (3px * 2) + ($tile-padding-tb * 2) + ($line-height-small * 3) + (1px * 2); + height: (3px * 2) + ($tile-padding-tb * 2) + (font.$line-height-small * 3) + (1px * 2); &__line { flex: none; @@ -1486,7 +1488,7 @@ a { &--notice { &__content { - line-height: $line-height-normal + $delta-line-height-longcontent; + line-height: font.$line-height-normal + font.$delta-line-height-longcontent; } } @@ -1546,25 +1548,25 @@ a { &__toptitle { flex: none; - height: $line-height-smallest + 6px; + height: font.$line-height-smallest + 6px; &:has(+ &) { - height: $line-height-smallest + 4px; + height: font.$line-height-smallest + 4px; } } &__bottomtitle { flex: none; - height: $line-height-smallest + 6px; + height: font.$line-height-smallest + 6px; & + & { - height: $line-height-smallest + 4px; + height: font.$line-height-smallest + 4px; } } &__year { flex: none; - height: $line-height-smallest; + height: font.$line-height-smallest; } &__line { @@ -1576,10 +1578,10 @@ a { width: 100%; text-align: right; color: color.$text-light; - font-size: $font-size-smallest; - line-height: $line-height-smallest; + font-size: font.$size-smallest; + line-height: font.$line-height-smallest; display: block; - margin-top: calc(calc($line-height-smallest / 2) * -1) + 1px; + margin-top: calc(calc(font.$line-height-smallest / 2) * -1) + 1px; } } @@ -1603,8 +1605,8 @@ a { &__bottomtitle, &__year { flex: none; - font-size: $font-size-smallest; - line-height: $line-height-smallest; + font-size: font.$size-smallest; + line-height: font.$line-height-smallest; color: color.$text-lighter; & > span:last-child { @@ -1613,33 +1615,33 @@ a { } &__toptitle { - height: $line-height-smallest + 6px; + height: font.$line-height-smallest + 6px; padding-bottom: 6px; &:has(+ &) { - height: $line-height-smallest + 4px; + height: font.$line-height-smallest + 4px; padding-bottom: 4px; } } &__bottomtitle { - height: $line-height-smallest + 6px; + height: font.$line-height-smallest + 6px; padding-top: 6px; & + & { - height: $line-height-smallest + 4px; + height: font.$line-height-smallest + 4px; padding-top: 4px; } } &__year { flex: none; - height: $line-height-smallest; + height: font.$line-height-smallest; padding: 0; text-align: center; - font-size: $font-size-smaller; + font-size: font.$size-smaller; font-weight: bold; - line-height: $line-height-smaller; + line-height: font.$line-height-smaller; color: color.$text-normal; } @@ -1688,7 +1690,7 @@ a { flex-direction: column; &__content { - line-height: $line-height-normal + $delta-line-height-longcontent; + line-height: font.$line-height-normal + font.$delta-line-height-longcontent; a { text-decoration: underline; @@ -1731,8 +1733,8 @@ a { border-radius: $tile-border-radius; z-index: 2; overflow: hidden; - font-size: $font-size-small; - line-height: $line-height-small; + font-size: font.$size-small; + line-height: font.$line-height-small; transition: margin $transition-duration-short ease-out, box-shadow $transition-duration-short ease-out; @@ -1885,8 +1887,8 @@ a { } &__label { - $size: $line-height-normal; - $padding-tb-base: calc(calc($size - $line-height-smallest) / 2); + $size: font.$line-height-normal; + $padding-tb-base: calc(calc($size - font.$line-height-smallest) / 2); $offset-y: 1px; flex: 0 0 auto; @@ -1897,8 +1899,8 @@ a { text-align: center; padding: ($padding-tb-base + $offset-y) 0 ($padding-tb-base - $offset-y) 0; font-weight: bold; - font-size: $font-size-smallest; - line-height: $line-height-smallest; + font-size: font.$size-smallest; + line-height: font.$line-height-smallest; color: #ffffff; .tile--highlighted & { @@ -1938,8 +1940,8 @@ a { .block { background-color: color.$block-background; border-radius: $block-border-radius; - font-size: $font-size-normal; - line-height: $line-height-normal; + font-size: font.$size-normal; + line-height: font.$line-height-normal; display: block; padding: $block-padding-tb $block-padding-lr; position: relative; @@ -1980,15 +1982,15 @@ a { & .block__completed-text { display: none; color: darken(color.$text-normal, 20%); - font-size: $font-size-smaller; - line-height: $line-height-smaller; + font-size: font.$size-smaller; + line-height: font.$line-height-smaller; position: absolute; z-index: 1; top: 0; right: 0; - padding: calc($block-padding-tb + calc(calc($font-size-normal - $font-size-smaller) / 2)) + padding: calc($block-padding-tb + calc(calc(font.$size-normal - font.$size-smaller) / 2)) $block-padding-lr - calc(calc($block-padding-tb - 2px) + calc(calc($font-size-normal - $font-size-smaller) / 2)) + calc(calc($block-padding-tb - 2px) + calc(calc(font.$size-normal - font.$size-smaller) / 2)) calc($block-padding-lr - 2px); background-color: inherit; opacity: $opacity-text-overlay; @@ -2029,8 +2031,8 @@ a { flex: 1 1 auto; &__caption { - font-size: $font-size-smaller; - line-height: $line-height-smaller; + font-size: font.$size-smaller; + line-height: font.$line-height-smaller; color: color.$text-lighter; margin-bottom: 3px; } @@ -2096,7 +2098,7 @@ a { &__content { color: color.$text-light; - line-height: $line-height-normal + $delta-line-height-longcontent; + line-height: font.$line-height-normal + font.$delta-line-height-longcontent; &--limit-5 { overflow: hidden; display: -webkit-box; // Remove after line-clamp officially supported @@ -2146,10 +2148,10 @@ a { &__content { color: color.$text-light; - line-height: $line-height-normal + $delta-line-height-longcontent; + line-height: font.$line-height-normal + font.$delta-line-height-longcontent; display: block; width: 100%; - height: ($line-height-normal + $delta-line-height-longcontent) * 9 + 8px * 2; + height: (font.$line-height-normal + font.$delta-line-height-longcontent) * 9 + 8px * 2; border: 1px dashed #aaaaaa; padding: 8px; border-radius: 2px; @@ -2176,7 +2178,7 @@ a { &__name { margin-right: $attribute-name-margin-right; - padding: calc(calc($option-size - $line-height-normal) / 2) 0; + padding: calc(calc($option-size - font.$line-height-normal) / 2) 0; } &__option { @@ -2190,7 +2192,7 @@ a { } & > span { - $padding-tb-base: calc(calc($option-size - $line-height-smaller) / 2); + $padding-tb-base: calc(calc($option-size - font.$line-height-smaller) / 2); $offset-y: 1px; display: inline-block; @@ -2201,8 +2203,8 @@ a { text-align: center; padding: ($padding-tb-base + $offset-y) 0 ($padding-tb-base - $offset-y) 0; font-weight: bold; - font-size: $font-size-smaller; - line-height: $line-height-smaller; + font-size: font.$size-smaller; + line-height: font.$line-height-smaller; color: #ffffff; } @@ -2294,8 +2296,8 @@ a { } &__sub { - font-size: $font-size-smaller; - line-height: $line-height-smaller; + font-size: font.$size-smaller; + line-height: font.$line-height-smaller; color: color.$text-lighter; display: none; @include mixin-media-no-hover { @@ -2383,8 +2385,8 @@ a { &--review-simple { & > div:first-child { color: color.$text-lighter; - font-size: $font-size-smaller; - line-height: $line-height-smaller; + font-size: font.$size-smaller; + line-height: font.$line-height-smaller; margin-bottom: 3px; & > span { @@ -2396,11 +2398,11 @@ a { & > div:nth-child(2) { color: color.$text-light; - font-size: $font-size-normal; - line-height: $line-height-normal + $delta-line-height-longcontent; + font-size: font.$size-normal; + line-height: font.$line-height-normal + font.$delta-line-height-longcontent; margin-bottom: 4px; overflow: hidden; - max-height: ($line-height-normal + $delta-line-height-longcontent) * 3; // Fallback, Remove after line-clamp officially supported + max-height: (font.$line-height-normal + font.$delta-line-height-longcontent) * 3; // Fallback, Remove after line-clamp officially supported display: -webkit-box; // Remove after line-clamp officially supported -webkit-box-orient: vertical; // Remove after line-clamp officially supported -webkit-line-clamp: 3; // Remove after line-clamp officially supported @@ -2472,8 +2474,8 @@ a { .title { font-weight: bold; - font-size: $font-size-big; - line-height: $line-height-big; + font-size: font.$size-big; + line-height: font.$line-height-big; text-align: center; margin-bottom: $title-margin-bottom; @@ -2491,8 +2493,8 @@ a { } .subtitle { - font-size: $font-size-normal; - line-height: $line-height-normal; + font-size: font.$size-normal; + line-height: font.$line-height-normal; text-align: center; margin-bottom: $title-margin-bottom; @@ -2503,8 +2505,8 @@ a { .list-title { font-weight: initial; - font-size: $font-size-big; - line-height: $line-height-big; + font-size: font.$size-big; + line-height: font.$line-height-big; margin-bottom: $list-title-margin-bottom; &--search { @@ -2522,8 +2524,8 @@ a { & > *:nth-child(3) { margin-left: 5px; color: color.$text-lighter; - font-size: $font-size-small; - line-height: $line-height-small; + font-size: font.$size-small; + line-height: font.$line-height-small; @at-root :hover#{&} { color: color.$text-light; @@ -2537,7 +2539,7 @@ a { & > *:nth-child(2) { flex: auto; - height: $line-height-big; + height: font.$line-height-big; margin-left: 6px; position: relative; @@ -2546,7 +2548,7 @@ a { position: absolute; top: 0px; z-index: 2; - line-height: $line-height-big + 1px * 2; + line-height: font.$line-height-big + 1px * 2; margin: -1px 0; color: color.$text-normal; @@ -2578,8 +2580,8 @@ a { .small-title { font-weight: bold; - font-size: $font-size-normal; - line-height: $line-height-normal; + font-size: font.$size-normal; + line-height: font.$line-height-normal; margin-bottom: $title-margin-bottom; .subsection--lecture-detail & { @@ -2614,8 +2616,8 @@ a { text-align: initial; & > .text-button { - font-size: $font-size-small; - line-height: $line-height-small; + font-size: font.$size-small; + line-height: font.$line-height-small; &:not(:first-child) { margin-left: 6px; @@ -2673,8 +2675,8 @@ a { } .caption { - font-size: $font-size-smaller; - line-height: $line-height-smaller; + font-size: font.$size-smaller; + line-height: font.$line-height-smaller; color: color.$text-placeholder; } @@ -2762,8 +2764,8 @@ a { } &:nth-child(2) { font-weight: bold; - font-size: $font-size-smaller; - line-height: $line-height-smaller; + font-size: font.$size-smaller; + line-height: font.$line-height-smaller; } &:last-child { vertical-align: top; @@ -2777,10 +2779,10 @@ a { width: 10px; white-space: nowrap; padding-right: 10px; - font-size: $font-size-small; + font-size: font.$size-small; vertical-align: middle; text-align: right; - line-height: $line-height-small; + line-height: font.$line-height-small; color: color.$text-normal; } @@ -2880,7 +2882,7 @@ a { &--long-info { & > * { - line-height: $line-height-normal + 1px * 2; + line-height: font.$line-height-normal + 1px * 2; margin-top: -1px; margin-bottom: -1px; } @@ -3048,8 +3050,8 @@ a { } & > span:not(:first-child) { - font-size: $font-size-small; - line-height: $line-height-small; + font-size: font.$size-small; + line-height: font.$line-height-small; font-weight: initial; } @@ -3060,8 +3062,8 @@ a { } & > div:last-child { - font-size: $font-size-smaller; - line-height: $line-height-smaller; + font-size: font.$size-smaller; + line-height: font.$line-height-smaller; } } } @@ -3147,8 +3149,8 @@ a { } &--small { - font-size: $font-size-small; - line-height: $line-height-small; + font-size: font.$size-small; + line-height: font.$line-height-small; } &--disabled { @@ -3209,19 +3211,19 @@ a { @include mixin-media-landscape { min-height: calc( #{$section-height-desktop-lecture-detail} - (#{$section-padding} + ( - #{$line-height-big} + 2px - ) + (#{$line-height-normal} + #{$delta-line-height-longcontent}) + ( - #{$line-height-small} + #{$title-margin-bottom} - ) + (#{$line-height-big} + 8px) + #{$section-padding}) + #{font.$line-height-big} + 2px + ) + (#{font.$line-height-normal} + #{font.$delta-line-height-longcontent}) + ( + #{font.$line-height-small} + #{$title-margin-bottom} + ) + (#{font.$line-height-big} + 8px) + #{$section-padding}) ) !important; } @include mixin-media-portrait { min-height: calc( #{$screen-height} - (#{$header-height} + #{$section-margin-top} + #{$section-padding} + ( - #{$line-height-big} + 2px - ) + (#{$line-height-normal} + #{$delta-line-height-longcontent}) + ( - #{$line-height-small} + #{$title-margin-bottom} - ) + (#{$line-height-big} + 8px) + (#{$section-padding} * 2 + 1px) + #{$line-height-normal} + + #{font.$line-height-big} + 2px + ) + (#{font.$line-height-normal} + #{font.$delta-line-height-longcontent}) + ( + #{font.$line-height-small} + #{$title-margin-bottom} + ) + (#{font.$line-height-big} + 8px) + (#{$section-padding} * 2 + 1px) + #{font.$line-height-normal} + #{$section-padding} + (#{$section-margin-bottom} * 2)) ) !important; } @@ -3229,21 +3231,23 @@ a { .subsection--course-reviews & { @include mixin-media-landscape { min-height: calc( - #{$screen-height} - (#{$header-height} + #{$section-padding} + (#{$line-height-big} + 2px) + - (#{$line-height-normal} + #{$title-margin-bottom}) + - (#{$score-line-height-desktop-big} + 2px + #{$line-height-smaller} + 12px) + - (#{$line-height-normal} + #{$title-margin-bottom}) + - ((#{$line-height-normal} + #{$attribute-margin-bottom}) * 2) + #{$section-padding} + #{$section-margin-bottom}) + #{$screen-height} - (#{$header-height} + #{$section-padding} + + (#{font.$line-height-big} + 2px) + + (#{font.$line-height-normal} + #{$title-margin-bottom}) + + (#{$score-line-height-desktop-big} + 2px + #{font.$line-height-smaller} + 12px) + + (#{font.$line-height-normal} + #{$title-margin-bottom}) + + ((#{font.$line-height-normal} + #{$attribute-margin-bottom}) * 2) + #{$section-padding} + + #{$section-margin-bottom}) ) !important; } @include mixin-media-portrait { min-height: calc( #{$screen-height} - (#{$header-height} + #{$section-margin-top} + #{$section-padding} + ( - #{$line-height-big} + 2px - ) + (#{$line-height-normal} + #{$title-margin-bottom}) + ( - #{$score-line-height-mobile} + 2px + #{$line-height-smaller} + 12px - ) + (#{$line-height-normal} + #{$title-margin-bottom}) + ( - (#{$line-height-normal} + #{$attribute-margin-bottom}) * 2 + #{font.$line-height-big} + 2px + ) + (#{font.$line-height-normal} + #{$title-margin-bottom}) + ( + #{$score-line-height-mobile} + 2px + #{font.$line-height-smaller} + 12px + ) + (#{font.$line-height-normal} + #{$title-margin-bottom}) + ( + (#{font.$line-height-normal} + #{$attribute-margin-bottom}) * 2 ) + #{$section-padding} + (#{$section-margin-bottom} * 2)) ) !important; } @@ -3252,13 +3256,13 @@ a { @include mixin-media-landscape { min-height: calc( #{$screen-height} - (#{$header-height} + #{$section-padding} + - (#{$line-height-big} + #{$title-margin-bottom}) + #{$section-padding} + #{$section-margin-bottom}) + (#{font.$line-height-big} + #{$title-margin-bottom}) + #{$section-padding} + #{$section-margin-bottom}) ) !important; } @include mixin-media-portrait { min-height: calc( #{$screen-height} - (#{$header-height} + #{$section-margin-top} + #{$section-padding} + ( - #{$line-height-big} + #{$title-margin-bottom} + #{font.$line-height-big} + #{$title-margin-bottom} ) + #{$section-padding} + (#{$section-margin-bottom} * 2)) ) !important; } @@ -3277,8 +3281,8 @@ a { justify-content: center; text-align: center; color: color.$text-placeholder; - font-size: $font-size-normal; - line-height: $line-height-normal; + font-size: font.$size-normal; + line-height: font.$line-height-normal; & > div { flex: none; @@ -3406,7 +3410,7 @@ i.icon { width: 14px; height: 12px; background-image: url(../static/icons/lecture_uparrow.svg); - margin: calc(calc($line-height-normal - 12px) / 2) 0; + margin: calc(calc(font.$line-height-normal - 12px) / 2) 0; *:hover > & { background-image: url(../static/icons/lecture_uparrow_hover.svg); @@ -3417,7 +3421,7 @@ i.icon { width: 14px; height: 12px; background-image: url(../static/icons/lecture_downarrow.svg); - margin: calc(calc($line-height-normal - 12px) / 2) 0; + margin: calc(calc(font.$line-height-normal - 12px) / 2) 0; *:hover > & { background-image: url(../static/icons/lecture_downarrow_hover.svg); @@ -3428,7 +3432,7 @@ i.icon { width: 12px; height: 13px; background-image: url(../static/icons/search.svg); - margin: calc(calc($line-height-big - 13px) / 2) 0; + margin: calc(calc(font.$line-height-big - 13px) / 2) 0; *:hover > & { background-image: url(../static/icons/search_hover.svg); @@ -3505,7 +3509,7 @@ i.icon { width: 13px; height: 13px; background-image: url(../static/icons/add_cart.svg); - margin: calc(calc($line-height-normal - 13px) / 2) 0; + margin: calc(calc(font.$line-height-normal - 13px) / 2) 0; *:hover > & { background-image: url(../static/icons/add_cart_hover.svg); @@ -3520,7 +3524,7 @@ i.icon { width: 13px; height: 13px; background-image: url(../static/icons/delete_cart.svg); - margin: calc(calc($line-height-normal - 13px) / 2) 0; + margin: calc(calc(font.$line-height-normal - 13px) / 2) 0; *:hover > & { background-image: url(../static/icons/delete_cart_hover.svg); @@ -3531,7 +3535,7 @@ i.icon { width: 13px; height: 13px; background-image: url(../static/icons/add_lecture.svg); - margin: calc(calc($line-height-normal - 13px) / 2) 0; + margin: calc(calc(font.$line-height-normal - 13px) / 2) 0; *:hover > & { background-image: url(../static/icons/add_lecture_hover.svg); @@ -3547,7 +3551,7 @@ i.icon { width: 13px; height: 13px; background-image: url(../static/icons/delete_from_table.svg); - margin: calc(calc($line-height-normal - 13px) / 2) 0; + margin: calc(calc(font.$line-height-normal - 13px) / 2) 0; *:hover > & { background-image: url(../static/icons/delete_from_table_hover.svg); @@ -3628,7 +3632,7 @@ i.icon { width: 10px; height: 11px; background-image: url(../static/icons/duplicate_table.svg); - margin: calc(calc($line-height-small - 11px) / 2) 0; + margin: calc(calc(font.$line-height-small - 11px) / 2) 0; *:hover > & { background-image: url(../static/icons/duplicate_table_hover.svg); @@ -3643,7 +3647,7 @@ i.icon { width: 10px; height: 11px; background-image: url(../static/icons/delete_table.svg); - margin: calc(calc($line-height-small - 11px) / 2) 0; + margin: calc(calc(font.$line-height-small - 11px) / 2) 0; *:hover > & { background-image: url(../static/icons/delete_table_hover.svg); @@ -3669,7 +3673,7 @@ i.icon { width: 7px; height: 11px; background-image: url(../static/icons/semester_prev.svg); - margin: calc(calc($line-height-small - 11px) / 2) 0; + margin: calc(calc(font.$line-height-small - 11px) / 2) 0; *:hover > & { background-image: url(../static/icons/semester_prev_hover.svg); @@ -3684,7 +3688,7 @@ i.icon { width: 7px; height: 11px; background-image: url(../static/icons/semester_next.svg); - margin: calc(calc($line-height-small - 11px) / 2) 0; + margin: calc(calc(font.$line-height-small - 11px) / 2) 0; *:hover > & { background-image: url(../static/icons/semester_next_hover.svg); @@ -3699,7 +3703,7 @@ i.icon { width: 10px; height: 12px; background-image: url(../static/icons/checkbox_unselected.svg); - margin: calc(calc($line-height-normal - 12px) / 2) 0; + margin: calc(calc(font.$line-height-normal - 12px) / 2) 0; *:hover > & { background-image: url(../static/icons/checkbox_unselected_hover.svg); @@ -3718,7 +3722,7 @@ i.icon { width: 10px; height: 12px; background-image: url(../static/icons/radio_unselected.svg); - margin: calc(calc($line-height-normal - 12px) / 2) 0; + margin: calc(calc(font.$line-height-normal - 12px) / 2) 0; *:hover > & { background-image: url(../static/icons/radio_unselected_hover.svg); @@ -3749,14 +3753,14 @@ i.icon { width: 10px; height: 12px; background-image: url(../static/icons/status_read.svg); - margin: calc(calc($line-height-normal - 12px) / 2) 0; + margin: calc(calc(font.$line-height-normal - 12px) / 2) 0; } &--status-unread { width: 10px; height: 12px; background-image: url(../static/icons/status_unread.svg); - margin: calc(calc($line-height-normal - 12px) / 2) 0; + margin: calc(calc(font.$line-height-normal - 12px) / 2) 0; } &--close-section { @@ -3773,7 +3777,7 @@ i.icon { width: 13px; height: 13px; background-image: url(../static/icons/switch_table.svg); - margin: calc(calc($line-height-normal - 13px) / 2) 0; + margin: calc(calc(font.$line-height-normal - 13px) / 2) 0; *:hover > & { background-image: url(../static/icons/switch_table_hover.svg); @@ -3784,7 +3788,7 @@ i.icon { width: 13px; height: 13px; background-image: url(../static/icons/show_lectures.svg); - margin: calc(calc($line-height-normal - 13px) / 2) 0; + margin: calc(calc(font.$line-height-normal - 13px) / 2) 0; *:hover > & { background-image: url(../static/icons/show_lectures_hover.svg); @@ -3805,7 +3809,7 @@ i.icon { width: 12px; height: 12px; background-image: url(../static/icons/plus_circled.svg); - margin: calc(calc($line-height-normal - 12px) / 2) 0; + margin: calc(calc(font.$line-height-normal - 12px) / 2) 0; margin-left: 8px; } @@ -3813,7 +3817,7 @@ i.icon { width: 12px; height: 12px; background-image: url(../static/icons/minus_circled.svg); - margin: calc(calc($line-height-normal - 12px) / 2) 0; + margin: calc(calc(font.$line-height-normal - 12px) / 2) 0; margin-right: 8px; } } @@ -3839,7 +3843,9 @@ i.icon { .credit-bar { $bar-height: 6px; - $margin-tb-base: calc(calc(calc($line-height-normal - $bar-height) - $line-height-smallest) / 2); + $margin-tb-base: calc( + calc(calc(font.$line-height-normal - $bar-height) - font.$line-height-smallest) / 2 + ); position: relative; width: 50%; @@ -3860,8 +3866,8 @@ i.icon { &__text { text-align: right; - font-size: $font-size-smallest; - line-height: $line-height-smallest; + font-size: font.$size-smallest; + line-height: font.$line-height-smallest; & > span { color: color.$highlight; diff --git a/src/sass/abstracts/_font.scss b/src/sass/abstracts/_font.scss new file mode 100644 index 0000000..ebe9b46 --- /dev/null +++ b/src/sass/abstracts/_font.scss @@ -0,0 +1,16 @@ +$size-big: 14px; +$line-height-big: 15px; + +$size-normal: 13px; +$line-height-normal: 14px; + +$size-small: 12px; +$line-height-small: 13px; + +$size-smaller: 11px; +$line-height-smaller: 12px; + +$size-smallest: 10px; +$line-height-smallest: 11px; + +$delta-line-height-longcontent: 4px; diff --git a/src/sass/abstracts/_variables.scss b/src/sass/abstracts/_variables.scss index 94e50fd..90b9df4 100644 --- a/src/sass/abstracts/_variables.scss +++ b/src/sass/abstracts/_variables.scss @@ -1,17 +1,5 @@ @use '@/sass/abstracts/color' as color; - -$font-size-big: 14px; -$line-height-big: 15px; -$font-size-normal: 13px; -$line-height-normal: 14px; -$font-size-small: 12px; -$line-height-small: 13px; -$font-size-smaller: 11px; -$line-height-smaller: 12px; -$font-size-smallest: 10px; -$line-height-smallest: 11px; - -$delta-line-height-longcontent: 4px; +@use '@/sass/abstracts/font' as font; $opacity-text-overlay: 0.7; @@ -78,12 +66,12 @@ $score-line-height-mobile: calc(#{$score-font-size-mobile} - 2px); // TODO: This really should be a function $section-width-desktop-1v3-left: calc(15vh + 126px); $section-height-desktop-lecture-detail: calc( - #{$section-padding} + (#{$line-height-big} + 2px) + ( - #{$line-height-normal} + #{$delta-line-height-longcontent} - ) + (#{$line-height-small} + #{$title-margin-bottom}) + ( - (#{$line-height-normal} * 6) + (#{$attribute-margin-bottom} * 5) + #{$section-padding} + (#{font.$line-height-big} + 2px) + ( + #{font.$line-height-normal} + #{font.$delta-line-height-longcontent} + ) + (#{font.$line-height-small} + #{$title-margin-bottom}) + ( + (#{font.$line-height-normal} * 6) + (#{$attribute-margin-bottom} * 5) ) + ( - (#{$score-line-height-desktop} + 2px + #{$line-height-smaller}) * 2 + + (#{$score-line-height-desktop} + 2px + #{font.$line-height-smaller}) * 2 + (#{$score-margin-tb-desktop} * 3) - ) + #{$line-height-normal} + #{$section-padding} + ) + #{font.$line-height-normal} + #{$section-padding} ); From 94a9f55b8bce6edae974683c253cbbf7c8751b2a Mon Sep 17 00:00:00 2001 From: yuwol Date: Wed, 8 May 2024 15:39:57 +0900 Subject: [PATCH 03/16] refactor: split TimetableSubSection styles --- .../timetableandinfos/TimetableSubSection.jsx | 146 ++++++------------ .../TimetableSubSection.module.scss | 119 ++++++++++++++ src/sass/App.module.scss | 97 ------------ 3 files changed, 165 insertions(+), 197 deletions(-) create mode 100644 src/components/sections/timetable/timetableandinfos/TimetableSubSection.module.scss diff --git a/src/components/sections/timetable/timetableandinfos/TimetableSubSection.jsx b/src/components/sections/timetable/timetableandinfos/TimetableSubSection.jsx index 97b6555..fa03e5a 100644 --- a/src/components/sections/timetable/timetableandinfos/TimetableSubSection.jsx +++ b/src/components/sections/timetable/timetableandinfos/TimetableSubSection.jsx @@ -46,6 +46,8 @@ import { import { performDeleteFromTable } from '../../../../common/commonOperations'; import TimetableDragTile from '../../../tiles/TimetableDragTile'; +import styles from './TimetableSubSection.module.scss'; + class TimetableSubSection extends Component { constructor(props) { super(props); @@ -82,9 +84,7 @@ class TimetableSubSection extends Component { resize = () => { const { updateCellSizeDispatch } = this.props; - const cell = document - .getElementsByClassName(classNames('subsection--timetable__table__body__cell'))[0] - .getBoundingClientRect(); + const cell = document.getElementsByClassName(styles.bodyCell)[0].getBoundingClientRect(); updateCellSizeDispatch(cell.width, cell.height + 1); }; @@ -107,9 +107,7 @@ class TimetableSubSection extends Component { if (elementAtPosition === null) { return; } - const targetElementAtPosition = elementAtPosition.closest( - `.${classNames('subsection--timetable__table__body__cell--drag')}`, - ); + const targetElementAtPosition = elementAtPosition.closest(styles.bodyCellDrag); if (targetElementAtPosition === null) { return; } @@ -147,9 +145,7 @@ class TimetableSubSection extends Component { if (elementAtPosition === null) { return; } - const targetElementAtPosition = elementAtPosition.closest( - `.${classNames('subsection--timetable__table__body__cell--drag')}`, - ); + const targetElementAtPosition = elementAtPosition.closest(styles.bodyCellDrag); if (targetElementAtPosition === null) { return; } @@ -356,48 +352,37 @@ class TimetableSubSection extends Component { const tableHours = range(TIMETABLE_START_HOUR, TIMETABLE_END_HOUR); const getHeadColumn = () => { const timedArea = [ -
, +
, ...tableHours .map((h) => { const HourTag = h % 6 === 0 ? 'strong' : 'span'; return [ -
+
{((h - 1) % 12) + 1}
, -
, -
, -
, +
, +
, +
, ]; }) .flat(1), -
+
{12}
, ]; - const untimedArea = range(Math.ceil(untimedTileTitles.length / 5)).map((_, i) => [ -
, -
, -
, -
, -
, -
, -
, -
, -
, + const untimedArea = range(Math.ceil(untimedTileTitles.length / 5)).map(() => [ +
, +
, +
, +
, +
, +
, +
, +
, +
, ]); return ( -
+
{timedArea} {untimedArea}
@@ -405,24 +390,18 @@ class TimetableSubSection extends Component { }; const getDayColumn = (dayIdx) => { const timedArea = [ -
+
{getDayStr(dayIdx)}
, ...tableHours .map((h) => { return [
,
this.onTouchMove(e)} />,
,
, +
, ]; const untimedArea = range(Math.ceil(untimedTileTitles.length / 5)).map((i) => [ -
, -
+
, +
{untimedTileTitles[i * 5 + dayIdx]}
, +
, +
,
, -
, -
, -
, +
,
, -
, -
, +
, +
, ]); return ( -
+
{timedArea} {untimedArea}
@@ -537,10 +483,10 @@ class TimetableSubSection extends Component { return (
this.onMouseUp(e)} onTouchEnd={(e) => this.onTouchEnd(e)}> -
+
{getHeadColumn()} {getDayColumn(0)} {getDayColumn(1)} diff --git a/src/components/sections/timetable/timetableandinfos/TimetableSubSection.module.scss b/src/components/sections/timetable/timetableandinfos/TimetableSubSection.module.scss new file mode 100644 index 0000000..48e7486 --- /dev/null +++ b/src/components/sections/timetable/timetableandinfos/TimetableSubSection.module.scss @@ -0,0 +1,119 @@ +@use '@/sass/abstracts/color' as color; +@use '@/sass/abstracts/font' as font; +@use '@/sass/abstracts/mixins' as *; + +.timetable { + position: relative; + + grid-area: timetable; + + width: 100%; + height: 100%; +} + +.table { + display: flex; + flex-direction: row; + + height: 100%; +} + +.label { + display: flex; + flex-direction: column; + + margin-right: 7px; + width: 10px; +} + +.labelGap { + flex: auto; +} + +.labelTitle { + flex: none; + + height: font.$line-height-smallest + 6px; +} + +.labelLine { + flex: none; + + height: 1px; + + & > span, + & > strong { + display: block; + + margin-top: calc(calc(font.$line-height-smallest / 2) * -1) + 1px; + width: 100%; + + font-size: font.$size-smallest; + line-height: font.$line-height-smallest; + text-align: right; + color: color.$text-light; + } +} + +.labelCell { + flex: auto; +} + +.body { + display: flex; + flex-direction: column; + flex: 1 1 0; + + margin-right: 3px; + padding: 0 1px; + + &:last-child { + margin-right: 0; + } +} + +.bodyGap { + flex: auto; +} + +.bodyTitle { + flex: none; + + margin: 0 -20px; + height: font.$line-height-smallest + 6px; + padding-bottom: 6px; + + font-size: font.$size-smallest; + line-height: font.$line-height-smallest; + text-align: center; + color: color.$text-light; +} + +.bodyCell { + flex: auto; + + &Drag { + touch-action: pan-x pinch-zoom; + } +} + +.bodyLine { + flex: none; + + border-bottom: 1px solid color.$normal-line; + height: 1px; + + &Bold { + border-bottom-color: color.$normal-line-dark; + } + + &Dashed { + border-bottom-style: dashed; + } + + &MobileNoline { + @include mixin-media-portrait { + border-bottom: none; + } + } +} diff --git a/src/sass/App.module.scss b/src/sass/App.module.scss index 242c6a5..66ad1b6 100644 --- a/src/sass/App.module.scss +++ b/src/sass/App.module.scss @@ -947,103 +947,6 @@ a { } } - &--timetable { - grid-area: timetable; - position: relative; - - &__table { - display: flex; - flex-direction: row; - height: 100%; - - &__label { - display: flex; - flex-direction: column; - width: 10px; - margin-right: 7px; - - &__title { - flex: none; - height: font.$line-height-smallest + 6px; - } - - &__line { - flex: none; - height: 1px; - - > span, - > strong { - width: 100%; - text-align: right; - color: color.$text-light; - font-size: font.$size-smallest; - line-height: font.$line-height-smallest; - display: block; - margin-top: calc(calc(font.$line-height-smallest / 2) * -1) + 1px; - } - } - - &__cell { - flex: auto; - } - - &__gap { - flex: auto; - } - } - - &__body { - display: flex; - flex-direction: column; - padding: 0 1px; - margin-right: 3px; - flex: 1 1 0; - &:last-child { - margin-right: 0; - } - - &__title { - flex: none; - height: font.$line-height-smallest + 6px; - text-align: center; - font-size: font.$size-smallest; - line-height: font.$line-height-smallest; - color: color.$text-light; - padding-bottom: 6px; - margin: 0 -20px; - } - - &__line { - flex: none; - height: 1px; - border-bottom: 1px solid color.$normal-line; - &--bold { - border-bottom-color: color.$normal-line-dark; - } - &--dashed { - border-bottom-style: dashed; - } - &--mobile-noline { - @include mixin-media-portrait { - border-bottom: none; - } - } - } - - &__cell { - flex: auto; - &--drag { - touch-action: pan-x pinch-zoom; - } - } - - &__gap { - flex: auto; - } - } - } - } - &--map { grid-area: map; height: initial; From 55c483273f686774494bda40dc1e4ad44dfddf78 Mon Sep 17 00:00:00 2001 From: yuwol Date: Wed, 8 May 2024 17:04:12 +0900 Subject: [PATCH 04/16] refactor: split ShareSubSection styles --- .../timetableandinfos/ShareSubSection.jsx | 48 ++++--- .../ShareSubSection.module.scss | 128 ++++++++++++++++++ src/sass/App.module.scss | 124 ----------------- 3 files changed, 151 insertions(+), 149 deletions(-) create mode 100644 src/components/sections/timetable/timetableandinfos/ShareSubSection.module.scss diff --git a/src/components/sections/timetable/timetableandinfos/ShareSubSection.jsx b/src/components/sections/timetable/timetableandinfos/ShareSubSection.jsx index 3bed505..4a2df6f 100644 --- a/src/components/sections/timetable/timetableandinfos/ShareSubSection.jsx +++ b/src/components/sections/timetable/timetableandinfos/ShareSubSection.jsx @@ -17,6 +17,8 @@ import userShape from '../../../../shapes/model/session/UserShape'; import Divider from '../../../Divider'; +import styles from './ShareSubSection.module.scss'; + class ShareSubSection extends Component { render() { const { t, i18n } = this.props; @@ -35,17 +37,13 @@ class ShareSubSection extends Component { : ''; return ( -
-
+
+
{user && selectedTimetable && year && semester ? ( <> -
+ @@ -56,9 +54,9 @@ class ShareSubSection extends Component { rel="noopener noreferrer"> */} -
+ @@ -67,7 +65,7 @@ class ShareSubSection extends Component { orientation={Divider.Orientation.HORIZONTAL} isVisible={{ desktop: true, mobile: false }} /> -
+
- + {t('ui.button.openSyllabus')}
) : ( <> -
- - +
+ + {t('ui.button.shareImage')}
- {/* + {/* */} -
- - +
+ + {t('ui.button.shareCalendar')}
@@ -106,26 +104,26 @@ class ShareSubSection extends Component { orientation={Divider.Orientation.HORIZONTAL} isVisible={{ desktop: true, mobile: false }} /> -
- - +
+ + {t('ui.button.openSyllabus')}
)}
-
+
diff --git a/src/components/sections/timetable/timetableandinfos/ShareSubSection.module.scss b/src/components/sections/timetable/timetableandinfos/ShareSubSection.module.scss new file mode 100644 index 0000000..9b803d2 --- /dev/null +++ b/src/components/sections/timetable/timetableandinfos/ShareSubSection.module.scss @@ -0,0 +1,128 @@ +@use '@/sass/abstracts/color' as color; +@use '@/sass/abstracts/font' as font; +@use '@/sass/abstracts/mixins' as *; +@use '@/sass/abstracts/variables' as *; + +.section { + grid-area: share; +} + +.share { + @include mixin-media-portrait { + float: left; + + margin-right: 8px; + height: 10px; + vertical-align: middle; + } +} + +.shareItem { + &:not(:last-child) { + margin-bottom: 8px; + } + + &:has(+ .divider) { + margin-bottom: $section-padding; + } + + @include mixin-media-portrait { + display: inline-block; + margin-right: 8px; + } + + & > * { + display: flex; + align-items: center; + + & i { + @include mixin-media-landscape { + margin-right: $attribute-name-margin-right; + } + } + + & span { + font-size: font.$size-small; + font-weight: bold; + + @include mixin-media-portrait { + display: none; + } + } + } +} + +.disabled { + color: color.$text-disable; +} + +.buttonContainer { + float: right; + + @include mixin-media-landscape { + display: none; + } +} + +.icon { + display: inline-block; + + background: none no-repeat center center; + + vertical-align: top; + + .share & { + width: 19px; + height: 19px; + } + + .buttonContainer & { + margin: calc(calc(font.$line-height-normal - 13px) / 2) 0; + width: 13px; + height: 13px; + } + + &ShareImage { + background-image: url(@/static/icons/share_image.svg); + *:hover > & { + background-image: url(@/static/icons/share_image_hover.svg); + } + .disabled > & { + background-image: url(@/static/icons/share_image_disable.svg); + } + } + + &ShareIcalandar { + background-image: url(@/static/icons/share_icalendar.svg); + *:hover > & { + background-image: url(@/static/icons/share_icalendar_hover.svg); + } + .disabled > & { + background-image: url(@/static/icons/share_icalendar_disable.svg); + } + } + + &ShareSyllabus { + background-image: url(@/static/icons/share_syllabus.svg); + *:hover > & { + background-image: url(@/static/icons/share_syllabus_hover.svg); + } + .disabled > & { + background-image: url(@/static/icons/share_syllabus_disable.svg); + } + } + + &SwitchTable { + background-image: url(@/static/icons/switch_table.svg); + *:hover > & { + background-image: url(@/static/icons/switch_table_hover.svg); + } + } + + &ShowLectures { + background-image: url(@/static/icons/show_lectures.svg); + *:hover > & { + background-image: url(@/static/icons/show_lectures_hover.svg); + } + } +} diff --git a/src/sass/App.module.scss b/src/sass/App.module.scss index 66ad1b6..10f954e 100644 --- a/src/sass/App.module.scss +++ b/src/sass/App.module.scss @@ -1138,66 +1138,6 @@ a { } } - &--share { - grid-area: share; - - & > div:first-child { - @include mixin-media-portrait { - height: 10px; - float: left; - margin-right: 8px; - vertical-align: middle; - } - - .subsection--share__item { - &:not(:last-child) { - margin-bottom: 8px; - } - &:has(+ .divider) { - margin-bottom: $section-padding; - } - @include mixin-media-portrait { - display: inline-block; - margin-right: 8px; - } - - & > * { - display: flex; - align-items: center; - - & i { - @include mixin-media-landscape { - margin-right: $attribute-name-margin-right; - } - } - - & span { - font-size: font.$size-small; - font-weight: bold; - @include mixin-media-portrait { - display: none; - } - } - } - - & .disabled { - color: color.$text-disable; - } - } - } - - & > div:nth-child(2) { - float: right; - @include mixin-media-landscape { - display: none; - } - } - - & > last-child { - clear: both; - } - } - &--my-summary { height: initial; } @@ -3475,20 +3415,6 @@ i.icon { } } - &--share-image { - width: 19px; - height: 19px; - background-image: url(../static/icons/share_image.svg); - - *:hover > & { - background-image: url(../static/icons/share_image_hover.svg); - } - - *.disabled > & { - background-image: url(../static/icons/share_image_disable.svg); - } - } - &--share-googlecalendar { width: 19px; height: 19px; @@ -3503,34 +3429,6 @@ i.icon { } } - &--share-icalendar { - width: 19px; - height: 19px; - background-image: url(../static/icons/share_icalendar.svg); - - *:hover > & { - background-image: url(../static/icons/share_icalendar_hover.svg); - } - - *.disabled > & { - background-image: url(../static/icons/share_icalendar_disable.svg); - } - } - - &--share-syllabus { - width: 19px; - height: 19px; - background-image: url(../static/icons/share_syllabus.svg); - - *:hover > & { - background-image: url(../static/icons/share_syllabus_hover.svg); - } - - *.disabled > & { - background-image: url(../static/icons/share_syllabus_disable.svg); - } - } - &--duplicate-table { width: 10px; height: 11px; @@ -3676,28 +3574,6 @@ i.icon { } } - &--switch-table { - width: 13px; - height: 13px; - background-image: url(../static/icons/switch_table.svg); - margin: calc(calc(font.$line-height-normal - 13px) / 2) 0; - - *:hover > & { - background-image: url(../static/icons/switch_table_hover.svg); - } - } - - &--show-lectures { - width: 13px; - height: 13px; - background-image: url(../static/icons/show_lectures.svg); - margin: calc(calc(font.$line-height-normal - 13px) / 2) 0; - - *:hover > & { - background-image: url(../static/icons/show_lectures_hover.svg); - } - } - &--star { width: 26px; height: 26px; From 8b0d9355a34255caebce4054d60f2e86adacd224 Mon Sep 17 00:00:00 2001 From: yuwol Date: Wed, 8 May 2024 17:22:57 +0900 Subject: [PATCH 05/16] refactor: split MapSubSection styles --- .../timetableandinfos/MapSubSection.jsx | 37 +++----- .../MapsubSection.module.scss | 95 +++++++++++++++++++ src/sass/App.module.scss | 81 ---------------- 3 files changed, 107 insertions(+), 106 deletions(-) create mode 100644 src/components/sections/timetable/timetableandinfos/MapsubSection.module.scss diff --git a/src/components/sections/timetable/timetableandinfos/MapSubSection.jsx b/src/components/sections/timetable/timetableandinfos/MapSubSection.jsx index c684446..d189325 100644 --- a/src/components/sections/timetable/timetableandinfos/MapSubSection.jsx +++ b/src/components/sections/timetable/timetableandinfos/MapSubSection.jsx @@ -25,6 +25,8 @@ import { unique } from '../../../../utils/commonUtils'; import { LectureFocusFrom } from '../../../../reducers/timetable/lectureFocus'; +import styles from './MapSubSection.module.scss'; + const POSITION_OF_LOCATIONS = new Map([ ['E2', { left: 60, top: 81 }], ['E3', { left: 67, top: 75 }], @@ -115,7 +117,7 @@ class MapSubSection extends Component { const position = POSITION_OF_LOCATIONS.get(b) || {}; return (
this.setFocusOnMap(b)} onMouseOut={() => this.clearFocus()} @@ -124,12 +126,8 @@ class MapSubSection extends Component { top: `${position.top}%`, zIndex: position.top, }}> -
- {b} +
+ {b} {lecturesOnBuilding.map((l) => { const isCircleHighlighted = isSingleFocused(l, lectureFocus) || multipleFocusBuilding === b; @@ -138,35 +136,24 @@ class MapSubSection extends Component { className={classNames( 'background-color--dark', `background-color--${getColorNumber(l)}`, - isCircleHighlighted ? 'highlighted' : null, + styles.lectureCircle, + { highlighted: isCircleHighlighted }, )} key={l.id} /> ); })}
-
-
+
+
); }; return ( -
-
- KAIST Map - {buildings.map((b) => mapBuildingToPin(b))} -
+
+ KAIST Map + {buildings.map((b) => mapBuildingToPin(b))}
); } diff --git a/src/components/sections/timetable/timetableandinfos/MapsubSection.module.scss b/src/components/sections/timetable/timetableandinfos/MapsubSection.module.scss new file mode 100644 index 0000000..10003d9 --- /dev/null +++ b/src/components/sections/timetable/timetableandinfos/MapsubSection.module.scss @@ -0,0 +1,95 @@ +@use '@/sass/abstracts/color' as color; +@use '@/sass/abstracts/font' as font; + +.map { + position: relative; + + grid-area: map; + width: 100%; + height: initial; + + & > img { + width: 100%; + } +} + +.pin { + position: absolute; + + margin-top: -16px; + margin-right: -100px; + margin-left: -5px; + + &:hover { + z-index: 101 !important; + } +} + +.tag { + position: relative; + z-index: 1; + + border-radius: 2px; + height: 13px; + padding: 2px 3px; + + background-color: color.$block-background; + + font-size: font.$size-smallest; + line-height: 9px; + + &.highlighted { + background-color: color.$block-background-highlight; + + color: color.$highlight; + } +} + +.buildingName { + margin-right: 1px; +} + +.lectureCircle { + display: inline-block; + + margin-left: 1px; + border-radius: 50%; + width: 9px; + height: 9px; + + &.highlighted { + background-color: color.$highlight !important; + } +} + +.arrow { + position: absolute; + bottom: -3px; + left: 5px; + + margin: -3px -2px 0 -2px; + border-top: 3px solid color.$block-background; + border-left: 2px solid transparent; + border-right: 2px solid transparent; + + &.highlighted { + border-top-color: color.$block-background-highlight; + } +} + +.arrowShadow { + position: absolute; + bottom: -3px; + left: 5px; + + transform: scale(1.5, 1); + + box-shadow: 0 0 3px 3px change-color(color.$block-shadow-dark, $alpha: 0.8); + border-radius: 50%; + width: 0px; + height: 0px; + + &.highlighted { + box-shadow: 0 0 3px 3px change-color(color.$block-shadow-highlight, $alpha: 0.8); + } +} diff --git a/src/sass/App.module.scss b/src/sass/App.module.scss index 10f954e..01d8a8d 100644 --- a/src/sass/App.module.scss +++ b/src/sass/App.module.scss @@ -947,87 +947,6 @@ a { } } - &--map { - grid-area: map; - height: initial; - - & > div { - position: relative; - - & > img { - width: 100%; - } - - .subsection--map__pin { - position: absolute; - margin-left: -5px; - margin-top: -16px; - margin-right: -100px; - &:hover { - z-index: 101 !important; - } - - &__box { - position: relative; - z-index: 1; - font-size: font.$size-smallest; - line-height: 9px; - height: 13px; - border-radius: 2px; - padding: 2px 3px; - background-color: color.$block-background; - &.highlighted { - background-color: color.$block-background-highlight; - color: color.$highlight; - } - - & > span:first-child { - margin-right: 1px; - } - - & > span:not(:first-child) { - display: inline-block; - width: 9px; - height: 9px; - margin-left: 1px; - border-radius: 50%; - - &.highlighted { - background-color: color.$highlight !important; - } - } - } - - &__arrow-shadow { - position: absolute; - bottom: -3px; - left: 5px; - width: 0px; - height: 0px; - border-radius: 50%; - box-shadow: 0 0 3px 3px change-color(color.$block-shadow-dark, $alpha: 0.8); - transform: scale(1.5, 1); - &.highlighted { - box-shadow: 0 0 3px 3px change-color(color.$block-shadow-highlight, $alpha: 0.8); - } - } - - &__arrow { - position: absolute; - bottom: -3px; - left: 5px; - margin: -3px -2px 0 -2px; - border-left: 2px solid transparent; - border-right: 2px solid transparent; - border-top: 3px solid color.$block-background; - &.highlighted { - border-top-color: color.$block-background-highlight; - } - } - } - } - } - &--summary { grid-area: summary; display: flex; From 6e19f7a807bfbb58ec93374dfd8948f4466e6f6a Mon Sep 17 00:00:00 2001 From: yuwol Date: Sun, 12 May 2024 01:06:15 +0900 Subject: [PATCH 06/16] refactor: split SemesterSection styles --- .../timetable/semester/SemesterSection.jsx | 33 ++++---- .../semester/SemesterSection.module.scss | 77 +++++++++++++++++++ src/sass/App.module.scss | 65 ---------------- 3 files changed, 91 insertions(+), 84 deletions(-) create mode 100644 src/components/sections/timetable/semester/SemesterSection.module.scss diff --git a/src/components/sections/timetable/semester/SemesterSection.jsx b/src/components/sections/timetable/semester/SemesterSection.jsx index 48ca542..122cc4f 100644 --- a/src/components/sections/timetable/semester/SemesterSection.jsx +++ b/src/components/sections/timetable/semester/SemesterSection.jsx @@ -12,6 +12,8 @@ import semesterShape from '../../../../shapes/model/subject/SemesterShape'; import { getTimetableSemester, getSemesterName } from '../../../../utils/semesterUtils'; +import styles from './SemesterSection.module.scss'; + class SemesterSection extends Component { componentDidMount() { const { semesters } = this.props; @@ -100,34 +102,27 @@ class SemesterSection extends Component { year && semester ? ( <> - {`${year} ${getSemesterName(semester)}`} + {`${year} ${getSemesterName(semester)}`} ) : ( - {t('ui.placeholder.loading')} + {t('ui.placeholder.loading')} ); return (
-
+ className={classNames('section', styles.semester, { 'section--transparent': isPortrait })}> +
{sectionContent}
diff --git a/src/components/sections/timetable/semester/SemesterSection.module.scss b/src/components/sections/timetable/semester/SemesterSection.module.scss new file mode 100644 index 0000000..ab291b9 --- /dev/null +++ b/src/components/sections/timetable/semester/SemesterSection.module.scss @@ -0,0 +1,77 @@ +@use '@/sass/abstracts/font' as font; +@use '@/sass/abstracts/mixins' as *; + +.semester { + grid-area: semester; + + padding: 6px 8px; +} + +.subsection { + display: flex; + flex-direction: row; + + width: 100%; + height: 100%; + + font-size: font.$size-small; + line-height: font.$line-height-small; +} +:global(.semester-ko) { + width: 78px; +} +:global(.semester-en) { + width: 88px; +} + +.arrowButton { + flex: 0 0 auto; + + &:disabled { + pointer-events: none; + } +} + +.semesterText { + flex: 1 1 auto; + + text-align: center; + white-space: nowrap; + + @include mixin-media-portrait { + font-size: font.$size-big; + line-height: font.$line-height-big; + } +} + +.icon { + display: inline-block; + + margin: calc(calc(font.$line-height-small - 11px) / 2) 0; + width: 7px; + height: 11px; + + background: none no-repeat center center; + + vertical-align: top; + + &PrevArrow { + background-image: url(@/static/icons/semester_prev.svg); + *:hover > & { + background-image: url(@/static/icons/semester_prev_hover.svg); + } + *:disabled > & { + background-image: url(@/static/icons/semester_prev_disabled.svg); + } + } + + &NextArrow { + background-image: url(@/static/icons/semester_next.svg); + *:hover > & { + background-image: url(@/static/icons/semester_next_hover.svg); + } + *:disabled > & { + background-image: url(@/static/icons/semester_next_disabled.svg); + } + } +} diff --git a/src/sass/App.module.scss b/src/sass/App.module.scss index 01d8a8d..be7fcbe 100644 --- a/src/sass/App.module.scss +++ b/src/sass/App.module.scss @@ -776,11 +776,6 @@ a { } } - &--semester { - grid-area: semester; - padding: 6px 8px; - } - &--planner-and-infos { grid-area: planner-and-infos; display: grid; @@ -917,36 +912,6 @@ a { } } - &--semester { - font-size: font.$size-small; - line-height: font.$line-height-small; - display: flex; - flex-direction: row; - &.semester-ko { - width: 78px; - } - &.semester-en { - width: 88px; - } - - & > button { - flex: 0 0 auto; - &.disable { - pointer-events: none; - } - } - - & > span { - flex: 1 1 auto; - text-align: center; - white-space: nowrap; - @include mixin-media-portrait { - font-size: font.$size-big; - line-height: font.$line-height-big; - } - } - } - &--summary { grid-area: summary; display: flex; @@ -3389,36 +3354,6 @@ i.icon { } } - &--semester-prev { - width: 7px; - height: 11px; - background-image: url(../static/icons/semester_prev.svg); - margin: calc(calc(font.$line-height-small - 11px) / 2) 0; - - *:hover > & { - background-image: url(../static/icons/semester_prev_hover.svg); - } - - *.disable > & { - background-image: url(../static/icons/semester_prev_disabled.svg); - } - } - - &--semester-next { - width: 7px; - height: 11px; - background-image: url(../static/icons/semester_next.svg); - margin: calc(calc(font.$line-height-small - 11px) / 2) 0; - - *:hover > & { - background-image: url(../static/icons/semester_next_hover.svg); - } - - *.disable > & { - background-image: url(../static/icons/semester_next_disabled.svg); - } - } - &--checkbox { width: 10px; height: 12px; From d59dd6690155e8f7b9680d082549b435e56ae294 Mon Sep 17 00:00:00 2001 From: yuwol Date: Sun, 12 May 2024 14:01:54 +0900 Subject: [PATCH 07/16] refactor: split CourseRelatedCoursesSubSection styles --- .../CourseRelatedCoursesSubSection.jsx | 16 ++++--- ...CourseRelatedCoursesSubSection.module.scss | 43 +++++++++++++++++ src/sass/App.module.scss | 48 +++---------------- 3 files changed, 59 insertions(+), 48 deletions(-) create mode 100644 src/components/sections/dictionary/coursedetail/CourseRelatedCoursesSubSection.module.scss diff --git a/src/components/sections/dictionary/coursedetail/CourseRelatedCoursesSubSection.jsx b/src/components/sections/dictionary/coursedetail/CourseRelatedCoursesSubSection.jsx index 2cb6552..2e3436b 100644 --- a/src/components/sections/dictionary/coursedetail/CourseRelatedCoursesSubSection.jsx +++ b/src/components/sections/dictionary/coursedetail/CourseRelatedCoursesSubSection.jsx @@ -9,6 +9,8 @@ import CourseSimpleBlock from '../../../blocks/CourseSimpleBlock'; import courseFocusShape from '../../../../shapes/state/dictionary/CourseFocusShape'; +import styles from './CourseRelatedCoursesSubSection.module.scss'; + class CourseRelatedCoursesSubSection extends Component { render() { const { t } = this.props; @@ -21,8 +23,8 @@ class CourseRelatedCoursesSubSection extends Component { const getBlocksOrPlaceholder = (courses) => { if (!courses.length) { return ( -
-
{t('ui.placeholder.unknown')}
+
+ {t('ui.placeholder.unknown')}
); } @@ -30,26 +32,26 @@ class CourseRelatedCoursesSubSection extends Component { }; return ( -
+
{t('ui.title.relatedCourses')}
-
+
{getBlocksOrPlaceholder(courseFocus.course.related_courses_prior)}
- +
- +
{getBlocksOrPlaceholder(courseFocus.course.related_courses_posterior)}
-
+
); } } diff --git a/src/components/sections/dictionary/coursedetail/CourseRelatedCoursesSubSection.module.scss b/src/components/sections/dictionary/coursedetail/CourseRelatedCoursesSubSection.module.scss new file mode 100644 index 0000000..e49a294 --- /dev/null +++ b/src/components/sections/dictionary/coursedetail/CourseRelatedCoursesSubSection.module.scss @@ -0,0 +1,43 @@ +@use '@/sass/abstracts/variables' as *; + +.courses { + display: flex; + flex-direction: row; + + & > div:nth-child(odd) { + display: flex; + flex-direction: column; + gap: $block-margin; + flex: 1 1 auto; + + width: 100%; + + & > .block { + flex: 1 0 0; + } + } + + & > div:nth-child(even) { + flex: 0 0 auto; + + margin: auto 10px; + } +} + +.placeholder { + min-height: 100%; + + font-size: 14px; + line-height: 15px; +} + +.arrowIcon { + display: inline-block; + + width: 9px; + height: 16px; + + background: no-repeat center url(@/static/icons/related_arrow.svg); + + vertical-align: top; +} diff --git a/src/sass/App.module.scss b/src/sass/App.module.scss index be7fcbe..487f630 100644 --- a/src/sass/App.module.scss +++ b/src/sass/App.module.scss @@ -2459,31 +2459,6 @@ a { } } -.related-courses { - display: flex; - flex-direction: row; - - & > div:nth-child(1), - & > div:nth-child(3), - & > div:nth-child(5) { - flex: 1 1 auto; - width: 100%; - display: flex; - flex-direction: column; - gap: $block-margin; - - > .block { - flex: 1 0 0; - } - } - - & > div:nth-child(2), - & > div:nth-child(4) { - flex: 0 0 auto; - margin: auto 10px; - } -} - .history { & > tbody > tr { &:first-child { @@ -3036,18 +3011,15 @@ a { display: flex; flex-direction: column; justify-content: center; - text-align: center; - color: color.$text-placeholder; - font-size: 16px; - line-height: 17px; - white-space: nowrap; + min-height: 17px + $section-padding * 2; - .related-courses & { - min-height: 100%; - font-size: 14px; - line-height: 15px; - } + white-space: nowrap; + + font-size: 16px; + line-height: 17px; + text-align: center; + color: color.$text-placeholder; &--history { min-height: 110px; @@ -3398,12 +3370,6 @@ i.icon { background-image: url(../static/icons/lecture_selector.svg); } - &--related-arrow { - width: 9px; - height: 16px; - background-image: url(../static/icons/related_arrow.svg); - } - &--status-read { width: 10px; height: 12px; From b8524542a833b66e8156e49649e5f0c86c59a01a Mon Sep 17 00:00:00 2001 From: yuwol Date: Sun, 12 May 2024 14:52:16 +0900 Subject: [PATCH 08/16] refactor: split CourseHistorySubSection styles --- .../coursedetail/CourseHistorySubSection.jsx | 32 ++++--- .../CourseHistorySubSection.module.scss | 85 +++++++++++++++++++ src/sass/App.module.scss | 73 ---------------- 3 files changed, 100 insertions(+), 90 deletions(-) create mode 100644 src/components/sections/dictionary/coursedetail/CourseHistorySubSection.module.scss diff --git a/src/components/sections/dictionary/coursedetail/CourseHistorySubSection.jsx b/src/components/sections/dictionary/coursedetail/CourseHistorySubSection.jsx index c1c3b45..56f52ef 100644 --- a/src/components/sections/dictionary/coursedetail/CourseHistorySubSection.jsx +++ b/src/components/sections/dictionary/coursedetail/CourseHistorySubSection.jsx @@ -12,6 +12,8 @@ import LectureGroupSimpleBlock from '../../../blocks/LectureGroupSimpleBlock'; import semesterShape from '../../../../shapes/model/subject/SemesterShape'; import courseFocusShape from '../../../../shapes/state/dictionary/CourseFocusShape'; +import styles from './CourseHistorySubSection.module.scss'; + class CourseHistorySubSection extends Component { constructor(props) { super(props); @@ -40,7 +42,7 @@ class CourseHistorySubSection extends Component { <>
{t('ui.title.courseHistory')}
-
+
{t('ui.placeholder.loading')}
@@ -58,13 +60,13 @@ class CourseHistorySubSection extends Component { ); if (filteredLectures.length === 0) { return ( - +
{t('ui.others.notOffered')}
); } return ( - + ); @@ -80,30 +82,26 @@ class CourseHistorySubSection extends Component { const isSpecialLectureCourse = specialLectures.length / courseFocus.lectures.length > 0.3; return ( -
+
{t('ui.title.courseHistory')}
+ className={classNames(styles.history, { + [styles.specialLecture]: isSpecialLectureCourse, + })}> - + {targetYears.map((y) => getBlockOrPlaceholder(y, 1))} - - {/* eslint-disable-next-line jsx-a11y/control-has-associated-label */} + + {targetYears.map((year) => ( + ))} - + {targetYears.map((y) => getBlockOrPlaceholder(y, 3))} @@ -111,7 +109,7 @@ class CourseHistorySubSection extends Component {
{t('ui.semester.spring')}
- {targetYears.map((y) => ( - - {y} - {year}
{t('ui.semester.fall')}
-
+ ); } } diff --git a/src/components/sections/dictionary/coursedetail/CourseHistorySubSection.module.scss b/src/components/sections/dictionary/coursedetail/CourseHistorySubSection.module.scss new file mode 100644 index 0000000..36de35d --- /dev/null +++ b/src/components/sections/dictionary/coursedetail/CourseHistorySubSection.module.scss @@ -0,0 +1,85 @@ +@use '@/sass/abstracts/color' as color; +@use '@/sass/abstracts/font' as font; +@use '@/sass/abstracts/mixins' as *; + +.history { + th { + position: sticky; + z-index: 1; + left: 0; + + width: 10px; + padding-right: 10px; + + background-color: color.$section-background; + + font-size: font.$size-small; + line-height: font.$line-height-small; + text-align: right; + vertical-align: middle; + white-space: nowrap; + color: color.$text-normal; + } + + td { + border-left: 1px solid color.$normal-line; + padding: 0 6px; + + text-align: center; + + &:first-of-type { + border-left: none; + padding-left: 0; + } + &:last-of-type { + padding-right: 0; + } + + & > * { + @include mixin-media-landscape { + width: calc(64px + 7vh); + } + @include mixin-media-portrait { + width: calc(64px + 19vw - 30px); + } + } + } +} + +.specialLecture td > * { + @include mixin-media-landscape { + width: calc(108px + 7vh); + } + @include mixin-media-portrait { + width: calc(108px + 19vw - 30px); + } +} + +.springSemesters { + vertical-align: bottom; +} +.fallSemesters { + vertical-align: top; +} + +.years { + font-size: font.$size-smaller; + line-height: font.$line-height-smaller; + font-weight: bold; + + & > td { + padding: 6px; + } +} + +.placeholder { + min-height: 110px; +} + +.unopened { + padding-top: 8px; + padding-bottom: 8px; + + vertical-align: middle; + color: color.$text-placeholder; +} diff --git a/src/sass/App.module.scss b/src/sass/App.module.scss index 487f630..d149075 100644 --- a/src/sass/App.module.scss +++ b/src/sass/App.module.scss @@ -2459,75 +2459,6 @@ a { } } -.history { - & > tbody > tr { - &:first-child { - vertical-align: bottom; - } - &:nth-child(2) { - font-weight: bold; - font-size: font.$size-smaller; - line-height: font.$line-height-smaller; - } - &:last-child { - vertical-align: top; - } - - & > th { - position: sticky; - z-index: 1; - left: 0; - background-color: color.$section-background; - width: 10px; - white-space: nowrap; - padding-right: 10px; - font-size: font.$size-small; - vertical-align: middle; - text-align: right; - line-height: font.$line-height-small; - color: color.$text-normal; - } - - & > td { - text-align: center; - padding: 0 6px; - border-left: 1px solid color.$normal-line; - &:first-of-type { - padding-left: 0; - border-left: none; - } - &:last-of-type { - padding-right: 0; - } - &.history__cell--year-label { - padding-top: 6px; - padding-bottom: 6px; - } - &.history__cell--unopen { - vertical-align: middle; - color: color.$text-placeholder; - padding-top: 8px; - padding-bottom: 8px; - } - - & > * { - @include mixin-media-landscape { - width: calc(64px + 7vh); - @at-root .history--special-lecture#{&} { - width: calc(108px + 7vh); - } - } - @include mixin-media-portrait { - width: calc(64px + 19vw - 30px); - @at-root .history--special-lecture#{&} { - width: calc(108px + 19vw - 30px); - } - } - } - } - } -} - .course-status { &:not(:last-child) { margin-bottom: $attribute-margin-bottom + 2px; @@ -3021,10 +2952,6 @@ a { text-align: center; color: color.$text-placeholder; - &--history { - min-height: 110px; - } - .subsection--course-list &, .subsection--lecture-list &, .subsection--taken-lectures & { From b5565b63c0a14b7f9a6597fb3fdee94414757323 Mon Sep 17 00:00:00 2001 From: yuwol Date: Sun, 12 May 2024 15:11:49 +0900 Subject: [PATCH 09/16] refactor: split CreditBar styles --- src/components/CreditBar.jsx | 21 +++++----------- src/components/CreditBar.module.scss | 37 ++++++++++++++++++++++++++++ src/sass/App.module.scss | 34 ------------------------- 3 files changed, 43 insertions(+), 49 deletions(-) create mode 100644 src/components/CreditBar.module.scss diff --git a/src/components/CreditBar.jsx b/src/components/CreditBar.jsx index bd84cb9..e002143 100644 --- a/src/components/CreditBar.jsx +++ b/src/components/CreditBar.jsx @@ -5,6 +5,8 @@ import PropTypes from 'prop-types'; import { appBoundClassNames as classNames } from '../common/boundClassNames'; import { ItemFocusFrom } from '../reducers/planner/itemFocus'; +import styles from './CreditBar.module.scss'; + class CreditBar extends Component { render() { const { @@ -55,31 +57,22 @@ class CreditBar extends Component { ]; return ( -
-
{text}
-
+
+
{text}
+
span { + color: color.$highlight; + } +} + +.progressBar { + display: flex; + flex-direction: row; + + overflow: hidden; + + border-radius: calc($bar-height / 2); + height: $bar-height; + + background-color: #eee; +} diff --git a/src/sass/App.module.scss b/src/sass/App.module.scss index d149075..33fa626 100644 --- a/src/sass/App.module.scss +++ b/src/sass/App.module.scss @@ -3366,37 +3366,3 @@ i.icon { display: none !important; } } - -.credit-bar { - $bar-height: 6px; - $margin-tb-base: calc( - calc(calc(font.$line-height-normal - $bar-height) - font.$line-height-smallest) / 2 - ); - - position: relative; - width: 50%; - margin: calc($margin-tb-base - 4px) 0 calc($margin-tb-base + 4px) 0; - - &__body { - height: $bar-height; - border-radius: calc($bar-height / 2); - overflow: hidden; - background-color: #eeeeee; - display: flex; - flex-direction: row; - - &__bar { - height: 100%; - } - } - - &__text { - text-align: right; - font-size: font.$size-smallest; - line-height: font.$line-height-smallest; - - & > span { - color: color.$highlight; - } - } -} From 65494dd3c7d897a63a861bd8ffc4376526767db7 Mon Sep 17 00:00:00 2001 From: yuwol Date: Sun, 12 May 2024 15:35:43 +0900 Subject: [PATCH 10/16] refactor: split BetaPopup styles --- src/components/BetaPopup.jsx | 36 +++++++++++++-------------- src/components/BetaPopup.module.scss | 37 ++++++++++++++++++++++++++++ src/components/CloseButton.jsx | 5 ++-- src/sass/App.module.scss | 37 ++++++---------------------- 4 files changed, 66 insertions(+), 49 deletions(-) create mode 100644 src/components/BetaPopup.module.scss diff --git a/src/components/BetaPopup.jsx b/src/components/BetaPopup.jsx index 204538e..a377fb6 100644 --- a/src/components/BetaPopup.jsx +++ b/src/components/BetaPopup.jsx @@ -6,6 +6,8 @@ import { appBoundClassNames as classNames } from '../common/boundClassNames'; import CloseButton from './CloseButton'; +import styles from './BetaPopup.module.scss'; + class BetaPopup extends Component { constructor(props) { super(props); @@ -30,24 +32,22 @@ class BetaPopup extends Component { } return ( -
- -
-
{title}
-
- {content.map((l) => ( -
{l}
- ))} -
- +
+ +
{title}
+
+ {content.map((text, idx) => ( +

{text}

+ ))} +
+
); diff --git a/src/components/BetaPopup.module.scss b/src/components/BetaPopup.module.scss new file mode 100644 index 0000000..3113a0e --- /dev/null +++ b/src/components/BetaPopup.module.scss @@ -0,0 +1,37 @@ +@use '@/sass/abstracts/font' as font; +@use '@/sass/abstracts/mixins' as *; +@use '@/sass/abstracts/variables' as *; + +.popup { + position: absolute; + z-index: 200; + top: 50%; + left: 50%; + + display: flex; + flex-direction: column; + + transform: translate(-50%, calc(-50% - #{$header-height} / 2)); + + box-shadow: + $section-box-shadow, + 0 0 0 1000px rgb(0 0 0 / 0.3); + width: 260px; + height: 240px; +} + +.contents { + flex: auto; + + line-height: font.$line-height-normal + font.$delta-line-height-longcontent; + + & > p:not(:last-child) { + margin-bottom: 4px; + } +} + +.closeButton { + @include mixin-media-landscape { + display: initial; + } +} diff --git a/src/components/CloseButton.jsx b/src/components/CloseButton.jsx index e1b342c..19a7e06 100644 --- a/src/components/CloseButton.jsx +++ b/src/components/CloseButton.jsx @@ -5,10 +5,10 @@ import { appBoundClassNames as classNames } from '../common/boundClassNames'; class CloseButton extends Component { render() { - const { onClick } = this.props; + const { onClick, className } = this.props; return ( -
+
@@ -19,6 +19,7 @@ class CloseButton extends Component { CloseButton.propTypes = { onClick: PropTypes.func.isRequired, + className: PropTypes.string, }; export default CloseButton; diff --git a/src/sass/App.module.scss b/src/sass/App.module.scss index 33fa626..600645b 100644 --- a/src/sass/App.module.scss +++ b/src/sass/App.module.scss @@ -643,19 +643,6 @@ a { right: calc(#{$section-margin-lr} * 2 + env(safe-area-inset-right)); } - &--popup { - position: absolute; - width: 260px; - height: 240px; - z-index: 200; - box-shadow: - $section-box-shadow, - 0 0 0 1000px rgba(#000, 0.3); - top: 50%; - left: 50%; - transform: translate(-50%, calc(-50% - #{$header-height} / 2)); - } - &--transparent { padding: initial !important; background-color: initial; @@ -845,17 +832,6 @@ a { flex-direction: column; } - &--beta-popup { - &__content { - flex: 1 1 auto; - line-height: font.$line-height-normal + font.$delta-line-height-longcontent; - - & > div:not(:last-child) { - margin-bottom: 4px; - } - } - } - &--lecture-detail { &__mobile-buttons { text-align: right; @@ -1643,13 +1619,17 @@ a { } .close-button-wrap { - display: block; position: absolute; - padding: $section-padding 0 ($section-padding - 2px) ($section-padding - 2px); + z-index: 90; top: 0; right: $section-padding; + + display: block; + + padding: $section-padding 0 ($section-padding - 2px) ($section-padding - 2px); + background-color: rgba(color.$section-background, $opacity-text-overlay); - z-index: 90; + .section--modal & { z-index: 290; } @@ -1657,8 +1637,7 @@ a { @include mixin-media-landscape { display: none; - .section--modal &, - .section--popup & { + .section--modal & { display: initial; } } From 2c71b0a9633610770de3a7522c7e630bede12b85 Mon Sep 17 00:00:00 2001 From: yuwol Date: Sun, 12 May 2024 16:15:35 +0900 Subject: [PATCH 11/16] refactor: split CourseStatus styles --- src/components/CountController.jsx | 13 +++--- src/components/CountController.module.scss | 29 +++++++++++++ src/components/CourseStatus.jsx | 17 ++++---- src/components/CourseStatus.module.scss | 28 +++++++++++++ src/sass/App.module.scss | 49 ---------------------- 5 files changed, 72 insertions(+), 64 deletions(-) create mode 100644 src/components/CountController.module.scss create mode 100644 src/components/CourseStatus.module.scss diff --git a/src/components/CountController.jsx b/src/components/CountController.jsx index 9aa7877..7a7309a 100644 --- a/src/components/CountController.jsx +++ b/src/components/CountController.jsx @@ -1,17 +1,18 @@ -import React, { Component } from 'react'; -import PropTypes from 'prop-types'; +import { Component } from 'react'; import { withTranslation } from 'react-i18next'; +import PropTypes from 'prop-types'; -import { appBoundClassNames as classNames } from '../common/boundClassNames'; +import classNames from 'classnames'; +import styles from './CountController.module.scss'; class CountController extends Component { render() { const { count, updateCount } = this.props; return ( -
+
{ if (count > 0) { updateCount(count - 1); @@ -20,7 +21,7 @@ class CountController extends Component { />
{count}
{ updateCount(count + 1); }} diff --git a/src/components/CountController.module.scss b/src/components/CountController.module.scss new file mode 100644 index 0000000..96b53e8 --- /dev/null +++ b/src/components/CountController.module.scss @@ -0,0 +1,29 @@ +.controller { + display: flex; + flex-direction: row; + justify-content: space-between; +} + +.icon { + display: inline-block; + + margin: calc(calc(font.$line-height-normal - 12px) / 2) 0; + width: 12px; + height: 12px; + + background: none no-repeat center center; + + vertical-align: top; + + &PlannerPlus { + margin-left: 8px; + + background-image: url(@/static/icons/plus_circled.svg); + } + + &PlannerMinus { + margin-right: 8px; + + background-image: url(@/static/icons/minus_circled.svg); + } +} diff --git a/src/components/CourseStatus.jsx b/src/components/CourseStatus.jsx index 92d5163..c28a7f4 100644 --- a/src/components/CourseStatus.jsx +++ b/src/components/CourseStatus.jsx @@ -1,8 +1,8 @@ -import React, { Component } from 'react'; +import { Component } from 'react'; import PropTypes from 'prop-types'; import { withTranslation } from 'react-i18next'; -import { appBoundClassNames as classNames } from '../common/boundClassNames'; +import styles from './CourseStatus.module.scss'; class CourseStatus extends Component { render() { @@ -10,18 +10,17 @@ class CourseStatus extends Component { return (
- {entries.map((e) => ( -
-
{e.name}
+ {entries.map(({ name, info }) => ( +
+
{name}
- {e.info.map((k) => ( + {info.map((k) => (
-
{k.name}
-
+ {k.name} {k.controller}
))} diff --git a/src/components/CourseStatus.module.scss b/src/components/CourseStatus.module.scss new file mode 100644 index 0000000..112b3fa --- /dev/null +++ b/src/components/CourseStatus.module.scss @@ -0,0 +1,28 @@ +@use '@/sass/abstracts/variables' as *; + +.courseTypes:not(:last-child) { + margin-bottom: $attribute-margin-bottom + 2px; +} + +.title { + margin-bottom: $attribute-margin-bottom; + + font-weight: bold; +} + +.info { + display: flex; + flex-direction: row; + justify-content: space-between; + + margin-left: 8px; + width: calc(100% - 8px); + + &:not(:last-child) { + margin-bottom: $attribute-margin-bottom; + } +} + +.infoName { + align-self: center; +} diff --git a/src/sass/App.module.scss b/src/sass/App.module.scss index 600645b..54b5a06 100644 --- a/src/sass/App.module.scss +++ b/src/sass/App.module.scss @@ -2438,39 +2438,6 @@ a { } } -.course-status { - &:not(:last-child) { - margin-bottom: $attribute-margin-bottom + 2px; - } - - &--name { - font-weight: bold; - margin-bottom: $attribute-margin-bottom; - } - - &--info { - align-self: center; - width: calc(100% - 8px); - display: flex; - flex-direction: row; - justify-content: space-between; - margin-left: 8px; - &:not(:last-child) { - margin-bottom: $attribute-margin-bottom; - } - - &--name { - align-self: center; - } - - &--controller { - display: flex; - flex-direction: row; - justify-content: space-between; - } - } -} - .attribute { display: flex; flex-direction: row; @@ -3309,22 +3276,6 @@ i.icon { background-image: url(../static/icons/star_selected.svg); } } - - &--planner-plus { - width: 12px; - height: 12px; - background-image: url(../static/icons/plus_circled.svg); - margin: calc(calc(font.$line-height-normal - 12px) / 2) 0; - margin-left: 8px; - } - - &--planner-minus { - width: 12px; - height: 12px; - background-image: url(../static/icons/minus_circled.svg); - margin: calc(calc(font.$line-height-normal - 12px) / 2) 0; - margin-right: 8px; - } } .top-sticky { From 9006b2466d0bd7b5c0d1b2c2fd3cbcd681a22338 Mon Sep 17 00:00:00 2001 From: yuwol Date: Sun, 12 May 2024 16:36:19 +0900 Subject: [PATCH 12/16] refactor: split AcademicScheduleSection styles --- .../sections/main/AcademicScheduleSection.jsx | 20 +++++++++------- .../main/AcademicScheduleSection.module.scss | 14 +++++++++++ src/sass/App.module.scss | 24 ------------------- 3 files changed, 25 insertions(+), 33 deletions(-) create mode 100644 src/components/sections/main/AcademicScheduleSection.module.scss diff --git a/src/components/sections/main/AcademicScheduleSection.jsx b/src/components/sections/main/AcademicScheduleSection.jsx index 3fd125f..e69288e 100644 --- a/src/components/sections/main/AcademicScheduleSection.jsx +++ b/src/components/sections/main/AcademicScheduleSection.jsx @@ -10,6 +10,8 @@ import semesterShape from '../../../shapes/model/subject/SemesterShape'; import { getCurrentSchedule, getSemesterName } from '../../../utils/semesterUtils'; import { PORTAL } from '@/common/constants'; +import styles from './AcademicScheduleSection.module.scss'; + class AcademicScheduleSection extends Component { constructor(props) { super(props); @@ -34,10 +36,10 @@ class AcademicScheduleSection extends Component { const getAcademicScheduleContent = () => { if (semesters == null) { return ( -
-
{t('ui.placeholder.loading')}
+
+
{t('ui.placeholder.loading')}
- - + - -
@@ -46,10 +48,10 @@ class AcademicScheduleSection extends Component { const targetSchedule = getCurrentSchedule(semesters); if (!targetSchedule) { return ( -
-
{t('ui.placeholder.unknown')}
+
+
{t('ui.placeholder.unknown')}
- - + - -
@@ -62,8 +64,8 @@ class AcademicScheduleSection extends Component { const hours = Math.floor((timeDiff / (1000 * 60 * 60)) % 24); const days = Math.floor(timeDiff / (1000 * 60 * 60 * 24)); return ( -
-
+
+
{`D-${t('ui.others.dayCount', { count: days })} ${t('ui.others.hourCount', { count: hours, })} ${t('ui.others.minuteCount', { count: minutes })} ${t('ui.others.secondCount', { @@ -71,7 +73,7 @@ class AcademicScheduleSection extends Component { })}`}
- + {`${targetSchedule.year} ${getSemesterName(targetSchedule.semester)} ${t( `ui.schedule.${targetSchedule.type}`, )}`} diff --git a/src/components/sections/main/AcademicScheduleSection.module.scss b/src/components/sections/main/AcademicScheduleSection.module.scss new file mode 100644 index 0000000..6b0c52a --- /dev/null +++ b/src/components/sections/main/AcademicScheduleSection.module.scss @@ -0,0 +1,14 @@ +.schedule { + text-align: center; +} + +.dDay { + margin-bottom: 6px; + + font-size: 20px; + line-height: 20px; +} + +.title { + margin-right: 8px; +} diff --git a/src/sass/App.module.scss b/src/sass/App.module.scss index 54b5a06..44f6412 100644 --- a/src/sass/App.module.scss +++ b/src/sass/App.module.scss @@ -2414,30 +2414,6 @@ a { } } -.visitor, -.academic-schedule { - & > div:nth-child(1) { - font-size: 20px; - line-height: 20px; - margin-bottom: 6px; - text-align: center; - } - - & > div:nth-child(2) { - margin-bottom: 10px; - text-align: center; - - strong { - margin-right: 8px; - } - - span, - strong { - display: inline-block; - } - } -} - .attribute { display: flex; flex-direction: row; From 33165d469ffe913ff8a48d902c276aea17061170 Mon Sep 17 00:00:00 2001 From: yuwol Date: Sun, 12 May 2024 17:18:08 +0900 Subject: [PATCH 13/16] refactor: split MainPage styles --- src/pages/MainPage.jsx | 33 +++++----- src/pages/MainPage.module.scss | 108 +++++++++++++++++++++++++++++++++ src/sass/App.module.scss | 90 --------------------------- 3 files changed, 124 insertions(+), 107 deletions(-) create mode 100644 src/pages/MainPage.module.scss diff --git a/src/pages/MainPage.jsx b/src/pages/MainPage.jsx index ee087d7..83f0fab 100644 --- a/src/pages/MainPage.jsx +++ b/src/pages/MainPage.jsx @@ -1,7 +1,7 @@ import React, { Component } from 'react'; import { connect } from 'react-redux'; import { withTranslation } from 'react-i18next'; -import PropTypes, { bool } from 'prop-types'; +import PropTypes from 'prop-types'; import axios from 'axios'; import { range } from 'lodash'; @@ -23,6 +23,8 @@ import userShape from '../shapes/model/session/UserShape'; import NoticeSection from '../components/sections/main/NoticeSection'; import RateFeedSection from '../components/sections/main/RateFeedSection'; +import styles from './MainPage.module.scss'; + class MainPage extends Component { constructor(props) { super(props); @@ -244,39 +246,36 @@ class MainPage extends Component { return ( <> -
+
-
+
{range(columnNum).map((i) => ( -
+
{feeds.filter((v, i2) => i2 % columnNum === i)} -
+
{range(10).map((j) => ( -
+
))}
))} -
+
{user ? ( - this._fetchFeeds(this._getPrevDate())}> + this._fetchFeeds(this._getPrevDate())}> {t('ui.button.loadMore')} ) : ( <> - + {t('ui.button.signInWithSso')} -
{t('ui.message.signInForMore')}
+

{t('ui.message.signInForMore')}

)}
diff --git a/src/pages/MainPage.module.scss b/src/pages/MainPage.module.scss new file mode 100644 index 0000000..4ce19e5 --- /dev/null +++ b/src/pages/MainPage.module.scss @@ -0,0 +1,108 @@ +@use '@/sass/abstracts/color' as color; +@use '@/sass/abstracts/mixins' as *; +@use '@/sass/abstracts/variables' as *; + +.mainImage { + background: center 0/100% url(@/static/images/main/background_photo.jpg); + + @include mixin-media-landscape { + min-width: calc( + #{$content-width-desktop} + (#{$section-margin-lr} * 2) + (env(safe-area-inset-left) + + env(safe-area-inset-right)) + ); + height: $main-image-height-desktop; + padding-top: calc(calc($main-image-height-desktop / 2) - 9px); + } + @include mixin-media-portrait { + min-width: 100%; + height: $main-image-height-mobile; + padding-top: calc(calc($main-image-height-mobile / 2) - 9px); + } +} + +.grid { + display: grid; + + overflow: hidden; + + padding: $section-margin-top $section-margin-lr 0; + + @include mixin-media-landscape { + grid-template-columns: 1fr $section-margin-lr 1fr $section-margin-lr 1fr; + grid-template-rows: max-content min-content; + grid-template-areas: + 'feeds-column-1 . feeds-column-2 . feeds-column-3' + 'more-tile more-tile more-tile more-tile more-tile'; + + min-height: calc( + #{$screen-height} - (#{$main-image-height-desktop} + #{$footer-height-desktop} + #{$section-margin-top}) + ); + } + @include mixin-media-portrait { + grid-template-columns: 1fr; + grid-template-rows: max-content min-content; + grid-template-areas: + 'feeds-column-1' + 'more-tile'; + + min-height: calc( + #{$screen-height} - (#{$main-image-height-mobile} + #{$footer-height-mobile} + #{$section-margin-top}) + ); + } +} + +.column { + position: relative; + + overflow: initial; + + min-width: 0; +} + +.placeholderTileContainer { + position: absolute; + + width: 100%; + + * { + opacity: 0.5; + + height: 270px; + } +} + +.moreTiles { + z-index: 50; + + grid-area: more-tile; + + height: 300px; + padding: calc(300px / 2 - 24px) 0; + + background-image: linear-gradient( + rgba(color.$page-background, 0) 80%, + rgba(color.$page-background, 1) + ); + + color: rgba(color.$highlight, 0.5); + text-align: center; +} + +.loadMoreTilesButton, +.loginButton { + cursor: pointer; + + font-size: 18px; + line-height: 19px; + + &:hover { + color: rgba(color.$highlight-dark, 0.5); + } +} + +.loginDescription { + margin-top: 10px; + + font-size: 13px; + line-height: 14px; +} diff --git a/src/sass/App.module.scss b/src/sass/App.module.scss index 44f6412..e8e0b2e 100644 --- a/src/sass/App.module.scss +++ b/src/sass/App.module.scss @@ -318,63 +318,6 @@ a { grid-template-areas: 'write-reviews-left'; } } - - &--main { - overflow: hidden; - padding-top: $section-margin-top; - @include mixin-media-landscape { - min-height: calc( - #{$screen-height} - (#{$main-image-height-desktop} + #{$footer-height-desktop} + #{$section-margin-top}) - ); - } - @include mixin-media-portrait { - min-height: calc( - #{$screen-height} - (#{$main-image-height-mobile} + #{$footer-height-mobile} + #{$section-margin-top}) - ); - } - - @include mixin-media-landscape { - grid-template-columns: - 1fr - $section-margin-lr - 1fr - $section-margin-lr - 1fr; - grid-template-rows: - max-content - min-content; - grid-template-areas: - 'feeds-column-1 . feeds-column-2 . feeds-column-3' - 'main-date main-date main-date main-date main-date'; - } - @include mixin-media-portrait { - grid-template-columns: 1fr; - grid-template-rows: - max-content - min-content; - grid-template-areas: - 'feeds-column-1' - 'main-date'; - } - } -} - -.main-image { - background: url(../static/images/main/background_photo.jpg) center 0; - background-size: 100% auto; - @include mixin-media-landscape { - height: $main-image-height-desktop; - padding-top: calc(calc($main-image-height-desktop / 2) - 9px); - min-width: calc( - #{$content-width-desktop} + (#{$section-margin-lr} * 2) + (env(safe-area-inset-left) + - env(safe-area-inset-right)) - ); - } - @include mixin-media-portrait { - height: $main-image-height-mobile; - padding-top: calc(calc($main-image-height-mobile / 2) - 9px); - min-width: 100%; - } } .tabs { @@ -663,11 +606,6 @@ a { &--feed { margin-bottom: $section-margin-bottom; - - &--placeholder { - opacity: 0.5; - height: 270px; - } } &--course-list { @@ -2386,34 +2324,6 @@ a { color: color.$text-placeholder; } -.main-date { - grid-area: main-date; - height: 300px; - padding: calc(300px / 2 - 24px) 0; - background-image: linear-gradient( - rgba(color.$page-background, 0) 80%, - rgba(color.$page-background, 1) - ); - color: rgba(color.$highlight, 0.5); - text-align: center; - z-index: 50; - - & > span:first-child, - & > a:first-child { - font-size: 18px; - line-height: 19px; - cursor: pointer; - &:hover { - color: rgba(color.$highlight-dark, 0.5); - } - } - & > div:nth-child(2) { - margin-top: 10px; - font-size: 13px; - line-height: 14px; - } -} - .attribute { display: flex; flex-direction: row; From 5afcc206bd474eebf138b968c3970a7edda74310 Mon Sep 17 00:00:00 2001 From: yuwol Date: Sun, 12 May 2024 21:49:13 +0900 Subject: [PATCH 14/16] refactor: split PlannerPage styles --- src/pages/PlannerPage.jsx | 90 +++++++++++++++---------------- src/pages/PlannerPage.module.scss | 61 +++++++++++++++++++++ src/sass/App.module.scss | 51 ------------------ 3 files changed, 106 insertions(+), 96 deletions(-) create mode 100644 src/pages/PlannerPage.module.scss diff --git a/src/pages/PlannerPage.jsx b/src/pages/PlannerPage.jsx index 8cda98a..fa8010e 100644 --- a/src/pages/PlannerPage.jsx +++ b/src/pages/PlannerPage.jsx @@ -1,4 +1,4 @@ -import React, { Component } from 'react'; +import { Component } from 'react'; import { useLocation } from 'react-router'; import { connect } from 'react-redux'; import PropTypes from 'prop-types'; @@ -24,6 +24,8 @@ import SummarySubSection from '../components/sections/planner/plannerandinfos/Su import TrackSettingsSection from '../components/sections/planner/TrackSettingsSection'; import BetaPopup from '../components/BetaPopup'; +import styles from './PlannerPage.module.scss'; + class PlannerPage extends Component { componentWillUnmount() { const { @@ -43,36 +45,35 @@ class PlannerPage extends Component { const { isTrackSettingsSectionOpen, selectedPlanner } = this.props; return ( - <> -
-
- - -
- - - - - - {/* TODO: Implement ShareSubSection */} - {/* +
+ + +
+ + + + + + {/* TODO: Implement ShareSubSection */} + {/* */} -
- - - {isTrackSettingsSectionOpen && selectedPlanner && }
- -
- + + + {isTrackSettingsSectionOpen && selectedPlanner && } +
+ +
); } } diff --git a/src/pages/PlannerPage.module.scss b/src/pages/PlannerPage.module.scss new file mode 100644 index 0000000..8182d45 --- /dev/null +++ b/src/pages/PlannerPage.module.scss @@ -0,0 +1,61 @@ +@use '@/sass/abstracts/mixins' as *; +@use '@/sass/abstracts/variables' as *; + +.grid { + display: grid; + + height: 100%; + padding: 0 $section-margin-lr $section-margin-bottom; + + @include mixin-media-landscape { + grid-template-columns: + $tabs-width-vertical + $section-width-desktop-1v3-left + $section-margin-lr + 1fr; + grid-template-rows: + $tabs-height-horizontal + 2fr + $section-margin-bottom + 0.9fr + 80px; + grid-template-areas: + '. planner-tabs planner-tabs planner-tabs' + '. planner-and-infos planner-and-infos planner-and-infos' + '. . . .' + 'course-list-tabs course-list . course-manage' + 'course-list-tabs course-list . course-manage'; + + margin-left: -$tabs-width-vertical; + } + @include mixin-media-portrait { + grid-template-columns: 1fr; + grid-template-rows: 1fr; + grid-template-areas: 'planner-and-infos'; + } +} + +.planner { + display: grid; + grid-area: planner-and-infos; + + @include mixin-media-landscape { + grid-template-columns: 1fr min-content calc( + #{$section-width-desktop-1v3-left} - (#{$section-padding} * 2) + ); + grid-template-rows: min-content min-content 1fr min-content min-content; + grid-template-areas: + 'planner divider-main track' + 'planner divider-main divider-sub-1' + 'planner divider-main planner-summary' + 'planner divider-main divider-sub-2' + 'planner divider-main planner-share'; + + border-top-left-radius: 0; + } + @include mixin-media-portrait { + grid-template-columns: 1fr; + grid-template-rows: 1fr; + grid-template-areas: 'planner'; + } +} diff --git a/src/sass/App.module.scss b/src/sass/App.module.scss index e8e0b2e..754a1d8 100644 --- a/src/sass/App.module.scss +++ b/src/sass/App.module.scss @@ -253,34 +253,6 @@ a { } } - &--planner { - @include mixin-media-landscape { - margin-left: -$tabs-width-vertical; - grid-template-columns: - $tabs-width-vertical - $section-width-desktop-1v3-left - $section-margin-lr - 1fr; - grid-template-rows: - $tabs-height-horizontal - 2fr - $section-margin-bottom - 0.9fr - 80px; - grid-template-areas: - '. planner-tabs planner-tabs planner-tabs' - '. planner-and-infos planner-and-infos planner-and-infos' - '. . . .' - 'course-list-tabs course-list . course-manage' - 'course-list-tabs course-list . course-manage'; - } - @include mixin-media-portrait { - grid-template-columns: 1fr; - grid-template-rows: 1fr; - grid-template-areas: 'planner-and-infos'; - } - } - &--syllabus { @include mixin-media-landscape { width: calc(900px + #{$section-padding} * 2); @@ -701,29 +673,6 @@ a { } } - &--planner-and-infos { - grid-area: planner-and-infos; - display: grid; - @include mixin-media-landscape { - border-top-left-radius: 0; - grid-template-columns: 1fr min-content calc( - #{$section-width-desktop-1v3-left} - (#{$section-padding} * 2) - ); - grid-template-rows: min-content min-content 1fr min-content min-content; - grid-template-areas: - 'planner divider-main track' - 'planner divider-main divider-sub-1' - 'planner divider-main planner-summary' - 'planner divider-main divider-sub-2' - 'planner divider-main planner-share'; - } - @include mixin-media-portrait { - grid-template-columns: 1fr; - grid-template-rows: 1fr; - grid-template-areas: 'planner'; - } - } - &--course-manage { @include mixin-media-landscape { grid-area: course-manage; From 441185406e70a2fa46db545e3527a2175f8744f6 Mon Sep 17 00:00:00 2001 From: yuwol Date: Sun, 12 May 2024 23:43:55 +0900 Subject: [PATCH 15/16] refactor: split CourseManageSection styles --- .../planner/coursemanage/CourseManageSection.jsx | 14 +++++++------- .../coursemanage/CourseManageSection.module.scss | 14 ++++++++++++++ src/sass/App.module.scss | 13 ------------- 3 files changed, 21 insertions(+), 20 deletions(-) create mode 100644 src/components/sections/planner/coursemanage/CourseManageSection.module.scss diff --git a/src/components/sections/planner/coursemanage/CourseManageSection.jsx b/src/components/sections/planner/coursemanage/CourseManageSection.jsx index 5f862ea..0ed1e56 100644 --- a/src/components/sections/planner/coursemanage/CourseManageSection.jsx +++ b/src/components/sections/planner/coursemanage/CourseManageSection.jsx @@ -22,6 +22,8 @@ import itemFocusShape from '../../../../shapes/state/planner/ItemFocusShape'; import { ItemFocusFrom } from '../../../../reducers/planner/itemFocus'; import plannerShape from '../../../../shapes/model/planner/PlannerShape'; +import styles from './CourseManageSection.module.scss'; + class CourseManageSection extends Component { constructor(props) { super(props); @@ -126,7 +128,7 @@ class CourseManageSection extends Component { const sectionContent = itemFocus.course ? ( <> -
+
@@ -134,11 +136,9 @@ class CourseManageSection extends Component {
{itemFocus.course.old_code}
); return ( -
+
{sectionContent}
); diff --git a/src/components/sections/planner/coursemanage/CourseManageSection.module.scss b/src/components/sections/planner/coursemanage/CourseManageSection.module.scss new file mode 100644 index 0000000..76c9527 --- /dev/null +++ b/src/components/sections/planner/coursemanage/CourseManageSection.module.scss @@ -0,0 +1,14 @@ +@use '@/sass/abstracts/mixins' as *; + +.courseManage { + @include mixin-media-landscape { + display: flex; + flex-direction: row; + + grid-area: course-manage; + } +} + +.courseManageLeft { + flex: 1 0 1px; +} diff --git a/src/sass/App.module.scss b/src/sass/App.module.scss index 754a1d8..5f3e80a 100644 --- a/src/sass/App.module.scss +++ b/src/sass/App.module.scss @@ -673,14 +673,6 @@ a { } } - &--course-manage { - @include mixin-media-landscape { - grid-area: course-manage; - display: flex; - flex-direction: row; - } - } - &--track-settings { display: flex; flex-direction: column; @@ -1106,11 +1098,6 @@ a { color: red; } - &--course-manage-left { - flex-basis: 1px; - flex-grow: 1; - } - &--course-manage-right { flex-basis: calc(#{$section-width-desktop-1v3-left} - (#{$section-padding} * 2)); display: flex; From 8960abaaa1113ab1bc103f91a4522b52416c9805 Mon Sep 17 00:00:00 2001 From: yuwol Date: Mon, 13 May 2024 00:12:16 +0900 Subject: [PATCH 16/16] refactor: split global styles --- src/sass/App.module.scss | 113 ++---------------------------------- src/sass/_global.scss | 122 +++++++++++++++++++++++++++++++++++++++ 2 files changed, 126 insertions(+), 109 deletions(-) create mode 100644 src/sass/_global.scss diff --git a/src/sass/App.module.scss b/src/sass/App.module.scss index 5f3e80a..eb4721d 100644 --- a/src/sass/App.module.scss +++ b/src/sass/App.module.scss @@ -1,116 +1,11 @@ -@use '@/sass/abstracts/color' as color; -@use '@/sass/abstracts/font' as font; +@use 'global'; + +@use 'abstracts/color' as color; +@use 'abstracts/font' as font; @import './abstracts/_variables.scss'; @import './abstracts/_mixins.scss'; -body * { - font-family: sans-serif; - box-sizing: border-box; - margin: 0; - padding: 0; - flex: none; - appearance: none; -} - -body { - font-size: font.$size-normal; - line-height: font.$line-height-normal; - background-color: color.$page-background; - color: color.$text-normal; - margin: 0; - padding: 0; - width: 100%; -} - -input { - background: transparent; - border: none; - outline: none; - font-size: inherit; - font-weight: inherit; - line-height: inherit; - - &[type='checkbox'] { - width: 0; - height: 0; - } -} - -textarea { - background-color: transparent; - border: none; - resize: none; - outline: none; - font-size: inherit; -} - -button { - cursor: pointer; - background-color: transparent; - border: none; - outline: none; - color: inherit; - font-size: inherit; - font-weight: inherit; - line-height: inherit; - text-align: initial; -} - -label { - cursor: pointer; - font-weight: initial; -} - -ul { - list-style: none; -} - -a, -a:hover, -a:link { - color: inherit; - text-decoration: none; -} - -table { - border-spacing: 0; - table-layout: auto; -} - -th { - font-weight: initial; -} - -iframe { - border: none; -} - -:global(#root) > * { - padding-left: env(safe-area-inset-left); - padding-right: env(safe-area-inset-right); - &:last-child { - padding-bottom: env(safe-area-inset-bottom); - } -} - -button, -label, -a { - position: relative; - - &::before { - content: ''; - position: absolute; - display: block; - //background-color: rgba(#f00, 0.7); // Hitbox checker - top: -2px; - bottom: -2px; - left: -2px; - right: -2px; - } -} - :global(.ScrollbarsCustom-Wrapper) { position: relative !important; } diff --git a/src/sass/_global.scss b/src/sass/_global.scss new file mode 100644 index 0000000..ec77f77 --- /dev/null +++ b/src/sass/_global.scss @@ -0,0 +1,122 @@ +@use 'abstracts/color' as color; +@use 'abstracts/font' as font; + +body * { + appearance: none; + + margin: 0; + box-sizing: border-box; + padding: 0; + + font-family: sans-serif; +} + +body { + margin: 0; + width: 100%; + padding: 0; + + background-color: color.$page-background; + + font-size: font.$size-normal; + line-height: font.$line-height-normal; + color: color.$text-normal; +} + +:global(#root) > * { + padding-left: env(safe-area-inset-left); + padding-right: env(safe-area-inset-right); + + &:last-child { + padding-bottom: env(safe-area-inset-bottom); + } +} + +input { + border: none; + outline: none; + + background: transparent; + + font-size: inherit; + line-height: inherit; + font-weight: inherit; + + &[type='checkbox'] { + width: 0; + height: 0; + } +} + +textarea { + resize: none; + + border: none; + outline: none; + + background-color: transparent; + + font-size: inherit; +} + +button { + border: none; + outline: none; + + background-color: transparent; + cursor: pointer; + + font-size: inherit; + line-height: inherit; + font-weight: inherit; + text-align: initial; + color: inherit; +} + +label { + cursor: pointer; + + font-weight: initial; +} + +ul { + list-style: none; +} + +a, +a:hover, +a:link { + text-decoration: none; + color: inherit; +} + +table { + border-spacing: 0; + table-layout: auto; +} + +th { + font-weight: initial; +} + +iframe { + border: none; +} + +button, +label, +a { + position: relative; + + &::before { + content: ''; + + position: absolute; + top: -2px; + bottom: -2px; + left: -2px; + right: -2px; + + display: block; + } +}