diff --git a/Dockerfile b/Dockerfile new file mode 100644 index 00000000..8c2c64e6 --- /dev/null +++ b/Dockerfile @@ -0,0 +1,28 @@ +# Use an official docker base image running ruby 2.1 +FROM ruby:2.1-onbuild + +# Update the base image +RUN apt-get -y update + +# Upgrade as well +RUN apt-get -qy upgrade + +# Set the work directory where source is now located +WORKDIR /usr/src + +# Copy our app source code to a folder +COPY Gemfile /usr/src/ +COPY . /usr/src/ + +# Install bundler +RUN gem install bundler + +# Install dependencies +RUN apt-get -y install nodejs +RUN bundle install + +# Define the port where the app is going serve +EXPOSE 80 + +# Define the default command for starting the app that Docker would use +CMD bundle exec middleman -p 80 diff --git a/nile.json b/nile.json new file mode 100644 index 00000000..9e8126d1 --- /dev/null +++ b/nile.json @@ -0,0 +1,36 @@ +{ + "name": "socialcard", + "cluster": "alpine.nile.works", + "image": "quay.io/washpost/socialcard", + "port": 80, + "paths": ["/"], + "builds": [ + { + "autodeploy": true, + "branch": "master", + "notify": "socialcard", + "tags": [ + "1.0.0" + ], + "version": "1.0.0" + } + ], + "environment": { + + }, + "stages": [{ + "name": "prod", + "scale": 2, + "domain": "socialcard.wpit.nile.works", + "environment": { + "NODE_ENV":"production", + "PRODUCTION_PORT": "80" + } + }], + "routes": [ + { + "path": "/", + "external": false + } + ] +} \ No newline at end of file diff --git a/source/images/candidates/barack_obama.png b/source/images/candidates/barack_obama.png new file mode 100644 index 00000000..493f05dd Binary files /dev/null and b/source/images/candidates/barack_obama.png differ diff --git a/source/images/candidates/ben_carson.png b/source/images/candidates/ben_carson.png new file mode 100644 index 00000000..477f64e9 Binary files /dev/null and b/source/images/candidates/ben_carson.png differ diff --git a/source/images/candidates/bernie_sanders.png b/source/images/candidates/bernie_sanders.png new file mode 100644 index 00000000..ecbc1ee0 Binary files /dev/null and b/source/images/candidates/bernie_sanders.png differ diff --git a/source/images/candidates/bobby_jindal.png b/source/images/candidates/bobby_jindal.png new file mode 100644 index 00000000..ae628d63 Binary files /dev/null and b/source/images/candidates/bobby_jindal.png differ diff --git a/source/images/candidates/carly_fiorina.png b/source/images/candidates/carly_fiorina.png new file mode 100644 index 00000000..0e831be8 Binary files /dev/null and b/source/images/candidates/carly_fiorina.png differ diff --git a/source/images/candidates/chris_christie.png b/source/images/candidates/chris_christie.png new file mode 100644 index 00000000..4b7eb03a Binary files /dev/null and b/source/images/candidates/chris_christie.png differ diff --git a/source/images/candidates/donald_trump.png b/source/images/candidates/donald_trump.png new file mode 100644 index 00000000..4cdb4351 Binary files /dev/null and b/source/images/candidates/donald_trump.png differ diff --git a/source/images/candidates/george_pataki.png b/source/images/candidates/george_pataki.png new file mode 100644 index 00000000..1ba5ad3f Binary files /dev/null and b/source/images/candidates/george_pataki.png differ diff --git a/source/images/candidates/hillary_clinton.png b/source/images/candidates/hillary_clinton.png new file mode 100644 index 00000000..7563620a Binary files /dev/null and b/source/images/candidates/hillary_clinton.png differ diff --git a/source/images/candidates/jeb_bush.png b/source/images/candidates/jeb_bush.png new file mode 100644 index 00000000..3c332713 Binary files /dev/null and b/source/images/candidates/jeb_bush.png differ diff --git a/source/images/candidates/jim_gilmore.png b/source/images/candidates/jim_gilmore.png new file mode 100644 index 00000000..18b8ec25 Binary files /dev/null and b/source/images/candidates/jim_gilmore.png differ diff --git a/source/images/candidates/jim_webb.png b/source/images/candidates/jim_webb.png new file mode 100644 index 00000000..fcdc20cc Binary files /dev/null and b/source/images/candidates/jim_webb.png differ diff --git a/source/images/candidates/joe_biden.png b/source/images/candidates/joe_biden.png new file mode 100644 index 00000000..d0cc8774 Binary files /dev/null and b/source/images/candidates/joe_biden.png differ diff --git a/source/images/candidates/john_kasich.png b/source/images/candidates/john_kasich.png new file mode 100644 index 00000000..4e8e14e9 Binary files /dev/null and b/source/images/candidates/john_kasich.png differ diff --git a/source/images/candidates/lincoln_chaffee.png b/source/images/candidates/lincoln_chaffee.png new file mode 100644 index 00000000..b872f4cb Binary files /dev/null and b/source/images/candidates/lincoln_chaffee.png differ diff --git a/source/images/candidates/lindsey_graham.png b/source/images/candidates/lindsey_graham.png new file mode 100644 index 00000000..c16044a7 Binary files /dev/null and b/source/images/candidates/lindsey_graham.png differ diff --git a/source/images/candidates/marco_rubio.png b/source/images/candidates/marco_rubio.png new file mode 100644 index 00000000..d8db3d50 Binary files /dev/null and b/source/images/candidates/marco_rubio.png differ diff --git a/source/images/candidates/martin_omalley.png b/source/images/candidates/martin_omalley.png new file mode 100644 index 00000000..4781f821 Binary files /dev/null and b/source/images/candidates/martin_omalley.png differ diff --git a/source/images/candidates/mike_huckabee.png b/source/images/candidates/mike_huckabee.png new file mode 100644 index 00000000..2c8da11d Binary files /dev/null and b/source/images/candidates/mike_huckabee.png differ diff --git a/source/images/candidates/rand_paul.png b/source/images/candidates/rand_paul.png new file mode 100644 index 00000000..d9d34c2b Binary files /dev/null and b/source/images/candidates/rand_paul.png differ diff --git a/source/images/candidates/rick_perry.png b/source/images/candidates/rick_perry.png new file mode 100644 index 00000000..b82ccf33 Binary files /dev/null and b/source/images/candidates/rick_perry.png differ diff --git a/source/images/candidates/rick_santorum.png b/source/images/candidates/rick_santorum.png new file mode 100644 index 00000000..82eeed88 Binary files /dev/null and b/source/images/candidates/rick_santorum.png differ diff --git a/source/images/candidates/scott_walker.png b/source/images/candidates/scott_walker.png new file mode 100644 index 00000000..3269fa66 Binary files /dev/null and b/source/images/candidates/scott_walker.png differ diff --git a/source/images/candidates/ted_cruz.png b/source/images/candidates/ted_cruz.png new file mode 100644 index 00000000..4b893041 Binary files /dev/null and b/source/images/candidates/ted_cruz.png differ diff --git a/source/images/candidates_new/BenCarson.png b/source/images/candidates_new/BenCarson.png new file mode 100644 index 00000000..48bd904d Binary files /dev/null and b/source/images/candidates_new/BenCarson.png differ diff --git a/source/images/candidates_new/BernieSanders.png b/source/images/candidates_new/BernieSanders.png new file mode 100644 index 00000000..0346b02a Binary files /dev/null and b/source/images/candidates_new/BernieSanders.png differ diff --git a/source/images/candidates_new/CarlyFiorina.png b/source/images/candidates_new/CarlyFiorina.png new file mode 100644 index 00000000..afadf7e6 Binary files /dev/null and b/source/images/candidates_new/CarlyFiorina.png differ diff --git a/source/images/candidates_new/ChrisChristie.png b/source/images/candidates_new/ChrisChristie.png new file mode 100644 index 00000000..ca28dabd Binary files /dev/null and b/source/images/candidates_new/ChrisChristie.png differ diff --git a/source/images/candidates_new/DonaldTrump.png b/source/images/candidates_new/DonaldTrump.png new file mode 100644 index 00000000..9c2cd32d Binary files /dev/null and b/source/images/candidates_new/DonaldTrump.png differ diff --git a/source/images/candidates_new/HillaryClinton.png b/source/images/candidates_new/HillaryClinton.png new file mode 100644 index 00000000..b832d3bc Binary files /dev/null and b/source/images/candidates_new/HillaryClinton.png differ diff --git a/source/images/candidates_new/JebBush.png b/source/images/candidates_new/JebBush.png new file mode 100644 index 00000000..ee187926 Binary files /dev/null and b/source/images/candidates_new/JebBush.png differ diff --git a/source/images/candidates_new/JimGilmore.png b/source/images/candidates_new/JimGilmore.png new file mode 100644 index 00000000..cd4652db Binary files /dev/null and b/source/images/candidates_new/JimGilmore.png differ diff --git a/source/images/candidates_new/JohnKasich.png b/source/images/candidates_new/JohnKasich.png new file mode 100644 index 00000000..09e125eb Binary files /dev/null and b/source/images/candidates_new/JohnKasich.png differ diff --git a/source/images/candidates_new/MarcoRubio.png b/source/images/candidates_new/MarcoRubio.png new file mode 100644 index 00000000..0b01af8b Binary files /dev/null and b/source/images/candidates_new/MarcoRubio.png differ diff --git a/source/images/candidates_new/MartinOMalley.png b/source/images/candidates_new/MartinOMalley.png new file mode 100644 index 00000000..ebe037ba Binary files /dev/null and b/source/images/candidates_new/MartinOMalley.png differ diff --git a/source/images/candidates_new/MikeHuckabee.png b/source/images/candidates_new/MikeHuckabee.png new file mode 100644 index 00000000..de821d24 Binary files /dev/null and b/source/images/candidates_new/MikeHuckabee.png differ diff --git a/source/images/candidates_new/RandPaul.png b/source/images/candidates_new/RandPaul.png new file mode 100644 index 00000000..bf35c8a3 Binary files /dev/null and b/source/images/candidates_new/RandPaul.png differ diff --git a/source/images/candidates_new/RickSantorum.png b/source/images/candidates_new/RickSantorum.png new file mode 100644 index 00000000..2cbc8402 Binary files /dev/null and b/source/images/candidates_new/RickSantorum.png differ diff --git a/source/images/candidates_new/TedCruz.png b/source/images/candidates_new/TedCruz.png new file mode 100644 index 00000000..fa16c335 Binary files /dev/null and b/source/images/candidates_new/TedCruz.png differ diff --git a/source/images/olympics/archery.png b/source/images/olympics/archery.png new file mode 100644 index 00000000..f3a58a98 Binary files /dev/null and b/source/images/olympics/archery.png differ diff --git a/source/images/olympics/artistic_gymnastics.png b/source/images/olympics/artistic_gymnastics.png new file mode 100644 index 00000000..5655cc04 Binary files /dev/null and b/source/images/olympics/artistic_gymnastics.png differ diff --git a/source/images/olympics/badminton.png b/source/images/olympics/badminton.png new file mode 100644 index 00000000..cf4c58c4 Binary files /dev/null and b/source/images/olympics/badminton.png differ diff --git a/source/images/olympics/basketball_1.png b/source/images/olympics/basketball_1.png new file mode 100644 index 00000000..36aa497a Binary files /dev/null and b/source/images/olympics/basketball_1.png differ diff --git a/source/images/olympics/basketball_2.png b/source/images/olympics/basketball_2.png new file mode 100644 index 00000000..ec06624f Binary files /dev/null and b/source/images/olympics/basketball_2.png differ diff --git a/source/images/olympics/beachvolley.png b/source/images/olympics/beachvolley.png new file mode 100644 index 00000000..4c992b62 Binary files /dev/null and b/source/images/olympics/beachvolley.png differ diff --git a/source/images/olympics/bmx.png b/source/images/olympics/bmx.png new file mode 100644 index 00000000..e196830c Binary files /dev/null and b/source/images/olympics/bmx.png differ diff --git a/source/images/olympics/boxing.png b/source/images/olympics/boxing.png new file mode 100644 index 00000000..3741bc48 Binary files /dev/null and b/source/images/olympics/boxing.png differ diff --git a/source/images/olympics/canoe_kayak_slalom.png b/source/images/olympics/canoe_kayak_slalom.png new file mode 100644 index 00000000..8cdb937b Binary files /dev/null and b/source/images/olympics/canoe_kayak_slalom.png differ diff --git a/source/images/olympics/canoe_kayak_sprint.png b/source/images/olympics/canoe_kayak_sprint.png new file mode 100644 index 00000000..433c454c Binary files /dev/null and b/source/images/olympics/canoe_kayak_sprint.png differ diff --git a/source/images/olympics/discus_throw.png b/source/images/olympics/discus_throw.png new file mode 100644 index 00000000..4faeb7e5 Binary files /dev/null and b/source/images/olympics/discus_throw.png differ diff --git a/source/images/olympics/diving.png b/source/images/olympics/diving.png new file mode 100644 index 00000000..53f17746 Binary files /dev/null and b/source/images/olympics/diving.png differ diff --git a/source/images/olympics/equestrian_dressage.png b/source/images/olympics/equestrian_dressage.png new file mode 100644 index 00000000..6c501a90 Binary files /dev/null and b/source/images/olympics/equestrian_dressage.png differ diff --git a/source/images/olympics/equestrian_eventing.png b/source/images/olympics/equestrian_eventing.png new file mode 100644 index 00000000..eac81025 Binary files /dev/null and b/source/images/olympics/equestrian_eventing.png differ diff --git a/source/images/olympics/equestrian_jumping.png b/source/images/olympics/equestrian_jumping.png new file mode 100644 index 00000000..ea9d3daf Binary files /dev/null and b/source/images/olympics/equestrian_jumping.png differ diff --git a/source/images/olympics/fencing.png b/source/images/olympics/fencing.png new file mode 100644 index 00000000..0abcbb83 Binary files /dev/null and b/source/images/olympics/fencing.png differ diff --git a/source/images/olympics/floor_exercises.png b/source/images/olympics/floor_exercises.png new file mode 100644 index 00000000..8b8db974 Binary files /dev/null and b/source/images/olympics/floor_exercises.png differ diff --git a/source/images/olympics/golf.png b/source/images/olympics/golf.png new file mode 100644 index 00000000..ca44b393 Binary files /dev/null and b/source/images/olympics/golf.png differ diff --git a/source/images/olympics/handball.png b/source/images/olympics/handball.png new file mode 100644 index 00000000..b3c346d0 Binary files /dev/null and b/source/images/olympics/handball.png differ diff --git a/source/images/olympics/high_jump.png b/source/images/olympics/high_jump.png new file mode 100644 index 00000000..7b8d99a8 Binary files /dev/null and b/source/images/olympics/high_jump.png differ diff --git a/source/images/olympics/hockey.png b/source/images/olympics/hockey.png new file mode 100644 index 00000000..44f88375 Binary files /dev/null and b/source/images/olympics/hockey.png differ diff --git a/source/images/olympics/horizontal_bars.png b/source/images/olympics/horizontal_bars.png new file mode 100644 index 00000000..d65b5e5f Binary files /dev/null and b/source/images/olympics/horizontal_bars.png differ diff --git a/source/images/olympics/hurdles.png b/source/images/olympics/hurdles.png new file mode 100644 index 00000000..671cab51 Binary files /dev/null and b/source/images/olympics/hurdles.png differ diff --git a/source/images/olympics/javelin.png b/source/images/olympics/javelin.png new file mode 100644 index 00000000..a17bfafb Binary files /dev/null and b/source/images/olympics/javelin.png differ diff --git a/source/images/olympics/judo.png b/source/images/olympics/judo.png new file mode 100644 index 00000000..f0fc19e1 Binary files /dev/null and b/source/images/olympics/judo.png differ diff --git a/source/images/olympics/long_jump.png b/source/images/olympics/long_jump.png new file mode 100644 index 00000000..093558b1 Binary files /dev/null and b/source/images/olympics/long_jump.png differ diff --git a/source/images/olympics/marathon_swimming.png b/source/images/olympics/marathon_swimming.png new file mode 100644 index 00000000..69dd05ca Binary files /dev/null and b/source/images/olympics/marathon_swimming.png differ diff --git a/source/images/olympics/modern_pentathlon.png b/source/images/olympics/modern_pentathlon.png new file mode 100644 index 00000000..e588c63a Binary files /dev/null and b/source/images/olympics/modern_pentathlon.png differ diff --git a/source/images/olympics/mountain_bike.png b/source/images/olympics/mountain_bike.png new file mode 100644 index 00000000..67ea926e Binary files /dev/null and b/source/images/olympics/mountain_bike.png differ diff --git a/source/images/olympics/paralel_bars.png b/source/images/olympics/paralel_bars.png new file mode 100644 index 00000000..72a12fe5 Binary files /dev/null and b/source/images/olympics/paralel_bars.png differ diff --git a/source/images/olympics/podium.png b/source/images/olympics/podium.png new file mode 100644 index 00000000..9073b861 Binary files /dev/null and b/source/images/olympics/podium.png differ diff --git a/source/images/olympics/pole_vault.png b/source/images/olympics/pole_vault.png new file mode 100644 index 00000000..da76d5f7 Binary files /dev/null and b/source/images/olympics/pole_vault.png differ diff --git a/source/images/olympics/pommel_horse.png b/source/images/olympics/pommel_horse.png new file mode 100644 index 00000000..f002d799 Binary files /dev/null and b/source/images/olympics/pommel_horse.png differ diff --git a/source/images/olympics/relays.png b/source/images/olympics/relays.png new file mode 100644 index 00000000..bd0af9a8 Binary files /dev/null and b/source/images/olympics/relays.png differ diff --git a/source/images/olympics/rhythmic_gymnastics.png b/source/images/olympics/rhythmic_gymnastics.png new file mode 100644 index 00000000..7d9b25ae Binary files /dev/null and b/source/images/olympics/rhythmic_gymnastics.png differ diff --git a/source/images/olympics/rings.png b/source/images/olympics/rings.png new file mode 100644 index 00000000..643dfc14 Binary files /dev/null and b/source/images/olympics/rings.png differ diff --git a/source/images/olympics/road_cycling.png b/source/images/olympics/road_cycling.png new file mode 100644 index 00000000..a05d989b Binary files /dev/null and b/source/images/olympics/road_cycling.png differ diff --git a/source/images/olympics/rowing.png b/source/images/olympics/rowing.png new file mode 100644 index 00000000..dd8fc1b0 Binary files /dev/null and b/source/images/olympics/rowing.png differ diff --git a/source/images/olympics/rugby.png b/source/images/olympics/rugby.png new file mode 100644 index 00000000..0a313c35 Binary files /dev/null and b/source/images/olympics/rugby.png differ diff --git a/source/images/olympics/sailing.png b/source/images/olympics/sailing.png new file mode 100644 index 00000000..6d01acbf Binary files /dev/null and b/source/images/olympics/sailing.png differ diff --git a/source/images/olympics/shooting.png b/source/images/olympics/shooting.png new file mode 100644 index 00000000..09a82e0a Binary files /dev/null and b/source/images/olympics/shooting.png differ diff --git a/source/images/olympics/soccer.png b/source/images/olympics/soccer.png new file mode 100644 index 00000000..825e5914 Binary files /dev/null and b/source/images/olympics/soccer.png differ diff --git a/source/images/olympics/swimming.png b/source/images/olympics/swimming.png new file mode 100644 index 00000000..d4e34103 Binary files /dev/null and b/source/images/olympics/swimming.png differ diff --git a/source/images/olympics/synchronized_swimming.png b/source/images/olympics/synchronized_swimming.png new file mode 100644 index 00000000..317fbc20 Binary files /dev/null and b/source/images/olympics/synchronized_swimming.png differ diff --git a/source/images/olympics/table_tennis.png b/source/images/olympics/table_tennis.png new file mode 100644 index 00000000..8234e558 Binary files /dev/null and b/source/images/olympics/table_tennis.png differ diff --git a/source/images/olympics/taekwondo.png b/source/images/olympics/taekwondo.png new file mode 100644 index 00000000..f28c952c Binary files /dev/null and b/source/images/olympics/taekwondo.png differ diff --git a/source/images/olympics/tennis.png b/source/images/olympics/tennis.png new file mode 100644 index 00000000..846bd51b Binary files /dev/null and b/source/images/olympics/tennis.png differ diff --git a/source/images/olympics/torch.png b/source/images/olympics/torch.png new file mode 100644 index 00000000..629e5ad0 Binary files /dev/null and b/source/images/olympics/torch.png differ diff --git a/source/images/olympics/track.png b/source/images/olympics/track.png new file mode 100644 index 00000000..7c6bf299 Binary files /dev/null and b/source/images/olympics/track.png differ diff --git a/source/images/olympics/track_cycling.png b/source/images/olympics/track_cycling.png new file mode 100644 index 00000000..b97f4c51 Binary files /dev/null and b/source/images/olympics/track_cycling.png differ diff --git a/source/images/olympics/trampoline.png b/source/images/olympics/trampoline.png new file mode 100644 index 00000000..acc39ca8 Binary files /dev/null and b/source/images/olympics/trampoline.png differ diff --git a/source/images/olympics/triathlon.png b/source/images/olympics/triathlon.png new file mode 100644 index 00000000..84aa03ff Binary files /dev/null and b/source/images/olympics/triathlon.png differ diff --git a/source/images/olympics/uneven_bars.png b/source/images/olympics/uneven_bars.png new file mode 100644 index 00000000..aeb0c24f Binary files /dev/null and b/source/images/olympics/uneven_bars.png differ diff --git a/source/images/olympics/volleyball.png b/source/images/olympics/volleyball.png new file mode 100644 index 00000000..eeb5949b Binary files /dev/null and b/source/images/olympics/volleyball.png differ diff --git a/source/images/olympics/waterpolo.png b/source/images/olympics/waterpolo.png new file mode 100644 index 00000000..d18b70ad Binary files /dev/null and b/source/images/olympics/waterpolo.png differ diff --git a/source/images/olympics/weighlifting.png b/source/images/olympics/weighlifting.png new file mode 100644 index 00000000..db10bc25 Binary files /dev/null and b/source/images/olympics/weighlifting.png differ diff --git a/source/images/olympics/winner.png b/source/images/olympics/winner.png new file mode 100644 index 00000000..5b2eff33 Binary files /dev/null and b/source/images/olympics/winner.png differ diff --git a/source/images/olympics/wrestling.png b/source/images/olympics/wrestling.png new file mode 100644 index 00000000..1cd61469 Binary files /dev/null and b/source/images/olympics/wrestling.png differ diff --git a/source/images/pinocchio.svg b/source/images/pinocchio.svg new file mode 100644 index 00000000..aaca92c9 --- /dev/null +++ b/source/images/pinocchio.svg @@ -0,0 +1,95 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/source/images/sponsor/netflix.png b/source/images/sponsor/netflix.png new file mode 100644 index 00000000..6beb458c Binary files /dev/null and b/source/images/sponsor/netflix.png differ diff --git a/source/images/theverge.png b/source/images/theverge.png deleted file mode 100644 index fa6226d0..00000000 Binary files a/source/images/theverge.png and /dev/null differ diff --git a/source/images/vox.png b/source/images/vox.png deleted file mode 100644 index 650f269f..00000000 Binary files a/source/images/vox.png and /dev/null differ diff --git a/source/images/wp_logo.png b/source/images/wp_logo.png new file mode 100644 index 00000000..0320c503 Binary files /dev/null and b/source/images/wp_logo.png differ diff --git a/source/index.html.erb b/source/index.html.erb index 83c6eee8..3594340c 100644 --- a/source/index.html.erb +++ b/source/index.html.erb @@ -1,4 +1,4 @@ --- -title: Social sharing builder +title: Social Card Generator description: --- diff --git a/source/javascripts/settings.js.erb b/source/javascripts/settings.js.erb index 97fddf34..c387773d 100644 --- a/source/javascripts/settings.js.erb +++ b/source/javascripts/settings.js.erb @@ -1,62 +1,187 @@ var MEME_SETTINGS = { - creditText: 'Source:', // Default "credits" text. - creditSize: 12, // Font size for credit text. - downloadName: 'share', // The name of the downloaded image file (will have a ".png" extension added). - fontColor: 'white', // Universal font color. - - // Universal font family for texts: - // Note that you'll need to included quoted font names as you would in CSS, ie: '"Knockout 28 B"'. - fontFamily: 'Helvetica Neue', - // Font family options: set to empty array to disable font selector. - // These options may also be formatted as {text:'Knockout', value:'"Knockout 28 B"'}. - fontFamilyOpts: ['Arial', 'Helvetica Neue', 'Comic Sans MS'], - - // Font size of main headline: - fontSize: 24, - // Font size options: set to empty array to disable font-size selector. + bottomText: '', + bottomText2: '', + bottomTextFontSize: 34, + bottomTextFontSizeOpts: [ + {text: 'Small', value: 28}, + {text: 'Default', value: 34} + ], + bottomTextVertical: 0.9, + candidate: '<%= image_path("candidates/barack_obama.png") %>', + candidateHorizontal: 0.71, + candidateRatio: 0.75, + candidateSize: 400, + candidateOpts: [ + {text: 'None', value: ''}, + {text: 'Barack Obama', value: '<%= image_path("candidates/barack_obama.png") %>'}, + {text: 'Ben Carson', value: '<%= image_path("candidates/ben_carson.png") %>'}, + {text: 'Bernie Sanders', value: '<%= image_path("candidates/bernie_sanders.png") %>'}, + {text: 'Bobby Jindal', value: '<%= image_path("candidates/bobby_jindal.png") %>'}, + {text: 'Carly Fiorina', value: '<%= image_path("candidates/carly_fiorina.png") %>'}, + {text: 'Chris Christie', value: '<%= image_path("candidates/chris_christie.png") %>'}, + {text: 'Donald Trump', value: '<%= image_path("candidates/donald_trump.png") %>'}, + {text: 'George Pataki', value: '<%= image_path("candidates/george_pataki.png") %>'}, + {text: 'Hillary Clinton', value: '<%= image_path("candidates/hillary_clinton.png") %>'}, + {text: 'Jeb Bush', value: '<%= image_path("candidates/jeb_bush.png") %>'}, + {text: 'Jim Gilmore', value: '<%= image_path("candidates/jim_gilmore.png") %>'}, + {text: 'Jim Webb', value: '<%= image_path("candidates/jim_webb.png") %>'}, + {text: 'Joe Biden', value: '<%= image_path("candidates/joe_biden.png") %>'}, + {text: 'John Kasich', value: '<%= image_path("candidates/john_kasich.png") %>'}, + {text: 'Lincoln Chaffee', value: '<%= image_path("candidates/lincoln_chaffee.png") %>'}, + {text: 'Lindsey Graham', value: '<%= image_path("candidates/lindsey_graham.png") %>'}, + {text: 'Marco Rubio', value: '<%= image_path("candidates/marco_rubio.png") %>'}, + {text: 'Martin O\'Malley', value: '<%= image_path("candidates/martin_omalley.png") %>'}, + {text: 'Mike Huckabee', value: '<%= image_path("candidates/mike_huckabee.png") %>'}, + {text: 'Rand Paul', value: '<%= image_path("candidates/rand_paul.png") %>'}, + {text: 'Rick Perry', value: '<%= image_path("candidates/rick_perry.png") %>'}, + {text: 'Rick Santorum', value: '<%= image_path("candidates/rick_santorum.png") %>'}, + {text: 'Scott Walker', value: '<%= image_path("candidates/scott_walker.png") %>'}, + {text: 'Ted Cruz', value: '<%= image_path("candidates/ted_cruz.png") %>'} + ], + candidateVertical: 0.125, + candidateNewOpts: [ + {text: 'None', value: ''}, + {text: 'Ben Carson', value: '<%= image_path("candidates_new/BenCarson.png") %>'}, + {text: 'Bernie Sanders', value: '<%= image_path("candidates_new/BernieSanders.png") %>'}, + {text: 'Carly Fiorina', value: '<%= image_path("candidates_new/CarlyFiorina.png") %>'}, + {text: 'Chris Christie', value: '<%= image_path("candidates_new/ChrisChristie.png") %>'}, + {text: 'Donald Trump', value: '<%= image_path("candidates_new/DonaldTrump.png") %>'}, + {text: 'Hillary Clinton', value: '<%= image_path("candidates_new/HillaryClinton.png") %>'}, + {text: 'Jeb Bush', value: '<%= image_path("candidates_new/JebBush.png") %>'}, + {text: 'Jim Gilmore', value: '<%= image_path("candidates_new/JimGilmore.png") %>'}, + {text: 'John Kasich', value: '<%= image_path("candidates_new/John Kasich.png") %>'}, + {text: 'Marco Rubio', value: '<%= image_path("candidates_new/Marco Rubio.png") %>'}, + {text: 'Martin O\'Malley', value: '<%= image_path("candidates_new/MartinOMalley.png") %>'}, + {text: 'Mike Huckabee', value: '<%= image_path("candidates_new/MikeHuckabee.png") %>'}, + {text: 'Rand Paul', value: '<%= image_path("candidates_new/RandPaul.png") %>'}, + {text: 'Rick Santorum', value: '<%= image_path("candidates_new/RickSantorum.png") %>'}, + {text: 'Ted Cruz', value: '<%= image_path("candidates_new/TedCruz.png") %>'}, + ], + olympicsOpts: [ + {text: 'None', value: ''}, + {text: 'Archery', value: '<%= image_path("olympics/archery.png") %>'}, + {text: 'Artistic Gymnastics', value: '<%= image_path("olympics/artistic_gymnastics.png") %>'}, + {text: 'Badminton', value: '<%= image_path("olympics/badminton.png") %>'}, + {text: 'Basketball 1', value: '<%= image_path("olympics/basketball_1.png") %>'}, + {text: 'Basketball 2', value: '<%= image_path("olympics/basketball_2.png") %>'}, + {text: 'Beach Volleyball', value: '<%= image_path("olympics/beachvolley.png") %>'}, + {text: 'BMX', value: '<%= image_path("olympics/bmx.png") %>'}, + {text: 'Boxing', value: '<%= image_path("olympics/boxing.png") %>'}, + {text: 'Canoe Kayak Slalom', value: '<%= image_path("olympics/canoe_kayak_slalom.png") %>'}, + {text: 'Canoe Kayak Sprint', value: '<%= image_path("olympics/canoe_kayak_sprint.png") %>'}, + {text: 'Discus Throw', value: '<%= image_path("olympics/discus_throw.png") %>'}, + {text: 'Diving', value: '<%= image_path("olympics/diving.png") %>'}, + {text: 'Equestrian Dressage', value: '<%= image_path("olympics/equestrian_dressage.png") %>'}, + {text: 'Equestrian Eventing', value: '<%= image_path("olympics/equestrian_eventing.png") %>'}, + {text: 'Equestrian Jumping', value: '<%= image_path("olympics/equestrian_jumping.png") %>'}, + {text: 'Fencing', value: '<%= image_path("olympics/fencing.png") %>'}, + {text: 'Floor Exercises', value: '<%= image_path("olympics/floor_exercises.png") %>'}, + {text: 'Golf', value: '<%= image_path("olympics/golf.png") %>'}, + {text: 'Handball', value: '<%= image_path("olympics/handball.png") %>'}, + {text: 'High Jump', value: '<%= image_path("olympics/high_jump.png") %>'}, + {text: 'Hockey', value: '<%= image_path("olympics/hockey.png") %>'}, + {text: 'Horizontal Bars', value: '<%= image_path("olympics/horizontal_bars.png") %>'}, + {text: 'Hurdles', value: '<%= image_path("olympics/hurdles.png") %>'}, + {text: 'Javelin', value: '<%= image_path("olympics/javelin.png") %>'}, + {text: 'Judo', value: '<%= image_path("olympics/judo.png") %>'}, + {text: 'Long Jump', value: '<%= image_path("olympics/long_jump.png") %>'}, + {text: 'Marathon Swimming', value: '<%= image_path("olympics/marathon_swimming.png") %>'}, + {text: 'Modern Pentathlon', value: '<%= image_path("olympics/modern_pentathlon.png") %>'}, + {text: 'Mountain Bike', value: '<%= image_path("olympics/mountain_bike.png") %>'}, + {text: 'Paralell Bars', value: '<%= image_path("olympics/paralel_bars.png") %>'}, + {text: 'Podium', value: '<%= image_path("olympics/podium.png") %>'}, + {text: 'Pole Vault', value: '<%= image_path("olympics/pole_vault.png") %>'}, + {text: 'Pommel Horse', value: '<%= image_path("olympics/pommel_horse.png") %>'}, + {text: 'Relays', value: '<%= image_path("olympics/relays.png") %>'}, + {text: 'Rhythmic Gymnastics', value: '<%= image_path("olympics/rhythmic_gymnastics.png") %>'}, + {text: 'Rings', value: '<%= image_path("olympics/rings.png") %>'}, + {text: 'Road Cycling', value: '<%= image_path("olympics/road_cycling.png") %>'}, + {text: 'Rowing', value: '<%= image_path("olympics/rowing.png") %>'}, + {text: 'Rugby', value: '<%= image_path("olympics/rugby.png") %>'}, + {text: 'Sailing', value: '<%= image_path("olympics/sailing.png") %>'}, + {text: 'Shooting', value: '<%= image_path("olympics/shooting.png") %>'}, + {text: 'Soccer', value: '<%= image_path("olympics/soccer.png") %>'}, + {text: 'Swimming', value: '<%= image_path("olympics/swimming.png") %>'}, + {text: 'Synchronized Swimming', value: '<%= image_path("olympics/synchronized_swimming.png") %>'}, + {text: 'Table Tennis', value: '<%= image_path("olympics/table_tennis.png") %>'}, + {text: 'Taekwondo', value: '<%= image_path("olympics/taekwondo.png") %>'}, + {text: 'Tennis', value: '<%= image_path("olympics/tennis.png") %>'}, + {text: 'Torch', value: '<%= image_path("olympics/torch.png") %>'}, + {text: 'Track Cycling', value: '<%= image_path("olympics/track_cycling.png") %>'}, + {text: 'Track', value: '<%= image_path("olympics/track.png") %>'}, + {text: 'Trampoline', value: '<%= image_path("olympics/trampoline.png") %>'}, + {text: 'Triathlon', value: '<%= image_path("olympics/triathlon.png") %>'}, + {text: 'Uneven Bars', value: '<%= image_path("olympics/uneven_bars.png") %>'}, + {text: 'Volleyball', value: '<%= image_path("olympics/volleyball.png") %>'}, + {text: 'Waterpolo', value: '<%= image_path("olympics/waterpolo.png") %>'}, + {text: 'Weightlifting', value: '<%= image_path("olympics/weighlifting.png") %>'}, + {text: 'Winner', value: '<%= image_path("olympics/winner.png") %>'}, + {text: 'Wrestling', value: '<%= image_path("olympics/wrestling.png") %>'}, + ], + candidateNewHorizontal: 0, + olympicsHorizontal: 0, + olympicsRatio: 0.75, + olympicsSize: 200, + olympicsVertical: .125, + creditText: '', + creditSize: 12, + downloadName: 'social_card', + factChecker: '', + factCheckerOpts: [ + {text: 'None', value: ''}, + {text: '1 Pinocchio', value: '1p'}, + {text: '2 Pinocchios', value: '2p'}, + {text: '3 Pinocchios', value: '3p'}, + {text: '4 Pinocchios', value: '4p'}, + {text: '1 Gepetto', value: '1g'}, + {text: '2 Gepettos', value: '2g'}, + {text: '3 Gepettos', value: '3g'}, + {text: '4 Gepettos', value: '4g'}, + ], + factCheckerVertical: 0.05, + fontColor: 'black', + fontColorOpts: [ + {text: 'Black', value: 'black'}, + {text: 'White', value: 'white'} + ], + fontFamily: 'PostoniStandard-Regular', + fontFamilyOpts: ['FranklinITCProBold', 'PostoniStandard-Regular', 'PostoniStandard-Bold', 'PostoniStandard-Italic', 'PostoniStandard-Bold_Italic'], + fontSize: 60, fontSizeOpts: [ - {text: 'Small text', value: 14}, - {text: 'Medium text', value: 24}, - {text: 'Large text', value: 36} - ], - - headlineText: 'Write your own headline', // Default headline text. - height: 378, // Canvas rendering height. - imageScale: 1, // Background image scale. - imageSrc: '', // Default background image path. MUST reside on host domain, or use base64 data. - overlayAlpha: 0.5, // Opacity of image overlay. - - // Image overlay color, or blank ('') for no overlay: - overlayColor: '#000', - // Overlay color options: set to empty array to disable overlay options selector. - overlayColorOpts: ['#000', '#777', '#2980b9'], - paddingRatio: 0.05, // Percentage of canvas width to use as edge padding. - - // Text alignment: valid settings are "left", "center", and "right". + {text: 'Medium', value: 50}, + {text: 'Large', value: 60}, + {text: 'Very Large', value: 70} + ], + headlineText: 'Write your text here.', + height: 630, + imageScale: 1, + imageSrc: '', + leading: 1.5, + numberText: '', + numberTextVertical: 0.05, + overlayAlpha: 1.0, + overlayColor: '#00b5bb', + overlayColorOpts: ['#000000', '#FFFFFF','#ffc20e','#94B0Be', '#c4894f','#00b5bb', '#c7aa53'], + paddingRatio: 0.05, + quotes: true, + showCandidate: false, + showCandidateNew: true, + showOlympics: true, + showFactChecker: false, + showLogo: false, + sponsorImage: '<%= image_path("sponsor/netflix.png") %>', textAlign: 'left', - // Text alignment options: set to empty array to disable alignment picker. textAlignOpts: [ - {text: 'Align left', value: 'left'}, - {text: 'Align center', value: 'center'}, - {text: 'Align right', value: 'right'} - ], - - textShadow: false, // Text shadow toggle. - textShadowEdit: true, // Toggles text shadow control within the editor. - watermarkAlpha: 1, // Opacity of watermark image. - watermarkMaxWidthRatio: 0.25, // Maximum allowed width of watermark (percentage of total canvas width). - - // Path to the watermark image source, or blank for no watermark: - // Alternatively, use '<%= asset_data_uri("vox.png") %>' to populate the watermark with base64 data, avoiding Cross-Origin issues. - watermarkSrc: (localStorage && localStorage.getItem('meme_watermark')) || '<%= image_path("vox.png") %>', - - // Watermark image options: set to empty array to disable watermark picker. - // NOTE: only populate the "data" attributes with base64 data when concerned about Cross-Origin requests... - // Otherwise, just leave "data" attributes blank and allow images to load from your server. - watermarkOpts: [ - {text: 'Vox', value: '<%= image_path("vox.png") %>', data: '<%= asset_data_uri("vox.png") %>'}, - {text: 'The Verge', value: '<%= image_path("theverge.png") %>', data: ''} - ], - - width: 755 // Canvas rendering width. -}; \ No newline at end of file + {text: 'Left', value: 'left'}, + {text: 'Center', value: 'center'}, + {text: 'Right', value: 'right'} + ], + textShadow: false, + textShadowEdit: true, + verticalAlign: 0.175, + watermarkAlpha: 1, + watermarkMaxWidthRatio: 0.25, + watermarkSrc: '<%= image_path("wp_logo.png") %>', + watermarkOpts: [], + width: 1200 +}; diff --git a/source/javascripts/views/meme-canvas.js b/source/javascripts/views/meme-canvas.js index b5e0f0e1..f22812af 100644 --- a/source/javascripts/views/meme-canvas.js +++ b/source/javascripts/views/meme-canvas.js @@ -39,11 +39,43 @@ MEME.MemeCanvasView = Backbone.View.extend({ var ctx = this.canvas.getContext('2d'); var padding = Math.round(d.width * d.paddingRatio); + + + // ******************************** + // **** OFFSET FOR SPONSOR BAR **** + // ******************************** + var offset = 0; + + + + // Candidate display + if(!d.showCandidate && !d.showCandidateNew && !d.showOlympics) { + var widerText = true; + } + else { + var widerText = false; + } + // Reset canvas display: this.canvas.width = d.width; this.canvas.height = d.height; ctx.clearRect(0, 0, d.width, d.height); + + + function renderSponsor(ctx) { + ctx.fillStyle = '#000'; + ctx.fillRect(0, 630, 1280, 100); + var source = new Image(); + source.src = d.sponsorImage; + source.onload = function(){ + ctx.drawImage(source,779,649,64 * source.width / source.height,64); + saveData(); + } + } + + + function renderBackground(ctx) { // Base height and width: var bh = m.background.height; @@ -65,7 +97,64 @@ MEME.MemeCanvasView = Backbone.View.extend({ if (d.overlayColor) { ctx.save(); ctx.globalAlpha = d.overlayAlpha; - ctx.fillStyle = d.overlayColor; + + switch(d.overlayColor) { + case 'gradient-left-right': + var grd=ctx.createLinearGradient(d.width,0,0,0); + grd.addColorStop(0,"transparent"); + grd.addColorStop(1,"black"); + ctx.fillStyle=grd; + break; + case 'gradient-right-left': + var grd=ctx.createLinearGradient(d.width,0,0,0); + grd.addColorStop(0,"black"); + grd.addColorStop(1,"transparent"); + ctx.fillStyle=grd; + break; + case 'gradient-top-bottom': + var grd=ctx.createLinearGradient(0,d.height,0,0); + grd.addColorStop(0,"transparent"); + grd.addColorStop(1,"black"); + ctx.fillStyle=grd; + break; + case 'gradient-bottom-top': + var grd=ctx.createLinearGradient(0,d.height,0,0); + grd.addColorStop(0,"black"); + grd.addColorStop(1,"transparent"); + ctx.fillStyle=grd; + break; + case 'gradient-middle-light-vertical': + var grd=ctx.createLinearGradient(0,d.height,0,0); + grd.addColorStop(0,"black"); + grd.addColorStop(0.5,"transparent"); + grd.addColorStop(1,"black"); + ctx.fillStyle=grd; + break; + case 'gradient-middle-dark-vertical': + var grd=ctx.createLinearGradient(0,d.height,0,0); + grd.addColorStop(0,"transparent"); + grd.addColorStop(0.5,"black"); + grd.addColorStop(1,"transparent"); + ctx.fillStyle=grd; + break; + case 'gradient-middle-light-horizontal': + var grd=ctx.createLinearGradient(d.width,0,0,0); + grd.addColorStop(0,"black"); + grd.addColorStop(0.5,"transparent"); + grd.addColorStop(1,"black"); + ctx.fillStyle=grd; + break; + case 'gradient-middle-dark-horizontal': + var grd=ctx.createLinearGradient(d.width,0,0,0); + grd.addColorStop(0,"transparent"); + grd.addColorStop(0.5,"black"); + grd.addColorStop(1,"transparent"); + ctx.fillStyle=grd; + break; + default: + ctx.fillStyle = d.overlayColor; + } + ctx.fillRect(0, 0, d.width, d.height); ctx.globalAlpha = 1; ctx.restore(); @@ -73,7 +162,12 @@ MEME.MemeCanvasView = Backbone.View.extend({ } function renderHeadline(ctx) { - var maxWidth = Math.round(d.width * 0.75); + if(widerText) { + var maxWidth = Math.round(d.width * 0.925); + } + else { + var maxWidth = Math.round(d.width * 0.625); + } var x = padding; var y = padding; @@ -83,46 +177,63 @@ MEME.MemeCanvasView = Backbone.View.extend({ // Text shadow: if (d.textShadow) { - ctx.shadowColor = "#666"; - ctx.shadowOffsetX = -2; + ctx.shadowColor = "#333"; + ctx.shadowOffsetX = 1; ctx.shadowOffsetY = 1; - ctx.shadowBlur = 10; + ctx.shadowBlur = 5; } // Text alignment: if (d.textAlign == 'center') { ctx.textAlign = 'center'; x = d.width / 2; - y = d.height - d.height / 1.5; - maxWidth = d.width - d.width / 3; + maxWidth = Math.round(d.width * 0.925); } else if (d.textAlign == 'right' ) { ctx.textAlign = 'right'; - x = d.width - padding; + x = d.width - padding + 20; } else { ctx.textAlign = 'left'; } - var words = d.headlineText.split(' '); - var line = ''; + // Vertical alignment + y = (d.height-offset) * d.verticalAlign; - for (var n = 0; n < words.length; n++) { - var testLine = line + words[n] + ' '; - var metrics = ctx.measureText( testLine ); - var testWidth = metrics.width; - if (testWidth > maxWidth && n > 0) { - ctx.fillText(line, x, y); - line = words[n] + ' '; - y += Math.round(d.fontSize * 1.5); - } else { - line = testLine; - } + var paragraphs = d.headlineText.split('\n'); + if(d.quotes) { + ctx.fillText('“', x-26, y); } - ctx.fillText(line, x, y); - ctx.shadowColor = 'transparent'; + for (var i = 0; i < paragraphs.length; i++) { + + var words = paragraphs[i].split(' '); + var line = ''; + var startingQuotePlaced = false; + + for (var n = 0; n < words.length; n++) { + var testLine = line + words[n] + ' '; + var metrics = ctx.measureText( testLine ); + var testWidth = metrics.width; + + if (testWidth > maxWidth && n > 0) { + ctx.fillText(convertQuotes(line), x, y); + line = words[n] + ' '; + y += Math.round(d.fontSize * d.leading); + } else { + line = testLine; + } + } + + if(i == paragraphs.length-1 && d.quotes) { + line = line.trim() + '"'; + } + ctx.fillText(convertQuotes(line), x, y); + ctx.shadowColor = 'transparent'; + + y += Math.round(d.fontSize * d.leading); + } } function renderCredit(ctx) { @@ -133,6 +244,48 @@ MEME.MemeCanvasView = Backbone.View.extend({ ctx.fillText(d.creditText, padding, d.height - padding); } + function renderBottomText(ctx) { + ctx.textBaseline = 'bottom'; + ctx.textAlign = 'left'; + ctx.fillStyle = d.fontColor; + ctx.font = 'normal '+d.bottomTextFontSize+'px "FranklinITCProBold"'; + + if (d.textShadow) { + ctx.globalAlpha = d.watermarkAlpha; + ctx.shadowColor = "#333"; + ctx.shadowOffsetX = 1; + ctx.shadowOffsetY = 1; + ctx.shadowBlur = 3; + } + + // First text + ctx.fillText(d.bottomText, padding, d.bottomTextVertical*(d.height-offset)-30); + + // Second text + var firstTextWidth = ctx.measureText(d.bottomText).width; + ctx.font = 'normal '+d.bottomTextFontSize+'px "FranklinITCProThin"'; + ctx.fillText(d.bottomText2, firstTextWidth+padding, d.bottomTextVertical*(d.height-offset)-30); + ctx.shadowColor = 'transparent'; + } + + function renderNumberText(ctx) { + ctx.textBaseline = 'top'; + ctx.textAlign = 'left'; + ctx.fillStyle = d.fontColor; + ctx.font = 'normal 140px "PostoniStandard-Bold_Italic"'; + + if (d.textShadow) { + ctx.globalAlpha = d.watermarkAlpha; + ctx.shadowColor = "#333"; + ctx.shadowOffsetX = 1; + ctx.shadowOffsetY = 1; + ctx.shadowBlur = 5; + } + + ctx.fillText(d.numberText, padding, d.numberTextVertical*(d.height-offset)+40); + ctx.shadowColor = 'transparent'; + } + function renderWatermark(ctx) { // Base & transformed height and width: var bw, bh, tw, th; @@ -149,30 +302,139 @@ MEME.MemeCanvasView = Backbone.View.extend({ tw = mw; } - ctx.globalAlpha = d.watermarkAlpha; - ctx.drawImage(m.watermark, 0, 0, bw, bh, d.width-padding-tw, d.height-padding-th, tw, th); + if (d.textShadow) { + ctx.globalAlpha = d.watermarkAlpha; + ctx.shadowColor = "#333"; + ctx.shadowOffsetX = 1; + ctx.shadowOffsetY = 1; + ctx.shadowBlur = 3; + } + ctx.drawImage(m.watermark, 0, 0, bw, bh, d.width-40-tw, (d.height-offset)-30-th, tw, th); ctx.globalAlpha = 1; + ctx.shadowColor = 'transparent'; + } + } + + function renderCandidate(ctx) { + var source = new Image(); + source.src = d.candidate; + var h = d.candidateSize; + source.onload = function(){ + ctx.drawImage(source,d.candidateHorizontal*d.width,d.candidateVertical*(d.height-offset),d.candidateRatio*h,h); + saveData(); + } + } + + function renderCandidateNew(ctx) { + var source = new Image(); + source.src = d.candidateNew; + source.onload = function(){ + ctx.drawImage(source,d.candidateNewHorizontal*d.width,0); + saveData(); } } + function renderOlympics(ctx) { + var source = new Image(); + source.src = d.olympics; + source.onload = function(){ + ctx.drawImage(source,d.olympicsHorizontal*d.width,0); + saveData(); + } + } + + function renderFactChecker(ctx) { + if(d.factChecker) { + var type = d.factChecker.charAt(1); + var count = d.factChecker.charAt(0); + if(type === 'p') { + var source = new Image(); + source.src = '../../images/pinocchio.svg'; + source.onload = function(){ + for(var i=0; i'; + if(defaultColors.indexOf(color) > -1) { + return memo += '
    • '; + } + else { + return memo += '
    • '; + } }, ''); $('#overlay').show().find('ul').append(overlayOpts); @@ -57,32 +88,444 @@ MEME.MemeEditorView = Backbone.View.extend({ render: function() { var d = this.model.toJSON(); + if(d.showCandidateNew) { + this.$('#show-candidate-new').prop('checked', true) + this.$('#candidate-section-new').show(); + }; + if(d.showCandidate) { + this.$('#show-candidate').prop('checked', true) + this.$('#candidate-section').show(); + }; + if(d.showOlympics) { + this.$('#show-olympics').prop('checked', true) + this.$('#olympics-section').show(); + }; + if(d.showLogo) { + this.$('#show-logo').prop('checked', true) + }; + if(d.showFactChecker) { + this.$('#show-fact-checker').prop('checked', true) + this.$('#fact-checker-section').show(); + }; + this.$('#candidate-new').val(d.candidateNew); + this.$('#candidate').val(d.candidate); + this.$('#olympics').val(d.olympics); + this.$('#candidate-horizontal').val(d.candidateHorizontal); + this.$('#candidate-new-horizontal').val(d.candidateNewHorizontal); + this.$('#candidate-vertical').val(d.candidateVertical); + this.$('#candidate-ratio').val(d.candidateRatio); + this.$('#olympics-horizontal').val(d.olympicsHorizontal); + this.$('#olympics-new-horizontal').val(d.olympicsNewHorizontal); + this.$('#olympics-vertical').val(d.olympicsVertical); + this.$('#olympics-ratio').val(d.olympicsRatio); + this.$('#fact-checker').val(d.factChecker); + this.$('#fact-checker-vertical').val(d.factCheckerVertical); this.$('#headline').val(d.headlineText); this.$('#credit').val(d.creditText); this.$('#watermark').val(d.watermarkSrc); this.$('#image-scale').val(d.imageScale); + this.$('#font-color').val(d.fontColor); this.$('#font-size').val(d.fontSize); this.$('#font-family').val(d.fontFamily); this.$('#text-align').val(d.textAlign); + this.$('#vertical-align').val(d.verticalAlign); + this.$('#leading').val(d.leading); this.$('#text-shadow').prop('checked', d.textShadow); + this.$('#quotes').prop('checked', d.quotes); this.$('#overlay').find('[value="'+d.overlayColor+'"]').prop('checked', true); + this.$('#overlay-opacity').val(d.overlayAlpha); + this.$('#bottom-text').val(d.bottomText); + this.$('#bottom-text-2').val(d.bottomText2); + this.$('#bottom-text-font-size').val(d.bottomTextFontSize); + this.$('#bottom-text-vertical').val(d.bottomTextVertical); + this.$('#number-text').val(d.numberText); + this.$('#number-text-vertical').val(d.numberTextVertical); }, events: { + 'input #candidate-size': 'onCandidateSize', + 'input #candidate-horizontal': 'onCandidateHorizontal', + 'input #candidate-new-horizontal': 'onCandidateNewHorizontal', + 'input #candidate-vertical': 'onCandidateVertical', + 'input #candidate-ratio': 'onCandidateRatio', + 'input #candidate-size': 'onOlympicsSize', + 'input #candidate-horizontal': 'onOlympicsHorizontal', + 'input #candidate-new-horizontal': 'onOlympicsHorizontal', + 'input #candidate-vertical': 'onOlympicsVertical', + 'input #candidate-ratio': 'onOlympicsRatio', 'input #headline': 'onHeadline', 'input #credit': 'onCredit', 'input #image-scale': 'onScale', + 'input #vertical-align': 'onVerticalAlign', + 'input #leading': 'onLeading', + 'input #overlay-opacity': 'onOverlayOpacity', + 'input #bottom-text': 'onBottomText', + 'input #bottom-text-2': 'onBottomText2', + 'input #bottom-text-vertical': 'onBottomTextVertical', + 'input #number-text': 'onNumberText', + 'input #number-text-vertical': 'onNumberTextVertical', + 'input #fact-checker-vertical': 'onFactCheckerVertical', + 'change #preset': 'onPreset', + 'change #candidate': 'onCandidate', + 'change #candidate-new': 'onCandidateNew', + 'change #olympics': 'onOlympics', + 'change #fact-checker': 'onFactChecker', + 'change #font-color': 'onFontColor', 'change #font-size': 'onFontSize', + 'change #bottom-text-font-size': 'onBottomTextFontSize', 'change #font-family': 'onFontFamily', 'change #watermark': 'onWatermark', 'change #text-align': 'onTextAlign', 'change #text-shadow': 'onTextShadow', + 'change #quotes': 'onQuotes', 'change [name="overlay"]': 'onOverlayColor', + 'change #show-candidate': 'onShowCandidate', + 'change #show-candidate-new': 'onShowCandidateNew', + 'change #show-olympics': 'onShowOlympics', + 'change #show-logo': 'onShowLogo', + 'change #show-fact-checker': 'onShowFactChecker', + 'click #image-remove': 'onImageRemove', + 'click .editor-section-title': 'toggleEditorSection', 'dragover #dropzone': 'onZoneOver', 'dragleave #dropzone': 'onZoneOut', 'drop #dropzone': 'onZoneDrop' }, + onPreset: function() { + var preset = this.$('#preset').val(); + var m = this.model; + + switch(preset) { + + // Number Card + case 'number': + this.model.set('showCandidate', false); + this.model.set('showCandidateNew', false); + this.model.set('showOlympics', false); + this.$('#show-candidate').prop('checked', false); + this.$('#show-candidate-new').prop('checked', false); + this.$('#show-olympics').prop('checked', false); + this.$('#candidate-section').hide(); + this.$('#candidate-section-new').hide(); + this.$('#olympics-section').hide(); + + this.model.set('showLogo', true); + this.$('#show-logo').prop('checked', true); + + this.model.set('fontColor', 'white'); + + this.model.set('textShadow', false); + this.$('#text-shadow').prop('checked', false); + + this.$('.extra-color').show(); + this.model.set('overlayColor', '#004b98'); + this.$('#overlay').find('[value="#004b98"]').prop('checked', true); + + this.model.set('quotes', false); + this.$('#quotes').prop('checked', false); + + this.model.set('textAlign', 'left'); + this.$('#text-align').val('left'); + + this.model.set('verticalAlign', 0.35); + this.$('#vertical-align').val(0.35); + + this.model.set('fontFamily', 'PostoniStandard-Regular'); + this.$('#font-family').val('PostoniStandard-Regular'); + + this.model.set('fontSize', 60); + this.$('#font-size').val(60); + + this.model.set('leading', 1.65); + this.$('#leading').val(1.65); + + this.model.set('bottomText', ''); + this.$('#bottom-text').val(''); + + this.model.set('bottomText2', 'SOURCE: CREDIT, CREDIT, CREDIT'); + this.$('#bottom-text-2').val('SOURCE: CREDIT, CREDIT, CREDIT'); + + this.model.set('bottomTextVertical', 1); + this.$('#bottom-text-vertical').val(1); + + this.model.set('bottomTextFontSize', 28); + this.$('#bottom-text-font-size').val(28); + + this.model.set('numberText', '$1.4 million'); + this.$('#number-text').val('$1.4 million'); + + this.model.set('numberTextVertical', 0.05); + this.$('#number-text-vertical').val(0.05); + + this.model.set('factChecker', ''); + this.$('#fact-checker').val(''); + + this.model.set('factCheckerVertical', 0.05); + this.$('#fact-checker-vertical').val(0.05); + + setTimeout(function() { + m.trigger('change', m); + }, 250); + break; + + // Quote Card + case 'quote': + this.model.set('showCandidate', false); + this.model.set('showCandidateNew', false); + this.model.set('showOlympics', false); + this.$('#show-candidate').prop('checked', false); + this.$('#show-candidate-new').prop('checked', false); + this.$('#show-olympics').prop('checked', false); + this.$('#candidate-section').hide(); + this.$('#candidate-section-new').hide(); + this.$('#olympics-section').hide(); + + this.model.set('showLogo', true); + this.$('#show-logo').prop('checked', true); + + this.model.set('fontColor', 'white'); + + this.model.set('textShadow', false); + this.$('#text-shadow').prop('checked', false); + + this.$('.extra-color').show(); + this.model.set('overlayColor', '#004b98'); + this.$('#overlay').find('[value="#004b98"]').prop('checked', true); + + this.model.set('quotes', true); + this.$('#quotes').prop('checked', true); + + this.model.set('textAlign', 'left'); + this.$('#text-align').val('left'); + + this.model.set('verticalAlign', 0.1); + this.$('#vertical-align').val(0.1); + + this.model.set('fontFamily', 'PostoniStandard-Regular'); + this.$('#font-family').val('PostoniStandard-Regular'); + + this.model.set('fontSize', 60); + this.$('#font-size').val(60); + + this.model.set('leading', 1.65); + this.$('#leading').val(1.65); + + this.model.set('bottomText', 'NAME'); + this.$('#bottom-text').val('NAME'); + + this.model.set('bottomText2', ', ATTRIBUTION'); + this.$('#bottom-text-2').val(', ATTRIBUTION'); + + this.model.set('bottomTextVertical', 0.92); + this.$('#bottom-text-vertical').val(0.92); + + this.model.set('bottomTextFontSize', 34); + this.$('#bottom-text-font-size').val(34); + + this.model.set('numberText', ''); + this.$('#number-text').val(''); + + this.model.set('numberTextVertical', 0.05); + this.$('#number-text-vertical').val(0.05); + + this.model.set('factChecker', ''); + this.$('#fact-checker').val(''); + + this.model.set('factCheckerVertical', 0.05); + this.$('#fact-checker-vertical').val(0.05); + + setTimeout(function() { + m.trigger('change', m); + }, 250); + break; + + // Default + default: + this.model.set('showCandidate', false); + this.model.set('showCandidateNew', true); + this.model.set('showOlympics', true); + this.$('#show-candidate').prop('checked', false); + this.$('#show-candidate-new').prop('checked', true); + this.$('#show-olympics').prop('checked', true); + this.$('#candidate-section').hide(); + this.$('#candidate-section-new').show(); + this.$('#olympics-section').show(); + + this.model.set('showLogo', false); + this.$('#show-logo').prop('checked', false); + + this.model.set('fontColor', 'black'); + + this.model.set('textShadow', false); + this.$('#text-shadow').prop('checked', false); + + this.$('.extra-color').hide(); + this.model.set('overlayColor', '#00b5bb'); + this.$('#overlay').find('[value="#00b5bb"]').prop('checked', true); + + this.model.set('candidateSize', 400); + this.$('#candidate-size').val(400); + + this.model.set('candidateHorizontal', 0.71); + this.$('#candidate-horizontal').val(0.71); + + this.model.set('candidateNewHorizontal', 0); + this.$('#candidate-new-horizontal').val(0); + + this.model.set('candidateVertical', 0.125); + this.$('#candidate-vertical').val(0.125); + + this.model.set('olympicsHorizontal', 0); + this.$('#olympics-horizontal').val(0); + + this.model.set('olympicsVertical', 0.125); + this.$('#olympics-vertical').val(0.125); + + this.model.set('quotes', true); + this.$('#quotes').prop('checked', true); + + this.model.set('textAlign', 'left'); + this.$('#text-align').val('left'); + + this.model.set('verticalAlign', 0.175); + this.$('#vertical-align').val(0.175); + + this.model.set('fontFamily', 'PostoniStandard-Regular'); + this.$('#font-family').val('PostoniStandard-Regular'); + + this.model.set('fontSize', 60); + this.$('#font-size').val(60); + + this.model.set('leading', 1.5); + this.$('#leading').val(1.5); + + this.model.set('bottomText', ''); + this.$('#bottom-text').val(''); + + this.model.set('bottomText2', ''); + this.$('#bottom-text-2').val(''); + + this.model.set('bottomTextVertical', 0.9); + this.$('#bottom-text-vertical').val(0.9); + + this.model.set('bottomTextFontSize', 34); + this.$('#bottom-text-font-size').val(34); + + this.model.set('numberText', ''); + this.$('#number-text').val(''); + + this.model.set('numberTextVertical', 0.05); + this.$('#number-text-vertical').val(0.05); + + this.model.set('factChecker', ''); + this.$('#fact-checker').val(''); + + this.model.set('factCheckerVertical', 0.05); + this.$('#fact-checker-vertical').val(0.05); + + setTimeout(function() { + m.trigger('change', m); + }, 250); + } + }, + + onShowCandidate: function() { + var checked = this.$('#show-candidate').prop('checked'); + if(checked) { + this.$('#candidate-section').show(); + } + else { + this.$('#candidate-section').hide(); + } + this.model.set('showCandidate', checked); + }, + + onShowCandidateNew: function() { + var checked = this.$('#show-candidate-new').prop('checked'); + if(checked) { + this.$('#candidate-section-new').show(); + } + else { + this.$('#candidate-section-new').hide(); + } + this.model.set('showCandidateNew', checked); + }, + + onShowOlympics: function() { + var checked = this.$('#show-olympics').prop('checked'); + if(checked) { + this.$('#olympics-section').show(); + } + else { + this.$('#olympics-section').hide(); + } + this.model.set('showOlympics', checked); + }, + + onShowLogo: function() { + var checked = this.$('#show-logo').prop('checked'); + this.model.set('showLogo', checked); + }, + + onShowFactChecker: function() { + var checked = this.$('#show-fact-checker').prop('checked'); + if(checked) { + this.$('#fact-checker-section').show(); + } + else { + this.$('#fact-checker-section').hide(); + } + this.model.set('showFactChecker', checked); + }, + + onCandidate: function() { + this.model.set('candidate', this.$('#candidate').val()); + }, + + onCandidateNew: function() { + this.model.set('candidateNew', this.$('#candidate-new').val()); + }, + + onOlympics: function() { + this.model.set('olympics', this.$('#olympics').val()); + }, + + onCandidateSize: function() { + this.model.set('candidateSize', this.$('#candidate-size').val()); + }, + + onCandidateHorizontal: function() { + this.model.set('candidateHorizontal', this.$('#candidate-horizontal').val()); + }, + + onCandidateNewHorizontal: function() { + this.model.set('candidateNewHorizontal', this.$('#candidate-new-horizontal').val()); + }, + + onCandidateVertical: function() { + this.model.set('candidateVertical', this.$('#candidate-vertical').val()); + }, + + onCandidateRatio: function() { + this.model.set('candidateRatio', this.$('#candidate-ratio').val()); + }, + + onOlympicsSize: function() { + this.model.set('olympicsSize', this.$('#olympics-size').val()); + }, + + onOlympicsHorizontal: function() { + this.model.set('olympicsHorizontal', this.$('#olympics-horizontal').val()); + }, + + onOlympicsVertical: function() { + this.model.set('olympicsVertical', this.$('#olympics-vertical').val()); + }, + + onOlympicsRatio: function() { + this.model.set('olympicsRatio', this.$('#olympics-ratio').val()); + }, + onCredit: function() { this.model.set('creditText', this.$('#credit').val()); }, @@ -95,10 +538,34 @@ MEME.MemeEditorView = Backbone.View.extend({ this.model.set('textAlign', this.$('#text-align').val()); }, + onVerticalAlign: function() { + this.model.set('verticalAlign', this.$('#vertical-align').val()); + }, + + onLeading: function() { + this.model.set('leading', this.$('#leading').val()); + }, + onTextShadow: function() { this.model.set('textShadow', this.$('#text-shadow').prop('checked')); }, + onQuotes: function() { + this.model.set('quotes', this.$('#quotes').prop('checked')); + }, + + onFactChecker: function() { + this.model.set('factChecker', this.$('#fact-checker').val()); + }, + + onFactCheckerVertical: function() { + this.model.set('factCheckerVertical', this.$('#fact-checker-vertical').val()); + }, + + onFontColor: function() { + this.model.set('fontColor', this.$('#font-color').val()); + }, + onFontSize: function() { this.model.set('fontSize', this.$('#font-size').val()); }, @@ -120,6 +587,35 @@ MEME.MemeEditorView = Backbone.View.extend({ this.model.set('overlayColor', this.$(evt.target).val()); }, + onOverlayOpacity: function() { + this.model.set('overlayAlpha', this.$('#overlay-opacity').val()); + }, + + onBottomText: function() { + this.model.set('bottomText', this.$('#bottom-text').val()); + }, + + onBottomText2: function() { + this.model.set('bottomText2', this.$('#bottom-text-2').val()); + }, + + onBottomTextFontSize: function() { + this.model.set('bottomTextFontSize', this.$('#bottom-text-font-size').val()); + }, + + onNumberText: function() { + this.model.set('numberText', this.$('#number-text').val()); + }, + + onNumberTextVertical: function() { + this.model.set('numberTextVertical', this.$('#number-text-vertical').val()); + }, + + onBottomTextVertical: function() { + this.model.set('bottomTextVertical', this.$('#bottom-text-vertical').val()); + console.log(this.$('#bottom-text-vertical').val()); + }, + getDataTransfer: function(evt) { evt.stopPropagation(); evt.preventDefault(); @@ -144,5 +640,21 @@ MEME.MemeEditorView = Backbone.View.extend({ this.model.loadBackground(dataTransfer.files[0]); this.$('#dropzone').removeClass('pulse'); } + }, + + onImageRemove: function(evt) { + evt.preventDefault(); + this.model.initialize(); + }, + + toggleEditorSection: function(evt) { + var self = $(evt.currentTarget); + if(self.hasClass('opened')) { + self.removeClass('opened').addClass('closed'); + } + else { + self.removeClass('closed').addClass('opened'); + } + self.next().slideToggle(250); } -}); \ No newline at end of file +}); diff --git a/source/layouts/layout.erb b/source/layouts/layout.erb index 761ff3f4..87606ba5 100644 --- a/source/layouts/layout.erb +++ b/source/layouts/layout.erb @@ -5,7 +5,7 @@
    -

    Meme Generator

    + <%= partial "partials/editor" %> <%= partial "partials/canvas" %>
    diff --git a/source/partials/_canvas.html.erb b/source/partials/_canvas.html.erb index 0a08b150..f407d046 100644 --- a/source/partials/_canvas.html.erb +++ b/source/partials/_canvas.html.erb @@ -1,8 +1,13 @@ -
    -
    - -
    -

    - Download Image -

    -
    +
    +
    +
    + +
    +

    + Refresh Canvas +

    +

    + Download Image +

    +
    +
    \ No newline at end of file diff --git a/source/partials/_editor.html.erb b/source/partials/_editor.html.erb index 03708220..b5c291ae 100644 --- a/source/partials/_editor.html.erb +++ b/source/partials/_editor.html.erb @@ -1,40 +1,210 @@
    -
    Drop Image Here
    - -

    - - -

    - - - - - - - - -
    - - -
    - - - -

    - - -
    -

    Overlay Color

    + + +

    Global Settings

    +
    + +

    Presets

    + + +
    + + +
    + +
    + + +
    + +
    + + +
    + +
    + + +
    + + +
    + + +
    +

    Candidate Settings

    +
    +

    Candidate

    + +

    Horizontal Position

    + +
    +
    + + +
    +

    Olympics Settings

    +
    +

    Sport

    + +

    Horizontal Position

    + + +

    Horizontal Position

    + + +

    Vertical Position

    + +
    +
    + + +
    +

    Candidate Settings (Old)

    +
    +

    Candidate

    + + + + +

    Image Size

    + + +

    Horizontal Position

    + + +

    Vertical Position

    + +
    +
    + + +

    Background Settings

    +
    +
    +

    Color

    +
      + +
    +
    + + +
    + + + + + +

    Text Settings

    +
    +

    + + +
    + + +
    + +

    Alignment

    + + +

    Vertical Position

    + + +

    Font

    + + +

    Font Color

    + + +

    Font Size

    + + +

    Line Height

    + +
    + + + + + + + + +

    Bottom Text Settings

    +
    +

    + +

    + +

    Font Size

    + +

    Vertical Position

    + +
    + + +

    Number Text Settings

    +
    +

    + +

    Vertical Position

    + +
    + + +

    Fact Checker Settings

    +
    +

    Icons

    + +

    Vertical Position

    +
    diff --git a/source/partials/_head.html.erb b/source/partials/_head.html.erb index 88245d1b..ccf40637 100644 --- a/source/partials/_head.html.erb +++ b/source/partials/_head.html.erb @@ -5,3 +5,4 @@ <%= current_page.data.title %> <%= stylesheet_link_tag "main", {media: false} %> + \ No newline at end of file diff --git a/source/stylesheets/FranklinCompITCStd-Bold.otf b/source/stylesheets/FranklinCompITCStd-Bold.otf new file mode 100644 index 00000000..95c0cd44 Binary files /dev/null and b/source/stylesheets/FranklinCompITCStd-Bold.otf differ diff --git a/source/stylesheets/FranklinCondITCStd-Bold.otf b/source/stylesheets/FranklinCondITCStd-Bold.otf new file mode 100644 index 00000000..598754d6 Binary files /dev/null and b/source/stylesheets/FranklinCondITCStd-Bold.otf differ diff --git a/source/stylesheets/FranklinITCProBold.ttf b/source/stylesheets/FranklinITCProBold.ttf new file mode 100755 index 00000000..aba6756a Binary files /dev/null and b/source/stylesheets/FranklinITCProBold.ttf differ diff --git a/source/stylesheets/FranklinITCProLight.ttf b/source/stylesheets/FranklinITCProLight.ttf new file mode 100755 index 00000000..2e89fbfb Binary files /dev/null and b/source/stylesheets/FranklinITCProLight.ttf differ diff --git a/source/stylesheets/FranklinITCProThin.ttf b/source/stylesheets/FranklinITCProThin.ttf new file mode 100755 index 00000000..efe96ea2 Binary files /dev/null and b/source/stylesheets/FranklinITCProThin.ttf differ diff --git a/source/stylesheets/PostoniStandard-Bold.otf b/source/stylesheets/PostoniStandard-Bold.otf new file mode 100644 index 00000000..6631af25 Binary files /dev/null and b/source/stylesheets/PostoniStandard-Bold.otf differ diff --git a/source/stylesheets/PostoniStandard-Bold_Italic.otf b/source/stylesheets/PostoniStandard-Bold_Italic.otf new file mode 100644 index 00000000..c517da42 Binary files /dev/null and b/source/stylesheets/PostoniStandard-Bold_Italic.otf differ diff --git a/source/stylesheets/PostoniStandard-Italic.otf b/source/stylesheets/PostoniStandard-Italic.otf new file mode 100644 index 00000000..919e8a1b Binary files /dev/null and b/source/stylesheets/PostoniStandard-Italic.otf differ diff --git a/source/stylesheets/PostoniStandard-Regular.otf b/source/stylesheets/PostoniStandard-Regular.otf new file mode 100644 index 00000000..2a15844b Binary files /dev/null and b/source/stylesheets/PostoniStandard-Regular.otf differ diff --git a/source/stylesheets/_fonts.scss b/source/stylesheets/_fonts.scss index 8b137891..0d4858bf 100644 --- a/source/stylesheets/_fonts.scss +++ b/source/stylesheets/_fonts.scss @@ -1 +1,45 @@ +@font-face { + font-family: FranklinITCProBold; + src: url("FranklinITCProBold.ttf") format("opentype"); +} + +@font-face { + font-family: PostoniStandard-Regular; + src: url("PostoniStandard-Regular.otf") format("opentype"); +} + +@font-face { + font-family: PostoniStandard-Bold; + src: url("PostoniStandard-Bold.otf") format("opentype"); +} + +@font-face { + font-family: PostoniStandard-Italic; + src: url("PostoniStandard-Italic.otf") format("opentype"); +} + +@font-face { + font-family: PostoniStandard-Bold_Italic; + src: url("PostoniStandard-Bold_Italic.otf") format("opentype"); +} + +@font-face { + font-family: FranklinITCProLight; + src: url("FranklinITCProLight.ttf") format("opentype"); +} + +@font-face { + font-family: FranklinITCProThin; + src: url("FranklinITCProThin.ttf") format("opentype"); +} + +@font-face { + font-family: FranklinCompITCStd-Bold; + src: url("FranklinCompITCStd-Bold.otf") format("opentype"); +} + +@font-face { + font-family: FranklinCondITCStd-Bold; + src: url("FranklinCondITCStd-Bold.otf") format("opentype"); +} diff --git a/source/stylesheets/modules/_forms.scss b/source/stylesheets/modules/_forms.scss index c510b12d..3e2a16a0 100644 --- a/source/stylesheets/modules/_forms.scss +++ b/source/stylesheets/modules/_forms.scss @@ -6,11 +6,19 @@ form { } select, - textarea, input[type="text"], - input[type="range"], + input[type="range"] { + margin-bottom: 1.25em; + width: 100%; + } + + textarea { + margin-bottom: 0.25em; + width: 100%; + } + .checkbox-group { - margin-bottom: 1.5em; + margin-bottom: 0.75em; width: 100%; } @@ -22,12 +30,13 @@ form { textarea, input[type="text"] { - border: 1px solid #efefef; + border: 1px solid #ccc; outline: 0; padding: 6px 5px; + @include transition (box-shadow ease-in-out 0.1s); &:focus { - border: 1px solid lighten($theme-color, 40); + box-shadow: 0 0 2px lighten($theme-color, 15); } } diff --git a/source/stylesheets/modules/_m-canvas.scss b/source/stylesheets/modules/_m-canvas.scss index b06b1136..cb0c2751 100644 --- a/source/stylesheets/modules/_m-canvas.scss +++ b/source/stylesheets/modules/_m-canvas.scss @@ -1,8 +1,24 @@ $m: '.m-canvas'; +.canvas-wrapper { + position: relative; + width: 66.67%; + + @media screen and (max-width: 700px) { + width: 100%; + } +} + #{$m} { + text-align: center; @media screen and (min-width: 700px) { - width: 70%; + position: fixed; + width: inherit; + max-width: 693px; + } + + @media screen and (max-width: 700px) { + margin-top: 50px; } #{$m}__canvas { @@ -13,7 +29,13 @@ $m: '.m-canvas'; } } - #{$m}__download a { + #{$m}__refresh, + #{$m}__download { + width: 49%; + display: inline-block; + } + + #{$m}__refresh a { background: $theme-color; border: none; border-radius: 5px; @@ -23,10 +45,37 @@ $m: '.m-canvas'; line-height: 50px; text-align: center; text-decoration: none; - @include transition (background-color ease-in-out 0.3s); + @include transition (background-color ease-in-out 0.1s); &:hover { - background: lighten($theme-color, 25); + background: lighten($theme-color, 5); + } + + .fa-refresh { + position: relative; + padding-right: 3px; + } + } + + #{$m}__download a { + background: #4D9E5C; + border: none; + border-radius: 5px; + color: #fff; + display: block; + font-weight: 700; + line-height: 50px; + text-align: center; + text-decoration: none; + @include transition (background-color ease-in-out 0.1s); + + &:hover { + background: lighten(#4D9E5C, 5); + } + + .fa-download { + position: relative; + padding-right: 3px; } } diff --git a/source/stylesheets/modules/_m-editor.scss b/source/stylesheets/modules/_m-editor.scss index 8c8f0a0b..9b551ab1 100644 --- a/source/stylesheets/modules/_m-editor.scss +++ b/source/stylesheets/modules/_m-editor.scss @@ -1,7 +1,7 @@ $m: '.m-editor'; #{$m} { - margin-bottom: 30px; + margin-bottom: -30px; @media screen and (min-width: 700px) { @include box-sizing(border-box); @@ -48,8 +48,71 @@ $m: '.m-editor'; display: none; } + #image-remove { + background: $theme-color; + border: none; + border-radius: 5px; + color: #fff; + font-size: 0.8em; + display: block; + line-height: 35px; + text-align: center; + text-decoration: none; + margin-bottom: 15px; + @include transition (background-color ease-in-out 0.1s); + + &:hover { + background: lighten($theme-color, 5); + } + } + + // Sections + .editor-section-title { + background: #ccc; + margin-bottom: 0; + padding: 5px 10px; + position: relative; + } + .editor-section-title.closed:after { + content: ''; + position: absolute; + width: 0; + height: 0; + border-left: 7px solid transparent; + border-right: 7px solid transparent; + border-top: 7px solid #4c4e4d; + right: 12px; + top: 14px; + } + .editor-section-title.opened:after { + content: ''; + position: absolute; + width: 0; + height: 0; + border-left: 7px solid transparent; + border-right: 7px solid transparent; + border-bottom: 7px solid #4c4e4d; + right: 12px; + top: 14px; + } + .editor-section-title:hover { + cursor: pointer; + } + .editor-section { + background: #efefef; + padding: 15px 20px 10px 20px; + } + #candidate-section, #fact-checker-section { + display: none; + } + + .extra-color { + display: none; + } + #{$m}__overlay { display: none; + margin-bottom: 1em; // Mini-clearfix: &:before, @@ -71,6 +134,7 @@ $m: '.m-editor'; float: left; height: 20px; line-height: 20px; + margin-bottom: 5px; } } } @@ -87,12 +151,95 @@ $m: '.m-editor'; outline: none; text-align: center; width: 30px; + border: 1px solid #333; &:checked:before { - content: 'x'; + content: '\2718'; + position: relative; + top: -1px; color: white; font-size: 18px; - vertical-align: center; + } + + &[value='gradient-left-right'] { + background: -webkit-linear-gradient(left, rgba(0,0,0,1.0), rgba(0,0,0,0.0)); + background: -o-linear-gradient(right, rgba(0,0,0,1.0), rgba(0,0,0,0.0)); + background: -moz-linear-gradient(right, rgba(0,0,0,1.0), rgba(0,0,0,0.0)); + background: linear-gradient(to right, rgba(0,0,0,1.0), rgba(0,0,0,0.0)); + } + &[value='gradient-right-left'] { + background: -webkit-linear-gradient(right, rgba(0,0,0,1.0), rgba(0,0,0,0.0)); + background: -o-linear-gradient(left, rgba(0,0,0,1.0), rgba(0,0,0,0.0)); + background: -moz-linear-gradient(left, rgba(0,0,0,1.0), rgba(0,0,0,0.0)); + background: linear-gradient(to left, rgba(0,0,0,1.0), rgba(0,0,0,0.0)); + } + &[value='gradient-top-bottom'] { + background: -webkit-linear-gradient(rgba(0,0,0,1.0), rgba(0,0,0,0.0)); + background: -o-linear-gradient(rgba(0,0,0,1.0), rgba(0,0,0,0.0)); + background: -moz-linear-gradient(rgba(0,0,0,1.0), rgba(0,0,0,0.0)); + background: linear-gradient(rgba(0,0,0,1.0), rgba(0,0,0,0.0)); + } + &[value='gradient-bottom-top'] { + background: -webkit-linear-gradient(rgba(0,0,0,0.0), rgba(0,0,0,1.0)); + background: -o-linear-gradient(rgba(0,0,0,0.0), rgba(0,0,0,1.0)); + background: -moz-linear-gradient(rgba(0,0,0,0.0), rgba(0,0,0,1.0)); + background: linear-gradient(rgba(0,0,0,0.0), rgba(0,0,0,1.0)); + } + &[value='gradient-middle-light-vertical'] { + background: -webkit-linear-gradient(rgba(0,0,0,1.0), rgba(0,0,0,0.0), rgba(0,0,0,1.0)); + background: -o-linear-gradient(rgba(0,0,0,1.0), rgba(0,0,0,0.0), rgba(0,0,0,1.0)); + background: -moz-linear-gradient(rgba(0,0,0,1.0), rgba(0,0,0,0.0), rgba(0,0,0,1.0)); + background: linear-gradient(rgba(0,0,0,1.0), rgba(0,0,0,0.0), rgba(0,0,0,1.0)); + } + &[value='gradient-middle-dark-vertical'] { + background: -webkit-linear-gradient(rgba(0,0,0,0.0), rgba(0,0,0,1.0), rgba(0,0,0,0.0)); + background: -o-linear-gradient(rgba(0,0,0,0.0), rgba(0,0,0,1.0), rgba(0,0,0,0.0)); + background: -moz-linear-gradient(rgba(0,0,0,0.0), rgba(0,0,0,1.0), rgba(0,0,0,0.0)); + background: linear-gradient(rgba(0,0,0,0.0), rgba(0,0,0,1.0), rgba(0,0,0,0.0)); + } + &[value='gradient-middle-light-horizontal'] { + background: -webkit-linear-gradient(left, rgba(0,0,0,1.0), rgba(0,0,0,0.0), rgba(0,0,0,1.0)); + background: -o-linear-gradient(right, rgba(0,0,0,1.0), rgba(0,0,0,0.0), rgba(0,0,0,1.0)); + background: -moz-linear-gradient(right, rgba(0,0,0,1.0), rgba(0,0,0,0.0), rgba(0,0,0,1.0)); + background: linear-gradient(to right, rgba(0,0,0,1.0), rgba(0,0,0,0.0), rgba(0,0,0,1.0)); + } + &[value='gradient-middle-dark-horizontal'] { + background: -webkit-linear-gradient(left, rgba(0,0,0,0.0), rgba(0,0,0,1.0), rgba(0,0,0,0.0)); + background: -o-linear-gradient(right, rgba(0,0,0,0.0), rgba(0,0,0,1.0), rgba(0,0,0,0.0)); + background: -moz-linear-gradient(right, rgba(0,0,0,0.0), rgba(0,0,0,1.0), rgba(0,0,0,0.0)); + background: linear-gradient(to right, rgba(0,0,0,0.0), rgba(0,0,0,1.0), rgba(0,0,0,0.0)); + } + } + + #{$m}__score { + margin-bottom: 1em; + + // Mini-clearfix: + &:before, + &:after { + content: " "; + display: table; + } + &:after { + clear: both; + } + + ul { + list-style: none; + margin: 0; + padding: 0; + + label { + display: block; + float: left; + height: 20px; + line-height: 20px; + margin-right: 10px; + + i { + font-size: 16px; + } + } } } } diff --git a/source/stylesheets/modules/_m-meme.scss b/source/stylesheets/modules/_m-meme.scss index 591fd523..fa99e1ae 100644 --- a/source/stylesheets/modules/_m-meme.scss +++ b/source/stylesheets/modules/_m-meme.scss @@ -8,6 +8,7 @@ body { #{$m} { margin: 20px auto 50px; max-width: 990px; + position: relative; // Mini-clearfix: &:before,