merge style update from Olivier

lib/AccountManager/L10N/fr.pm

@@ -74,6 +74,8 @@ our %Lexicon = (
     "Previous" => "Précédent",
     "Select your federation" => "Sélectionnez votre fédération",
     "Select the federation corresponding to the service you want to test:" => "Sélectionner la fédération correspondant au service à tester:",
+    "As part of the GÉANT 2020 Framework Partnership Agreement (FPA), this project receives funding from the European Union’s Horizon 2020 research and innovation programme under Grant Agreement No. 731122 (GN4-2)." => "En tant que membre de l'accord GÉANT 2020 Framework Partnership Agreement (FPA), ce projet bénéficie d'un financement du programme de recherche de l'Union Européenne Horizon 2020 sous l'agrément No. 731122 (GN4-2).",
+    "Test another service" => "Tester un autre service",
 );
 
 1;

resources/Makefile.am

 nobase_www_DATA = \
 	css/style.css \
+	css/edugain.css \
+	css/et-menu-master.css \
+	css/et-menu-min-600.css \
+	css/min-800.css \
+	js/menu.js \
 	foundation/index.html \
 	foundation/css/foundation.css \
 	foundation/css/foundation.min.css \
@@ -14,6 +19,11 @@ nobase_www_DATA = \
 	images/favicon_geant.ico \
 	images/favicon.png \
 	images/geant_logo_rgb_300dpi.jpg \
+	images/geant_logo1.png \
+	images/edugain_logo1.png \
+	images/home_logo.png \
+	images/menu-icon.gif \
+	images/footer_logo_padded.jpg \
 	jquery-3.3.1.min.js \
 	jquery-ui-1.12.1/images/ui-icons_444444_256x240.png \
 	jquery-ui-1.12.1/images/ui-icons_555555_256x240.png \

resources/css/style.css

 /* ------------------------------------------------------------------------*/
 /* le bleu edugain est #19398a ou hsl(223,69%,32%), il est éclairci ici de 10% soit #214BB5 ou hsl(223,69%,42%);*/
 
-html {
-    height: 100%;
-}
-
-body {
-    color: #4F4F4F;
-    font-size: 0.85em;
-    background-color: #FFFFFF;
-    min-height: 100%;
-}
-
 /* global */
 button, .button {
     background: #214BB5;
     border: 2px solid #214BB5;
     font-weight: bold;
-    border-radius: 10px;
+    border-radius: 3px;
+    text-decoration: none!important;
 }
 .callout {
-    border-radius: 10px;
+    border-radius: 3px;
 }
 button:hover, .button:hover {
     background: none;
     color: #214BB5;
 }
-h1, h2, h3, h4, h5, h6 {
-    color: #214BB5;
-}
 a, a:visited, a:active, a:link {
     text-decoration: underline;
 }
@@ -36,23 +23,6 @@ a:hover {
     text-decoration: none;
 }
 
