From 1c8ab3cee2c02965b607b852717065cc0b7747ee Mon Sep 17 00:00:00 2001 From: twanariens Date: Wed, 31 Mar 2021 22:08:42 +0200 Subject: [PATCH 1/8] Reworked top search. included username. styling fixes for menu --- .../src/app/my-nav/my-nav.component.html | 47 +++++----- .../src/app/my-nav/my-nav.component.scss | 85 ++++++++++--------- .../src/app/my-nav/nav-search.component.scss | 1 - 3 files changed, 68 insertions(+), 65 deletions(-) diff --git a/src/Ombi/ClientApp/src/app/my-nav/my-nav.component.html b/src/Ombi/ClientApp/src/app/my-nav/my-nav.component.html index 3ca868685..9e9bdcd73 100644 --- a/src/Ombi/ClientApp/src/app/my-nav/my-nav.component.html +++ b/src/Ombi/ClientApp/src/app/my-nav/my-nav.component.html @@ -53,36 +53,33 @@ -
- +
-
+
- + + + + {{ 'NavigationBar.Filter.Movies' | translate}} + + {{ 'NavigationBar.Filter.TvShows' | translate}} + + {{ 'NavigationBar.Filter.Music' | translate}} + +
-
- - - - {{ 'NavigationBar.Filter.Movies' | translate}} - - {{ 'NavigationBar.Filter.TvShows' | translate}} - - {{ 'NavigationBar.Filter.Music' | translate}} - - -
-
+
- +
{{username}}
+
diff --git a/src/Ombi/ClientApp/src/app/my-nav/my-nav.component.scss b/src/Ombi/ClientApp/src/app/my-nav/my-nav.component.scss index 135220631..315beb1df 100644 --- a/src/Ombi/ClientApp/src/app/my-nav/my-nav.component.scss +++ b/src/Ombi/ClientApp/src/app/my-nav/my-nav.component.scss @@ -24,7 +24,8 @@ } .icon-spacing { - margin-right: 5%; + width:40px; + text-align: center; } .example-form { @@ -48,12 +49,6 @@ padding: 0px 5px; } -::ng-deep .dark .active-list-item { - background: $accent-dark !important; - color:black !important; - font-weight:500; -} - .slide-menu { width: 100%; } @@ -62,6 +57,27 @@ max-width: 170px !important; } +.top-bar-container{ + width: 95%; + display: flex; + justify-content: center; + align-items: center; + margin: auto; +} + +.top-search-block{ + height:84px; + display:flex; + justify-content: center; + align-items: center; + flex:1; + margin-right:5%; +} + +.top-search-bar{ + width:100%; +} + .mat-drawer-content { position: relative; overflow: hidden; @@ -71,36 +87,34 @@ /* overflow: auto; */ } -.profile-img-container { - margin: 20px auto 10px; - overflow: hidden; - text-align: center; - width: 80%; +.profile-block a{ + color: #FFF; + font-size: 0.8em; + font-weight: 100; + display:flex; + justify-content: end; + align-items: flex-end; + text-transform: capitalize; + flex:0 0 250px; } -.profile-img { - float: left; - width: 45px; - border-radius: 100%; -} -.profile-info { - overflow: hidden; - text-align: left; -} -.profile-info > h3 { - font-size: 15px; - text-transform: capitalize; - // color: #333; - margin-bottom: 2px; + +.profile-username{ + justify-content: center; + display:flex; + height:50px; + align-items: center; + margin-right:5px; } -.profile-info > p { - // color: #333; - font-size: 11px; - margin-top: 5px; + +@media (max-width: 600px) { + .profile-username{ + display:none; + } } .profile-img img { - width: 45px; + width: 50px; } @@ -173,18 +187,11 @@ .top-bar-container{ background: $ombi-background-primary; color:$ombi-background-primary-accent; + padding-top:1em; } } -.top-search-bar{ - margin-left: 30px; -} - ::ng-deep .mat-toolbar-row, .mat-toolbar-single-row{ height:auto; -} - -.top-search-bar{ - height:84px; } \ No newline at end of file diff --git a/src/Ombi/ClientApp/src/app/my-nav/nav-search.component.scss b/src/Ombi/ClientApp/src/app/my-nav/nav-search.component.scss index 3cd5021ed..9780f5b5d 100644 --- a/src/Ombi/ClientApp/src/app/my-nav/nav-search.component.scss +++ b/src/Ombi/ClientApp/src/app/my-nav/nav-search.component.scss @@ -39,7 +39,6 @@ $ombi-accent: #258a6d; ::ng-deep .top-search-bar .mat-form-field-flex{ border: 1px solid #35465c; border-radius:30px; - margin-top:20px; height:50px; } From 94862aee372ecb51220bd14c8103a7e54ac39e2a Mon Sep 17 00:00:00 2001 From: twanariens Date: Wed, 31 Mar 2021 23:13:52 +0200 Subject: [PATCH 2/8] Some styling changes to the discover page --- .../components/card/discover-card.component.html | 5 +++-- .../components/card/discover-card.component.scss | 15 ++++++++++----- .../src/app/my-nav/my-nav.component.scss | 4 +--- src/Ombi/wwwroot/translations/en.json | 4 +++- 4 files changed, 17 insertions(+), 11 deletions(-) diff --git a/src/Ombi/ClientApp/src/app/discover/components/card/discover-card.component.html b/src/Ombi/ClientApp/src/app/discover/components/card/discover-card.component.html index 2f5f00703..1dcf4824c 100644 --- a/src/Ombi/ClientApp/src/app/discover/components/card/discover-card.component.html +++ b/src/Ombi/ClientApp/src/app/discover/components/card/discover-card.component.html @@ -3,7 +3,7 @@
- {{RequestType[result.type] | humanize}} + {{ 'Common.' + RequestType[result.type] | translate }}
{{getAvailbilityStatus()}} @@ -21,9 +21,10 @@
-
diff --git a/src/Ombi/ClientApp/src/app/discover/components/card/discover-card.component.scss b/src/Ombi/ClientApp/src/app/discover/components/card/discover-card.component.scss index ec2dbae3b..d495fc000 100644 --- a/src/Ombi/ClientApp/src/app/discover/components/card/discover-card.component.scss +++ b/src/Ombi/ClientApp/src/app/discover/components/card/discover-card.component.scss @@ -1,5 +1,4 @@ -$ombi-primary:#3f3f3f; -$card-background: #2b2b2b; +@import "~styles/variables.scss"; #cardImage { border-radius: 5px; @@ -141,19 +140,20 @@ small { .card-top-info{ position: absolute; - text-transform: uppercase; top: 0px; width: 100%; - background-color: rgba(15,23,31,0.6); + background-color: rgba(15,23,31,0.7); display:flex; justify-content: space-between; padding-top:0.6em; padding-bottom:0.3em; z-index:2; + letter-spacing: 0.2px; } .top-left { font-size: 14px; + font-weight:200; padding-left: 0.5em; font-size: 14px; } @@ -161,6 +161,7 @@ small { /* common */ .top-right{ display:flex; + font-weight:200; } .top-right span.indicator, span.indicator-text { @@ -247,7 +248,7 @@ a.poster-overlay:hover{ width: 100%; margin-left: 0; margin-right: 0; - margin-top: -37px; + margin-top: -36px; margin-bottom: 0px; opacity:0; transition: .5s ease; @@ -261,4 +262,8 @@ a.poster-overlay:hover{ .c:hover .button-request-container { opacity:1; +} + +.btn-ombi{ + background-color:$ombi-active-text; } \ No newline at end of file diff --git a/src/Ombi/ClientApp/src/app/my-nav/my-nav.component.scss b/src/Ombi/ClientApp/src/app/my-nav/my-nav.component.scss index 315beb1df..64b377ac9 100644 --- a/src/Ombi/ClientApp/src/app/my-nav/my-nav.component.scss +++ b/src/Ombi/ClientApp/src/app/my-nav/my-nav.component.scss @@ -92,7 +92,7 @@ font-size: 0.8em; font-weight: 100; display:flex; - justify-content: end; + justify-content: flex-end; align-items: flex-end; text-transform: capitalize; flex:0 0 250px; @@ -139,7 +139,6 @@ text-transform: uppercase; color: $ombi-active; align-items:center; - justify-content: center; font-weight: 700; font-size:36px; padding:40px 20px; @@ -147,7 +146,6 @@ max-width: 350px; display: flex; white-space: normal; - text-align: center; } .outer-profile { diff --git a/src/Ombi/wwwroot/translations/en.json b/src/Ombi/wwwroot/translations/en.json index cf865fce7..fab6213a7 100644 --- a/src/Ombi/wwwroot/translations/en.json +++ b/src/Ombi/wwwroot/translations/en.json @@ -31,7 +31,9 @@ "Validation": "Please check your entered values" }, "Cancel": "Cancel", - "Submit": "Submit" + "Submit": "Submit", + "tvShow": "TV Show", + "movie": "Movie" }, "PasswordReset": { "EmailAddressPlaceholder": "Email Address", From f106b2bb688733cf9130599200e4728ff081d99b Mon Sep 17 00:00:00 2001 From: twanariens Date: Wed, 31 Mar 2021 23:22:10 +0200 Subject: [PATCH 3/8] Stop shouting in my face stupid filters --- .../components/carousel-list/carousel-list.component.scss | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/Ombi/ClientApp/src/app/discover/components/carousel-list/carousel-list.component.scss b/src/Ombi/ClientApp/src/app/discover/components/carousel-list/carousel-list.component.scss index 325c03512..ae107272b 100644 --- a/src/Ombi/ClientApp/src/app/discover/components/carousel-list/carousel-list.component.scss +++ b/src/Ombi/ClientApp/src/app/discover/components/carousel-list/carousel-list.component.scss @@ -71,7 +71,7 @@ .discover-filter-buttons-group { background: $ombi-background-primary; - border: 1px solid $ombi-background-primary-accent; + border: 1px solid #293a4c; border-radius: 30px; color:#fff; margin-bottom:10px; @@ -91,7 +91,7 @@ } .button-active{ - background:$ombi-active; + background:#293a4c; } From 9294c278da1bc40af6a5a7c500f0e1a6afa1e2f6 Mon Sep 17 00:00:00 2001 From: twanariens Date: Wed, 31 Mar 2021 23:29:12 +0200 Subject: [PATCH 4/8] BEGONE you ugly separator --- .../app/discover/components/card/discover-card.component.scss | 2 +- .../components/carousel-list/carousel-list.component.scss | 1 + 2 files changed, 2 insertions(+), 1 deletion(-) diff --git a/src/Ombi/ClientApp/src/app/discover/components/card/discover-card.component.scss b/src/Ombi/ClientApp/src/app/discover/components/card/discover-card.component.scss index d495fc000..e5312092a 100644 --- a/src/Ombi/ClientApp/src/app/discover/components/card/discover-card.component.scss +++ b/src/Ombi/ClientApp/src/app/discover/components/card/discover-card.component.scss @@ -265,5 +265,5 @@ a.poster-overlay:hover{ } .btn-ombi{ - background-color:$ombi-active-text; + background-color:#293a4c; } \ No newline at end of file diff --git a/src/Ombi/ClientApp/src/app/discover/components/carousel-list/carousel-list.component.scss b/src/Ombi/ClientApp/src/app/discover/components/carousel-list/carousel-list.component.scss index ae107272b..5c153175d 100644 --- a/src/Ombi/ClientApp/src/app/discover/components/carousel-list/carousel-list.component.scss +++ b/src/Ombi/ClientApp/src/app/discover/components/carousel-list/carousel-list.component.scss @@ -84,6 +84,7 @@ border-radius: 30px; padding-left: 20px; padding-right: 20px; + border-left:none; } ::ng-deep .mat-button-toggle-appearance-standard .mat-button-toggle-label-content{ From 16515ed3a8b2234540c4b3b3e28c236b1bf0f2e3 Mon Sep 17 00:00:00 2001 From: twanariens Date: Wed, 31 Mar 2021 23:41:34 +0200 Subject: [PATCH 5/8] Stupid container being stupid. Told it to stop --- .../src/app/media-details/media-details.component.scss | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/src/Ombi/ClientApp/src/app/media-details/media-details.component.scss b/src/Ombi/ClientApp/src/app/media-details/media-details.component.scss index 6a6ceac58..ed54c3aa5 100644 --- a/src/Ombi/ClientApp/src/app/media-details/media-details.component.scss +++ b/src/Ombi/ClientApp/src/app/media-details/media-details.component.scss @@ -221,7 +221,7 @@ .social-icons-container{ position:absolute; - top:84px; + top:0px; right:0px; width:100%; background-color:rgba(15,23,31,.6); @@ -329,6 +329,10 @@ margin-left:10px; } +.dark-theme{ + position:relative; +} + @media (max-width:500px){ .row.justify-content-center.justify-content-sm-start.header-container{ flex-wrap:wrap; From 0eeb163a0d148e6435bae57b572bd1d96da7bde1 Mon Sep 17 00:00:00 2001 From: tidusjar Date: Thu, 1 Apr 2021 10:21:48 +0100 Subject: [PATCH 6/8] Fixed automation tests --- src/Ombi/ClientApp/src/app/my-nav/my-nav.component.html | 4 ++-- tests/cypress/integration/page-objects/shared/NavBar.ts | 2 +- tests/cypress/tests/discover/discover-cards-requests.spec.ts | 2 +- tests/cypress/tests/search/search.spec.ts | 4 ++-- 4 files changed, 6 insertions(+), 6 deletions(-) diff --git a/src/Ombi/ClientApp/src/app/my-nav/my-nav.component.html b/src/Ombi/ClientApp/src/app/my-nav/my-nav.component.html index 9e9bdcd73..190e253cf 100644 --- a/src/Ombi/ClientApp/src/app/my-nav/my-nav.component.html +++ b/src/Ombi/ClientApp/src/app/my-nav/my-nav.component.html @@ -78,8 +78,8 @@
-
{{username}}
-
+
{{username}}
+
diff --git a/tests/cypress/integration/page-objects/shared/NavBar.ts b/tests/cypress/integration/page-objects/shared/NavBar.ts index b7ed09bbb..8ca5e70db 100644 --- a/tests/cypress/integration/page-objects/shared/NavBar.ts +++ b/tests/cypress/integration/page-objects/shared/NavBar.ts @@ -69,7 +69,7 @@ class NavBar { } get userPreferences(): Cypress.Chainable { - return cy.get('#profile-image'); + return cy.getByData('profile-image'); } get logout(): Cypress.Chainable { diff --git a/tests/cypress/tests/discover/discover-cards-requests.spec.ts b/tests/cypress/tests/discover/discover-cards-requests.spec.ts index 6d22f6bde..81d86d7e7 100644 --- a/tests/cypress/tests/discover/discover-cards-requests.spec.ts +++ b/tests/cypress/tests/discover/discover-cards-requests.spec.ts @@ -197,7 +197,7 @@ describe("Discover Cards Requests Tests", () => { }); }); - it.only("Available TV does not allow us to request", () => { + it("Available TV does not allow us to request", () => { cy.intercept("GET", "**/search/Tv/popular/**", (req) => { req.reply((res) => { const body = res.body; diff --git a/tests/cypress/tests/search/search.spec.ts b/tests/cypress/tests/search/search.spec.ts index 35711abc0..fee3eaf9d 100644 --- a/tests/cypress/tests/search/search.spec.ts +++ b/tests/cypress/tests/search/search.spec.ts @@ -16,7 +16,7 @@ describe("Search Tests", () => { card.topLevelCard.realHover(); card.title.should('have.text', "Dexter's Laboratory"); card.overview.contains('Cartoon Network'); - card.requestType.contains('Tv Show'); + card.requestType.contains('TV Show'); card.requestButton.should('exist'); }); @@ -115,7 +115,7 @@ describe("Search Tests", () => { card.topLevelCard.realHover(); card.title.should('have.text', "It's Always Sunny in Philadelphia"); card.overview.contains('Irish pub'); - card.requestType.contains('Tv Show'); + card.requestType.contains('TV Show'); card.requestButton.should('exist'); }); From f2ea1d0e136756ca01f89d6911c0d765005cae5b Mon Sep 17 00:00:00 2001 From: tidusjar Date: Thu, 1 Apr 2021 23:56:37 +0100 Subject: [PATCH 7/8] Fixed up some more tests --- .../card/discover-card.component.html | 2 +- .../card/discover-card.component.ts | 19 ++--- .../src/app/my-nav/my-nav.component.html | 4 +- .../integration/page-objects/shared/NavBar.ts | 4 + .../tests/api/v1/tv-request.api.spec.ts | 85 +++++++++++++++++++ .../tests/navigation/navigation-bar.spec.ts | 2 + 6 files changed, 101 insertions(+), 15 deletions(-) create mode 100644 tests/cypress/tests/api/v1/tv-request.api.spec.ts diff --git a/src/Ombi/ClientApp/src/app/discover/components/card/discover-card.component.html b/src/Ombi/ClientApp/src/app/discover/components/card/discover-card.component.html index 1dcf4824c..651634a0c 100644 --- a/src/Ombi/ClientApp/src/app/discover/components/card/discover-card.component.html +++ b/src/Ombi/ClientApp/src/app/discover/components/card/discover-card.component.html @@ -21,7 +21,7 @@
-
-
{{username}}
-
+
{{username}}
+
diff --git a/tests/cypress/integration/page-objects/shared/NavBar.ts b/tests/cypress/integration/page-objects/shared/NavBar.ts index 8ca5e70db..fb55aca92 100644 --- a/tests/cypress/integration/page-objects/shared/NavBar.ts +++ b/tests/cypress/integration/page-objects/shared/NavBar.ts @@ -72,6 +72,10 @@ class NavBar { return cy.getByData('profile-image'); } + get username(): Cypress.Chainable { + return cy.getByData('profile-username'); + } + get logout(): Cypress.Chainable { return cy.get('#nav-logout'); } diff --git a/tests/cypress/tests/api/v1/tv-request.api.spec.ts b/tests/cypress/tests/api/v1/tv-request.api.spec.ts new file mode 100644 index 000000000..526fc40dd --- /dev/null +++ b/tests/cypress/tests/api/v1/tv-request.api.spec.ts @@ -0,0 +1,85 @@ +describe("TV Request V1 API tests", () => { + beforeEach(() => { + cy.login(); + }); + + it("Request All of TV Show (Fear the Walking Dead)", () => { + const request = { + TvDbId: 290853, + RequestAll: true, + }; + + cy.api({ + url: "/api/v1/request/tv", + body: JSON.stringify(request), + method: "POST", + headers: { + Authorization: "Bearer " + window.localStorage.getItem("id_token"), + "Content-Type": "application/json", + }, + }).then((res) => { + expect(res.status).equal(200); + const body = res.body; + expect(body.result).to.be.true; + expect(body.requestId).not.to.be.null; + expect(body.isError).to.be.false; + expect(body.errorMessage).to.be.null; + }); + }); + + it("Request First Season of TV Show (American Horror Story)", () => { + const request = { + TvDbId: 250487, + FirstSeason: true, + }; + + cy.api({ + url: "/api/v1/request/tv", + body: JSON.stringify(request), + method: "POST", + headers: { + Authorization: "Bearer " + window.localStorage.getItem("id_token"), + "Content-Type": "application/json", + }, + }).then((res) => { + expect(res.status).equal(200); + const body = res.body; + expect(body.result).to.be.true; + expect(body.requestId).not.to.be.null; + expect(body.isError).to.be.false; + expect(body.errorMessage).to.be.null; + }); + }); + + it("Request Two Episode of First Season TV Show (The Sopranos)", () => { + const request = { + TvDbId: 75299, + Seasons: [ + { + SeasonNumber: 1, + Episodes: [ + { EpisodeNumber: 1 }, + { EpisodeNumber: 2 }, + ], + }, + ], + }; + + cy.api({ + url: "/api/v1/request/tv", + body: JSON.stringify(request), + method: "POST", + headers: { + Authorization: "Bearer " + window.localStorage.getItem("id_token"), + "Content-Type": "application/json", + }, + }).then((res) => { + expect(res.status).equal(200); + const body = res.body; + expect(body.result).to.be.true; + expect(body.requestId).not.to.be.null; + expect(body.isError).to.be.false; + expect(body.errorMessage).to.be.null; + }); + }); +}); diff --git a/tests/cypress/tests/navigation/navigation-bar.spec.ts b/tests/cypress/tests/navigation/navigation-bar.spec.ts index 01e8d29e4..b633f6db4 100644 --- a/tests/cypress/tests/navigation/navigation-bar.spec.ts +++ b/tests/cypress/tests/navigation/navigation-bar.spec.ts @@ -11,6 +11,7 @@ describe("Navigation Bar Tests", () => { Page.navbar.requests.should("be.visible"); Page.navbar.discover.should("be.visible"); Page.navbar.userPreferences.should("be.visible"); + Page.navbar.username.contains("a"); Page.navbar.logout.should("be.visible"); }); @@ -34,6 +35,7 @@ describe("Navigation Bar Tests", () => { Page.navbar.requests.should("be.visible"); Page.navbar.discover.should("be.visible"); Page.navbar.userPreferences.should("be.visible"); + Page.navbar.username.contains(id); Page.navbar.logout.should("be.visible"); }); }); From b61d53029c434108c173bfbf1fbd4fa3a5f70afe Mon Sep 17 00:00:00 2001 From: tidusjar Date: Fri, 2 Apr 2021 00:08:59 +0100 Subject: [PATCH 8/8] Added mobile tests --- .../discover/discover-responsive.spec.ts | 29 +++++++++++++++++++ 1 file changed, 29 insertions(+) create mode 100644 tests/cypress/tests/discover/discover-responsive.spec.ts diff --git a/tests/cypress/tests/discover/discover-responsive.spec.ts b/tests/cypress/tests/discover/discover-responsive.spec.ts new file mode 100644 index 000000000..de5f6e082 --- /dev/null +++ b/tests/cypress/tests/discover/discover-responsive.spec.ts @@ -0,0 +1,29 @@ +import { discoverPage as Page } from "@/integration/page-objects"; +import { DiscoverType } from "@/integration/page-objects/shared/DiscoverCard"; + +const mobiles = ['samsung-s10', 'iphone-x', 'iphone-xr', 'iphone-8'] + +describe("Discover Responsive Tests", () => { + beforeEach(() => { + cy.login(); + }); + mobiles.forEach((size: any) => { + // make assertions on the logo using + // an array of different viewports + it(`Should display card on ${size} screen`, () => { + window.localStorage.setItem("DiscoverOptions2", "2"); + cy.intercept("GET", "**/search/Movie/Popular/**").as("moviePopular"); + cy.viewport(size); + Page.visit(); + + cy.wait("@moviePopular").then((intecept) => { + const id = intecept.response.body[0].id; + const card = Page.popularCarousel.getCard(id, true, DiscoverType.Popular); + card.title.realHover(); + card.verifyTitle(intecept.response.body[0].title); + }) + }) + }) + + +});