From 6627a59df3e1e37c21bdaf959ba98dbc062b237f Mon Sep 17 00:00:00 2001 From: ZainGS Date: Sat, 13 Apr 2024 01:59:50 -0500 Subject: [PATCH] Fixed transparent images covering mobile buttons & dialog popup responsiveness --- ClientApp/src/app/home/home.component.html | 4 +- ClientApp/src/app/home/home.component.scss | 135 +++++++++------- .../lockin-dialog.component.html | 86 ++++++---- .../lockin-dialog.component.scss | 152 +++++++++++++++++- 4 files changed, 283 insertions(+), 94 deletions(-) diff --git a/ClientApp/src/app/home/home.component.html b/ClientApp/src/app/home/home.component.html index d6eae63..d82845b 100644 --- a/ClientApp/src/app/home/home.component.html +++ b/ClientApp/src/app/home/home.component.html @@ -502,8 +502,8 @@
SELECT YOUR LOADOUT
-
- +
+ +
+ +
+
-

- Faceplate icon - {{faceplateData!.name}} - {{faceplateData!.partColor}} -

+
+

+ Faceplate icon + {{faceplateData!.name}} - {{faceplateData!.partColor}} +

+
- - +
+ +
+ +
+
-

- Faceplate icon - {{leftThumbstickData!.name}} - {{leftThumbstickData!.partColor}} -

+
+

+ Faceplate icon + {{leftThumbstickData!.name}} - {{leftThumbstickData!.partColor}} +

+
- - +
+ + +
-

- Faceplate icon - {{rightThumbstickData!.name}} - {{rightThumbstickData!.partColor}} -

+
+

+ Faceplate icon + {{rightThumbstickData!.name}} - {{rightThumbstickData!.partColor}} +

+
- - +
+ + +
-

- Faceplate icon - {{dpadData!.name}} - {{dpadData!.partColor}} -

+
+

+ Faceplate icon + {{dpadData!.name}} - {{dpadData!.partColor}} +

+
- - +
+ + +
diff --git a/ClientApp/src/app/home/lockin-dialog/lockin-dialog.component.scss b/ClientApp/src/app/home/lockin-dialog/lockin-dialog.component.scss index 7f96498..6ca4372 100644 --- a/ClientApp/src/app/home/lockin-dialog/lockin-dialog.component.scss +++ b/ClientApp/src/app/home/lockin-dialog/lockin-dialog.component.scss @@ -15,6 +15,49 @@ h4 { width:fit-content; } +.header-bar { + background-color: rgba(255,255,255,.2); + border-radius: 10px 10px 0px 0px; + padding: 5px 5px 1px 5px; + margin-bottom: -12px !important; +} + +hr { + border: none !important; + height: 2px !important; + background-color: white !important; +} + +/// Keep image and link in line +.part-container { + display: flex; + align-items: center; + justify-content: space-between; /* Puts space between the image and the button */ + flex-wrap: nowrap; +} + +.right-align { + margin-left: auto; /* Pushes the right-align div to the right */ +} + +.part-image { + width: auto; /* Default width is automatic */ + max-width: 200px; /* Ensures image does not exceed 200px */ + height: auto; /* Maintains aspect ratio */ + flex-shrink: 1; /* Allows the image to shrink if necessary */ +} + +.view-button { + white-space: nowrap; /* Prevents text inside the button from wrapping */ + margin-top: -50px; +} + +a { + text-decoration: none; /* Optional: Removes underline from links */ + color: inherit; /* Optional: Ensures link color matches the surrounding text */ +} +/// + h1 { font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif !important; text-align: center; @@ -31,7 +74,6 @@ button { background-color: transparent; text-shadow: 4px 4px 2px rgba(255, 0, 157, 1); float: inline-end; - margin-top: 15px; font-size: 32px; color: white; border: none; @@ -92,3 +134,111 @@ button { } +@media (max-width: 650px) { + .header-bar h4 { + font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif; + font-size: 20px; + width: fit-content; + text-align: center; + } + + .view-button { + font-size: 26px; + margin-right: 10px; + } +} + +@media (max-width: 580px) { + .header-bar h4 { + font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif; + font-size: 20px; + width: fit-content; + text-align: center; + } + + .part-container img { + transform: scale(.8); + } + + .view-button { + font-size: 22px; + margin-right:20px; + } +} + +@media (max-width: 540px) { + .header-bar h4 { + font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif; + font-size: 20px; + width: fit-content; + text-align: center; + } + + .part-container img { + transform: scale(.6); + margin-left: -20px !important; + } + + .view-button { + font-size: 18px; + margin-left: -30px; + } +} + +@media (max-width: 500px) { + .header-bar h4 { + font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif; + font-size: 20px; + width: fit-content; + text-align: center; + } + + .part-container img { + transform: scale(.6); + margin-left: -30px !important; + } + + .view-button { + font-size: 18px; + margin-left: -40px; + } +} + +@media (max-width: 472px) { + .header-bar h4 { + font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif; + font-size: 20px; + width: fit-content; + text-align: center; + } + + .part-container img { + transform: scale(.6); + margin-left: -60px !important; + } + + .view-button { + font-size: 16px; + margin-left: -50px; + } +} + +@media (max-width: 472px) { + .header-bar h4 { + font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif; + font-size: 20px; + width: fit-content; + text-align: center; + } + + .part-container img { + transform: scale(.5) !important; + margin-left: -60px !important; + } + + .view-button { + font-size: 16px; + margin-left: -50px; + } +} +