From e1e98d0229b8b79de2105515f0312903a23dc335 Mon Sep 17 00:00:00 2001 From: luca-marie Date: Wed, 24 Aug 2016 15:23:07 +0200 Subject: Update with Twitter --- app/assets/stylesheets/application.scss | 1 + app/assets/stylesheets/twitter.scss | 76 +++++++++++++++++++++++++++++++++ 2 files changed, 77 insertions(+) create mode 100644 app/assets/stylesheets/twitter.scss (limited to 'app/assets/stylesheets') diff --git a/app/assets/stylesheets/application.scss b/app/assets/stylesheets/application.scss index 856a559..f42044b 100644 --- a/app/assets/stylesheets/application.scss +++ b/app/assets/stylesheets/application.scss @@ -16,6 +16,7 @@ // LEAP web app specific overrides // @import "leap"; +@import "twitter"; // And finally bootswatch style itself // @import "bootswatch/cerulean/bootswatch"; diff --git a/app/assets/stylesheets/twitter.scss b/app/assets/stylesheets/twitter.scss new file mode 100644 index 0000000..1d54785 --- /dev/null +++ b/app/assets/stylesheets/twitter.scss @@ -0,0 +1,76 @@ +.twitter { + // position: fixed; + // top: 0; + // right: 10px; + // bottom: 0; + // overflow: auto; + // width: 250px; +} +.twitter_header { + padding-top: 8px; + height: 30px; + font-size: 20px ; + text-align: center; +} + +.tweets:hover { + background-color: #ccf2ff; + } + +.tweets { + border-bottom-style: solid; + border-color: #bfbfbf; + // display: inline; + // height: 32px; + // width: 100%; + // position: absolute; + // text-align: center; +} + +.tweets_pic { + display: block; + float: left; + width: 28px; + height: 33px; + padding-left: 8px; + padding-top: 8px; + // background: hsl(0, 0%, 30%); +} + +.tweets_name { + padding-left: 45px; + padding-top: 16px; + // border-bottom-style: solid; + // border-color: #00bfff; +} + +.tweet_text { + padding-left: 8px; + padding-top: 15px; +} + +.text_date { + text-align: right; + padding-top: 4px; + font-size: 12px ; +} +.twitter_footer { + padding-top: 8px; +} + +.twitter-image-frame { + width: 40px; + height: 40px; + overflow: hidden; + position: relative; +} + +.twitter-image-frame > img { + display: block; + position: absolute; + top: 0; + bottom: 0; + left: 0; + width: 100%; + margin: auto; +} -- cgit v1.2.3 From fecc0e9e1985be2d3767664453d4776ac20897c0 Mon Sep 17 00:00:00 2001 From: luca-marie Date: Thu, 25 Aug 2016 20:50:12 +0200 Subject: Twitter controller now as helper, some more styling in CSS, bug fix --- app/assets/stylesheets/twitter.scss | 21 +++++++++++++-------- 1 file changed, 13 insertions(+), 8 deletions(-) (limited to 'app/assets/stylesheets') diff --git a/app/assets/stylesheets/twitter.scss b/app/assets/stylesheets/twitter.scss index 1d54785..6b74cf7 100644 --- a/app/assets/stylesheets/twitter.scss +++ b/app/assets/stylesheets/twitter.scss @@ -1,5 +1,5 @@ .twitter { - // position: fixed; + position: relative; // top: 0; // right: 10px; // bottom: 0; @@ -11,13 +11,18 @@ height: 30px; font-size: 20px ; text-align: center; + margin-bottom: 20px; +} + +.twitter_list { + position: relative; } -.tweets:hover { +.tweet:hover { background-color: #ccf2ff; } -.tweets { +.tweet { border-bottom-style: solid; border-color: #bfbfbf; // display: inline; @@ -27,7 +32,7 @@ // text-align: center; } -.tweets_pic { +.tweet_pic { display: block; float: left; width: 28px; @@ -37,7 +42,7 @@ // background: hsl(0, 0%, 30%); } -.tweets_name { +.tweet_name { padding-left: 45px; padding-top: 16px; // border-bottom-style: solid; @@ -49,7 +54,7 @@ padding-top: 15px; } -.text_date { +.tweet_text_date { text-align: right; padding-top: 4px; font-size: 12px ; @@ -58,14 +63,14 @@ padding-top: 8px; } -.twitter-image-frame { +.twitter_image_frame { width: 40px; height: 40px; overflow: hidden; position: relative; } -.twitter-image-frame > img { +.twitter_image_frame > img { display: block; position: absolute; top: 0; -- cgit v1.2.3 From ea3fc6ffbb8f90aff28ce56fe4432a8d3ff18caa Mon Sep 17 00:00:00 2001 From: luca-marie Date: Mon, 29 Aug 2016 17:39:46 +0200 Subject: Changes mainly on CSS 'fine tuning' and shortening the Twitter API credentials, - only bearer token is needed to access Twitter API --- app/assets/stylesheets/twitter.scss | 55 +++++++++++++++++-------------------- 1 file changed, 25 insertions(+), 30 deletions(-) (limited to 'app/assets/stylesheets') diff --git a/app/assets/stylesheets/twitter.scss b/app/assets/stylesheets/twitter.scss index 6b74cf7..b0ce982 100644 --- a/app/assets/stylesheets/twitter.scss +++ b/app/assets/stylesheets/twitter.scss @@ -1,21 +1,15 @@ .twitter { position: relative; - // top: 0; - // right: 10px; - // bottom: 0; - // overflow: auto; - // width: 250px; } + .twitter_header { - padding-top: 8px; - height: 30px; - font-size: 20px ; - text-align: center; - margin-bottom: 20px; + font-size: 20px; + text-align: left; + margin-bottom: 30px; } .twitter_list { - position: relative; + box-sizing: border-box; } .tweet:hover { @@ -25,33 +19,35 @@ .tweet { border-bottom-style: solid; border-color: #bfbfbf; - // display: inline; - // height: 32px; - // width: 100%; - // position: absolute; - // text-align: center; + padding: 10px 8px; +} + +.tweet_title { + position: relative; + height: 40px; + margin-bottom: 10px; } .tweet_pic { display: block; - float: left; - width: 28px; - height: 33px; - padding-left: 8px; - padding-top: 8px; - // background: hsl(0, 0%, 30%); -} + width: 40px; + height: 40px; + overflow: hidden; + position: absolute; + left: 0; + top: 0; + } .tweet_name { - padding-left: 45px; - padding-top: 16px; - // border-bottom-style: solid; - // border-color: #00bfff; + padding-left: 50px; + line-height: 40px; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; } .tweet_text { - padding-left: 8px; - padding-top: 15px; +box-sizing: border-box; } .tweet_text_date { @@ -67,7 +63,6 @@ width: 40px; height: 40px; overflow: hidden; - position: relative; } .twitter_image_frame > img { -- cgit v1.2.3 From 92e7b90d619111fdaaf50ab0b8538c39605fe005 Mon Sep 17 00:00:00 2001 From: luca-marie Date: Thu, 1 Sep 2016 12:17:05 +0200 Subject: Updating the view and CSS, no pic and twitter handle in each tweet; Displaying only 3 most tweets --- app/assets/stylesheets/twitter.scss | 74 ++++++++++++++++++------------------- 1 file changed, 36 insertions(+), 38 deletions(-) (limited to 'app/assets/stylesheets') diff --git a/app/assets/stylesheets/twitter.scss b/app/assets/stylesheets/twitter.scss index b0ce982..89cdecf 100644 --- a/app/assets/stylesheets/twitter.scss +++ b/app/assets/stylesheets/twitter.scss @@ -5,30 +5,14 @@ .twitter_header { font-size: 20px; text-align: left; - margin-bottom: 30px; + margin-bottom: 80px; } -.twitter_list { - box-sizing: border-box; -} - -.tweet:hover { - background-color: #ccf2ff; - } - -.tweet { - border-bottom-style: solid; - border-color: #bfbfbf; - padding: 10px 8px; -} - -.tweet_title { - position: relative; - height: 40px; - margin-bottom: 10px; +.twitter_id { + position: absolute; } -.tweet_pic { +.twitter_pic { display: block; width: 40px; height: 40px; @@ -38,12 +22,39 @@ top: 0; } -.tweet_name { - padding-left: 50px; +.twitter_image_frame { + width: 40px; + height: 40px; + overflow: hidden; + } + +.twitter_name { + padding-left: 65px; line-height: 40px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; + font-size: 20px; +} + +.twitter_image_frame > img { + display: block; + position: absolute; + top: 0; + bottom: 0; + left: 0; + width: 100%; + margin: auto; + } + +.twitter_list { + box-sizing: border-box; +} + +.tweet { + border-top-style: solid; + border-color: lightgrey; + padding: 10px 8px; } .tweet_text { @@ -55,22 +66,9 @@ box-sizing: border-box; padding-top: 4px; font-size: 12px ; } + .twitter_footer { + border-top-style: solid; + border-color: lightgrey; padding-top: 8px; } - -.twitter_image_frame { - width: 40px; - height: 40px; - overflow: hidden; -} - -.twitter_image_frame > img { - display: block; - position: absolute; - top: 0; - bottom: 0; - left: 0; - width: 100%; - margin: auto; -} -- cgit v1.2.3 From 3408ac694a60df0380a3bf444077165a1f30e87e Mon Sep 17 00:00:00 2001 From: luca-marie Date: Fri, 9 Sep 2016 13:19:51 +0200 Subject: Added changes in css, view and main view file, as well as default avatar is now set as twitter official logo (added 2 official twitter logo images; changed footer text. --- app/assets/stylesheets/twitter.scss | 32 ++++++++++++++++++-------------- 1 file changed, 18 insertions(+), 14 deletions(-) (limited to 'app/assets/stylesheets') diff --git a/app/assets/stylesheets/twitter.scss b/app/assets/stylesheets/twitter.scss index 89cdecf..b2481db 100644 --- a/app/assets/stylesheets/twitter.scss +++ b/app/assets/stylesheets/twitter.scss @@ -3,9 +3,10 @@ } .twitter_header { - font-size: 20px; + font-size: 16px; text-align: left; - margin-bottom: 80px; + margin-bottom: 55px; + padding: 10px 8px; } .twitter_id { @@ -25,28 +26,29 @@ .twitter_image_frame { width: 40px; height: 40px; - overflow: hidden; + overflow: hidden } -.twitter_name { - padding-left: 65px; - line-height: 40px; - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; - font-size: 20px; -} - .twitter_image_frame > img { display: block; position: absolute; top: 0; bottom: 0; - left: 0; + left: 30; width: 100%; margin: auto; } +.twitter_name { + padding-left: 55px; + line-height: 20px; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + font-size: 16px; +} + +// Body = displays tweets .twitter_list { box-sizing: border-box; } @@ -70,5 +72,7 @@ box-sizing: border-box; .twitter_footer { border-top-style: solid; border-color: lightgrey; - padding-top: 8px; + padding: 10px 8px; + font-style: italic; + font-size: 12px; } -- cgit v1.2.3 From 2ef8707a7539622007b6d679a7708a5979594ff3 Mon Sep 17 00:00:00 2001 From: luca-marie Date: Tue, 13 Sep 2016 12:20:12 +0200 Subject: Cleaning CSS &view code, updating twitter helper with develop --- app/assets/stylesheets/twitter.scss | 8 +------- 1 file changed, 1 insertion(+), 7 deletions(-) (limited to 'app/assets/stylesheets') diff --git a/app/assets/stylesheets/twitter.scss b/app/assets/stylesheets/twitter.scss index b2481db..b2233d0 100644 --- a/app/assets/stylesheets/twitter.scss +++ b/app/assets/stylesheets/twitter.scss @@ -13,7 +13,7 @@ position: absolute; } -.twitter_pic { +.twitter_image_frame { display: block; width: 40px; height: 40px; @@ -23,12 +23,6 @@ top: 0; } -.twitter_image_frame { - width: 40px; - height: 40px; - overflow: hidden - } - .twitter_image_frame > img { display: block; position: absolute; -- cgit v1.2.3