Pagination in recent leaves and login card responsive (#29)

* signup page complete responsive * user almost responsive * done pagination * active class fixed * login card responsive Co-authored-by: blurry-x-face <[email protected]>
axios-iiitl · Apr 21, 2020 · 5485de4 · 5485de4
1 parent 563fbe3
commit 5485de4
Show file tree

Hide file tree

Showing 6 changed files with 113 additions and 14 deletions.
diff --git a/assets/card.css b/assets/card.css
@@ -82,5 +82,20 @@
 }
 .c-content a:hover {
   color: #000;
-  background-color: rgb(80, 78, 78, 0.15);
+  background-color: #1c4f6c;
 }
+
+@media screen and (max-width:550px){
+  .c-content h2{
+    font-size: 3.2em;
+  }
+  .c-content h3{
+    color: #1c4f6c;
+  }
+  .c-box:hover .c-content h2 {
+    top: -50px;
+  }
+  .c-box{
+    padding-top: 30px;
+  }
+}
diff --git a/assets/styles.css b/assets/styles.css
@@ -10,6 +10,7 @@ body {
 
 .login-card {
   position: absolute;
+  margin-top: 20px;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
@@ -42,11 +43,76 @@ body {
 
 .login-card h4 {
   color: var(--white-bg-text);
+  text-align: center;
   font-size: 18px;
   padding-bottom: 5px;
   border-bottom: 1px solid #ccc;
 }
 
+/* pagination */
+.pagination {
+  display: inline-block;
+}
+
+.pagination a {
+  color: black;
+  float: left;
+  padding: 8px 16px;
+  text-decoration: none;
+  transition: background-color .3s;
+}
+
+.pagination a.active {
+  background-color: rgba(128, 128, 128, 0.801);
+  color: white;
+}
+
+.pagination a:hover:not(.active) {background-color: #ddd;}
+
+/* responsive */
+
+@media screen and (max-width:550px){
+  .login-card{
+    max-width: 90vw;
+    height: 500px;
+    /* left: 45%; */
+  }
+  .login-card-inner{
+    height: 100%;
+  }
+  .login-card img {
+    width: 60vmin;
+  }
+  .sgup-g{
+    display: none;
+  }
+  .brand-logo{
+    top: 50%;
+  }
+  .logout{
+    position: absolute;
+    right: 6%;
+    margin-top: 15px;
+  }
+  .left{
+    position: absolute;
+    left: 30px;
+  }
+  .left img{
+    height: 40px;
+    width: 65px;
+  }
+  .jumbotron h3{
+    font-size: 32px;
+  }
+}
+@media screen and (max-width: 350px){
+  .login-card{
+    top: 58%;
+    margin-bottom: 30px;
+  }
+}
+
 /* sidenave */
 nav {
   background: white;
@@ -315,7 +381,6 @@ nav ul a {
   .c-box{
     margin-bottom: 30px;
     border: .5px solid #333;
-
   }
   .c-box::before{
     content: '';
@@ -329,9 +394,10 @@ nav ul a {
     z-index: -1;
   }
   .c-box:nth-child(1)::before{
-    background-image: linear-gradient(315deg , #474243 , #2b2725);
+    background-image: linear-gradient(315deg , #1c4f6c , #1c4f6c);
   }
   .c-box:nth-child(3)::before{
-    background-image: linear-gradient(315deg , #474243 , #2b2725);
+    /* background-image: linear-gradient(315deg , #474243 , #2b2725); */
+    background-image: linear-gradient(315deg , #1c4f6c , #1c4f6c);
   }
 }
diff --git a/views/editleave.ejs b/views/editleave.ejs
@@ -36,10 +36,15 @@
                 <input type="date" name="leave[Return]" value="<%=leave.Return%>" required>
             </div>
 
-            <div class="form group">
-                <label>Reason</label><br>
-                <input type="text" name="leave[Reason]" placeholder="Reason" value="<%=leave.Reason%>"required>
-            </div>
+            <div class="inp-animation-container">
+                <input
+                  type="text"
+                  name="leave[Reason]"
+                required/>
+                <div class="inp-label"> 
+                  <span> Reason </span>
+                </div>
+              </div>
 
             <div class="form-group">
                 <br>

diff --git a/views/leavehistory.ejs b/views/leavehistory.ejs
@@ -36,7 +36,7 @@
         <a href="/user/dashboard/delete/leave/<%=leave._id%>"
           ><button class="btn red darken-1 ">Delete</button></a
         >
-        <button class="btn grey darken-1 ">Waiting</button>
+        <button class="btn grey darken-1 " style="margin-top: 5px;">Waiting</button>
         <%}else if(leave.Approve==true){%>
         <button class="btn light-green darken-2 ">Approved</button>
         <%}else if(leave.Approve==false){%>
@@ -45,10 +45,18 @@
         <br /><br />
       </div>
       <%})%> <%}%>
-
-      <%for(var i=0;i< number;i++){%>
-        <a href="/user/dashboard/leavehistory/?pageno=<%=i%>"><%=i%></a>
-    <%}%>
+      <div class="pagination">
+        <a class="waves-effect" href="/user/dashboard/leavehistory/?pageno=<%=0%>">&laquo;</a>
+        <%for(var i=0;i< number;i++){%>
+          <%if(i != page){%>
+            <a class="waves-effect" href="/user/dashboard/leavehistory/?pageno=<%=i%>"><%=i+1%></a>
+          <%}else{%>
+            <a class="active" href="/user/dashboard/leavehistory/?pageno=<%=i%>"><%=i+1%></a>
+          <%}%>
+      <%}%>
+        <a class="waves-effect" href="/user/dashboard/leavehistory/?pageno=<%=number-1%>">&raquo;</a>
+      </div>
+
 
     </div>
   </div>

diff --git a/views/partials/header.ejs b/views/partials/header.ejs
@@ -57,7 +57,11 @@
 
         <ul id="nav-mobile" class="view-on-med-and-down">
         </li>
-        <li><a href="/auth/logout">LogOut</a></li>
+        <%if(!currentUser){%>
+          <li><a class="sgup-g" href="/auth/google">Sign Up/Login with G+</a></li>
+          <%}else{%>
+        <li><a class="logout" href="/auth/logout">LogOut</a></li>
+        <%}%>
         </ul>
 
       </div>

diff --git a/views/partials/sidenav.ejs b/views/partials/sidenav.ejs
@@ -35,6 +35,7 @@
       ><i class="material-icons">schedule</i> Leave Applications</a
     >
   </li>
+  <li><a href="/auth/logout"><i class="material-icons">person_outline</i> LogOut</a></li>
 </ul> 
 <a href="#" data-target="slide-out" class="sidenav-trigger btn-floating"
   ><i class="material-icons slide-out-icon">chevron_right</i></a