enhancement: HP with twitter widget and scroll full layout

abecms · Apr 4, 2017 · ba02150 · ba02150
1 parent 78f655f
commit ba02150
Show file tree

Hide file tree

Showing 6 changed files with 18 additions and 220 deletions.
diff --git a/src/server/public/abecms/css/styles.css b/src/server/public/abecms/css/styles.css
diff --git a/src/server/public/abecms/libs/slider-home.js b/src/server/public/abecms/libs/slider-home.js
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/sass/modules/_homepage.scss b/src/server/sass/modules/_homepage.scss
@@ -37,123 +37,12 @@ body.with-menu{
         width: calc(100% - 200px);
       }
     }
+    .manager-right.large{
+      width: calc(100% - 210px)!important;
+    }
   }
 }
 
-[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;
-}
-
-[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;
-}
-
-.timePosted{
-  margin-bottom: 35px;
-}
-
-.timePosted{
-   a:active,
-   a:visited,
-   a:hover,
-   a{
-    color: #acb4bf;
-    text-decoration: none;
-    font-size: 10px;
-  }
-}
-
-#tweets-slider{
-  .user{
-    display: none;
-  }
-}
-
-.tweet{
-  color: #868688;
-  font-size: 14px;
-  padding: 0 50px;
-  margin: 0;
-  word-break: break-word;
-}
-
-.tweet {
-  a:active,
-  a:visited,
-  a:hover,
-  a{
-    text-decoration: none;
-    color: #2dadeb;
-  }
-}
-
-.swiper-container-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet {
-  margin: 0 8px;
-}
-
-#tweets-slider{
-  .swiper-pagination-bullet {
-    width: 12px;
-    height: 12px;
-    background: #FFF;
-    border: 1px solid #D8D8D8;
-    opacity: 1;
-  }
-  .swiper-pagination-bullet-active {
-    background: #D8D8D8;
-  }
-}
-
-.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;
-}
-
-
-
-
 @-webkit-keyframes load {
   0% {
     stroke-dashoffset: 0;
@@ -241,10 +130,9 @@ body.with-menu{
 // stream
 
 .stream{
-  display: inline-block;
+  display: block;
   position: relative;
-  max-height: 220px;
-  overflow: auto;
+  overflow: hidden;
   padding-right: 20px;
   width: auto;
   .remove{
@@ -258,7 +146,6 @@ body.with-menu{
   margin-bottom: 25px;
   transition: opacity 750ms ease-in-out;
   opacity: 1;
-  position: relative;
   &:before{
     border-radius: 50%;
     content: " ";
@@ -473,3 +360,9 @@ body.with-menu{
   display: inline-block;
   overflow: hidden;
 }
+
+.tweet-wrapper{
+  padding-top: 30px;
+  width: 75%;
+  margin-left: 10px;
+}
diff --git a/src/server/views/partials/home.html b/src/server/views/partials/home.html
@@ -6,7 +6,7 @@
   </div><!-- *************** /end left admin manager *************** -->
 
   <!-- *************** right admin manager *************** -->
-  <div class="manager-right">
+  <div class="manager-right large">
     <div class="container">
 
       <div class="row statistics">
@@ -54,6 +54,11 @@
               <span>{{statistics.connectedUsers}}/{{statistics.totalUsers}}</span> connected / users
             </div>
           </div>
+          <div class="tweet-wrapper">
+            <a class="twitter-timeline" href="https://twitter.com/abe_cms">Tweets by abe_cms</a>
+            <script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script>
+          </div>
+
         </div>
         <div class="col-xs-6">
           <div class="text-uppercase">
@@ -66,15 +71,6 @@
 
         </div>
       </div>
-
-      <div class="tweet-subtitle">
-        Last News from @abe_cms team
-      </div>
-
-      <div id="tweets-slider" class="swiper-container">
-
-      </div>
-
     </div>
   </div>
 </div>
diff --git a/src/server/views/template-home.html b/src/server/views/template-home.html
@@ -23,8 +23,6 @@
     <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/libs/moment-with-locales.js"></script>
     <script type="text/javascript" src="/abecms/libs/stream-home.js"></script>
     <script type="text/javascript" src="/abecms/scripts/template-engine-compiled.js"></script>