Implement proper gear scrolling

patrys · Jun 24, 2020 · 473fed8 · 473fed8
1 parent 00fae20
commit 473fed8
Show file tree

Hide file tree

Showing 3 changed files with 79 additions and 47 deletions.
diff --git a/model/tab/gear.html b/model/tab/gear.html
@@ -12,35 +12,37 @@
             </div>
         </div>
     </div>
-    <div class="gears border grow">
+    <div class="gears item-list border grow">
         <h1>{{localize "HEADER.GEAR"}}</h1>
-        <div class="header flex grow row">
+        <div class="header flex row">
             <b class="name">{{localize "GEAR.NAME"}}</b>
             <b class="bonus">{{localize "GEAR.BONUS"}}</b>
             <b class="weight">{{localize "GEAR.WEIGHT"}}</b>
             <a class="button item-create" title="Add Gear" data-type="gear"><i class="fas fa-plus"></i></a>
         </div>
-        {{#each actor.items as |item|}}
-        <div class="gear item flex row" data-item-id="{{item._id}}">
-            <div class="name">
-                <div class="image" style="background-image: url('{{item.img}}')"></div>
-                <a class="name">{{item.name}}</a>
-            </div>
-            <div class="bonus">
-                {{#skulls item.data.bonus.value item.data.bonus.max}}
-                <a class="skull {{#if @damaged}}damaged{{/if}}" data-key="data.bonus.value" data-item-id="{{item._id}}"
-                    data-value="{{@value}}">
-                    <i class="fas fa-skull"></i>
-                </a>
-                {{/skulls}}
-            </div>
-            <div class="weight">{{item.data.weight}}</div>
-            <div class="button">
-                <a class="item-control item-edit" title="Edit Item"><i class="fas fa-edit"></i></a>
-                <a class="item-control item-delete" title="Delete Item"><i class="fas fa-trash"></i></a>
+        <div class="items">
+            {{#each actor.items as |item|}}
+            <div class="gear item flex row" data-item-id="{{item._id}}">
+                <div class="name">
+                    <div class="image" style="background-image: url('{{item.img}}')"></div>
+                    <a class="name">{{item.name}}</a>
+                </div>
+                <div class="bonus">
+                    {{#skulls item.data.bonus.value item.data.bonus.max}}
+                    <a class="skull {{#if @damaged}}damaged{{/if}}" data-key="data.bonus.value"
+                        data-item-id="{{item._id}}" data-value="{{@value}}">
+                        <i class="fas fa-skull"></i>
+                    </a>
+                    {{/skulls}}
+                </div>
+                <div class="weight">{{item.data.weight}}</div>
+                <div class="button">
+                    <a class="item-control item-edit" title="Edit Item"><i class="fas fa-edit"></i></a>
+                    <a class="item-control item-delete" title="Delete Item"><i class="fas fa-trash"></i></a>
+                </div>
             </div>
+            {{/each}}
         </div>
-        {{/each}}
     </div>
     <div class="consumables">
         {{#each actor.data.consumable as |consumable key|}}

diff --git a/style/common.css b/style/common.css
@@ -143,8 +143,59 @@
   text-shadow: 0 0 8px red;
 }
 
+.forbidden-lands .item-list {
+  display: flex;
+  flex-direction: column;
+  min-height: 0;
+}
+.forbidden-lands .item-list .header {
+  border-bottom: 2px solid var(--color-border);
+  font-size: smaller;
+  font-weight: bold;
+  margin: 0 8px;
+  padding: 4px 8px;
+  text-transform: uppercase;
+  width: calc(100% - 16px);
+}
+.forbidden-lands .item-list .items {
+  overflow-y: scroll;
+  width: 100%;
+}
+.forbidden-lands .item-list .items .item {
+  padding: 1px 8px;
+  border-bottom: 1px solid var(--color-border);
+}
+.forbidden-lands .item-list .items .item:last-child {
+  border-bottom: 0 none;
+}
+.forbidden-lands .item-list .items .item:nth-child(odd) {
+  background-color: var(--color-secondary);
+}
+.forbidden-lands .item-list .items .item .secondary {
+  color: var(--color-secondary);
+}
+.forbidden-lands .item-list .items .item:nth-child(odd) .secondary {
+  color: var(--color-background);
+}
+
 .forbidden-lands.sheet .window-content {
   background: var(--color-background);
   color: var(--color-foreground);
-  overflow-y: scroll;
-}
+}
+
+.forbidden-lands.sheet .window-content form {
+  /* Force scrolling within the window */
+  min-height: 0;
+}
+
+/* Scrollbars */
+.app.window-app.sheet.forbidden-lands.actor ::-webkit-scrollbar {
+  width: 6px;
+}
+.app.window-app.sheet.forbidden-lands.actor ::-webkit-scrollbar-thumb {
+  background: var(--color-secondary);
+  border: 0 none;
+}
+.app.window-app.sheet.forbidden-lands.actor ::-webkit-scrollbar-track {
+  box-shadow: none;
+}
diff --git a/style/tab/gear.css b/style/tab/gear.css
@@ -42,39 +42,18 @@
 
 .forbidden-lands .character .gears {
   margin-top: 8px;
-  max-height: 100%;
-  overflow-y: scroll;
+  padding-bottom: 8px;
 }
 
-.forbidden-lands .character .gears .header {
-  border-bottom: 2px solid var(--color-border);
-  font-size: smaller;
-  font-weight: bold;
-  padding: 4px 8px;
-  text-transform: uppercase;
-}
-
-.forbidden-lands .character .gears {
-  align-items: center;
-  padding: 0 8px 8px;
+.forbidden-lands .character .gears .items {
+  padding: 0 2px 0 8px;
 }
 
 .forbidden-lands .character .gears .name {
   flex-basis: 55%;
   display: flex;
 }
 
-.forbidden-lands .character .gears .gear.item {
-  border-bottom: 1px solid var(--color-border);
-  padding: 1px 8px;
-}
-.forbidden-lands .character .gears .gear.item:last-child {
-  border-bottom: 0 none;
-}
-.forbidden-lands .character .gears .gear.item:nth-child(even) {
-  background-color: #d1d2d4;
-}
-
 .forbidden-lands .character .gears .gear.item .name .image {
   background-size: 32px;
   background-repeat: no-repeat;