ec7adf56fe
* Initial basic work * Bulk of related work, including find/replace on the inputs * Adjust some tests * Adjust some specs * Fix a few more tests * Clean up tests * Adjust tests * Test fiddle * Adjust crop back to be a param * Update tests * Set proper defaults * Fix some styling * Adjust enrichment logic and tests * Adjust form JS * Update test snapshot * Clean up formatting * Fix spec name * Adjust some css and defaults * Adjust translation for image provider options * Switch from fill to fill-down * Proper fallback image * Fix tests * Update app/services/images/optimizer.rb Co-authored-by: Mac Siri <mac@forem.com> --------- Co-authored-by: Mac Siri <mac@forem.com>
113 lines
4.3 KiB
Text
113 lines
4.3 KiB
Text
<style>
|
|
body {
|
|
padding-top: 0 !important;
|
|
}
|
|
|
|
/* This weirdness below has a reason: https://github.com/forem/forem/pull/11701#issuecomment-737319289 */
|
|
|
|
.crayons-header,
|
|
.crayons-header * {
|
|
visibility: hidden;
|
|
position: absolute;
|
|
left: -9999em;
|
|
top: -9999em;
|
|
pointer-events: none;
|
|
opacity: 0;
|
|
overflow: hidden;
|
|
clip: rect(0, 0, 0, 0);
|
|
}
|
|
|
|
.crayons-header .site-logo,
|
|
.crayons-header .site-logo * {
|
|
visibility: visible;
|
|
position: static;
|
|
pointer-events: auto;
|
|
opacity: 1;
|
|
clip: auto;
|
|
overflow: visible;
|
|
}
|
|
|
|
.crayons-footer {
|
|
display: none;
|
|
}
|
|
|
|
.wrapper {
|
|
overflow: unset;
|
|
}
|
|
</style>
|
|
|
|
<main id="main-content"
|
|
data-article="<%= article.to_json(only: %i[id title cached_tag_list published published_at body_markdown main_image organization_id canonical_url updated_at], methods: %i[series all_series]) %>"
|
|
data-organizations="<%= organizations&.to_json(only: %i[id name bg_color_hex text_color_hex], methods: [:profile_image_90]) %>"
|
|
data-version="<%= version %>"
|
|
data-site-logo='<%= render "layouts/logo" %>'
|
|
data-cover-image-height="<%= Settings::UserExperience.cover_image_height %>"
|
|
data-cover-image-crop="<%= Settings::UserExperience.cover_image_fit %>"
|
|
data-scheduling-enabled="<%= FeatureFlag.enabled?(:schedule_articles) %>">
|
|
<form class="crayons-article-form crayons-article-form--<%= version %>">
|
|
|
|
<div class="crayons-article-form__header">
|
|
<span class="crayons-article-form__logo">
|
|
<%= render "layouts/logo" %>
|
|
</span>
|
|
|
|
<div class="crayons-field__label">
|
|
<span class="hidden s:inline-block mr-2"><%= t("views.editor.create") %></span>
|
|
<% if organizations && organizations.size > 0 %>
|
|
<select name="article[organization_id]" id="article_publish_under_org" class="crayons-select w-auto mt-0">
|
|
<%= options_for_select({ "Personal" => "" }.merge(organizations.pluck(:name, :id).to_h), article.organization_id || "") %>
|
|
</select>
|
|
<% end %>
|
|
</div>
|
|
|
|
<nav class="crayons-article-form__tabs crayons-tabs ml-auto" aria-label="<%= t("views.editor.modes") %>">
|
|
<ul class="crayons-tabs__list">
|
|
<li>
|
|
<button data-text="Edit" class="crayons-tabs__item crayons-tabs__item--current" type="button" aria-current="page"><%= t("views.editor.edit") %></button>
|
|
</li>
|
|
<li>
|
|
<button data-text="Preview" class="crayons-tabs__item " type="button"><%= t("views.editor.preview") %></button>
|
|
</li>
|
|
</ul>
|
|
</nav>
|
|
|
|
<div class="crayons-article-form__close">
|
|
<a href="/" class="crayons-btn crayons-btn--ghost-dimmed crayons-btn--icon" title="<%= t("views.editor.close.title") %>">
|
|
<%= crayons_icon_tag(:x, title: t("views.editor.close.icon")) %>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="crayons-card crayons-article-form__content">
|
|
<% if version == "v2" %>
|
|
<div class="text-padding">
|
|
<div class="crayons-article-form__cover" role="presentation">
|
|
<% if article.main_image.present? %>
|
|
<img src="<%= article.main_image %>" width="250" height="105" alt="Post cover" class="crayons-article-form__cover__image">
|
|
<% end %>
|
|
<button class="crayons-btn crayons-btn--outlined mr-2">
|
|
<label for="cover-image-input">
|
|
<% if article.main_image.present? %><%= t("views.editor.cover_image.change") %><% else %><%= t("views.editor.cover_image.add") %><% end %>
|
|
</label>
|
|
<input id="cover-image-input" type="file" accept="image/*" class="w-100 h-100 absolute left-0 right-0 top-0 bottom-0 overflow-hidden opacity-0 cursor-pointer" data-max-file-size-mb="25">
|
|
</button>
|
|
</div>
|
|
<div class="crayons-article-form__title">
|
|
<textarea class="crayons-textfield crayons-textfield--ghost fs-3xl m:fs-4xl l:fs-5xl fw-bold s:fw-heavy lh-tight" type="text" id="article-form-title" placeholder="<%= t("views.editor.new_title") %>" autocomplete="off"><%= article.title %></textarea>
|
|
</div>
|
|
</div>
|
|
<% end %>
|
|
</div>
|
|
</form>
|
|
</main>
|
|
|
|
<div class="hidden">
|
|
<%= render "pages/editor_markdown_help" %>
|
|
<%= render "pages/editor_liquid_help" %>
|
|
<%= render "pages/editor_frontmatter_help" %>
|
|
</div>
|
|
|
|
<script>
|
|
<%== RunkitTag.script %>
|
|
<%== TweetTag.script %>
|
|
</script>
|