responsive txdetails

decred · Oct 18, 2019 · 3f8c8bf · 3f8c8bf
1 parent b80c4bc
commit 3f8c8bf
Show file tree

Hide file tree

Showing 8 changed files with 171 additions and 35 deletions.
diff --git a/app/components/views/SettingsPage/Page.js b/app/components/views/SettingsPage/Page.js
@@ -54,7 +54,7 @@ const SettingsPage = ({
   walletReady,
   isTicketAutoBuyerEnabled
 }) => (
-  <StandalonePage header={<SettingsPageHeader {...{ onCloseWallet, walletName, isTicketAutoBuyerEnabled }}/>} >
+  <StandalonePage header={<SettingsPageHeader {...{ onCloseWallet, walletName, isTicketAutoBuyerEnabled }} />} className="settings-standalone-page">
     <div className="settings-wrapper">
       <div className="settings-columns">
         <GeneralSettings {...{ tempSettings, networks, currencies, locales, walletReady,

diff --git a/app/components/views/TxDetails.js b/app/components/views/TxDetails.js
@@ -182,7 +182,7 @@ const TxDetails = ({
           <div className="txdetails-value"><Balance amount={txFee} /></div>
         </div> }
       </div>
-      {!isConfirmed && <KeyBlueButton className="rebroadcast-button" onClick={publishUnminedTransactions}><T id="txDetails.rebroadcastTransactions" m="Rebroadcast Transaction"/></KeyBlueButton> }
+      {!isConfirmed && <div className="rebroadcast-button-container"><KeyBlueButton className="rebroadcast-button" onClick={publishUnminedTransactions}><T id="txDetails.rebroadcastTransactions" m="Rebroadcast Transaction" /></KeyBlueButton></div> }
       <div className="txdetails-io">
         <div className="txdetails-title"><T id="txDetails.io.title" m="I/O Details" /></div>
         <div className="txdetails-overview">
@@ -253,7 +253,7 @@ const TxDetails = ({
             </div>
           </>
         }
-        <div className="txdetails-top-row">
+        <div className="txdetails-top-row row-transaction">
           <div className="txdetails-name"><T id="txDetails.rawTransactionLabel" m="Raw Transaction" /></div>
           <div className="txdetails-value"><div className="txdetails-value-rawtx">{rawTx}</div><CopyToClipboard textToCopy={rawTx} className="receive-content-nest-copy-to-clipboard-icon" /></div>
         </div>

diff --git a/app/style/Layout.less b/app/style/Layout.less
@@ -98,10 +98,14 @@
 }
 
 .standalone-page-header-container {
-  width: 740px;
+  width: 750px;
   position: relative;
 }
 
+.standalone-page.settings-standalone-page .standalone-page-header-container {
+  width: 740px;
+} 
+
 .tabbed-page-body {
   overflow: hidden;
   position: absolute;
@@ -350,6 +354,10 @@
 }
 
 @media screen and (max-width: 768px) {
+  .standalone-page-header-container {
+    width: 355px;
+  }  
+
   .page-body {
     flex-direction: column-reverse;
   }
@@ -386,14 +394,26 @@
     padding-top: 30px;
   }    
 
-  .standalone-page-header .title-header-button {
+  .standalone-page.settings-standalone-page .title-header-button {
     display: none;
   }  
-
+
+  .standalone-page.txdetails-standalone-page .description-header{
+    display: block;
+    margin-left: 30px;
+    .tx-details-subtitle {
+      margin-top: 10px;
+    }
+  }
+
   .standalone-page-body {
     padding: 30px 10px;
     top: 113px;
     bottom: 60px;
   }  
-
+
+  .standalone-page-header > .standalone-page-header-container > .title-header-button {
+    position: absolute;
+    right: 20px;
+  }
 }
diff --git a/app/style/MiscComponents.less b/app/style/MiscComponents.less
@@ -751,6 +751,9 @@
   }
 }
 
+.rebroadcast-button-container {
+  width: 815px;
+}
 .rebroadcast-button {
   background-image: @rebroadcastTransaction;
   background-position: 20px 12px;
@@ -759,5 +762,30 @@
   padding-left: 48px;
   float: right;
   margin-top: -22px;
-  margin-right: 68px;
+}
+
+@media screen and (max-width: 1179px) { 
+  .rebroadcast-button-container {
+    width: 770px;
+  } 
+}
+
+@media screen and (max-width: 1106px) { 
+  .rebroadcast-button-container {
+    width: 670px;
+  } 
+}
+
+@media screen and (max-width: 768px) {
+  .rebroadcast-button-container {
+    width: 375px;
+    text-align: center;
+    display: block;
+    margin-top: -22px;
+    .rebroadcast-button {
+      float: none;
+      padding: 12px 30px 14px 48px;
+      margin-top: 0;
+    }
+  }  
 }
diff --git a/app/style/ReceivePage.less b/app/style/ReceivePage.less
@@ -66,8 +66,7 @@
 
 .receive-content-nest-copy-to-clipboard-icon {
   float: left;
-  margin-left: 20px;
-  margin-top: 10px;
+  margin-left: 10px;
 }
 
 @media screen and (max-width: 409px) {

diff --git a/app/style/Settings.less b/app/style/Settings.less
@@ -311,24 +311,10 @@
   .settings-security .settings-column-title {
     text-align: left;
   }
-}
 
-@media screen and (max-width: 768px) {
-  .settings-wrapper {
-    margin-top:0;
-    width: 315px;
-    padding: 20px ;
-    flex-direction: column;
-
-    .settings-columns:nth-of-type(2){
-      width: 300px;
-    }    
-  }
-
-  .settings-save-button-wrapper {
-    width:355px;  
-    text-align: center;
-  } 
+  .close-modal-button {
+    display: none;
+  }  
 }
 
 .close-modal-button {
@@ -349,4 +335,20 @@
   text-align: right;
 }
 
+@media screen and (max-width: 768px) {
+  .settings-wrapper {
+    margin-top:0;
+    width: 315px;
+    padding: 20px ;
+    flex-direction: column;
+
+    .settings-columns:nth-of-type(2){
+      width: 300px;
+    }    
+  }
 
+  .settings-save-button-wrapper {
+    width:355px;  
+    text-align: center;
+  } 
+}
diff --git a/app/style/Themes.less b/app/style/Themes.less
@@ -107,6 +107,7 @@
     --onboard-toolbar-shadow: rgba(9,20,64,0.13);
     --onboard-toolbar-background: #152042;
     --background-copy-color: #e9f8ff;
+    --txdetails-top-bg: #1F325F;
 
     /* icons */
     --menu-settings-default: url('@{icon-root}/settingsDefaultDark.svg');    
@@ -311,6 +312,7 @@
     --onboard-toolbar-shadow: rgba(9,20,64,0.13);
     --onboard-toolbar-background: #fff;
     --background-copy-color: #e9f8ff;
+    --txdetails-top-bg: #f9fafa;
 
     /* icons */
     --menu-settings-default: url('@{icon-root}/settings-default.png');

diff --git a/app/style/TxDetails.less b/app/style/TxDetails.less
@@ -3,7 +3,7 @@
 
 .txdetails-standalone-page .standalone-page-body {
   padding: 0;
-  top: 162px;
+  top: 157px;
 }
 
 .txdetails-indicator-mixin {
@@ -48,7 +48,7 @@
   padding-top: 25px;
   padding-bottom: 33px;
   font-size: 13px;
-  background-color: var(--background-container);
+  background-color: var(--txdetails-top-bg);
 }
 
 .txdetails-io {
@@ -63,23 +63,22 @@
 
 .txdetails-name {
   color: var(--tx-detail-text);
-  margin-right: 22px;
-  min-width: 93px;
+  margin-right: 11px;
+  min-width: 90px;
   text-align: right;
   font-size: 13px;
   line-height: 17px;
 }
 
 .txdetails-value {
-  width: 70%;
   word-wrap: break-word;
   display: flex;
 }
 
 .txdetails-value-rawtx {
   font-size: 13px;
   line-height: 15px;
-  width: 90%;
+  width: 540px;
   height: 233px;
   overflow-y: auto;
   background-color: var(--background-back-color);
@@ -91,6 +90,7 @@
   margin-bottom: 3em;
   display: flex;
   justify-content: space-between;
+  width: 659px;
 }
 
 .txdetails-overview-title-mixin {
@@ -132,7 +132,6 @@
 
 .txdetails-outputs {
   width: 220px;
-  margin-right: 80px;
 }
 
 .tx-details-area-mixin {
@@ -202,7 +201,6 @@
   .blue-value-highlight-mixin;
 
   max-height: 22px;
-  margin-top: 3px;
 }
 
 .tx-details-subtitle-account {
@@ -246,3 +244,90 @@
 .txdetails-last {
   border-bottom: 0px none transparent;
 }
+
+@media screen and (max-width: 1106px) {
+  .txdetails-overview {
+    width: 633px;
+  }
+  .txdetails-io,
+  .txdetails-details,
+  .txdetails-top {
+    padding-left: 36px;
+  }
+  .txdetails-value-rawtx {
+    width: 511px;
+  }
+}
+
+@media screen and (max-width: 1106px) {
+  .txdetails-overview {
+    width: 633px;
+  }
+  .txdetails-io,
+  .txdetails-details,
+  .txdetails-top {
+    padding-left: 36px;
+  }
+  .txdetails-value-rawtx {
+    width: 511px;
+  }
+}
+@media screen and (max-width: 768px) {
+  .txdetails-standalone-page .standalone-page-body {
+    top: 113px;
+  }
+
+  .txdetails-overview {
+    flex-direction: column;
+    padding-left: 42px;
+  }
+
+  .txdetails-details, 
+  .txdetails-top {
+    padding-left: 30px;
+  }
+
+  .txdetails-input-arrow {
+    transform: rotate(90deg);
+    margin: 20px 0 25px 88px;    
+  }
+
+  .txdetails-top .txdetails-value > a {
+      text-overflow: ellipsis;
+      width: 220px;
+      white-space: nowrap;
+      overflow: hidden;
+  }
+
+  .txdetails-details .txdetails-top-row {
+    width: 335px;
+
+    .txdetails-value > a {
+      word-wrap: break-word;
+      display: inline-block;
+      width: 223px;
+    }
+
+    &.row-transaction {
+      flex-direction: column;
+      .txdetails-name {
+        text-align: left;
+      }
+      .txdetails-value{
+        margin-top: 10px;
+        margin-left: -20px;
+        width: 354px;
+        position: relative;
+        .txdetails-value-rawtx {
+          width: 335px;
+        }
+        .clipboard-box.receive-content-nest-copy-to-clipboard-icon {
+          position: absolute;
+          top: -28px;
+          right: 5px;
+          margin: 0;
+        }
+      }
+    }
+  }
+}