Restyled workshop previews and added interest buttons to home page

app/assets/stylesheets/_application.scss

@@ -2759,41 +2759,42 @@ html[data-lingua-franca-example="html"] {
 	}
 }
 
-.workshop-list {
+#main .workshop-list {
 	list-style: none;
 	padding: 0;
 
 	.workshop-description {
-		font-size: 0.8em;
+		font-size: 0.9em;
 		max-height: 20em;
 		padding: 1em;
 		overflow: hidden;
 	}
 
-	.workshop-link {
+	// .workshop-link {
-		position: static;
+	// 	position: static;
 
-		@include before {
+	// 	@include before {
-			content: '';
+	// 		content: '';
-			display: block;
+	// 		display: block;
-			position: absolute;
+	// 		position: absolute;
-			top: 0;
+	// 		top: 0;
-			right: 0;
+	// 		right: 0;
-			bottom: 0;
+	// 		bottom: 0;
-			left: 0
+	// 		left: 0
-		}
+	// 	}
-		@include after {
+	// 	@include after {
-			display: none;
+	// 		display: none;
-		}
+	// 	}
-	}
+	// }
 
 	> li {
 		position: relative;
 		margin-bottom: 1em;
-		border: 0.2em solid;
+		border-bottom: 0.1rem solid #EEE;
-		@include _(border-radius, 0.25em);
+		// border: 0.2em solid;
-		@include _(transition, box-shadow 250ms ease-in-out);
+		// @include _(border-radius, 0.25em);
-		will-change: box-shadow;
+		// @include _(transition, box-shadow 250ms ease-in-out);
+		// will-change: box-shadow;
 
 		ul {
 			padding-left: 2.5em;
@@ -2804,40 +2805,64 @@ html[data-lingua-franca-example="html"] {
 			border: 0;
 		}
 
-		&:hover {
+		&:last-child {
-			@include default-box-shadow;
+			border: 0;
 		}
 
+		// &:hover {
+		// 	@include default-box-shadow;
+		// }
+
 		&.interested {
 			.workshop-interest {
-				background-color: rgba($colour-5, 0.5);
+				// background-color: rgba($colour-5, 0.5);
 			}
 		}
 
 		&.mine {
 			.workshop-interest {
-				background-color: lighten($colour-1, 25%);
+				// background-color: lighten($colour-1, 25%);
-				background-color: rgba($colour-1, 0.5);
+				// background-color: rgba($colour-1, 0.5);
 			}
 		}
 	}
 
+	.actions {
+		position: relative;
+		margin: 0;
+		@include _(box-shadow, 0 -1em 1em $white);
+	}
+
 	.title {
 		margin: 0;
-		background-color: $black;
+		// background-color: $black;
-		color: #FFF;
+		// color: #FFF;
-		padding: 0.25em 0.5em 0.5em;
+		// padding: 0.25em 0.5em 0.5em;
 	}
 
 	p {
-		margin-top: 0;
+		margin: 0;
 		font-size: 1em;
 	}
 
 	.workshop-interest {
-		padding: 0.5em 1em;
+		// padding: 0.5em 1em;
-		font-weight: bold;
+		// font-weight: bold;
-		background-color: #EEE;
+		// background-color: #EEE;
+	}
+	
+	.interest-button {
+		button {
+			margin: 0 0 0 1em;
+			font-size: 0.8em;
+			padding-top: 0.333em;
+			padding-bottom: 0.333em;
+			background-color: $colour-5;
+		}
+	}
+
+	h5, h6 {
+		margin: 1em 0 0;
 	}
 }
 
@@ -2859,14 +2884,14 @@ html[data-lingua-franca-example="html"] {
 		}
 	}
 
-	body.home & {
+	// body.home & {
-		text-align: left;
+	// 	text-align: left;
-		font-style: italic;
+	// 	font-style: italic;
-		color: #888;
+	// 	color: #888;
-		margin-top: -0.5em;
+	// 	margin-top: -0.5em;
-		margin-bottom: -0.5em;
+	// 	margin-bottom: -0.5em;
-		margin-left: 1em;
+	// 	margin-left: 1em;
-	}
+	// }
 }
 
 .original-text {

app/helpers/application_helper.rb

@@ -916,6 +916,14 @@ module ApplicationHelper
 			(button_tag interested, :value => :toggle_interest, :class => (workshop.interested?(current_user) ? :delete : :add), aria: { labelledby: id })
 	end
 
+	def interest_text(workshop)
+		if workshop.interested?(current_user)
+			return _'articles.workshops.info.you_are_interested_count', :vars => {:count => (workshop.interested_count - 1)}
+		end
+
+		return _'articles.workshops.info.interested_count', :vars => {:count => workshop.interested_count}
+	end
+
 	def host_guests_widget(registration)
 		html = ''
 		classes = ['host']

app/models/workshop.rb

@@ -76,7 +76,7 @@ class Workshop < ActiveRecord::Base
     end
 
     def can_show_interest?(user)
-        !active_facilitator?(user)
+        user.present? && !active_facilitator?(user)
     end
 
     def interested?(user)

app/views/application/home.html.haml

@@ -13,13 +13,4 @@
 				- if @conference.registration_status == :open
 					%h3=_'articles.workshops.headings.Proposed_Workshops'
 					%p=_'articles.workshops.paragraphs.Proposed_Workshops'
-					%ul.workshop-list
+					= render 'workshops/workshop_previews', :workshops => @conference.workshops
-						- (@conference.workshops || []).sort_by{ |w| w.title.downcase }.each do |w|
-							%li
-								%h4=w.title
-								.workshop-interest
-									- if w.interested?(current_user)
-										=_'articles.workshops.info.you_are_interested_count', :vars => {:count => (w.interested_count - 1)}
-									- elsif w.interested_count > 0
-										=_'articles.workshops.info.interested_count', :vars => {:count => w.interested_count}
-								.workshop-description=markdown w.info

app/views/workshops/_show.html.haml

@@ -3,13 +3,12 @@
 	= columns(medium: 12) do
 		%h2=_!workshop.title
 		.workshop-interest
-			- if workshop.interested?(current_user)
+			- if workshop.can_show_interest?(current_user)
-				=_'articles.workshops.info.you_are_interested_count', "You and #{workshop.interested_count - 1} others are interested in this workshop", :vars => {:count => (workshop.interested_count - 1)}
-			- else
-				=_'articles.workshops.info.interested_count', "#{workshop.interested_count} people are interested in this workshop", :vars => {:count => workshop.interested_count}
-			- if preview.blank? && workshop.can_show_interest?(current_user)
 				= form_tag toggle_workshop_interest_path(workshop.conference.slug, workshop.id), class: 'js-xhr' do
+					%span.interest-text=interest_text(workshop)
 					%span.interest-button=interest_button(workshop)
+			- else
+				%span.interest-text=interest_text(workshop)
 		= richtext workshop.info
 		- if preview.blank? && translations_available_for_editing
 			.actions

app/views/workshops/_workshop_previews.html.haml

@@ -2,11 +2,14 @@
 	- workshops.sort_by{ |w| w.title.downcase }.each do |w|
 		- is_interested = w.interested?(current_user)
 		%li{class: [is_interested ? :interested : nil]}
-			= link_to view_workshop_path(w.conference.slug, w.id), class: 'workshop-link' do
 			%h4.title=w.title
 			.workshop-interest
-				- if is_interested
+				- if w.can_show_interest?(current_user)
-					=_'articles.workshops.info.you_are_interested_count', "You and #{w.interested_count - 1} others are interested in this workshop", :vars => {:count => (w.interested_count - 1)}
+					= form_tag toggle_workshop_interest_path(w.conference.slug, w.id), class: 'js-xhr' do
+						%span.interest-text=interest_text(w)
+						%span.interest-button=interest_button(w)
 				- elsif w.interested_count > 0
-					=_'articles.workshops.info.interested_count', "#{w.interested_count} people are interested in this workshop", :vars => {:count => w.interested_count}
+					%span.interest-text=interest_text(w)
-			.workshop-description=w.info.html_safe
+			.workshop-description=richtext w.info, 4
+			.actions.right
+				= link_to (_'articles.workshops.info.read_more'), view_workshop_path(w.conference.slug, w.id), class: 'workshop-link', class: [:button, :small]

config/locales/en.yml

@@ -5614,6 +5614,7 @@ en:
           one: You and one other are interested in this workshop
           other: You and %{count} others are interested in this workshop
           zero: You are interested in this workshop
+        read_more: More info
     user_settings:
       headings:
         Your_Account: Account Settings