Merge branch 'fix-character-sheet-header' into 'dev'

Fix character sheet header

See merge request teaml5r/l5r5e!27

system/styles/scss/sheets.scss

@@ -23,7 +23,6 @@
     }
     &.actor {
         .sheet-header {
-            height: 26rem;
             h1 {
                 flex: auto;
                 margin: 0 0 0.25rem 0.5rem;
@@ -158,13 +157,9 @@
             }
         }
         .header-fields {
-            position: relative;
-            flex: 0 0 100%;
             h2 {
                 font-family: $font-secondary;
                 font-size: 1rem;
-                float: left;
-                width: 30%;
                 padding: 0.25rem 0.25rem 0;
                 margin: 1rem 20% 0 0;
                 text-align: center;
@@ -265,18 +260,22 @@
                 }
             }
         }
-        .rings {
-            float: left;
+        .mid-wrapper {
+            display: flex;
+        }
+        .side-col {
+            width: 30%;
+        }
+        .central-col {
             width: 40%;
+        }
+        .rings {
             padding: 0;
-            position: relative;
-            top: -1.5rem;
+            margin-top: 1rem;
         }
         .social-content,
         .attributes-wrapper {
             flex: none;
-            float: left;
-            width: 30%;
             flex-wrap: wrap;
             display: flex;
             padding: 0.5rem 0 0 0.25rem;

system/templates/actors/character-sheet.html

@@ -7,27 +7,32 @@
     </div>
     {{!-- Sheet Header --}}
     <header class="sheet-header">
-        <img class="profile-img dragndrop-actor-uuid pointer" src="{{data.img}}" {{#if data.editable_not_soft_locked}}data-edit="img"{{/if}} data-actor-uuid="{{actor.uuid}}" draggable="true" title="{{data.name}}" />
+        <img class="profile-img dragndrop-actor-uuid pointer" src="{{data.img}}" {{#if
+        data.editable_not_soft_locked}}data-edit="img" {{/if}} data-actor-uuid="{{actor.uuid}}" draggable="true"
+        title="{{data.name}}" />
         <div class="header-fields identity-wrapper">
             <h1 class="charname">
-                <input name="name" type="text" value="{{data.name}}" placeholder="Name" {{^if data.editable_not_soft_locked}}disabled{{/if}}/>
+                <input name="name" type="text" value="{{data.name}}" placeholder="Name" {{^if
+                data.editable_not_soft_locked}}disabled{{/if}} />
             </h1>
             {{> 'systems/l5r5e/templates/actors/character/identity.html'}}
         </div>
-        <div class="header-fields">
+        <div class="header-fields mid-wrapper">
+            <div class="side-col">
                 <h2>{{localize 'l5r5e.social.title'}}</h2>
-            <h2 class="right">{{localize 'l5r5e.attributes.title'}}</h2>
                 {{> 'systems/l5r5e/templates/actors/character/social.html'}}
-            {{> 'systems/l5r5e/templates/actors/character/rings.html'}}
+            </div>
+            <div class="central-col">{{> 'systems/l5r5e/templates/actors/character/rings.html'}}</div>
+            <div class="side-col">
+                <h2 class="right">{{localize 'l5r5e.attributes.title'}}</h2>
                 {{> 'systems/l5r5e/templates/actors/character/attributes.html'}}
             </div>
+        </div>
     </header>
     {{!-- Sheet Body --}}
     <section class="sheet-body">
-        {{!-- Active effects --}}
-        {{> 'systems/l5r5e/templates/actors/character/effects.html'}}
-
-        {{!-- Sheet Tab Navigation --}}
+        {{!-- Active effects --}} {{> 'systems/l5r5e/templates/actors/character/effects.html'}} {{!-- Sheet Tab
+        Navigation --}}
         <nav class="sheet-tabs tabs" data-group="primary">
             <a class="item" data-tab="skills">{{localize 'l5r5e.skills.title'}}</a>
             <a class="item" data-tab="narrative">{{localize 'l5r5e.sheets.narrative'}}</a>
@@ -39,8 +44,8 @@
         {{!-- Skills Tab --}}
         <article class="tab skills" data-group="primary" data-tab="skills">
             <ul class="skills-wrapper">
-                {{#each data.system.skills as |category id|}}
-                    {{> 'systems/l5r5e/templates/actors/character/category.html' category=category categoryId=id data=../data}}
+                {{#each data.system.skills as |category id|}} {{>
+                'systems/l5r5e/templates/actors/character/category.html' category=category categoryId=id data=../data}}
                 {{/each}}
             </ul>
             {{> 'systems/l5r5e/templates/actors/character/techniques.html'}}

system/templates/actors/npc-sheet.html

@@ -8,27 +8,31 @@
     {{!-- Sheet Header --}}
     <header class="sheet-header">
         <div class="header-fields identity-wrapper">
-            <img class="profile-img dragndrop-actor-uuid pointer" src="{{data.img}}" {{#if data.editable_not_soft_locked}}data-edit="img"{{/if}} data-actor-uuid="{{actor.uuid}}" draggable="true" title="{{data.name}}"/>
-            <h1 class="charname"><input name="name" type="text" value="{{data.name}}" placeholder="Name" {{^if data.editable_not_soft_locked}}disabled{{/if}}/></h1>
+            <img class="profile-img dragndrop-actor-uuid pointer" src="{{data.img}}" {{#if
+            data.editable_not_soft_locked}}data-edit="img" {{/if}} data-actor-uuid="{{actor.uuid}}" draggable="true"
+            title="{{data.name}}" />
+            <h1 class="charname">
+                <input name="name" type="text" value="{{data.name}}" placeholder="Name" {{^if
+                data.editable_not_soft_locked}}disabled{{/if}} />
+            </h1>
             {{> 'systems/l5r5e/templates/actors/npc/identity.html'}}
         </div>
-        <div class="header-fields">
+        <div class="header-fields mid-wrapper">
+            <div class="side-col">
                 <h2>{{localize 'l5r5e.social.title'}}</h2>
-            <h2 class="right">{{localize 'l5r5e.attributes.title'}}</h2>
                 {{> 'systems/l5r5e/templates/actors/npc/social.html'}}
-            {{> 'systems/l5r5e/templates/actors/npc/rings.html'}}
+            </div>
+            <div class="central-col">{{> 'systems/l5r5e/templates/actors/npc/rings.html'}}</div>
+            <div class="side-col">
+                <h2 class="right">{{localize 'l5r5e.attributes.title'}}</h2>
                 {{> 'systems/l5r5e/templates/actors/npc/attributes.html'}}
             </div>
+        </div>
     </header>
     {{!-- Sheet Body --}}
     <section class="sheet-body">
-        {{!-- Active effects --}}
-		{{> 'systems/l5r5e/templates/actors/npc/effects.html'}}
-
-        {{!-- Skills No Tab --}}
-        {{> 'systems/l5r5e/templates/actors/npc/skill.html'}}
-
-        {{!-- Sheet Tab Navigation --}}
+        {{!-- Active effects --}} {{> 'systems/l5r5e/templates/actors/npc/effects.html'}} {{!-- Skills No Tab --}} {{>
+        'systems/l5r5e/templates/actors/npc/skill.html'}} {{!-- Sheet Tab Navigation --}}
         <nav class="sheet-tabs tabs" data-group="primary">
             <a class="item" data-tab="skills">{{localize 'l5r5e.skills.title'}}</a>
             <a class="item" data-tab="narrative">{{localize 'l5r5e.sheets.narrative'}}</a>
@@ -48,9 +52,9 @@
 
         {{!-- Conflict Tab --}}
         <article class="tab conflict" data-group="primary" data-tab="conflict">
-            {{> 'systems/l5r5e/templates/actors/npc/conflict.html'}}
-            {{> 'systems/l5r5e/templates/items/weapon/weapons.html'}}
-            {{> 'systems/l5r5e/templates/items/armor/armors.html'}}
+            {{> 'systems/l5r5e/templates/actors/npc/conflict.html'}} {{>
+            'systems/l5r5e/templates/items/weapon/weapons.html'}} {{>
+            'systems/l5r5e/templates/items/armor/armors.html'}}
         </article>
 
         {{!-- Inventory Tab --}}