beginnings of device profile w/ reusable maps and metadata components

app/assets/stylesheets/application.scss

@@ -24,3 +24,4 @@
 @import "device";
 @import "components/profile_header";
 @import "components/copyable_input";
+@import "components/device_map";

app/assets/stylesheets/components/device_map.scss

@@ -0,0 +1,4 @@
+.device-map {
+  width: 100%;
+  height: 100%;
+}

app/assets/stylesheets/components/profile_header.scss

@@ -1,6 +1,14 @@
-.user-profile-header {
+.profile-header {
   h1 {
     line-height: 1.6rem !important;
     padding-bottom: 0.4rem !important;
   }
+
+  a {
+    color: $white !important;
+    text-decoration: underline;
+    &:hover {
+      text-decoration: none;
+    }
+  }
 }

app/assets/stylesheets/device.scss

@@ -12,8 +12,6 @@
   }
 
   .device-map {
-    width:100%;
-    height: 100%;
     aspect-ratio: 1.66;
   }
 

app/controllers/ui/application_controller.rb

@@ -3,6 +3,8 @@ class ApplicationController < ActionController::Base
     layout "application"
     include SharedControllerMethods
 
+    include UserHelper
+
     def add_breadcrumbs(*crumbs)
       crumbs.each do |crumb|
         add_breadcrumb(*crumb)

app/controllers/ui/devices_controller.rb

@@ -3,7 +3,10 @@ class DevicesController < ApplicationController
     def show
       find_device!
       @title = I18n.t(:show_device_title, name: @device.name)
-      add_breadcrumb(@title, ui_device_path(@device.id))
+      add_breadcrumbs(
+        [I18n.t(:show_user_title, owner: possessive(@device.owner, current_user)), ui_user_path(@device.owner.username)],
+        [@title, ui_device_path(@device.id)]
+      )
       render "show", layout: "base"
     end
 

app/views/ui/devices/_device.html.erb

@@ -3,26 +3,10 @@
     <span class="sr-only"><%= device.name %></span>
   <% end %>
   <div class="col-12 col-md-3">
-    <div class="device-map" data-latitude="<%= device.latitude %>" data-longitude="<%= device.longitude %>" data-marker-url="<%= asset_url("map-pin.svg") %>" data-marker-shadow-url="<%= asset_url("map-pin-shadow.png") %>"></div>
+    <%= render partial: "ui/devices/map", locals: { device: device} %>
   </div>
   <div class="col-12 col-md-9 p-3 pb-4">
     <h3 class="mb-1"><%= device.name %></h3>
-    <p class="mb-0 small"><strong><%= device.hardware_name %></strong></p>
-    <p class="mb-0 small">
-      <%= image_tag("location_icon.svg", class: "pe-1") %>
-      <%= [device.city, device.country_name].compact.join(", ") %>
-    </p>
-    <p class="mb-0 small">
-      <%= image_tag("clock-fill.svg", class: "pe-1") %>
-      <% if device.last_reading_at %>
-        <%= t :device_last_reading_at, time: time_ago_in_words(device.last_reading_at) %>
-      <% else %>
-        <%= t :device_no_readings_message %>
-      <% end %>
-    </p>
-    <p class="mb-0 small">
-      <%= image_tag("tag_icon.svg", class: "pe-1") %>
-      <%= device.all_tags.join(", ") %>
-    </p>
+    <%= render partial: "ui/devices/meta", locals: { device: device, hide_owner: local_assigns[:hide_owner] } %>
   </div>
 </div>

app/views/ui/devices/_map.html.erb

@@ -0,0 +1 @@
+<div class="device-map" data-latitude="<%= device.latitude %>" data-longitude="<%= device.longitude %>" data-marker-url="<%= asset_url("map-pin.svg") %>" data-marker-shadow-url="<%= asset_url("map-pin-shadow.png") %>"></div>

app/views/ui/devices/_meta.html.erb

@@ -0,0 +1,23 @@
+<p class="mb-0 small"><strong><%= device.hardware_name %></strong></p>
+<% unless local_assigns[:hide_owner] %>
+  <p class="mb-0 small">
+  <span class="pe-1"><%= show_svg("user_details_icon_light.svg") %></span>
+    <%= link_to(device.owner.username, ui_user_path(device.owner.username)) %>
+  </p>
+<% end %>
+<p class="mb-0 small">
+  <span class="pe-1"><%= show_svg("location_icon.svg") %></span>
+  <%= [device.city, device.country_name].compact.join(", ") %>
+</p>
+<p class="mb-0 small">
+  <span class="pe-1"><%= show_svg("clock-fill.svg") %></span>
+  <% if device.last_reading_at %>
+    <%= t :device_meta_last_reading_at, time: time_ago_in_words(device.last_reading_at) %>
+  <% else %>
+    <%= t :device_meta_no_readings_message %>
+  <% end %>
+</p>
+<p class="mb-0 small">
+  <span class="pe-1"><%= show_svg("tag_icon.svg") %></span>
+  <%= device.all_tags.join(", ") %>
+</p>

app/views/ui/devices/show.html.erb

@@ -1,8 +1,10 @@
 <% content_for :profile_header_image do %>
-  IMAGE
+  <div class="circular-image-crop">
+    <%= render partial: "ui/devices/map", locals: { device: @device } %>
+  </div>
 <% end %>
 <% content_for :profile_header_meta do %>
-  META
+  <%= render partial: "ui/devices/meta", locals: { device: @device } %>
 <% end %>
 <% content_for :profile_header_actions do %>
   ACTIONS

app/views/ui/users/show.html.erb

@@ -23,7 +23,7 @@
             <% end %>
           <% end %>
         </div>
-        <%= render partial: "ui/devices/device", collection: @user.devices.for_user(current_user) %>
+        <%= render partial: "ui/devices/device", collection: @user.devices.for_user(current_user), locals: { hide_owner: true } %>
       <% end %>
     </div>
   </div>

config/locales/views/devices/en.yml

@@ -1,3 +1,3 @@
 en:
-  device_last_reading_at: "Last reading %{time} ago"
-  device_no_readings_message: "No readings received yet!"
+  device_meta_last_reading_at: "Last reading %{time} ago"
+  device_meta_no_readings_message: "No readings received yet!"