diff options
| author | xengineering <me@xengineering.eu> | 2021-09-05 13:49:08 +0200 |
|---|---|---|
| committer | xengineering <me@xengineering.eu> | 2021-09-05 13:52:40 +0200 |
| commit | 437bf22078af95f4576fec452bcbc88c1a9a09ec (patch) | |
| tree | 0803469f53ce0c3b1c6ff8cb7ff885a99db05956 | |
| parent | f58bf0443d71f7476c7fdb7a6e1dc9c3d61da412 (diff) | |
| download | libweb-437bf22078af95f4576fec452bcbc88c1a9a09ec.tar libweb-437bf22078af95f4576fec452bcbc88c1a9a09ec.tar.zst libweb-437bf22078af95f4576fec452bcbc88c1a9a09ec.zip | |
Implement Cards and State-based Menu
| -rw-r--r-- | css/xengineering.css | 52 | ||||
| -rw-r--r-- | html/template.html | 58 |
2 files changed, 94 insertions, 16 deletions
diff --git a/css/xengineering.css b/css/xengineering.css index 0224dc1..a55d72a 100644 --- a/css/xengineering.css +++ b/css/xengineering.css @@ -28,8 +28,12 @@ a { color: blue; } -nav a { - display: none; +nav { + background-color: black; +} + +.menu-anchor { + display: block; padding: 16px; text-align: center; color: lightgray; @@ -37,12 +41,12 @@ nav a { text-decoration: none; } -nav a:hover { +.menu-anchor:hover { color: black; background-color: lightgray; } -nav button { +#menu-button { display: block; border: 0px; width: 100%; @@ -53,7 +57,7 @@ nav button { text-decoration: none; } -nav button:hover { +#menu-button:hover { color: black; background-color: lightgray; } @@ -66,23 +70,24 @@ pre { border-radius: 5px; } -main div { +.card { color: black; box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2); padding: 10px; border-radius: 5px; + margin-bottom: 16px; } -main div:hover { +a .card:hover { box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2); } -main div h3 { +.card h3 { margin-top: 0px; text-align: center; } -main div p { +.card p { margin-bottom: 0px; text-align: center; } @@ -106,6 +111,35 @@ main div p { @media only screen and (min-width: 768px) { + h1 { + text-align: left; + } + + nav { + height: 100%; + width: 200px; + position: fixed; + top: 0px; + } + + #menu-button { + display: none; + } + + .menu-anchor { + text-align: left; + } + + main { + margin-left: 200px; + } + + main * { + max-width: 960px; + margin-left: auto; + margin-right: auto; + } + } /******************************************************************************/ diff --git a/html/template.html b/html/template.html index eaaf9e7..080c07d 100644 --- a/html/template.html +++ b/html/template.html @@ -19,8 +19,8 @@ <body> <nav> - <button onclick=toggleMenu()>MENU</button> - <a href="https://xengineering.eu">xengineering.eu</a> + <button id="menu-button" onclick=toggleMenu()>MENU</button> + <a class="menu-anchor" href="https://xengineering.eu">xengineering.eu</a> </nav> <main> @@ -36,21 +36,65 @@ print("This is just some example code!") </code></pre> - <p>Sometimes it is quite nice to put things into containers:</p> + <p>Sometimes it is quite nice to put things into cards:</p> + <div class="card"> + <h3>This is a Card</h3> + <p>Cards are very good.</p> + </div> + + <p>It is also possible to put cards into an anchor tag:</p> <a href="https://xengineering.eu"> - <div href="https://xengineering.eu"> - <h3>This is a Container</h3> - <p>Containers are very good.</p> + <div class="card"> + <h3>This is a Card inside an Anchor</h3> + <p>It is a link!</p> </div> </a> </main> <script> + // define menu state + const MenuState = { + Desktop: "Desktop", + MobileCollapsed: "MobileCollapsed", + MobileExpanded: "MobileExpanded" + } + var state; + + // init menu state and add mediaChange handler + var isMobile = window.matchMedia("(max-width: 767px)"); + mediaChange(isMobile); + isMobile.addListener(mediaChange) + + function mediaChange(isMobile) { + if (isMobile.matches) { + state = MenuState.MobileCollapsed; + handleState(state); + } else { + state = MenuState.Desktop; + handleState(state); + } + } + function toggleMenu() { + switch (state) { + case MenuState.MobileCollapsed: + state = MenuState.MobileExpanded; + handleState(state); + break; + case MenuState.MobileExpanded: + state = MenuState.MobileCollapsed; + handleState(state); + break; + } + } + + function handleState(state) { + console.log("State is now " + state) + var items = document.getElementsByTagName("a"); for(var i=0; i<items.length; i++) { if (items[i].parentNode.tagName == "NAV") { - if (items[i].style.display == "block") { + if (state == MenuState.MobileCollapsed) { items[i].style.display = "none"; } else { items[i].style.display = "block"; |