Update responsiveness for the map page

This commit is contained in:
Eugene Burmakin 2024-10-02 23:41:46 +02:00
parent e2e2c88a77
commit 9316fe618c
4 changed files with 60 additions and 55 deletions

View file

@ -11,6 +11,7 @@ and this project adheres to [Semantic Versioning](http://semver.org/).
- Now you can use http protocol for the Photon API host if you don't have SSL certificate for it
- For stats, total distance per month might have been not equal to the sum of distances per day. Now it's fixed and values are equal
- Mobile view of the map looks better now
### Changed

File diff suppressed because one or more lines are too long

View file

@ -1,37 +1,38 @@
<% content_for :title, 'Map' %>
<div class='w-4/5 mt-8'>
<div class="flex flex-col lg:flex-row lg:space-x-4 mt-8 w-full">
<div class='w-full lg:w-5/6'>
<div class="flex flex-col space-y-4 mb-4 w-full">
<%= form_with url: map_path(import_id: params[:import_id]), method: :get do |f| %>
<div class="flex flex-col md:flex-row md:space-x-4 md:items-end">
<div class="w-full md:w-2/12">
<div class="flex flex-col space-y-4 sm:flex-row sm:space-y-0 sm:space-x-4 sm:items-end">
<div class="w-full sm:w-2/12 md:w-1/12 lg:w-2/12">
<div class="flex flex-col space-y-2">
<%= f.label :start_at, class: "text-sm font-semibold" %>
<%= f.datetime_local_field :start_at, class: "rounded-md w-full", value: @start_at %>
</div>
</div>
<div class="w-full md:w-2/12">
<div class="w-full sm:w-2/12 md:w-1/12 lg:w-2/12">
<div class="flex flex-col space-y-2">
<%= f.label :end_at, class: "text-sm font-semibold" %>
<%= f.datetime_local_field :end_at, class: "rounded-md w-full", value: @end_at %>
</div>
</div>
<div class="w-full md:w-2/12">
<div class="w-full sm:w-6/12 md:w-2/12 lg:w-3/12">
<div class="flex flex-col space-y-2">
<%= f.submit "Search", class: "px-4 py-2 bg-blue-500 text-white rounded-md" %>
</div>
</div>
<div class="w-full md:w-2/12">
<div class="w-full sm:w-6/12 md:w-2/12">
<div class="flex flex-col space-y-2 text-center">
<%= link_to "Yesterday", map_path(start_at: Date.yesterday.beginning_of_day, end_at: Date.yesterday.end_of_day, import_id: params[:import_id]), class: "px-4 py-2 bg-gray-500 text-white rounded-md" %>
</div>
</div>
<div class="w-full md:w-2/12">
<div class="w-full sm:w-6/12 md:w-3/12 lg:w-2/12">
<div class="flex flex-col space-y-2 text-center">
<%= link_to "Last 7 days", map_path(start_at: 1.week.ago.beginning_of_day, end_at: Time.current.end_of_day, import_id: params[:import_id]), class: "px-4 py-2 bg-gray-500 text-white rounded-md" %>
</div>
</div>
<div class="w-full md:w-2/12">
<div class="w-full sm:w-6/12 md:w-3/12 lg:w-2/12">
<div class="flex flex-col space-y-2 text-center">
<%= link_to "Last month", map_path(start_at: 1.month.ago.beginning_of_day, end_at: Time.current.end_of_day, import_id: params[:import_id]), class: "px-4 py-2 bg-gray-500 text-white rounded-md" %>
</div>
@ -47,15 +48,16 @@
data-user_settings=<%= current_user.settings.to_json %>
data-coordinates="<%= @coordinates %>"
data-timezone="<%= Rails.configuration.time_zone %>">
<div data-maps-target="container" class="h-[25rem] w-auto min-h-screen">
<div data-maps-target="container" class="h-[25rem] w-full min-h-screen">
<div id="fog" class="fog"></div>
</div>
</div>
</div>
</div>
</div>
<div class='w-1/5 mt-8'>
<div class='w-full lg:w-1/6 mt-8 lg:mt-0 mx-auto'>
<%= render 'shared/right_sidebar' %>
</div>
</div>
<%= render 'map/settings_modals' %>

View file

@ -15,12 +15,14 @@
</ul>
</div>
<%= link_to 'DaWarIch', root_path, class: 'btn btn-ghost normal-case text-xl'%>
<div class="badge mx-4 <%= 'badge-outline' if new_version_available? %> ">
<a href="https://github.com/Freika/dawarich/releases/latest" target="_blank">
<%= app_version %>
<div class="badge mx-4 <%= 'badge-outline' if new_version_available? %>">
<a href="https://github.com/Freika/dawarich/releases/latest" target="_blank" class="inline-flex items-center">
<span class="hidden sm:inline"><%= app_version %></span>
<span class="ml-1 align-middle">!</span>
<% if new_version_available? %>
<span class="tooltip tooltip-bottom" data-tip="New version available! Check out Github releases!">
&nbsp!
&nbsp;
</span>
<% end %>
</a>