Redesign comments page (#602)

* Fix unnecessary "xxxl" gridpoints * Redesign comments page * Add slight box shadow to comments
MaMpf-HD · Mar 23, 2024 · 2988fab · 2988fab
1 parent 33a94a9
commit 2988fab
Show file tree

Hide file tree

Showing 16 changed files with 83 additions and 27 deletions.
diff --git a/app/assets/javascripts/lectures.coffee b/app/assets/javascripts/lectures.coffee
@@ -103,13 +103,13 @@ $(document).on 'turbolinks:load', ->
   # hide the media tab if hide media button is clicked
   $('#hide-media-button').on 'click', ->
     $('#lecture-media-card').hide()
-    $('#lecture-content-card').removeClass('col-xxxl-9')
+    $('#lecture-content-card').removeClass('col-xxl-9')
     $('#show-media-button').show()
     return
 
   # display the media tab if show media button is clicked
   $('#show-media-button').on 'click', ->
-    $('#lecture-content-card').addClass('col-xxxl-9')
+    $('#lecture-content-card').addClass('col-xxl-9')
     $('#lecture-media-card').show()
     $('#show-media-button').hide()
     return

diff --git a/app/assets/stylesheets/application.scss b/app/assets/stylesheets/application.scss
@@ -27,9 +27,6 @@ $grid-breakpoints: (
   lg: 992px,
   xl: 1200px,
   xxl: 1440px,
-  xxxl: 1600px,
-  xxxxl: 1920px,
-  xxxxxl: 2160px
 );
 
 $container-max-widths: (
@@ -41,9 +38,6 @@ $container-max-widths: (
   lg: 992px,
   xl: 1200px,
   xxl: 1440px,
-  xxxl: 1600px,
-  xxxxl: 1920px,
-  xxxxxl: 2160px
 );
 
 
@@ -306,4 +300,15 @@ a {
 
 .toast {
   background-color: white;
+}
+
+.small-width {
+  max-width: 900px;
+}
+
+.subtle-background {
+  flex: 1;
+  background: radial-gradient(circle at top right, transparent 10%, #fafdff 10%, #fafdff 20%, transparent 21%), radial-gradient(circle at left bottom, transparent 10%, #fafdff 10%, #fafdff 20%, transparent 21%), radial-gradient(circle at top left, transparent 10%, #fafdff 10%, #fafdff 20%, transparent 21%), radial-gradient(circle at right bottom, transparent 10%, #fafdff 10%, #fafdff 20%, transparent 21%), radial-gradient(circle at center, #fafdff 30%, transparent 31%);
+  background-size: 6em 6em;
+  background-color: #ffffff;
 }
diff --git a/app/assets/stylesheets/comments.scss b/app/assets/stylesheets/comments.scss
@@ -3,4 +3,21 @@
 
 #toggleCommentPreviewWrapper {
     padding-left: $form-check-padding-start + $form-check-input-width;
+}
+
+.form-control.commentForm {
+    border-color: #4173b4;
+    border-width: 1.5px;
+}
+
+.comment-field {
+    backdrop-filter: blur(8px);
+    background-color: rgba(255, 255, 255, 0.44);
+    padding: 6px !important;
+}
+
+.comment {
+    border: solid 1.5px #d2d2d2 !important;
+    border-radius: 4px;
+    box-shadow: rgba(0,0,0,0.025) 0px 2px 5px;
 }
diff --git a/app/controllers/media_controller.rb b/app/controllers/media_controller.rb
@@ -441,7 +441,7 @@ def statistics
 
   def show_comments
     commontator_thread_show(@medium)
-    render layout: "application_no_sidebar"
+    render layout: "application_no_sidebar_with_background"
   end
 
   def cancel_publication

diff --git a/app/views/administration/index.html.erb b/app/views/administration/index.html.erb
@@ -1,10 +1,10 @@
 <div class="row mt-3 pr-2">
   <div class="col-12 col-md-8">
     <div class="row">
-      <div class="col-12 col-xxxl-8 mb-2">
+      <div class="col-12 col-xxl-8 mb-2">
         <%= render partial: 'administration/index/my_lectures' %>
       </div>
-      <div class="col-12 col-xxxl-4 mb-2">
+      <div class="col-12 col-xxl-4 mb-2">
         <%= render partial: 'administration/index/my_courses' %>
       </div>
     </div>

diff --git a/app/views/commontator/comments/_form.html.erb b/app/views/commontator/comments/_form.html.erb
@@ -38,7 +38,7 @@
 
   <div class="field">
     <%=
-      form.text_area :body, rows: '7', class: 'form-control commentForm', id: new_record ?
+      form.text_area :body, rows: '7', class: 'form-control commentForm comment-field', id: new_record ?
         comment.parent.nil? ? "commontator-thread-#{@commontator_thread.id}-new-comment-body" :
                               "commontator-comment-#{comment.parent.id}-reply" :
         "commontator-comment-#{comment.id}-edit-body"
@@ -78,7 +78,7 @@
         comment.parent.nil? ? "commontator-thread-#{@commontator_thread.id}-new-comment-body-preview" :
                               "commontator-comment-#{comment.parent.id}-reply-preview" :
         "commontator-comment-#{comment.id}-edit-body-preview" %>'
-       class="border p-2"
+       class="border p-2 comment-field"
        style="display: none; min-height: 3em;">
     <%= commontator_simple_format comment.body %>
   </div>

diff --git a/app/views/commontator/comments/_list.html.erb b/app/views/commontator/comments/_list.html.erb
@@ -1,11 +1,12 @@
+<%= stylesheet_link_tag 'comments' %>
 <%#
   Controllers that use this partial must supply the following variables:
   user
   nested_comments
 %>
 
 <% nested_comments.each do |comment, nested_children| %>
-  <div id="commontator-comment-<%= comment.id %>" class="comment">
+  <div id="commontator-comment-<%= comment.id %>" class="comment comment-field">
     <%=
       render partial: 'commontator/comments/show', formats: [ :html ], locals: {
         user: user, comment: comment, nested_children: nested_children

diff --git a/app/views/commontator/threads/_show.html.erb b/app/views/commontator/threads/_show.html.erb
@@ -1,3 +1,4 @@
+<%= stylesheet_link_tag 'comments' %>
 <%
   # Views that use this partial must supply the following variables:
   # user
@@ -69,7 +70,7 @@
 
   <%= render partial: 'commontator/threads/reply', locals: { thread: thread, user: user } %>
 
-  <div id="commontator-thread-<%= thread.id %>-comment-list" class="comment-list">
+  <div id="commontator-thread-<%= thread.id %>-comment-field">
     <%=
       render partial: 'commontator/comments/list', locals: {
         user: user, nested_comments: nested_comments

diff --git a/app/views/commontator/threads/show.js.erb b/app/views/commontator/threads/show.js.erb
@@ -7,6 +7,6 @@
   }
 %>
 
-$("#commontator-thread-<%= @commontator_thread.id %>-comment-list").hide().fadeIn();
+$("#commontator-thread-<%= @commontator_thread.id %>-comment-field").hide().fadeIn();
 
 <%= javascript_proc %>
diff --git a/app/views/layouts/application_no_sidebar_with_background.html.erb b/app/views/layouts/application_no_sidebar_with_background.html.erb
@@ -0,0 +1,33 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <%= render partial: 'layouts/head' %>
+  </head>
+  <body class="d-flex flex-column min-vh-100" data-locale="<%= I18n.locale %>" style="overflow-y: scroll;">
+    <%= render partial: 'shared/navbar' %>
+    <div class="container-fluid fluidvert subtle-background">
+      <div class="row">
+        <main class="col-12 pt-3" role="main">
+          <div class="alert alert-danger" id="js-messages" role="alert"
+               style="display: none;">
+          </div>
+          <% if alert.present? %>
+            <div class="alert alert-danger" role="alert">
+              <%= sanitize alert, :tags => %w(br) %>
+            </div>
+          <% end %>
+          <% if notice.present? %>
+            <div class="alert alert-secondary" role="alert">
+              <%= sanitize notice, :tags => %w(br) %>
+            </div>
+          <% end %>
+          <%= yield %>
+        </main>
+      </div>
+    </div>
+    <div id="modal-container"></div>
+    <footer class="mt-auto">
+      <%= render partial: 'shared/footer' %>
+    </footer>
+  </body>
+</html>
diff --git a/app/views/lectures/edit/_form.html.erb b/app/views/lectures/edit/_form.html.erb
@@ -4,17 +4,17 @@
                locals: { lecture: lecture } %>
     <div class="row px-4 py-2">
       <% if !lecture.seminar? || lecture.legacy_seminar %>
-        <div id="lecture-content-card" class="col-12 col-xxxl-9 mb-1">
+        <div id="lecture-content-card" class="col-12 col-xxl-9 mb-1">
           <%= render partial: 'lectures/edit/content',
                      locals: { lecture: lecture } %>
         </div>
       <% else %>
-        <div id="lecture-content-card" class="col-12 col-xxxl-9 mb-1">
+        <div id="lecture-content-card" class="col-12 col-xxl-9 mb-1">
           <%= render partial: 'lectures/edit/seminar_content',
                      locals: { lecture: lecture } %>
         </div>
       <% end %>
-      <div id="lecture-media-card" class="col-12 col-xxxl-3 mb-1">
+      <div id="lecture-media-card" class="col-12 col-xxl-3 mb-1">
         <%= render partial: 'lectures/edit/media',
                    locals: { media: media,
                              lecture: lecture } %>

diff --git a/app/views/main/start.html.erb b/app/views/main/start.html.erb
@@ -25,7 +25,7 @@
            data-bs-parent="#subscriptionsAccordion"
            data-link="#currentStuffLink">
         <div class="accordion-body">
-          <div class="row row-cols-1 row-cols-xs-2 row-cols-md-3 row-cols-lg-3 row-cols-xl-4 row-cols-xxxl-6"
+          <div class="row row-cols-1 row-cols-xs-2 row-cols-md-3 row-cols-lg-3 row-cols-xl-4 row-cols-xxl-6"
                id="collapseCurrentStuffContent">
             <% if @current_stuff.any? %>
               <%= render partial: 'main/start/lecture',
@@ -62,7 +62,7 @@
          id="collapseInactiveLectures"
          data-bs-parent="#subscriptionsAccordion" data-link="#inactiveLecturesLink">
       <div class="accordion-body">
-        <div class="row row-cols-1 row-cols-xs-2 row-cols-md-3 row-cols-lg-3 row-cols-xl-4 row-cols-xxxl-6"
+        <div class="row row-cols-1 row-cols-xs-2 row-cols-md-3 row-cols-lg-3 row-cols-xl-4 row-cols-xxl-6"
              id="collapseInactiveLecturesContent">
           <% if @current_stuff.empty? %>
             <%= render partial: 'main/start/lecture',
@@ -99,7 +99,7 @@
       <div class="collapse subscriptionsCollapse" id="collapseAllCurrent"
            data-bs-parent="#subscriptionsAccordion" data-link="#allCurrentLink">
         <div class="accordion-body">
-          <div class="row row-cols-1 row-cols-xs-2 row-cols-md-3 row-cols-lg-3 row-cols-xl-4 row-cols-xxxl-6"
+          <div class="row row-cols-1 row-cols-xs-2 row-cols-md-3 row-cols-lg-3 row-cols-xl-4 row-cols-xxl-6"
                id="collapseAllCurrentContent">
           </div>
           <%= tag.div id: 'emptyAllCurrent',

diff --git a/app/views/main/start/_talks.html.erb b/app/views/main/start/_talks.html.erb
@@ -1,6 +1,6 @@
 <% if @talks.any? %>
   <div class="row row-cols-1 row-cols-xs-2 row-cols-md-3
-              row-cols-lg-3 row-cols-xl-4 row-cols-xxxl-6">
+              row-cols-lg-3 row-cols-xl-4 row-cols-xxl-6">
     <% @talks.each do |t| %>
       <div class="col mb-4">
         <%= render partial: 'main/start/talk_card',

diff --git a/app/views/media/comments/_comments.html.erb b/app/views/media/comments/_comments.html.erb
@@ -1,5 +1,4 @@
-<div class="card bg-light"
-     id="commentsCard">
+<div id="commentsCard" class="card bg-light">
   <div class="card-header bg-generic-card-header">
     <div class="row">
       <div class="col-8">

diff --git a/app/views/media/show_comments.html.erb b/app/views/media/show_comments.html.erb
@@ -1,4 +1,4 @@
-<div id="commentsCard">
+<div id="commentsCard" class="container-md small-width">
 	<div class="row mb-2">
 		<div class="col-12 col-xl-6">
 			<h4>

diff --git a/app/views/notifications/index.html.erb b/app/views/notifications/index.html.erb
@@ -28,7 +28,7 @@
          data-nonotifications="<%= t('notifications.no_notifications') %>">
       <% if @notifications.present? %>
         <% @notifications.each do |n| %>
-          <div class="col-12 col-md-6 col-xl-4 col-xxl-4 col-xxxl-3 mb-2"
+          <div class="col-12 col-md-6 col-xl-4 col-xxl-4 col-xxl-3 mb-2"
                data-notificationCard="<%= n.id %>">
             <%= render partial: 'notifications/notification',
                        locals: { notification: n } %>