Edit buttons styles for Templates responses (Mod) (#14468)

* Edit buttons styles for Templates responses (Mod)

* Update comments.scss

* Edit classic CSS buttons to SCSS

* added m-1 to submit buttons

* Deleted CSS class for .response-templates-container and added mb-3 to header

* Add crayons-btn to personal and moderator buttons

* Update app/assets/stylesheets/views/comments.scss

Co-authored-by: rhymes <github@rhymes.dev>
This commit is contained in:
Thomasbnt.dev 2021-08-12 16:57:36 +02:00 committed by GitHub
parent 517c70c20c
commit a041e5996e
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 11 additions and 5 deletions

View file

@ -1,4 +1,5 @@
@import '../config/import';
@import '../components/buttons';
.comment-form {
--preview-display: none;
@ -269,3 +270,8 @@
color: var(--base-90);
}
}
.personal-template-button:not(.active),
.moderator-template-button:not(.active) {
@extend .crayons-btn--outlined;
}

View file

@ -54,8 +54,8 @@ function buildHTML(response, typeOf) {
<p>${obj.content}</p>
</div>
<div class="flex flex-nowrap pl-2">
<button class="crayons-btn crayons-btn--s crayons-btn--secondary moderator-submit-button" type="submit" data-response-template-id="${obj.id}">Send as Mod</button>
<button class="crayons-btn crayons-btn--s crayons-btn--outlined insert-template-button" type="button" data-content="${obj.content}">Insert</button>
<button class="crayons-btn crayons-btn--s crayons-btn--secondary moderator-submit-button m-1" type="submit" data-response-template-id="${obj.id}">Send as Mod</button>
<button class="crayons-btn crayons-btn--s crayons-btn--outlined insert-template-button m-1" type="button" data-content="${obj.content}">Insert</button>
</div>
</div>
`;

View file

@ -67,9 +67,9 @@
</div>
<div class="response-templates-container crayons-card crayons-card--secondary p-4 mb-4 comment-form__templates fs-base hidden">
<header>
<button type="button" class="personal-template-button active" data-target-type="personal" data-form-id="new_comment">Personal</button>
<button type="button" class="moderator-template-button hidden" data-target-type="moderator" data-form-id="new_comment">Moderator</button>
<header class="mb-3">
<button type="button" class="crayons-btn personal-template-button active" data-target-type="personal" data-form-id="new_comment">Personal</button>
<button type="button" class="crayons-btn moderator-template-button hidden" data-target-type="moderator" data-form-id="new_comment">Moderator</button>
</header>
<img class="loading-img hidden" src="<%= asset_path("loading-ellipsis.svg") %>" alt="loading" loading="lazy" />