From c6a094a8d0256ca9331697a0f16b0507a6de2276 Mon Sep 17 00:00:00 2001
From: Roy Ronalds <tchalvakspam@gmail.com>
Date: Tue, 19 Sep 2023 17:56:10 -0400
Subject: [PATCH 1/3] Fix up next attack media query width.

---
 deploy/templates/enemies.attack-next.tpl | 69 +++++++++++++++---------
 deploy/www/css/style.css                 | 28 ++++++----
 2 files changed, 62 insertions(+), 35 deletions(-)

diff --git a/deploy/templates/enemies.attack-next.tpl b/deploy/templates/enemies.attack-next.tpl
index 23e72b5d4..4cd50ec4e 100644
--- a/deploy/templates/enemies.attack-next.tpl
+++ b/deploy/templates/enemies.attack-next.tpl
@@ -5,6 +5,21 @@ var enemy = 'enemy to array @json_encode'
 *}
 {* $smarty->register->templateClass('foo','name\name2\myclass'); *}
 <style>
+.ninja-area{
+    width: 100%;
+    background:none;
+    text-align:center;
+}
+/* @media (min-width: 768px) {
+    .ninja-area {
+        display: inline-block;
+        margin: auto;
+        width: 94%;
+        background: rgba(43, 33, 33, 20%);
+        padding: 1rem 0 1rem 0;
+        margin-bottom: 5rem;
+    }
+} */
 .attack-next {
     margin: 1rem 2rem;
     display:grid;
@@ -100,34 +115,36 @@ var enemy = 'enemy to array @json_encode'
         </div>
         <div class='main'>
             {* Display the ninja *}
-            <div class='ninja-area ninja-card'>
-                {if $char && $char->isAdmin()}
-                    <a class='view-link' href='/player?player_id={$enemy->id()|escape}'><button title="View the ninja's full details" class='btn btn-vital'><i class='fa fa-eye'></i></button></a>
-                {/if}
-                <h2>{$enemy->name()|escape}</h2>
-                <div class='avatar'>
-                    {include file="gravatar.tpl" gurl=$enemy->avatarUrl()}
-                </div>
-                <span class='player-class class-name {$enemy->theme|escape}'>
-                    <span class="svg-shuriken">
-                    {include file="shuriken.svg.tpl"}
+            <div class='ninja-area'>
+                <div class='ninja-card'>
+                    {if $char && $char->isAdmin()}
+                        <a class='view-link' href='/player?player_id={$enemy->id()|escape}'><button title="View the ninja's full details" class='btn btn-vital'><i class='fa fa-eye'></i></button></a>
+                    {/if}
+                    <h2>{$enemy->name()|escape}</h2>
+                    <div class='avatar'>
+                        {include file="gravatar.tpl" gurl=$enemy->avatarUrl()}
+                    </div>
+                    <span class='player-class class-name {$enemy->theme|escape}'>
+                        <span class="svg-shuriken">
+                        {include file="shuriken.svg.tpl"}
+                        </span>
+                        {$enemy->class_name|escape}
+                    </span><!-- no space 
+                    --><span class='player-level-category {$enemy->level|level_label|css_classify}'>
+                        {$enemy->level|level_label} [{$enemy->level|escape}]
+                    </span>
+                    <span class='health-bar-container'>
+                        {include file="health_bar.tpl" health=$enemy->health level=$enemy->level}
                     </span>
-                    {$enemy->class_name|escape}
-                </span><!-- no space 
-                --><span class='player-level-category {$enemy->level|level_label|css_classify}'>
-                    {$enemy->level|level_label} [{$enemy->level|escape}]
-                </span>
-                <span class='health-bar-container'>
-                    {include file="health_bar.tpl" health=$enemy->health level=$enemy->level}
-                </span>
-                <div class='c-box'>
-                    {include file="status_section.tpl" statuses=\NinjaWars\core\data\Player::getStatusList($enemy->id())}
+                    <div class='c-box'>
+                        {include file="status_section.tpl" statuses=\NinjaWars\core\data\Player::getStatusList($enemy->id())}
+                    </div>
+                    {if $enemy->description}
+                    <blockquote>
+                    {$enemy->name()|escape} {$enemy->description|escape}
+                    </blockquote>
+                    {/if}
                 </div>
-                {if $enemy->description}
-                <blockquote>
-                {$enemy->name()|escape} {$enemy->description|escape}
-                </blockquote>
-                {/if}
             </div>
             <div class='attack-area'>
                 <div class='glassbox duel-area'>
diff --git a/deploy/www/css/style.css b/deploy/www/css/style.css
index 714659af4..a7bf70e19 100644
--- a/deploy/www/css/style.css
+++ b/deploy/www/css/style.css
@@ -1465,9 +1465,17 @@ td.playerTable {
     /* Width of ninja-card made breakpoint responsive in certain screens */
     font-family: 'Open Sans', 'Arial', sans-serif;
     margin: 0.1rem auto 1rem;
-    padding: 2rem;
+    padding: 0.5rem;
 }
-
+    
+/* @media (min-width: 768px) {
+    .ninja-card {
+        width: 45%;
+        margin: 0.1rem auto 1rem;
+        padding: 2rem; 
+    }
+}
+*/
 .ninja-card h2 {
     width: inherit;
     min-width: 70%;
@@ -5240,8 +5248,7 @@ input[type='button'].btn-block {
  */
 
 /* Grade-A Mobile Browsers (Opera Mobile, Mobile Safari, Android Chrome) */
-@media screen and (max-device-width: 480px),
-(max-device-width: 854px) {
+@media (max-device-width: 480px) and (max-device-width: 854px) {
 
     html,
     body {
@@ -5331,7 +5338,7 @@ input[type='button'].btn-block {
 }
 
 /* Medium and Large screen modifications */
-@media screen and (min-width: 800px) {
+@media (min-width: 801px) {
 
     div.description,
     p.description {
@@ -5357,10 +5364,6 @@ input[type='button'].btn-block {
         padding: 0.3em 0.7em;
     }
 
-    .ninja-card {
-        width: 60%;
-    }
-
     #request-login {
         width: inherit;
     }
@@ -5383,4 +5386,11 @@ input[type='button'].btn-block {
     .list-all-players-search .input-group {
         max-width: 50%;
     }
+}
+
+/* Large screen modifications */
+@media (min-width: 961px) {
+    .ninja-card {
+        width: 60%;
+    }
 }
\ No newline at end of file

From dcb4803f2d48bad65300ded84885496e9edbe97b Mon Sep 17 00:00:00 2001
From: Roy Ronalds <tchalvakspam@gmail.com>
Date: Sun, 24 Sep 2023 18:28:23 -0400
Subject: [PATCH 2/3] Minor reformatting of css via formatter.

---
 deploy/www/css/style.css | 19 ++++++++++---------
 1 file changed, 10 insertions(+), 9 deletions(-)

diff --git a/deploy/www/css/style.css b/deploy/www/css/style.css
index a7bf70e19..0c1d3d1a2 100644
--- a/deploy/www/css/style.css
+++ b/deploy/www/css/style.css
@@ -186,7 +186,7 @@ pre {
  */
 
 q {
-    quotes: '\201C' '\201D' '\2018' '\2019';
+    quotes: '\201C''\201D''\2018''\2019';
 }
 
 /**
@@ -1467,16 +1467,17 @@ td.playerTable {
     margin: 0.1rem auto 1rem;
     padding: 0.5rem;
 }
-    
-/* @media (min-width: 768px) {
+
+/* @media (min-width: 769px) {
     .ninja-card {
         width: 45%;
         margin: 0.1rem auto 1rem;
-        padding: 2rem; 
+        padding: 2rem;
     }
-}
-*/
-.ninja-card h2 {
+} */
+
+
+*/ .ninja-card h2 {
     width: inherit;
     min-width: 70%;
 }
@@ -4993,11 +4994,11 @@ input[type='button'].btn-block {
     }
 
     a[href]:after {
-        content: ' (' attr(href) ')';
+        content: ' ('attr(href) ')';
     }
 
     abbr[title]:after {
-        content: ' (' attr(title) ')';
+        content: ' ('attr(title) ')';
     }
 
     .ir a:after,

From 9408e6427dfa606bffcfcdbba1c401b6132d8b88 Mon Sep 17 00:00:00 2001
From: Roy Ronalds <tchalvakspam@gmail.com>
Date: Sun, 24 Sep 2023 18:29:21 -0400
Subject: [PATCH 3/3] Better width for characters in fight page.

---
 deploy/www/css/style.css | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/deploy/www/css/style.css b/deploy/www/css/style.css
index 0c1d3d1a2..de8247bc2 100644
--- a/deploy/www/css/style.css
+++ b/deploy/www/css/style.css
@@ -1464,8 +1464,9 @@ td.playerTable {
     display: inline-block;
     /* Width of ninja-card made breakpoint responsive in certain screens */
     font-family: 'Open Sans', 'Arial', sans-serif;
-    margin: 0.1rem auto 1rem;
+    margin: 0.1rem 0.5rem 1rem;
     padding: 0.5rem;
+    width: 100%;
 }
 
 /* @media (min-width: 769px) {
@@ -5393,5 +5394,6 @@ input[type='button'].btn-block {
 @media (min-width: 961px) {
     .ninja-card {
         width: 60%;
+        margin: 0.1rem auto 1rem;
     }
 }
\ No newline at end of file