Adapt to bootstrap, add common_header for css & js script in common_footer

Use modal for langs switch
Don't inject anymore nav css in html

1 files changed, 36 insertions, 8 deletions

diff --git a/langs.php b/langs.php
index ce48933fa..37cbf8944 100644
--- a/langs.php
+++ b/langs.php
@@ -68,25 +68,50 @@ foreach ($langs as $k => $v) {
         $k,
         $k == $locale ? ' selected="selected"' : '',
         $v);
+        $k == $locale ? $fulllang = $v: '';
 }
 
 $options = implode($options);
 $langsForm = <<<H
-<form id="lang_form" dir="ltr" method="get" action="/">
-    <input type="hidden" name="furl" value="{$_SERVER['REQUEST_URI']}" />
-    <select id="flang" name="flang" dir="ltr" onchange="this.form.submit()">
-        {$options}
-    </select>
-    <noscript><div><input type="submit" id="lang_submit" value="Hop!" /></div></noscript>
-</form>
+</ul><ul class="navbar-nav"><li class="nav-item"><a class="nav-link globe-icon" href="#langsModal" data-toggle="modal" data-target="#langsModal">{$fulllang}</a></li>
 H;
 
-$hsnav = _mgnav_style() . _mgnav_html(true, $locale, $langsForm, $_SERVER['HTTP_HOST']);
+$langsmodal = <<<H
+<div class="modal fade" id="langsModal">
+   <div class="modal-dialog">
+      <div class="modal-content">
+        <div class="modal-header">
+          <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
+        </div>
+       <div class="modal-body">
+            <form class="form-group" id="lang_form" dir="ltr" method="get" action="/">
+            <input class="form-control" type="hidden" name="furl" value="{$_SERVER['REQUEST_URI']}" />
+                <select class="form-control custom-select" id="flang" name="flang" dir="ltr" onchange="this.form.submit()">
+                {$options}
+                </select>
+            <noscript><div><input type="submit" id="lang_submit" value="Hop!" /></div></noscript>
+            </form>
+        </div>
+      </div>
+    </div>
+</div> <!--end modal -->
+H;
+
+// _mgnav_style() no more needed
+$hsnav = _mgnav_html(true, $locale, $langsForm, $_SERVER['HTTP_HOST']). $langsmodal; 
 $hsfoot = '';
 
 if (!defined('HLANG'))
     echo $hsnav;
 
+function common_header(){
+    $common_header = '<meta name="viewport" content="width=device-width, initial-scale=1.0">' . PHP_EOL;
+    $common_header .= '    <link rel="stylesheet" href="/g/style/bootstrap.min.css">' . PHP_EOL;
+    $common_header .= '    <link rel="stylesheet" href="/g/style/bootstrap_theme.css">' . PHP_EOL;
+    $common_header .= '    <link rel="stylesheet" href="/g/style/common_footer.css">' . PHP_EOL;
+    return $common_header;
+}
+
 /**
     * Output common footer in passed language
     *
@@ -121,6 +146,9 @@ function common_footer($locale = 'en')
     $common_footer .= '        </p>' . PHP_EOL;
     $common_footer .= '    </div>' . PHP_EOL;
     $common_footer .= '</div>' . PHP_EOL;
+    $common_footer .= '<script src="/g/js/jquery-3.2.1.min.js"></script>' . PHP_EOL;
+    $common_footer .= '<script src="/g/js/tether.min.js"></script>' . PHP_EOL;
+    $common_footer .= '<script src="/g/js/bootstrap.min.js"></script>' . PHP_EOL;
 
     return $common_footer;
 }