diff --git a/README.md b/README.md index bf2c688..fc76a6f 100644 --- a/README.md +++ b/README.md @@ -1 +1,5 @@ # ModeShift-App +## Update Diary +* IMPORTANT: the implementation should be friendly on phone view +### 4/18 a plain web frame with menu bar +menu bar implemented both static and dynamic diff --git a/src/img/cat_head.jpg b/src/img/cat_head.jpg new file mode 100644 index 0000000..a990332 Binary files /dev/null and b/src/img/cat_head.jpg differ diff --git a/src/img/down.png b/src/img/down.png new file mode 100644 index 0000000..4cc9747 Binary files /dev/null and b/src/img/down.png differ diff --git a/src/img/lion_head.png b/src/img/lion_head.png new file mode 100644 index 0000000..3d70b58 Binary files /dev/null and b/src/img/lion_head.png differ diff --git a/src/img/up.png b/src/img/up.png new file mode 100644 index 0000000..a8d32fe Binary files /dev/null and b/src/img/up.png differ diff --git a/src/index.html b/src/index.html new file mode 100644 index 0000000..09532b6 --- /dev/null +++ b/src/index.html @@ -0,0 +1,71 @@ + + + + + + + TODO: rename the title + + + + + + + + +
+

HEADER: This is the page about

+
+
+ + + +
+
+
+

+ I won't tell you the page width is only 80%, and I set it to the middle which I feel is pretty but you can change it if you want. +
+ Deleting elements are simple, you can just set its css property "display" to be "none", and for sure you can set it back to "block" by javacript if you wanna see it again. +
+ A good thing to know is that you can also set "display" to be "flex" for any container (i.e. elements that contains other elements, such as <div&rt;), and you can get a bunch of benefit from doing that. For example, I can do +

+ +

Side-by-side class

+
+

I love salt

+

but I also love sugar

+
+ +

Try the drop down button!!

+
+ + + \ No newline at end of file diff --git a/src/main.js b/src/main.js new file mode 100644 index 0000000..d80dd41 --- /dev/null +++ b/src/main.js @@ -0,0 +1,64 @@ +/* This file contains main thing js does + * Contributor: Xinrong Zhao + */ + +"use strict"; // turn on syntax check + +window.addEventListener("load", init); +window.addEventListener("resize", resizeBackground); +/////////////////////////////////////////////////////// +// response functions +/////////////////////////////////////////////////////// +function init(){ + // init dropdown menu + let drop_btn = document.getElementById("top-menu-drop-button"); + drop_btn.addEventListener("click", showDropDownMenu) + + let up_btn = document.getElementById("top-menu-up-button"); + up_btn.addEventListener("click", hideDropDownMenu) + + // init header/footer background + resizeBackground(); +} + +function showDropDownMenu() { + // delete myself + document.getElementById("top-menu-drop-button-image").style.display = "none"; + this.style.display = "none"; + + // set up button and menu visible + document.getElementById("top-menu-up-button-image").style.display = "block"; + document.getElementById("top-menu-up-button").style.display = "block"; + document.getElementById("top-menu-bar").style.display = "flex"; +} + +function hideDropDownMenu() { + // delete myself + document.getElementById("top-menu-up-button-image").style.display = "none"; + this.style.display = "none"; + + // set up button and menu visible + document.getElementById("top-menu-drop-button-image").style.display = "block"; + document.getElementById("top-menu-drop-button").style.display = "block"; + document.getElementById("top-menu-bar").style.display = "none"; +} + +function resizeBackground() { + let header = document.querySelector("header"); + let height = getComputedStyle(header).getPropertyValue('height'); /* string */ + header.style.marginTop = "-" + height; + document.querySelector("main").style.marginTop = height; + + let footer = document.querySelector("footer"); + height = getComputedStyle(footer).getPropertyValue('height'); /* string */ + + let imgs = document.querySelectorAll("footer img"); + for (let i = 0; i < imgs.length; i++) { + imgs[i].style.height = height; + } + + let ps = document.querySelectorAll("footer p"); + for (let i = 0; i < imgs.length; i++) { + ps[i].style.lineHeight = height; + } +} \ No newline at end of file diff --git a/src/styleframe.css b/src/styleframe.css new file mode 100644 index 0000000..6cb9479 --- /dev/null +++ b/src/styleframe.css @@ -0,0 +1,106 @@ +/* + * This stylesheet contains some basics for web design + * clients can change whatever they want to adapt to their own websites + * + * Contributor: Xinrong Zhao +*/ + +/* + * import extra fonts + * @from fonts.google.com + * @usage font-family: 'Roboto', sans-serif; + */ +@import url('https://fonts.googleapis.com/css?family=Roboto'); + +/********************************************* +** META +**********************************************/ +.side-by-side { + display: flex; +} + +/********************************************* +** MAIN +**********************************************/ +body { + width: 100%; + margin: auto; /* centered horizontally */ + background-color: #D0E0FE; + font-family: 'Roboto', sans-serif; +} + +header { + position: fixed; +} + +footer { + max-height: 50px; + justify-content: center; + align-items: center; +} + +footer img { + vertical-align: middle; +} + +header, footer { + width: 100%; + /* @ 1 line(s) above + * width is not inherited? + */ + text-align: center; + /* @ 1 line(s) above + * align text by center + */ + color: white; + background-image: linear-gradient(to right, rgba(70,130,180, 1), rgba(70,130,180, 0.95), rgba(70,130,180, 1)); +} + +hr { + border: 0px; + height: 1px; + margin: 2px; + background-image: linear-gradient(to right, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.75), rgba(255, 255, 255, 0)); +} + +#top-menu-drop-button, #top-menu-up-button { + width: 100%; + height: 25px; + background-color: rgba(0,0,0,0); + border-style: none; +} + +#top-menu-drop-button-image, #top-menu-up-button-image { + margin: auto; + max-height: 25px; +} + +#top-menu-up-button, #top-menu-up-button-image, #top-menu-bar { + display: none; +} + +#top-menu-bar { + flex-wrap: wrap; + justify-content: center; + background-image: rgb(70,130,180); +} + +.top-menu-content:link, .top-menu-content:visited { + padding: 10px 20px; + text-decoration: none; + color: white; +} + +.top-menu-content:hover, .top-menu-content:active { + text-decoration: underline; +} + +main { + width: 80%; + margin: auto; + padding-top: 10px; +} + +#example { + justify-content: space-between; +} \ No newline at end of file