Fixes for mobile view and SSV added to bags list

Monitor/Pages/BagAnalyzer.cshtml

@@ -37,6 +37,7 @@
               <th class="text-right" data-toggle="tooltip" data-placement="top" title="Buy Strategy Trigger">BS Trigger</th>
               <th data-fieldid="ProfitPercent" data-tablesaw-sortable-col data-sortable-numeric="true" data-tablesaw-sortable-default-col class="text-right tablesaw-sortable-descending" data-toggle="tooltip" data-placement="top" title="Current profit percentage">Profit</th>
               <th data-toggle="tooltip" data-placement="top" title="Active sell strategies">Sell Strats</th>
+              <th class="text-right" data-toggle="tooltip" data-placement="top" title="Sell Strategy Value">SSV</th>
               <th class="text-right" data-toggle="tooltip" data-placement="top" title="Sell Strategy Trigger">SST</th>
               <th class="text-right" data-toggle="tooltip" data-placement="top" title="Current Bid Order & Average Purchase Price">Bid Price<br>Avg Price</th>
               <th></th>

Monitor/Pages/_Layout.cshtml

@@ -24,7 +24,7 @@
   <!-- Navigation Bar-->
   <header id="topnav">
     <div class="topbar-main">
-      <div class="container-fluid">
+      <div class="container-fluid px-1">
 
         <!-- Logo container-->
         <div class="logo">
@@ -43,6 +43,9 @@
         <div class="menu-extras topbar-custom">
           <ul class="list-inline float-left mb-0">
             <li id="ticker-widgets" class="list-inline-item ticker-widgets"></li>
+          </ul>
+
+          <ul class="list-inline float-right pt-2">
             <li class="menu-item list-inline-item">
               <!-- Mobile menu toggle-->
               <a class="navbar-toggle nav-link">
@@ -54,8 +57,6 @@
               </a>
               <!-- End mobile menu toggle-->
             </li>
-            
-          </ul>
         </div>
         <!-- end menu-extras -->
 
@@ -66,7 +67,7 @@
     <!-- end topbar-main -->
 
     <div class="navbar-custom">
-      <div class="container-fluid">
+      <div class="container-fluid px-1">
         <div id="navigation">
           <!-- Navigation Menu-->
           <ul class="navigation-menu">
@@ -127,7 +128,7 @@
   <!-- End Navigation Bar-->
 
   <div class="wrapper">
-    <div class="container-fluid">
+    <div class="container-fluid px-1">
 
       @RenderBody()
 

Monitor/Pages/_get/BagList.cshtml

@@ -143,6 +143,9 @@
     // Sell Strats
     <td class="text-nowrap">@Html.Raw(sellStrategyText)</td>
 
+    // SSV
+    <td class="text-right text-nowrap">@Html.Raw(currentSellValueText)</td>
+
     // SST
     <td class="text-right text-nowrap">
       @Html.Raw(triggerSellValueText)

Monitor/Pages/_get/DashboardBottom.cshtml

@@ -5,8 +5,8 @@
 }
 
 <div class="row">
-  <div class="col-md-6">
+  <div class="col-md-6 px-1">
-    <div class="card-box">
+    <div class="card-box px-2">
       <h4 class="m-t-0 m-b-20 header-title"><b>Market Trends</b><small class="pull-right"><a href="@Html.Raw(Model.PTMagicConfiguration.GeneralSettings.Monitor.RootUrl)MarketAnalyzer">more</a></small></h4>
 
       <table class="table table-sm">
@@ -44,8 +44,8 @@
       </table>
     </div>
   </div>
