diff options
| author | Manuel Hiebel <leuhmanu@mageia.org> | 2017-02-12 21:37:37 +0100 |
|---|---|---|
| committer | Manuel Hiebel <leuhmanu@mageia.org> | 2017-02-12 21:52:12 +0100 |
| commit | 23dfa3d86bd16411b6400079a495865dac4cfe78 (patch) | |
| tree | c68575dd7732400acc88ff445d1dcf6bc8a9bcaa /en/doc | |
| parent | 6524c62b70acc03e05c00b7f38b39112bf97e982 (diff) | |
| download | www-23dfa3d86bd16411b6400079a495865dac4cfe78.tar www-23dfa3d86bd16411b6400079a495865dac4cfe78.tar.gz www-23dfa3d86bd16411b6400079a495865dac4cfe78.tar.bz2 www-23dfa3d86bd16411b6400079a495865dac4cfe78.tar.xz www-23dfa3d86bd16411b6400079a495865dac4cfe78.zip | |
better display of the table
use flexbox do have adaptive layout (responsive design)
enable viewport (mobile view)
don't show all language as default, you can click on a arrow to see them
Diffstat (limited to 'en/doc')
| -rw-r--r-- | en/doc/doc.php | 20 | ||||
| -rw-r--r-- | en/doc/index.php | 47 |
2 files changed, 50 insertions, 17 deletions
diff --git a/en/doc/doc.php b/en/doc/doc.php index f15cf7c8f..a0e3f0383 100644 --- a/en/doc/doc.php +++ b/en/doc/doc.php @@ -78,7 +78,7 @@ function doc_list($documentation_name, $type, $version) $other_languages_present = FALSE; $note_printed = FALSE; $table = PHP_EOL . '<table class="dlt2 dlinfo" style="font-size: 10pt;">' . PHP_EOL; - $table .= "\t<tbody>" . PHP_EOL; + foreach ($documentation[$type][$version] as $lng) { // hopefully temporary exception for pt-br as convention for lang-abbrev in /langs.inc.php is different as link in doc.mageia.org $lng_name = $langs[locale_underscore_to_hyphen($lng)]; @@ -125,12 +125,12 @@ function doc_list($documentation_name, $type, $version) if ($your_language_present) { $text_your_language = '<span style="font-weight:bold">' . _r('Documentation in your language:') . '</span><br/>'; if ($other_languages_present) { - $text_others = '<span style="font-weight:bold">' . _r('Other languages:') . '</span>'; + $text_others = '<span style="font-weight:bold">' . _r('Other languages: ') . '<a href="#table-'.$name.'" onclick="toggle_visibility(\'table-'.$name.'\');"> ↘ </a></span>'; } - $table .= sprintf("\t\t<tr><td>%s</td></tr>" . PHP_EOL . - "\t\t<tr><td> </td></tr>" . PHP_EOL . - "\t\t<tr><td>%s</td></tr>" . PHP_EOL, - $your_language, $text_others); + $table .= sprintf("\t<caption>%s</caption>" . PHP_EOL . + "\t<thead><tr><th>%s</th></tr></thead>" . PHP_EOL . + '<tbody id="table-%s">' . PHP_EOL , + $your_language, $text_others, $name); } else { foreach($documentation[$type] as $single_version => $all_languages) { if($single_version < $version && in_array($link_locale, $all_languages)) { @@ -143,10 +143,10 @@ function doc_list($documentation_name, $type, $version) } } $text_your_language = _r('Please help <a href="../community/">us</a> translate it in your language.') . '<br/>'; - $table .= sprintf("\t\t<tr><td>%s</td></tr>" . PHP_EOL . - "\t\t<tr><td>%s</td></tr>" . PHP_EOL . '%s' . - "\t\t<tr><td> </td></tr>" . PHP_EOL, - '<span style="font-weight:bold">' . $documentation_name . '</span>', $text_your_language, $language_present_before); + $table .= sprintf("\t<caption>%s<br/>" . PHP_EOL . + "\t%s<span style=\"font-weight:bold\"><a href=\"#\" onclick=\"toggle_visibility('table-$name');\"> ↘ </a></span></caption>" . PHP_EOL . '%s' . + "\t<tbody id=table-%s>" . PHP_EOL , + '<span style="font-weight:bold">' . $documentation_name . '</span>', $text_your_language, $language_present_before, $name); } foreach ($others as $other_languages) { $table .= sprintf("\t\t<tr><td>%s</td></tr>" . PHP_EOL, $other_languages); diff --git a/en/doc/index.php b/en/doc/index.php index e36897fcb..8207a5bb8 100644 --- a/en/doc/index.php +++ b/en/doc/index.php @@ -11,17 +11,39 @@ require 'doc.php'; <html lang="<?php echo $locale; ?>" dir="ltr"> <head> <meta charset="utf-8"> + <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title><?php _g('Mageia Documentation')?></title> <meta name="description" content="<?php _g('Documentation for Mageia distribution and its tools.')?>"> <meta name="keywords" content="<?php _g('doc,documentation,help,guide,installer,installation,mageia,linux')?>"> <link rel="stylesheet" href="/g/style/all.css" type="text/css"> <link rel="stylesheet" type="text/css" href="/g/style/common_footer.css"> <?php include '../../analytics.php'; ?> + <style> + #flex-container { + display: flex; + flex-wrap:wrap; + } + #flex-item { + flex: 1 150px; + margin: 1em; width: 24em; + } + .dlt2 thead th, .dlt2 th.h { + color: #aaa; + font-size: 100%; + } + @media (max-width: 750px) { + #doc6 { width:100%; } + tbody { display: none; } + } + @media (min-width: 750px) { + tbody { display: none; } + } + </style> </head> <body class="doc"> <?php echo $hsnav; ?> <h1 id="mgnavt"><?php _g('Mageia Documentation')?></h1> - <div id="doc" class="yui-t7" style="margin-bottom: 0px;"> + <div id="doc6" class="yui-t7" style="margin-bottom: 0px; max-width: 950px;"> <div id="bd" role="main"> <div class="yui-g"> <div class="para donate" style="padding-top: 2em;"> @@ -33,19 +55,30 @@ require 'doc.php'; <?php _g('Documentation built using the <a href="%s">Calenco tool from NeoDoc</a>.', 'http://www.neodoc.biz/', 'p')?> <hr> <h3>Mageia 5</h3> - <div style="float: left; margin: 1em; width: 24em;"> - <p style="margin-left: 2em;"><?php doc_list(_r('Installer'), 'installer', 5); ?></p> + <div id="flex-container"> + <div id="flex-item"> + <?php doc_list(_r('Installer'), 'installer', 5); ?> </div> - <div style="float: right; margin: 1em; width: 24em;"> - <p style="margin-left: 2em;"><?php doc_list(_r('Control Center'), 'control_center', 5); ?></p> + <div id="flex-item"> + <?php doc_list(_r('Control Center'), 'control_center', 5); ?> </div> - <div style="float: right; margin: 1em; width: 24em;"> - <p style="margin-left: 2em;"><?php doc_list(_r('Installation from LIVE medium'), 'draklive', 5); ?></p> + <div id="flex-item"> + <?php doc_list(_r('Installation from LIVE medium'), 'draklive', 5); ?> </div> + </div><!--flex-container--> </div> </div> </div> </div> <?php echo common_footer($locale); ?> +<script type="text/javascript"> +function toggle_visibility(id) { + var e = document.getElementById(id); + if(e.style.display == 'block') + e.style.display = 'none'; + else + e.style.display = 'block'; +} +</script> </body> </html> |