diff --git a/core/static/core/accordion.scss b/core/static/core/accordion.scss index 23bb2fa6..8ea5f4d3 100644 --- a/core/static/core/accordion.scss +++ b/core/static/core/accordion.scss @@ -42,6 +42,7 @@ details.accordion>.accordion-content { background: #ffffff; color: #333333; padding: 1em 2.2em; + margin-top: 0; border: 1px solid #dddddd; border-bottom-right-radius: 3px; border-bottom-left-radius: 3px; diff --git a/pedagogy/static/pedagogy/css/pedagogy.scss b/pedagogy/static/pedagogy/css/pedagogy.scss index 20703a5c..04a0d8fc 100644 --- a/pedagogy/static/pedagogy/css/pedagogy.scss +++ b/pedagogy/static/pedagogy/css/pedagogy.scss @@ -108,36 +108,35 @@ $pedagogy-white-text: #f0f0f0; } } - #leave_comment_not_allowed { + .leave-comment-not-allowed { p { text-align: center; color: red; } } - #leave_comment { - .leave-comment-grid-container { - display: grid; - grid-template-columns: 270px auto; - grid-template-rows: 100%; - grid-template-areas: "stars comment"; + .leave-comment { + .comment-form-content { + display: flex; + gap: 2em; @media screen and (max-width: $large-devices) { - grid-template-columns: 100%; - grid-template-rows: auto auto; - grid-template-areas: - "stars" - "comment"; + gap: 1em; + flex-direction: column; } - } - .form-stars { - grid-area: stars; + flex: 0; + min-width: 250px; + display: flex; + align-content: flex-start; + justify-content: center; + flex-wrap: wrap; + gap: 1rem 2em; + height: unset; } - .form-comment { - grid-area: comment; + flex: 2; } .ui-accordion-header-icon { @@ -145,8 +144,17 @@ $pedagogy-white-text: #f0f0f0; margin-right: 10px; } - .input-stars { - margin-top: 20px; + input[type="submit"] { + display: block; + margin-left: auto; + } + + summary { + background: $pedagogy-orange; + color: $pedagogy-white-text; + @media screen and (min-width: $large-devices) { + clip-path: polygon(0 0%, 0 100%, 30% 100%, 33% 0); + } } } @@ -370,23 +378,6 @@ $pedagogy-white-text: #f0f0f0; } } -details.accordion summary { - - background: $pedagogy-orange !important; - color: $pedagogy-white-text !important; - clip-path: polygon(0 0%, 0 100%, 30% 100%, 33% 0); - - @media screen and (max-width: $large-devices) { - clip-path: none; - } -} - -details.accordion>.accordion-content { - background-color: $white-color; - border-color: $pedagogy-orange; - border-right: none; -} - .buttons { display: flex; justify-content: flex-end; diff --git a/pedagogy/templates/pedagogy/fragments/ue_comment_form.jinja b/pedagogy/templates/pedagogy/fragments/ue_comment_form.jinja index 7ec115be..529dd8b9 100644 --- a/pedagogy/templates/pedagogy/fragments/ue_comment_form.jinja +++ b/pedagogy/templates/pedagogy/fragments/ue_comment_form.jinja @@ -11,44 +11,39 @@ hx-disabled-elt="find input[type='submit']" > {% csrf_token %} -
{% trans %}You already posted a comment on this UE. If you want to comment again, please modify or delete your previous comment.{% endtrans %}
+
{% trans %}You already posted a comment on this UE. If you want to comment again, please modify or delete your previous comment.{% endtrans %}
--{% endif %} - -{% if not object.has_user_already_commented(user) and user.has_perm("pedagogy.add_uecomment") %} - {{ add_comment_form }} -{% endif %} diff --git a/pedagogy/templates/pedagogy/fragments/ue_detail/ue_detail.jinja b/pedagogy/templates/pedagogy/fragments/ue_detail/ue_detail.jinja index d1477f39..5f82c6d6 100644 --- a/pedagogy/templates/pedagogy/fragments/ue_detail/ue_detail.jinja +++ b/pedagogy/templates/pedagogy/fragments/ue_detail/ue_detail.jinja @@ -1,9 +1,18 @@ +{# A few hx-partials for swapping a few parts of the main ue_detail.jinja #} +
{% trans %}You already posted a comment on this UE. If you want to comment again, please modify or delete your previous comment.{% endtrans %}
++ {% elif user.has_perm("pedagogy.add_uecomment") %} + {{ add_comment_form }} + {% endif %}