[opt] okr

scripts/tags/lib/okr.js

@@ -56,7 +56,7 @@ function generateKRList(ctx, contentArray) {
 function layoutItem(ctx, type, index, title, note, color, label, percent) {
   const percentStr = (percent * 100).toString().replace(/\.\d*/, '')
   return `
-  <div class="okr-item ${type}">
+  <div class="okr-item ${type}" id="okr-${index.toLowerCase()}">
     <div class="okr-left">
       <span class="title">${index.toUpperCase()}</span>
     </div>

source/css/_layout/tag-plugins/okr.styl

@@ -62,6 +62,7 @@
     justify-content: space-between
     align-items: flex-start
     position relative
+    flex-wrap: wrap
     .label
       background: var(--theme-block)
       color: var(--text-p1)
@@ -102,4 +103,12 @@
         background: var(--theme)
         
 
-  
+@media screen and (max-width: $device-mobile-max)
+  .tag-plugin.okr .okr-item
+    grid-template-columns: 2.8rem auto 50px
+    grid-column-gap: 0.5rem
+    padding: 0.5rem
+    .okr-left .title
+      padding: 0 0.25rem
+    .label
+      txt-ellipsis()