Minor changes in teams page

akshaya9 · Sep 4, 2018 · ef46f9a · ef46f9a
1 parent d80df9b
commit ef46f9a
Show file tree

Hide file tree

Showing 6 changed files with 96 additions and 24 deletions.
diff --git a/Home/static/home/assets/css/template.css b/Home/static/home/assets/css/template.css
@@ -1814,23 +1814,24 @@ button#submit:hover {
 textarea {
 	resize: none;
 }
-
-.to-top-link{
-	position:absolute;
-	bottom:0;
-	left:50%;
-	width:40px;
-	height:40px;
-	background:#f5f5f5;
-	text-align:center;
-	line-height:40px;
-	margin-left:-20px;
+#go_to_top {
+    width: 40px;
+    line-height: 40px;
+		border-radius: 50%;
+    display: none;
+    cursor: pointer;
+    position: fixed;
+    bottom: 5%;
+    right: 1%;
+    background: #111;
+    color: #555;
+    text-align: center;
+}
+#go_to_top:hover {
+    background-color: #f5f5f5;
+    color: #000;
 }
 
-.to-top-link:hover{
-	background:#111;
-	color:#fff;
-}
 /*!------------------------------------------------------------------
 [Multi-columns-row]
 */
@@ -1890,3 +1891,50 @@ textarea {
 	.multi-columns-row .col-lg-1:nth-child(12n + 13){ clear:left; }
 
 }
+
+/* for card animations */
+
+.card_display {
+  float: left;
+  margin: 10px;
+  -webkit-perspective: 600px;
+}
+
+.front, .back {
+  background: #FFF;
+  border-radius: 10px;
+  transition: -webkit-transform 1s;
+  -webkit-transform-style: preserve-3d;
+  -webkit-backface-visibility: hidden;
+  border: 1px solid #f5f5f5;
+}
+
+.front {
+  overflow: hidden;
+  width: 300px;
+  height: 300px;
+  position: absolute;
+  z-index: 1;
+  cursor: pointer;
+}
+
+.back {
+  padding: 20px;
+  width: 300px;
+  height: 300px;
+  -webkit-transform: rotateY(-180deg);
+  overflow: hidden;
+}
+
+.card_display:hover .back {
+  -webkit-transform: rotateY(0);
+}
+
+.card_display:hover .front {
+  -webkit-transform: rotateY(180deg);
+}
+
+.card-image {
+  width: 100%;
+  height: 80%;
+}
diff --git a/Home/static/home/assets/js/scrollup.js b/Home/static/home/assets/js/scrollup.js
@@ -0,0 +1,17 @@
+$(document).ready(function() {
+  $(window).scroll(function(){
+    var position = $(window).scrollTop();
+    console.log("position is " + position);
+    if(position > 70 ) {
+      $('#go_to_top').show();
+    } else {
+      $('#go_to_top').hide();
+    }
+  });
+
+  $("#go_to_top").click(function(event){
+    event.preventDefault();
+    $("html, body").animate({scrollTop: 0}, "slow");
+    return false;
+  });
+});
diff --git a/Home/templates/base/base.html b/Home/templates/base/base.html
@@ -76,6 +76,7 @@
 <!-- JAVASCRIPT FILES -->
 <script src="{% static 'home/assets/js/jquery-2.1.4.min.js' %}"></script>
 <script src="{% static 'home/assets/bootstrap/js/bootstrap.min.js' %}"></script>
+<script src="{% static 'home/assets/js/scrollup.js' %}"></script>
 <script src="{% static 'home/assets/js/jquery.superslides.min.js' %}"></script>
 <script src="{% static 'home/assets/js/jquery.mb.YTPlayer.min.js' %}"></script>
 <script src="{% static 'home/assets/js/imagesloaded.pkgd.js' %}"></script>

diff --git a/Home/templates/base/footer.html b/Home/templates/base/footer.html
@@ -14,7 +14,7 @@
     </div>
 
     <!-- SCROLLTOP -->
-    <a class="to-top-link" href="#top">
+    <a id="go_to_top">
       <i class="fa fa-angle-up"></i>
     </a>
 

diff --git a/Home/templates/base/side-nav.html b/Home/templates/base/side-nav.html
@@ -30,7 +30,9 @@
                     <ul class="dropdown-menu" role="menu">
                         <li><a href="/BlogFeedAggregator">blog posts</a></li>
                         <li><a href="{% url 'timeline_list' %}">Timeline</a></li>
-                        <li><a href="{% url 'club' %}">Club</a></li>
+                        {% if request.user.is_authenticated %}
+                          <li><a href="{% url 'club' %}">Club</a></li>
+                        {% endif %}
                         <li><a href="{% url 'team' %}">Teams</a></li>
                         <li><a href="{% url 'profile_list' %}">Members</a></li>
                         <li><a href="{% url 'achievements' %}">achievements</a></li>
@@ -63,7 +65,7 @@
     </nav>
 
     <!-- SOCIAL LINKS -->
-    <div class="copyright" style="position: fixed">
+    <div class="copyright" style="position: absolute">
         <div class="social-icons m-b-20">
             <a href="https://www.facebook.com/amfoss.in/?ref=br_rs" target="_blank" class="fa fa-facebook facebook"></a>
             <a href="https://twitter.com/amritafoss" target="_blank" class="fa fa-twitter twitter"></a>

diff --git a/clubManagement/templates/clubManagement/team_list.html b/clubManagement/templates/clubManagement/team_list.html
@@ -19,24 +19,28 @@ <h1 class="hero-title font-alt">Teams</h1>
 
     <!-- BLOG -->
     <br><br>
-
     <div class="container"  >
 
                 <div class="row">
                     {% for object in object_list %}
                         <div class="col-md-4">
                             <br>
-                            <div class="card-group" style="width:60%" >
-                                <img class="card-img-top img-fluid" height="auto" width="auto"
+                            <div class="card_display">
+                              <div class="front">
+                                <img class="card-image img-fluid"
                                      src="/static/clubManagement/image/{{ object.image }}"
                                      alt="Card image cap">
-                                <div class="card-block">
+                                     <center><h3 style="padding: 4px;">{{ object.name }}</h3><center>
+                              </div>
+                              <div class="back">
+                                <div class="card-block" style="padding: 2%;">
                                     <h3 class="card-title">{{ object.name }}</h3>
                                     <p class="card-body text-truncate">{{ object.description | truncatechars:99}}</p>
                                     <a href="{% url 'team_detail' object.id %}"
                                        class="btn btn-dark anim-scroll">More info
                                     </a>
                                 </div>
+                              </div>
                             </div>
                         </div>
                     {% endfor %}
@@ -45,9 +49,9 @@ <h3 class="card-title">{{ object.name }}</h3>
                         <div class="col-md-12">
                             <div class="container">
                                 <br><br>
-                                <a href="{% url 'team_create' %}">
+                              <center><a href="{% url 'team_create' %}">
                                     <button class="btn btn-dark anim-scroll">Add new</button>
-                                </a>
+                                </a></center>
                             </div>
                         </div>
                     {% endif %}