homepage feed styling

c2corg · Oct 18, 2016 · 8364a51 · 8364a51
1 parent 8c66b60
commit 8364a51
Show file tree

Hide file tree

Showing 3 changed files with 203 additions and 14 deletions.
diff --git a/c2corg_ui/static/js/auth/authservice.js b/c2corg_ui/static/js/auth/authservice.js
@@ -339,11 +339,9 @@ app.Authentication.prototype.needAuthorization = function(method, url) {
       url.indexOf('/users/register') !== -1) {
     return false;
   }
-  if (url.indexOf('/personal-feed') !== -1) {
-    return true;
-  }
   if (url.indexOf('/users/account') !== -1 ||
-      url.indexOf('/users/preferences') !== -1) {
+      url.indexOf('/users/preferences') !== -1 ||
+      url.indexOf('/personal-feed') !== -1) {
     return true;
   }
 

diff --git a/c2corg_ui/templates/index.html b/c2corg_ui/templates/index.html
@@ -37,14 +37,52 @@ <h1 class="welcome-title text-center" translate>The mountain sports community</h
 
     </div>
   </section>
-  <section ng-class="{'show': userCtrl.auth.isAuthenticated()}" class="site-intro">
-    <div class="intro-banner">
-      <h1 class="welcome-title text-center" translate>Activity feed</h1>
-    </div>
-  </section>
 
   <div class="feed">
-    <button class="btn orange-btn" id="add-my-outing" protected-url-btn url="${request.route_path('outings_add')}"><span class="glyphicon glyphicon-plus-sign"></span><span translate>add an outing</span></button>
-    <app-advanced-search document-type="outings" use-map="false"></app-advanced-search>
+    <div class="feed-title flex flexend-align" ng-show="!feedCtrl.busy">
+      <span class="icon-news"></span>
+      <h3 translate>Activity feed</h3>
+    </div>
+
+    <div app-feed location="home">
+      <h4 class="text-success text-center" translate ng-show="feedCtrl.busy">Loading feed, please wait...</h4>
+      <div class="feed-list" ng-show="feedCtrl.documents.length > 0"
+           infinite-scroll="feedCtrl.getDocumentsFromFeed()"
+           infinite-scroll-immediate-check="false"
+           infinite-scroll-disabled="feedCtrl.busy">
+
+        <article class="feed-list-item" protected-url-btn url="${request.route_path('outings_add')}">
+          <div class="timeline-bullet icon-outings"></div>
+          <div class="list-item vertical-align">
+            <button class="orange-btn btn">add an outing</button>
+          </div>
+        </article>
+
+        <article class="feed-list-item" ng-repeat="doc in feedCtrl.documents"
+                 ng-init="type = feedCtrl.documentType(doc.document.type);">
+
+          <div class="timeline-bullet icon-{{type}}s"></div>
+
+          <p class="action-line">
+            <span class="action" ng-cloak>
+              <b><a ng-href="todo">{{doc['user']['username']}}</a></b>
+              <span ng-bind-html="feedCtrl.createActionLine(doc)"></span>
+              <b translate>{{type}}</b>
+            </span>
+            <br>
+            <span class="action date">
+              <span class=" glyphicon glyphicon-time"></span>
+              <span am-time-ago="doc.time"></span>
+            </span>
+          </p>
+
+          <div class="list-item">
+            <app-card app-card-doc="doc['document']" class="{{type}}"></app-card>
+          </div>
+        </article>
+        <h4 class="text-success text-center" translate ng-show="feedCtrl.busy">Loading feed, please wait...</h4>
+      </div>
+
+    </div>
   </div>
 </div>
