flex on location name container

pinballmap · Oct 18, 2024 · c91fa84 · c91fa84
1 parent 49cb267
commit c91fa84
Show file tree

Hide file tree

Showing 2 changed files with 49 additions and 31 deletions.
diff --git a/app/assets/stylesheets/application.scss.erb b/app/assets/stylesheets/application.scss.erb
@@ -1424,13 +1424,20 @@ form select#by_operator_id {
   top: 175px;
 }
 
-.name {
+.location_name_container {
   height: 100%;
-  color: #f5f5ff;
   background-color: var(--grey);
   @include radius(10px 10px 0 0);
-  padding: 10px 120px 10px 10px;
+  padding: 10px 10px 10px 10px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.location_name {
+  color: #f5f5ff;
   font-family: $Nunito_800ExtraBold;
+  padding-right: 10px;
 }
 
 .pr_30 {
@@ -1459,9 +1466,8 @@ form select#by_operator_id {
 }
 
 .location_tools {
-  float: right;
-  margin-top: -35px;
-  padding-right: 5px;
+  min-width: 120px;
+  height: 26px;
 }
 
 .location_tools img {
@@ -1854,6 +1860,11 @@ div.machine_condition_meta {
   padding: 10px;
 }
 
+.add_machine_location,
+.add_picture_location {
+  padding: 0 10px 10px 10px;
+}
+
 .add_picture_location span.info,
 .add_machine_location span.info,
 .show_machines_location span.info {
@@ -2460,6 +2471,12 @@ input.score {
 
 .show_location_detail_location .name {
   padding-bottom: 10px;
+  height: 100%;
+  color: #f5f5ff;
+  background-color: var(--grey);
+  border-radius: 10px 10px 0 0;
+  padding: 10px 120px 10px 10px;
+  font-family: "Nunito_800ExtraBold", Helvetica, Arial, sans-serif;
 }
 
 .show_location_detail_location .address {

diff --git a/app/views/locations/_render_location_detail.html.haml b/app/views/locations/_render_location_detail.html.haml
@@ -1,30 +1,31 @@
-%div{:class => "bold font22 name"}
-	=l.name
-%div.location_tools.pointer
-	- if !user_signed_in?
-		=link_to new_user_session_path, :class => "no_underline" do
-			=image_tag('icons/confirm-location.svg', :class => 'confirm_button')
+%div.location_name_container	
+	%div{:class => "bold font22 location_name"}
+		=l.name
+	%div.location_tools.pointer
+		- if !user_signed_in?
+			=link_to new_user_session_path, :class => "no_underline" do
+				=image_tag('icons/confirm-location.svg', :class => 'confirm_button')
+				%span.confirm_location_tooltip
+					Confirm Line-Up
+				=image_tag('icons/lead-pencil.svg', :class => 'meta_image_notlogged')
+				%span.meta_image_tooltip
+					Update Location Info
+				=image_tag( 'icons/heart-empty.svg', :alt => 'fave this location', :class => 'fave_location')
+				%span.fave_location_tooltip
+					Favorite This Location
+		- else
+			=image_tag('icons/confirm-location.svg', :class => 'confirm_button', :id => "confirm_location_button_#{l.id}")
 			%span.confirm_location_tooltip
 				Confirm Line-Up
-			=image_tag('icons/lead-pencil.svg', :class => 'meta_image_notlogged')
+			=image_tag('icons/lead-pencil.svg', :class => 'meta_image')
 			%span.meta_image_tooltip
 				Update Location Info
-			=image_tag( 'icons/heart-empty.svg', :alt => 'fave this location', :class => 'fave_location')
+			=image_tag( l.user_fave?(current_user.id) ? 'icons/heart-filled.svg' : 'icons/heart-empty.svg', :alt => 'fave this location', :id => "fave_location_img_#{l.id}", :class => 'fave_location')
 			%span.fave_location_tooltip
 				Favorite This Location
-	- else
-		=image_tag('icons/confirm-location.svg', :class => 'confirm_button', :id => "confirm_location_button_#{l.id}")
-		%span.confirm_location_tooltip
-			Confirm Line-Up
-		=image_tag('icons/lead-pencil.svg', :class => 'meta_image')
-		%span.meta_image_tooltip
-			Update Location Info
-		=image_tag( l.user_fave?(current_user.id) ? 'icons/heart-filled.svg' : 'icons/heart-empty.svg', :alt => 'fave this location', :id => "fave_location_img_#{l.id}", :class => 'fave_location')
-		%span.fave_location_tooltip
-			Favorite This Location
-	=link_to image_tag( 'icons/link-variant.svg' ), "/#{@region ? l.region.name.downcase : 'map'}/?by_location_id=#{l.id}", :id => l.id, :alt => 'link to this location', :class => 'permalink'
-	%span.permalink_tooltip
-		Location Permalink
+		=link_to image_tag( 'icons/link-variant.svg' ), "/#{@region ? l.region.name.downcase : 'map'}/?by_location_id=#{l.id}", :id => l.id, :alt => 'link to this location', :class => 'permalink'
+		%span.permalink_tooltip
+			Location Permalink
 %div.m_10[l, :metadata]
 	= render :partial => 'locations/render_update_metadata', :locals => {:l => l}
 %div.location_thumbs[l, :thumbs]
@@ -55,17 +56,17 @@
 	- icon_path = image_tag('icons/newspaper-variant-multiple-outline.svg', :alt => 'Recent Activity Icon', :class => 'banner_icon recent_activity')
 	%div.quick_button_sub_container
 		= quick_buttons('recent_location_activity_location', icon_path, l)
-		%div.quick_button_desc Recent Activity
+		%div.quick_button_desc Recent activity
 
 	- icon_path2 = image_tag('machine-pink.png', :alt => 'Recent Activity Icon', :class => 'banner_icon former_machines')
 	%div.quick_button_sub_container
 		= quick_buttons('former_machines_location', icon_path2, l)
 		%div.quick_button_desc Former machines
-
-= render :partial => 'locations/recent_activity', :locals => {:location => l}
-= render :partial => 'locations/former_machines', :locals => {:location => l}
+
 = render :partial => 'locations/add_machine', :locals => {:location => l}
 = render :partial => 'location_picture_xrefs/add_picture', :locals => {:location => l}
+= render :partial => 'locations/recent_activity', :locals => {:location => l}
+= render :partial => 'locations/former_machines', :locals => {:location => l}
 = render :partial => 'locations/render_machines_count', :locals => {:location => l}
 = render :partial => 'locations/show_machines', :locals => {:location => l}