Make order details panel visible.

client/modules/core/main.js

@@ -624,16 +624,10 @@ export default {
 
   setActionViewDetail(viewData, options = {}) {
     const { open } = options;
-    const currentRouteName = this.Router.getRouteName();
 
     Session.set("admin/showActionView", true);
     Session.set("admin/showActionViewDetail", typeof open === "boolean" ? open : true);
-
-    if (currentRouteName !== "index") {
-      Session.set("admin/actionView", [viewData]);
-    } else if (viewData) {
-      Session.set("admin/detailView", [viewData]);
-    }
+    Session.set("admin/detailView", [viewData]);
   },
 
   pushActionViewDetail(viewData) {

imports/plugins/core/dashboard/client/components/actionView.js

@@ -89,8 +89,8 @@ const getStyles = (props) => {
     masterViewPanel: {
       display: "flex",
       flexDirection: "column",
-      flex: "1 1 auto"
-      // height: "100%"
+      flex: "1 1 auto",
+      width: "50%"
     },
     masterView: {
       flex: "1 1 auto",

imports/plugins/core/dashboard/client/containers/packageListContainer.js

@@ -21,6 +21,7 @@ function handleShowPackage(event, app) {
  * @return {undefined} No return value
  */
 function handleShowDashboard() {
+  Reaction.hideActionViewDetail();
   Reaction.showActionView({
     i18nKeyTitle: "dashboard.coreTitle",
     title: "Dashboard",

imports/plugins/core/orders/client/components/orderDashboard.js

@@ -59,29 +59,31 @@ class OrderDashboard extends Component {
 
   render() {
     return (
-      <div>
+      <div className="orders-table-container">
         <OrderActions
           handleMenuClick={this.props.handleMenuClick}
           clearFilter={this.props.clearFilter}
           filter={this.props.filter}
           className={this.props.className}
         />
         {this.state.orders.length ?
-          <div className="container-fluid-sm">
-            <div className="order-toggle-buttons">
-              <button
-                className={`order-toggle-btn ${this.state.detailClassName}`}
-                onClick={this.handleDetailToggle}
-              >
-                <i className="fa fa-th-list" />
-              </button>
+          <div className="container-fluid-sm order-details-list-container">
+            <div className="order-toggle-buttons-container">
+              <div className="order-toggle-buttons">
+                <button
+                  className={`order-toggle-btn ${this.state.detailClassName}`}
+                  onClick={this.handleDetailToggle}
+                >
+                  <i className="fa fa-th-list" />
+                </button>
 
-              <button
-                className={`order-toggle-btn ${this.state.listClassName}`}
-                onClick={this.handleListToggle}
-              >
-                <i className="fa fa-list" />
-              </button>
+                <button
+                  className={`order-toggle-btn ${this.state.listClassName}`}
+                  onClick={this.handleListToggle}
+                >
+                  <i className="fa fa-list" />
+                </button>
+              </div>
             </div>
 
             <div>
@@ -104,7 +106,7 @@ class OrderDashboard extends Component {
               />
             </div>
           </div> :
-          <div className="container-fluid-sm">
+          <div className="container-fluid-sm order-details-list-container">
             <div className="empty-view-message">
               <Icon icon="fa fa-sun-o" />
               <Translation defaultValue={"No orders found"} i18nKey={"order.ordersNotFound"} />

imports/plugins/core/orders/client/components/orderTable.js

@@ -14,20 +14,20 @@ import ProductImage from "./productImage";
 const classNames = {
   colClassNames: {
     "Name": "order-table-column-name",
-    "Email": "order-table-column-email hidden-xs hidden-sm",
+    "Email": "order-table-column-email",
     "Date": "order-table-column-date hidden-xs hidden-sm",
-    "ID": "order-table-column-id hidden-xs",
-    "Total": "order-table-column-total hidden-xs",
+    "ID": "order-table-column-id hidden-xs hidden-sm",
+    "Total": "order-table-column-total",
     "Shipping": "order-table-column-shipping hidden-xs hidden-sm",
     "Status": "order-table-column-status",
     "": "order-table-column-control"
   },
   headerClassNames: {
     "Name": "order-table-header-name",
-    "Email": "order-table-header-email hidden-xs hidden-sm",
+    "Email": "order-table-header-email",
     "Date": "order-table-header-date hidden-xs hidden-sm",
-    "ID": "order-table-header-id hidden-xs",
-    "Total": "order-table-header-total hidden-xs",
+    "ID": "order-table-header-id hidden-xs hidden-sm",
+    "Total": "order-table-header-total",
     "Shipping": "order-table-header-shipping hidden-xs hidden-sm",
     "Status": "order-table-header-status",
     "": "order-table-header-control"
@@ -315,7 +315,7 @@ class OrderTable extends Component {
     }
 
     return (
-      <div>
+      <div className="order-details-table">
         {this.props.isOpen &&
           <OrderBulkActionsBar
             shipping={this.props.shipping}

imports/plugins/core/orders/client/containers/orderDashboardContainer.js

@@ -232,15 +232,14 @@ class OrderDashboardContainer extends Component {
       Reaction.setUserPreferences(PACKAGE_NAME, ORDER_LIST_FILTERS_PREFERENCE_NAME, "processing");
     }
 
-    const id = Reaction.Router.getQueryParam("_id");
-
-    if (id === undefined) {
-      Reaction.setUserPreferences(PACKAGE_NAME, ORDER_LIST_SELECTED_ORDER_PREFERENCE_NAME, order._id);
-    } else {
-      Reaction.Router.go("dashboard/orders", {}, {
-        _id: order._id
-      });
-    }
+    /* TODO: 
+    a) What other routes have a query parameter of _id=XXXXXXX ?
+    b) What exactly are we using the order dashboard for? If it's search,
+     well, clicking a search result doesn't CURRENTLY do anything. What's
+     more, there's some debate as to whether that SHOULD link to anywhere.
+     And if it should, why not the existing, modal orders panel?
+    */
+    Reaction.setUserPreferences(PACKAGE_NAME, ORDER_LIST_SELECTED_ORDER_PREFERENCE_NAME, order._id);
   }
 
   /**

imports/plugins/included/default-theme/client/styles/dashboard/orders.less

@@ -445,12 +445,14 @@
   margin-bottom: 20px;
 
   .controls {
-    width: 66px;
+    width: 10%;
     max-width: 66px;
   }
 
   .content {
     padding: 0px;
+    width: 90%;
+    overflow-x: hidden;
   }
 
   .shipment-info {
@@ -624,119 +626,127 @@
 // Order Table Styles
 .rui.order.table {
   border-top: none;
+  width: auto;
+
+  @media only screen and (max-width: 740px) {
+      max-width: 100%;
+      > div {
+        margin: 0 auto;
+      }
+  }
+
+  @media screen and (max-width: 745px) and (min-width: 710px) {
+    div[data-radium] {
+      display: none;
+    }
+  }
 
   // Table Headers
   .order-table-header-name {
     border-right: none;
     text-align: left;
     padding-top: 8px;
 
-    flex: 250 0 auto;
-    width: 250px;
-    max-width: 250px;
+    min-width: 20%;
+    max-width: 100%;
   }
   .order-table-header-email {
     border-right: none;
-    text-align: left;
+    text-align: center;
     padding-top: 19px;
+
+    min-width: 15%;
+    max-width: 100%;
   }
   .order-table-header-date {
     border-right: none;
     text-align: center;
     padding-top: 19px;
 
-    flex: 120 0 auto;
-    width: 120px;
-    max-width: 120px;
+    min-width: 10%;
+    max-width: 100%;
   }
   .order-table-header-id {
     border-right: none;
     text-align: center;
     padding-top: 19px;
 
-    flex: 90 0 auto;
-    width: 90px;
-    max-width: 90px;
+    min-width: 5%;
+    max-width: 50%;
   }
   .order-table-header-total {
     border-right: none;
     text-align: center;
     padding-top: 19px;
 
-    flex: 100 0 auto;
-    width: 100px;
-    max-width: 100px;
+    min-width: 15%;
+    max-width: 50%;
   }
   .order-table-header-shipping {
     border-right: none;
     text-align: center;
     padding-top: 19px;
 
-    flex: 100 0 auto;
-    width: 100px;
-    max-width: 100px;
+    min-width: 15%;
+    max-width: 100%;
   }
   .order-table-header-status {
     border-right: none;
     text-align: center;
     padding-top: 19px;
 
-    flex: 150 0 auto;
-    width: 150px;
-    max-width: 150px;
+    min-width: 15%;
+    max-width: 100%;
   }
 
   .order-table-header-control {
-    flex: 50 0 auto;
-    width: 50px;
-    max-width: 50px;
+    min-width: 5%;
+    max-width: 50%;
   }
 
   // Table Columns
   .order-table-column-name {
     border-right: 1px solid @black10;
 
-    flex: 250 0 auto;
-    width: 250px;
-    max-width: 250px;
+    min-width: 20%;
+    max-width: 100%;
+  }
+  .order-table-column-email {
+    text-align: center;
+    min-width: 15%;
+    max-width: 100%;
   }
-
   .order-table-column-date {
     text-align: center;
 
-    flex: 120 0 auto;
-    width: 120px;
-    max-width: 120px;
+    min-width: 10%;
+    max-width: 100%;
   }
   .order-table-column-id {
     text-align: center;
 
-    flex: 90 0 auto;
-    width: 90px;
-    max-width: 90px;
+    min-width: 5%;
+    max-width: 50%;
   }
   .order-table-column-total {
     text-align: center;
 
-    flex: 100 0 auto;
-    width: 100px;
-    max-width: 100px;
+    min-width: 15%;
+    max-width: 50%;
   }
   .order-table-column-shipping {
-    text-align: right;
+    text-align: center;
     margin-top: 2px;
 
-    flex: 100 0 auto;
-    width: 100px;
-    max-width: 100px;
+    min-width: 15%;
+    max-width: 100%;
   }
   .order-table-column-status {
-    text-align: right;
+    text-align: center;
     margin-top: 2px;
 
-    flex: 150 0 auto;
-    width: 150px;
-    max-width: 150px;
+    min-width: 15%;
+    max-width: 100%;
   }
 
   .order-table-column-control {
@@ -745,9 +755,8 @@
     // height: 100%;
     padding: 0;
     height: 49px;
-    flex: 50 0 auto;
-    width: 50px;
-    max-width: 50px;
+    min-width: 5%;
+    max-width: 50%;
     button {
       flex: 1 1 auto;
       border-radius: 0;
@@ -1095,4 +1104,41 @@
   .order-filter-button:focus {
     outline: none;
   }
-}
+}
+
+@media only screen and (max-width: 768px) {
+  .hidden-sm {
+    display: none;
+  }
+}
+
+@media only screen and (max-width: 350px) {
+  .hidden-xs {
+    display: none;
+  }
+
+  .rui.order.table {
+    max-width: 100%;
+  }
+}
+
+@media only screen and (max-width: 895px) and (min-width: 1264px) {
+  .rui.admin.action-view-pane.action-view > div[data-radium] {
+    width: 50%;
+  }
+}
+
+.orders-table-container {
+  display: flex;
+  flex-direction: column;
+}
+
+.order-details-list-container {
+  display: flex;
+  flex-direction: column
+}
+
+.order-details-table {
+  width: 100%;
+  margin: 0 auto;
+}