Skip to content

Commit

Permalink
Modify styling for tag-edit.scss (#4137)
Browse files Browse the repository at this point in the history 
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
  • Loading branch information
@timrodz @benhalpern
timrodz authored and benhalpern committed Oct 2, 2019
1 parent 598427f commit 6a8c766
Show file tree
Hide file tree
Showing 2 changed files with 63 additions and 47 deletions.
94 changes: 56 additions & 38 deletions app/assets/stylesheets/tag-edit.scss
View file
Original file line number Diff line number Diff line change
@@ -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;
}
16 changes: 7 additions & 9 deletions app/views/tags/edit.html.erb
View file
Original file line number Diff line number Diff line change
Expand Up @@ -26,11 +26,10 @@
<a href="/t/<%= @tag.name %>" style="color: <%= @tag.text_color_hex %>;text-decoration: underline;"><%= @tag.name %></a>
</h1>
<p>
<code style="background-color: #D2D2D2; color: black; padding: 5px; border-radius: 5px;"><%= @tag.name %></code> is the name of the tag used in Markdown.
<code style="background-color: #D2D2D2; color: black; padding: 5px; border-radius: 5px;">#<%= @tag.name %></code> is the name of the tag used in Markdown.
</p>
</div>
</div>

<%= form_tag("/tag/#{@tag.id}", method: :patch, class: "tag-edit-form") do %>
<div class="tag-edit-container">
<% if flash[:success] %>
Expand Down Expand Up @@ -59,7 +58,6 @@
<br>
<%= text_field_tag "tag[bg_color_hex]", @tag.bg_color_hex, placeholder: "Click for color picker", class: "tag-form-text-field color-picker" %>
<div class="color-palette"></div>

</div>
<div class="tag-form-field">
<%= label_tag :text_color_hex %>
Expand All @@ -70,20 +68,20 @@
<div class="tag-form-field">
<%= label_tag :short_summary %>
<br>
<%= text_area_tag "tag[short_summary]", @tag.short_summary, placeholder: "", 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" %>
</div>
<div class="tag-form-field">
<%= label_tag :rules_markdown %>
<%= label_tag :wiki_body_markdown %>
<br>
<%= 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[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" %>
</div>
<div class="tag-form-field">
<%= label_tag :wiki_body_markdown %>
<%= label_tag :rules_markdown %>
<br>
<%= 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" %>
<%= 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" %>
</div>
<div class="tag-form-field">
<%= submit_tag "Save Changes", class: "tag-edit-submit" %>
<%= submit_tag "SAVE CHANGES", class: "tag-edit-submit" %>
</div>
</div>
<% end %>
Expand Down

0 comments on commit 6a8c766

Please sign in to comment.