From 125e8f6bff6e613c9c8310ef11fd5e13866c3901 Mon Sep 17 00:00:00 2001
From: Manuel Hiebel <leuhmanu@mageia.org>
Date: Wed, 5 Jul 2017 11:56:27 +0200
Subject: adapt to bootstrap

+ clean head
+ add common_header
+ remove custom unnecessary css
+ switch to bootstrap carousel
+ move JS script before </body>
---
 en/6/download_index.php | 92 +++++++++++++++++--------------------------------
 en/6/nav.php            |  6 ++--
 2 files changed, 34 insertions(+), 64 deletions(-)

(limited to 'en/6')

diff --git a/en/6/download_index.php b/en/6/download_index.php
index c78fe4bad..314e8c870 100755
--- a/en/6/download_index.php
+++ b/en/6/download_index.php
@@ -65,40 +65,10 @@ function get_image($ttl, $src, $sty){
     <meta name="keywords" content="<?php _g('mageia, %s, linux, free, download, iso, torrent, vm, http, ftp, rsync, bittorrent', array("$name $version"))?>">
     <meta name="robots" content="index,nofollow,nosnippet">
     <link rel="canonical" href="/<?php echo $locale.'/'.$version;?>/">
-    <link rel="stylesheet" href="/g/style/all.css">
-    <link rel="stylesheet" type="text/css" href="/g/style/common_footer.css">
-    <script src="/g/js/jquery-1.10.1.min.js"></script>
-    <script src="/g/js/tooltipsy.min.js"></script>
+    <?php echo common_header(); ?>
     <?php include '../../analytics.php'; ?>
     <style>
-.radiobutton{
-    display: table;
-    border-spacing:0.4em 0;
-    margin: 0px auto; 
-}
-.radiobutton .ui-button{
-    display: table-cell;
-    height: 100%;
-}
-.ui-button,.ui-button:link {
-    border: 1px solid #AED0EA;
-    -moz-box-sizing: content-box;
-    outline: 0 none !important;
-    background: repeat-x scroll 50% 50% #D7EBF9;
-    font-size: 1.4em;
-    cursor: pointer;
-    text-align: center;
-    vertical-align: middle;
-    border-radius: 6px;
-    padding: .5em .4em;
-    min-width: 200px;
-    text-decoration: none;
-    color: black;
-    text-shadow: 1px 2px 3px rgba(0,0,0, 0.5);
-    -moz-box-shadow: 0 0 5px rgba(0, 0, 0, .5);
-    -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, .5);
-    box-shadow: 2px 2px 5px rgba(0, 0, 0, .5);
-}
+
 .iso2usb {cursor:pointer}
 
 input[type="radio"]:checked + label,.ui-button:active  {
@@ -107,14 +77,11 @@ input[type="radio"]:checked + label,.ui-button:active  {
     background: -moz-linear-gradient(top, #3494D3 0%, #2383C2 50%);
     background: -o-linear-gradient(top, #3494D3 0%, #2383C2 50%);
     background: linear-gradient(top, #3494D3 0%, #2383C2 50%);
+    color: white;
 }
 input[type="radio"], input[type="submit"]  {
     display: none;
 }
-.ui-button:hover{
-    background: #23AEC2;
-}
-
 .tooltipsy{
     padding: 0.5em;
     width:auto;
@@ -136,17 +103,19 @@ input[type="radio"], input[type="submit"]  {
 
     <h1 id="mgnavt"><?php echo sprintf(_g('Download') . ' <strong>%s %s %s</strong>',$name, $version, $release)?></h1>
         <?php include '../6/nav.php'; ?>
-        <p class="unstable-release-warning"><?php
+        <div class="bg-danger">
+        <p class="text-white p-3 container"><?php
 //		_g('Be careful! This is an alpha, unstable release.');
 //		_g('Be careful! This is a beta, unstable release.');
 //		_g('It is only intended for developer use. <strong>DO NOT USE THIS IN PRODUCTION OR FOR OFFICIAL REVIEW.</strong>');
 		_g('This is a Release Candidate. Release Candidate software is software that has graduated Beta testing, and should be a release-ready product suitable for advanced users and reviewers. However, beginning users and critical-applications users may wish to wait for the final release planned for %s.', array(_r('June 2017'))); _g('Release Candidate is intended to identify any remaining bugs or missing packages.'); ?></p>
+		</div>
 
 
     <div id="doc4" class="yui-t7" style="margin-bottom: 0px;">
         <div id="bd" role="main">
-            <div class="yui-ge bb1">
-            <div class="yui-u first rb1">
+            <div class="yui-ge bb1 row">
+            <div class="yui-u first col-md-8">
 
 <noscript>
 <div class="para warn"><?php _g('It looks like you have JavaScript disable. Please <a href="%s">enable</a> it to have better render. At the <a href="%s">end</a> of this page there will be download link for you. But what is written between is important.',array('http://www.enable-javascript.com/','#Fclassical'),'p'); ?></div>
@@ -223,13 +192,13 @@ input[type="radio"], input[type="submit"]  {
     _g('Size of the ISOs is about 50MB.',null,'p class="dlinfo"');?>
 </div>
 
-<div class="radiobutton">
+<div>
     <?php if( $classical ){?><input type="radio" value="DVD" name="format" id="classical"/>
-    <label for="classical" class="ui-button classical" ><?php _g('Classic Installation')?></label><?php }?>
+    <label for="classical" class="btn btn-outline-primary classical" ><?php _g('Classic Installation')?></label><?php }?>
     <?php if($live){ ?><input type="radio" id="live" value="LiveDVD" name="format" />
-    <label for="live" class="ui-button live"><?php _g('Live Media');?></label><?php }?>
+    <label for="live" class="btn btn-outline-primary live"><?php _g('Live Media');?></label><?php }?>
     <input type="radio" id="lan" value="netinstall" name="format" />
-    <label for="lan" class="ui-button lan"><?php _g('Network Installation')?></label>
+    <label for="lan" class="btn btn-outline-primary lan"><?php _g('Network Installation')?></label>
 </div>
 <?php if( !$live || !$classical ){?>
 <p style="margin-top:1.5em;" class="warn">
@@ -257,13 +226,13 @@ input[type="radio"], input[type="submit"]  {
         <?php //get_image('PLASMA', '/g/5/kde.png', 'width: 100%');?>
     </div>    
 
-    <div class="radiobutton">
+    <div>
         <input type="radio" id="kde" value="Plasma" name="desktop" />
-        <label for="kde" class="ui-button kde"><?php _g('Plasma Desktop')?></label>
+        <label for="kde" class="btn btn-outline-primary kde"><?php _g('Plasma Desktop')?></label>
         <input type="radio" id="gnome" value="GNOME" name="desktop" />
-        <label for="gnome" class="ui-button gnome"><?php _g('GNOME Desktop')?></label>
+        <label for="gnome" class="btn btn-outline-primary gnome"><?php _g('GNOME Desktop')?></label>
         <input type="radio" id="xfce" value="Xfce" name="desktop" />
-        <label for="xfce" class="ui-button xfce"><?php _g('Xfce Desktop')?></label>        
+        <label for="xfce" class="btn btn-outline-primary xfce"><?php _g('Xfce Desktop')?></label>
     </div>
 </div><?php }/*live*/?>
 
@@ -278,11 +247,11 @@ input[type="radio"], input[type="submit"]  {
         <?php _g('Network installer + nonfree firmware CD', null,'h3');
         _g('Contain nonfree drivers needed for some disc controllers, some network cards, etc.',null,'p')?>
     </div>
-    <div class="radiobutton">
+    <div>
         <input type="radio" id="free" value="-" name="nat" />
-        <label for="free" class="ui-button free"><?php _g('Free Software CD')?></label>
+        <label for="free" class="btn btn-outline-primary free"><?php _g('Free Software CD')?></label>
         <input type="radio" id="nonfree" value="nonfree" name="nat" />
-        <label for="nonfree" class="ui-button nonfree"><?php _g('Nonfree Firmware CD')?></label>
+        <label for="nonfree" class="btn btn-outline-primary nonfree"><?php _g('Nonfree Firmware CD')?></label>
     </div>
 </div>
 
@@ -297,11 +266,11 @@ input[type="radio"], input[type="submit"]  {
         _g('This version runs on all PCs including those that support 64 Bit. If you have more than 3 GB of RAM you should prefer the 64 Bit version though.',null,'p')?>
     </div>
 
-    <div class="radiobutton">
+    <div>
         <input type="radio" id="32b" value="i586" name="arch" />
-        <label for="32b" class="ui-button 32b"><?php _g('32 bit')?></label>
+        <label for="32b" class="btn btn-outline-primary 32b"><?php _g('32 bit')?></label>
         <input type="radio" id="64b" value="x86_64" name="arch" />
-        <label for="64b" class="ui-button 64b"><?php _g('64 bit')?></label>
+        <label for="64b" class="btn btn-outline-primary 64b"><?php _g('64 bit')?></label>
     </div>
 </div>
 
@@ -320,10 +289,10 @@ input[type="radio"], input[type="submit"]  {
 <?php } else { echo _g('BitTorrent link are not yet available.',null, 'p style="margin-top:1.5em;" class="warn"'); } ?> 
     </div>
 
-    <div class="radiobutton">
+    <div>
     <?php if($torrentavailable){ ?>
-        <a href="#" id="torrentlink" class="ui-button torrentlink"><?php _g('BitTorrent')?></a><?php }?>
-        <a href="#" id="directlink" class="ui-button directlink"><?php _g('Direct Link')?></a>
+        <a href="#" id="torrentlink" class="btn btn-outline-primary torrentlink"><?php _g('BitTorrent')?></a><?php }?>
+        <a href="#" id="directlink" class="btn btn-outline-primary directlink"><?php _g('Direct Link')?></a>
     </div>
 </div>
 
@@ -436,8 +405,8 @@ input[type="radio"], input[type="submit"]  {
 </noscript>
                 </div>
 
-                <div class="yui-u">
-                    <div class="para" style="padding-left: 1em;">
+                <div class="yui-u col">
+                    <div class="para mt-3">
                         <ul class="hl">
                             <li><a href=<?php echo sprintf('"%s">',$releasenotes); _g('Release notes')?></a></li>
                             <li><a href=<?php echo sprintf('"%s">',$errata); _g('More about known issues or limitation in installation and usage')?></a></li>
@@ -446,7 +415,7 @@ input[type="radio"], input[type="submit"]  {
                             <?php _g('Newcomer? <a href="%s">Here\'s a wiki page for you.</a>', array(_r('https://wiki.mageia.org/en/Newcomers_start_here')), 'li')?>
                             <?php _g('Help us on %s', array("<a href=\"../contribute\">$name $version</a>"), 'li')?>
                         </ul>
-                        <br>
+
                             <?php echo '<br>';
                             _g('Looking for a stable release?', null, 'h3');
                             echo '<p>';
@@ -465,6 +434,8 @@ input[type="radio"], input[type="submit"]  {
             </div>
         </div>
     </div>
+<?php echo common_footer($locale); ?>
+<script src="/g/js/tooltipsy.min.js"></script>
 <script>
 
 $(function () {
@@ -531,7 +502,7 @@ $('img.lazy').each(function(){
         getname ='<?php echo get_mageia($name, $version, $release)?>' + '-';
         file = $('#live').is(':checked') ? format + '-' + desktop + '-' + arch + '-' + 'DVD.iso' : $('#classical').is(':checked') ? arch + '-' + format + '.iso' : format + nat + arch + '-CD.iso';
         file = (this.id == 'torrentlink') ? getname + file + '&torrent=1' : getname + file ;
-        $("a.ui-button").attr('href','../downloads/get/?q=' + file);
+        $("a.btn").attr('href','../downloads/get/?q=' + file);
     });
 
     gettooltip('.iso2usb', '#iso2usbEx',0,1)
@@ -550,6 +521,5 @@ $('img.lazy').each(function(){
 
 });
 </script>
-<?php echo common_footer($locale); ?>
 </body>
 </html>
diff --git a/en/6/nav.php b/en/6/nav.php
index a252da9d8..c780d22b6 100644
--- a/en/6/nav.php
+++ b/en/6/nav.php
@@ -20,13 +20,13 @@ $sru = trim($_SERVER['REQUEST_URI']);
 
 $pnav = array();
 foreach ($nav as $k => $v) {
-    $pnav[] = sprintf('<li><a href="%s"%s>%s</a></li>',
+    $pnav[] = sprintf('<li class="flex-sm-fill text-sm-center nav-item"><a href="%s"%s>%s</a></li>',
         $k,
-        $k == $sru ? ' class="sel"' : null,
+        $k == $sru ? ' class="nav-link active"' : ' class="nav-link"',
         $v);
 }
 $pnav = implode($pnav);
 
 echo <<<S
-<div id="mgnavsub"><ul id="mgnavsubl">{$pnav}</ul></div>
+<div id="mgnavsub"><ul id="mgnavsubl" class="nav nav-pills flex-column flex-sm-row justify-content-center">{$pnav}</ul></div>
 S;
-- 
cgit v1.2.1