/ShareMeow

Permalink
Browse files

Merge branch 'question-template'

  • Loading branch information...
2 parents af07d76 + d20fad1 commit 5c3255b8d03e107a800d00fcb7906e62caff1830 @mscoutermarsh mscoutermarsh committed Mar 20, 2017
Unified Split
Showing with 213 additions and 1 deletion.
  1. +4 −1 Gemfile.lock
  2. +113 −0 app/css/question.css
  3. +28 −0 app/image_templates/question.rb
  4. +26 −0 app/views/question.erb
  5. +42 −0 spec/image_templates/question_spec.rb
View
5 Gemfile.lock
@@ -137,5 +137,8 @@ DEPENDENCIES
sinatra-initializers
wkhtmltoimage-binary
+RUBY VERSION
+ ruby 2.2.4p230
+
BUNDLED WITH
- 1.13.6
+ 1.14.6
View
113 app/css/question.css
@@ -0,0 +1,113 @@
+@font-face {
+ font-family: 'Roboto';
+ font-style: normal;
+ font-weight: 100;
+ src: local('Roboto Thin'), local('Roboto-Thin'), url(http://themes.googleusercontent.com/static/fonts/roboto/v10/vzIUHo9z-oJ4WgkpPOtg1_esZW2xOQ-xsNqO47m55DA.woff) format('woff');
+}
+@font-face {
+ font-family: 'Roboto';
+ font-style: normal;
+ font-weight: 300;
+ src: local('Roboto Light'), local('Roboto-Light'), url(http://themes.googleusercontent.com/static/fonts/roboto/v10/Hgo13k-tfSpn0qi1SFdUfT8E0i7KZn-EPnyo3HZu7kw.woff) format('woff');
+}
+@font-face {
+ font-family: 'Roboto';
+ font-style: normal;
+ font-weight: 400;
+ src: local('Roboto Regular'), local('Roboto-Regular'), url(http://themes.googleusercontent.com/static/fonts/roboto/v10/2UX7WLTfW3W8TclTUvlFyQ.woff) format('woff');
+}
+@font-face {
+ font-family: 'Roboto';
+ font-style: normal;
+ font-weight: 700;
+ src: local('Roboto Bold'), local('Roboto-Bold'), url(http://themes.googleusercontent.com/static/fonts/roboto/v10/d-6IYplOFocCacKzxwXSOD8E0i7KZn-EPnyo3HZu7kw.woff) format('woff');
+}
+@font-face {
+ font-family: 'Roboto';
+ font-style: normal;
+ font-weight: 900;
+ src: local('Roboto Black'), local('Roboto-Black'), url(http://themes.googleusercontent.com/static/fonts/roboto/v10/mnpfi9pxYH-Go5UiibESIj8E0i7KZn-EPnyo3HZu7kw.woff) format('woff');
+}
+
+body {
+ font-family: 'Roboto';
+ font-size: 18px;
+ font-weight: 300;
+ margin: 0px;
+ width: 510px;
+}
+
+a {
+ color: #da552f;
+ text-decoration: none;
+ font-weight: 400;
+}
+
+b {
+ font-weight: 400;
+}
+
+h2 {
+ font-size: 20px;
+ font-family: 'Roboto';
+ font-weight: 300;
+ margin: 0px;
+}
+
+.question {
+ width: 500px;
+ padding-left: 20px;
+ padding-right: 20px;
+ padding-bottom: 10px;
+ padding-top: 10px;
+ background-color: #ffffff;
+}
+
+.question--footer {
+ height: 50px;
+ padding-top: 5px;
+ margin: 0px;
+ border-top: solid 1px #e7e7e7;
+}
+
+.question--footer--logo {
+ margin-top: 5px;
+ margin-right: 5px;
+ float: right;
+}
+
+.highlight {
+ background-color: #EF7F5F;
+}
+
+.question--content {
+ font-family: 'Roboto';
+ font-size: 36px;
+ font-weight: 700;
+ margin: 0px;
+ padding-bottom: 0px;
+ padding-left: 10px;
+ padding-right: 10px;
+ padding-top: 0px;
+}
+
+.question--footer--user-name {
+ font-size: 24px;
+ display: inline-block;
+ margin-top: 10px;
+ margin-left: 5px;
+}
+
+.question--footer--avatar {
+ float: left;
+ display: inline-block;
+ margin-top: 5px;
+ margin-left: 5px;
+ margin-right: 5px;
+ vertical-align: middle;
+}
+
+.question--footer--avatar img {
+ border-radius: 50%;
+ float: left;
+}
View
28 app/image_templates/question.rb
@@ -0,0 +1,28 @@
+require 'app/emoji_helper'
+
+module ImageTemplates
+ class Question < Base
+ def render_options
+ @options[:name] = EmojiHelper.emojify(@options[:name])
+ @options[:content] = EmojiHelper.emojify(@options[:content])
+
+ super
+ end
+
+ def allowed_options
+ %w(content name user_id min_height)
+ end
+
+ def erb_template
+ 'app/views/question.erb'
+ end
+
+ def css_stylesheet
+ 'app/css/question.css'
+ end
+
+ def image_width
+ 450
+ end
+ end
+end
View
26 app/views/question.erb
@@ -0,0 +1,26 @@
+<!DOCTYPE HTML>
+<html lang="en">
+ <head>
+ <meta charset="UTF-8">
+ </head>
+ <body>
+ <div class="question" style="min-height: <%= options[:min_height] || 75 %>px">
+ <div class="question--content">
+ <p>
+ <%= options[:content] %>
+ </p>
+ </div>
+ <div class="question--footer">
+ <div class="question--footer--avatar">
+ <img width=40 height=40 src="https://ph-avatars.imgix.net/<%= options[:user_id] %>/original?auto=format&fit=crop&crop=faces&w=80&h=80" />
+ </div>
+ <div class="question--footer--user-name">
+ <h2><%= options[:name] %></h2>
+ </div>
+ <div class="question--footer--logo">
+ <svg width="40" height="40" viewBox="0 0 40 40" xmlns="http://www.w3.org/2000/svg"><g fill="none" fill-rule="evenodd"><path d="M40 20c0 11.046-8.954 20-20 20S0 31.046 0 20 8.954 0 20 0s20 8.954 20 20" fill="#DA552F"></path><path d="M22.667 20H17v-6h5.667c1.656 0 3 1.343 3 3s-1.344 3-3 3m0-10H13v20h4v-6h5.667c3.866 0 7-3.134 7-7s-3.134-7-7-7" fill="#FFF"></path></g></svg>
+ </div>
+ </div>
+ </div>
+ </body>
+</html>
View
42 spec/image_templates/question_spec.rb
@@ -0,0 +1,42 @@
+require 'spec_helper'
+require 'image_templates/shared_examples'
+
+RSpec.describe ImageTemplates::Question do
+ default_options = { 'user_id' => '787',
+ 'name' => 'William Shakespurr',
+ 'content' => 'Meow' }
+
+ let(:image_template) { described_class.new(default_options) }
+
+ describe '#to_html' do
+ it 'renders the name' do
+ expect(image_template.to_html).to include default_options['name']
+ end
+
+ it 'renders the content' do
+ expect(image_template.to_html).to include default_options['content']
+ end
+
+ it 'sets a default minimum height' do
+ expect(image_template.to_html).to include 'min-height: 75px'
+ end
+
+ it 'sets min-height if included in options' do
+ default_options['min_height'] = '400'
+ expect(image_template.to_html).to include 'min-height: 400px'
+ end
+ end
+
+ describe '#render_options' do
+ it 'emojifies the name & content' do
+ allow(EmojiHelper).to receive(:emojify).and_call_original
+
+ image_template.render_options
+
+ expect(EmojiHelper).to have_received(:emojify).with(default_options['name'])
+ expect(EmojiHelper).to have_received(:emojify).with(default_options['content'])
+ end
+ end
+
+ it_behaves_like 'an ImageTemplate', default_options
+end

0 comments on commit 5c3255b

Please sign in to comment.