-  <div class="col-md-6">
+  <div class="col-md-6 px-1">
-    <div class="card-box">
+    <div class="card-box px-2">
       <h4 class="m-t-0 m-b-20 header-title"><b>Sales Overview</b><small class="pull-right"><a href="@Html.Raw(Model.PTMagicConfiguration.GeneralSettings.Monitor.RootUrl)SalesAnalyzer">more</a></small></h4>
       @{
         double totalProfit = Model.PTData.SellLog.Sum(s => s.Profit);
@@ -131,8 +131,8 @@
 </div>
 
 <div class="row">
-   <div class="col-md-6">
+   <div class="col-md-6 px-1">
-    <div class="card-box" style="height:305px;">
+    <div class="card-box px-2" style="height:305px;">
       @if (!Model.TrendChartDataJSON.Equals("")) {
         <div class="trend-chart">
           <svg style="height:305px;width:100%"></svg>
@@ -142,8 +142,8 @@
       }
     </div>
   </div>
-  <div class="col-md-6">
+  <div class="col-md-6 px-1">
-    <div class="card-box" style="height:305px;">
+    <div class="card-box px-2" style="height:305px;">
       @if (!Model.ProfitChartDataJSON.Equals("")) {
         <div class="profit-chart">
           <svg style="height:305px;width:100%"></svg>

Monitor/Pages/_get/DashboardTop.cshtml

@@ -5,14 +5,15 @@
 }
 
 <div class="row">
-  <div class="col-md-6">
+  <div class="col-md-6 px-1">
-    <div class="card-box">
+    <div class="card-box px-2">
       <h4 class="m-t-0 m-b-20 header-title"><b>Possible Buys (@Model.PTData.BuyLog.Count)</b><small id="buylist-refresh-icon"></small><small class="pull-right"><a href="@Html.Raw(Model.PTMagicConfiguration.GeneralSettings.Monitor.RootUrl)BuyAnalyzer">more</a></small></h4>
       @if (Model.PTData.BuyLog.Count == 0) {
 
         <p>Your Profit Trailer did not find anything worth buying so far.</p>
 
       } else {
+        
         <table class="table table-sm m-b-0">
           <thead>
             <tr>
@@ -79,8 +80,8 @@
     </div>
   </div>
 
-  <div class="col-md-6">
+  <div class="col-md-6 px-1">
-    <div class="card-box">
+    <div class="card-box px-2">
       <h4 class="m-t-0 m-b-20 header-title"><b>Pairs & DCA (@Model.PTData.DCALog.Count)</b><small id="baglist-refresh-icon"></small><small class="pull-right"><a href="@Html.Raw(Model.PTMagicConfiguration.GeneralSettings.Monitor.RootUrl)BagAnalyzer">more</a></small></h4>
 
       @if (Model.PTData.DCALog.Count == 0) {
@@ -89,104 +90,106 @@
 
       } else {
         
-        <table class="table table-sm m-b-0">
+        <div class="table-responsive">
-          <thead>
+          <table class="table table-sm m-b-0">
-            <tr>
+            <thead>
-              <th>Market</th>             
+              <tr>
-              <th class="text-left" data-toggle="tooltip" data-placement="top" title="Market trend last 24 hours">24H Trend</th>
+                <th>Market</th>             
-              <th class="text-left" data-toggle="tooltip" data-placement="top" title="Total Bag Value">Value</th>
+                <th class="text-left" data-toggle="tooltip" data-placement="top" title="Market trend last 24 hours">24H Trend</th>
-              <th></th>
+                <th class="text-left" data-toggle="tooltip" data-placement="top" title="Total Bag Value">Value</th>
-              <th class="text-left" data-toggle="tooltip" data-placement="top" title="Active buy strategies">DCA Buy Strats</th>
+                <th></th>
-              <th class="text-left" data-toggle="tooltip" data-placement="top" title="Active sell strategies">Sell Strats</th>
+                <th class="text-left" data-toggle="tooltip" data-placement="top" title="Active buy strategies">DCA Buy Strats</th>
-              <th class="text-left" data-toggle="tooltip" data-placement="top" title="Current Profit">Profit</th>
+                <th class="text-left" data-toggle="tooltip" data-placement="top" title="Active sell strategies">Sell Strats</th>
-              <th></th>
+                <th class="text-left" data-toggle="tooltip" data-placement="top" title="Current Profit">Profit</th>
-            </tr>
+                <th></th>
-          </thead>
-          <tbody>
-            @foreach (Core.Main.DataObjects.PTMagicData.DCALogData dcaLogEntry in Model.PTData.DCALog.OrderByDescending(d => d.ProfitPercent).Take(Model.PTMagicConfiguration.GeneralSettings.Monitor.MaxDashboardBagEntries)) {
-              // Loop through the pairs preparing the data for display
-              Core.Main.DataObjects.PTMagicData.MarketPairSummary mps = null;
-              if (Model.Summary.MarketSummary.ContainsKey(dcaLogEntry.Market)) {
-                mps = Model.Summary.MarketSummary[dcaLogEntry.Market];
-              }
-
-              bool dcaEnabled = true;
-              if (mps != null) {
-                dcaEnabled = mps.IsDCAEnabled;
-              }
-
-              bool isTrailingBuyActive = dcaLogEntry.IsTrailing;
-              if (dcaLogEntry.BuyStrategies.Count > 0) {
-                isTrailingBuyActive = (dcaLogEntry.BuyStrategies.FindAll(bs => bs.IsTrailing).Count > 0);
-              }
-
-              bool isBuyStrategyTrue = dcaLogEntry.IsTrue;
-              if (dcaLogEntry.BuyStrategies.Count > 0) {
-                isBuyStrategyTrue = (dcaLogEntry.BuyStrategies.FindAll(bs => !bs.IsTrue).Count == 0);
-              }
-
-              bool isTrailingSellActive = false;
-              if (dcaLogEntry.SellStrategies.Count > 0) {
-                isTrailingSellActive = (dcaLogEntry.SellStrategies.FindAll(ss => ss.IsTrailing).Count > 0);
-              }
-
-              bool isSellStrategyTrue = false;
-              if (dcaLogEntry.BuyStrategies.Count > 0) {
-                isSellStrategyTrue = (dcaLogEntry.SellStrategies.FindAll(ss => !ss.IsTrue).Count == 0);
-              }
-
-              bool buyDisabled = false;
-              string buyStrategyText = Core.ProfitTrailer.StrategyHelper.GetStrategyText(Model.Summary, dcaLogEntry.BuyStrategies, dcaLogEntry.BuyStrategy, isBuyStrategyTrue, isTrailingBuyActive);
-              if (!Core.ProfitTrailer.StrategyHelper.IsValidStrategy(buyStrategyText, true)) {
-                buyDisabled = true;
-              }
-
-              string sellStrategyText = Core.ProfitTrailer.StrategyHelper.GetStrategyText(Model.Summary, dcaLogEntry.SellStrategies, dcaLogEntry.SellStrategy, isSellStrategyTrue, isTrailingSellActive);
-
-              // Check for when PT loses the value of a pair
-              bool lostValue = false;
-              lostValue = (dcaLogEntry.TotalCost == 0.0) || (dcaLogEntry.AverageBuyPrice == 0.0);
-
-              // Render the row
-              <tr @(lostValue ? "class=errorRow" : "") >
-                @if (mps == null || mps.ActiveSingleSettings == null || mps.ActiveSingleSettings.Count == 0) {
-                  <th class="align-top"><a href="@Core.Helper.SystemHelper.GetMarketLink(Model.PTMagicConfiguration.GeneralSettings.Monitor.LinkPlatform,Model.PTMagicConfiguration.GeneralSettings.Application.Exchange, dcaLogEntry.Market, Model.Summary.MainMarket)" target="_blank">@dcaLogEntry.Market</a></th>
-                } else {
-                  <th class="align-top"><a href="@Core.Helper.SystemHelper.GetMarketLink(Model.PTMagicConfiguration.GeneralSettings.Monitor.LinkPlatform,Model.PTMagicConfiguration.GeneralSettings.Application.Exchange, dcaLogEntry.Market, Model.Summary.MainMarket)" target="_blank">@dcaLogEntry.Market</a> <i class="fa fa-exclamation-triangle text-highlight" data-toggle="tooltip" data-placement="top" data-html="true" title="@await Component.InvokeAsync("PairIcon", mps)" data-template="<div class='tooltip' role='tooltip'><div class='tooltip-arrow'></div><div class='tooltip-inner pair-tooltip'></div></div>"></i></th>
-                }
-                
-                <td class="text-autocolor">@Html.Raw((dcaLogEntry.PercChange * 100).ToString("#,#0.00", new System.Globalization.CultureInfo("en-US")))%</td>
-
-                <td class="text-left">@Html.Raw(dcaLogEntry.TotalCost.ToString("#,#0.000000", new System.Globalization.CultureInfo("en-US")))</td>
-                
-                <td class="text-right">
-                  @if (dcaEnabled) {
-                    @if (dcaLogEntry.BoughtTimes > 0) {
-                      @dcaLogEntry.BoughtTimes;
-                    }
-                  } else {
-                    <span data-toggle="tooltip" data-placement="top" title="DCA is disabled"><i class="fa fa-ban text-highlight"></i></span>
-                  }
-                </td>
-
-                <td>@Html.Raw(buyStrategyText)</td>
-
-                <td>@Html.Raw(sellStrategyText)</td>
-                
-                @if(!@lostValue)
-                {
-                  <td class="text-autocolor">@dcaLogEntry.ProfitPercent.ToString("#,#0.00", new System.Globalization.CultureInfo("en-US"))%</td>
-                }
-                else
-                {
-                  <td class="text-left">No Value!</td>
-                }
-
-                <td class="text-right"><a href="@Html.Raw(Model.PTMagicConfiguration.GeneralSettings.Monitor.RootUrl)_get/BagDetails/?m=@dcaLogEntry.Market" data-remote="false" data-toggle="modal" data-target="#dca-chart"><i class="fa fa-plus-circle"></i></a></td>
               </tr>
-            }
+            </thead>
-          </tbody>
+            <tbody>
-        </table>
+              @foreach (Core.Main.DataObjects.PTMagicData.DCALogData dcaLogEntry in Model.PTData.DCALog.OrderByDescending(d => d.ProfitPercent).Take(Model.PTMagicConfiguration.GeneralSettings.Monitor.MaxDashboardBagEntries)) {
+                // Loop through the pairs preparing the data for display
+                Core.Main.DataObjects.PTMagicData.MarketPairSummary mps = null;
+                if (Model.Summary.MarketSummary.ContainsKey(dcaLogEntry.Market)) {
+                  mps = Model.Summary.MarketSummary[dcaLogEntry.Market];
+                }
+
+                bool dcaEnabled = true;
+                if (mps != null) {
+                  dcaEnabled = mps.IsDCAEnabled;
+                }
+
+                bool isTrailingBuyActive = dcaLogEntry.IsTrailing;
+                if (dcaLogEntry.BuyStrategies.Count > 0) {
+                  isTrailingBuyActive = (dcaLogEntry.BuyStrategies.FindAll(bs => bs.IsTrailing).Count > 0);
+                }
+
+                bool isBuyStrategyTrue = dcaLogEntry.IsTrue;
+                if (dcaLogEntry.BuyStrategies.Count > 0) {
+                  isBuyStrategyTrue = (dcaLogEntry.BuyStrategies.FindAll(bs => !bs.IsTrue).Count == 0);
+                }
+
+                bool isTrailingSellActive = false;
+                if (dcaLogEntry.SellStrategies.Count > 0) {
+                  isTrailingSellActive = (dcaLogEntry.SellStrategies.FindAll(ss => ss.IsTrailing).Count > 0);
+                }
+
+                bool isSellStrategyTrue = false;
+                if (dcaLogEntry.BuyStrategies.Count > 0) {
+                  isSellStrategyTrue = (dcaLogEntry.SellStrategies.FindAll(ss => !ss.IsTrue).Count == 0);
+                }
+
+                bool buyDisabled = false;
+                string buyStrategyText = Core.ProfitTrailer.StrategyHelper.GetStrategyText(Model.Summary, dcaLogEntry.BuyStrategies, dcaLogEntry.BuyStrategy, isBuyStrategyTrue, isTrailingBuyActive);
+                if (!Core.ProfitTrailer.StrategyHelper.IsValidStrategy(buyStrategyText, true)) {
+                  buyDisabled = true;
+                }
+
+                string sellStrategyText = Core.ProfitTrailer.StrategyHelper.GetStrategyText(Model.Summary, dcaLogEntry.SellStrategies, dcaLogEntry.SellStrategy, isSellStrategyTrue, isTrailingSellActive);
+
+                // Check for when PT loses the value of a pair
+                bool lostValue = false;
+                lostValue = (dcaLogEntry.TotalCost == 0.0) || (dcaLogEntry.AverageBuyPrice == 0.0);
+
+                // Render the row
+                <tr @(lostValue ? "class=errorRow" : "") >
+                  @if (mps == null || mps.ActiveSingleSettings == null || mps.ActiveSingleSettings.Count == 0) {
+                    <th class="align-top"><a href="@Core.Helper.SystemHelper.GetMarketLink(Model.PTMagicConfiguration.GeneralSettings.Monitor.LinkPlatform,Model.PTMagicConfiguration.GeneralSettings.Application.Exchange, dcaLogEntry.Market, Model.Summary.MainMarket)" target="_blank">@dcaLogEntry.Market</a></th>
+                  } else {
+                    <th class="align-top"><a href="@Core.Helper.SystemHelper.GetMarketLink(Model.PTMagicConfiguration.GeneralSettings.Monitor.LinkPlatform,Model.PTMagicConfiguration.GeneralSettings.Application.Exchange, dcaLogEntry.Market, Model.Summary.MainMarket)" target="_blank">@dcaLogEntry.Market</a> <i class="fa fa-exclamation-triangle text-highlight" data-toggle="tooltip" data-placement="top" data-html="true" title="@await Component.InvokeAsync("PairIcon", mps)" data-template="<div class='tooltip' role='tooltip'><div class='tooltip-arrow'></div><div class='tooltip-inner pair-tooltip'></div></div>"></i></th>
+                  }
+                  
+                  <td class="text-autocolor">@Html.Raw((dcaLogEntry.PercChange * 100).ToString("#,#0.00", new System.Globalization.CultureInfo("en-US")))%</td>
+
+                  <td class="text-left">@Html.Raw(dcaLogEntry.TotalCost.ToString("#,#0.000000", new System.Globalization.CultureInfo("en-US")))</td>
+                  
+                  <td class="text-right">
+                    @if (dcaEnabled) {
+                      @if (dcaLogEntry.BoughtTimes > 0) {
+                        @dcaLogEntry.BoughtTimes;
+                      }
+                    } else {
+                      <span data-toggle="tooltip" data-placement="top" title="DCA is disabled"><i class="fa fa-ban text-highlight"></i></span>
+                    }
+                  </td>
+
+                  <td>@Html.Raw(buyStrategyText)</td>
+
+                  <td>@Html.Raw(sellStrategyText)</td>
+                  
+                  @if(!@lostValue)
+                  {
+                    <td class="text-autocolor">@dcaLogEntry.ProfitPercent.ToString("#,#0.00", new System.Globalization.CultureInfo("en-US"))%</td>
+                  }
+                  else
+                  {
+                    <td class="text-left">No Value!</td>
+                  }
+
+                  <td class="text-right"><a href="@Html.Raw(Model.PTMagicConfiguration.GeneralSettings.Monitor.RootUrl)_get/BagDetails/?m=@dcaLogEntry.Market" data-remote="false" data-toggle="modal" data-target="#dca-chart"><i class="fa fa-plus-circle"></i></a></td>
+                </tr>
+              }
+            </tbody>
+          </table>
+        </div>
 
         @if (Model.PTData.DCALog.Count > Model.PTMagicConfiguration.GeneralSettings.Monitor.MaxDashboardBagEntries) {
           <p class="text-right"><small><i class="fa fa-info-circle"></i> @Model.PTMagicConfiguration.GeneralSettings.Monitor.MaxDashboardBagEntries of @Model.PTData.DCALog.Count items listed - <a href="@Html.Raw(Model.PTMagicConfiguration.GeneralSettings.Monitor.RootUrl)BagAnalyzer">View all items</a></small></p>

Monitor/wwwroot/assets/css/custom.css

@@ -135,6 +135,13 @@ a:active {
   font-size  : 12px;
 }
 
+/* If the screen size is 400px wide or less, set the font-size of <div> to 30px */
+@media screen and (max-width: 400px) {
+  .table {
+    font-size: 10px;
+  }
+}
+
 .tablesaw-sortable .tablesaw-sortable-head button {
   min-width: unset;
 }