From 95d9977df94c860c8eba8582629aed5fd9fadf69 Mon Sep 17 00:00:00 2001 From: Lachlan Kermode Date: Fri, 16 Aug 2019 11:00:28 +0100 Subject: [PATCH] clean up styles --- src/scss/_animations.scss | 21 ----- src/scss/_colors.scss | 24 ----- src/scss/_fonts.scss | 9 -- src/scss/_levels.scss | 12 --- src/scss/_variables.scss | 68 ++++++++++++++ src/scss/card.scss | 1 - src/scss/cardstack.scss | 16 ++-- src/scss/common.scss | 2 +- src/scss/cover.scss | 7 +- src/scss/infopopup.scss | 13 +-- src/scss/main.scss | 7 +- src/scss/map.scss | 12 ++- src/scss/narrativecard.scss | 29 +++--- src/scss/overlay.scss | 10 -- src/scss/scene.scss | 177 ------------------------------------ src/scss/tag-filters.scss | 85 ----------------- src/scss/toolbar.scss | 31 ++----- 17 files changed, 109 insertions(+), 415 deletions(-) delete mode 100644 src/scss/_animations.scss delete mode 100644 src/scss/_colors.scss delete mode 100644 src/scss/_fonts.scss delete mode 100644 src/scss/_levels.scss create mode 100644 src/scss/_variables.scss delete mode 100644 src/scss/scene.scss delete mode 100644 src/scss/tag-filters.scss diff --git a/src/scss/_animations.scss b/src/scss/_animations.scss deleted file mode 100644 index 1662964..0000000 --- a/src/scss/_animations.scss +++ /dev/null @@ -1,21 +0,0 @@ -@keyframes fadeIn { - from { - opacity: 0; - } - - to { - opacity: 1; - } -} - -@keyframes fallFadeIn { - from { - transform: translate(0, -40px); - opacity: 0; - } - - to { - transform: none; - opacity: 1; - } -} diff --git a/src/scss/_colors.scss b/src/scss/_colors.scss deleted file mode 100644 index 8dc21ac..0000000 --- a/src/scss/_colors.scss +++ /dev/null @@ -1,24 +0,0 @@ -$event_default: red; - -$offwhite: #efefef; -$lightwhite: #dfdfdf; -$midwhite: #a0a0a0; -$darkwhite: darken($midwhite, 15%); -$yellow: #ffd800; -// $yellow: rgb(240, 255, 0); -$red: rgb(233, 0, 19); -$green: rgb(61, 241, 79); -$midgrey: rgb(44, 44, 44); -$darkgrey: #232323; -$black: #000000; - -// Category colors -$default: red; -$alpha: #00ff00; -$beta: #ff00ff; -$other: yellow; - -.default { background: $default; } -.other { background: $other; } -.alpha { background: $alpha; } -.beta { background: $beta; } diff --git a/src/scss/_fonts.scss b/src/scss/_fonts.scss deleted file mode 100644 index 55463e9..0000000 --- a/src/scss/_fonts.scss +++ /dev/null @@ -1,9 +0,0 @@ -$xsmall: 10px;//0.7em; -$small: 11px;//0.9em; -$normal: 12px;//1em; -$large: 14px;//1.1em; -$xlarge: 16px;//1.2em; -$xxlarge: 20px;//1.4em; -$xxxlarge: 32px; -$title: 36px; -$cover-title: 68px; diff --git a/src/scss/_levels.scss b/src/scss/_levels.scss deleted file mode 100644 index b2e56ce..0000000 --- a/src/scss/_levels.scss +++ /dev/null @@ -1,12 +0,0 @@ -/* z-index levels */ -$final-level: 10000; -$loading-overlay: 1000; -$overheader: 100; -$header: 10; -$map-overlay2: 4; -$map-overlay: 2; -$map: 1; -$scene: 1; -$hidden: -1; -$timeline: 3; -$timeslider: 3; diff --git a/src/scss/_variables.scss b/src/scss/_variables.scss new file mode 100644 index 0000000..57b86c1 --- /dev/null +++ b/src/scss/_variables.scss @@ -0,0 +1,68 @@ +$event_default: red; + +$offwhite: #efefef; +$lightwhite: #dfdfdf; +$midwhite: #a0a0a0; +$darkwhite: darken($midwhite, 15%); +$yellow: #ffd800; +// $yellow: rgb(240, 255, 0); +$red: rgb(233, 0, 19); +$green: rgb(61, 241, 79); +$midgrey: rgb(44, 44, 44); +$darkgrey: #232323; +$black: #000000; + +// Category colors +$default: red; +$alpha: #00ff00; +$beta: #ff00ff; +$other: yellow; + +.default { background: $default; } +.other { background: $other; } +.alpha { background: $alpha; } +.beta { background: $beta; } + + +// Font sizes +$xsmall: 10px;//0.7em; +$small: 11px;//0.9em; +$normal: 12px;//1em; +$large: 14px;//1.1em; +$xlarge: 16px;//1.2em; +$xxlarge: 20px;//1.4em; +$xxxlarge: 32px; + +// z-index levels +$final-level: 10000; +$loading-overlay: 1000; +$overheader: 100; +$header: 10; +$map-overlay: 2; +$map: 1; +$scene: 1; +$hidden: -1; +$timeline: 3; + + +// platform-specific sizes +$infopopup-width: 400px; +$infopopup-left: 122px; +$infopopup-bottom: 180px; +$card-width: 386px; +$card-right: 9px; +$narrative-info-height: 205px; +$narrative-info-desc-height: 153px; +$timeline-height: 170px; +$toolbar-width: 110px; + +$panel-width: 1000px; +$panel-height: 1000px; +$vimeo-width: $panel-width - 100; +$vimeo-height: $panel-height / 2; +$banner-height: 100px; +$padding: 20px; +$header-inset: 10px; + + + diff --git a/src/scss/card.scss b/src/scss/card.scss index a6484b5..bbd05b9 100644 --- a/src/scss/card.scss +++ b/src/scss/card.scss @@ -3,7 +3,6 @@ margin: 1px 0 0 0; padding: 15px; border: 1px solid $black; - // border-radius: 3px; transition: 0.2 ease; background: $midwhite; color: $darkgrey; diff --git a/src/scss/cardstack.scss b/src/scss/cardstack.scss index 230d63c..c1a8e28 100644 --- a/src/scss/cardstack.scss +++ b/src/scss/cardstack.scss @@ -1,14 +1,10 @@ -@import 'burger'; +// @import 'burger'; @import 'card'; -$card-width: 370px; -$narrative-info-max-height: 200px; -$timeline-height: 170px; - .card-stack { position: absolute; - top: 10px; - right: 10px; + top: $card-right; + right: $card-right; max-height: calc(100% - 180px); height: auto; overflow-y: scroll; @@ -17,10 +13,10 @@ $timeline-height: 170px; color: white; &.narrative-mode { - right: 10px; + right: $card-right; left: auto; - top: $narrative-info-max-height + 12px + 20px; - height: calc(100% - #{$narrative-info-max-height} - #{$timeline-height} - 12px - 20px); + top: $narrative-info-height + 32px; + height: calc(100% - #{$narrative-info-height} - #{$timeline-height} - 32px); } &.full-height { diff --git a/src/scss/common.scss b/src/scss/common.scss index 34c87ad..2a837f8 100644 --- a/src/scss/common.scss +++ b/src/scss/common.scss @@ -1,4 +1,4 @@ -@import 'colors'; +@import 'variables'; body { margin: 0; diff --git a/src/scss/cover.scss b/src/scss/cover.scss index eac28ae..087b656 100644 --- a/src/scss/cover.scss +++ b/src/scss/cover.scss @@ -37,10 +37,8 @@ width: 150vw; height: 100vh; -webkit-filter: contrast(70%) brightness(70%) grayscale(100%); - /* Webkit */ - /* filter: gray; /* IE6-9 */ filter: contrast(70%) brightness(70%) grayscale(100%); - /* W3C */ } +} .default-cover-container { display: flex; @@ -178,9 +176,6 @@ justify-content: center; align-content: center; flex: 1; - // border-right: 4px solid black; - // padding: 0 10px; - // min-height: 60px; } } diff --git a/src/scss/infopopup.scss b/src/scss/infopopup.scss index 4d86ae7..179bf55 100644 --- a/src/scss/infopopup.scss +++ b/src/scss/infopopup.scss @@ -1,15 +1,15 @@ @import 'burger'; .infopopup { - width: 400px; + width: $infopopup-width; box-shadow: 10px -10px 38px rgba(0, 0, 0, 0.3), 10px 15px 12px rgba(0, 0, 0, 0.22); color: $darkgrey; position: absolute; background: $offwhite; - border-radius: 5px; - bottom: 180px; - left: 120px; + bottom: $timeline-height; + left: $toolbar-width; border: 3px solid $offwhite; + border-radius: 1px; padding: 20px; box-sizing: border-box; font-family: 'Lato', 'Helvetica', sans-serif; @@ -75,11 +75,6 @@ .legend-labels { display: flex; - - .label { - // font-size: $xsmall; - } } - } } diff --git a/src/scss/main.scss b/src/scss/main.scss index 1c10ad5..df92eed 100644 --- a/src/scss/main.scss +++ b/src/scss/main.scss @@ -1,7 +1,4 @@ -@import 'colors'; -@import 'fonts'; -@import 'levels'; -@import 'animations'; +@import 'variables'; @import 'common'; @import 'loading'; @import 'header'; @@ -10,10 +7,8 @@ @import 'overlay'; @import 'map'; @import 'timeline'; -@import 'tag-filters'; @import 'toolbar'; @import 'infopopup'; @import 'notification'; -@import 'scene'; @import 'mediaplayer'; @import 'cover'; diff --git a/src/scss/map.scss b/src/scss/map.scss index d3e595c..64cbba0 100644 --- a/src/scss/map.scss +++ b/src/scss/map.scss @@ -163,6 +163,9 @@ opacity: 1; } +.narrative-mode { +} + .location-event { cursor: pointer; } @@ -193,5 +196,12 @@ } .no-hover { - cursor: grab !important; + cursor: grab; } + +// no hover styles for events when in narrative mode +.narrative-mode { + .event-hover:hover { opacity: 0; } + .no-hover { cursor: inherit; } +} + diff --git a/src/scss/narrativecard.scss b/src/scss/narrativecard.scss index cfae341..14cfd61 100644 --- a/src/scss/narrativecard.scss +++ b/src/scss/narrativecard.scss @@ -1,6 +1,3 @@ -$narrative-info-width: 386px; -$timeline-height: 170px; - /* NARRATIVE INFO */ @@ -8,14 +5,13 @@ NARRATIVE INFO position: fixed; top: 30px; left: auto; - right: 9px; - height: 205px; - width: $narrative-info-width; + right: $card-right; // looks a bit better due to the 1px border on other elements. + height: $narrative-info-height; + width: $card-width; box-sizing: border-box; max-height: calc(100% - 250px); box-shadow: 0 19px 38px rgba($black, 0.3), 0 15px 12px rgba($black, 0.22); background: $black; - border: 1px solid $midgrey; color: $offwhite; font-family: Helvetica, 'Georgia', serif; @@ -39,7 +35,7 @@ NARRATIVE INFO } .narrative-info-desc { - height: 153px; + height: $narrative-info-desc-height; overflow-y: auto; } @@ -105,20 +101,17 @@ NARRATIVE INFO .narrative-adjust { position: fixed; - // top: calc(50vh - 100pt); bottom: $timeline-height; - // top: 0; right: auto; background-color: rgba(0,0,0,0.8); - z-index: 15; // z-index of card-stack is 10 + z-index: $overheader; &.left { - right: calc(#{$narrative-info-width} - 70px); + right: $card-right + $card-width - 40pt; } &.right { - // right: calc(#{$narrative-info-width} + 10px); - right: 25px; + right: $card-right; } .material-icons { @@ -127,7 +120,7 @@ NARRATIVE INFO transition: color 0.2s ease; &.disabled { - color: $midgrey; + display: none; } &:hover { @@ -142,10 +135,10 @@ NARRATIVE INFO justify-content: flex-start; position: fixed; padding: 2px 5px 0 5px; - // right: $narrative-info-width - 15px - 10px; - right: 10px; + right: $card-right; top: 5px; - width: $narrative-info-width - 10px - 2px; + width: $card-width - 12px; // subtracting the extra width added by padding +; // width: 15px; background-color: black; height: 20px; diff --git a/src/scss/overlay.scss b/src/scss/overlay.scss index 332e086..65450b5 100644 --- a/src/scss/overlay.scss +++ b/src/scss/overlay.scss @@ -1,13 +1,3 @@ -$panel-width: 1000px; -$panel-height: 1000px; -$vimeo-width: $panel-width - 100; -$vimeo-height: $panel-height / 2; - -$padding: 20px; -$header-inset: 10px; - -$banner-height: 100px; - a { color: $yellow !important; } diff --git a/src/scss/scene.scss b/src/scss/scene.scss deleted file mode 100644 index c2b5db3..0000000 --- a/src/scss/scene.scss +++ /dev/null @@ -1,177 +0,0 @@ -.scene-wrapper { - #container { - position: absolute; - top: 0; - left: 0; - right: 0; - display: block; - } - &.hidden { - z-index: $hidden; - } - &.show { - z-index: $scene; - } -} -#loadingText { - text-align: center; - position:relative; - margin: 0 auto; - margin-top: 20px; - clear:left; - height:auto; - z-index: 0; - color: rgba( 255, 255, 255, 255 ); - font-size: $normal; - font-weight: 700; - color: $offwhite; - letter-spacing: 0.1em; - text-transform: uppercase; -} - - -.back-to-map { - button { - position: fixed; - top: 20px; - left: 130px; - height: 20px; - width: 250px; - text-align: left; - background: none; - padding: 0; - margin-bottom: 10px; - border: none; - background-size: 100%; - line-height: 20px; - color: $offwhite; - cursor: pointer; - outline: none; - font-family: 'Lato', Helvetica, sans-serif; - text-transform: uppercase; - transition: 0.2s ease; - letter-spacing: 0.1em; - - &:hover { - transition: 0.2s ease; - letter-spacing: 0.15em; - } - } -} - -/* -KEYFRAME INFO -*/ -.keyframe-info { - position: fixed; - top: 60px; - left: 130px; - height: auto; - width: 270px; - box-sizing: border-box; - padding: 10px; - max-height: calc(100% - 250px); - overflow: auto; - box-shadow: 0 19px 38px rgba($black, 0.3), 0 15px 12px rgba($black, 0.22); - background: $black; - border: 1px solid $midgrey; - color: $offwhite; - font-family: Helvetica, 'Georgia', serif; - - h3, h6 { - text-align: center; - } - - h3 { - font-size: $large; - } - - p { - font-family: 'Lato', 'Helvetica', sans-serif; - font-size: $normal; - line-height: 1.4em; - } - - .actions { - width: 100%; - .action { - width: calc(50% - 5px); - height: 40px; - box-sizing: border-box; - line-height: 40px; - font-family: 'Lato', 'Helvetica', sans-serif; - text-align: center; - display: inline-block; - - &:not(.disabled) { - &:hover { - cursor: pointer; - transition: 0.2s ease; - color: $yellow; - } - } - - &.disabled { - color: $midgrey; - cursor: normal; - } - - &:first-child { - margin-right: 10px; - } - } - } -} - -/* -DAT GUI -*/ -.dg .a { - margin-right: 20px; - margin-top: 20px; -} - -.dg .cr.number { - border: none; - background: none; - - input[type=text] { - display: none; - } -} - -.dg.main .close-button { - display: none; -} - -.dg .c { - width: 66%; - .slider { - width: 100%; - border-radius: 10px; - height: 12px; - - .slider-fg { - border-radius: 10px; - } - - &:hover { - .slider-fg { - background: $offwhite; - } - } - } -} - -.dg .c .slider-fg { - background: $midwhite; -} - -.dg .property-name { - width: 33%; - font-family: 'Lato', Helvetica, sans-serif; - text-transform: uppercase; - letter-spacing: 0.1em; - line-height: 20px; - color: white; -} diff --git a/src/scss/tag-filters.scss b/src/scss/tag-filters.scss deleted file mode 100644 index da3bb8a..0000000 --- a/src/scss/tag-filters.scss +++ /dev/null @@ -1,85 +0,0 @@ -.applied-tagFilters { - position: fixed; - top: 135px; - right: 5px; - max-width: 260px; - background: $black; - color: $offwhite; - padding: 10px; - font-size: $small; - z-index: $map-overlay; - - .caption { - font-size: $small; - display: block; - text-align: center; - text-transform: uppercase; - letter-spacing: 0.1em; - } - - .tag-chip-group { - display: inline-block; - width: 100%; - max-height: 150px; - background: $midgrey; - border-radius: 5px; - margin-top: 5px; - padding: 0 5px 5px 5px; - box-sizing: border-box; - overflow: auto; - - h3 { - margin: 5px 0; - } - } - - .applied-tagFilter-chip { - width: auto; - border-radius: 10px; - border: 0; - color: $black; - min-height: 16px; - line-height: 16px; - margin-top: 5px; - margin-left: 5px; - padding: 1px 5px; - transition: 0.2s ease; - background: $yellow; - float: right; - - &:hover { - transition: 0.2s ease; - background: lighten($yellow, 15%); - } - - &:first-child { - margin-top: 5px; - } - - .detail { - cursor: pointer; - max-width: 350px; - margin-right: 15px; - } - - svg { - display: inline-block; - position: relative; - float: right; - margin-top: -14px; - height: 12px; - width: 12px; - user-select: none; - cursor: pointer; - color: rgba($black, 0.25); - fill: rgba($black, 0.25); - transition: all 450ms cubic-bezier(0.23, 1, 0.32, 1) 0ms; - - &:hover { - color: rgba($black, 0.6); - fill: rgba($black, 0.6); - transition: all 450ms cubic-bezier(0.23, 1, 0.32, 1) 0ms; - } - } - } -} diff --git a/src/scss/toolbar.scss b/src/scss/toolbar.scss index ca9c1b4..c92ae07 100644 --- a/src/scss/toolbar.scss +++ b/src/scss/toolbar.scss @@ -10,12 +10,12 @@ background: $midgrey; &.narrative-mode { - left: -110px; + left: -$toolbar-width; } .toolbar { position: relative; - width: 110px; + width: $toolbar-width; height: 100%; padding: 20px 0px; margin: 0; @@ -61,7 +61,7 @@ .bottom-actions { position: absolute; - width: 110px; + width: $toolbar-width; bottom: 10px; box-sizing: border-box; @@ -178,8 +178,8 @@ justify-content: center; flex-direction: column; height: 60px; - width: 110px; - padding: 5px 0 5px 0; + width: $toolbar-width; + padding: 5px 0; font-weight: 400; text-overflow: ellipsis; overflow: hidden; @@ -255,7 +255,7 @@ color: $offwhite; position: fixed; transition: 0.2s ease; - left: 110px; + left: $toolbar-width; box-shadow: 10px -10px 38px rgba(0, 0, 0, 0.3), 10px 15px 12px rgba(0, 0, 0, 0.22); h2 { @@ -487,20 +487,6 @@ text-transform: none; } } - - /*&:first-child { - button { background-image: url("/static/archive/img/scene01.jpg"); } - } - &:nth-child(2n) { - button { background-image: url("/static/archive/img/scene02.jpg"); } - } - &:nth-child(3n) { - button { background-image: url("/static/archive/img/scene03.jpg"); } - } - - &.back-to-map { - button { background-image: url("/static/archive/img/map.jpg"); } - }*/ } } @@ -531,11 +517,6 @@ height: 60px; padding: 0; - /*.tab-caption { - transition: 0.2s ease; - opacity: 0; - }*/ - &:hover { .tab-caption { transition: 0.2s ease;