Compare revisions

77c87cae · 77c87cae · 77c87cae · 77c87cae · 77c87cae · 77c87cae
--- a/www/scss/search.scss
+++ b/www/scss/search.scss
+// TODO: Import DCF mixins
+// @import "mixins/_mixins.padding.scss";
+
+
+// Template overrides
+.embed #visitorChat,
+#wdn_search {
+  display: none !important;
+}
+
+
+// TODO: update search form to use app sub-theme
+.search-bg {
+  background-image: url('../images/search-bg-640.jpg');
+
+  @media (min-width: 640px) { background-image: url('../images/search-bg-960.jpg'); }
+  @media (min-width: 960px) { background-image: url('../images/search-bg-1280.jpg'); }
+  @media (min-width: 1280px) { background-image: url('../images/search-bg-1920.jpg'); }
+  @media (min-width: 1920px) { background-image: url('../images/search-bg-2560.jpg'); }
+
+  @media
+  only screen and (-webkit-min-device-pixel-ratio: 2),
+  only screen and (min-resolution: 192dpi),
+  only screen and (min-resolution: 2dppx) {
+    background-image: url('../images/search-bg-1280.jpg');
+
+    @media (min-width: 640px) { background-image: url('../images/search-bg-1920.jpg'); }
+    @media (min-width: 960px) { background-image: url('../images/search-bg-2560.jpg'); }
+  }
+
+}
+
+
+.webp .search-bg {
+  background-image: url('../images/search-bg-640.webp');
+
+  @media (min-width: 640px) { background-image: url('../images/search-bg-960.webp'); }
+  @media (min-width: 960px) { background-image: url('../images/search-bg-1280.webp'); }
+  @media (min-width: 1280px) { background-image: url('../images/search-bg-1920.webp'); }
+  @media (min-width: 1920px) { background-image: url('../images/search-bg-2560.webp'); }
+
+  @media
+  only screen and (-webkit-min-device-pixel-ratio: 2),
+  only screen and (min-resolution: 192dpi),
+  only screen and (min-resolution: 2dppx) {
+    background-image: url('../images/search-bg-1280.webp');
+
+    @media (min-width: 640px) { background-image: url('../images/search-bg-1920.webp'); }
+    @media (min-width: 960px) { background-image: url('../images/search-bg-2560.webp'); }
+  }
+
+}
+
+
+#searchform .dcf-input-group {
+  margin: 0 auto;
+  max-width: 30em!important;
+}
+
+.search-results h3,
+.google-search {
+	display: none;
+}
+
+.search-faux-tab {
+  border-color: var(--b);
+  margin-bottom: -1px;
+}
+
+// Directory Styles
+// TODO: revisit (and remove?) after Directory has been updated to 5.0
+#directory_results h3,
+#directory_results h4,
+#directory_results .result_head,
+#directory_results .cInfo,
+#directory_results .overflow .roles	.organization-name,
+[data-uid="kfarrell2"] .given-name {
+  display: none;
+}
+
+
+#directory_results .ppl_Sresult,
+#directory_results .dep_result {
+  margin-bottom: 1.77em;
+}
+
+
+#directory_results .overflow > .recordDetails {
+  align-self: center;
+  flex: 1 1 auto;
+}
+
+
+#directory_results .overflow .roles li {
+  margin-bottom: .32em;
+}
+
+
+#directory_results .overflow .roles:last-child {
+  margin-bottom: 0;
+}
+
+
+#directory_results .overflow .roles .title,
+#directory_results .overflow .roles .organization-unit {
+  display: block;
+}
+
+
+#directory_results .given-name {
+  font-size: 1rem;
+  margin-left: 1em;
+  text-transform: uppercase;
+}
--- a/www/templates/5.0/embed-debug.tpl.php
+++ b/www/templates/5.0/embed-debug.tpl.php
 <!DOCTYPE html>
-<html class="no-js embed" lang="en">
+<html class=dcf-no-js dcf-no-webp embed" lang="en">
 <head>
