From cf24d7da37c5973c16d672cf607a6de601bcb867 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jana=20Deutschl=C3=A4nder?= Date: Tue, 22 Nov 2016 17:24:51 +0100 Subject: [PATCH] structure --- css/area_nav-usertools.less | 11 ++++++ css/base.less | 71 ++++++++++++++++++++++++++++++++-- css/base_mixins.less | 28 ++++++++++++++ css/base_structure.less | 52 +++++++++++++++++++++++++ css/plugins/magic-matcher.less | 1 + lang/de/lang.php | 8 ++++ lang/en/lang.php | 3 ++ main.php | 56 ++++++++++----------------- style.ini | 1 + tpl/nav-direct.php | 2 +- tpl/nav-magicmatcher.php | 19 +++++++++ tpl/nav-usertools.php | 24 ++++++++++++ 12 files changed, 235 insertions(+), 41 deletions(-) create mode 100644 css/area_nav-usertools.less create mode 100644 tpl/nav-magicmatcher.php create mode 100644 tpl/nav-usertools.php diff --git a/css/area_nav-usertools.less b/css/area_nav-usertools.less new file mode 100644 index 0000000..b76032c --- /dev/null +++ b/css/area_nav-usertools.less @@ -0,0 +1,11 @@ +/** + * This file provides the design styles for the direct / menu jump links. + * + * @author Jana Deutschlaender + */ + +.nav-usertools { + ul{ + float: right; + } +} diff --git a/css/base.less b/css/base.less index 1dda690..2f2208c 100755 --- a/css/base.less +++ b/css/base.less @@ -7,22 +7,84 @@ /* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */ /* global vars */ /* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */ + + +/* + + + + + + + + + + + + + + + + + + + + + + + + + + */ +/* fonts */ @line-height-default: 125%; @line-height-big: 135%; @line-height-bigger: 140%; + +/* + + + + + + + + + + + + + + + + + + + + + + + + + + */ +/* breakpoints */ @break-min-xxs: 480; @break-max-xxs: (@break-min-xxs - 1); @break-min-xs: 768; @break-max-xs: (@break-min-xs - 1); +@break-min-sm: 992; +@break-max-sm: (@break-min-xs - 1); + @break-min-md: 1024; @break-max-md: (@break-min-md - 1); -@break-min-lg: 1440; +@break-min-lg: 1200; @break-max-lg: (@break-min-lg - 1); +@break-min-xlg: 1440; +@break-max-xlg: (@break-min-xlg - 1); + + +/* + + + + + + + + + + + + + + + + + + + + + + + + + + */ +/* media queries for breakpoints */ + +@screen_min-xxs: ~"only screen and (min-width: " ~"@{break-min-xxs}px)"; +@screen_max-xxs: ~"only screen and (max-width: " ~"@{break-max-xxs}px)"; + +@screen_min-xs: ~"only screen and (min-width: " ~"@{break-min-xs}px)"; +@screen_max-xs: ~"only screen and (max-width: " ~"@{break-max-xs}px)"; + +@screen_min-sm: ~"only screen and (min-width: " ~"@{break-min-sm}px)"; +@screen_max-sm: ~"only screen and (max-width: " ~"@{break-max-sm}px)"; + +@screen_min-md: ~"only screen and (min-width: " ~"@{break-min-md}px)"; +@screen_max-md: ~"only screen and (max-width: " ~"@{break-max-md}px)"; +@screen_only-md: ~"only screen and (min-width: 800px) and (max-width: " ~"@{break-max-md}px)"; + +@screen_min-lg: ~"only screen and (min-width: " ~"@{break-min-lg}px)"; +@screen_max-lg: ~"only screen and (max-width: " ~"@{break-max-lg}px)"; + +@screen_min-xlg: ~"only screen and (min-width: " ~"@{break-min-xlg}px)"; +@screen_max-xlg: ~"only screen and (max-width: " ~"@{break-max-xlg}px)"; + + +/* + + + + + + + + + + + + + + + + + + + + + + + + + + */ +/* col width */ +@c12: 100%; +@c11: 91.66666667%; +@c10: 83.33333333%; +@c9: 75%; +@c8: 66.66666667%; +@c7: 58.33333333%; +@c6: 50%; +@c5: 41.66666667%; +@c4: 33.33333333%; +@c3: 25%; +@c2: 16.66666667%; +@c1: 8.33333333%; + +@grid-columns: 12; + +/* + + + + + + + + + + + + + + + + + + + + + + + + + + */ +/* margin / padding */ +@margin-big: 2.5rem; + + + + + /* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */ /* all media */ /* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */ @@ -31,11 +93,12 @@ html, body{ .reset(); } -header{ +header, .nav-direct{ .elementsReset(); } + div, span, object, h1, h2, h3, h4, h5, h6, p, blockquote, a, abbr, em,acronym, img, strong, @@ -103,7 +166,7 @@ header, footer, .container, .row, nav, nav > ul{ /* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */ -/* screen */ +/* screen only */ /* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */ @media screen{ @@ -255,7 +318,7 @@ header, footer, .container, .row, nav, nav > ul{ } /* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */ -/* print */ +/* print only */ /* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */ @media print{ body{ diff --git a/css/base_mixins.less b/css/base_mixins.less index 6262a0d..fc23ffd 100644 --- a/css/base_mixins.less +++ b/css/base_mixins.less @@ -78,3 +78,31 @@ } +/* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */ +/* Col Grid */ +/* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */ +.make-grid(@class) { + .float-grid-columns(@class); + .loop-grid-columns(@grid-columns, @class, width); +} + +.float-grid-columns(@class) { + .col-@{class}-1, .col-@{class}-2, .col-@{class}-3, .col-@{class}-4, .col-@{class}-5, .col-@{class}-6, .col-@{class}-7, .col-@{class}-8, .col-@{class}-9, .col-@{class}-10, .col-@{class}-11, .col-@{class}-12 { + float: left; + } +} + +.loop-grid-columns(@index, @class, @type) when (@index >= 0) { + .calc-grid-column(@index, @class, @type); + // next iteration + .loop-grid-columns((@index - 1), @class, @type); +} + +.calc-grid-column(@index, @class, @type) when (@type = width) and (@index > 0) { + .col-@{class}-@{index} { + width: percentage((@index / @grid-columns)); + } +} + + + diff --git a/css/base_structure.less b/css/base_structure.less index f25703d..d635a83 100755 --- a/css/base_structure.less +++ b/css/base_structure.less @@ -3,3 +3,55 @@ * * @author Jana Deutschlaender */ + + +/* Col Grid */ +.make-grid(xs); + +@media screen{ + .container{ + margin: 0 @margin-big; + } +} + +@media @screen_min-xxs { + .container{ + border: 1px solid deeppink; + } +} + +@media @screen_min-xs { + .container{ + border: 1px solid orangered; + } +} + +@media @screen_min-sm { + .container{ + border: 1px solid green; + } + .make-grid(sm); +} + +@media @screen_min-md { + .container{ + border: 1px solid blue; + } + .make-grid(md); +} + +@media @screen_min-lg { + .container{ + border: 1px solid blue; + } + .make-grid(lg); +} + +@media @screen_min-xlg { + html{ + font-size: 130%; + } + .container{ + border: 1px solid red; + } +} diff --git a/css/plugins/magic-matcher.less b/css/plugins/magic-matcher.less index 7086d7f..c358554 100644 --- a/css/plugins/magic-matcher.less +++ b/css/plugins/magic-matcher.less @@ -9,6 +9,7 @@ /* magic matcher bar with form on top of page */ #dokuwiki_magic-matcher{ + #magicmatcher__context{ box-sizing: border-box; background-color: __nav_direct_background__; diff --git a/lang/de/lang.php b/lang/de/lang.php index 985b545..4479980 100755 --- a/lang/de/lang.php +++ b/lang/de/lang.php @@ -9,8 +9,16 @@ $lang['direct_prefix'] = 'Direkt'; $lang['direct_content_main'] = 'Hauptinhalt dieser Seite'; $lang['direct_menu_main'] = 'Hauptmenü'; +$lang['nav-area-head'] = 'Navigationsmenüs und Suche'; +$lang['head_magic_matcher'] = 'MagicMatcher'; + + $lang['discussion'] = 'Diskussion'; $lang['back_to_article'] = 'Zurück zum Artikel'; $lang['userpage'] = 'Benutzer-Seite'; +$lang['__existing__'] = 'The color for links to existing pages'; +$lang['__missing__'] = 'The color for links to non-existing pages'; +$lang['__site_width__'] = 'The width of the full site (can be any length unit: %, px, em, ...)'; +$lang['__sidebar_width__'] = 'The width of the sidebar, if any (can be any length unit: %, px, em, ...)'; //Setup VIM: ex: et ts=2 : diff --git a/lang/en/lang.php b/lang/en/lang.php index dfa6c36..a961924 100755 --- a/lang/en/lang.php +++ b/lang/en/lang.php @@ -8,6 +8,9 @@ $lang['direct_prefix'] = 'jump to'; $lang['direct_content_main'] = 'main content'; $lang['direct_menu_main'] = 'main menu'; +$lang['nav-area-head'] = 'menus and quick search'; +$lang['head_magic_matcher'] = 'MagicMatcher'; + $lang['discussion'] = 'Discussion'; $lang['back_to_article'] = 'Back to article'; $lang['userpage'] = 'User page'; diff --git a/main.php b/main.php index 8992620..fe464fc 100755 --- a/main.php +++ b/main.php @@ -106,58 +106,42 @@ $showSidebar = page_findnearest($conf['sidebar']) && ($ACT=='show'); /* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */ -/* MagicMatcher */ +/* Headline Menu AREA */ /* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */ ?> -
-
- tpl(); - } - ?> -
-
+
+
+
+
- +
+ -
-
    - '.$lang['loggedinas'].' '.userlink().''; - }?> -
    • - tpl_action('admin', 1, 'li', 1), - 'userpage' => _tpl_action('userpage', 1, 'li', 1), - 'profile' => tpl_action('profile', 1, 'li', 1), - 'register' => tpl_action('register', 1, 'li', 1), - )); ?> - -
- - - -
+/* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */ +/* User Tools */ +/* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */ + include('tpl/nav-usertools.php'); ?> +
+
diff --git a/style.ini b/style.ini index a1fdb4d..ccba310 100755 --- a/style.ini +++ b/style.ini @@ -62,6 +62,7 @@ css/area_content.less = all css/area_header.less = all css/area_footer.less = all css/area_nav-direct.less = all +css/area_nav-usertools.less = all ; _____________ plugin styles _____________ diff --git a/tpl/nav-direct.php b/tpl/nav-direct.php index d001e7b..3b3c74e 100644 --- a/tpl/nav-direct.php +++ b/tpl/nav-direct.php @@ -12,7 +12,7 @@ / / - +

diff --git a/tpl/nav-magicmatcher.php b/tpl/nav-magicmatcher.php new file mode 100644 index 0000000..35cf8ec --- /dev/null +++ b/tpl/nav-magicmatcher.php @@ -0,0 +1,19 @@ + + +
+
+ "; + echo tpl_getLang('head_magic_matcher'); + echo ""; + + $mm->tpl(); + } + ?> +
+
diff --git a/tpl/nav-usertools.php b/tpl/nav-usertools.php new file mode 100644 index 0000000..3e02d91 --- /dev/null +++ b/tpl/nav-usertools.php @@ -0,0 +1,24 @@ + + + +