-/* header */
-header h1 {
-    color: #FFFFFF;
-    background-color: #FF8547;
-    width: 100%;
-    font-size: 1.6em;
-    letter-spacing: 0.1rem;
-    font-weight: bold;
-    height: 4rem;
-    line-height: 4rem;
-    text-align: center;
-}
-
-header a, header a:visited, header a:active, header a:link {
-    color: inherit;
-    text-decoration: none;
-}
 
 /* main */
 main {
@@ -60,7 +30,6 @@ main {
 }
 main form {
     width: 100%;
-    margin: 1rem;
 }
 
 /* wizard */
@@ -80,7 +49,7 @@ main form {
     list-style-position: inside;
     margin: 0 0.5em 0.5em;
     padding: 1em 1em;
-    border-radius: 10px;
+    border-radius: 3px;
 }
 .wizard > .steps > ol > li.current {
     background: #214BB5;
@@ -103,13 +72,14 @@ main form {
     position: relative;
     width: auto;
     border: 2px solid #214BB5;
-    border-radius: 10px;
+    border-radius: 3px;
     overflow: auto;
     overflow-x: hidden;
 }
 .wizard > .content .custom-combobox {
     position: relative;
     display: inline-block;
+    width: 90%;
 }
 .wizard > .content .custom-combobox-toggle {
     position: absolute;
@@ -121,7 +91,7 @@ main form {
 .wizard > .content .custom-combobox-input {
     margin: 0;
     padding: 5px 10px;
-    width: 600px;
+    width: 90%;
 
 }
 .wizard > .content .ui-autocomplete {
@@ -137,31 +107,37 @@ main form {
     min-width: 30%;
     display: flex;
     flex-flow: row wrap;
+    margin-bottom:1.5rem;
     justify-content: space-between;
     align-items: stretch;
 }
 .accounts .account {
     flex: 0 0 22em;
     margin-right: 1em;
+    margin-top: 1rem;
+    box-shadow: 0 3px 5px #333;
 }
 .accounts .account table {
-    margin-top: 2rem;
     table-layout: fixed;
     word-wrap: break-word;
+    margin-bottom: 0;
 }
 .accounts .account table caption {
-    background-color: #FF6314;
+    background-color: #f1893b;
     color: #FFFFFF;
-    border-radius: 5px 5px 0 0;
-    text-align: left;
+    border-radius: 3px 3px 0 0;
+    text-align: center;
     font-weight: bold;
 }
+.accounts .account table tbody {
+    border:1px solid #f1893b;
+}
 .accounts .account .comment {
     display: flex;
     margin: 0;
     padding: 0;
     height: 7em;
-    overflow-y: scroll;
+    overflow-y: auto;
     font-size: 0.875rem;
     line-height: 1.3;
     text-align: left;

templates/web/complete_challenge.tt2.html

@@ -17,7 +17,9 @@
         </p>
         <form action="[% app.url %]" method="get">
             <label for="token">[% lh.maketext("Please provide the validation token here:") %]</label>
+            <br/>
             <input name="token" value="" id="token" type="text" class="required error"/>
+            <br/>
             <input type="hidden" name="entityid" value="[% entityid %]"/>
             <input type="hidden" name="email" value="[% email %]"/>
             <button class="button" type="submit" name="action" value="select_email">[% lh.maketext("Previous") %]</button>

templates/web/create_accounts.tt2.html

 [% WRAPPER index.tt2.html %]
-<div class="grid-x align-center">
-    <div class="cell shrink">
-        <div class="callout success">
-            [% lh.maketext("<strong>Success:</strong> your identity as administrator of the Service Provider with entityID <strong>[_1]</strong> has been validated!", entityid) %]
-        </div>
+<div class="row">
+    <div class="callout success">
+        [% lh.maketext("<strong>Success:</strong> your identity as administrator of the Service Provider with entityID <strong>[_1]</strong> has been validated!", entityid) %]
     </div>
 </div>
 
-<h3>[% lh.maketext("Test accounts created") %]</h3>
+<h2>[% lh.maketext("Test accounts created") %]</h2>
 <p>
     [% lh.maketext("You can now use these test accounts to login at your federated service.") %]
     [% lh.maketext("To do so, select <strong>[_1]</strong> when choosing an identity provider.", idp_displayname) %]
@@ -79,17 +77,17 @@
     [% END %]
 </div>
 
-<div class="grid-x align-center">
-    <div class="cell shrink">
-        <div class="callout warning">
-            <p>[% lh.maketext("Note that these test accounts will automatically expire in [_1] days and that they can only be used to test federated login to your eduGAIN-enabled Service Provider with entityID <strong>[_2]</strong>.", accounts_validity_period, entityid) %]</p>
-        </div>
+<div class="row">
+    <div class="callout warning">
+        <p>[% lh.maketext("Note that these test accounts will automatically expire in [_1] days and that they can only be used to test federated login to your eduGAIN-enabled Service Provider with entityID <strong>[_2]</strong>.", accounts_validity_period, entityid) %]</p>
     </div>
 </div>
 
-<div class="grid-x align-center">
-    <div class="cell shrink">
+<div class="row">
+    <div class="callout primary">
         <strong>[% lh.maketext("Thank you for using the eduGAIN Access Check") %]</strong>
     </div>
 </div>
+
+<p class="text-center"><a href="[% app.url %]?action=start" class="button">[% lh.maketext("Test another service") %]</a></p>
 [% END %]

templates/web/index.tt2.html

@@ -12,6 +12,11 @@
         <link rel="stylesheet" type="text/css" href="jquery-ui-1.12.1/jquery-ui.min.css"/>
         <link rel="stylesheet" type="text/css" href="css/style.css"/>
 
+        <link rel="stylesheet" type="text/css" href="css/edugain.css" />
+        <link rel="stylesheet" type="text/css" href="css/et-menu-master.css" />
+        <link rel="stylesheet" type="text/css" href="css/et-menu-min-600.css" media="(min-width: 800px)" />
+        <link rel="stylesheet" type="text/css" href="css/min-800.css" media="(min-width: 800px)" />
+
         <script type="text/javascript" src="jquery-3.3.1.min.js"></script>
         <script type="text/javascript" src="jquery-ui-1.12.1/jquery-ui.min.js"></script>
         <script type="text/javascript" src="jquery-validation-1.17.0.min.js"></script>
@@ -20,26 +25,130 @@
     </head>
 
     <body>
-        <header>
-            <div class="clearfix">
-                <a href="http://www.edugain.org" title="eduGAIN home page" target="_blank" class="float-left"><img alt="eduGAIN logo" width="200" src="images/edugain_logo.png"/></a>
-                <a href="http://www.geant.net" title="Geant home page" target="_blank" class="float-right"><img alt="GEANT logo" width="100" src="images/geant_logo_rgb_300dpi.jpg"/></a>
+       <header>
+            <div id="geant_logo_t" class="small-6 medium-4 columns text-left">
+                <img  src="images/geant_logo1.png">
+            </div>
+            <div  id="edugain_logo" class="small-6 medium-4 medium-offset-4 columns text-right">
+                <img src="images/edugain_logo1.png">
             </div>
-            <h1><a href="[% app.url %]">eduGAIN Access Check</a></h1>
         </header>
+        <nav class="main-nav">
+            <div class="central-section">
+                <div id="nav_icon" class="nav-icon"><a id="nav_icon_toggle" href="javascript:void(0);"><img src="images/menu-icon.gif" /></a></div>
+                <!-- menu goes here -->
 
+                <div id="core_nav_section" class="et-menu-holder">
+                    <ul id="core_nav" class="et-menu et-left">
+                        <li class="et-first-option no-children"><a href="[% app.url %]" title="Home"><img style="width: 16px; height: 15px; position: relative; top: 3px" src="images/home_logo.png" alt="Home icon" /></a></li>
+                        <li class="et-option et-has-children"><span>Top item 1<!-- with children --></span>
+                            <ul class="et-submenu">
+                                <li class="et-submenu-option"><a href="/section/item1.html">Sub-item 1</a></li>
+                                <li class="et-submenu-option"><a href="/section/item1.html">Sub-item 2</a></li>
+                            </ul>
+                        </li>
+                        <li class="et-option no-children"><a href="/item2.html">Top item 2<!-- with NO children --></a></li>
+                    </ul>
+                </div>
+                <div id="help_nav_section" class="et-menu-holder">
+                    <ul class="et-menu et-right">
+                        <li class="et-option no-children"><a href="{{ constant('WIKI_URL') }}">eduGAIN Wiki</a></li>
+                        <li class="et-option no-children"><a href="{{ constant('EDUGAIN_URL') }}">eduGAIN Site</a></li>
+                    </ul>
+                </div>
+            </div>
+            <h1 class="row text-center">eduGAIN Access Check</h1>
+        </nav>
+        
         <main class="row">
             [% content %]
         </main>
 
-        <footer>
-            <p class="text-center">eduGAIN Access Check [% app.version %] - <a href="mailto:[% app.support_email %]">contact us</a></p>
+        <footer style="visibility: hidden;">
+            <p class="text-center">eduGAIN Access Check [% app.version %] - <a href="mailto:[% app.support_email %]">contactez nous</a></p>
+            <div class="central-section">
+                <div class="col-1-1">
+                    <img src="images/footer_logo_padded.jpg" style="width: 111px; height:26px;" />
+                </div>
+
+                <div class="col-1-2">
+                    <a href="https://www.geant.org/Disclaimer" target="_blank">Disclaimer</a>
+                    <a href="https://www.geant.org/Policies" target="_blank">Policies</a>
+                </div>
+            </div>
+
+            <div class="central-section" style="text-align: center; padding-bottom: 0.2em;">
+                [% lh.maketext("As part of the GÉANT 2020 Framework Partnership Agreement (FPA), this project receives funding from the European Union’s Horizon 2020 research and innovation programme under Grant Agreement No. 731122 (GN4-2).") %]
+            </div>
         </footer>
 
         <script src="foundation/js/vendor/what-input.js"></script>
         <script src="foundation/js/vendor/foundation.min.js"></script>
+        <script src="js/menu.js"></script>
         <script>
             $(document).foundation();
+
+            var Help = new Array();
+            Help['Help Entry 1'] = 'Text for Help Entry 1 goes in here';
+            Help['Help Entry 2'] = 'Text for Help Entry 2 goes in here';
+
+            function openHelp($helpTrigger){
+                var helpId = $helpTrigger.attr('data-help_id');
+                $help = $('#help_dialog');
+                $help.html('<p>' + Help[helpId] + '</p>');
+                $help.dialog('option', 'title', helpId);
+                $help.dialog('option', { position: { my: "left top", at: "right bottom", of: $helpTrigger } });
+                $help.dialog('open');
+            }
+
+            $(function(){
+                var $footer = $('footer');
+
+                var $body = $("body");
+                $body.css('margin-top', 0);
+                $body.css('margin-bottom', 0);
+
+                // function to set the height on fly
+                function autoHeight() {
+                    // $('#wrap').css('min-height', 0);
+                    $('#wrap').css('min-height', (
+                        $(document).outerHeight()
+                        - $('header').outerHeight()
+                        + $('#wrap').height()
+                        - $('#wrap').outerHeight()
+                        - $footer.height()
+                    ));
+                }
+
+                // onDocumentReady function bind
+                $(document).ready(function() {
+                    autoHeight();
+
+                    $("button").mouseout(function(){
+                        this.blur();
+                    })
+                });
+
+                // onResize bind of the function
+                $(window).resize(function() {
+                    autoHeight();
+                });
+
+
+                $footer.css('visibility', 'visible');
+
+                $('#help_dialog').dialog({
+                    autoOpen: false
+                });
+
+                $('.help').click(function(e){
+                    e.preventDefault();
+                    var $helpTrigger = $(this);
+                    openHelp($helpTrigger);
+                });
+
+
+            });
         </script>
     </body>
 </html>

templates/web/select_email.tt2.html

@@ -21,7 +21,7 @@
             <label for="[% email %]">[% email %]</label>
             <br/>
         [% END %]
-            <p>[% lh.maketext("Those email addresses have been extracted from your service metadata.") %]</p>
+            <div class="callout primary">[% lh.maketext("Those email addresses have been extracted from your service metadata.") %]</div>
             <input type="hidden" name="entityid" value="[% sp.entityid %]"/>
             <button class="button" type="submit" name="action" value="select_sp">[% lh.maketext("Previous") %]</button>
             <button class="button" type="submit" name="action" value="complete_challenge">[% lh.maketext("Next") %]</button>