diff --git a/less/homepage.less b/less/homepage.less
@@ -1,3 +1,7 @@
+@margin-desktop: 24%;
+@margin-tablet: 11%;
+@feed-bg:  rgba(229, 229, 229, 0.3);
+
 .home-page {
 
   button {
@@ -14,9 +18,9 @@
 
   .site-intro {
     display: none;
+    background-color: @feed-bg;
     @media @phone {
       height: auto;
-
       .route-activities {
         display: none;
       }
@@ -26,6 +30,7 @@
       background-image:url(../img/home/slide1.jpg);
       background-size: cover;
       background-position-y: 50%;
+      margin-bottom: -45px;
     }
 
     .welcome-title {
@@ -96,13 +101,161 @@
       }
     }
   }
+  /*feed*/
+
   .feed {
+    padding-top: 10px;
     margin-top: 45px;
-    padding: 20px;
-    background-color: rgba(229, 229, 229, 0.3);
+    height: 100%;
+    background-color: @feed-bg;
     .list {
       padding: 0;
     }
+    @media @phone {
+      padding-left: 10px;
+      padding-right: 10px;
+
+      .feed-list-item {
+        width: 100%;
+      }
+    }
+
+    .feed-title {
+      color: lightslategrey;
+      padding-left: @margin-desktop - 1;
+      padding-top: 20px;
+      padding-bottom: 20px;
+      .icon-news {
+        font-size: 2em;
+        margin-right: 10px;
+      }
+    }
   }
+
+  .feed-list {
+    height: 100%;
+    margin-bottom: 200px;
+    position: relative;
+    transition: .3s;
+
+    /*timeline solid*/
+    &:before {
+      content: '';
+      position: absolute;
+      left: @margin-desktop;
+      height: 95%;
+      margin-top: 15px;
+      width: 4px;
+      background-color: #dfdfdf;
+    }
+  }
+  .feed-list-item {
+    margin: 10px auto;
+    background-color: #fbfbfb;
+    border-radius: 10px;
+    width: 40%;
+    padding-top: 13px;
+    transition: .3s;
+
+    /*left triangle*/
+    &:before {
+      border-width: 8px 25px 9px 10px;
+      border-color: transparent #fbfbfb transparent transparent;
+      content: '';
+      position: relative;
+      left: -100%;
+      border-style: solid;
+      display: block;
+      margin-bottom: -30px;
+      transition: .3s;
+    }
+
+    .timeline-bullet {
+      background-color: #96a0ad;
+      position: absolute;
+      width: 40px;
+      height: 40px;
+      margin-top: 2px;
+      left: @margin-desktop;
+      transform: translateX(-45%);
+      border-radius: 50%;
+      border: 1px solid gainsboro;
+      padding-left: 7px;
+      padding-top: 5px;
+      transition: .3s;
+
+      /*bullet icon*/
+      &:before {
+        font-size: 1.8em;
+        color: white;
+      }
+
+      &.icon-routes {
+        padding-top: 7px;
+        padding-left: 6px;
+      }
+    }
+    .glyphicon-time {
+      color: #A9D361;
+    }
+    .action-line {
+      margin: -30px 0 0 0;
+      padding: 5px 10px;
+    }
+    .action {
+      color: slategray;
+      a {
+        color: slategray;
+      }
+    }
+    app-card {
+      &:not(.outing) {
+        a {
+          padding: 15px;
+        }
+      }
+      &.outing {
+        a {
+          .flex();
+        }
+        .list-item-info {
+          width: 70%;
+        }
+        .outing-author {
+          width: 30%;
+          margin: 10px auto;
+        }
+        .icon-user {
+          font-size: 2em;
+        }
+      }
+    }
+  }
+  .list-item {
+    margin-top: 0;
+  }
+
+  /*.home-page*/
+  @media @tablet {
+    margin-top: 80px;
+
+    .feed-list-item {
+      width: 55%;
+    }
+    .feed-list:before, .timeline-bullet, .feed-title {
+      left: @margin-tablet !important;
+    }
+  }
+  @media @phone {
+    .feed-list-item {
+      padding-top: 30px;
+    }
+    .timeline-bullet, .feed-list:before,   .feed-list-item:before,
+    .feed-title {
+      display: none;
+    }
+  }
+
+  /*end home-page*/
 }