Improve and correct UI + media query of question and alert in show.ht…

…ml.erb (#11054) * update UI of page correct indentation * Update app/views/questions/show.html.erb Co-authored-by: Tilda Udufo <mathildaudufo@gmail.com> * Update app/views/questions/show.html.erb Co-authored-by: Tilda Udufo <mathildaudufo@gmail.com> * change size of h1 for .note-show and #main-content * Add media query for h1-h5 headings .note-show and #main-content * remove style h3-h5 for media queryand main-content tag * increase size of h1-h2 Co-authored-by: Tilda Udufo <mathildaudufo@gmail.com>
publiclab · May 8, 2022 · 56dbcff · 56dbcff
1 parent 9c906c0
commit 56dbcff
Show file tree

Hide file tree

Showing 2 changed files with 52 additions and 29 deletions.
diff --git a/app/assets/stylesheets/style.css b/app/assets/stylesheets/style.css
@@ -75,6 +75,22 @@ h6.dropdown-header {
   border: none;
 }
 
+
+.note-show h1 {
+  font-size: 2.25rem;
+}
+
+
+@media (max-width:400px) {
+  .note-show h1 {
+    font-size: 2rem;
+  }
+  .note-show h2 {
+    font-size: 1.875rem;
+  }
+}
+
+
 .btn-circle {
   height: 45px;
   width: 45px;

diff --git a/app/views/questions/show.html.erb b/app/views/questions/show.html.erb
@@ -14,54 +14,61 @@
 </script>
 <%= javascript_include_tag('question') %>
 <div class="col-lg-9 note-show question-show">
-
-   <% if @node.main_image %>
+  <% if @node.main_image %>
     <% img_path = @node.main_image.path(@node.main_image.photo_file_name == "blob" ? :original : :large) # special case for "blob" images, see https://github.com/publiclab/plots2/issues/10210 %>
     <a class="main-image" style="max-width:100%;width:800px;" href="<%= @node.main_image.path(:original) %>">
       <%= image_tag(img_path, class:"rounded d-none d-lg-inline", style:'max-height:600px;max-width:100%;', lazy: @node.main_image.photo_file_name =! "blob") %>
       <%= image_tag(img_path, class:"rounded d-lg-none", style:'width:100%;', lazy: @node.main_image.photo_file_name =! "blob") %>
     </a>
   <% end %>
 
-  <h1 style="margin-top: 20px;"><span class="question"><%=translation('questions.show.question')%>: </span><a href="<%= @node.path(:question) %>"><%= @node.title %></a></h1>
+  <h1 style="margin-top: 20px;">
+    <span class="question"><%=translation('questions.show.question')%>: </span>
+    <a href="<%= @node.path(:question) %>"><%= @node.title %></a>
+  </h1>
   <% pt = @node.power_tag('question') %>
-  <div class="alert alert-warning">
-  <a href="/profile/<%= @node.author.name %>"> <%= @node.author.name %> </a><%=translation('questions.show.question_about')%> <b><a href="/questions/tag/<%= pt %>"><%= pt %></a></b>:
-    <a class="btn btn-outline-secondary requireLogin" target="_blank" href="/subscribe/tag/question:<%= pt %>">
-      Follow this topic
-    </a>
+  
+  <div class="alert alert-warning d-flex align-items-center justify-content-sm-between flex-column flex-sm-row">
+    <div>
+      <a href="/profile/<%= @node.author.name %>"><%= @node.author.name %> </a>
+      <%=translation('questions.show.question_about')%> <b><a href="/questions/tag/<%= pt %>"><%= pt %></a></b>
+    </div>
+    <div>
+      <a class="btn btn-outline-secondary requireLogin mt-3 mt-sm-0" target="_blank" href="/subscribe/tag/question:<%= pt %>">Follow this topic</a>
+    </div>
   </div>
+
   <div class="inline">
-        <p>
-        <% if @node.status == 0 || @node.status == 4 %><span class="badge badge-danger"><%=translation('questions.show.unpublished')%></span> | <% end %>
-        <% if @node.status == 3 %><span class="badge badge-success"><%=translation('questions.show.draft')%></span> | <% end %><%=translation('questions.show.by')%> <a href="/profile/<%= @node.author.name %>"><%= @node.author.name %></a> |
-        <% if @node.has_power_tag('with') %><%=translation('questions.show.with')%> <% @node.coauthors.each_with_index do |coauthor,i| %>
+    <p>
+      <% if @node.status == 0 || @node.status == 4 %><span class="badge badge-danger"><%=translation('questions.show.unpublished')%></span> | <% end %>
+      <% if @node.status == 3 %><span class="badge badge-success"><%=translation('questions.show.draft')%></span> | <% end %><%=translation('questions.show.by')%>  <a href="/profile/<%= @node.author.name %>"><%= @node.author.name %></a> |
+      <% if @node.has_power_tag('with') %><%=translation('questions.show.with')%> <% @node.coauthors.each_with_index do |coauthor,i| %>
         <a href="/profile/<%= coauthor.username %>"><%= coauthor.username%></a> <%= coauthor.new_contributor %><%= ',' if i < @node.coauthors.size-1 %><% end %><% end %>
-      <span class="d-none d-lg-inline">
-        <%= @node.created_at.to_s(:long) %> |
-      </span>
+        <span class="d-none d-lg-inline">
+          <%= @node.created_at.to_s(:long) %> |
+        </span>
       <span>
-      <a aria-label="Link to note" href="/n/<%= @node.id %>"><i class="fa fa-link"></i></a> <span class="d-none d-xl-inline"><a href="/n/<%= @node.id %>">#<%= @node.id %></a>
+        <a aria-label="Link to note" href="/n/<%= @node.id %>"><i class="fa fa-link"></i></a> <span class="d-none d-xl-inline"><a href="/n/<%= @node.id %>">#<%= @node.id %></a>
       </span>
     </p>
   </div>
-  <hr style="margin-top:10px;" />
+  <hr style="margin-top:10px;"/>
   <div style="overflow:hidden;" id="content" class="pl-content question">
     <%= raw auto_link(insert_extras(@node.latest.render_body), :sanitize => false) %>
   </div>
 
-  <hr />
+  <hr/>
 
   <%= render :partial => "home/social" %>
 
-  <hr />
+  <hr/>
 
   <% comments = @node.comments_viewable_by(current_user) %>
   <div id="legacy-editor-container" class="col-lg-10">
     <h3><span id="comment-count"><%= comments.size %></span> Comments</h3>
     <div id="comments-list">
-    <%= javascript_include_tag "editorToolbar" %>
-    <%= javascript_include_tag "comment" %>
+      <%= javascript_include_tag "editorToolbar" %>
+      <%= javascript_include_tag "comment" %>
       <% comments.includes([:node, :replied_comments]).order("timestamp ASC").each do |comment| %>
         <% if comment.reply_to.nil? %>
           <%= render :partial => "notes/comment", :locals => {:comment => comment} %>
@@ -70,20 +77,20 @@
     </div>
     <div id="answer-0-comment" style="margin-top: 30px;">
       <div id="answer-0-comment-section">
-      <% if current_user %>
-        <div class="d-inline" id="question-comment-form">
-          <%= render :partial => "comments/form", :locals => { 
+        <% if current_user %>
+          <div class="d-inline" id="question-comment-form">
+            <%= render :partial => "comments/form", :locals => { 
             title: "Post Comment", 
             comment: false, 
             placeholder: "Help the author refine their post, or point them at other helpful information on the site. Mention users by @username to notify them of this thread by email", 
             type: "question", 
             url1: '/conduct', 
             location: :main # toolbar needs this to create dropzone ID
-          } %> 
-        </div>
-      <% else %>
-        <p><a data-toggle="modal" data-target="#loginModal">Log in</a> to comment</p>
-      <% end %>
+            } %> 
+          </div>
+        <% else %>
+          <p><a data-toggle="modal" data-target="#loginModal">Log in</a> to comment</p>
+        <% end %>
       </div>
     </div>
   </div>