Merge pull request #1528 from BitLucid/feat/fight-rounding

Fix up next attack media query width.
BitLucid · Sep 24, 2023 · f1c49c2 · f1c49c2
2 parents 6e62769 + 9408e64
commit f1c49c2
Show file tree

Hide file tree

Showing 2 changed files with 69 additions and 39 deletions.
diff --git 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
@@ -186,7 +186,7 @@ pre {
  */
 
 q {
-    quotes: '\201C' '\201D' '\2018' '\2019';
+    quotes: '\201C''\201D''\2018''\2019';
 }
 
 /**
@@ -1464,11 +1464,21 @@ 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;
-    padding: 2rem;
+    margin: 0.1rem 0.5rem 1rem;
+    padding: 0.5rem;
+    width: 100%;
 }
 
-.ninja-card h2 {
+/* @media (min-width: 769px) {
+    .ninja-card {
+        width: 45%;
+        margin: 0.1rem auto 1rem;
+        padding: 2rem;
+    }
+} */
+
+
+*/ .ninja-card h2 {
     width: inherit;
     min-width: 70%;
 }
@@ -4985,11 +4995,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,
@@ -5240,8 +5250,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 +5340,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 +5366,6 @@ input[type='button'].btn-block {
         padding: 0.3em 0.7em;
     }
 
-    .ninja-card {
-        width: 60%;
-    }
-
     #request-login {
         width: inherit;
     }
@@ -5383,4 +5388,12 @@ 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%;
+        margin: 0.1rem auto 1rem;
+    }
 }