diff options
| -rw-r--r-- | README.md | 33 | ||||
| -rw-r--r-- | app/assets/images/Twitter_Logo_Blue.png | bin | 0 -> 4298 bytes | |||
| -rw-r--r-- | app/assets/images/team-loadtocode-Loading_icon.gif | bin | 17490 -> 0 bytes | |||
| -rw-r--r-- | app/assets/stylesheets/twitter.scss | 38 | ||||
| -rw-r--r-- | app/views/home/_content.html.haml | 4 | ||||
| -rw-r--r-- | app/views/twitter/_index.html.erb | 16 | ||||
| -rw-r--r-- | doc/TWITTER_FEED.md | 35 |
7 files changed, 64 insertions, 62 deletions
@@ -9,6 +9,7 @@ The LEAP Web App provides the following functions: * Webfinger access to user’s public keys * Email aliases and forwarding * Localized and Customizable documentation +* Display of status updates from Twitter (access to tweets via Twitter API) Written in: Ruby, Rails. @@ -36,6 +37,7 @@ For more information, see these files in the ``doc`` directory: * DEPLOY -- for notes on deployment. * DEVELOP -- for developer notes. * CUSTOM -- how to customize. +* TWITTER_FEED -- how to use it. External docs: @@ -186,34 +188,3 @@ Known problems attacks. These are very hard to prevent, because our protocol is designed to allow query of a user database via proxy in order to provide network perspective. - -Twitter Timeline on Main View ---------------------------- - -This is a feature to include a twitter feed that displays most recent tweets -of a (determined) twitter account (accessed via Twitter API). -If you chose to use it, the feature gets included in `home/index` of -LEAP web app (as part of the main view). - -* Create Twitter Application on https://apps.twitter.com/ - * Visit https://apps.twitter.com/ and log in with the twitter account you want to use - * Make sure you have a mobile phone number registered with your account to be able to proceed - * Choose the option to `Create New App` - * Fill in Application Details and Developer Agreement and `Create your Twitter application` - * Choose the section "Keys and Access Tokens" to get your consumer key and consumer secret - * Optional: Go to section "Permissions" and change the "Access" from `Read and Write` (by default) to `Read only` - * Have your consumer key and secret by hand for one of the next steps - -* Activate the feature within your local LEAP Web Application - * If not already existing create a secrets-file in /config with the name secrets.yml (`/config/secrets.yml`) - * Secrets-file should contain the following, make sure its in YAML: {"development"=> {"twitter"=>{"enabled"=>false, "twitter_handle"=>"", "bearer_token"=>"", "twitter_picture"=>nil}}, "test"=>{"twitter"=>{"enabled"=>false, "twitter_handle"=>"", "bearer_token"=>"", "twitter_picture"=>nil}}} - * To have your bearer token created, run script in terminal being in the file of leap_web: `script/generate_bearer_token` - * To have the script run properly you have to add before running: `--key your_consumerkey --secret your_consumersecret` - * Add also `--projectroot your_projectroot --twitterhandle your_twitterhandle` as well to not have manually put the data in your secrets-file - * The full command looks like this: `script/generate_bearer_token --key your_consumerkey --secret your_consumersecret --projectroot your_projectroot --twitterhandle your_twitterhandle` - * If you didn't give all your information to the script, had a typo or want to change anything else, please do so by finding the secrets-file at `/config/secrets.yml` - * Make sure that the correct twitterhandle and bearer-token is included - -* Deactivate your bearer token - * To deactivate your generated bearer token you can run `script/invalidate_bearer_token` - * The full command looks like this: `script/invalidate_bearer_token --key your_consumerkey --secret your_consumersecret --token your_bearer_token` diff --git a/app/assets/images/Twitter_Logo_Blue.png b/app/assets/images/Twitter_Logo_Blue.png Binary files differnew file mode 100644 index 0000000..b5eebc8 --- /dev/null +++ b/app/assets/images/Twitter_Logo_Blue.png diff --git a/app/assets/images/team-loadtocode-Loading_icon.gif b/app/assets/images/team-loadtocode-Loading_icon.gif Binary files differdeleted file mode 100644 index a718bd8..0000000 --- a/app/assets/images/team-loadtocode-Loading_icon.gif +++ /dev/null diff --git a/app/assets/stylesheets/twitter.scss b/app/assets/stylesheets/twitter.scss index 89cdecf..b2233d0 100644 --- a/app/assets/stylesheets/twitter.scss +++ b/app/assets/stylesheets/twitter.scss @@ -3,16 +3,17 @@ } .twitter_header { - font-size: 20px; + font-size: 16px; text-align: left; - margin-bottom: 80px; + margin-bottom: 55px; + padding: 10px 8px; } .twitter_id { position: absolute; } -.twitter_pic { +.twitter_image_frame { display: block; width: 40px; height: 40px; @@ -22,31 +23,26 @@ top: 0; } -.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; + 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 +66,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; } diff --git a/app/views/home/_content.html.haml b/app/views/home/_content.html.haml index ecd8524..5341189 100644 --- a/app/views/home/_content.html.haml +++ b/app/views/home/_content.html.haml @@ -1,4 +1,4 @@ -.col-md-9 +.col-md-8 .row %h1= t(:welcome, :provider => APP_CONFIG[:domain]) .p=t(:welcome_message_html) @@ -6,6 +6,8 @@ .row = home_page_buttons +.col-md-1 + .col-md-3 .row = render 'twitter/index' diff --git a/app/views/twitter/_index.html.erb b/app/views/twitter/_index.html.erb index ac10aa4..e31117e 100644 --- a/app/views/twitter/_index.html.erb +++ b/app/views/twitter/_index.html.erb @@ -2,11 +2,9 @@ <div class="twitter"> <div class="twitter_header"> - <p>These are the most recent tweets by </br><%= twitter_name%></p> - <div class="twitter_id"> - <div class="twitter_pic twitter_image_frame"><%= image_tag("rails.png") %></div> - <div class="twitter_name"><a href="https://twitter.com/loadtocode">@<%= twitter_handle %></a></div> + <div class="twitter_image_frame"><%= image_tag("Twitter_Logo_Blue.png") %></div> + <div class="twitter_name"><%= twitter_name%><br><a href="https://twitter.com/loadtocode">@<%= twitter_handle %></a></div> </div> </div> @@ -15,16 +13,14 @@ <div class="tweet"> <div class="tweet_text"><%= " #{e.text}" %> </div> - <div class="tweet_text_date">tweeted on <% t = e.created_at%> <%= t.strftime("%m/%d/%y").to_s %> </div> - </div> <% end %> - </div> + </div> - <div class="twitter_footer"> - To prevent leakage no links are displayed. For more information visit @<%= twitter_name %> on twitter.com.</p> - </div> + <div class="twitter_footer"> + <p>This feed uses a Ruby interface to access the Twitter API. Within LEAP Twitter does not track you.</p> + </div> </div> <% end %> diff --git a/doc/TWITTER_FEED.md b/doc/TWITTER_FEED.md new file mode 100644 index 0000000..218bc26 --- /dev/null +++ b/doc/TWITTER_FEED.md @@ -0,0 +1,35 @@ +# Display of status updates from twitter on main view # + +This is a feature to include status updates that displays most recent tweets +of a (determined) twitter account (accessed via Twitter API). +If you chose to use it, the feature gets included in `home/index` of +LEAP web app (as part of the main view). + +## How to use it ## + +* Create Twitter Application on https://apps.twitter.com/ + * Visit https://apps.twitter.com/ and log in with the twitter account you want to use + * Make sure you have a mobile phone number registered with your account to be able to proceed + * Choose the option to `Create New App` + * Fill in Application Details and Developer Agreement and `Create your Twitter application` + * Choose the section "Keys and Access Tokens" to get your consumer key and consumer secret + * Optional: Go to section "Permissions" and change the "Access" from `Read and Write` (by default) to `Read only` + * Have your consumer key and secret by hand for one of the next steps + +* Activate the feature within your local LEAP Web Application + * If not already existing create a secrets-file in /config with the name secrets.yml (`/config/secrets.yml`) + * Secrets-file should contain the following, make sure its in YAML: {"development"=> {"twitter"=>{"enabled"=>false, "twitter_handle"=>"", "bearer_token"=>"", "twitter_picture"=>nil}}, "test"=>{"twitter"=>{"enabled"=>false, "twitter_handle"=>"", "bearer_token"=>"", "twitter_picture"=>nil}}} + * To have your bearer token created, run script in terminal being in the file of leap_web: `script/generate_bearer_token` + * To have the script run properly you have to add before running: `--key your_consumerkey --secret your_consumersecret` + * Add also `--projectroot your_projectroot --twitterhandle your_twitterhandle` as well to not have manually put the data in your secrets-file + * The full command looks like this: `script/generate_bearer_token --key your_consumerkey --secret your_consumersecret --projectroot your_projectroot --twitterhandle your_twitterhandle` + * If you didn't give all your information to the script, had a typo or want to change anything else, please do so by finding the secrets-file at `/config/secrets.yml` + * Make sure that the correct twitterhandle and bearer-token is included + +* Deactivate your bearer token + * To deactivate your generated bearer token you can run script/invalidate_bearer_token + * The full command looks like this: script/invalidate_bearer_token --key your_consumerkey --secret your_consumersecret --token your_bearer_token + +### Default avatar image ### + +This feature uses by default the twitter bird as avatar picture (Twitter_Logo_Blue.png). By using the Twitter trademarks in these Brand Guidelines, you agree to follow these Twitter Trademark Guidelines (the “Guidelines”) as well as our Terms of Service and all other Twitter rules and policies. Please find more details here: https://brand.twitter.com/. |