-    <meta charset="utf-8" />
-    <meta http-equiv="x-ua-compatible" content="ie=edge" />
-    <title>Search | University of Nebraska&ndash;Lincoln</title>
-	<link rel="stylesheet" href="https://cloud.typography.com/7717652/616662/css/fonts.css" />
-    <link rel="stylesheet" href="/wdn/templates_5.0/css/all.css" />
-    <script data-main="js/embed-src/main.js" src="js/embed-src/require.js"></script>
-    <?php echo $head ?>
+  <meta charset="utf-8" />
+  <meta http-equiv="x-ua-compatible" content="ie=edge" />
+  <title>Search | University of Nebraska&ndash;Lincoln</title>
+  <link rel="stylesheet" href="https://cloud.typography.com/7717652/6968572/css/fonts.css" />
+  <link rel="stylesheet" href="/wdn/templates_5.3/css/main.css" />
+  <link rel="stylesheet" href="/wdn/templates_5.3/js/js-css/tabs.css" />
+  <script data-main="js/embed-src/main.js" src="js/embed-src/require.js"></script>
+  <?php echo $head ?>
 </head>
-<body>
-    <main>
-        <?php echo $maincontent ?>
-    </main>
+<body class="unl">
+  <main>
+    <?php echo $maincontent ?>
+  </main>
+  <script>
+    require([
+      '/wdn/templates_5.3/js/compressed/dcf-utility.js',
+      '/wdn/templates_5.3/js/compressed/dcf-tabs.js'
+    ], function(DCFUtilityModule, DCFTabsModule) {
+      try {
+        // Try DCF ^3.0 format first, then 2.0 format
+        if (DCFUtilityModule) {
+          DCFUtilityModule.DCFUtility.flagSupportsWebP();
+          DCFUtilityModule.DCFUtility.flagSupportsJavaScript();
+        } else {
+          DCFUtility.flagSupportsWebP();
+          DCFUtility.flagSupportsJavaScript();
+        }
+      } catch(e) {
+        // do nothing;
+      }
+
+      var tabs = document.querySelectorAll('.dcf-tabs');
+      // Try DCF ^3.0 format first, then 2.0 format
+      if (DCFTabsModule) {
+        var unlTabs = new DCFTabsModule.DCFTabs(tabs);
+      } else {
+        var unlTabs = new DCFTabs(tabs);
+      }
+      unlTabs.initialize();
+    });
 </body>
 </html>
--- a/www/templates/5.0/embed.tpl.php
+++ b/www/templates/5.0/embed.tpl.php
 <!DOCTYPE html>
-<html class="no-js embed" lang="en">
+<html class="dcf-no-js dcf-no-webp embed" lang="en">
 <head>
-    <meta charset="utf-8" />
-    <meta http-equiv="x-ua-compatible" content="ie=edge" />
-    <title>Search | University of Nebraska&ndash;Lincoln</title>
-    <link rel="stylesheet" href="https://cloud.typography.com/7717652/616662/css/fonts.css" />
-    <link rel="stylesheet" href="https://unlcms.unl.edu/wdn/templates_5.0/css/all.css" />
-    <script src="js/embed/all.js?v=20170404"></script>
-    <?php echo $head ?>
+  <meta charset="utf-8" />
+  <meta http-equiv="x-ua-compatible" content="ie=edge" />
+  <title>Search | University of Nebraska&ndash;Lincoln</title>
+  <link rel="stylesheet" href="https://cloud.typography.com/7717652/6968572/css/fonts.css" />
+  <link rel="stylesheet" href="https://unlcms.unl.edu/wdn/templates_5.3/css/main.css" />
+  <link rel="stylesheet" href="https://unlcms.unl.edu/wdn/templates_5.3/js/js-css/tabs.css" />
+  <script src="js/embed/all.js?v=<?php echo $cacheVersion; ?>"></script>
+  <?php echo $head ?>
 </head>
-<body>
-    <main>
-        <?php echo $maincontent ?>
-    </main>
+<body class="unl">
+  <main>
+    <?php echo $maincontent ?>
+  </main>
 </body>
+<script>
+    require.config({
+        paths: { 'unlCMSJs': 'https://unlcms.unl.edu/wdn/templates_5.3/js/compressed' }
+    });
+    require([
+      'unlCMSJs/dcf-utility',
+      'unlCMSJs/dcf-tabs'
+    ], function(DCFUtilityModule, DCFTabsModule) {
+      try {
+        // Try DCF ^3.0 format first, then 2.0 format
+        if (DCFUtilityModule) {
+          DCFUtilityModule.DCFUtility.flagSupportsWebP();
+          DCFUtilityModule.DCFUtility.flagSupportsJavaScript();
+        } else {
+          DCFUtility.flagSupportsWebP();
+          DCFUtility.flagSupportsJavaScript();
+        }
+      } catch(e) {
+        // do nothing;
+      }
+
+      var tabs = document.querySelectorAll('.dcf-tabs');
+      // Try DCF ^3.0 format first, then 2.0 format
+      if (DCFTabsModule) {
+        var unlTabs = new DCFTabsModule.DCFTabs(tabs);
+      } else {
+        var unlTabs = new DCFTabs(tabs);
+      }
+      unlTabs.initialize();
+    });
+</script>
 </html>
