diff --git a/src/Ombi/ClientApp/src/app/wizard/emby/emby.component.html b/src/Ombi/ClientApp/src/app/wizard/emby/emby.component.html index 9c92f8a86..a84f576c4 100644 --- a/src/Ombi/ClientApp/src/app/wizard/emby/emby.component.html +++ b/src/Ombi/ClientApp/src/app/wizard/emby/emby.component.html @@ -1,31 +1,39 @@ - -
-
-
-
- - - -
+
+
+ +
+
+
+
+
+
+
+ + + +
-
+
- - - -
-
- Enable SSL -
-
- - - - -
-
- Save
+ + + +
+
+ Enable SSL +
+
+ + + + +
+
+ Save
+
+
+
diff --git a/src/Ombi/ClientApp/src/app/wizard/emby/emby.component.ts b/src/Ombi/ClientApp/src/app/wizard/emby/emby.component.ts index f528d8be3..fb0c167a6 100644 --- a/src/Ombi/ClientApp/src/app/wizard/emby/emby.component.ts +++ b/src/Ombi/ClientApp/src/app/wizard/emby/emby.component.ts @@ -8,6 +8,7 @@ import { IEmbySettings } from "../../interfaces"; @Component({ selector: "wizard-emby", templateUrl: "./emby.component.html", + styleUrls: ["../welcome/welcome.component.scss"], }) export class EmbyComponent implements OnInit { diff --git a/src/Ombi/ClientApp/src/app/wizard/jellyfin/jellyfin.component.html b/src/Ombi/ClientApp/src/app/wizard/jellyfin/jellyfin.component.html index f88342c1d..0d4494031 100644 --- a/src/Ombi/ClientApp/src/app/wizard/jellyfin/jellyfin.component.html +++ b/src/Ombi/ClientApp/src/app/wizard/jellyfin/jellyfin.component.html @@ -1,31 +1,39 @@ - -
-
-
-
- - - -
+
+
+ +
+
+
+
+
+
+
+ + + +
-
+
- - - -
-
- Enable SSL -
-
- - - - -
-
- Save
+ + + +
+
+ Enable SSL +
+
+ + + + +
+
+ Save
+
+
+
diff --git a/src/Ombi/ClientApp/src/app/wizard/jellyfin/jellyfin.component.ts b/src/Ombi/ClientApp/src/app/wizard/jellyfin/jellyfin.component.ts index e6b96d0f7..f3779b6be 100644 --- a/src/Ombi/ClientApp/src/app/wizard/jellyfin/jellyfin.component.ts +++ b/src/Ombi/ClientApp/src/app/wizard/jellyfin/jellyfin.component.ts @@ -8,6 +8,7 @@ import { IJellyfinSettings } from "../../interfaces"; @Component({ selector: "wizard-jellyfin", templateUrl: "./jellyfin.component.html", + styleUrls: ["../welcome/welcome.component.scss"] }) export class JellyfinComponent implements OnInit { diff --git a/src/Ombi/ClientApp/src/app/wizard/plex/plex.component.html b/src/Ombi/ClientApp/src/app/wizard/plex/plex.component.html index fd30c08ff..744c3ed15 100644 --- a/src/Ombi/ClientApp/src/app/wizard/plex/plex.component.html +++ b/src/Ombi/ClientApp/src/app/wizard/plex/plex.component.html @@ -1,24 +1,35 @@ -
-
- - - -
-
- - - -
-
-Please note we do not store this information, we only store your Plex Authorization Token that will allow Ombi to view your media and users -
-
- +
+
+
-
-

OR

-
-
- +
+
+
+
+ + + +
+
+ + + +
+
+ Please note we do not store this information, we only store your Plex Authorization Token that will allow Ombi to view your media and users +
+
+
+ +
+
+

OR

+
+
+ +
+
+
+
diff --git a/src/Ombi/ClientApp/src/app/wizard/plex/plex.component.ts b/src/Ombi/ClientApp/src/app/wizard/plex/plex.component.ts index e469ddc00..03c8cfa9a 100644 --- a/src/Ombi/ClientApp/src/app/wizard/plex/plex.component.ts +++ b/src/Ombi/ClientApp/src/app/wizard/plex/plex.component.ts @@ -9,6 +9,7 @@ import { StorageService } from "../../shared/storage/storage-service"; @Component({ selector: "wizard-plex", templateUrl: "./plex.component.html", + styleUrls: ["../welcome/welcome.component.scss"], }) export class PlexComponent implements OnInit, OnDestroy { diff --git a/src/Ombi/ClientApp/src/app/wizard/welcome/welcome.component.html b/src/Ombi/ClientApp/src/app/wizard/welcome/welcome.component.html index 75ddda7e9..b3c016d95 100644 --- a/src/Ombi/ClientApp/src/app/wizard/welcome/welcome.component.html +++ b/src/Ombi/ClientApp/src/app/wizard/welcome/welcome.component.html @@ -11,11 +11,16 @@
-

Welcome to Ombi, this wizard will quickly take you through the inital setup!

-
+

Welcome to Ombi!

+

This wizard will quickly take you through the inital setup!

If you encounter any problems you can find help on the following platforms:

+
@@ -27,48 +32,35 @@ -
- Plex - -
- - -
-
- - - -
- Emby - -
- - -
-
- - - -
- Jellyfin - -
- - -
-
- - - -
- Create a local admin - -
- - -
-
- +
+ Media Server + + + + + +
+ + +
+ Create a local admin + +
+ + +
+
+ + +
+ Ombi config + +
+ + +
+
+ Done diff --git a/src/Ombi/ClientApp/src/app/wizard/welcome/welcome.component.scss b/src/Ombi/ClientApp/src/app/wizard/welcome/welcome.component.scss index e89b9697b..18395a696 100644 --- a/src/Ombi/ClientApp/src/app/wizard/welcome/welcome.component.scss +++ b/src/Ombi/ClientApp/src/app/wizard/welcome/welcome.component.scss @@ -18,13 +18,19 @@ min-height: 300px; } -.welcome-container .left-container{ - width:20%; - //border: 1px solid $ombi-background-primary; +.left-container{ + width:30%; } -.welcome-container .right-container{ +.right-container{ width:70%; +} + +.right-container-content{ + width:100%; +} + +.welcome-container .right-container{ display:flex; align-items: center; justify-content: center; @@ -34,14 +40,87 @@ float:right; } -.fab { +.fab:before { font-family: 'Font Awesome 5 Brands'; - font-size: 28px !important; - padding: 5px; - margin-bottom: 5px; - border: 1px solid; } -.fa-discord:before { - content: "\f392"; +.social-media .fab{ + font-family: Roboto, "Helvetica Neue", sans-serif; +} + +.fas:before { + font-family:"Font Awesome 5 Free"; + font-weight:800; } + +.social-media .fas{ + font-family: Roboto, "Helvetica Neue", sans-serif; + font-weight:400; +} + +.social-media a{ + color: #FFF; +} + +.social-media{ + display:grid; +} + +.fa-ul { + list-style-type: none; + margin-left: 2.5em; + padding-left: 0; +} + +.fa-li { + left: -2em; + position: absolute; + text-align: center; + width: 2em; + line-height: inherit; +} + +.social-media ul li{ + font-size:16px; + padding:5px; +} + + +.left-container.mediaserver img{ + object-fit: contain; + width: 100%; +} + +.left-container.mediaserver{ + display:flex; + justify-content: center; + height:300px; + padding:20px; +} + +.right-container.mediaserver{ + display:flex; + justify-content: center; + align-items:center; +} + +.right-container-content .mediaserver{ + display:block; +} + +.mediaserver-container{ + display:flex; + height:100%; + width:100%; +} + +.plex-buttons{ + display:flex; + justify-content: center; + align-items: center; +} + +p.space-or{ + padding:20px; + margin-top:20px; +} \ No newline at end of file diff --git a/src/Ombi/ClientApp/src/styles/Styles.scss b/src/Ombi/ClientApp/src/styles/Styles.scss index 48f300690..711a8878a 100644 --- a/src/Ombi/ClientApp/src/styles/Styles.scss +++ b/src/Ombi/ClientApp/src/styles/Styles.scss @@ -132,3 +132,7 @@ background-color:$ombi-active; color: $ombi-active-text; } + + .mat-tab-group.mat-primary .mat-ink-bar, .mat-tab-nav-bar.mat-primary .mat-ink-bar{ + background-color: $ombi-active; + }