diff --git a/opentech/public/utils/wagtail_hooks.py b/opentech/public/utils/wagtail_hooks.py index 4be37f0f7a9f96eb515d5811f757ebfbf9009fd7..bb0193b91817c1a4119660092c96b944f339dc75 100644 --- a/opentech/public/utils/wagtail_hooks.py +++ b/opentech/public/utils/wagtail_hooks.py @@ -1,4 +1,7 @@ +from django.contrib.staticfiles.templatetags.staticfiles import static + from wagtail.contrib.modeladmin.options import ModelAdminGroup, ModelAdmin, modeladmin_register +from wagtail.core import hooks from opentech.public.news.models import NewsType from opentech.public.people.models import PersonType @@ -21,3 +24,10 @@ class TaxonomiesModelAdminGroup(ModelAdminGroup): modeladmin_register(TaxonomiesModelAdminGroup) + + +@hooks.register('insert_editor_css') +def editor_css(): + link = '<link rel="stylesheet" href="{}">\n' + path = static('css/apply/wagtail_editor.css') + return link.format(path) diff --git a/opentech/static_src/src/sass/apply/wagtail_editor.scss b/opentech/static_src/src/sass/apply/wagtail_editor.scss new file mode 100644 index 0000000000000000000000000000000000000000..ac8552c8489baebc0bbdbfed8c857aad112a4b14 --- /dev/null +++ b/opentech/static_src/src/sass/apply/wagtail_editor.scss @@ -0,0 +1,99 @@ +// Abstracts +@import 'abstracts/functions'; +@import 'abstracts/mixins'; +@import 'abstracts/variables'; + +.wmd-panel { +} + +.wmd-input { +} + +.wmd-preview { + background-color: $color--sky-blue; + padding: 0 10px; + width: 100%; + overflow: hidden; /* prevent collapsing margins */ + + p { + margin: 1em 0; + } + + ul { + padding-left: 20px; + + li { + list-style: outside disc; + } + } + + ol { + padding-left: 0; + + li { + list-style: inside decimal; + } + } +} + +.wmd-button-row { + position: relative; + background-color: $color--white; + height: 25px; + padding-left: 5px; + padding-right: 5px; + padding-bottom: 5px; + padding-top: 10px; +} + +.wmd-spacer { + position: absolute; + display: inline-block; + background-color: $color--mid-grey; + width: 1px; + height: 20px; + margin-left: 14px; + list-style: none; +} + +.wmd-button { + position: absolute; + display: inline-block; + width: 20px; + height: 20px; + padding-left: 2px; + padding-right: 3px; + list-style: none; + cursor: pointer; + + & > span { + display: inline-block; + background-image: url('./../../images/editor-buttons.png'); + background-repeat: no-repeat; + background-position: 0 0; + width: 20px; + height: 20px; + } +} + +.wmd-spacer1 { + left: 50px; +} + +.wmd-spacer2 { + left: 175px; +} + +.wmd-spacer3 { + left: 300px; +} + +.wmd-prompt-background { + background-color: $color--black; +} + +.wmd-prompt-dialog { + background-color: $color--light-grey; + padding: .5em; + border: 4px solid $color--primary; +}