--- a/www/templates/5.0/end-scripts.tpl.php
+++ b/www/templates/5.0/end-scripts.tpl.php
@@ -19,7 +19,7 @@ require(['jquery', '<?php echo $localScriptUrl ?>'], function($, UNLSearch) {
    }).appendTo($('body'));

    var $localCss = $('<link>', {
-        'href': './css/search-google.css?v=20170404'
+        'href': './css/search-google-5.0.css?v=<?php echo $cacheVersion; ?>'
    });

    gSearchDefer.done(function(google) {

--- a/www/templates/5.0/google-results.tpl.php
+++ b/www/templates/5.0/google-results.tpl.php
-<?php if (isset($title)): ?>
-<h3><?php echo $title ?> Results</h3>
-<?php endif; ?>
 <div id="<?php echo isset($id) ? $id : '' ?>" class="google-results"></div>
--- a/www/templates/5.0/search-results.tpl.php
+++ b/www/templates/5.0/search-results.tpl.php
-<section<?php if (!$isEmbed): ?> class="wdn-band"<?php endif ?> id="search_wrapper">
-    <?php if (!$isEmbed): ?>
-    <div class="wdn-inner-wrapper wdn-inner-padding-sm">
-    <?php endif; ?>
+<?php if (!$isEmbed): ?><div class="dcf-bleed dcf-mb-0 dcf-overflow-y-auto"><?php endif ?>

-        <div class="wdn-grid-set search-set">
+    <section class="dcf-wrapper dcf-grid dcf-col-gap-6 dcf-row-gap-9 dcf-pt-9 dcf-pb-9 dcf-txt-xs unl-font-sans unl-search-results" id="search_wrapper">

-            <div id="search_results" class="results-group">
-                <div class="result-head">
+        <div class="dcf-col-100% dcf-col-67%-start@md dcf-col-50%-start@lg results-group" id="search_results">
+            <?php if (!empty($local_results)): ?>
+                <div class="dcf-tabs">
                    <h2>Web Results</h2>
-                    <ul class="result-tab<?php if (empty($local_results)): ?> no-local<?php endif; ?>">
-                        <?php if (!empty($local_results)): ?>
-                        <li><a href="#">This unit</a></li>
-                        <?php endif; ?>
-                        <li><a href="#">All of UNL</a></li>
+                    <ul>
+                        <li><a class="dcf-txt-md" href="#local-results-container">This Site</a></li>
+                        <li><a class="dcf-txt-md all-unl-tab" href="#unl-results-container">All of UNL</a></li>
                    </ul>
+                    <div id="local-results-container">
+                        <?php if (isset($localTitle)): ?>
+                            <h3 class="dcf-sr-only"><?php echo $localTitle ?> Results</h3>
+                        <?php endif; ?>
+                        <?php echo $local_results ?>
+                    </div>
+                    <div id="unl-results-container">
+                        <h3 class="dcf-sr-only">All of UNL Results</h3>
+                        <?php echo renderTemplate('templates/5.0/google-results.tpl.php', array(
+                            'id' => 'unl_results'
+                        )) ?>
+                    </div>
                </div>
-                <div class="search-results">
-                <?php echo $local_results ?>
-                <?php echo renderTemplate('templates/5.0/google-results.tpl.php', array(
-                    'title' => 'All of UNL',
-                    'id' => 'unl_results',
-                )) ?>
+            <?php else: ?>
+                <h2>Web Results</h2>
+                <h3 class="dcf-bold dcf-lh-4 dcf-d-inline-block dcf-txt-md dcf-mt-0 dcf-ml-0 dcf-pt-4 dcf-pr-5 dcf-pb-4 dcf-pl-5 dcf-bg-white dcf-b-1 dcf-bb-0 dcf-b-solid unl-b-light-gray unl-ls-0 search-faux-tab">All of UNL</h3>
+                <div class="dcf-pt-7 dcf-pr-6 dcf-pb-7 dcf-pl-6 dcf-bg-white dcf-b-1 dcf-b-solid unl-b-light-gray" id="unl-results-container">
+                    <?php echo renderTemplate('templates/5.0/google-results.tpl.php', array(
+                        'title' => 'All of UNL',
+                        'id' => 'unl_results'
+                    )) ?>
                </div>
-            </div>
+            <?php endif; ?>
+        </div>

-            <div id="directory_results" class="results-group">
-                <div class="result-head">
-                    <h2>Directory Results</h2>
-                    <ul class="result-tab">
-                        <li><a href="#">People</a></li>
-                        <li><a href="#">Departments</a></li>
-                    </ul>
-                </div>
-                <div id="ppl_results" class="search-results"></div>
+        <div class="dcf-col-100% dcf-col-33%-end@md dcf-col-50%-end@lg results-group" id="directory_results">
+            <div class="dcf-tabs">
+                <h2>Directory Results</h2>
+                <ul>
+                    <li><a class="dcf-txt-md" href="#ppl_results">People</a></li>
+                    <li><a class="dcf-txt-md dept-results-tab" href="#dept_results">Departments</a></li>
+                </ul>
+                <div id="ppl_results"></div>
+                <div id="dept_results"></div>
            </div>
-
        </div>

-    <?php if (!$isEmbed): ?>
-    </div>
-    <?php endif; ?>
-</section>
+    </section>
+
+<?php if (!$isEmbed): ?></div><?php endif ?>
+<script>
+  window.addEventListener('inlineJSReady', function() {
+    require(['dcf-utility', 'dcf-tabs', 'css!../js-css/tabs'], function(DCFUtilityModule, DCFTabsModule) {
+      try {
+        // Try DCF ^3.0 format first, then 2.0 format
+        if (DCFUtilityModule) {
+          DCFUtilityModule.DCFUtility.flagSupportsWebP();
+          DCFUtilityModule.DCFUtility.flagSupportsJavaScript();
+        } else {
+          DCFUtility.flagSupportsWebP();
+          DCFUtility.flagSupportsJavaScript();
+        }
+      } catch(e) {
+        // do nothing;
+      }
+
+      var tabs = document.querySelectorAll('.dcf-tabs');
+      // Try DCF ^3.0 format first, then 2.0 format
+      if (DCFTabsModule) {
+        var unlTabs = new DCFTabsModule.DCFTabs(tabs);
+      } else {
+        var unlTabs = new DCFTabs(tabs);
+      }
+      unlTabs.initialize();
+    });
+  });
+</script>
\ No newline at end of file
--- a/www/templates/breadcrumbs.tpl.php
+++ b/www/templates/breadcrumbs.tpl.php
-<ul>
-    <li><a href="https://www.unl.edu/" title="University of Nebraska&ndash;Lincoln">Nebraska</a></li>
-    <li>Search</li>
-</ul>
--- a/www/templates/local-footer.tpl.php
+++ b/www/templates/local-footer.tpl.php
-<div class="wdn-grid-set wdn-footer-links-local">
-    <div class="bp960-wdn-col-one-fourth">
-        <div class="wdn-footer-module">
-            <span role="heading" class="wdn-footer-heading">Contact Us</span>
-            <?php echo file_get_contents('http://www.unl.edu/ucomm/sharedcode/footerContactInfo.html'); ?>
-        </div>
-    </div>
-    <div class="bp960-wdn-col-one-half">
-        <div class="wdn-footer-module">
-            <span role="heading" class="wdn-footer-heading">About UNL Search</span>
-            <p>This application is a product of the <a href="https://iim.unl.edu/">Internet and Interactive Media group at Nebraska</a>. IIM is a partnership of <a href="https://ucomm.unl.edu/">University Communication</a> and <a href="https://its.unl.edu/">Information Technology Services</a>.</p>
-        </div>
-    </div>
-    <div class="bp960-wdn-col-one-fourth">
-        <div class="wdn-footer-module">
-            <?php
-            $relatedLinks = file_get_contents('http://www.unl.edu/sharedcode/relatedLinks.html');
-            $relatedLinks = preg_replace('#<h3>.*</h3>#', '<span role="heading" class="wdn-footer-heading">Related Links</span>', $relatedLinks);
-            $relatedLinks = preg_replace('#<ul>#', '<ul class="wdn-related-links-v1">', $relatedLinks);
-            echo $relatedLinks;
-            ?>
-        </div>
-    </div>
-</div>
+<nav id="dcf-footer-group-1" role="navigation" aria-labelledby="dcf-footer-group-1-heading">
+  <h3 class="dcf-txt-md dcf-bold dcf-uppercase dcf-lh-3 unl-ls-2 unl-cream" id="dcf-footer-group-1-heading">About UNL Search</h3>
+  <p>This application is a product of the <a href="https://dxg.unl.edu/">Digital Experience Group at Nebraska</a>. DXG is a partnership of <a href="https://ucomm.unl.edu/">University Communication</a> and <a href="https://its.unl.edu/">Information Technology Services</a>.</p>
+    <?php
+      echo file_get_contents('http://www.unl.edu/ucomm/sharedcode/footerContactInfo.html');
+      ?>
+</nav>
+<?php
+$relatedLinks = file_get_contents('http://www.unl.edu/sharedcode/relatedLinks.html');
+preg_match_all('|<li>(.*)<\/li>|', $relatedLinks, $matches);
+if (is_array($matches[0]) && count($matches[0]) > 0):
+?>
+<nav id="dcf-footer-group-2" role="navigation" aria-labelledby="dcf-footer-group-2-heading">
+  <h3 class="dcf-txt-md dcf-bold dcf-uppercase dcf-lh-3 unl-ls-2 unl-cream" id="dcf-footer-group-2-heading">Related Links</h3>
+  <ul class="dcf-list-bare dcf-mb-0">
+      <?php
+        if (is_array($matches[0])) {
+          foreach($matches[0] as $link) {
+            echo  $link, PHP_EOL;
+          }
+        }
+      ?>
+  </ul>
+</nav>
+<?php endif; ?>
--- a/www/templates/search-form.tpl.php
+++ b/www/templates/search-form.tpl.php
-<div id="searchform" class="wdn-band">
-  <form action="./" method="get" class="wdn-inner-wrapper">
-      <div class="wdn-input-group">
-        <input type="text" name="q" id="search_q" aria-label="Search Query" placeholder="e.g., Herbert Husker, Ph.D." />
-        <span class="wdn-input-group-btn"><button class="button" type="submit"><span class="wdn-icon-search" aria-hidden="true"></span><span class="wdn-text-hidden">Search</span></button></span>
-    </div>
-      <?php if (!empty($local_results)): ?>
-      <input type="hidden" name="u" value="<?php echo htmlentities($_GET['u'], ENT_QUOTES) ?>" />
-      <?php endif; ?>
-  </form>
+<div class="dcf-bleed dcf-wrapper dcf-pt-7 dcf-pb-7 dcf-txt-center dcf-bg-center dcf-bg-no-repeat dcf-bg-cover unl-bg-darker-gray search-bg" id="searchform">
+    <form class="dcf-form" action="./" method="get">
+        <div class="dcf-input-group">
+            <input type="text" name="q" id="search_q" aria-label="Search Query" placeholder="e.g., Herbert Husker, Ph.D." />
+            <button class="dcf-btn dcf-btn-primary" type="submit">
+                <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" aria-labelledby="filled-search-content-edition-title" fill="currentColor">
+                    <title id="filled-search-content-edition-title">Search</title>
+                    <path d="M9,18c2.131,0,4.089-0.749,5.633-1.992l7.658,7.697c0.389,0.392,1.021,0.393,1.414,0.003 c0.392-0.39,0.393-1.023,0.004-1.414l-7.668-7.706C17.264,13.052,18,11.111,18,9c0-4.963-4.037-9-9-9S0,4.037,0,9 C0,13.962,4.037,18,9,18z M9,2c3.859,0,7,3.14,7,7c0,3.859-3.141,7-7,7c-3.86,0-7-3.141-7-7C2,5.14,5.14,2,9,2z"></path>
+                    <g><path fill="none" d="M0 0H24V24H0z"></path></g>
+                </svg>
+                <span class="dcf-sr-only">Search</span>
+            </button>
+        </div>
+        <?php if (!empty($local_results)): ?>
+        <input type="hidden" name="u" value="<?php echo htmlentities($_GET['u'], ENT_QUOTES) ?>" />
+        <?php endif; ?>
+    </form>
 </div>
No results found