s452490/cs_homework09
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Started something. Dev-server on WSL.

Browse Source
This commit is contained in:
Jakub Koralewski 2019-12-20 20:46:53 +01:00
parent dd94167d6b
commit 3d67435454
5 changed files with 306 additions and 26 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
.postcssrc
View File

@ -1,5 +1,8 @@
{ {
"plugins": { "plugins": {
"postcss-modules": {
generateScopedName: "[name]_[local]_[hash:base64:5]"
},
"autoprefixer": { "autoprefixer": {
"grid": true "grid": true
} }

44
src/index.html
View File

@ -7,31 +7,53 @@
<meta http-equiv="X-UA-Compatible" content="ie=edge"> <meta http-equiv="X-UA-Compatible" content="ie=edge">
<link href="index.scss" rel="stylesheet"> <link href="index.scss" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Bungee+Inline&display=swap" rel="stylesheet"> <link href="https://fonts.googleapis.com/css?family=Bungee+Inline&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Lato:300,300i,400,400i,900,900i&display=swap" rel="stylesheet"> <link href="https://fonts.googleapis.com/css?family=Lato:300,300i,400,400i,900,900i&display=swap"
rel="stylesheet">
<script src="https://kit.fontawesome.com/a0a098cada.js" crossorigin="anonymous"></script>
<title>The UAM Times</title> <title>The UAM Times</title>
</head> </head>
<body> <body>
<header id="main-header"> <header id="main-header">
<div id="top"> <div id="hamburger" class="hover-pointer">
<div id="hamburger"></div> <div id="top"></div>
</div> <div id="middle"></div>
<div id="bottom"></div>
</div>
<div id="search" class="hover-pointer">
<i class="fas fa-search"></i>
<input class="hidden-input" placeholder="Search for noose">
</div>
<h1>THE TAJMS</h1> <h1>THE TAJMS</h1>
<div id="date"></div>
</header> </header>
<nav> <nav>
<ul>
<li>Home Page</li>
<li>World</li>
<li>Poland</li>
<li>Politics</li>
<li>Poznań</li>
<li>Business</li>
<li>Opinion</li>
<li>Tech</li>
<li>Best Student of The Year</li>
<li>Best Teacher of The Decade</li>
<li>Health</li>
</ul>
</nav> </nav>
<div id="click-catcher"></div>
<main> <main>
<section id="sports"> <section id="sports">
<header> <header>
<h3>Sports</h3> <h3>Sports</h3>
</header> </header>
<article> <article>
<figure> <figure>
<img src="../img/thumbnails/sports01.jpg" alt="Free kick"> <img src="../img/thumbnails/sports01.jpg" alt="Free kick">
<figcaption>Free kick at second half.</figcaption> <figcaption>Free kick at second half.</figcaption>
</figure> </figure>
<h4>We won versus some other team.</h4> <h4>We won versus some other team.</h4>
</article> </article>
</section> </section>
<section> <section>

183
src/index.scss
View File

@ -3,26 +3,185 @@
padding: 0; padding: 0;
box-sizing: border-box; box-sizing: border-box;
} }
$secondary: green;
body {
font-family: 'Lato', sans-serif;
padding: 2rem 2rem 2rem 2rem;
#click-catcher {
display: none;
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 100%;
z-index: 2;
&.active {
display: block;
}
}
}
.hover-pointer {
&:hover {
cursor: pointer;
}
}
nav {
$bg-color: white;
position: fixed;
top: 0;
left: 0;
transform: translateX(-100%);
transition: transform 500ms ease-in-out;
background-color: $bg-color;
min-height: 100vh;
padding: 1rem;
z-index: 10;
ul {
overflow-y: auto;
li {
list-style-type: none;
padding: 5px;
margin-top: 0.2rem;
font-weight: 500;
border-radius: 0.5rem;
&.active {
font-weight: 600;
}
&:hover {
cursor: pointer;
background-color: mix($secondary, darken($bg-color, 10%), 10%);
}
}
}
&.active {
transform: translateX(0);
}
}
header#main-header { header#main-header {
display: flex; display: flex;
flex-direction: column;
width: 100%; width: 100%;
flex-direction: row;
align-items: center;
border-bottom: 2px solid mix(black, $secondary, 50%);
padding-bottom: 1rem;
margin-bottom: 1rem;
#top { $input-width: 10rem;
height: 10rem;
#hamburger { #date {
width: 1.5rem; align-self: end;
height: 3rem; small {
font-style: italic;
color: $secondary;
}
}
&:after { h1 {
content: ''; $font-size: 4rem;
display: block; font-weight: 100;
width: 100%; font-size: $font-size;
height: 2px; font-family: 'Bungee Inline', serif;
background-color: black; transform: translateX(-#{$input-width/2});
margin-left: auto;
user-select: none;
width: 100%;
//text-align: center;
height: $font-size;
display: flex;
//align-items: ;
justify-content: center;
align-items: center;
span {
&:hover {
transform: translateY(5px);
transition-duration: 0.2s;
} }
&.empty {
width: $font-size/4;
}
//height: $font-size;
display: inline-block;
//height: $font-size;
transform: translateY(0px);
transition: 0.3s transform ease-in-out;
}
}
div#search {
color: $secondary;
display: inline-flex;
flex-direction: row;
&.active {
input.hidden-input {
transform: scaleX(1) translateX(-2px) !important;
transition-duration: 0.2s;
border: 2px solid black !important;
}
}
input.hidden-input {
margin-left: 1rem;
transform: scaleX(0);
transform-origin: left;
width: $input-width;
height: 1rem;
padding: 10px 12px;
border-width: 0;
transition-property: transform, border-width;
transition-duration: 1s;
transition-timing-function: ease-in-out;
}
i {
margin-left: 1rem;
}
}
#hamburger {
$gap: 4px;
$size: 4px;
$width: 2rem;
width: $width;
display: flex;
flex-direction: column;
&:hover {
#top {
transform: translateX(-3px);
}
#bottom {
transform: translateX(3px);
}
}
& > div {
width: 100%;
background-color: black;
height: $size;
border-radius: 3px;
}
#top {
transition: transform 1s cubic-bezier(0.2, -2, 0.2, 2);
margin-bottom: $gap;
}
#bottom {
transition: transform 1s cubic-bezier(0.2, -2, 0.2, 2);
margin-top: $gap;
} }
} }
} }

