wip: uconn header

sfc23007 · Nov 19, 2024 · 522df50 · 522df50
1 parent 3e4bee8
commit 522df50
Show file tree

Hide file tree

Showing 30 changed files with 3,469 additions and 29 deletions.
diff --git a/index.html b/index.html
@@ -2,12 +2,13 @@
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
-    <link rel="icon" type="image/svg+xml" href="/oak-leaf-blue.png" />
+    <link rel="icon" type="image/png" href="/oak-leaf-blue.png" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>OpenShift React Test</title>
+    <title>Container React Test</title>
   </head>
   <body>
-    <div id="root"></div>
+    <div id="root" class="container"></div>
     <script type="module" src="/src/main.jsx"></script>
+    <script type="text/javascript" src="/src/assets/banner.js"></script>
   </body>
 </html>
diff --git a/src/App.jsx b/src/App.jsx
@@ -5,11 +5,13 @@ import Home from './Home'
 import About from './About'
 import Contact from './Contact'
 import Footer from './Footer'
+import UConnHeader from './UConnHeader';
 
 function App() {
 
   return (
     <>
+      <UConnHeader />
       <Navbar />
       <Routes>
         <Route path='/' element={<Home/>} />

diff --git a/src/App.scss b/src/App.scss
@@ -5,13 +5,6 @@ body {
     background-color: #aaa;
 }
 
-#root {
-  max-width: 1280px;
-  margin: 0 auto;
-  padding: 2rem;
-  width: 1200%;
-}
-
 .logo {
   height: 25em;
   padding: 1.5em;
@@ -42,7 +35,6 @@ body {
   color: #888;
 }
 
-
 //nav
 Nav {
   z-index: 1000;

diff --git a/src/Footer.jsx b/src/Footer.jsx
@@ -3,7 +3,7 @@ function Footer() {
   return (
     <>
       <div className="py-5">
-        <p className="text-center w-100 d-block m-4">&copy; 2024 Anyone</p>
+        <p className="text-center w-100 d-block my-4">&copy; 2024 Anyone</p>
       </div>
     </>
   )

diff --git a/src/Home.jsx b/src/Home.jsx
@@ -5,19 +5,23 @@ function App() {
   const [count, setCount] = useState(0)
 
   return (
-    <>
-      <div className="my-5 d-block text-center">
-        <img src={uconnOakLogo} className="logo m-auto" alt="UConn Oak Logo" />
-      </div>
-      <h1 className="w-100 text-center">Hello!</h1>
-      <div className="card">
-        <div className="card-body text-center">
-          <button className="btn btn-lg btn-primary" onClick={() => setCount((count) => count + 1)}>
-            count is {count}
-          </button>
+    <div className="container">
+      <div className="row">
+        <div className="col-12">
+          <div className="my-5 d-block text-center">
+            <img src={uconnOakLogo} className="logo m-auto" alt="UConn Oak Logo" />
+          </div>
+          <h1 className="w-100 text-center">Hello!</h1>
+          <div className="card">
+            <div className="card-body text-center">
+              <button className="btn btn-lg btn-primary" onClick={() => setCount((count) => count + 1)}>
+                count is {count}
+              </button>
+            </div>
+          </div>
         </div>
       </div>
-    </>
+    </div>
   )
 }
 

diff --git a/src/UConnHeader.jsx b/src/UConnHeader.jsx
@@ -0,0 +1,65 @@
+import './UConnHeader.scss';
+
+function UConnHeader(){
+
+  return (
+    <div id="uc-header">
+      <div id="uconn-banner" className="alternative">
+        <div id="uconn-header-container" className="blue">
+          <div className="row-container">
+            <div className="row-fluid">
+              <div id="home-link-container">
+                <a id="home-link" href="https://uconn.edu/">
+                  <span id="wordmark" aria-hidden="false">UConn</span>
+                </a>
+                <a id="home-link" href="https://uconn.edu/">
+                  <span className="no-css">University of Connecticut school of </span>
+
+                  <span id="university-of-connecticut">
+                    University of Connecticut                            </span>
+                </a>
+              </div>
+
+              <div id="button-container">
+                <div className="icon-container" id="icon-container-search">
+                  <a id="uconn-search" className="btn" href="https://uconn.edu/search">
+                    <span className="no-css">Search University of Connecticut</span>
+                    <svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="20" viewBox="0 0 32 32" aria-hidden="true" className="banner-icon">
+                      <title>Search UConn</title>
+                      <path d="M28.072 24.749l-6.046-6.046c0.912-1.499 1.437-3.256 1.437-5.139 0-5.466-4.738-10.203-10.205-10.203-5.466 0-9.898 4.432-9.898 9.898 0 5.467 4.736 10.205 10.203 10.205 1.818 0 3.52-0.493 4.984-1.349l6.078 6.080c0.597 0.595 1.56 0.595 2.154 0l1.509-1.507c0.594-0.595 0.378-1.344-0.216-1.938zM6.406 13.258c0-3.784 3.067-6.853 6.851-6.853 3.786 0 7.158 3.373 7.158 7.158s-3.067 6.853-6.853 6.853-7.157-3.373-7.157-7.158z"></path>
+                    </svg>
+                  </a>
+                  <div id="uconn-search-tooltip" style={{ zIndex: '99999 !important' }}></div>
+                </div>
+                <div className="icon-container" id="icon-container-az">
+                  <button className="btn btn-popup-control" id="uconn-az" href="https://uconn.edu/az" aria-haspopup="true" aria-controls="a-z-popup" aria-expanded="false">
+                    <span className="no-css">A to Z Index</span>
+                    <svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="20" viewBox="0 0 32 32" aria-hidden="true" className="banner-icon">
+                      <title>UConn A to Z Index</title>
+                      <path d="M5.345 8.989h3.304l4.944 13.974h-3.167l-0.923-2.873h-5.147l-0.946 2.873h-3.055l4.989-13.974zM5.152 17.682h3.579l-1.764-5.499-1.815 5.499zM13.966 14.696h5.288v2.56h-5.288v-2.56zM20.848 20.496l7.147-9.032h-6.967v-2.474h10.597v2.341l-7.244 9.165h7.262v2.466h-10.798v-2.466h0.004z">
+                      </path>
+                    </svg>
+                  </button>
+                  <div id="a-z-popup" className="popup-container">
+                    <div className="link-wrapper az-link-wrapper">
+                      <a href="https://computing.engineering.uconn.edu/a-z-index">
+                        <span className="banner-search-text">Site A-Z</span>
+                      </a>
+                    </div>
+                    <hr aria-hidden="true"></hr>
+                      <div className="link-wrapper az-link-wrapper">
+                        <a href="https://uconn.edu/az"><span className="banner-search-text"></span>UConn A-Z</a>
+                      </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+
+  );
+}
+
+export default UConnHeader