Merge pull request #12 from jahseng-lee/feature/cleanup-mobile-views

Feature/cleanup mobile views
jahseng-lee · Dec 12, 2023 · 25bd3f4 · 25bd3f4
2 parents 7216439 + 750fedc
commit 25bd3f4
Show file tree

Hide file tree

Showing 39 changed files with 695 additions and 239 deletions.
diff --git a/Gemfile.lock b/Gemfile.lock
@@ -206,7 +206,7 @@ GEM
       racc (~> 1.4)
     orm_adapter (0.5.0)
     os (1.1.4)
-    pagy (6.0.4)
+    pagy (6.2.0)
     pg (1.5.4)
     pg_search (2.3.6)
       activerecord (>= 5.2)

diff --git a/app/assets/stylesheets/application.bootstrap.scss b/app/assets/stylesheets/application.bootstrap.scss
@@ -9,6 +9,7 @@ $primary: #262626;
 @import 'home';
 @import 'location';
 @import 'profiles';
+@import 'reviews';
 @import 'search_location';
 @import 'visas';
 

diff --git a/app/assets/stylesheets/channels.scss b/app/assets/stylesheets/channels.scss
@@ -12,6 +12,10 @@
 
     border-bottom: 1px solid $primary;
 
+    .dropdown {
+      flex: 1;
+    }
+
     .leave-channel-button {
       color: $danger;
     }

