Merge branch 'master' of gitlab.cosmocode.de:deutschlaender/sprintdoc-template into spis-master

2017-03-03 09:24:27 +01:00 · 2017-03-03 09:24:27 +01:00 · c27edccc74
commit c27edccc74
parent 9435a59c74 40201e9c65
15 changed files with 361 additions and 185 deletions
--- a/css/area_footer.less
+++ b/css/area_footer.less
@ -16,10 +16,12 @@
        font-size: @font-size-default;
        text-align: right;
        padding: @margin-small @margin-default;
+
        bdi {
            font-weight: bold;
        }
    }
+
    #dokuwiki__footer {
        .main-footer {
            position: relative;
@ -27,24 +29,30 @@
            box-sizing: border-box;
            background-color: @color-site-bg;
        }
+
        p {
            font-size: @font-size-default;
            margin: 0;
        }
    }
 }
+
+
 /* + + + + + + + + + + + + + + + + + + + + + + + + + + */
 /* min-width: 1024px */
+
@media @screen_min-md {
    #dokuwiki__footer {
        .col-xs-12 {
            float: right;
            width: 100%;
        }
+
        .main-footer {
            padding: @margin-default 0;
        }
    }
+
    .showSidebar {
        #dokuwiki__footer {
            .col-xs-12 {
@ -52,6 +60,7 @@
            }
        }
    }
+
    .wide-content {
        &.showSidebar {
            #dokuwiki__footer {
@ -62,8 +71,11 @@
        }
    }
 }
+
+
 /* + + + + + + + + + + + + + + + + + + + + + + + + + + */
 /* max-width: 1023px */
+
@media @screen_max-md {
    #dokuwiki__footer {
        .main-footer {
--- a/css/area_header.less
+++ b/css/area_header.less
@ -3,3 +3,45 @@
 *
 * @author Jana Deutschlaender <deutschlaender@cosmocode.de>
 */
+
+
+#dokuwiki__header {
+    .menu-togglelink {
+        border: 1px solid @color-border;
+        border-radius: @border-radius;
+        text-align: center;
+        margin: @very-small-spacing -(@very-small-spacing) 0 0;
+
+        font-size: @font-size-small;
+        min-height: 2em;
+        min-width: 2em;
+        box-sizing: border-box;
+        line-height: 2em;
+
+        cursor: pointer;
+        background-color: #fff;
+        text-decoration: none;
+        transition: @transition color, @transition background-color, @transition border-color;
+
+        svg {
+            height: @font-size-default + (@font-scale-factor * 4);
+            width: @font-size-default + (@font-scale-factor * 4);
+            vertical-align: middle;
+
+            path {
+                fill: @color-nav
+            }
+        }
+
+        &:hover,
+        &:active,
+        &:focus {
+            background-color: @button_color;
+            border-color: @button_background;
+
+            svg path {
+                fill: @button_background;
+            }
+        }
+    }
+}
--- a/css/area_main-sidebar-nav.less
+++ b/css/area_main-sidebar-nav.less
@ -4,28 +4,32 @@
 * @author Jana Deutschlaender <deutschlaender@cosmocode.de>
 * @author Andreas Gohr <gohr@cosmocode.de>
 */
+
 #dokuwiki__aside {
    @icon-size: @font-size-big;
    @menu-margin: @icon-size + @margin-small*2; // FIXME this is still wrong

-    margin-left: @menu-margin; // moves *all* sidebar content to the right
+    > * {
+        margin-left: @menu-margin; // moves *all* sidebar content to the right
+    }

    // the toggle element
    a.nav {
-        font-size: @font-size-head6;
-        margin: 0 0 @font-size-head6;
-
        cursor: pointer;
-        font-weight: normal;
+        margin: 0 0 @font-size-head6;
        margin-left: (@menu-margin * -1); // moves the toggles back to the left
        color: @color-nav;
+        font-size: @font-size-head6;
+        font-weight: normal;
        border: 1px solid transparent;
        border-radius: @fix_border-radius;
        transition: @transition color, @transition background-color, @transition border-color;

        height: @icon-size + @margin-small;
        display: flex;
+        display: -ms-flexbox;
        flex-direction: row;
+        -ms-flex-direction: row;
        align-items: center;

        span {
@ -60,13 +64,13 @@
                border: 2px solid @color-nav;
                border-top-right-radius: 50%;
                border-bottom-left-radius: 50%;
-
            }

            // real icon
            svg {
                width: @icon-size;
                height: @icon-size;
+
                path {
                    fill: @color-nav;
                }
@ -98,6 +102,69 @@
    }
 }

+
+/**
+ * Sidebar handling in mobile view
+ */
+
+@media @screen_max-md {
+    // hide on medium and smaller screens
+    #dokuwiki__aside {
+        display: none;
+    }
+
+    // show when toggled
+    body.show-mobile-sidebar {
+
+        #dokuwiki__aside {
+            display: block;
+            position: absolute;
+            left: 1.25rem; //left margin of content container
+            z-index: 200; // above all
+            box-shadow: @box-shadow-right-bottom;
+            min-width: 45%;
+            max-width: 90%;
+            height: auto;
+
+            &:after {
+                content: "";
+                position: absolute;
+                top: 0;
+                left: 0;
+                bottom: 0;
+                right: 0;
+                width: 100%;
+                height: 100%;
+                background: @ini_background;
+                background: -webkit-linear-gradient(left, @ini_background, @color-content-bg);
+                background: linear-gradient(left, @ini_background, @color-content-bg);
+                z-index: 0;
+            }
+
+            > nav {
+                position: relative;
+                //display: block;
+                z-index: 2;
+
+                &:first-child {
+                    margin-top: 1.2rem;
+                }
+            }
+
+            a.nav {
+                border-radius: 0;
+                border-right-width: 0;
+                border-left-width: 0;
+            }
+
+            .nav-panel,
+            a.nav {
+                padding-right: .8em;
+            }
+        }
+    }
+}
+
 // FIXME check if the stuff below is still relevant

 /* + + + + + + + + + + + + + + + + + + + + + + + + + + */
