Merge pull request #832 from epwinchell/dual_list_mobile

PF4 Dual List Select mobile styling

Author: Hyperkid123

packages/pf4-component-mapper/src/files/dual-list-select.js

@@ -7,6 +7,8 @@ import {
   Bullseye,
   Button,
   ButtonVariant,
+  Flex,
+  FlexItem,
   Grid,
   GridItem,
   Text,
@@ -203,33 +205,33 @@ const DualList = ({
           </Grid>
         </GridItem>
         <GridItem md={2}>
-          <Bullseye>
-            <Grid>
-              <GridItem md={12} sm={3}>
+          <Bullseye className="ddorg__pf4-component-mapper__dual-list-select-buttons">
+            <Flex direction={{ md: 'column', sm: 'row' }}>
+              <FlexItem>
                 <Button disabled={leftValues.length === 0} onClick={handleMoveRight} title={moveRightTitle} variant="plain">
                   <AngleRightIcon size="md" />
                 </Button>
-              </GridItem>
+              </FlexItem>
               {allToRight && (
-                <GridItem md={12} sm={3}>
+                <FlexItem>
                   <Button disabled={leftValues.length === 0} onClick={handleClearLeftValues} title={moveAllRightTitle} variant="plain">
                     <AngleDoubleRightIcon size="md" />
                   </Button>
-                </GridItem>
+                </FlexItem>
               )}
               {allToLeft && (
-                <GridItem md={12} sm={3}>
+                <FlexItem>
                   <Button disabled={rightValues.length === 0} onClick={handleClearRightValues} title={moveAllLeftTitle} variant="plain">
                     <AngleDoubleLeftIcon size="md" />
                   </Button>
-                </GridItem>
+                </FlexItem>
               )}
-              <GridItem md={12} sm={3}>
+              <FlexItem>
                 <Button disabled={rightValues.length === 0} onClick={handleMoveLeft} title={moveLeftTitle} variant="plain">
                   <AngleLeftIcon size="md" />
                 </Button>
-              </GridItem>
-            </Grid>
+              </FlexItem>
+            </Flex>
           </Bullseye>
         </GridItem>
         <GridItem md={5}>

packages/pf4-component-mapper/src/files/dual-list-select.scss

@@ -25,3 +25,17 @@
     background-color: var(--pf-global--active-color--400);
     color: white
 }
+
+@media only screen and (max-width: 768px) {
+    .ddorg__pf4-component-mapper__dual-list-select-buttons {
+        padding-top: var(--pf-global--gutter--md);
+        svg {
+          -webkit-transform: rotate(90deg);
+          -moz-transform: rotate(90deg);
+          -ms-transform: rotate(90deg);
+          -o-transform: rotate(90deg);
+          transform: rotate(90deg);
+          display: inline-block;
+        }
+    }
+}