diff --git a/app/assets/javascripts/backbone/apps/users/list/list_view.js b/app/assets/javascripts/backbone/apps/users/list/list_view.js index 1c7ee1b..2f7729b 100644 --- a/app/assets/javascripts/backbone/apps/users/list/list_view.js +++ b/app/assets/javascripts/backbone/apps/users/list/list_view.js @@ -8,8 +8,8 @@ this.VelhaMania.module('UsersApp.List', function(List, App, Backbone, Marionette List.UserView = Marionette.ItemView.extend({ template: 'users/list/templates/user', - className: 'user-item', tagName: 'li', + className: 'user-item', triggers: { 'click': 'user:clicked' }, diff --git a/app/assets/javascripts/backbone/apps/users/list/templates/user.jst.jade b/app/assets/javascripts/backbone/apps/users/list/templates/user.jst.jade index 252e982..95dda97 100644 --- a/app/assets/javascripts/backbone/apps/users/list/templates/user.jst.jade +++ b/app/assets/javascripts/backbone/apps/users/list/templates/user.jst.jade @@ -1,2 +1,7 @@ -img(src= avatar) -span.username= username \ No newline at end of file +.user.waves-effect + .user-avatar + img(src= avatar) + .user-username + span.username= username + +.divider \ No newline at end of file diff --git a/app/assets/stylesheets/application.scss b/app/assets/stylesheets/application.scss index e0310c0..f45de3c 100644 --- a/app/assets/stylesheets/application.scss +++ b/app/assets/stylesheets/application.scss @@ -25,6 +25,7 @@ // ------------------------------------- @import "components/grid"; +@import "components/waves"; // ------------------------------------- // Structures @@ -33,6 +34,7 @@ @import "structures/body"; @import "structures/nav"; @import "structures/login"; +@import "structures/user"; // ------------------------------------- // Inbox diff --git a/app/assets/stylesheets/components/_waves.sass b/app/assets/stylesheets/components/_waves.sass new file mode 100644 index 0000000..972cab1 --- /dev/null +++ b/app/assets/stylesheets/components/_waves.sass @@ -0,0 +1,10 @@ +// ************************************* +// +// Waves +// +// ************************************* + +// ----- Colors ----- // + +.waves-blue .waves-ripple + background-color: $c-waves-blue-background \ No newline at end of file diff --git a/app/assets/stylesheets/foundation/_config.sass b/app/assets/stylesheets/foundation/_config.sass index 86e6b3f..364e857 100644 --- a/app/assets/stylesheets/foundation/_config.sass +++ b/app/assets/stylesheets/foundation/_config.sass @@ -25,6 +25,7 @@ $blue: #053554 $light-blue: #155F8E +$light-blue-opacify: rgba(179, 222, 228, 0.2) $dark-blue: #3D6884 $white: #FFF @@ -42,19 +43,40 @@ $c-highlight: lighten($blue, 90%) // ----- Structures ----- // +// ----- Nav ----- // + $c-nav-background: $blue +// ----- Button ----- // + $c-button-background: $blue $c-button-highlight-background: $light-blue +// ----- Form ----- // + $c-form-background: $white -$c-input-focus: $light-blue +// ----- Inputs ----- // + +$c-input-focus: $light-blue $c-input-border-is-invalid: $error-color + +// ----- Label ----- // + $c-label-is-invalid: $error-color +// ----- Logo ----- // + $c-brand-logo: $dark-blue +// ----- Username ----- // + +$c-username-color: $dark-blue + +// ----- Waves ----- // + +$c-waves-blue-background: $light-blue-opacify + // ------------------------------------- // Base // ------------------------------------- @@ -89,6 +111,14 @@ $b-space-m: $b-space * $b-space-scale * 3 $b-space-l: $b-space * $b-space-scale * 4 $b-space-xl: $b-space * $b-space-scale * 5 +// ----- User List Space ----- // + +$b-user-list-space: $b-space + +// ----- User Item Space ----- // + +$b-user-item-space: $b-space + // ------------------------------------- // Components // ------------------------------------- diff --git a/app/assets/stylesheets/structures/_user.sass b/app/assets/stylesheets/structures/_user.sass new file mode 100644 index 0000000..604e108 --- /dev/null +++ b/app/assets/stylesheets/structures/_user.sass @@ -0,0 +1,59 @@ +// ************************************* +// +// User +// +// ************************************* + +.user + @extend .row + @extend .waves-blue + height: em(70px) + margin-bottom: 0 + padding: $b-user-item-space + width: 100% + +// ------------------------------------- +// Scaffolding +// ------------------------------------- + +// -------- List -------- // + +.user-list + @extend .card + margin: em($b-user-list-space) auto 0 + min-width: em(200px) + max-width: em(500px) + padding: $b-user-list-space + +// -------- Item -------- // + +.user-item + width: 100% + +// -------- Avatar -------- // + +.user-avatar + @extend .col + @extend .m3 + @extend .s12 + @extend .card-image + height: em(50px) + text-align: center + img + height: em(50px) + width: em(50px) !important + +// -------- Username -------- // + +.user-username + @extend .col + @extend .m9 + @extend .s12 + @extend .card-content + line-height: em(50px) + height: em(50px) + padding: 0 !important + span + @extend .card-title + color: $c-username-color !important + font-weight: 100 \ No newline at end of file