diff options
Diffstat (limited to 'Timeline/ClientApp')
19 files changed, 277 insertions, 336 deletions
diff --git a/Timeline/ClientApp/src/about/about.sass b/Timeline/ClientApp/src/about/about.sass new file mode 100644 index 00000000..24af9dee --- /dev/null +++ b/Timeline/ClientApp/src/about/about.sass @@ -0,0 +1,3 @@ +.about-link-icon
+ @extend .mx-2
+ font-size: 1.2em
diff --git a/Timeline/ClientApp/src/about/about.scss b/Timeline/ClientApp/src/about/about.scss deleted file mode 100644 index b097aa89..00000000 --- a/Timeline/ClientApp/src/about/about.scss +++ /dev/null @@ -1,4 +0,0 @@ -.about-link-icon {
- @extend .mx-2;
- font-size: 1.2em;
-}
diff --git a/Timeline/ClientApp/src/common/alert.sass b/Timeline/ClientApp/src/common/alert.sass new file mode 100644 index 00000000..c3560b87 --- /dev/null +++ b/Timeline/ClientApp/src/common/alert.sass @@ -0,0 +1,15 @@ +.alert-container
+ position: fixed
+ z-index: $zindex-popover
+
+@include media-breakpoint-up(sm)
+ .alert-container
+ bottom: 0
+ right: 0
+
+@include media-breakpoint-down(sm)
+ .alert-container
+ bottom: 0
+ right: 0
+ left: 0
+ text-align: center
diff --git a/Timeline/ClientApp/src/common/alert.scss b/Timeline/ClientApp/src/common/alert.scss deleted file mode 100644 index 09877727..00000000 --- a/Timeline/ClientApp/src/common/alert.scss +++ /dev/null @@ -1,20 +0,0 @@ -.alert-container {
- position: fixed;
- z-index: $zindex-popover;
-}
-
-@include media-breakpoint-up(sm) {
- .alert-container {
- bottom: 0;
- right: 0;
- }
-}
-
-@include media-breakpoint-down(sm) {
- .alert-container {
- bottom: 0;
- right: 0;
- left: 0;
- text-align: center;
- }
-}
diff --git a/Timeline/ClientApp/src/common/common.sass b/Timeline/ClientApp/src/common/common.sass new file mode 100644 index 00000000..78e6fd14 --- /dev/null +++ b/Timeline/ClientApp/src/common/common.sass @@ -0,0 +1,33 @@ +.image-cropper-container
+ position: relative
+ box-sizing: border-box
+ user-select: none
+
+.image-cropper-container img
+ position: absolute
+ left: 0
+ top: 0
+ width: 100%
+ height: 100%
+
+.image-cropper-mask-container
+ position: absolute
+ left: 0
+ top: 0
+ right: 0
+ bottom: 0
+ overflow: hidden
+
+.image-cropper-mask
+ position: absolute
+ box-shadow: 0 0 0 10000px rgba(255, 255, 255, 80%)
+ touch-action: none
+
+.image-cropper-handler
+ position: absolute
+ width: 26px
+ height: 26px
+ border: black solid 2px
+ border-radius: 50%
+ background: white
+ touch-action: none
diff --git a/Timeline/ClientApp/src/common/common.scss b/Timeline/ClientApp/src/common/common.scss deleted file mode 100644 index 5998c086..00000000 --- a/Timeline/ClientApp/src/common/common.scss +++ /dev/null @@ -1,38 +0,0 @@ -.image-cropper-container {
- position: relative;
- box-sizing: border-box;
- user-select: none;
-}
-
-.image-cropper-container img {
- position: absolute;
- left: 0;
- top: 0;
- width: 100%;
- height: 100%;
-}
-
-.image-cropper-mask-container {
- position: absolute;
- left: 0;
- top: 0;
- right: 0;
- bottom: 0;
- overflow: hidden;
-}
-
-.image-cropper-mask {
- position: absolute;
- box-shadow: 0 0 0 10000px rgba(255, 255, 255, 80%);
- touch-action: none;
-}
-
-.image-cropper-handler {
- position: absolute;
- width: 26px;
- height: 26px;
- border: black solid 2px;
- border-radius: 50%;
- background: white;
- touch-action: none;
-}
diff --git a/Timeline/ClientApp/src/home/home.sass b/Timeline/ClientApp/src/home/home.sass new file mode 100644 index 00000000..9f9937ac --- /dev/null +++ b/Timeline/ClientApp/src/home/home.sass @@ -0,0 +1,17 @@ +.timeline-item-icon
+ width: 1em
+ height: 1em
+
+.timeline-item
+ font-size: 1.1em
+ @extend .my-2
+ .icon
+ height: 1.3em
+ @extend .mr-2
+
+.timeline-board
+ @extend .cru-card
+ @extend .d-flex
+ @extend .flex-column
+ @extend .p-3
+ min-height: 200px
diff --git a/Timeline/ClientApp/src/home/home.scss b/Timeline/ClientApp/src/home/home.scss deleted file mode 100644 index 8e40e597..00000000 --- a/Timeline/ClientApp/src/home/home.scss +++ /dev/null @@ -1,21 +0,0 @@ -.timeline-item-icon {
- width: 1em;
- height: 1em;
-}
-
-.timeline-item {
- font-size: 1.1em;
- @extend .my-2;
- .icon {
- height: 1.3em;
- @extend .mr-2;
- }
-}
-
-.timeline-board {
- @extend .cru-card;
- @extend .d-flex;
- @extend .flex-column;
- @extend .p-3;
- min-height: 200px;
-}
diff --git a/Timeline/ClientApp/src/index.sass b/Timeline/ClientApp/src/index.sass new file mode 100644 index 00000000..b5fcc112 --- /dev/null +++ b/Timeline/ClientApp/src/index.sass @@ -0,0 +1,72 @@ +@import '~bootstrap/scss/bootstrap' +$fa-font-path: '~@fortawesome/fontawesome-free/webfonts' +@import '~@fortawesome/fontawesome-free/scss/fontawesome' +@import '~@fortawesome/fontawesome-free/scss/solid' +@import '~@fortawesome/fontawesome-free/scss/brands' + +@import './common/common' +@import './common/alert' +@import './home/home' +@import './about/about' +@import './timeline/timeline' +@import './timeline/timeline-ui' +@import './user/user-page' + +body + margin: 0 + +#app + display: flex + flex-direction: column + +small + line-height: 1.2 + +.width-1px + width: 1px + +.flex-fix-length + flex-grow: 0 + flex-shrink: 0 + +.position-lt + left: 0 + top: 0 + +.position-rb + right: 0 + bottom: 0 + +.app-bar + z-index: 1035 + +.avatar + width: 60px + +.avatar.large + width: 100px + +.avatar.small + width: 40px + +.mt-appbar + margin-top: 56px + +.icon-button + font-size: 20px + +.large-icon + font-size: 26px + +textarea + resize: none + +.white-space-no-wrap + white-space: nowrap + +.cru-card + @extend .shadow + @extend .border + @extend .border-primary + @extend .rounded + @extend .bg-light diff --git a/Timeline/ClientApp/src/index.scss b/Timeline/ClientApp/src/index.scss deleted file mode 100644 index 9f3d3444..00000000 --- a/Timeline/ClientApp/src/index.scss +++ /dev/null @@ -1,89 +0,0 @@ -@import '~bootstrap/scss/bootstrap'; -$fa-font-path: '~@fortawesome/fontawesome-free/webfonts'; -@import '~@fortawesome/fontawesome-free/scss/fontawesome'; -@import '~@fortawesome/fontawesome-free/scss/solid'; -@import '~@fortawesome/fontawesome-free/scss/brands'; - -@import './common/common.scss'; -@import './common/alert.scss'; -@import './home/home.scss'; -@import './about/about.scss'; -@import './timeline/timeline.scss'; -@import './timeline/timeline-ui.scss'; -@import './user/user-page.scss'; - -body { - margin: 0; -} - -#app { - display: flex; - flex-direction: column; -} - -small { - line-height: 1.2; -} - -.width-1px { - width: 1px; -} - -.flex-fix-length { - flex-grow: 0; - flex-shrink: 0; -} - -.position-lt { - left: 0; - top: 0; -} - -.position-rb { - right: 0; - bottom: 0; -} - -.app-bar { - z-index: 1035; -} - -.avatar { - width: 60px; -} - -.avatar.large { - width: 100px; -} - -.avatar.small { - width: 40px; -} - -.mt-appbar { - margin-top: 56px; -} - -.icon-button { - font-size: 20px; -} - -.large-icon { - font-size: 26px; -} - -textarea { - resize: none; -} - -.white-space-no-wrap { - white-space: nowrap; -} - -.cru-card { - @extend .shadow; - @extend .border; - @extend .border-primary; - @extend .rounded; - @extend .bg-light; -} diff --git a/Timeline/ClientApp/src/index.tsx b/Timeline/ClientApp/src/index.tsx index 0c66dda0..086bd6e8 100644 --- a/Timeline/ClientApp/src/index.tsx +++ b/Timeline/ClientApp/src/index.tsx @@ -6,7 +6,7 @@ import 'pepjs'; import React from 'react'; import ReactDOM from 'react-dom'; -import './index.scss'; +import './index.sass'; import './i18n'; diff --git a/Timeline/ClientApp/src/timeline/TimelineItem.tsx b/Timeline/ClientApp/src/timeline/TimelineItem.tsx index 402d51d9..0d2722c0 100644 --- a/Timeline/ClientApp/src/timeline/TimelineItem.tsx +++ b/Timeline/ClientApp/src/timeline/TimelineItem.tsx @@ -48,12 +48,12 @@ const TimelineItem: React.FC<TimelineItemProps> = (props) => { onClick={props.onClick}
>
<Col className="timeline-line-area">
- <div className="timeline-line start"></div>
+ <div className="timeline-line-segment start"></div>
<div className="timeline-line-node-container">
<div className="timeline-line-node"></div>
</div>
- <div className="timeline-line end"></div>
- {current && <div className="timeline-line current-end" />}
+ <div className="timeline-line-segment end"></div>
+ {current && <div className="timeline-line-segment current-end" />}
</Col>
<Col className="timeline-pt-start">
<Row className="flex-nowrap">
diff --git a/Timeline/ClientApp/src/timeline/timeline-ui.sass b/Timeline/ClientApp/src/timeline/timeline-ui.sass new file mode 100644 index 00000000..8f0da6a4 --- /dev/null +++ b/Timeline/ClientApp/src/timeline/timeline-ui.sass @@ -0,0 +1,18 @@ +.info-card-container
+ .info-card-collapse-button
+ z-index: 1
+ position: relative
+
+ .info-card-content
+ width: 100%
+ position: absolute
+ transform-origin: right top
+ transition: transform 0.5s
+
+ & [data-collapse='true']
+ .info-card-content
+ transform: scale(0)
+
+.timeline-page-container
+ transition: margin-top 0.5s
+
diff --git a/Timeline/ClientApp/src/timeline/timeline-ui.scss b/Timeline/ClientApp/src/timeline/timeline-ui.scss deleted file mode 100644 index ef35ff55..00000000 --- a/Timeline/ClientApp/src/timeline/timeline-ui.scss +++ /dev/null @@ -1,27 +0,0 @@ -/*
-.info-card-container {
-}
-
-.info-card-container[data-collapse='true'] {
-}
-*/
-
-.info-card-container .info-card-collapse-button {
- z-index: 1;
- position: relative;
-}
-
-.info-card-container .info-card-content {
- width: 100%;
- position: absolute;
- transform-origin: right top;
- transition: transform 0.5s;
-}
-
-.info-card-container[data-collapse='true'] .info-card-content {
- transform: scale(0);
-}
-
-.timeline-page-container {
- transition: margin-top 0.5s;
-}
diff --git a/Timeline/ClientApp/src/timeline/timeline.sass b/Timeline/ClientApp/src/timeline/timeline.sass new file mode 100644 index 00000000..511cc838 --- /dev/null +++ b/Timeline/ClientApp/src/timeline/timeline.sass @@ -0,0 +1,103 @@ +@use 'sass:color'
+
+$timeline-line-width: 7px
+$timeline-line-node-radius: 18px
+$timeline-line-color: $primary
+$timeline-line-color-current: #36c2e6
+
+@keyframes timeline-line-node-noncurrent
+ from
+ background: $timeline-line-color
+
+ to
+ background: color.adjust($timeline-line-color, $lightness: +10%)
+ box-shadow: 0 0 20px 3px color.adjust($timeline-line-color, $lightness: +10%, $alpha: -0.1)
+
+
+@keyframes timeline-line-node-current
+ from
+ background: $timeline-line-color-current
+
+ to
+ background: color.adjust($timeline-line-color-current, $lightness: +10%)
+ box-shadow: 0 0 20px 3px color.adjust($timeline-line-color-current, $lightness: +10%, $alpha: -0.1)
+
+.timeline-line
+ &-area
+ display: flex
+ flex-direction: column
+ align-items: center
+ flex: 0 0 auto
+ width: 60px
+
+ &-segment
+ width: $timeline-line-width
+ background: $timeline-line-color
+
+ &.start
+ height: 20px
+ flex: 0 0 auto
+
+ &.end
+ flex: 1 1 auto
+
+ &.current-end
+ height: 20px
+ flex: 0 0 auto
+ background: linear-gradient($timeline-line-color-current, transparent)
+
+ &-node-container
+ flex: 0 0 auto
+ position: relative
+ width: $timeline-line-node-radius
+ height: $timeline-line-node-radius
+
+ &-node
+ width: $timeline-line-node-radius + 2
+ height: $timeline-line-node-radius + 2
+ position: absolute
+ left: -1px
+ top: -1px
+ border-radius: 50%
+ box-sizing: border-box
+ z-index: 1
+ animation: 1s infinite alternate
+ animation-name: timeline-line-node-noncurrent
+
+
+.current
+ .timeline-line
+ &-segment
+
+ &.start
+ background: linear-gradient($timeline-line-color, $timeline-line-color-current)
+
+ &.end
+ background: $timeline-line-color-current
+
+ &-node
+ animation-name: timeline-line-node-current
+
+.timeline-pt-start
+ padding-top: 18px
+
+.timeline-item-delete-button
+ position: absolute
+ right: 0
+ bottom: 0
+
+.timeline-content
+ white-space: pre-line
+
+.timeline-content-image
+ max-width: 60%
+ max-height: 200px
+
+
+.timeline-post-edit-image
+ max-width: 100px
+ max-height: 100px
+
+.mask
+ background: change-color($color: white, $alpha: 0.8)
+ z-index: 100
diff --git a/Timeline/ClientApp/src/timeline/timeline.scss b/Timeline/ClientApp/src/timeline/timeline.scss deleted file mode 100644 index e82b376b..00000000 --- a/Timeline/ClientApp/src/timeline/timeline.scss +++ /dev/null @@ -1,119 +0,0 @@ -@use 'sass:color';
-
-$timeline-line-width: 7px;
-$timeline-line-node-radius: 18px;
-$timeline-line-color: $primary;
-$timeline-line-color-current: #36c2e6;
-
-.timeline-line-area {
- display: flex;
- flex-direction: column;
- align-items: center;
- flex: 0 0 auto;
- width: 60px;
-}
-
-.timeline-line {
- width: $timeline-line-width;
- background: $timeline-line-color;
-}
-
-.timeline-line.start {
- height: 20px;
- flex: 0 0 auto;
-}
-
-.timeline-pt-start {
- padding-top: 18px;
-}
-
-.timeline-line.end {
- flex: 1 1 auto;
-}
-
-@keyframes timeline-line-node-noncurrent {
- from {
- background: $timeline-line-color;
- }
- to {
- background: color.adjust($timeline-line-color, $lightness: +10%);
- box-shadow: 0 0 20px 3px
- color.adjust($timeline-line-color, $lightness: +10%, $alpha: -0.1);
- }
-}
-@keyframes timeline-line-node-current {
- from {
- background: $timeline-line-color-current;
- }
- to {
- background: color.adjust($timeline-line-color-current, $lightness: +10%);
- box-shadow: 0 0 20px 3px
- color.adjust($timeline-line-color-current, $lightness: +10%, $alpha: -0.1);
- }
-}
-
-.timeline-line-node-container {
- flex: 0 0 auto;
- position: relative;
- width: $timeline-line-node-radius;
- height: $timeline-line-node-radius;
-}
-
-.timeline-line-node {
- width: $timeline-line-node-radius + 2;
- height: $timeline-line-node-radius + 2;
- position: absolute;
- left: -1px;
- top: -1px;
- border-radius: 50%;
- box-sizing: border-box;
- z-index: 1;
- animation: 1s infinite alternate;
- animation-name: timeline-line-node-noncurrent;
-}
-
-.timeline-line.current-end {
- height: 20px;
- flex: 0 0 auto;
- background: linear-gradient($timeline-line-color-current, transparent);
-}
-
-.current {
- .timeline-line.start {
- background: linear-gradient(
- $timeline-line-color,
- $timeline-line-color-current
- );
- }
- .timeline-line-node {
- animation-name: timeline-line-node-current;
- }
- .timeline-line.end {
- background: $timeline-line-color-current;
- }
-}
-
-.timeline-item-delete-button {
- position: absolute;
- right: 0;
- bottom: 0;
-}
-
-.timeline-content {
- white-space: pre-line;
-}
-
-.timeline-content-image {
- max-width: 60%;
- max-height: 200px;
-}
-
-.timeline-post-edit-image {
- max-width: 100px;
- max-height: 100px;
-}
-
-.mask {
- background: change-color($color: white, $alpha: 0.8);
- z-index: 100;
-}
diff --git a/Timeline/ClientApp/src/user/user-page.sass b/Timeline/ClientApp/src/user/user-page.sass new file mode 100644 index 00000000..1e2e802b --- /dev/null +++ b/Timeline/ClientApp/src/user/user-page.sass @@ -0,0 +1,11 @@ +.login-container
+ max-width: 600px
+
+.change-avatar-cropper-row
+ max-height: 400px
+
+.change-avatar-img
+ min-width: 50%
+ max-width: 100%
+ max-height: 400px
+
diff --git a/Timeline/ClientApp/src/user/user-page.scss b/Timeline/ClientApp/src/user/user-page.scss deleted file mode 100644 index a102fbe6..00000000 --- a/Timeline/ClientApp/src/user/user-page.scss +++ /dev/null @@ -1,13 +0,0 @@ -.login-container {
- max-width: 600px;
-}
-
-.change-avatar-cropper-row {
- max-height: 400px;
-}
-
-.change-avatar-img {
- min-width: 50%;
- max-width: 100%;
- max-height: 400px;
-}
diff --git a/Timeline/ClientApp/webpack.common.js b/Timeline/ClientApp/webpack.common.js index 4a0527ea..bed968e1 100644 --- a/Timeline/ClientApp/webpack.common.js +++ b/Timeline/ClientApp/webpack.common.js @@ -7,7 +7,7 @@ const commonRules = [ use: ['style-loader', 'css-loader'],
},
{
- test: /\.(scss)$/,
+ test: /\.(scss|sass)$/,
use: [
'style-loader',
'css-loader',
|