96
src/index.ts
View File

@ -1,3 +1,93 @@
window.onload = function() { let search = {
console.log("Hello world") icon: document.querySelector("div#search i"),
}; input: document.querySelector("div#search input") as HTMLInputElement,
onInputClick: () => search.active(search.icon.parentElement),
isActive: false,
active: (elem: HTMLElement) => {
search.isActive = !search.isActive;
if(search.isActive) {
elem.classList.add("active");
} else {
search.input.value = "";
elem.classList.remove("active");
}
}
};
search.icon.addEventListener("click", search.onInputClick);
let nav = {
clickCatcher: document.querySelector("div#click-catcher"),
nav: document.querySelector("body > nav"),
hamburger: document.querySelector("#hamburger"),
isActive: false,
listItems: null as NodeListOf<HTMLLIElement>,
activeListItem: null as HTMLLIElement,
active: () => {
nav.isActive = !nav.isActive;
if(nav.isActive) {
[nav.nav, nav.clickCatcher]
.forEach(
(x) => x.classList.remove("active"));
} else {
[nav.nav, nav.clickCatcher]
.forEach(
(x) => x.classList.add("active"));
}
},
onClickCatcherClick: (e: Event) => {
console.log("Click catcher click");
e.stopPropagation();
nav.active();
},
hamburgerOnClick: () => {
nav.active();
console.log("hamburgerOnClick");
},
navOnClick: () => {
nav.active();
},
setActiveListItem: (elem: HTMLLIElement) => {
nav.activeListItem.classList.remove("active");
nav.activeListItem = elem;
nav.activeListItem.classList.add("active");
},
listItemClick: (e: Event) => {
nav.setActiveListItem(e.target as HTMLLIElement);
}
};
nav.listItems = nav.nav.querySelectorAll("ul > li");
nav.listItems.forEach(
(x) => x.addEventListener("click", nav.listItemClick)
);
nav.activeListItem = nav.listItems[0];
nav.activeListItem.classList.add("active");
nav.hamburger.addEventListener("click", nav.hamburgerOnClick);
nav.nav.addEventListener("click", nav.navOnClick);
nav.clickCatcher.addEventListener("click", nav.onClickCatcherClick);
let header = {
h1: document.querySelector("header > h1") as HTMLHeadingElement,
makeHeaderAnimatable: () => {
const text = header.h1.innerText.trim();
header.h1.innerHTML = "";
for(const letter of text) {
const span = document.createElement("span");
span.innerText = letter;
if(letter === " ") {
span.classList.add("empty");
}
header.h1.appendChild(span);
}
},
date: document.querySelector("header > div#date"),
setDate: () => {
header.date.innerHTML = `
<small>Today is</small>
<strong>${new Date().toISOString()}</strong>`;
}
};
header.makeHeaderAnimatable();
header.setDate();

6
tsconfig.json Normal file
View File

@ -0,0 +1,6 @@
{
"compilerOptions": {
"target": "es5",
"lib": ["esnext", "dom", "dom.iterable"]
}
}