From 6a8c766322a9af31c97abc42370dcdf9854493b7 Mon Sep 17 00:00:00 2001 From: Juan Alejandro Morais Date: Thu, 3 Oct 2019 08:07:43 +1300 Subject: [PATCH] Modify styling for tag-edit.scss (#4137) Tags scss needed to be more cohesive with the entire DEV aeshetic, so I made the following changes: * Decreased the margin between the `tag-edit-container` and `tag-edit-tag areas`. * Added vertical margins to `tag-form-field` so that elements have a breathing room between them. * Increased the width of `tag-form-text-field` so that it's a bit easier to read, and changed its resizing mode to be vertical ONLY. Resizing a textarea should feel easy. * When clicking on a text field, the class `focus-visible` becomes active - The border color now becomes black. * Button `tag-edit-submit` was looking very unfamiliar with all other buttons. I didn't want it to be lonely, so I gave it attributes to match the 'WRITE A POST' CTA button. * `tag-edit-flash-error` will show background $red instead of the hardcoded hex value (#ff0000). Modify tags/edit.html.erb * The top area now shows a '#' sign next to the tag show section, e.g. '#beginner is the name of the tag used in Markdown.' * The order for text edit fields is now Summary, Wiki Markdown, Rules Markdown. The reason for this is that the Rules Markdown area feels like it's optional - Not every tag will have submission guidelines or specific rules. * Text area descriptions have changed a bit to try represent what they do better. Fix: import variables & mixin, refactor tag-edit --- app/assets/stylesheets/tag-edit.scss | 94 +++++++++++++++++----------- app/views/tags/edit.html.erb | 18 +++--- 2 files changed, 64 insertions(+), 48 deletions(-) diff --git a/app/assets/stylesheets/tag-edit.scss b/app/assets/stylesheets/tag-edit.scss index 7b00877cf..0a0413f4e 100644 --- a/app/assets/stylesheets/tag-edit.scss +++ b/app/assets/stylesheets/tag-edit.scss @@ -1,39 +1,57 @@ - .tag-edit-form { - margin-bottom: 5em; - display: flex; - align-items: center; - justify-content: center; - } - .tag-edit-container { - margin-top: 5em; - max-width: 50%; - } - .tag-form-text-field { - height: 2em; - width: 20.5em; - text-align: left; - overflow-wrap: break-word; - font-size: 1em; - } - .tag-area-text { - height: 4em; - } - .tag-edit-submit { - margin-top: 5px; - background-color: #557de8; - color: white; - padding: 15px 20px; - text-align: center; - font-size: 16px; - } - .tag-edit-flash-success { - color: white; - background: #388019; - padding: 15px; - } - .tag-edit-flash-error { - color: white; - background: #ff0000; - padding: 15px 15px 15px 40px; - } +@import 'variables'; +@import 'mixins'; +.tag-edit-form { + margin-bottom: 5em; + display: flex; + align-items: center; + justify-content: center; +} +.tag-edit-container { + margin-top: 1em; + max-width: 50%; +} +.tag-form-field { + margin-top: 10px; + + br { + margin-bottom: 3px; + } +} +.tag-form-label { + margin-bottom: 2px; +} +.tag-form-text-field { + height: 2em; + width: 23em; + text-align: left; + overflow-wrap: break-word; + font-size: 1em; + resize: vertical; +} +.focus-visible { + border-color: $black; +} +.tag-area-text { + height: 5em; +} +.tag-edit-submit { + height: 2em; + text-align: center; + font-weight: bold; + font-size: 17px; + border-radius: 3px; + border: 2px solid var(--theme-top-bar-write-color, $black); + @include themeable(color, theme-top-bar-write-color, $black); + @include themeable(background, theme-top-bar-write-background, $green); +} +.tag-edit-flash-success { + color: white; + background: #388019; + padding: 15px; +} +.tag-edit-flash-error { + color: white; + background: $red; + padding: 15px 15px 15px 40px; +} diff --git a/app/views/tags/edit.html.erb b/app/views/tags/edit.html.erb index d4e85716d..cad4e0431 100644 --- a/app/views/tags/edit.html.erb +++ b/app/views/tags/edit.html.erb @@ -26,11 +26,10 @@ <%= @tag.name %>

- <%= @tag.name %> is the name of the tag used in Markdown. + #<%= @tag.name %> is the name of the tag used in Markdown.

- <%= form_tag("/tag/#{@tag.id}", method: :patch, class: "tag-edit-form") do %>
<% if flash[:success] %> @@ -59,7 +58,6 @@
<%= text_field_tag "tag[bg_color_hex]", @tag.bg_color_hex, placeholder: "Click for color picker", class: "tag-form-text-field color-picker" %>
-
<%= label_tag :text_color_hex %> @@ -70,12 +68,7 @@
<%= label_tag :short_summary %>
- <%= text_area_tag "tag[short_summary]", @tag.short_summary, placeholder: "", class: "tag-form-text-field tag-area-text" %> -
-
- <%= label_tag :rules_markdown %> -
- <%= text_area_tag "tag[rules_markdown]", @tag.rules_markdown, placeholder: "i.e. submission guidelines", class: "tag-form-text-field tag-area-text" %> + <%= text_area_tag "tag[short_summary]", @tag.short_summary, placeholder: "Brief overview of what this tag is all about.", class: "tag-form-text-field tag-area-text" %>
<%= label_tag :wiki_body_markdown %> @@ -83,7 +76,12 @@ <%= text_area_tag "tag[wiki_body_markdown]", @tag.wiki_body_markdown, placeholder: "This is an 'about' section. Feel free to add an FAQ, additional resources, etc.", class: "tag-form-text-field tag-area-text" %>
- <%= submit_tag "Save Changes", class: "tag-edit-submit" %> + <%= label_tag :rules_markdown %> +
+ <%= text_area_tag "tag[rules_markdown]", @tag.rules_markdown, placeholder: "Optional - Can be used for challenges, i.e. submission guidelines.", class: "tag-form-text-field tag-area-text" %> +
+
+ <%= submit_tag "SAVE CHANGES", class: "tag-edit-submit" %>
<% end %>