Scope the avatar positioning for events to its own class.

chrisdarroch · Jan 13, 2012 · b230993 · b230993
1 parent 1662707
commit b230993
Show file tree

Hide file tree

Showing 4 changed files with 31 additions and 19 deletions.
diff --git a/app/stylesheets/master.scss b/app/stylesheets/master.scss
@@ -26,6 +26,7 @@
 @import 'jquery/disgustingness';
 
 @import 'models/expandable';
+@import 'models/event';
 @import 'models/talk';
 
 // Page-specific content overrides

diff --git a/app/stylesheets/models/_event.scss b/app/stylesheets/models/_event.scss
@@ -0,0 +1,29 @@
+$avatar_size: 50px;
+$gap: 10px;
+
+.event {
+	@include border-radius(4px);
+	border: 1px solid transparent;
+	min-height: $avatar_size;
+	padding: $gap;
+	position: relative;
+
+	> header {
+		> .title {
+			line-height: 1;
+			margin: 0;
+		}
+	}
+
+	&.with-avatar {
+		padding-left: $avatar_size + $gap*2;
+
+		> header {
+			.avatar {
+				position: absolute;
+				left: $gap;
+				top: $gap;
+			}
+		}
+	}
+}
diff --git a/app/stylesheets/models/_talk.scss b/app/stylesheets/models/_talk.scss
@@ -1,26 +1,8 @@
-$avatar_size: 50px;
-$gap: 10px;
-
 .talk {
-	@include border-radius(4px);
-	border: 1px solid transparent;
-	min-height: $avatar_size;
-	padding: $gap;
-	padding-left: $avatar_size + $gap*2;
-	position: relative;
-
 	> header {
-		.avatar {
-			position: absolute;
-			left: $gap;
-			top: $gap;
-		}
-
 		> .title {
 			@include title-font(22px);
 			letter-spacing: 1px;
-			line-height: 1;
-			margin: 0;
 		}
 
 		> .where {

diff --git a/app/views/talks/_talk.html.haml b/app/views/talks/_talk.html.haml
@@ -1,4 +1,4 @@
-%article.talk{ :"data-id" => talk.id, :"data-start" => talk.start_at.to_time.to_i }
+%article.event.talk.with-avatar{ :"data-id" => talk.id, :"data-start" => talk.start_at.to_time.to_i }
   %header
     %h3.title
       = link_to talk.name, talk, :class => "item-link"