fix height issues for smaller viewpoerts

tnguyen14 · Apr 7, 2017 · 1e983ff · 1e983ff
1 parent 5b98fdd
commit 1e983ff
Showing 1 changed file with 24 additions and 23 deletions.
diff --git a/public/style.css b/public/style.css
@@ -458,11 +458,13 @@ select {
 	border: none;
 	border-radius: 3px;
 	color: var(--color-pelorous);
-	font-size: 1.4em;
-	outline: none;
-	padding: .2rem 0 .5rem .8rem;
+	padding: .4rem 0 1.1rem .8rem;
 	width: 80%;
 }
+.has-tags .title-container .title {
+	padding-top: .2rem;
+	padding-bottom: .2rem;
+}
 .title-container .title:hover {
 	background-color: #fafafa;
 }
@@ -473,6 +475,7 @@ select {
 .tabnav-container {
 	padding: 0 .8rem;
 	float: left;
+	height: 2rem;
 }
 .tabnav {
 	margin-top: -1px;
@@ -502,15 +505,13 @@ select {
 @media (min-width: 45em) {
 	.tabnav-container {
 		float: none;
+		height: auto;
 		margin-top: .5rem;
 		padding: .8rem 0;
 		position: absolute;
 		right: .5rem;
 		top: 5rem;
 	}
-	.has-tags .tabnav-container {
-		top: calc(5rem + 3vh);
-	}
 	.tabnav {
 		display: flex;
 		flex-direction: column-reverse;
@@ -528,9 +529,14 @@ select {
 .content-container {
 	border-top: 1px solid var(--color-gainsboro);
 	border-bottom: 1px solid var(--color-gainsboro);
-	padding: .8rem 0 .3rem;
+	padding: .6rem 0 .3rem;
 	overflow: auto;
 }
+.has-tags .content-container {
+	/* reduce padding top by .2rem so no need for height adjustment
+	 * when has tags */
+	padding-top: .4rem;
+}
 @media (min-width: 45em) {
 	.content-container {
 		border-bottom: none;
@@ -541,6 +547,7 @@ select {
 
 .metadata {
 	font-size: .9em;
+	padding-left: .8rem;
 }
 .metadata .label {
 	color: #bbb;
@@ -564,22 +571,16 @@ select {
 }
 .write-content textarea {
 	width: 100%;
-	height: 82.5vh;
-}
-.has-tags .write-content textarea {
-	height: 79.5vh;
+	height: calc(100% - 6rem);
 }
 .write-content textarea:focus {
 	background-color: #fff;
 }
 
 .view-content {
-	height: 82.5vh;
+	height: calc(100% - 6rem);
 	overflow: auto;
 }
-.has-tags .view-content {
-	height: 80.5vh;
-}
 .write-selected .view-content {
 	display: none;
 }
@@ -589,18 +590,18 @@ select {
 		margin-right: .8rem;
 	}
 	.write-content textarea {
-		height: 87.5vh;
+		height: calc(100% - 4.6rem);
 		margin-bottom: 1.5rem;
 	}
-	.has-tags .write-content textarea {
-		height: 85.5vh;
-	}
+	/* .has-tags .write-content textarea { */
+	/* 	height: 85.5vh; */
+	/* } */
 	.view-content {
-		height: 87.5vh;
-	}
-	.has-tags .view-content {
-		height: 84.5vh;
+		height: calc(100% - 4.6rem);
 	}
+	/* .has-tags .view-content { */
+	/* 	height: 84.5vh; */
+	/* } */
 }
 .note-actions {
 	display: flex;