diff --git a/app/assets/stylesheets/chats.scss b/app/assets/stylesheets/chats.scss
@@ -28,6 +28,17 @@ body {
       display: flex;
       flex-direction: column;
 
+      &.offcanvas-body {
+        padding: 0;
+      }
+
+      .channel-list-frame {
+        flex: 1;
+
+        display: flex;
+        flex-direction: column;
+      }
+
       .channel-list {
         flex: 1;
 

diff --git a/app/assets/stylesheets/home.scss b/app/assets/stylesheets/home.scss
@@ -6,6 +6,7 @@
 
 .pagination-nav-container {
   width: 100%;
+  max-width: 100vw;
   display: flex;
   justify-content: center;
 }

diff --git a/app/assets/stylesheets/reviews.scss b/app/assets/stylesheets/reviews.scss
@@ -0,0 +1,6 @@
+.review-form {
+  .form-select {
+    width: 4rem;
+    min-width: 4rem;
+  }
+}
diff --git a/app/controllers/channels_controller.rb b/app/controllers/channels_controller.rb
@@ -79,27 +79,13 @@ def joinable
       .order(:last_action_at)
 
     respond_to do |format|
-      format.turbo_stream do
-        render turbo_stream: turbo_stream.replace(
-          "channel-list",
-          partial: "chats/joinable_channel_list",
-          locals: { channels: @channels }
-        )
-      end
+      format.turbo_stream
     end
   end
 
   def current_user_list
     respond_to do |format|
-      format.turbo_stream do
-        render turbo_stream: turbo_stream.replace(
-          "joinable-channel-list",
-          partial: "chats/current_user_channel_list",
-          locals: {
-            user: current_user
-          }
-        )
-      end
+      format.turbo_stream
     end
   end
 

diff --git a/app/controllers/countries_controller.rb b/app/controllers/countries_controller.rb
@@ -0,0 +1,30 @@
+class CountriesController < ApplicationController
+  def edit
+    @country = Country.find(params[:id])
+    @location = @country.locations.find(params[:location_id])
+
+    authorize(@country)
+  end
+
+  def update
+    @country = Country.find(params[:id])
+    @location = @country.locations.find(params[:location_id])
+
+    authorize(@country)
+
+    # NOTE this is supremely lazy
+    #      however, admin only. Fine for now
+    @country.update!(country_params)
+    redirect_to @location
+  end
+
+  private
+
+  def country_params
+    params.require(:country).permit(
+      :ambulance_number,
+      :police_number,
+      :fire_number
+    )
+  end
+end
diff --git a/app/controllers/locations_controller.rb b/app/controllers/locations_controller.rb
@@ -70,14 +70,15 @@ def upload_banner_image_modal
     end
   end
 
+  def emergency_info
+    # Intended to be a mobile/small screen only link as normally the
+    # emergency info is hidden on mobile
+    @location = Location.find(params[:id])
+  end
+
   private
 
   def location_params
-    params.require(:location).permit(
-      :description,
-      :ambulance_number,
-      :police_number,
-      :fire_number,
-    )
+    params.require(:location).permit(:description)
   end
 end
diff --git a/app/javascript/controllers/location_tabs_controller.js b/app/javascript/controllers/location_tabs_controller.js
@@ -5,6 +5,7 @@ export default class extends Controller {
     "overviewLink",
     "reviewsLink",
     "visaLink",
+    "emergencyInfoLink"
   ];
 
   connect() {
@@ -15,6 +16,8 @@ export default class extends Controller {
       this.visaLinkTarget.classList.add("active");
     } else if (pathElements.includes("reviews")) {
       this.reviewsLinkTarget.classList.add("active");
+    } else if (pathElements.includes("emergency_info")) {
+      this.emergencyInfoLinkTarget.classList.add("active");
     } else {
       this.overviewLinkTarget.classList.add("active");
     }

diff --git a/app/models/location.rb b/app/models/location.rb
@@ -47,9 +47,9 @@ def review_summary
 
   def emergency_numbers
     [
-      { name: "ambulance", number: ambulance_number },
-      { name: "police", number: police_number },
-      { name: "fire", number: fire_number },
+      { name: "ambulance", number: country.ambulance_number },
+      { name: "police", number: country.police_number },
+      { name: "fire", number: country.fire_number },
     ]
   end
 

diff --git a/app/policies/country_policy.rb b/app/policies/country_policy.rb
@@ -1,5 +1,9 @@
 class CountryPolicy < ApplicationPolicy
-  def update?
+  def edit?
     user.admin?
   end
+
+  def update?
+    edit?
+  end
 end
diff --git a/app/views/channels/_chat_message_section.html.erb b/app/views/channels/_chat_message_section.html.erb
@@ -50,6 +50,14 @@
         </ul>
       </div>
     <% end %>
+
+    <div class="d-md-none">
+      <%= render partial: "chats/shared/mobile_user_channel_list",
+        locals: {
+          user: current_user
+        }
+      %>
+    </div>
   </div>
 
   <div class="channel-message-section">

diff --git a/app/views/channels/current_user_list.turbo_stream.erb b/app/views/channels/current_user_list.turbo_stream.erb
@@ -0,0 +1,17 @@
+<%= turbo_stream.replace(
+  "joinable-channel-list",
+  partial: "chats/current_user_channel_list",
+  locals: {
+    user: current_user
+  }
+) %>
+
+<%= turbo_stream.replace(
+  "mobile-joinable-channel-list",
+  partial: "chats/current_user_channel_list",
+  locals: {
+    user: current_user,
+    turbo_id: "mobile-channel-list"
+  }
+) %>
+
diff --git a/app/views/channels/joinable.turbo_stream.erb b/app/views/channels/joinable.turbo_stream.erb
@@ -0,0 +1,14 @@
+<%= turbo_stream.replace(
+  "channel-list",
+  partial: "chats/joinable_channel_list",
+  locals: { channels: @channels }
+) %>
+
+<%= turbo_stream.replace(
+  "mobile-channel-list",
+  partial: "chats/joinable_channel_list",
+  locals: {
+    channels: @channels,
+    turbo_id: "mobile-joinable-channel-list"
+  }
+) %>
diff --git a/app/views/chats/_current_user_channel_list.html.erb b/app/views/chats/_current_user_channel_list.html.erb
@@ -1,4 +1,7 @@
-<%= turbo_frame_tag "channel-list", class: "channel-list-container col pe-0" do %>
+<%= turbo_frame_tag(
+  local_assigns[:turbo_id] ? turbo_id : "channel-list",
+  class: "channel-list-frame"
+) do %>
   <div class="channel-list">
     <%= render partial: "chats/shared/channel_list",
       locals: {

diff --git a/app/views/chats/_joinable_channel_list.html.erb b/app/views/chats/_joinable_channel_list.html.erb
@@ -1,5 +1,5 @@
 <%= turbo_frame_tag(
-  "joinable-channel-list",
+  local_assigns[:turbo_id] ? turbo_id : "joinable-channel-list",
   class: "channel-list-container col pe-0",
   data: {
     controller: "joinable-channel-list"

diff --git a/app/views/chats/shared/_mobile_user_channel_list.html.erb b/app/views/chats/shared/_mobile_user_channel_list.html.erb
@@ -0,0 +1,18 @@
+<button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#channelList" aria-controls="channelList">
+  <i class="bi bi-chevron-left"></i>
+  <%= local_assigns[:button_label] ? button_label : "Browse" %>
+</button>
+
+<div class="offcanvas offcanvas-end" tabindex="-1" id="channelList" aria-labelledby="Channel list">
+  <div class="offcanvas-header">
+    <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
+  </div>
+  <div class="channel-list-container offcanvas-body">
+    <%= render partial: "chats/current_user_channel_list",
+      locals: {
+        user: user,
+        turbo_id: "mobile-channel-list"
+      }
+    %>
+  </div>
+</div>
diff --git a/app/views/chats/show.html.erb b/app/views/chats/show.html.erb
@@ -23,22 +23,33 @@
     <%= turbo_stream_from "user-#{current_user.id}-chat" %>
 
     <div class="chat-screen-container row">
-      <%= render partial: "chats/current_user_channel_list",
-        locals: {
-          user: current_user
-        }
-      %>
+      <div class="channel-list-container col pe-0 d-none d-md-flex">
+        <%= render partial: "chats/current_user_channel_list",
+          locals: {
+            user: current_user
+          }
+        %>
+      </div>
 
       <% if @channel.present? %>
-        <div class="chat-message-section col-9 ps-0">
+        <div class="chat-message-section col col-md-9 ps-md-0">
           <%= render partial: "channels/chat_message_section",
             locals: { channel: @channel, message: @message }
           %>
         </div>
       <% else %>
-        <div class="chat-message-section no-chat col-9 ps-0">
-          <p class="h2">
-            Click on one of channels on the left to start chatting
+        <div class="chat-message-section no-chat col col-md-9 ps-md-0">
+          <p class="h2 d-none d-md-block">
+            Click on one of the channels to start chatting
+          </p>
+
+          <div class="d-md-none">
+            <%= render partial: "chats/shared/mobile_user_channel_list",
+              locals: {
+                user: current_user,
+                button_label: "Browse channels"
+              }
+            %>
           </p>
         </div>
       <% end %>

diff --git a/app/views/countries/edit.html.erb b/app/views/countries/edit.html.erb
@@ -0,0 +1,39 @@
+<div class="container mt-5">
+  <%= render partial: "locations/shared/back_link",
+    locals: {
+      location: @location,
+    }
+  %>
+
+  <h1>Emergency info. for <%= @country.name %></h1>
+
+  <%= form_for [@location, @country] do |f| %>
+    <div class="mb-3">
+      <%= f.label(
+        :ambulance_number,
+        "Ambulance",
+        class: "form-label fw-bold"
+      ) %>
+      <%= f.text_field :ambulance_number, class: "form-control" %>
+    </div>
+
+    <div class="mb-3">
+      <%= f.label(
+        :police_number,
+        "Police",
+        class: "form-label fw-bold"
+      ) %>
+      <%= f.text_field :police_number, class: "form-control" %>
+    </div>
+
+    <div class="mb-3">
+      <%= f.label :fire_number, "Fire", class: "form-label fw-bold" %>
+      <%= f.text_field :fire_number, class: "form-control" %>
+    </div>
+
+    <%= f.button "Save",
+      type: :submit,
+      class: "btn btn-primary"
+    %>
+  <% end %>
+</div>
diff --git a/app/views/locations/_tabs.html.erb b/app/views/locations/_tabs.html.erb
@@ -30,5 +30,15 @@
         }
       ) %>
     </li>
+    <li class="nav-item">
+      <%= link_to(
+        "Emergency info.",
+        emergency_info_location_path(location.id),
+        class: "nav-link d-lg-none d-xl-none d-xxl-none",
+        data: {
+          "location-tabs-target": "emergencyInfoLink"
+        }
+      ) %>
+    </li>
   </ul>
 </div>