fixes to mobile again

maxkarnold · Oct 12, 2021 · eaeb80f · eaeb80f
1 parent e60213d
commit eaeb80f
Show file tree

Hide file tree

Showing 3 changed files with 94 additions and 17 deletions.
diff --git a/angular.json b/angular.json
@@ -27,7 +27,8 @@
             "tsConfig": "tsconfig.app.json",
             "inlineStyleLanguage": "scss",
             "assets": [
-              "src/assets"
+              "src/assets",
+              "src/assets/img"
             ],
             "styles": [
               "./src/styles.scss",
@@ -100,7 +101,8 @@
             "karmaConfig": "karma.conf.js",
             "inlineStyleLanguage": "scss",
             "assets": [
-              "src/assets"
+              "src/assets",
+              "src/assets/img"
             ],
             "styles": [
               "src/styles.scss",

diff --git a/src/app/components/home/home.component.html b/src/app/components/home/home.component.html
@@ -125,14 +125,17 @@ <h4 class="rules-heading">Squad Rules</h4>
                                 <span *ngIf="box.pitchPlayer !== undefined" class="player-name">{{box.pitchPlayer.displayName}}</span>
                             </div>
 
-                            <!-- <div *cdkDragPreview>
-                                <img class="shirtIcon-img" [src]="shirtIcon" [alt]="">
-                                <div class="player-preview">{{pitchPlayers[23].lastName}} {{pitchPlayers[23].position}} {{pitchPlayers[23].rating}}</div>
-                            </div> -->   
+                            <!-- <div *cdkDragPreview  class="player-box active">
+                                    <img [src]="box.pitchPlayer.playerFace" alt="" class="player-face" *ngIf="box.pitchPlayer !== undefined">
+                                    <span *ngIf="box.pitchPlayer !== undefined" class="pitch-player-info">{{box.pitchPlayer.pitchRating}}</span>
+                                    <span *ngIf="box.pitchPlayer !== undefined" class="pitch-player-info">{{box.pitchPlayer.pitchPosition}}</span>
+                                    <img *ngIf="box.pitchPlayer !== undefined" class="pitch-player-img" [src]="box.pitchPlayer.nationalityLogo">
+                                    <img *ngIf="box.pitchPlayer !== undefined" class="pitch-player-img" [src]="box.pitchPlayer.clubLogo">
+                                    <span *ngIf="box.pitchPlayer !== undefined" class="player-name">{{box.pitchPlayer.displayName}}</span>
+                            </div>    -->
+                            <!-- <div class="player-box active" *cdkDragPlaceholder>Placeholder</div> -->
                         </div>
                         <div [class]="getPosBoxClass(box)">
-                            <!-- {{box.class}} -->
-                            <!-- <div [class]="getPosPlaceholder(box)" *cdkDragPlaceholder>Placeholder</div> -->
                         </div>
                     </div>
                 </div> 

diff --git a/src/app/components/home/home.component.scss b/src/app/components/home/home.component.scss
@@ -440,7 +440,9 @@ h3 {
             justify-items: center;
             align-items: center;
             padding: 0 0.5rem 0;
-
+            @media screen and (max-width: 800px) {
+                // grid-template-columns: repeat(7, 11.5%);
+            }
             .shirtIcon-img {
                 height: 6vh;
                 @media screen and (min-width: 800px) {
@@ -477,6 +479,9 @@ h3 {
     border-radius: 5px;
     justify-content: center;
     align-items: center;
+    @media screen and (max-width: 800px) {
+        width: clamp(2rem, 5vw, 11.5rem);
+    }
 }
 
 .active.player-box { 
@@ -491,8 +496,8 @@ h3 {
     text-align: center;
     cursor: grab;
     @media screen and (max-width: 800px) {
-        height: 15vh;
-        width: clamp(4.25rem, 7.5vw, 10rem);
+        height: 12vh;
+        width: clamp(2.5rem, 7.5vw, 10rem);
     }
     &.diamond {
        background: linear-gradient(45deg, #f3f4ff, #68aeff); 
@@ -547,14 +552,24 @@ h3 {
         }
     @media screen and (max-width: 800px) {
         font-size: 0.6rem;
+        display: flex;
+        flex-flow: column;
+        gap: 1px;
         .player-face {
+            display: none;
             width: 25px;
         }
         .pitch-player-info:first-of-type {
-            font-size: 1rem;
+            font-size: 0.7rem;
         }
         .pitch-player-info {
-            font-size: 0.55rem;
+            font-size: 0.45rem;
+        }
+        .player-name {
+            line-height: normal;
+        }
+        .pitch-player-img {
+            width: 1rem;
         }
     }
     }   
@@ -715,15 +730,15 @@ h3 {
 }
 .green-placeholder {
     border: ridge 2px rgb(0, 255, 0);
-    border-radius: 5px;
+    border-radius: 50% / 10%;
 }
 .yellow-placeholder {
     border: ridge 2px rgb(255, 255, 0);
-    border-radius: 5px;
+    border-radius: 50% / 10%;
 }
 .red-placeholder {
     border: ridge 2px rgb(255, 0, 0);
-    border-radius: 5px;
+    border-radius: 50% / 10%;
 }
 
 .cdk-drag-placeholder.pitch-placeholder {
@@ -732,10 +747,67 @@ h3 {
 
 }
 
-.cdk-drop-list-dragging {
+.cdk-drop-list-dragging, .cdk-drag-dragging {
     cursor: grabbing;
 }
 
+.cdk-drop-list-receiving > div > div {
+        background: #f5f5f5;
+        height: 16.5vh;
+        border-radius: 50% / 10%;
+        display: grid;
+        grid-template-columns: 1fr fit-content(50%);
+        gap: 3.5px 1.5px;
+        align-items: center;
+        justify-items: center;
+        padding: 10px 3.5px;
+        max-height: 10.5rem;
+        color: #353535;
+        .pitch-player-info {  
+            grid-column: 1;
+            font-size: 0.75rem;
+            line-height: normal; 
+            &:first-of-type {
+                font-size: 1.25rem;
+            }
+        }
+        .pitch-player-img {
+            width: clamp(15px, 1.7vw, 30px);
+            grid-column: 1;
+        }
+        .player-name {
+            // font-size: 0.6rem;
+            grid-column: 2;
+            grid-row: 3 / 5;
+
+        }
+        .player-face {
+            grid-column: 2;
+            grid-row: 1 / 3;
+            width: 70%;
+
+        }
+    @media screen and (max-width: 800px) {
+        font-size: 0.5rem;
+        line-height: normal;
+        height: 12vh;
+        width: clamp(2.25rem, 7.5vw, 10rem);
+        display: flex;
+        flex-flow: column;
+        justify-content: space-between;
+        align-items: center;
+        .player-face {
+            display: none;
+        }
+        .pitch-player-img {
+            width: 0.8rem;
+        }
+        .pitch-player-info:first-of-type {
+            font-size: 0.75rem;
+        }
+    }
+}
+
 //  *** ANGULAR MATERIAL classes ***
 // Do not move MATERIAL classes inside other classes