diff --git a/css/twitter-post-fetcher.css b/css/twitter-post-fetcher.css index a20668a..58c4e8e 100644 --- a/css/twitter-post-fetcher.css +++ b/css/twitter-post-fetcher.css @@ -1,112 +1,402 @@ /* -* Example style! -* You can do whatever the hell you want on your site :-) + Twitter Post CSS + author: Amit Singh (amitsin6h) */ -@import url('https://fonts.googleapis.com/css?family=Open+Sans'); +.timeline-sec { +float: left; +width: 100%; +} +.timeline-sec > ul { +float: left; +list-style: none outside none; +margin: 0; +padding: 0; +position: relative; +width: 100%; +} -h2 { - clear:both; +.timeline-sec > ul:before { +background: none repeat scroll 0 0 #7A97BE; +content: ""; +height: 100%; +left: 22px; +position: absolute; +top: 0; +width: 2px; } -p, .tdate { - font-size:17px; - font-family: 'Open Sans', sans-serif; - margin:10px 0 0 0; - color:#3d3d3d; + +.timeline-sec > ul > li { +float: left; +list-style: none outside none; +margin-bottom: 30px; +position: relative; +width: 100%; } -a, .tdate:visited { - color:#427fed; +.timeline { +float: left; +padding-left: 70px; +position: relative; +width: 100%; } -.tdate:hover { - color:#82afff; +.user-timeline { +left: 0; +position: absolute; +top: 0; +width: 70px; } -.tborder > li { - list-style:none; - overflow:hidden; - border:1px solid #dedede; - margin:5px; - padding:5px; +.user-timeline > span { +float: left; +position: relative; +width: 100%; } -.tborder > li:hover { - background-color:#f0f3fb; +.user-timeline > span > img { +border: 3px solid #7A97BE; +-webkit-border-radius: 50%; +-moz-border-radius: 50%; +-ms-border-radius: 50%; +-o-border-radius: 50%; +border-radius: 50%; +float: left; +height: 50px; +overflow: hidden; +width: 50px; } -.user, .tweet, .timePosted { - float:left; +.timeline-detail { +background: none repeat scroll 0 0 #fff; +float: left; +position: relative; +width: 100%; +box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); } -.user { - width:25%; +.timeline-detail:before { +border-bottom: 8px solid transparent; +border-right: 8px solid #51B0CF; +border-top: 8px solid transparent; +content: ""; +left: -7px; +position: absolute; +top: 12px; +} +.timeline-head { +background: none repeat scroll 0 0 #51B0CF; +float: left; +width: 100%; } -.tweet { - width:50%; +.timeline-head > h3 { +color: #fff; +float: left; +font-family: Roboto; +font-size: 18px; +font-weight: bold; +letter-spacing: 0.3px; +line-height: 22px; +margin: 0; +padding: 9px 0 9px 20px; } -.timePosted { - width:15%; +.timeline-head > h3 > span { +color: #ececec; +font-size: 12px; +letter-spacing: 0.3px; +margin-left: 20px; +margin-right: 12px; +} +.timeline-head > h3 > i { +font-family: Lato; +font-size: 11px; +font-style: normal; +letter-spacing: 0.3px; +padding: 2px 6px; +} +.date{ + float: right; + padding-top: 15px; + padding-right: 20px; + font-weight: bold; + color: #fff; } -.user { - clear:left; +.timeline-content { +float: left; +padding: 15px 20px; +width: 100%; +} +.btn { + background: none; + color: #5BC0DE; + -webkit-transition: all .3s ease; + -moz-transition: all .3s ease; + transition: all .3s ease; + min-width: 155px; +} +.btn:hover { + background: none; + color: #fff; + border-color: #7A97BE; + background-color: #7A97BE; } -.user a { - width: 100px; +.post-reply > textarea { +background: none repeat scroll 0 0 rgba(0, 0, 0, 0); +border: medium none; +-webkit-border-radius: 0; +-moz-border-radius: 0; +-ms-border-radius: 0; +-o-border-radius: 0; +border-radius: 0; +-webkit-box-shadow: none; +-moz-box-shadow: none; +-ms-box-shadow: none; +-o-box-shadow: none; +box-shadow: none; +color: #888888; +float: left; +font-family: Roboto; +font-size: 13px; +height: 36px; +letter-spacing: 0.3px; +padding: 7px 45px 7px 19px; +resize: vertical; +-webkit-transition: all 0.4s ease 0s; +-moz-transition: all 0.4s ease 0s; +-ms-transition: all 0.4s ease 0s; +-o-transition: all 0.4s ease 0s; +transition: all 0.4s ease 0s; +width: 100%; } -.user span span { - width:100px; - display:block; - margin-top:10px; +.progress.w-tooltip > .progress-bar { +-webkit-border-radius: 0; +-moz-border-radius: 0; +-ms-border-radius: 0; +-o-border-radius: 0; +border-radius: 0; +-webkit-box-shadow: none; +-moz-box-shadow: none; +-ms-box-shadow: none; +-o-box-shadow: none; +box-shadow: none; +position: relative; +} +.purple, .menu ul li:hover > a, .support-ticket .new, .toggle-switch span:before, .actionBar > a.buttonFinish, .error-sec ul > li:before { +background: -moz-linear-gradient(top, #8a7aff 0%, #715eff 100%); +background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#715eff), color-stop(100%,#f9f9f9)); +background: -webkit-linear-gradient(top, #8a7aff 0%,#715eff 100%); +background: -o-linear-gradient(top, #8a7aff 0%,#715eff 100%); +background: -ms-linear-gradient(top, #8a7aff 0%,#715eff 100%); +background: linear-gradient(to bottom, #8a7aff 0%,#715eff 100%); +color: #fff; +} +.progress-bar { +float: left; +width: 0; +height: 100%; +font-size: 12px; +line-height: 20px; +color: #fff; +text-align: center; +background-color: #337ab7; +box-shadow: none; +-webkit-transition: width .6s ease; +-o-transition: width .6s ease; +transition: width .6s ease; } -.user img, .user a > span { - float:left; +.timeline-gallery { +float: left; +margin-top: 15px; +width: 100%; +} +.timeline-gallery > ul { +float: left; +list-style: none outside none; +margin: -10px 0 0; +padding: 0; +width: 100%; +} +.timeline-gallery > ul > li { +float: left; +margin-right: 10px; +margin-top: 10px; } -.interact { - float:left; - width:10%; - margin-top:-7px; +.timeline-gallery > ul > li > a { +-webkit-border-radius: 50%; +-moz-border-radius: 50%; +-ms-border-radius: 50%; +-o-border-radius: 50%; +border-radius: 50%; +float: left; +overflow: hidden; +position: relative; +width: 100%; } -.interact a { - margin-left:5px; - float:left; +.timeline-gallery > ul > li > a:before { +background: none repeat scroll 0 0 rgba(255, 255, 255, 0.8); +-webkit-border-radius: 50%; +-moz-border-radius: 50%; +-ms-border-radius: 50%; +-o-border-radius: 50%; +border-radius: 50%; +content: ""; +height: 90%; +left: 5%; +opacity: 0; +position: absolute; +top: 5%; +-webkit-transform: scale(0.5); +-moz-transform: scale(0.5); +-ms-transform: scale(0.5); +-o-transform: scale(0.5); +transform: scale(0.5); +-webkit-transition: all 0.4s ease 0s; +-moz-transition: all 0.4s ease 0s; +-ms-transition: all 0.4s ease 0s; +-o-transition: all 0.4s ease 0s; +transition: all 0.4s ease 0s; +width: 90%; } -.user a > span { - margin-left:10px; +.timeline-gallery > ul > li > a i { +color: #fff; +left: 0; +margin-top: -5px; +opacity: 0; +position: absolute; +text-align: center; +top: 50%; +-webkit-transform: scale(2); +-moz-transform: scale(2); +-ms-transform: scale(2); +-o-transform: scale(2); +transform: scale(2); +-webkit-transition: all 0.4s ease 0s; +-moz-transition: all 0.4s ease 0s; +-ms-transition: all 0.4s ease 0s; +-o-transition: all 0.4s ease 0s; +transition: all 0.4s ease 0s; +width: 100%; +z-index: 9; } -.tmedia{ - width: 25%; - margin: auto; +.timeline-gallery > ul > li > a > img { +-webkit-border-radius: 50%; +-moz-border-radius: 50%; +-ms-border-radius: 50%; +-o-border-radius: 50%; +border-radius: 50%; +float: left; +width: 70px; +height:70px; +} +.post-reply { +background: none repeat scroll 0 0 #ffffff; +float: left; +margin-top: 11px; +position: relative; +width: 100%; +} +.timeline-content > .btn-group { +float: left; +margin-top: 15px; +width: 100%; +} +.green, .support-ticket .done, .edit-remove > li > .edit, .toggle-switch *:checked + span:before, .friend-list li > span.online:before { +background: -moz-linear-gradient(top, #0fce33 0%, #07bf29 100%); +background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#07bf29), color-stop(100%,#f9f9f9)); +background: -webkit-linear-gradient(top, #0fce33 0%,#07bf29 100%); +background: -o-linear-gradient(top, #0fce33 0%,#07bf29 100%); +background: -ms-linear-gradient(top, #0fce33 0%,#07bf29 100%); +background: linear-gradient(to bottom, #0fce33 0%,#07bf29 100%); +color: #fff; +} +.timeline-content > .btn-group > label { +-webkit-border-radius: 0 !important; +-moz-border-radius: 0 !important; +-ms-border-radius: 0 !important; +-o-border-radius: 0 !important; +border-radius: 0 !important; +-webkit-box-shadow: none; +-moz-box-shadow: none; +-ms-box-shadow: none; +-o-box-shadow: none; +box-shadow: none; +font-family: Roboto; +font-size: 11px; +letter-spacing: 0.3px; +padding: 2px 8px; +} +.post-reply > i { +color: #999999; +font-size: 14px; +margin-top: -7px; +position: absolute; +right: 13px; +top: 50%; } -.tmedia img { - max-width:270px; - max-height:270px; +.timeline-gallery > ul > li > a:hover:before { +opacity: 1; +-webkit-transform: scale(1); +-moz-transform: scale(1); +-ms-transform: scale(1); +-o-transform: scale(1); +transform: scale(1); } +.timeline-gallery > ul > li > a:before { +background: none repeat scroll 0 0 rgba(255, 255, 255, 0.8); +-webkit-border-radius: 50%; +-moz-border-radius: 50%; +-ms-border-radius: 50%; +-o-border-radius: 50%; +border-radius: 50%; +content: ""; +height: 90%; +left: 5%; +opacity: 0; +position: absolute; +top: 5%; +-webkit-transform: scale(0.5); +-moz-transform: scale(0.5); +-ms-transform: scale(0.5); +-o-transform: scale(0.5); +transform: scale(0.5); +-webkit-transition: all 0.4s ease 0s; +-moz-transition: all 0.4s ease 0s; +-ms-transition: all 0.4s ease 0s; +-o-transition: all 0.4s ease 0s; +transition: all 0.4s ease 0s; +width: 90%; +} + + -#linkage { - position:fixed; - top:0px; - right:0px; - background-color:#3d3d3d; - color:#ffffff; - text-decoration:none; - padding:5px; - width:10%; - font-family:arial; + +/*css media queries*/ + +@media (max-width: 768px) { + .btn-responsive { + padding:2px 4px; + font-size:80%; + line-height: 1; + border-radius:3px; + } } -.tco-hidden{ - display: none; -} \ No newline at end of file +@media (min-width: 769px) and (max-width: 992px) { + .btn-responsive { + padding:4px 9px; + font-size:90%; + line-height: 1.2; + } +} diff --git a/index.html b/index.html index 916139b..fed87a4 100644 --- a/index.html +++ b/index.html @@ -2604,90 +2604,6 @@

Latest Tweets

- diff --git a/js/vendor/twitter-post-fetcher.js b/js/vendor/twitter-post-fetcher.js index d0dd390..ee14238 100644 --- a/js/vendor/twitter-post-fetcher.js +++ b/js/vendor/twitter-post-fetcher.js @@ -8,6 +8,14 @@ * Github: https://github.com/jasonmayes/Twitter-Post-Fetcher * Updates will be posted to this site. *********************************************************************/ + +/* + **Twitter Post Fetcher** + Modified by: Amit Singh(amitsin6h) +*/ + + + (function(root, factory) { if (typeof define === 'function' && define.amd) { // AMD. Register as an anonymous module. @@ -48,12 +56,15 @@ var x = tweets.length; var n = 0; var element = document.getElementById(domNode); - var html = ''; element.innerHTML = html; } else { customCallbackFunction(tweets); @@ -345,19 +356,18 @@ } } if (printUser) { - op += '
' + strip(authors[n].innerHTML) + - '
'; - } - op += '

' + strip(tweets[n].innerHTML) + '

'; - if (printTime) { - if (permalinks) { - op += '

' + times[n].getAttribute('aria-label') + '

'; - } else { - op += '

' + - times[n].getAttribute('aria-label') + '

'; - } + op += '
' + strip(authors[n].getElementsByTagName("span")[0].innerHTML) + + '
'+ + '
'+ + '
'+ + '

'+ strip(authors[n].getElementsByTagName("span")[1].innerHTML)+ + '
'+ + ''+strip(authors[n].getElementsByTagName("span")[2].innerHTML)+'

'+ + ''+ times[n].textContent+''+ + '
'; } + op += '
'+ + '

' + strip(tweets[n].innerHTML) + '

'; } else { if (tweets[n].textContent) { if (printUser) { @@ -365,7 +375,7 @@ } op += '

' + tweets[n].textContent + '

'; if (printTime) { - op += '

' + times[n].textContent + '

'; + op += '

' + times[n].textContent + '

'; } } else { @@ -374,26 +384,38 @@ } op += '

' + tweets[n].textContent + '

'; if (printTime) { - op += '

' + times[n].textContent + '

'; + op += '

' + times[n].textContent + '

'; } } } + if (showImages && images[n] !== undefined && extractImageUrl(images[n]) !== undefined) { + op += '
' + + '

Image from tweet

' + '
'; + } if (showInteractionLinks) { - op += '

'+ + '

'+ + '
'+ + '' : '>') + - 'Reply Reply'+ + + '' : '>') + 'Retweet' + - '' : '>') + ' Retweet' + + + '' : '>') + 'Favorite

'; - } - if (showImages && images[n] !== undefined && extractImageUrl(images[n]) !== undefined) { - op += '
' + - 'Image from tweet' + '
'; + (targetBlank ? ' target="_blank">' : '>') + ' Favorite'+ + + '
'+ + '
'+ + '
'+ + '
'+ + ''; } if (showImages) { arrayTweets.push(op); diff --git a/templates/sections/_tweets.html b/templates/sections/_tweets.html index 1f26909..1ed3ed0 100644 --- a/templates/sections/_tweets.html +++ b/templates/sections/_tweets.html @@ -19,90 +19,6 @@

Latest Tweets

-