From 2809763dc47229371b04f0d003d6b86751ae482d Mon Sep 17 00:00:00 2001 From: tidusjar Date: Fri, 21 Aug 2020 09:04:27 +0100 Subject: [PATCH] Only apply the grow animation on non-mobile devices --- .../card/discover-card-details.component.scss | 6 -- .../card/discover-card.component.scss | 42 +++++++----- .../social-icons/social-icons.component.scss | 7 -- src/Ombi/ClientApp/src/styles/shared.scss | 67 ++++++++++--------- 4 files changed, 59 insertions(+), 63 deletions(-) diff --git a/src/Ombi/ClientApp/src/app/discover/components/card/discover-card-details.component.scss b/src/Ombi/ClientApp/src/app/discover/components/card/discover-card-details.component.scss index cc903ad99..27079acbf 100644 --- a/src/Ombi/ClientApp/src/app/discover/components/card/discover-card-details.component.scss +++ b/src/Ombi/ClientApp/src/app/discover/components/card/discover-card-details.component.scss @@ -17,13 +17,7 @@ font-weight: bold; } -.grow { - transition: all .2s ease-in-out; -} -.grow:hover { - transform: scale(1.1); -} h3 strong { font-weight: bold; } 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 f55b989f2..cfb8e6494 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,8 +1,9 @@ $ombi-primary:#3f3f3f; $card-background: #2b2b2b; + #cardImage { border-radius: 5px 5px 0px 0px; - height:75%; + height: 75%; } .dark-card { @@ -12,7 +13,7 @@ $card-background: #2b2b2b; // Changed height to 100% to make all cards the same height .card-spacing { margin-top: 10%; - height:100%; + height: 100%; } @@ -34,6 +35,7 @@ $border-width: 3px; .requested { border-bottom: $border-width #ffd740 solid; } + .notrequested { border-bottom: $border-width #303030 solid; } @@ -42,14 +44,17 @@ $border-width: 3px; text-align: center; } -// Changed height to 100% to make all cards the same height -.grow { - transition: all .2s ease-in-out; - height:100%; -} +@media (min-width: 1025px) { -.grow:hover { - transform: scale(1.1); + // Changed height to 100% to make all cards the same height + .grow { + transition: all .2s ease-in-out; + height: 100%; + } + + .grow:hover { + transform: scale(1.1); + } } ::ng-deep mat-dialog-container.mat-dialog-container { @@ -61,21 +66,22 @@ $border-width: 3px; /* Title adjust for the Discover page */ .mat-card-content h6 { - overflow:hidden; - white-space:nowrap; - font-weight:400; - font-size:1.1rem; + overflow: hidden; + white-space: nowrap; + font-weight: 400; + font-size: 1.1rem; } /* Summary adjust for Discover page */ -.small, small { - font-size:0.8rem; +.small, +small { + font-size: 0.8rem; } @media (min-width: 2000px) { #cardImage { - height:80%; - object-fit:cover; - display:block; + height: 80%; + object-fit: cover; + display: block; } } \ No newline at end of file diff --git a/src/Ombi/ClientApp/src/app/media-details/components/shared/social-icons/social-icons.component.scss b/src/Ombi/ClientApp/src/app/media-details/components/shared/social-icons/social-icons.component.scss index 57c6d10ed..866723b93 100644 --- a/src/Ombi/ClientApp/src/app/media-details/components/shared/social-icons/social-icons.component.scss +++ b/src/Ombi/ClientApp/src/app/media-details/components/shared/social-icons/social-icons.component.scss @@ -1,11 +1,4 @@ -.grow-social { - transition: all .2s ease-in-out; -} -.grow-social:hover { - transform: scale(1.1); - color: black; -} .media-icons.plex { color: #feb801 !important; diff --git a/src/Ombi/ClientApp/src/styles/shared.scss b/src/Ombi/ClientApp/src/styles/shared.scss index 7cde62970..f69e146f2 100644 --- a/src/Ombi/ClientApp/src/styles/shared.scss +++ b/src/Ombi/ClientApp/src/styles/shared.scss @@ -20,6 +20,7 @@ .top-space { padding-top: 2%; } + .modal-panel { max-height: 100vh !important; max-width: 100vw !important; @@ -54,7 +55,7 @@ body { /* Scrollbar */ -::-webkit-scrollbar{ +::-webkit-scrollbar { width: 7px; background: #818181; } @@ -64,7 +65,7 @@ body { } // Changed color of the scrollbar -::-webkit-scrollbar-thumb{ +::-webkit-scrollbar-thumb { border-radius: 3px; background: #303030; } @@ -73,13 +74,15 @@ body { display: none; } -.grow { - transition: all .2s ease-in-out; -} +@media (min-width: 1025px) { + .grow { + transition: all .2s ease-in-out; + } -.grow:hover { - transform: scale(1.1); - color: black; + .grow:hover { + transform: scale(1.1); + color: black; + } } table { @@ -91,47 +94,47 @@ table { padding-bottom: 4%; } -::ng-deep .dark .form-control{ - background-color: rgba(0, 0, 0, 0.18); - color:#fff; - border: 1px solid rgba(0, 0, 0, 0.18); +::ng-deep .dark .form-control { + background-color: rgba(0, 0, 0, 0.18); + color: #fff; + border: 1px solid rgba(0, 0, 0, 0.18); } -::ng-deep .dark .nav-link.active{ - color: #303030; - background-color: $accent-dark; - border-color: rgba(0, 0, 0, 0.18); - font-weight:400; +::ng-deep .dark .nav-link.active { + color: #303030; + background-color: $accent-dark; + border-color: rgba(0, 0, 0, 0.18); + font-weight: 400; } -::ng-deep .dark .nav-link{ - color: #fff; - background-color: rgba(0, 0, 0, 0.18); - border-color: rgba(0, 0, 0, 0.18); +::ng-deep .dark .nav-link { + color: #fff; + background-color: rgba(0, 0, 0, 0.18); + border-color: rgba(0, 0, 0, 0.18); } -::ng-deep .dark .ui-autocomplete.ui-autocomplete-multiple .ui-autocomplete-multiple-container .ui-autocomplete-input-token input{ - color:#fff; +::ng-deep .dark .ui-autocomplete.ui-autocomplete-multiple .ui-autocomplete-multiple-container .ui-autocomplete-input-token input { + color: #fff; } -::ng-deep .dark .ui-inputtext{ +::ng-deep .dark .ui-inputtext { background-color: rgba(0, 0, 0, 0.18); - color:#fff; - border: 1px solid rgba(0, 0, 0, 0.18); + color: #fff; + border: 1px solid rgba(0, 0, 0, 0.18); } -::ng-deep .mat-toolbar.mat-primary{ +::ng-deep .mat-toolbar.mat-primary { margin-bottom: 0.5em; } -::ng-deep .dark .mat-form-field.mat-focused .mat-form-field-label{ +::ng-deep .dark .mat-form-field.mat-focused .mat-form-field-label { color: $accent-dark; } -::ng-deep .mat-form-field.mat-focused .mat-form-field-label{ +::ng-deep .mat-form-field.mat-focused .mat-form-field-label { color: $accent; } -::ng-deep .mat-form-field-appearance-outline .mat-form-field-wrapper{ - margin:0.5em; -} +::ng-deep .mat-form-field-appearance-outline .mat-form-field-wrapper { + margin: 0.5em; +} \ No newline at end of file