PR - fix : razorpay form in mobile view of header and addition of go …

…to top button (#135) * new revamped uiux for null chapter listing with search chapters * google map css addition * temporary placement of razorpay form under mobile view * razorpay pay form to right align near to toggle * commit according to the pr * git pod config removal * final fix to misconfigured go to top button * manual chapters/index.html.erb rebase
null-open-security-community · Sep 3, 2024 · ae23a47 · ae23a47
1 parent 6bd9eb7
commit ae23a47
Show file tree

Hide file tree

Showing 5 changed files with 72 additions and 18 deletions.
diff --git a/.gitpod.yml b/.gitpod.yml
diff --git a/app/assets/stylesheets/application.css.erb b/app/assets/stylesheets/application.css.erb
@@ -68,7 +68,36 @@ body {
   width: 100%;
   margin-bottom:4rem!important;
 }
+/*go to top button css */
+#back-to-top {
+  position: fixed;
+  bottom: 20px;
+  right: 20px;
+  background-color: #333;
+  color: #fff;
+  border-radius: 50%;
+  width: 40px;
+  height: 40px;
+  text-decoration : none;
+  text-align: center;
+  line-height: 40px;
+  cursor: pointer;
+  opacity: 0;
+  transition: opacity 0.5s;
+}
+
+#back-to-top.show {
+  opacity: 1;
+}
 
+#back-to-top:hover {
+  background-color: #555;
+}
+
+#back-to-top:before {
+  content: "\f077";
+  font-family: "FontAwesome";
+}
 
 @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600&display=swap');
 
@@ -191,10 +220,16 @@ body {
 .chapter-inactive {
   background-image: radial-gradient(circle, rgba(255,102,102,0.1), rgba(255,102,102,0.6));
 }
+.chapter-active .chapter-status {
+  background-color: #2ecc71;
+  color: white;
 .chapter-active .chapter-status {
   background-color: #2ecc71;
   color: white;
 }
+.chapter-inactive .chapter-status {
+  background-color: #e74c3c;
+  color: white;
 .chapter-inactive .chapter-status {
   background-color: #e74c3c;
   color: white;
@@ -248,6 +283,8 @@ body {
 
 
 
+
+
 /* Autocomplete JS */
 .autocomplete-suggestions { border: 1px solid #999; background: #FFF; cursor: default; overflow: auto; -webkit-box-shadow: 1px 4px 3px rgba(50, 50, 50, 0.64); -moz-box-shadow: 1px 4px 3px rgba(50, 50, 50, 0.64); box-shadow: 1px 4px 3px rgba(50, 50, 50, 0.64); }
 .autocomplete-suggestion { padding: 2px 5px; white-space: nowrap; overflow: hidden; }

diff --git a/app/views/chapters/index.html.erb b/app/views/chapters/index.html.erb
@@ -77,4 +77,4 @@
   })();
 </script>
 <%= render partial: 'chapters/chapter_map_loader',
-  locals: { chapter_address: @chapter_address, map_area_id: 'chapter-map' } %>
+  locals: { chapter_address: @chapter_address, map_area_id: 'chapter-map' } %>
diff --git a/app/views/layouts/_header.html.erb b/app/views/layouts/_header.html.erb
@@ -1,14 +1,20 @@
 <header class="navbar navbar-default navbar-fixed-top bs-docs-nav" role="banner">
   <div class="container">
     <div class="navbar-header">
-      <button class="navbar-toggle" type="button" data-toggle="collapse" data-target=".bs-navbar-collapse">
+      <a href="/" class="navbar-brand">n|u</a>
+
+      <button class="navbar-toggle pull-right" type="button" data-toggle="collapse" data-target=".bs-navbar-collapse">
         <span class="sr-only">Toggle navigation</span>
         <span class="icon-bar"></span>
         <span class="icon-bar"></span>
         <span class="icon-bar"></span>
       </button>
-      <a href="/" class="navbar-brand">n|u</a>
+      <div class="razorpay-form visible-xs pull-right" style="margin-right: 20px; margin-top: 2px;">
+        <form><script src="https://checkout.razorpay.com/v1/payment-button.js" data-payment_button_id="pl_GCUjGV4SIkhf9a" async> </script> </form>
+      </div>
     </div>
+
+
     <nav class="collapse navbar-collapse bs-navbar-collapse" role="navigation">
       <ul class="nav navbar-nav">
         <li>
@@ -60,7 +66,7 @@
             </li>
           </ul>
         </li>
- <li>
+        <li>
           <a href="#" class="dropdown-toggle" data-toggle="dropdown">Pages <b class="caret"></b></a>
           <ul class="dropdown-menu">
             <% Page.published.order('title ASC').each do |page| %>
@@ -80,7 +86,7 @@
         </li>
       </ul>
       <ul class="nav navbar-nav navbar-right">
-        <li>
+        <li class="hidden-xs">
           <form><script src="https://checkout.razorpay.com/v1/payment-button.js" data-payment_button_id="pl_GCUjGV4SIkhf9a" async> </script> </form>
         </li>
         <% if user_signed_in? %>
@@ -122,7 +128,7 @@
           </ul>
         </li>
         <% else %>
-       <li>
+        <li>
           <%= link_to new_session_path(User) do %>
             <%= fa_icon('sign-in') %> Login / Register
           <% end %>
@@ -133,7 +139,6 @@
             <%= fa_icon('book') %> About
           </a>
         </li>
-
       </ul>
     </nav>
   </div>

diff --git a/app/views/layouts/application.html.erb b/app/views/layouts/application.html.erb
@@ -22,8 +22,30 @@
   <div id='main-content' class='container'>
     <%= yield %>
   </div>
+  <!-- Back to top button -->
+  <%= link_to "#", id: "back-to-top", class: "back-to-top", data: { toggle: "tooltip", placement: "top", title: "Back to top" } do %>
+    <i class="fa " ></i>
+  <% end %>
   <%= render :partial => 'layouts/footer' %>
   <%= render :partial => 'layouts/analytics' %>
   <%= render :partial => 'layouts/postscripts' %>
+  <script>
+  $(document).ready(function() {
+  $(window).scroll(function() {
+    if ($(this).scrollTop() > 100) {
+      $('.back-to-top').addClass('show');
+    } else {
+      $('.back-to-top').removeClass('show');
+    }
+  });
+
+  $('.back-to-top').click(function() {
+    $('html, body').animate({ scrollTop: 0 }, 'slow');
+    return false;
+  });
+  });
+
+  </script>
+
 </body>
-</html>
+</html>