Skip to content
Browse files

Bug 729657 - wiki translate page

  • Loading branch information...
1 parent b74abcc commit 52b0d4e0803a525668278621674cc115610446fe @craigcook committed Apr 16, 2012
View
8 apps/wiki/templates/wiki/ckeditor_config.js
@@ -45,5 +45,13 @@ CKEDITOR.editorConfig = function(config) {
config.startupFocus = true;
config.toolbar = 'MDN';
+ config.autoGrow_minHeight = 600;
+ config.contentsCss = '/media/css/wiki-edcontent.css';
+ config.toolbarCanCollapse = false;
+ config.resize_enabled = false;
+ config.dialog_backgroundCoverColor = 'black';
+ config.dialog_backgroundCoverOpacity = 0.3;
+ config.docType = '<!DOCTYPE html>';
+
{{ editor_config|safe }}
};
View
158 apps/wiki/templates/wiki/translate.html
@@ -15,36 +15,41 @@
<section id="content">
<div class="wrap">
<div id="content-main" class="full">
- <article id="localize-document">
- <h1>{{ _('Translating {title}')|f(title=parent.title) }}</h1>
- <div class="change-locale">
- <p>
+
+ <div id="localize-document" class="editing">
+ <header id="article-head">
+ <div class="title">
+ <h1>{{ _('Translating <em>{title}</em>')|fe(title=parent.title) }}</h1>
+ </div>
+
+ <div class="change-locale">
{{ _('Translating article to {locale}' )|f(locale=language) }}.
- <a id="change-locale-link" class="change" href="#change-locale">{{ _('Change') }}</a>
- </p>
- {% if not based_on.reviewed or not based_on.is_approved %}
- <div class="warning-box">
- {{ _('You are translating an unreviewed or rejected English document.') }}
- </div>
- {% endif %}
- <section id="change-locale" class="kbox" title="{{ _('Choose a locale:') }}" data-target="#change-locale-link" data-modal="true" data-close-on-out-click="true">
- <ul>
- {% for lcl in settings.LANGUAGE_CHOICES %}
- {% if lcl[0] not in [settings.WIKI_DEFAULT_LANGUAGE, locale] %}
- <li><a href="{{ url('wiki.translate', locale=lcl[0], document_path=document.parent.full_path) }}" title="{{ lcl[1] }}">{{ lcl[0] }}</a></li>
- {% endif %}
- {% endfor %}
+ <a id="change-locale-link" class="toggle" href="#change-locale">{{ _('Change') }}</a>
+ <ul id="change-locale" class="sub-menu" data-target="#change-locale-link" data-modal="true" data-close-on-out-click="true">
+ {% for lcl in settings.LANGUAGE_CHOICES %}
+ {% if lcl[0] not in [settings.WIKI_DEFAULT_LANGUAGE, locale] %}
+ <li><a href="{{ url('wiki.translate', locale=lcl[0], document_path=document.parent.full_path) }}" title="{{ lcl[1] }}">{{ lcl[0] }}</a></li>
+ {% endif %}
+ {% endfor %}
</ul>
- </section>
- </div>
+ </div>
+
+ {% include 'wiki/includes/page_buttons.html' %}
+
+ {% if not based_on.reviewed or not based_on.is_approved %}
+ <p class="trans-note">{{ _('You are translating an unreviewed or rejected English document.') }}</p>
+ {% endif %}
+ </header>
+
{% if not document %}
{# If this is the first translation to this locale, we use 1 big form. #}
<form action="" method="post" data-json-url="{{ url('wiki.json') }}">
{{ csrf() }}
<input type="hidden" name="form" value="both" />
{% endif %}
+
{% if document_form %}
- <details class="h2"{% if disclose_description %} open="open"{% endif %}>
+ <details id="trans-description"{% if disclose_description %} open="open"{% endif %}>
<summary>{{ _('Translate Description') }}</summary>
{{ errorlist(document_form) }}
{% if document %}
@@ -53,39 +58,36 @@
{{ csrf() }}
<input type="hidden" name="form" value="doc" />
{% endif %}
- <ul class="description">
- <li>
- <div class="approved">
- <h3>{{ _('Title:') }}</h3>
- <div class="val">{{ parent.title }}</div>
- </div>
- <div class="localized">
- <h3><label for="{{ document_form.title.auto_id }}" title="{{ document_form.title.help_text }}">{{ _('Title in {locale}:')|f(locale=language) }}</label></h3>
- {{ document_form.title|safe }}
- </div>
- </li>
- <li>
- <div class="approved">
- <h3>{{ _('Slug:') }}</h3>
- <div class="val">{{ parent.slug }}</div>
- </div>
- <div class="localized">
- <h3><label for="{{ document_form.slug.auto_id }}" title="{{ document_form.slug.help_text }}">{{ _('Slug in {locale}:')|f(locale=language) }}</label></h3>
- {{ document_form.slug|safe }}
- </div>
- </li>
- </ul>
+ <ul class="description">
+ <li>
+ <dl class="approved">
+ <dt>{{ _('Title:') }}</dt>
+ <dd>{{ parent.title }}</dd>
+ </dl>
+ <dl class="localized">
+ <dt><label for="{{ document_form.title.auto_id }}" title="{{ document_form.title.help_text }}">{{ _('Title in {locale}:')|f(locale=language) }}</label></dt>
+ <dd>{{ document_form.title|safe }}</dd>
+ </dl>
+ </li>
+ <li>
+ <dl class="approved">
+ <dt>{{ _('Slug:') }}</dt>
+ <dd>{{ parent.slug }}</dd>
+ </dl>
+ <dl class="localized">
+ <dt><label for="{{ document_form.slug.auto_id }}" title="{{ document_form.slug.help_text }}">{{ _('Slug in {locale}:')|f(locale=language) }}</label></dt>
+ <dd>{{ document_form.slug|safe }}</dd>
+ </dl>
+ </li>
+ </ul>
{% if document %}
- <div class="submit">
- <input type="submit" value="{{ _('Save') }}">
- </div>
</form>
{% endif %}
</details>
{% endif %}
{% if revision_form %}
- <details class="h2" open="open">
+ <details id="trans-content" open="open">
<summary>{{ _('Translate Content') }}</summary>
{{ errorlist(revision_form) }}
{% if document %}
@@ -94,27 +96,28 @@
{{ csrf() }}
<input type="hidden" name="form" value="rev" />
{% endif %}
+
{# TODO: restore keywords and summary when we restore search app
<ul class="description">
<li>
- <div class="approved">
- <h3>{{ _('Keywords:') }}</h3>
- <div class="val">{{ based_on.keywords }}</div>
- </div>
- <div class="localized">
- <h3><label for="{{ revision_form.keywords.auto_id }}" title="{{ revision_form.keywords.help_text }}">{{ _('Keywords in {locale}:')|f(locale=language) }}</label></h3>
- {{ revision_form.keywords|safe }}
- </div>
+ <dl class="approved">
+ <dt>{{ _('Keywords:') }}</dt>
+ <dd>{{ based_on.keywords }}</dd>
+ </dl>
+ <dl class="localized">
+ <dt><label for="{{ revision_form.keywords.auto_id }}" title="{{ revision_form.keywords.help_text }}">{{ _('Keywords in {locale}:')|f(locale=language) }}</label></dt>
+ <dd>{{ revision_form.keywords|safe }}</dd>
+ </dl>
</li>
<li>
- <div class="approved">
- <h3>{{ _('Search result summary:') }}</h3>
- <div class="val">{{ based_on.summary }}</div>
- </div>
- <div class="localized">
- <h3><label for="{{ revision_form.summary.auto_id }}" title="{{ revision_form.summary.help_text }}">{{ _('Search result summary in {locale}:')|f(locale=language) }}</label></h3>
- {{ revision_form.summary|safe }}
- </div>
+ <dl class="approved">
+ <dt>{{ _('Search result summary:') }}</dt>
+ <dd>{{ based_on.summary }}</dd>
+ </dl>
+ <dl class="localized">
+ <dt><label for="{{ revision_form.summary.auto_id }}" title="{{ revision_form.summary.help_text }}">{{ _('Search result summary in {locale}:')|f(locale=language) }}</label></dt>
+ <dd>{{ revision_form.summary|safe }}</dd>
+ </dl>
</li>
</ul>
#}
@@ -125,21 +128,28 @@
{% include 'wiki/includes/revision_diff.html' %}
{# TODO: 'change revisions' link and modal selector #}
{% else %}
- <p>{{ _('Note: There are no approved translations for this article.') }}
+ <p class="no-trans">{{ _('Note: There are no approved translations for this article.') }}</p>
{% endif %}
+
<div id="content-fields">
- <ul>
- <div class="approved">
- <h3>{{ _('Approved {default_locale} version:')|f(default_locale=settings.LANGUAGES[settings.WIKI_DEFAULT_LANGUAGE.lower()]) }}</h3>
- <textarea readonly="readonly">{{ based_on.content }}</textarea>
- </div>
- <div class="localized">
- <h3>{{ _('{locale} translation:')|f(locale=language) }}</h3>
+ <article class="approved">
+ <header>
+ <h3>{{ _('Approved {default_locale} version:')|f(default_locale=settings.LANGUAGES[settings.WIKI_DEFAULT_LANGUAGE.lower()]) }}</h3>
+ </header>
+ <div class="boxed">
+ {{ based_on.content|safe }}
+ </div>
+ </article>
+
+ <article class="localized">
+ <header>
+ <h3>{{ _('{locale} translation:')|f(locale=language) }}</h3>
+ </header>
{{ content_editor(revision_form.content) }}
- </div>
+ </article>
</div>
{{ revision_form.hidden_fields()|join|safe }}
- {% include 'wiki/includes/submit_revision_for_review.html' %}
+
{% if document %}
</form>
{% endif %}
@@ -149,7 +159,7 @@
</form>
{% endif %}
<div id="preview"></div>
- </article>
+ </div>
</div>
</div>
</section>
View
22 media/ckeditor/skins/kuma/editor.css
@@ -5,10 +5,10 @@
-webkit-box-shadow: 2px 2px 0 rgba(170,160,130,.5), 4px 4px 0 rgba(200,190,165,.5);
box-shadow: 2px 2px 0 rgba(170,160,130,.5), 4px 4px 0 rgba(200,190,165,.5);
}
-.cke_skin_kuma a:hover,
-.cke_skin_kuma a:link,
-.cke_skin_kuma a:visited,
-.cke_skin_kuma a:active{text-decoration:none;}
+.cke_editor_wikiArticle a:hover,
+.cke_editor_wikiArticle a:link,
+.cke_editor_wikiArticle a:visited,
+.cke_editor_wikiArticle a:active{text-decoration:none;}
.cke_skin_kuma .cke_rtl *,.cke_skin_kuma .cke_rtl a:hover,.cke_skin_kuma .cke_rtl a:link,.cke_skin_kuma .cke_rtl a:visited,.cke_skin_kuma .cke_rtl a:active,.cke_rtl .cke_skin_kuma *,.cke_rtl .cke_skin_kuma a:hover,.cke_rtl .cke_skin_kuma a:link,.cke_rtl .cke_skin_kuma a:visited,.cke_rtl .cke_skin_kuma a:active{text-align:right;}
.cke_skin_kuma iframe{vertical-align:inherit;}
@@ -68,8 +68,6 @@ a.cke_colorauto,a.cke_colormore{border:#fff 1px solid;padding:2px;display:block;
a:hover.cke_colorauto,a:hover.cke_colormore,a:focus.cke_colorauto,a:focus.cke_colormore,a:active.cke_colorauto,a:active.cke_colormore{border:#316ac5 1px solid;background-color:#dff1ff;}
@media print{.cke_skin_kuma .cke_toolbox{display:none;}}
.cke_skin_kuma .cke_browser_webkit .cke_toolbox,.cke_skin_kuma .cke_browser_webkit .cke_toolbox>span{white-space:normal;}
-.cke_skin_kuma .cke_toolbox{clear:both;padding:5px;background:#e6e6e6}
-.cke_skin_kuma .cke_toolbox:after{content:".";display:block;clear:both;height:0;visibility:hidden;}
.cke_skin_kuma a.cke_toolbox_collapser,.cke_skin_kuma a:hover.cke_toolbox_collapser{background-color:#e6e6e6;background-image:url(images/sprites.png);_background-image:url(images/sprites_ie6.png);background-position:3px -1366px;background-repeat:no-repeat;width:11px;height:11px;border:1px outset #D3D3D3;cursor:pointer;float:right;margin:-48px 5px 2px 2px;}
.cke_skin_kuma .cke_rtl a.cke_toolbox_collapser,.cke_skin_kuma .cke_rtl a:hover.cke_toolbox_collapser{float:left;}.cke_skin_kuma a.cke_toolbox_collapser span{display:none;}.cke_skin_kuma .cke_hc a.cke_toolbox_collapser span{font-size:10px;font-weight:bold;font-family:Arial;display:inline;}
.cke_skin_kuma a.cke_toolbox_collapser_min,.cke_skin_kuma a:hover.cke_toolbox_collapser_min{background-image:url(images/sprites.png);_background-image:url(images/sprites_ie6.png);background-position:4px -1387px;background-repeat:no-repeat;margin:2px 4px;}
@@ -233,20 +231,12 @@ a:hover.cke_colorauto,a:hover.cke_colormore,a:focus.cke_colorauto,a:focus.cke_co
html .cke_skin_kuma{visibility:inherit;}
html.cke_skin_kuma_container{visibility:visible;}
-.cke_skin_kuma .cke_top {
+.cke_skin_kuma .cke_toolbox { clear:both; padding: 5px 5px 35px 5px; margin: -9px -9px 0; border: solid #fff; border-width: 9px 9px 0;
background: -moz-linear-gradient(bottom, rgba(255,255,255,.1) 0, rgba(255,255,255,1) 30px, #e6e6e6 31px, #e6e6e6 100%);
background: -webkit-linear-gradient(bottom, rgba(255,255,255,.1) 0, rgba(255,255,255,1) 30px, #e6e6e6 31px, #e6e6e6 100%);
background: linear-gradient(bottom, rgba(255,255,255,.1) 0, rgba(255,255,255,1) 30px, #e6e6e6 31px, #e6e6e6 100%);
}
-.cke_skin_kuma .cke_toolbox {
-}
-/*
-.cke_skin_kuma .cke_toolbox { padding-bottom: 35px; margin: -9px -9px 0; border: solid #fff; border-width: 9px 9px 0;
- background: -moz-linear-gradient(bottom, rgba(255,255,255,.1) 0, rgba(255,255,255,1) 30px, #e6e6e6 31px, #e6e6e6 100%);
- background: -webkit-linear-gradient(bottom, rgba(255,255,255,.1) 0, rgba(255,255,255,1) 30px, #e6e6e6 31px, #e6e6e6 100%);
- background: linear-gradient(bottom, rgba(255,255,255,.1) 0, rgba(255,255,255,1) 30px, #e6e6e6 31px, #e6e6e6 100%);
-}
-*/
+.cke_skin_kuma .cke_toolbox:after{content:".";display:block;clear:both;height:0;visibility:hidden;}
.cke_skin_kuma .mdn-buttons-button { background: url(/media/img/markup.png) no-repeat; }
.mdn-buttons-button.h1 {background-position:-6px -6px;}
View
17 media/css/mdn-screen.css
@@ -38,8 +38,7 @@ Font sizes -
src: url('../fonts/League_Gothic-webfont.eot'); /* IE9 */
src: url('../fonts/League_Gothic-webfont.eot?') format('eot'), /* IE6-8 */
url('../fonts/League_Gothic-webfont.woff') format('woff'), /* Modern browsers */
- url('../fonts/League_Gothic-webfont.ttf') format('truetype'), /* Older Webkits */
- url('../fonts/League_Gothic-webfont.svg#webfont') format('svg'); /* Opera */
+ url('../fonts/League_Gothic-webfont.ttf') format('truetype'); /* Older Webkits */
font-weight: normal;
font-style: normal;
}
@@ -49,8 +48,7 @@ Font sizes -
src: url('../fonts/BebasNeue-webfont.eot'); /* IE9 */
src: url('../fonts/BebasNeue-webfont.eot?') format('eot'), /* IE6-8 */
url('../fonts/BebasNeue-webfont.woff') format('woff'), /* Modern browsers */
- url('../fonts/BebasNeue-webfont.ttf') format('truetype'), /* Older Webkits */
- url('../fonts/BebasNeue-webfont.svg#webfont') format('svg'); /* Opera */
+ url('../fonts/BebasNeue-webfont.ttf') format('truetype'); /* Older Webkits */
font-weight: normal;
font-style: normal;
}
@@ -60,8 +58,7 @@ Font sizes -
src: url('../fonts/CartoGothicStd-Bold-webfont.eot'); /* IE9 */
src: url('../fonts/CartoGothicStd-Bold-webfont.eot?') format('eot'), /* IE6-8 */
url('../fonts/CartoGothicStd-Bold-webfont.woff') format('woff'), /* Modern browsers */
- url('../fonts/CartoGothicStd-Bold-webfont.ttf') format('truetype'), /* Older Webkits */
- url('../fonts/CartoGothicStd-Bold-webfont.svg#webfont') format('svg'); /* Opera */
+ url('../fonts/CartoGothicStd-Bold-webfont.ttf') format('truetype'); /* Older Webkits */
font-weight: bold;
font-style: normal;
}
@@ -71,8 +68,7 @@ Font sizes -
src: url('../fonts/ABTSmilk.eot'); /* IE9 */
src: url('../fonts/ABTSmilk.eot?') format('eot'), /* IE6-8 */
url('../fonts/ABTSmilk.woff') format('woff'), /* Modern browsers */
- url('../fonts/ABTSmilk.ttf') format('truetype'), /* Older Webkits */
- url('../fonts/ABTSmilk.svg#webfont') format('svg'); /* Opera */
+ url('../fonts/ABTSmilk.ttf') format('truetype'); /* Older Webkits */
font-weight: normal;
font-style: normal;
}
@@ -82,14 +78,13 @@ Font sizes -
src: url('../fonts/MuseoSans_500-webfont.eot'); /* IE9 */
src: url('../fonts/MuseoSans_500-webfont.eot?') format('eot'), /* IE6-8 */
url('../fonts/MuseoSans_500-webfont.woff') format('woff'), /* Modern browsers */
- url('../fonts/MuseoSans_500-webfont.ttf') format('truetype'), /* Older Webkits */
- url('../fonts/MuseoSans_500-webfont.svg#webfont') format('svg'); /* Opera */
+ url('../fonts/MuseoSans_500-webfont.ttf') format('truetype'); /* Older Webkits */
font-weight: normal;
font-style: normal;
}
/* @Reset *********/
-header, hgroup, nav, section, article, aside, footer, figure { display: block; }
+header, hgroup, nav, section, article, aside, footer, figure, details, summary { display: block; }
html, body, form, fieldset, legend, figure,
h1, h2, h3, h4, h5, h6, dt, dd { margin: 0; padding: 0; }
blockquote:before, blockquote:after, q:before, q:after { content: ""; }
View
21 media/css/wiki-edcontent.css
@@ -8,12 +8,19 @@ a { text-decoration: none; color: #369 !important; cursor: default; }
.plain { background-color: #dbdbdb; border: 1px dotted #bbb; }
-h1, .header_1 { font-size: 1.857em; }
-h2, .header_2 { font-size: 1.571em; }
-h3, .header_3 { font-size: 1.396em; }
-h4, .header_4 { font-size: 1.142em; }
-h5, .header_5 { font-size: 1em; }
-h6, .header_6 { font-size: 1em; }
+h1, .header_1 { font-size: 1.857em; margin: 0 0 .8em; }
+h2, .header_2 { font-size: 1.428em; margin: 0 0 .8em; }
+h3, .header_3 { font-size: 1.142em; margin: 0 0 .8em; }
+h4, .header_4,
+h5, .header_5,
+h6, .header_6 { font-size: 1em; margin: 0 0 .8em; }
+
+/*** @Headings *********/
+h1, h2, h3, h4, h5, h6 { margin: 0 0 .8em; }
+h1, .page-title { font-size: 1.857em; }
+h2 { font-size: 1.428em; }
+h3 { font-size: 1.142em; }
+h4, h5, h6 { font-size: 1em; }
.urlexpansion { display: none; }
a.imagelink, a[rel~="internal"] { background: none; padding-right: 0; }
@@ -59,7 +66,7 @@ a.labs:hover, a.labs:focus, a.labs:active { color: #bcbcbc; }
p.footnote { font-size: 90%; font-style: italic; color: #716d65; }
div.callout-box { float: right; margin: 0 0 .5em 15px; border: 1px solid #eee; padding: 10px; width: 200px; background: #fafafa; text-align: center; }
div.note { margin-bottom: 1.286em; border: solid #dddaaa; border-width: 1px 0; padding: .75em 15px; background: #faf9e2; color: #5d5636; }
-div.tip { margin-bottom: 1.286em; border: 1px solid #e1f5f0; border-width: 1px 0; padding: .75em 15px; color: #6d675f; }
+div.tip { margin-bottom: 1.286em; border: 1px solid #e1f5f0; border-width: 1px 0; padding: .75em 15px; background: transparent url("img/tip-bg.png") repeat-x; color: #6d675f; }
div.note p, div.tip p { margin-bottom: .75em; }
/*** @Legacy classes - Leftovers from the old wiki. These can be phased out. *********/
View
49 media/css/wiki-screen.css
@@ -142,7 +142,8 @@ div.tip { margin-bottom: 1.286em; border: 1px solid #e1f5f0; border-width: 1px 0
div.note p, div.tip p { margin-bottom: .75em; }
/* @Page @Title and @Buttons *********/
-#article-head { position: relative; clear: both; overflow: hidden; padding-top: 20px; margin-top: -19px; background: #f6f6f1 url("../img/bg-content.png") fixed; }
+#article-head { position: relative; clear: both; padding-top: 20px; margin-top: -19px; background: #f6f6f1 url("../img/bg-content.png") fixed; }
+#article-head:after { content: "."; display: block; clear: both; height: 0; visibility: hidden; }
.title { position: relative; }
.title:after { content: "."; display: block; clear: both; height: 0; visibility: hidden; } /* clear floats */
@@ -298,6 +299,52 @@ input#id_title { font-size: 1.857em; width: 80%; padding: .1em 6px; margin: 0 0
#document-list .documents { list-style: disc; margin-left: 20px; }
#document-list .documents li { margin: 0 0 .5em; }
+/* @Translation *********/
+.change-locale { font-size: .857em; float: left; clear: left; position: relative; top: -1.75em; }
+#change-locale-link { display: inline-block; padding: .6em 20px .7em 8px; background: transparent url("../img/wiki/menu-arrow.png") 92% 0 no-repeat; }
+#change-locale { position: absolute; left: -999em; z-index: 9999; width: 180px; background: #fff; border: 1px solid #c6c6c2; -moz-box-shadow: 2px 2px 0 rgba(170,160,130,.2); -webkit-box-shadow: 2px 2px 0 rgba(170,160,130,.2); box-shadow: 2px 2px 0 rgba(170,160,130,.2); }
+.hasJS #change-locale { display: none; left: auto; right: 0; }
+#change-locale { padding: 6px 0; max-height: 300px; overflow: auto; }
+#change-locale li { list-style: none; }
+#change-locale a { display: block; padding: .25em 8px; }
+#change-locale a:before { content: attr(title) " ("; }
+#change-locale a:after { content: ")"; }
+#change-locale a:hover, #change-locale a:focus, #change-locale a:active { background-color: #369; background-position: 92% -100px; color: #fff; text-decoration: none; text-shadow: 1px 1px 0 rgba(0,0,0,.25); }
+
+.editing summary { font-size: 1.428em; margin: 0 0 .5em; padding-left: 40px; cursor: pointer; }
+.editing summary:hover, .editing summary:focus { background: rgba(170,160,130,.1); outline: 0; }
+.editing summary:before { content: "+"; float: left; margin: -.225em 0 0 -35px; font-size: 1.25em; }
+.editing .open summary:before { content: ""; float: left; margin: -.25em 0 0 -32px; font-size: 1.25em; }
+
+.description li { clear: both; margin: 0 0 .5em; }
+.description li:after { content: "."; display: block; clear: both; height: 0; visibility: hidden; }
+.description dl { margin: 0; }
+.description dt { display: inline-block; margin-right: 10px; font-style: normal; font-weight: bold; }
+.description dd { display: inline-block; margin-left: 0; }
+.description .approved { width: 49%; float: left; }
+.description .localized { width: 49%; float: right; }
+
+.description input#id_title { font-size: 1.124em; width: 90%; margin: 0; }
+
+#content-fields:after { content: "."; display: block; clear: both; height: 0; visibility: hidden; }
+#content-fields header { position: relative; z-index: 10; display: block; height: 1.142em; padding: .5em 0 1em; background: #f6f6f1 url("../img/bg-content.png") fixed; }
+#content-fields .approved { width: 49%; float: left; }
+#content-fields .localized { width: 49%; float: right; }
+
+#content-fields .approved .boxed { padding: 25px; }
+#content-fields .approved header:after { position: absolute; bottom: -30px; left: 3px; content: ""; display: block; width: 95%; height: 30px;
+ background: -moz-linear-gradient(bottom, rgba(255, 255, 255, .1) 0, rgba(255, 255, 255, 1) 20px);
+ background: -webkit-linear-gradient(bottom, rgba(255, 255, 255, .1) 0, rgba(255, 255, 255, 1) 20px);
+ background: linear-gradient(bottom, rgba(255, 255, 255, .1) 0, rgba(255, 255, 255, 1) 20px);
+}
+
+#trans-description { margin: 0 0 1em; }
+#trans-content { margin: 0 0 1em; }
+
+#content-fields.fixed header { width: 48%; }
+
+#trans-content #cke_contents_wikiArticle { min-height: 800px; }
+
/*** @Legacy classes - Leftovers from the old wiki. These can be phased out. *********/
span.alllinks { display: block; text-align: right; font-size: 90%; }
View
18 media/js/mdn/init.js
@@ -67,39 +67,39 @@ jQuery.fn.placeholder = function(new_value) {
// Set up nav dropdowns
- $("#masthead .toggle").click(function() {
- $(this).parents("li.menu").siblings(".menu").children(".sub-menu:visible").slideUp(100).attr("aria-hidden", "true");
- $(this).parents("li.menu").siblings(".menu").children(".open").removeClass("open");
+ $(".toggle").click(function() {
@groovecoder
groovecoder added a note Apr 17, 2012

Why not just #masthead? I only ask because I think I remember adding it for a reason.

@craigcook
Owner
craigcook added a note Apr 17, 2012

The change locale dropdown is outside the masthead but uses the same suckerfish menu, so I broadened the scope of the selector. Maybe this is a little too broad though, or maybe "toggle" is too generic a classname. This now selects every element with a class of "toggle" so maybe we should narrow that down a bit. We could do "#masthead .toggle, #site-info .toggle, #change-locale-link" as the selector, or even just "a.toggle" so it at least only selects links in the toggle class. Or make the class a bit less likely to be reused and name it something like "a.menu-toggle".

@groovecoder
groovecoder added a note Apr 17, 2012

I think .toggle is also used on the browserid explanatory dialog and this was messing that up, so yeah - let's do a more restrictive selector here.

@craigcook
Owner
craigcook added a note Apr 17, 2012

Yeah, the browserid box uses the same script. Basically any link that triggers a suckerfish dropdown gets the toggle class, and we shouldn't be attaching any other behaviors to that class (it's a behavior hook instead of a style hook).

Originally it was only the menus in the main nav which is why it started off as "#masthead .toggle" (all toggle links in the masthead). We added the browserid box in the footer so I expanded it to include "#site-info .toggle" as well. Now I wanted a dropdown menu in the main body, and rather than add yet another selector to the chain I just made it generic. It shouldn't interfere with the browserid boxes though, but we can still make it more specific if you like.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
+ $(".sub-menu:visible").slideUp(100).attr("aria-hidden", "true");
+ $(".toggle.open").removeClass("open");
$(this).siblings(".sub-menu").slideToggle(150).removeAttr("aria-hidden");
$(this).toggleClass("open");
return false;
});
// Keep the dropdown visible when it's in use
- $("#masthead .sub-menu, #site-info .sub-menu").hover(
+ $(".sub-menu").hover(
function() {
$(this).show().removeAttr("aria-hidden");
},
function() {
$(this).delay(100).slideUp(150).attr("aria-hidden", "true");
- $("#masthead .toggle, #site-info .toggle").delay(100).removeClass("open").blur();
+ $("a.toggle").delay(100).removeClass("open").blur();
}
);
// Hide dropdowns when anything else is clicked
$(document).bind('click', function(e) {
var $clicked = $(e.target);
if (! $clicked.parents().hasClass("menu"))
- $("#masthead .sub-menu, #site-info .sub-menu").hide().attr("aria-hidden", "true");
- $("#masthead .toggle, #site-info .toggle").removeClass("open");
+ $(".sub-menu").hide().attr("aria-hidden", "true");
+ $("a.toggle").removeClass("open");
});
// or gets focus
$("a, input, textarea, button, :focus").bind('focus', function(e) {
var $focused = $(e.target);
if (! $focused.parents().hasClass("menu")) {
- $("#masthead .sub-menu, #site-info .sub-menu").hide().attr("aria-hidden", "true");
- $("#masthead .toggle, #site-info .sub-menu").removeClass("open");
+ $(".sub-menu").hide().attr("aria-hidden", "true");
+ $("a.toggle").removeClass("open");
}
});
View
76 media/js/wiki_ckeditor_translate.js
@@ -0,0 +1,76 @@
+(function () {
+
+ // Callback functions after CKE is ready
+ var setup_ckeditor = function () {
+
+ var $head = $("#article-head");
+ var $transdesc = $("#trans-description");
+ var $transcont = $("#content-fields");
+ var $tools = $("div.cke_toolbox");
+ var contentTop = $("#content").offset();
+ var transTop = $transcont.offset();
+ var headHeight = $head.height();
+ var descHeight = $transdesc.height();
+ var toolHeight = $tools.height();
+ var fixed = false;
+
+ $("#content-fields .approved .boxed").css({ paddingTop: toolHeight+54});
+
+ // Switch header and toolbar styles on scroll to keep them on screen
+ $(window).scroll(function() {
+ transTop = $transcont.offset();
+
+ if( $(window).scrollTop() >= contentTop.top ) {
+ if( !fixed ) {
+ fixed = true;
+ $head.css({position:'fixed', top:19, width:"95%"});
+ $transdesc.css({ marginTop: headHeight });
+ }
+ }
+ else {
+ if( fixed ) {
+ fixed = false;
+ $head.css({position:'relative', top:"auto", width:"auto"});
+ $transdesc.css({ marginTop: 0 });
+ }
+ }
+
+ if( $(window).scrollTop() >= ( transTop.top - headHeight ) ) {
+ $tools.css({position:'fixed', top:headHeight+45, width:$("#cke_id_content").width()-10});
+ $transcont.addClass('fixed');
+ $("#content-fields header").css({ position: "fixed", top:headHeight });
+ $("td.cke_top").css({ height: toolHeight+38 });
+ }
+ else {
+ $tools.css({position:"relative", top:"auto", width:"auto"});
+ $transcont.removeClass('fixed');
+ $("#content-fields header").css({ position: "static", top:"auto" });
+ $("td.cke_top").css({ height: "auto" });
+ }
+
+ $("#cke_contents_wikiArticle").css({ height: $(".approved .boxed").height() + headHeight + 12 });
+
+ });
+
+ $(window).resize(function() { // Recalculate box width on resize
+ if ( fixed ) {
+ $tools.css({width:$("#cke_wikiArticle").width()-10}); // Readjust toolbox to fit
+ }
+ });
+
+ }
+
+ jQuery("#id_content").each(function () {
+
+ var el = jQuery(this),
+ doc_slug = $('#id_slug').val();
+
+ if (!$('body').is('.edit.is-template')) {
+ el.ckeditor(setup_ckeditor, {
+ customConfig : '/docs/ckeditor_config.js'
+ });
+ }
+
+ });
+
+})();
View
1 settings.py
@@ -544,7 +544,6 @@ def JINJA_CONFIG():
'css/search.css',
),
'wiki': (
- 'css/wiki.css',
'css/wiki-screen.css',
'syntaxhighlighter/styles/shCore.css',
'syntaxhighlighter/styles/shThemeDefault.css',

0 comments on commit 52b0d4e

Please sign in to comment.
Something went wrong with that request. Please try again.