fix (responsive fix): Fix responsiveness for loan history table

- Fixed Loan history table for responsiveness
benfluleck · Jan 8, 2018 · 8fb5e09 · 8fb5e09
1 parent 1153b05
commit 8fb5e09
Show file tree

Hide file tree

Showing 2 changed files with 33 additions and 4 deletions.
diff --git a/client/src/app/components/presentation/loanhistory/LoanHistoryTable.jsx b/client/src/app/components/presentation/loanhistory/LoanHistoryTable.jsx
@@ -44,10 +44,11 @@ const BorrowHistoryTable = (props) => {
   return (rows ?
     <Row>
       <div className="center loanhistory-table">
-        <table className="centered highlight bordered history-table">
+        <table className={`centered highlight
+        bordered history-table responsive-table`}>
           <thead>
             <tr className="loan-header">
-              <th>Book</th>
+              <th className="book-column">Book</th>
               <th>Date Borrowed</th>
               <th>Date To Be Returned</th>
               <th>User Return Date</th>

diff --git a/client/src/app/css/style.scss b/client/src/app/css/style.scss
@@ -485,7 +485,7 @@ i.medium {
 }
 
 .header-wrapper {
-  animation: pulse 8s 10;
+  animation: pulse 5s infinite;
 }
 
 @keyframes pulse {
@@ -605,6 +605,7 @@ i.medium {
 	.overlay-main {
 		margin-top: -57vh;
 	}
+
 }
 
 @media screen and (max-width: 776px) {
@@ -682,20 +683,25 @@ i.medium {
 		h3 {
 			 font-size: 2rem !important;
 		}
+
+		.book-column{
+			min-height: 160px;
+		}
 }
 
 @media only screen and (min-width: 1000px){
 	.row{
 	margin-bottom: 28px !important;
 	}
 	.header-wrapper {
-		height: 84vh !important;
+		height: 101vh !important;
 	}
 	h1{
 		font-size: 1.6em;
 	}
 }
 
+
 @media only screen and (min-width: 1200px) {
 	.card img,
 	.card-image img {
@@ -705,6 +711,15 @@ i.medium {
 	.book-icons-1{
 		right: -159px !important;
 	}
+	.header-wrapper {
+		height: 94vh !important;
+	}
+}
+
+@media screen and (min-width: 439px) and (max-width: 992px) {
+	.book-column{
+		min-height: 15rem;
+	}
 }
 
 
@@ -715,6 +730,19 @@ i.medium {
 	}
 }
 
+@media screen and (min-width: 759px) and (max-width: 975px) {
+	.header-wrapper {
+		height: 75vh !important;
+	}
+}
+
+@media only screen and (min-width: 1239px) {
+	.header-wrapper {
+		height: 81vh !important;
+	}
+
+}
+
 @media (max-width: 991px) {
 	.card img,
 	.card-image img {