fix(pnl mobile design)

nolus-protocol · Oct 17, 2024 · 29e4aaa · 29e4aaa
1 parent b59f660
commit 29e4aaa
Show file tree

Hide file tree

Showing 5 changed files with 27 additions and 12 deletions.
diff --git a/src/common/components/modals/short/ShortFormComponent.vue b/src/common/components/modals/short/ShortFormComponent.vue
@@ -79,7 +79,7 @@
           </p>
           <p class="align-center mb-2 mt-[14px] flex justify-end text-neutral-typography-200">
             <span>{{ calculateLique }}</span>
-            <span class="text-[#8396B1]"> &nbsp;|&nbsp; {{ percentLique }} </span>
+            <span class="text-[#8396B1]"> &nbsp;|&nbsp; +{{ percentLique }} </span>
             <Tooltip :content="$t('message.liquidation-price-tooltip')" />
           </p>
         </div>

diff --git a/src/modules/dashboard/components/AssetPartial.vue b/src/modules/dashboard/components/AssetPartial.vue
@@ -30,7 +30,7 @@
             :type="CURRENCY_VIEW_TYPES.CURRENCY"
             denom="%"
           />
-          <p class="text-[12px] text-[#1AB171]">+{{ rewards }}% {{ NATIVE_ASSET.label }}</p>
+          <!-- <p class="text-[12px] text-[#1AB171]">+{{ rewards }}% {{ NATIVE_ASSET.label }}</p> -->
         </div>
         <template v-else> – </template>
       </template>

diff --git a/src/modules/earn/components/EarnLpnAsset.vue b/src/modules/earn/components/EarnLpnAsset.vue
@@ -107,7 +107,7 @@ const items = computed(() => {
     },
     {
       type: CURRENCY_VIEW_TYPES.CURRENCY,
-      subValue: hasReswards ? `+${rewards.value}% ${NATIVE_ASSET.label}` : "-",
+      // subValue: hasReswards ? `+${rewards.value}% ${NATIVE_ASSET.label}` : "-",
       class: hasReswards ? "text-success-100" : "text-neutral-typography-200"
     }
   ];

diff --git a/src/modules/lease/components/LeaseInfo.vue b/src/modules/lease/components/LeaseInfo.vue
@@ -383,7 +383,7 @@
       :asset="asset!.shortName"
       :icon="getAssetIcon"
       :position="pnl.percent"
-      :price="leaseInfo.leaseData?.price!.toString(6) ?? '0'"
+      :price="getSharePrice()"
       :position-type="ProtocolsConfig[props.leaseInfo.protocol].type"
     />
   </Modal>
@@ -1114,6 +1114,17 @@ const leaseAsset = computed(() => {
   const asset = app.currenciesData?.[`${ticker}@${props.leaseInfo.protocol}`];
   return asset;
 });
+
+function getSharePrice() {
+  switch (ProtocolsConfig[props.leaseInfo.protocol].type) {
+    case PositionTypes.long: {
+      return props.leaseInfo.leaseData?.price!.toString(6) ?? "0";
+    }
+    case PositionTypes.short: {
+      return props.leaseInfo.leaseData.lpnPrice.toString(lpn.value.decimal_digits);
+    }
+  }
+}
 </script>
 <style lang="scss">
 button.share {

diff --git a/src/modules/pnl-history/view.vue b/src/modules/pnl-history/view.vue
@@ -32,7 +32,10 @@
               v-for="l of loansData"
               :key="l.LS_contract_id"
             >
-              <HistoryTableRow :items="l.items" />
+              <HistoryTableRow
+                :items="l.items"
+                classes="!flex-row !flex-wrap !md:flex-nowrap"
+              />
             </div>
           </TransitionGroup>
         </template>
@@ -178,36 +181,37 @@ const loansData = computed(() => {
       items: [
         {
           value: i18n.t(`message.${ProtocolsConfig[protocol].type}`),
-          class: `text-14 uppercase ${getTitleClass(ProtocolsConfig[protocol])} max-w-[150px]`
+          class: `text-14 uppercase ${getTitleClass(ProtocolsConfig[protocol])} max-w-[150px] mb-[4px] md:mb-[0px] md:basis-0`
         },
         {
           value: `#${item.LS_contract_id.slice(-8)}`,
           url: `#`,
-          class: "text-14 !justify-start"
+          class:
+            "text-14 !justify-start cursor-defaul pointer-events-none	basis-[80%] md:basis-0 mb-[4px] pl-[12px] md:mb-[0px] md:pl-[0px]"
         },
         {
           value: currency.shortName,
-          class: "text-14 md:justify-end max-w-[100px] text-neutral-typography-200"
+          class: "text-14 md:justify-end max-w-[100px] text-neutral-typography-200 basis-1/3 md:basis-0"
         },
         {
           value: i18n.t(`message.status-${item.Type}`),
-          class: "text-14 md:justify-end text-neutral-typography-200"
+          class: "text-14 md:justify-end text-neutral-typography-200 hidden md:flex md:basis-0"
         },
         {
           value: new PricePretty(
             {
               currency: "usd",
-              maxDecimals: 4,
+              maxDecimals: currency.decimal_digits,
               symbol: "$",
               locale: "en-US"
             },
             new Dec(item.LS_pnl).quo(new Dec(10 ** currency.decimal_digits))
           ).toString(),
-          class: "text-14 text-neutral-typography-200"
+          class: "text-14 text-neutral-typography-200 basis-1/3 justify-center md:basis-0"
         },
         {
           value: getCreatedAtForHuman(new Date(item.LS_timestamp)) as string,
-          class: "text-14 justify-end"
+          class: "text-14 justify-end basis-1/3 md:basis-0"
         }
       ]
     };