@ -127,6 +194,7 @@
    }
 }

+
 /* + + + + + + + + + + + + + + + + + + + + + + + + + + */
 /* max-width: 1199px */

--- a/css/area_nav-breadcrumb.less
+++ b/css/area_nav-breadcrumb.less
@ -159,7 +159,10 @@
            right: 0;
            width: auto;
            border: 0 none;
-            background: @color-site-bg;
+            background: @background_page-header;
+            background: -webkit-linear-gradient(top, @background_page-header, @color-content-bg);
+            background: linear-gradient(top, @background_page-header, @color-content-bg);
+            box-shadow: @box-shadow-bottom;
            z-index: 2000;

            #plugin__qc__out{
--- a/css/base.less
+++ b/css/base.less
@ -34,6 +34,8 @@
@box-shadow-offset:      __box_shadow_offset__;
@box-shadow:             __box_shadow__;
@box-shadow-colored:     __box_shadow_colored__;
+@box-shadow-right-bottom:__box_shadow_right_bottom__;
+@box-shadow-bottom:      __box_shadow_bottom__;

@th_background:          __background_alt__;

--- a/css/base_structure.less
+++ b/css/base_structure.less
@ -130,13 +130,13 @@
        display: table-cell;
        height: 100%;
        vertical-align: middle;
+
        .logo {
            /*position: absolute;
            bottom: 1em;
            overflow: visible;*/
            padding: 1rem 0 .3rem;

-
            img {
                height: 4.6rem;
                width: auto;
@ -164,22 +164,21 @@
        }
    }

-    .wide-content{
-        .logo{ }
+    .wide-content {
        .content {
            .row > .col-xs-12 {
                width: auto;
                float: none;
            }
        }
-        &.showSidebar{
+
+        &.showSidebar {
            .content {
                .row > .col-xs-12 {
                    margin-left: @toggle-showsidebar_width;
                }
            }
        }
-
    }

    .main-sidebar {
@ -233,13 +232,39 @@
    }
 }

-@media @screen_max-md{
-    .claim{
+@media @screen_max-md {
+    .claim {
        min-height: 3rem;
-        .logo{
-            .mobile-only{
+
+        .logo {
+            .mobile-only {
                margin: .8rem 1rem .6rem 0;
            }
        }
    }
 }
+
+@media @screen_max-xxs {
+    @mobileMargin: 4px;
+
+    .container {
+        margin: 0 @mobileMargin;
+    }
+
+    body.show-mobile-sidebar #dokuwiki__aside {
+        left: @mobileMargin;
+    }
+
+    #dokuwiki__usertools {
+        right: @mobileMargin;
+    }
+
+    #dokuwiki__footer {
+        .main-footer {
+            > * {
+                padding-left: 2rem;
+                padding-right: 2rem;
+            }
+        }
+    }
+}