Merge pull request #176 from wonknu/tweet_home_page

Tweet home page
abecms · Mar 23, 2017 · 05496f6 · 05496f6
2 parents 265c655 + eaf41ae
commit 05496f6
Show file tree

Hide file tree

Showing 4 changed files with 205 additions and 19 deletions.
diff --git a/src/server/public/abecms/libs/slider-home.js b/src/server/public/abecms/libs/slider-home.js
@@ -0,0 +1,35 @@
+var tweets = twitterFetcher.fetch({
+  // "profile": {"screenName": 'rihanna'},
+  "profile": {"screenName": 'abe_cms'},
+  "domId": 'tweets-slider',
+  "maxTweets": 10,
+  "enableLinks": true, 
+  "showUser": true,
+  "showTime": true,
+  "showImages": false,
+  "lang": 'en',
+  "showRetweet": false,
+  "customCallback": function (tweets) {
+  	var x = tweets.length;
+    var n = 0;
+    var element = document.getElementById('tweets-slider');
+    var html = '<div class="swiper-wrapper">';
+    while(n < x) {
+      html += '<div class="swiper-slide">' +
+			      		tweets[n]
+			      			.replace(/>Posted on /, '>')
+			      			.replace(/<p class=\"interact\">(.*)/, '') +
+			      	'</div>';
+      n++;
+    }
+    html += '</div><div class="swiper-pagination"></div>';
+    element.innerHTML = html;
+
+		var swiper = new Swiper('.swiper-container', {
+		  pagination: '.swiper-pagination',
+		  slidesPerView: 3,
+		  paginationClickable: true,
+		  spaceBetween: 30
+		});
+  }
+})
diff --git a/src/server/public/abecms/libs/twitter-fetcher.min.js b/src/server/public/abecms/libs/twitter-fetcher.min.js
diff --git a/src/server/views/partials/home.html b/src/server/views/partials/home.html
@@ -1,26 +1,106 @@
 <style>
-/* Carousel base class */
-.carousel {
-  height: 500px;
-  margin-bottom: 60px;
+
+[data-scribe="element:name"],
+[data-scribe="element:user_link"],
+[data-scribe="element:screen_name"]{
+  display: block;
+}
+
+[data-scribe="element:verified_badge"]{
+  display: none;
+}
+
+[data-scribe="component:author"],
+.timePosted,
+.tweet{
+  text-align: center;
+}
+
+[data-scribe="element:avatar"]{
+  display: inline-block;
+  margin-bottom: 5px;
+}
+
+[data-scribe="element:name"]:active,
+[data-scribe="element:name"]:visited,
+[data-scribe="element:name"]:hover,
+[data-scribe="element:name"]{
+  color: #6a757a;
+  text-decoration: none;
+  font-weight: bolder;
+  font-size: 15px;
 }
-/* Since positioning the image, we need to help out the caption */
-.carousel-caption {
-  z-index: 10;
+
+[data-scribe="element:screen_name"]:active,
+[data-scribe="element:screen_name"]:visited,
+[data-scribe="element:screen_name"]:hover,
+[data-scribe="element:screen_name"]{
+  color: #b0adaf;
+  text-decoration: none;
+  font-size: 12px;
+  padding: 5px 0 15px 0;
 }
 
-/* Declare heights because of positioning of img element */
-.carousel .item {
-  height: 500px;
-  background-color: #777;
+.timePosted{
+  margin-bottom: 35px;
 }
-.carousel-inner > .item > img {
-  position: absolute;
-  top: 0;
-  left: 0;
-  min-width: 100%;
-  height: 500px;
+
+.timePosted a:active,
+.timePosted a:visited,
+.timePosted a:hover,
+.timePosted a{
+  color: #acb4bf;
+  text-decoration: none;
+  font-size: 10px;
 }
+
+.tweet{
+  color: #868688;
+  font-size: 14px;
+  padding: 0 50px;
+  margin: 0;
+  word-break: break-word;
+}
+
+.tweet a:active,
+.tweet a:visited,
+.tweet a:hover,
+.tweet a{
+  text-decoration: none;
+  color: #2dadeb;
+}
+
+.swiper-container-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet {
+  margin: 0 8px;
+}
+
+.swiper-pagination-bullet {
+  width: 12px;
+  height: 12px;
+}
+
+.swiper-pagination-bullet {
+  background: #d7d7d7;
+  opacity: 1;
+}
+.swiper-pagination-bullet-active {
+  background: #7f9791;
+}
+
+.tweet-title{
+  text-align: center;
+  font-size: 34px;
+  color: #435980;
+  font-weight: 200;
+}
+
+.tweet-subtitle{
+  text-align: center;
+  font-size: 20px;
+  color: #a0a3ab;
+  margin-bottom: 20px;
+}
+
 </style>
 <div class="no-gutter manager-wrapper {{#if form}}{{else}}visible{{/if}}">
 
@@ -53,6 +133,19 @@ <h1><span class="fa fa-bullhorn"></span>  Welcome to AbeCMS <a class="btn btn-lg
         </p>
         <p></p>
       </div>
+
+      <div class="tweet-title">
+        Title tweet abe
+      </div>
+
+      <div class="tweet-subtitle">
+        Subtitle tweet abe
+      </div>
+
+      <div id="tweets-slider" class="swiper-container">
+
+      </div>
+
     </div>
   </div>
 </div><!-- *************** /end right admin manager *************** -->

diff --git a/src/server/views/template-home.html b/src/server/views/template-home.html
@@ -8,7 +8,7 @@
     <link rel="stylesheet" href="/abecms/css/bootstrap.min.css">
     <link rel="stylesheet" href="/abecms/css/styles.css">
     <link rel="stylesheet" href="/abecms/css/wysiwyg-editor.min.css">
-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.5.9/slick.min.css">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.4.2/css/swiper.min.css">
   </head>
     <script type="text/javascript" src="/abecms/libs/jquery-2.1.0.min.js"></script>
     <script src="https://use.fontawesome.com/6e9b081f7f.js"></script>
@@ -27,8 +27,10 @@
     <script type="text/javascript" src="/abecms/libs/dataTables.bootstrap.min.js"></script>
     <script type="text/javascript" src="/abecms/libs/standalone.min.js"></script>
     <script type="text/javascript" src="/abecms/libs/moment-with-locales.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.4.2/js/swiper.js"></script>
+    <script type="text/javascript" src="/abecms/libs/twitter-fetcher.min.js"></script>
+    <script type="text/javascript" src="/abecms/libs/slider-home.js"></script>
     <script type="text/javascript" src="/abecms/scripts/template-engine-compiled.js"></script>
     <script type="text/javascript" src="/abecms/scripts/admin-compiled.js"></script>
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.5.9/slick.min.js"></script>
   </body>
 </html>