ui: fix market view bugs

[buck54321]

Resolves #1886

[JoeGruffins]

In the orders panel, rate and quantity are not aligned:

I can't figure out how to toggle dexes. I am connected to two but I can only see one and the part on the left where I can choose is gone.

Edit: Oh, I see now, they are just all lumped together. They look the same though it would be good if they had a way to tell them apart imo.

[buck54321]

They look the same though it would be good if they had a way to tell them apart imo.

I'm still thinking about how best to do this.

[JoeGruffins]

Do the markets view coin id hyperlinks still work? I can't click on dcr_btc testnet. I thought they worked before.

I can click on the funding and acceleration coins, but not the match transactions.

[chappjc]

I'm seeing this now when I load to initialize:

[chappjc]

First time seeing this, it doesn't ever go to synced if you are here straight from init (right after set app pass):

If I F5 and reselect the asset, it goes to ready to pay. And then if I go back to BTC and create, it will get checked, so it only seems to happen if you go straight here from the initial page load and init.

[chappjc]

Horizontal search text box alignment looks fixed, but it seems offset a little high in the box, plus the magnifying glass icon is still shown when there is text (if you click away).

[chappjc]

Maybe a brdrtop and my-3 on these two divs, respectively:

diff --git a/client/webserver/site/src/html/markets.tmpl b/client/webserver/site/src/html/markets.tmpl
index e3d7dc27..04e6c13f 100644
--- a/client/webserver/site/src/html/markets.tmpl
+++ b/client/webserver/site/src/html/markets.tmpl
@@ -421,8 +421,8 @@
               <a href="/orders" class="flex-center my-2 plainlink">[[[view order history]]]</a>
 
               {{- /* RECENT MATCHES */ -}}
-              <div id=recentMatchesBox  class="d-flex flex-column align-items-stretch px-3 pb-4 mt-2">
-                <div id="userOrdersHeader" class="text-center fs20 sans-light my-1">[[[Recent Matches]]]</div>
+              <div id=recentMatchesBox  class="d-flex flex-column align-items-stretch px-3 pb-4 mt-2 brdrtop">
+                <div id="userOrdersHeader" class="text-center fs20 sans-light my-3">[[[Recent Matches]]]</div>
                 <table id="recentMatchesTable" class="ordertable">
                   <thead>
                     <tr>

gives:

vs now:

[chappjc]

Here's an illustration of what @martonp pointed out in #1886 (comment):

mkt-side-width.mp4

[buck54321]

Sidebar can't have a fixed width. I can increase the min width.

[buck54321]

Horizontal search text box alignment looks fixed, but it seems offset a little high in the box, plus the magnifying glass icon is still shown when there is text (if you click away).

Is the off-focus magnifying glass a big deal? There's no way with CSS to tell if an input has text in it, so we would have to use a javascript hack.

[chappjc]

There's no way with CSS to tell if an input has text in it, so we would have to use a javascript hack.

Oh. I guess it's fine then.

[chappjc]

This seems to work for the ico-search thing:

diff --git a/client/webserver/site/src/css/market.scss b/client/webserver/site/src/css/market.scss
index 8b45528a..807215af 100644
--- a/client/webserver/site/src/css/market.scss
+++ b/client/webserver/site/src/css/market.scss
@@ -313,6 +313,7 @@ div[data-handler=markets] {
         opacity: 0.5;
       }
 
+      &:not(:placeholder-shown) + .ico-search,
       &:focus + .ico-search {
         display: none;
       }
diff --git a/client/webserver/site/src/html/markets.tmpl b/client/webserver/site/src/html/markets.tmpl
index e3d7dc27..f66cfedf 100644
--- a/client/webserver/site/src/html/markets.tmpl
+++ b/client/webserver/site/src/html/markets.tmpl
@@ -17,7 +17,7 @@
 
       <div class="d-flex align-items-stretch" id="searchBoxV1">
         <div class="flex-grow-1 p-1 position-relative">
-          <input type="text" id="marketSearchV1" spellcheck="false">
+          <input type="text" id="marketSearchV1" placeholder=" " spellcheck="false">
           <div class="ico-search fs22"></div>
         </div>
         <div id="leftHider" class="flex-center pointer hoverbg">