From 30c8cbf7cdd7df5984124c5505db0a40b0e6de42 Mon Sep 17 00:00:00 2001 From: enterteg Date: Thu, 24 Mar 2016 11:29:50 +0100 Subject: [PATCH] added WYSIWYG --- Gemfile | 2 +- Gemfile.lock | 3 ++ app/assets/javascripts/application.js | 1 + app/assets/javascripts/posts.coffee.erb | 14 ++++++- app/assets/stylesheets/application.css | 1 + app/assets/stylesheets/posts.sass | 29 ++++++++------- app/assets/stylesheets/public.sass | 49 +++++++++++++------------ app/views/partials/_map.html.haml | 4 -- app/views/posts/_form.html.haml | 2 +- app/views/public/index.html.haml | 1 - config/locales/en.bootstrap.yml | 23 ++++++++++++ 11 files changed, 82 insertions(+), 47 deletions(-) delete mode 100644 app/views/partials/_map.html.haml create mode 100644 config/locales/en.bootstrap.yml diff --git a/Gemfile b/Gemfile index 1931ea5..a557d67 100644 --- a/Gemfile +++ b/Gemfile @@ -29,7 +29,7 @@ gem 'paperclip', '~> 4.3', '>= 4.3.6' # Use Unicorn as the app server # gem 'unicorn' gem 'puma' - +gem 'tinymce-rails' # Use Capistrano for deployment # gem 'capistrano-rails', group: :development diff --git a/Gemfile.lock b/Gemfile.lock index dff63a7..d312a20 100644 --- a/Gemfile.lock +++ b/Gemfile.lock @@ -140,6 +140,8 @@ GEM thor (0.19.1) thread_safe (0.3.5) tilt (2.0.2) + tinymce-rails (4.3.8) + railties (>= 3.1.1) turbolinks (2.5.3) coffee-rails tzinfo (1.2.2) @@ -170,6 +172,7 @@ DEPENDENCIES sdoc (~> 0.4.0) spring sqlite3 + tinymce-rails turbolinks uglifier (>= 1.3.0) web-console (~> 2.0) diff --git a/app/assets/javascripts/application.js b/app/assets/javascripts/application.js index e07c5a8..8809ba9 100644 --- a/app/assets/javascripts/application.js +++ b/app/assets/javascripts/application.js @@ -13,4 +13,5 @@ //= require jquery //= require jquery_ujs //= require turbolinks +//= require tinymce //= require_tree . diff --git a/app/assets/javascripts/posts.coffee.erb b/app/assets/javascripts/posts.coffee.erb index 3847f5e..28ce564 100644 --- a/app/assets/javascripts/posts.coffee.erb +++ b/app/assets/javascripts/posts.coffee.erb @@ -37,6 +37,11 @@ add_pin = (x, y) -> $ -> + tinyMCE.init { + selector: 'textarea#post_desc', + content_css : '<%= asset_path 'public.sass'%>' + } + $('#map_form').hide() if( $('#post_category_id option:selected').val() == '1' ) $('#map_form').fadeIn() @@ -54,6 +59,11 @@ $ -> $(document).on 'page:load', -> $('#map_form').hide() + tinyMCE.init { + selector: 'textarea#post_desc', + content_css : '<%= asset_path 'public.sass'%>' + } + - - +$(document).on 'page:receive', -> + tinymce.remove() diff --git a/app/assets/stylesheets/application.css b/app/assets/stylesheets/application.css index f9cd5b3..0bf2e9f 100644 --- a/app/assets/stylesheets/application.css +++ b/app/assets/stylesheets/application.css @@ -13,3 +13,4 @@ *= require_tree . *= require_self */ + diff --git a/app/assets/stylesheets/posts.sass b/app/assets/stylesheets/posts.sass index c6fb122..afd3f3b 100644 --- a/app/assets/stylesheets/posts.sass +++ b/app/assets/stylesheets/posts.sass @@ -1,9 +1,7 @@ @import 'mixins' - - //--------- form styles #new_post - max-width: 600px + max-width: 700px margin: 50px auto .submit text-align: center @@ -11,22 +9,27 @@ &[type="submit"] margin: 0 auto padding: 10px 20px - background: rgba(200,50,200,0.35) - outline: none - font-size: 1.3rem + background: white + color: rgba(150,50,150,0.75) + outline: 1px solid rgba(150,50,150,0.35) + font-size: 1.6rem font-family: 'Roboto' border: none - color: white cursor: pointer - font-weight: bold +transition(0.2s ease all) &:hover + color: white background: rgba(200,50,200,0.5) .input margin: 20px 0px display: flex flex-direction: column + #mceu_28 + #post_desc_ifr + body#tinymce + font-size: 30px .upload + float: left text-align: center width: 90px line-height: 35px @@ -52,9 +55,7 @@ input flex-grow: 1 padding: 10px - &[type="submit"] - padding: 20px - color: red + &[type="file"] display: block width: 90px @@ -63,15 +64,15 @@ top: 0px left: 0px position: absolute - background-color: red cursor: pointer label + font-size: 1.2rem margin: 10px 0px textarea height: 400px resize: vertical - padding: 20px + padding: 10px input, textarea, select font-family: 'Roboto' font-size: 1rem @@ -79,7 +80,7 @@ outline: 2px solid rgba(250,0,250,0.1) - + //--------- map styles diff --git a/app/assets/stylesheets/public.sass b/app/assets/stylesheets/public.sass index c67a57a..00b7842 100644 --- a/app/assets/stylesheets/public.sass +++ b/app/assets/stylesheets/public.sass @@ -7,6 +7,11 @@ body padding: 0 font-family: 'Roboto', sans-serif font-size: 16px +body#tinymce + padding: 10px + padding-top: 0px + font-family: 'Roboto', sans-serif + font-weight: 100 .container max-width: 1000px margin: 0 auto @@ -24,7 +29,7 @@ body float: left margin: 0px 15px ul - color: rgba(250,20,250,1) + color: rgba(100,20,150,0.5) padding: 0px margin: 0px line-height: $top_menu_height @@ -45,8 +50,17 @@ body .admin float: right line-height: $top_menu_height - - + .logout + background: none + color: rgba(0,0,0,0.7) + padding: 5px + outline: none + font-weight: 100 + &:hover + color: black + border-bottom: 2px solid rgba(200,50,200,0.5) + .stats + .social float: right @@ -124,27 +138,14 @@ section .button - letter-spacing: 0.5px - border-radius: 7px - margin-left: 5px - padding: 9px 15px text-decoration: none - color: #333 - +transition(0.3s ease all) - background-color: rgba(150,0,150,0.2) + margin-left: 5px + padding: 8px 18px + color: rgba(150,50,150,0.8) + font-size: 1.1rem + cursor: pointer + +transition(0.2s ease all) + outline: 1px solid rgba(200,50,200,0.2) &:hover color: white - background-color: rgba(140,0,150,0.3) - &.logout - color: black - outline: none - font-weight: 100 - background-color: transparent - padding: 0px - font-size: 0.9e - padding: 5px 10px - border-bottom: 1px solid white - border-top: 1px solid white - &:hover - border-bottom: 1px solid #ccc - border-top: 1px solid #ccc \ No newline at end of file + background: rgba(200,50,200,0.4) \ No newline at end of file diff --git a/app/views/partials/_map.html.haml b/app/views/partials/_map.html.haml deleted file mode 100644 index 8ab04ca..0000000 --- a/app/views/partials/_map.html.haml +++ /dev/null @@ -1,4 +0,0 @@ -#map_form - #refresh_pin_button Resetuj flage - #map_photo - = image_tag 'map.jpg' \ No newline at end of file diff --git a/app/views/posts/_form.html.haml b/app/views/posts/_form.html.haml index 7ea19d7..f8e84b7 100644 --- a/app/views/posts/_form.html.haml +++ b/app/views/posts/_form.html.haml @@ -12,7 +12,7 @@ = f.text_field :title .input = f.label :desc, 'Content' - = f.text_area :desc + = f.text_area :desc, class: "tinymce" .input = label_tag :photos, 'Photos' .upload diff --git a/app/views/public/index.html.haml b/app/views/public/index.html.haml index 1f48eb7..56cba0c 100644 --- a/app/views/public/index.html.haml +++ b/app/views/public/index.html.haml @@ -8,4 +8,3 @@ %br/ %br/ Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. - =render 'partials/map' \ No newline at end of file diff --git a/config/locales/en.bootstrap.yml b/config/locales/en.bootstrap.yml new file mode 100644 index 0000000..8d75119 --- /dev/null +++ b/config/locales/en.bootstrap.yml @@ -0,0 +1,23 @@ +# Sample localization file for English. Add more files in this directory for other locales. +# See https://github.com/svenfuchs/rails-i18n/tree/master/rails%2Flocale for starting points. + +en: + breadcrumbs: + application: + root: "Index" + pages: + pages: "Pages" + helpers: + actions: "Actions" + links: + back: "Back" + cancel: "Cancel" + confirm: "Are you sure?" + destroy: "Delete" + new: "New" + edit: "Edit" + titles: + edit: "Edit %{model}" + save: "Save %{model}" + new: "New %{model}" + delete: "Delete %{model}"