From a4ac4a3bba392abb397ee3910d5b1cb6a301e1da Mon Sep 17 00:00:00 2001
From: Silke Pisulla <pisulla@cosmocode.de>
Date: Wed, 22 Mar 2017 13:23:03 +0100
Subject: [PATCH] SPR-908: admintools in mobile

---
 css/template_admin.less | 98 ++++++++++++++++++++++++++++++-----------
 1 file changed, 73 insertions(+), 25 deletions(-)

diff --git a/css/template_admin.less b/css/template_admin.less
index 1dc739c..d0dda37 100644
--- a/css/template_admin.less
+++ b/css/template_admin.less
@@ -1,42 +1,90 @@
+/**
+ * This file provides the design styles for the admin tools
+ *
+ * @author Jana Deutschlaender <deutschlaender@cosmocode.de>
+ */
+
 .do-admin {
     #admin__version {
         font-size: @font-size-default;
     }
+
     .main-content ul {
-         > li{
+        > li {
             font-size: @font-size-default;
 
-             div.li{
-                 font-size: @font-size-default;
+            div.li {
+                font-size: @font-size-default;
 
-                 a{
-                     font-size: @font-size-default;
-                     line-height: 125%;
-                     cursor: pointer;
-                 }
-             }
-        }
-    }
-
-    ul.admin_tasks {
-        padding: 0;
-
-        li {
-            background-size: auto 1rem;
-            margin: 0 0 .6em 0;
-
-            a {
-                font-weight: 400;
+                a {
+                    font-size: @font-size-default;
+                    line-height: 125%;
+                    cursor: pointer;
+                }
             }
         }
     }
 
-    @media @screen_max-md {
+    div.ui-admin {
         ul.admin_tasks {
-            float: none;
-            width: auto;
-        }
+            padding: 0;
 
+            li {
+                background-size: auto 1rem;
+                margin: 0 0 .6em 0;
+
+                a {
+                    font-weight: 400;
+
+                    span.icon {
+                        margin-top: -.2rem;
+                        margin-bottom: .2rem;
+                    }
+                }
+            }
+        }
     }
 }
 
+
+/* + + + + + + + + + + + + + + + + + + + + + + + + + + */
+/* 1024px */
+
+@media @screen_max-md {
+    .do-admin {
+        div.ui-admin {
+            ul.admin_tasks {
+                width: 50%;
+                padding-top: 1rem;
+
+                li {
+                    white-space: normal;
+
+                    a {
+                        .display-flex(); // for better position with line breaks (white-space)
+
+                        span.icon {
+                            margin-top: -.3rem;
+                            margin-bottom: .3rem;
+                        }
+                    }
+                }
+            }
+        }
+    }
+}
+
+
+/* + + + + + + + + + + + + + + + + + + + + + + + + + + */
+/* 768px */
+
+@media @screen_max-xs {
+    .do-admin {
+        div.ui-admin {
+            ul.admin_tasks {
+                width: auto;
+                padding-top: 1rem;
+            }
+        }
+    }
+}