Add readme (#7)

README.md

@@ -1 +1,27 @@
-# Datepicker
+# Datepicker powered by Typescript and RxJS
+This project was built using _mainly_
+- Mobile first approach
+- RxJS 5.2
+- Typescript 2.2.1
+- Jest
+
+## What was my motivation?
+TL;DR -> I want to learn RxJS
+
+I found RxJS *SUPER CHALLENGING* and I think the best way to learn is to build something, that's how this mini project was born.
+
+### Why Typescript?
+I wanted to learn to use Typescript outside the Angular world.
+
+## TODO
+- [] Clean up styles
+- [] Cleanup date and dom methods
+- [] Improve/Cleanup types
+- [] Add Travis/Circle
+- [] Add a demo page
+
+## Contribute
+PRs welcome!
+
+## License
+MIT

src/index.html

@@ -18,6 +18,6 @@ <h1 class="title">Scheduler</h1>
 		</form>
 	</div>
 	<div id="overlay"></div>
-	<a href="#" id="close-overlay" title="close overlay">X</a>
+	<a href="#" class="close-overlay" title="close overlay">X</a>
 </body>
 </html>

src/index.ts

@@ -27,7 +27,7 @@ import {
 const calendarInputElement: any | null = document.getElementById('calendar');
 const calendarContainer: HTMLElement | null = document.getElementById('calendar-container');
 const bodyElement: HTMLBodyElement | null = document.querySelector('body');
-const closeButton: HTMLElement | null = document.getElementById('close-overlay');
+const closeButton: any | null = document.querySelector('.close-overlay');
 
 const closeButton$ = Observable.fromEvent(closeButton, 'click');
 

src/scss/style.scss

@@ -32,12 +32,17 @@ a {
 	}
 }
 
+h2 {
+	margin-top: 0;
+	margin-bottom: 0;
+}
+
 input[type='text'] {
 	border: 1px solid $lightBlue;
 	color: $inactive;
 	font-size: 1em;
 	height: 2em;
-	width: 100%;
+	width: 99%;
 }
 
 input[type='radio'] {
@@ -77,13 +82,15 @@ input[type='radio'] {
 	transition: .2s ease-in all;
 }
 
-#close-overlay {
+.close-overlay {
 	display: none;
 }
 
 .navigator {
 	display: flex;
 	align-items: center;
+	margin-bottom: 1em;
+	margin-top: 1em;
 
 	h2 {
 		margin-left: 10px;
@@ -127,7 +134,7 @@ input[type='radio'] {
 		z-index: 2;
 	}
 
-	#close-overlay {
+	.close-overlay {
 		display: inline-block;
 		position: absolute;
 		top: 20px;
@@ -143,7 +150,44 @@ input[type='radio'] {
 
 // Desktop only
 @media screen and (min-width: 1024px) {
-	.is-open #close-overlay {
+	body {
+		height: initial;
+	}
+
+	#app {
+		margin: 0 auto;
+		width: 350px;
+	}
+
+	.is-open {
+		.close-overlay {
+			display: none;
+		}
+
+		input[type='text'] {
+			display: inline-block;
+		}
+
+		#calendar-container {
+			border: 1px solid $lightBlue;
+			height: initial;
+		}
+	}
+
+	#overlay {
 		display: none;
 	}
+
+	form {
+		position: relative;
+	}
+
+	#calendar-container {
+		margin-top: 5px;
+		border-radius: 5px;
+	}
+
+	table {
+		padding-bottom: 1em;
+	}
 }