bike/BikeBikeBike
1
0
Fork 0
Code Issues 5 Pull Requests Projects Releases Wiki Activity

Replaced Pen with Quill and removed dead CSS rules

Browse Source
This commit is contained in:
Godwin
2017-04-17 22:16:14 -07:00
parent dbea0e3bbc
commit aba8635eb9
26 changed files with 14764 additions and 2121 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/assets/javascripts/editor.js
+12 -33
View File
@@ -1,42 +1,21 @@
(function() {
var pens = {};
Array.prototype.forEach.call(document.querySelectorAll('.textarea'), function(editor) {
var event= editor.dataset.editOn;
if (event == 'load') {
startEditing(editor);
} else {
editor.addEventListener(event, function() {
if (editor.getAttribute('contenteditable') !== 'true') {
startEditing(editor);
// for content editable, we need to refocus to show the caret
editor.blur();
editor.focus();
}
});
}
Array.prototype.forEach.call(document.querySelectorAll('.textarea .editor'), function(editor) {
startEditing(editor);
});
function startEditing(editor) {
var name = editor.dataset.name;
pens[name] = new Pen({
editor: editor,
class: 'pen',
textarea: '<textarea name="' + name + '"></textarea>',
list: ['p', 'h1', 'h2', 'blockquote', 'insertorderedlist', 'insertunorderedlist', 'bold', 'italic', 'underline', 'strikethrough', 'createlink', 'insertimage'],
title: {
'p': 'Paragraph',
'h1': 'Major Heading',
'h2': 'Minor Heading',
'blockquote': 'Quotation',
'insertorderedlist': 'Ordered List',
'insertunorderedlist': 'Unordered List',
'bold': 'Bold',
'italic': 'Italic',
'underline': 'Underline',
'strikethrough': 'Strikethrough',
'createlink': 'Link',
'insertimage': 'Image'
pens[name] = new Quill(editor, {
theme: 'snow',
modules: {
toolbar: [
[{ 'header': [1, 2, false] }],
['bold', 'italic', 'underline', 'strike'],
[{ 'script': 'sub'}, { 'script': 'super' }],
[{ 'list': 'ordered'}, { 'list': 'bullet' }, 'blockquote']
]
}
});
return pens[name];
@@ -57,7 +36,7 @@
textarea.style.display = 'none';
form.appendChild(textarea);
}
textarea.value = editor.innerHTML;
textarea.value = editor.getElementsByClassName('ql-editor')[0].innerHTML;
if (pens[name]) {
pens[name].destroy();
}
app/assets/stylesheets/81e17772-eb6a-4fb4-9f70-3b1fa843c198.dmp
BIN
View File
Binary file not shown.
app/assets/stylesheets/_admin.scss
+1627
View File
File diff suppressed because it is too large Load Diff
app/assets/stylesheets/_application.scss
+33 -1567
View File
File diff suppressed because it is too large Load Diff
app/assets/stylesheets/_settings.scss
+1 -33
View File
@@ -1,10 +1,6 @@
$sidebar-width: 0;
// $colour-1: #00ADEF;
// $colour-2: #FF015B;
// $colour-3: #E6C229;
// $colour-4: #F17105;
// $colour-5: #8EA604;
$zindex-base: 0;
$colour-1: #00ADEF; // blue
$colour-2: #EF57B4; // #DD57EF; // pink
@@ -17,7 +13,6 @@ $black: #333;
$gray: #E8E8E8;
$light-gray: #EEE;
$mid-gray: #888;
// $red: #B24C63;
$red: #FF5A5F;
$blue: $colour-1;
@@ -130,34 +125,7 @@ $link-colour: darken($colour-1, 13%);
background-color: rgba(0,0,0,0);
@include _(transition, background-color 150ms ease-in-out);
}
/*@include before-and-after {
content: '';
position: absolute;
display: block;
top: 0;
right: 100%;
font-size: 1.15em;
background-color: rgba(0, 0, 0, 0);
border-color: transparent;
@include _(transition, all 250ms ease-in-out);
}
@include before {
height: 100%;
width: 100%;
margin-right: 1em;
}
@include after {
border-style: solid;
border-width: 1em 0 1em 1em;
}*/
/*&:hover,
&:focus {
@include before-and-after {
right: -1em;
border-left-color: rgba(0, 0, 0, 0.15);
}
}*/
&:hover,
&:focus {
@include before {
app/assets/stylesheets/_translations.scss
-439
View File
@@ -1,439 +0,0 @@
$bumbleberry-no-markup: true;
@import "bumbleberry";
@import "settings";
@include monospace-font;
.translation-list {
list-style: none;
padding: 0;
text-align: center;
@include clearfix;
li {
display: inline-block;
width: 25%;
padding: 1em;
min-width: 10em;
}
a {
display: block;
position: relative;
height: 7em;
border: 0.1em solid #DDD;
color: inherit;
overflow: hidden;
@include _(border-radius, 0.25em);
@include default-box-shadow(top, 2);
@include _(transform, scale(1));
@include _(transition, transform 100ms ease-in-out);
&:hover,
&:focus {
@include _(transform, scale(1.125));
}
&:active {
@include _(transform, scale(1.25));
}
&:after {
display: none;
}
}
.locale-name {
font-size: 1.25em;
padding: 0.5em 0;
background-color: $colour-2;
color: #EEE;
@include font-family(secondary);
}
.locale-completion {
font-size: 2em;
@include font-family(monospace);
letter-spacing: -0.15em;
}
&.enabled-translations {
.locale-name {
background-color: $colour-5;
}
}
}
#lingua-franca-translation-form {
padding: rems(1) 7.5%;
@include default-box-shadow(bottom, 2);
max-width: 100%;
/*button[type="submit"] {
position: absolute;
right: 7.5%;
top: 1em;
@include _(opacity, 1);
@include _(transition, opacity 250ms ease-in-out);
&:disabled {
cursor: default;
@include _(opacity, 0);
}
}*/
}
#lingua-franca-translation-form h2,
#translation-value,
.variables button {
@include font-family(monospace);
}
#translation-value {
border: 1px solid #CCC;
outline: none;
padding: 1em 1.75em;
color: $colour-3;
background-color: #333;
position: relative;
input {
border: 0;
background-color: transparent;
padding: 0;
margin: 0;
font-weight: bold;
color: $colour-1;
&.special {
color: $colour-4;
}
}
}
#translation-control-variables {
background-color: #CCC;
padding: 0.25em;
min-height: 2.9em;
strong {
float: left;
padding: 0.25em 0.5em;
}
.variables {
font-weight: bold;
em {
line-height: 1.75em;
}
button {
top: auto;
right: auto;
position: relative;
border-radius: 0.25em;
font-size: 0.65em;
margin-bottom: 1em;
vertical-align: sub;
@include _(text-stroke, 0);
&.special {
background-color: $colour-4;
}
}
}
}
#lingua-franca-translation-form .enable-translation {
display: none;
}
#lingua-franca-translation-form.optional .enable-translation {
display: block;
}
#lingua-franca-translation-form.optional.enabled .uses-default-value {
display: none;
}
#lingua-franca-translation-form.optional.disabled .uses-custom-value,
#lingua-franca-translation-form.optional.disabled .translation-control {
display: none;
}
#lingua-franca-keys {
width: 100%;
overflow: hidden;
margin-bottom: 100%;
background-color: transparent;
@include _(box-shadow, none);
th {
text-align: left;
&, td {
@include font-family(monospace);
}
}
td a {
color: inherit;
@include _(opacity, 0.85);
}
.variable {
color: $colour-1;
font-weight: bold;
&.special {
color: $colour-4;
}
}
.parent-keys span {
color: transparent;
width: 1em;
display: inline-block;
}
a {
display: block;
&:after {
display: none;
}
}
tr.selectable-key:hover {
background-color: $colour-1;
a {
color: $white;
.variable {
color: inherit;
}
}
}
.lingua-franca-value {
display: none;
}
}
@include breakpoint(medium) {
#lingua-franca-keys {
.lingua-franca-value {
display: table-cell;
}
}
.lingua-franca-navigation {
ul {
padding: 0;
list-style: none;
font-weight: normal;
@include font-family(secondary);
ul {
margin-left: 1em;
margin-bottom: 1em;
@include font-family(primary);
}
}
.current {
@include before {
content: '';
display: block;
position: absolute;
width: 0;
height: 0;
left: -1.5em;
top: 0.6667em;
border-width: 1em 0 1em 1em;
border-color: transparent transparent transparent #333;
border-style: solid;
font-size: 0.25em;
}
}
}
}
@include breakpoint(large) {
#lingua-franca-keys {
margin-bottom: 0;
}
#lingua-franca-translation-form {
position: relative;
padding: 1rem 7.5%;
background-color: $white;
@include default-box-shadow(top, 2);
}
}
.lingua-franca-translations {
position: relative;
@include default-box-shadow(top, 2);
}
.lingua-franca-translations {
.translation-examples, #lingua-franca-translation-history {
padding: 0 7.5%;
padding-bottom: 0.5vh;
}
}
html #lingua-franca-translation-form {
@include _(box-shadow, none);
}
.lingua-franca-translations .translation-examples ul {
list-style: none;
padding: 0;
white-space: nowrap;
overflow-x: auto;
overflow-y: hidden;
width: 100%;
height: 6vh;
padding-top: 0.25em;
z-index: 1;
margin: 0;
}
.lingua-franca-translations .translation-examples li {
display: inline-block;
position: relative;
width: 5vw;
height: 5vh;
margin: 0 0.5em;
@include after {
content: '';
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
cursor: pointer;
outline: 0.25em solid rgba($colour-2, 0.25);
background-color: rgba($colour-2, 0.25);
outline-color: rgba($colour-2, 0.25);
@include _(transition, '#{background-color, outline-color 250ms, 250ms ease-in-out, ease-in-out}');
}
iframe {
@include _(transform, scale(0.05) translate(-950vw, -950vh));
width: 100vw;
height: 100vh;
@include _(transform-origin, 50% 50%);
//@include _(transition, '#{transform, position, z-index 250ms, 250ms, 0 ease-in-out, ease-in-out, linear 0, 250ms, 0}');
position: fixed;
margin: auto
}
&:hover {
@include after {
background-color: rgba($colour-3, 0);
outline-color: rgba($colour-3, 0.5);
}
}
&.open {
iframe {
top: 0;
left: 0;
z-index: 100;
//margin: auto;
@include _(transform, scale(0.75) translate(0, 0));
@include default-box-shadow(top, 2);
//@include breakpoint(large) {
// left: 8.75rem;
//}
}
@include after {
left: 0;
top: 0;
right: 0;
bottom: 0;
background-color: rgba($colour-3, 0.5);
position: fixed;
z-index: 99;
}
}
@include breakpoint(large) {
&.open {
iframe {
width: 100%;
height: 100%;
@include _(transform, scale(0.9) translate(0, 0));
}
}
}
}
.highlight-key {
outline: 3rem solid rgba($colour-2, 0.5);
}
#lingua-franca-translation-form button[type="submit"] {
margin-right: 0.25em;
}
#lingua-franca-keys .translation-history {
display: none;
}
#lingua-franca-translation-history .translation-diff-info,
#lingua-franca-translation-history .diff {
@include clearfix;
}
#lingua-franca-translation-history .diff ul {
list-style: none;
padding: 0;
}
#lingua-franca-translation-history .translation-diff-info li {
margin-bottom: 0.5em;
font-style: italic;
}
#lingua-franca-translation-history .translation-diff-info li,
#lingua-franca-translation-history .diff li {
width: 50%;
display: inline-block;
float: left;
}
#lingua-franca-keys td a .undefined {
font-style: italic;
color: #888;
}
.lingua-franca-translations {
position: fixed;
z-index: -2;
top: 0;
right: 0;
bottom: 0;
left: 0;
height: 100%;
background-color: $white;
@include _(transform, scale(0));
$transition-time: 250ms;
@include _(transition, #{transform $transition-time ease-in-out, z-index 0ms linear $transition-time});
&.editing {
z-index: 98;
@include _(transform, scale(1));
@include _(transition, transform $transition-time ease-in-out);
}
}
.actions {
margin-top: 1em;
}
app/assets/stylesheets/bumbleberry-settings.json
+1 -1
View File
@@ -1,5 +1,5 @@
{
"stylesheets": ["application", "editor"],
"stylesheets": ["application", "editor", "admin"],
"precompile": {
"test": {
"safari": ["5"],
app/assets/stylesheets/font-awesome.min.css
Vendored
-4
View File
File diff suppressed because one or more lines are too long
app/controllers/application_controller.rb
+2 -2
View File
@@ -41,11 +41,11 @@ class ApplicationController < BaseController
@conference = @conferences.first
# add some style sheets
@stylesheets ||= Array.new
@stylesheets ||= Set.new
# add the translations stylesheet if translating
@stylesheets << params[:controller] if params[:controller] == 'translations'
@_inline_scripts ||= []
@_inline_scripts ||= Set.new
@_inline_scripts << Rails.application.assets.find_asset('main.js').to_s
ActionMailer::Base.default_url_options = {
app/helpers/form_helper.rb
+9 -9
View File
@@ -150,24 +150,24 @@ module FormHelper
html_name = name.to_s + (options[:index] ? "[#{options[:index]}]" : '')
if options[:plain]
html += (text_area_tag html_name, value,
id: id,
lang: options[:lang],
aria: aria,
class: css_class
id: id,
lang: options[:lang],
aria: aria,
class: css_class
)
else
html += content_tag(:div, value.present? ? value.html_safe : '',
html += content_tag(:div,
content_tag(:div, (value || '').html_safe, class: :editor).html_safe,
id: id,
data: { name: html_name, 'edit-on': options[:edit_on] || :load },
data: { name: html_name },
lang: options[:lang],
aria: aria,
tabindex: 0,
class: [:textarea] + css_class
)
add_stylesheet :editor
add_inline_script :pen
add_inline_script :markdown
add_stylesheet 'quill.css'
add_javascript :quill
add_inline_script :editor
end
app/helpers/i18n_helper.rb
+20 -12
View File
@@ -2,24 +2,32 @@
module I18nHelper
def url_for_locale(locale, url = nil)
return url unless locale.present?
unless url.present?
new_params = params.merge({action: (params[:_original_action] || params[:action])})
new_params.delete(:_original_action)
if Rails.env.development? || Rails.env.test?
return url_for(new_params.merge({lang: locale.to_s}))
end
subdomain = Rails.env.preview? ? "preview-#{locale.to_s}" : locale.to_s
return url_for(new_params.merge(host: "#{subdomain}.bikebike.org"))
end
url ||= current_path
return url if Rails.env.development? || Rails.env.test?
return "https://preview-#{locale.to_s}.bikebike.org#{url}" if Rails.env.preview?
"https://#{locale.to_s}.bikebike.org#{url}"
end
def current_path
new_params = params.merge({action: (params[:_original_action] || params[:action])})
new_params.delete(:_original_action)
if Rails.env.development? || Rails.env.test?
return url_for(new_params.merge({lang: locale.to_s}))
end
subdomain = Rails.env.preview? ? "preview-#{locale.to_s}" : locale.to_s
url_for(new_params.merge(host: "#{subdomain}.bikebike.org"))
end
def canonical_url
url = current_path
return url if Rails.env.development? || Rails.env.test?
return "https://preview.bikebike.org#{url}" if Rails.env.preview?
"https://bikebike.org#{url}"
end
def date(date, format = :long)
I18n.l(date.is_a?(String) ? Date.parse(date) : date, :format => format)
end
app/helpers/page_helper.rb
+19 -6
View File
@@ -24,8 +24,8 @@ module PageHelper
end
def add_stylesheet(sheet)
@stylesheets ||= []
@stylesheets << sheet unless @stylesheets.include?(sheet)
@stylesheets ||= Set.new
@stylesheets << sheet
end
def stylesheets
@@ -35,22 +35,35 @@ module PageHelper
end
(@stylesheets || []).each do |css|
Rack::MiniProfiler.step("inject_css #{css}") do
html += inject_css! css.to_s
if css =~ /\.css$/
html += stylesheet_link_tag css
else
html += inject_css! css.to_s
end
end
end
html += stylesheet_link_tag 'i18n-debug' if request.params['i18nDebug']
return html.html_safe
end
def add_javascript(script)
@javascripts ||= Set.new
@javascripts << script
end
def javascripts
(@javascripts || []).map { |js| javascript_include_tag js.to_s }.join.html_safe
end
def add_inline_script(script)
@_inline_scripts ||= []
@_inline_scripts ||= Set.new
script = Rails.application.assets.find_asset("#{script.to_s}.js").to_s
@_inline_scripts << script unless @_inline_scripts.include?(script)
@_inline_scripts << script
end
def inline_scripts
return '' unless @_inline_scripts.present?
"<script>#{@_inline_scripts.join("\n")}</script>".html_safe
javascript_tag @_inline_scripts.to_a.join("\n").html_safe
end
def dom_ready(&block)
app/views/conference_administration/administration.html.haml
+1
View File
@@ -1,4 +1,5 @@
- body_class 'banner-bottom' unless @this_conference.poster.present?
- add_stylesheet :admin
- content_for :banner do
= render :partial => 'application/header', :locals => { page_group: :administration, page_key: 'Administration', image_file: @this_conference.poster_url || 'admin.jpg'}
app/views/conference_administration/administration_step.html.haml
+1
View File
@@ -1,4 +1,5 @@
- body_class 'banner-bottom' unless @this_conference.poster.present?
- add_stylesheet :admin
- content_for :banner do
= render :partial => 'application/header', :locals => { page_group: :administration, page_key: 'Administration', image_file: @this_conference.poster_url || 'admin.jpg'}
app/views/layouts/application.html.haml
+2
View File
@@ -12,6 +12,7 @@
%link{ href: asset_path(@favicon), rel: 'icon', type: 'image/x-icon' }
- @alt_lang_urls.each do |locale, url|
%link{ rel: :alternate, hreflang: locale, href: url }
%link{ href: canonical_url, rel: :canonical }
- if content_for?(:og_image)
- og_image = yield :og_image
- og_image = request.base_url + og_image
@@ -80,5 +81,6 @@
%a.more-details.button{href: '#'}=_'articles.workshops.info.read_more'
%button.close-btn.subdued=_'forms.actions.generic.close'
= yield :footer_scripts if content_for?(:footer_scripts)
= javascripts
= inline_scripts
= emit_js_translations