[responsive] Responsive purchase ticket view (#2146)

decred · Jul 24, 2019 · 9a50481 · 9a50481
1 parent 75dfba5
commit 9a50481
Show file tree

Hide file tree

Showing 24 changed files with 718 additions and 1,672 deletions.
diff --git a/app/components/buttons/ImportScriptIconButton.js b/app/components/buttons/ImportScriptIconButton.js
@@ -7,8 +7,7 @@ import { FormattedMessage as T } from "react-intl";
 import { SimpleLoading } from "indicators";
 
 const ImportScriptIconButton = ({ rescanRequest, isImportingScript, onImportScript }) => (
-  <Tooltip className="stakepool-content-import-script-button-tooltip-container"
-    warning={!!rescanRequest}
+  <Tooltip warning={!!rescanRequest}
     text={!rescanRequest
       ? <T id="purchaseTickets.import" m="Manually import a redeem script for tickets." />
       : <T id="purchaseTickets.importDisabledRescan" m="Importing scripts is disabled during a rescan." />}

diff --git a/app/components/buttons/TicketsCogs.js b/app/components/buttons/TicketsCogs.js
@@ -1,7 +1,9 @@
 import "style/MiscComponents.less";
 
 const TicketsCogs = ({ opened, onClick }) => (
-  <a className={opened ? "ticket-cogs-opened" : "ticket-cogs-closed"} onClick={onClick} />
+  <div>
+    <a className={opened ? "ticket-cogs-opened" : "ticket-cogs-closed"} onClick={onClick} />
+  </div>
 );
 
 export default TicketsCogs;
diff --git a/app/components/inputs/NumTicketsInput.js b/app/components/inputs/NumTicketsInput.js
@@ -1,5 +1,4 @@
 import IntegerInput from "./IntegerInput";
-import "style/NumTicketsInput.less";
 import { FormattedMessage as T } from "react-intl";
 
 const NumTicketsInput = ({
@@ -11,28 +10,23 @@ const NumTicketsInput = ({
   invalid,
   invalidMessage,
   showErrors,
-  onKeyDown
-}) => (
-  <div className="num-tickets-input-area">
-    <div className="num-tickets-input">
+  onKeyDown,
+}) => {
+  const ticketUnitLabel = numTickets === 1 ? <T id="numTicketInput.unit" m="ticket" /> : <T id="numTicketsInput.unit" m="tickets" />;
+  return (
+    <div className={"is-row stakepool-purchase-ticket-num-select"} >
       <IntegerInput
-        required={required}
-        onKeyDown={onKeyDown}
-        showErrors={showErrors}
-        invalid={invalid}
-        invalidMessage={invalidMessage}
-        className="num-tickets-input-value"
-        value={numTickets}
+        {...{ required, onKeyDown, showErrors, invalid, invalidMessage,
+          value: numTickets }}
+        className="ticket-numeric-input"
         onChange={e => onChangeNumTickets && onChangeNumTickets(e.target.value)}
         data-max-width="70"
-        unit={<T id="numTicketsInput.unit" m="tickets" />}
+        unit={ticketUnitLabel}
       />
+      <div key="more" className="num-tickets-icon more" onClick={incrementNumTickets} />
+      <div key="less" className="num-tickets-icon less" onClick={decrementNumTickets} />
     </div>
-    <div className="num-tickets-more-less">
-      <a key="more" className="num-tickets-more" onClick={incrementNumTickets}></a>
-      <a key="less" className="num-tickets-less" onClick={decrementNumTickets}></a>
-    </div>
-  </div>
-);
+  );
+};
 
 export default NumTicketsInput;
diff --git a/app/components/inputs/NumericInput.js b/app/components/inputs/NumericInput.js
@@ -1,6 +1,6 @@
 import Input from "./Input";
 import "style/Input.less";
 
-const NumericInput = ({ ...props }) => <Input className={"numeric-input " + props.className} {...props} />;
+const NumericInput = ({ className, ...props }) => <Input {...{ ...props, className: "numeric-input " + className, }} />;
 
 export default NumericInput;
diff --git a/app/components/views/GovernancePage/Blockchain/Page.js b/app/components/views/GovernancePage/Blockchain/Page.js
@@ -23,7 +23,7 @@ const VotingPrefsPage = ({
         <ExternalLink href="https://voting.decred.org"><T id="votingPreferences.dashboard" m="Voting Dashboard" /></ExternalLink>
       </div>
     </div>
-    <div className="stakepool-voting-agenda-area">
+    <div>
       {selectedAgenda ? (
         <AgendaOverview
           agenda={selectedAgenda}
@@ -44,7 +44,7 @@ const VotingPrefsPage = ({
             />
         )
         : (
-          <div className="stakepool-no-agendas-message">
+          <div>
             <T id="votingPreferences.noAgenda" m="There are currently no agendas for voting." />
           </div>
         )}

diff --git a/app/components/views/SecurityPage/SignMessage/Form.js b/app/components/views/SecurityPage/SignMessage/Form.js
@@ -71,7 +71,6 @@ const SignMessageForm = ({
         </div>
       </div>
       <SignMessageButton
-        className="stakepool-content-purchase-button"
         address={address}
         message={message}
         disabled={isSigningMessage || address == "" || message == "" || addressError || messageError || isSignMessageDisabled}

diff --git a/app/components/views/SecurityPage/VerifyMessage/Form.js b/app/components/views/SecurityPage/VerifyMessage/Form.js
@@ -87,7 +87,6 @@ const VerifyMessageForm = ({
         </div>
       </div>
       <KeyBlueButton
-        className="stakepool-content-purchase-button"
         disabled={isVerifyingMessage || address == "" || message == "" || signature == "" || addressError || messageError || signatureError}
         onClick={onSubmit}
         loading={isVerifyingMessage}>

diff --git a/app/components/views/TicketsPage/PurchaseTab/PurchaseTickets/Form.js b/app/components/views/TicketsPage/PurchaseTab/PurchaseTickets/Form.js
@@ -1,5 +1,4 @@
-import { TicketsCogs, InfoDocModalButton, PassphraseModalButton,
-  ImportScriptIconButton } from "buttons";
+import { TicketsCogs, PassphraseModalButton, ImportScriptIconButton } from "buttons";
 import { AccountsSelect, NumTicketsInput } from "inputs";
 import { FormattedMessage as T } from "react-intl";
 import { TransitionMotionWrapper } from "shared";
@@ -25,73 +24,58 @@ const PurchaseTicketsForm = ({
   account,
   willEnter,
   willLeave,
-}) => {
-
-  return (
-    <>
-      <div className="stakepool-voting-title-area">
-        <div className="stakepool-purchase-ticket-input-buttons">
-          <InfoDocModalButton document="PurchaseTicketsInfo" modalClassName="info-modal-fields" double/>
-        </div>
-      </div>
-      <div className="stakepool-purchase-ticket-row-wrapper">
-        <div className="stakepool-purchase-ticket-row">
-          <div className="stakepool-purchase-ticket-row-account-select">
-            <div className="stakepool-purchase-ticket-account-select-label"><T id="purchaseTickets.accountFrom" m="From" />:</div>
-            <div className="stakepool-purchase-ticket-input-select">
-              <AccountsSelect
-                {...{ account }} onChange={onChangeAccount} showAccountsButton={true} />
-            </div>
-          </div>
-          <div className="stakepool-purchase-ticket-row-num-tickets">
-            <div className="stakepool-purchase-num-tickets-label">
-              <T id="purchaseTickets.ticketAmount" m="Amount" />:</div>
-            <div className="stakepool-purchase-ticket-num-select">
-              <NumTicketsInput
-                required
-                invalid={!canAffordTickets}
-                invalidMessage={<T id="purchaseTickets.errors.insufficientBalance" m="Not enough funds" />}
-                numTickets={numTicketsToBuy}
-                incrementNumTickets={onIncrementNumTickets}
-                decrementNumTickets={onDecrementNumTickets}
-                onChangeNumTickets={onChangeNumTickets}
-                onKeyDown={handleOnKeyDown}
-                showErrors={true}
-              />
-            </div>
-          </div>
-        </div>
-        <div className="stakepool-purchase-ticket-info">
-          <div className="stakepool-purchase-ticket-action-buttons">
-            <TicketsCogs opened={!isShowingAdvanced} onClick={onToggleShowAdvanced} />
-            <ImportScriptIconButton />
-          </div>
-          <TransitionMotionWrapper {...{
-            styles: !isShowingAdvanced ? getQuickBarComponent : getAdvancedComponent,
-            willEnter: !isShowingAdvanced ? () => willEnter(270) : () => willEnter(80),
-            willLeave
-          }}
-          />
-        </div>
-      </div>
-      <div className="stakepool-purchase-ticket-buttons-area">
-        <PassphraseModalButton
-          modalTitle={<T id="tickets.purchaseConfirmation" m="Ticket Purchase Confirmation" />}
-          className="stakepool-content-purchase-button"
-          disabled={getIsValid && !getIsValid()}
-          onSubmit={onPurchaseTickets}
-          buttonLabel={<T id="purchaseTickets.purchaseBtn" m="Purchase" />}
-        />
-        {hasTicketsToRevoke &&
-          <PassphraseModalButton
-            modalTitle={<T id="tickets.revokeConfirmations" m="Revoke Tickets Confirmation" />}
-            className="stakepool-content-revoke-button"
-            onSubmit={onRevokeTickets}
-            buttonLabel={<T id="purchaseTickets.revokeBtn" m="Revoke" />}
-          />
-        }
-      </div>
-    </>);
-};
+}) => (
+<>
+  <div className="purchase-ticket-area-row is-row">
+    <div className="is-row">
+      <div className="purchase-ticket-area-row-label"><T id="purchaseTickets.accountFrom" m="From" />:</div>
+      <AccountsSelect className="stakepool-purchase-ticket-input-select"
+        {...{ account, onChange: onChangeAccount }}/>
+    </div>
+    <div className="is-row purchase-ticket-input-amount">
+      <div className="purchase-ticket-area-row-label">
+        <T id="purchaseTickets.ticketAmount" m="Amount" />:</div>
+      <NumTicketsInput
+        required
+        invalid={!canAffordTickets}
+        invalidMessage={<T id="purchaseTickets.errors.insufficientBalance" m="Not enough funds" />}
+        numTickets={numTicketsToBuy}
+        incrementNumTickets={onIncrementNumTickets}
+        decrementNumTickets={onDecrementNumTickets}
+        onChangeNumTickets={onChangeNumTickets}
+        onKeyDown={handleOnKeyDown}
+        showErrors={true}
+      />
+    </div>
+  </div>
+  <div className="stakepool-purchase-ticket-info">
+    <div className="purchase-ticket-action-buttons is-column">
+      <TicketsCogs opened={!isShowingAdvanced} onClick={onToggleShowAdvanced} />
+      <ImportScriptIconButton />
+    </div>
+    <TransitionMotionWrapper {...{
+      styles: !isShowingAdvanced ? getQuickBarComponent : getAdvancedComponent,
+      willEnter: !isShowingAdvanced ? () => willEnter(270) : () => willEnter(80),
+      willLeave
+    }}
+    />
+  </div>
+  <div className="stakepool-purchase-ticket-buttons-area">
+    {hasTicketsToRevoke &&
+    <PassphraseModalButton
+      modalTitle={<T id="tickets.revokeConfirmations" m="Revoke Tickets Confirmation" />}
+      className="stakepool-content-revoke-button"
+      onSubmit={onRevokeTickets}
+      buttonLabel={<T id="purchaseTickets.revokeBtn" m="Revoke" />}
+    />
+    }
+    <PassphraseModalButton
+      modalTitle={<T id="tickets.purchaseConfirmation" m="Ticket Purchase Confirmation" />}
+      disabled={getIsValid && !getIsValid()}
+      onSubmit={onPurchaseTickets}
+      buttonLabel={<T id="purchaseTickets.purchaseBtn" m="Purchase" />}
+    />
+  </div>
+</>);
 
 export default PurchaseTicketsForm;