diff --git a/src/app/about/about.component.scss b/src/app/about/about.component.scss index a0eb681..22ceada 100644 --- a/src/app/about/about.component.scss +++ b/src/app/about/about.component.scss @@ -1,8 +1,6 @@ @import "../../assets/scss/variables"; .component-about { - z-index: 0; - .content { position: relative; margin: 150px auto 80px auto; @@ -13,6 +11,8 @@ color: $black; box-shadow: 0px 0px 25px $white-alpha; border-radius: 10px; + z-index: 1; + .about-links { color: $black; diff --git a/src/app/detail/detail.component.html b/src/app/detail/detail.component.html index 53457f7..929e85d 100644 --- a/src/app/detail/detail.component.html +++ b/src/app/detail/detail.component.html @@ -4,6 +4,12 @@

{{details.title}}

+
+ from + on + {{details.date_from | date}} + to {{details.date_to | date}} +
-
- from - on - {{details.date_from | date}} - to {{details.date_to | date}} -
-
diff --git a/src/app/detail/detail.component.scss b/src/app/detail/detail.component.scss index 246b883..86015ae 100644 --- a/src/app/detail/detail.component.scss +++ b/src/app/detail/detail.component.scss @@ -1,7 +1,6 @@ @import "../../assets/scss/variables"; .component-detail { - z-index: 0; .content { position: relative; @@ -11,6 +10,7 @@ color: $black; box-shadow: 0px 0px 25px $white-alpha; border-radius: 10px; + z-index: 1; .title { margin: 0; diff --git a/src/app/home/home.component.html b/src/app/home/home.component.html index 94b15a7..65d7521 100644 --- a/src/app/home/home.component.html +++ b/src/app/home/home.component.html @@ -3,7 +3,7 @@
-
+
loading
diff --git a/src/app/home/home.component.scss b/src/app/home/home.component.scss index 011a8ff..718015a 100644 --- a/src/app/home/home.component.scss +++ b/src/app/home/home.component.scss @@ -5,6 +5,7 @@ padding-top: 100px; height: 100vh; transform: skew(-15deg) rotate(-15deg); + z-index: 1; .goto-prev, .goto-next { @@ -19,6 +20,7 @@ margin: 0; padding: 5px; cursor: pointer; + z-index: 2; .icon { &:before { @@ -30,11 +32,11 @@ } } .goto-prev { - top: 70px; + top: 60px; left: 50px; } .goto-next { - bottom: -30px; + top: calc(80vh + 10px); right: 50px; .icon { &:before { @@ -45,7 +47,7 @@ .content { display: inline-flex; - margin: auto; + margin: 0; margin-left: -50px; //animation: slide 150s linear infinite; transition: margin-left .5s; @@ -60,13 +62,13 @@ position: relative; display: flex; background: $black-alpha2; - border-radius: 0; + border-radius: 5px; overflow: hidden; margin: auto 0; padding: 40px 20px; height: calc(80vh - 90px); - min-height: 300px; - max-height: 700px; + min-height: 250px; + //max-height: 700px; cursor: pointer; transform: skew(-6deg, -6deg) rotate(6deg); transition: transform .4s, background .4s, opacity .4s; diff --git a/src/app/home/home.component.ts b/src/app/home/home.component.ts index 158e891..6e95bbf 100644 --- a/src/app/home/home.component.ts +++ b/src/app/home/home.component.ts @@ -49,6 +49,7 @@ export class HomeComponent implements OnInit { ngAfterViewInit() { setInterval( () => { + console.log(this.paused) if(!this.paused) { const scrollWidth = 300 const scrollPos = parseInt(this.scrollContent.nativeElement.style.marginLeft) || 0 @@ -92,10 +93,6 @@ export class HomeComponent implements OnInit { break; } this.scrollContent.nativeElement.style.marginLeft = this.scrollPos + 'px' - - setTimeout ( () => { - this.paused = false - }, 2000) } } diff --git a/src/app/portfolio/portfolio.component.html b/src/app/portfolio/portfolio.component.html index c2f1076..a8f57e1 100644 --- a/src/app/portfolio/portfolio.component.html +++ b/src/app/portfolio/portfolio.component.html @@ -2,7 +2,7 @@
- loading + loading
{{item.title}} diff --git a/src/app/portfolio/portfolio.component.scss b/src/app/portfolio/portfolio.component.scss index 12a0f96..ab9be70 100644 --- a/src/app/portfolio/portfolio.component.scss +++ b/src/app/portfolio/portfolio.component.scss @@ -1,13 +1,15 @@ @import "../../assets/scss/variables"; .component-portfolio { - padding-top: 160px; + padding: 160px 0 80px 0; .row-container { + position: relative; transform: skew(-2deg, -2deg) rotate(-2deg); width: calc(100% - 50px); max-width: 1400px; margin: auto; + z-index: 1; .box { position: relative; @@ -45,7 +47,6 @@ height: 100%; width: 100%; object-fit: cover; - filter: invert(100%); transform: translate(-50%, -50%); z-index: 0; } diff --git a/src/assets/images/loader.svg b/src/assets/images/loader.svg new file mode 100644 index 0000000..a656b7e --- /dev/null +++ b/src/assets/images/loader.svg @@ -0,0 +1,11 @@ + + + + + + + + + + + \ No newline at end of file diff --git a/src/assets/scss/global.scss b/src/assets/scss/global.scss index b39e98f..cc49963 100644 --- a/src/assets/scss/global.scss +++ b/src/assets/scss/global.scss @@ -39,5 +39,5 @@ button { height: 100vh; width: 100vw; background: radial-gradient(circle, transparent 0%, transparent 85%, rgba(255,255,255,0.2) 95%, rgba(255,255,255,0.3) 100%); - z-index: -1; + z-index: 0; }