Better level alignment

src/components/Spellitem.vue

@@ -1,6 +1,9 @@
 <template>
-  <tr>
+  <tr class="spell">
-    <td colspan="3" class="spell">
+    <td class="spell-level">
+      {{level}}
+    </td>
+    <td colspan="2" class="spell-label">
       <q-collapsible
         group="spells"
         :label="label"
@@ -19,7 +22,7 @@ export default {
       return this.spell.level.toLowerCase() === 'cantrip' ? '0' : this.spell.level.charAt(0)
     },
     label () {
-      return this.level + this.schoolCapitalized + '\n' + this.spell.name
+      return this.schoolCapitalized + '\n' + this.spell.name
     },
     schoolCapitalized () {
       return this.spell.school.charAt(0).toUpperCase() + this.spell.school.slice(1)
@@ -32,15 +35,15 @@ export default {
 </script>
 
 <style lang="stylus">
-  .spell .item-content
+  .spell
-    position: relative
+    .item-content
-  .spell .item-content > *
+        position: relative
-    white-space: pre-line !important
+        & > *
-    overflow: visible !important
+          white-space: pre-line !important
-    line-height: 0
+          overflow: visible !important
-    padding-top: .5em
+          line-height: 0
-    text-indent: 33.333%
+          padding-top: .5em
-    &::first-letter
+          text-indent: 55%
-      margin-right: 2em
+    .spell-level
-      float: right
+      padding-left: 1em !important
 </style>

src/components/Spelllist.vue

@@ -10,21 +10,21 @@
         </td>
       </tr>
       <tr>
-        <th class="text-left no-padding">
+        <th class="sort-level">
-          <a class="sort-name"
+          <a
+            v-on:click="sortBy = 'level'"
+          >Level</a>
+        </th>
+        <th class="sort-name">
+          <a
             v-on:click="sortBy = 'name'"
           >Name</a>
         </th>
-        <th class="text-left no-padding">
+        <th class="sort-school">
-          <a class="sort-school"
+          <a
             v-on:click="sortBy = 'school'"
           >School</a>
         </th>
-        <th class="text-right no-padding">
-          <a class="sort-level"
-            v-on:click="sortBy = 'level'"
-          >Level</a>
-        </th>
       </tr>
     </thead>
     <tbody>
@@ -100,13 +100,13 @@ export default {
 <style scoped lang="stylus">
   .spell-list
     width: 100%
-  th a
+    th
-    display: inline-block
+      a
-    padding: 1em 0
+        display: inline-block
-    &.sort-name
+        padding: 1em 0
-      margin-left: 1em
+      &.sort-level
-      margin-right: -1em
+        padding-left: 1em
-    &.sort-level
+        width: 5em
-      margin-left: -5em
+      &.sort-name
-      margin-right: 5em
+        padding-left: 1em
 </style>