New trading interface and moving bug fixes.

src/style.scss

@@ -268,8 +268,77 @@ $tab-margin: 0.3rem;
 
 .player-trade-resources .resource-unit {
     display: inline-block;
+    margin-bottom: 0.3rem;
     width: 4rem; }
 
+.resource-unit.double-width {
+    width: 84px;
+}
+
+.resource-unit.double-width .button:last-child {
+    margin-left: 0.2rem;
+}
+
+.player-trade-resources img {
+    margin-top: 0.2rem;
+    margin-bottom: 0.2rem; }
+
+.trade-player-container {
+    border: 0.2rem solid $dark-color;
+    border-radius: 0.2rem;
+    background: #ccc;
+    padding: 0.3rem;
+    .button {
+        margin: 0; }
+}
+
+$trade-margin: 3rem;
+.resources-to-trade {
+    margin-left: 0.5rem;
+    visibility: hidden;
+    .resource-unit {
+        position: relative;
+        margin-top: $trade-margin / 2;
+        margin-bottom: $trade-margin / 2;
+    }
+
+    .trade-asset-cancel {
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        color: red;
+        padding: 0.2rem;
+        display: none;
+        cursor: pointer;
+        opacity: 0.7;
+        svg {
+            width: 100%;
+            height: 100%;
+        }
+    }
+
+    .trade-to {
+        margin-top: ($trade-margin / 2) - 1.2;
+        margin-bottom: ($trade-margin / 2) + 1.2;
+        visibility: visible;
+    }
+
+    .trade-to:hover .trade-asset-cancel {
+        display: block;
+    }
+    .trade-from:hover .trade-asset-cancel {
+        display: block;
+    }
+
+    .trade-from {
+        margin-bottom: ($trade-margin / 2) - 1.2;
+        margin-top: ($trade-margin / 2) + 1.2;
+        visibility: visible;
+    }
+}
+
 .card-id {
     position: absolute;
     top: 10px;
@@ -305,6 +374,7 @@ $tab-margin: 0.3rem;
 }
 
 .resource-unit {
+    position: relative;
     text-align: center;
     margin-right: 0.5rem;
     width: 40px;
@@ -313,6 +383,19 @@ $tab-margin: 0.3rem;
         height: 34px; }
 }
 
+.resource-doubled {
+    position: absolute;
+    top: -0.7rem;
+    right: -0.2rem;
+    color: blue;
+    font-size: 1.4rem;
+    padding: 0.1rem;
+    transform: rotate(17deg);
+    svg {
+        filter: drop-shadow( 1px 1px 1px rgba(0, 0, 0, .7));
+    }
+}
+
 .resource-unit-container {
     display: flex;
     flex-direction: row; }
@@ -556,12 +639,17 @@ $tab-margin: 0.3rem;
     max-height: 80vh;
     @include breakpoint(medium down) {
         flex-grow: 2;
+        max-width: 82vw;
     }
     @include breakpoint(large) {
         width: 26rem;
     }
 }
 
+.trade-tab {
+    min-width: 26rem;
+}
+
 .static-tab-container {
     overflow-y: auto;
     max-height: 80vh;