diff --git a/src/db_models.rb b/src/db_models.rb index f08494e..e000cec 100644 --- a/src/db_models.rb +++ b/src/db_models.rb @@ -21,6 +21,19 @@ class User < EntityModel "INSERT ROLE HERE" end + def has_bad_rep? + @reputation < 0 + end + + def bio_html + "

Yes

" + end + + def reputation_text + sign = @reputation > 0 ? "+" : "" + return "#{sign}#{@reputation}" + end + # Find user by ID, returns a user object def self.find_by_id(id) data = self.get("*", "id = ?", id).first diff --git a/src/views/layout.slim b/src/views/layout.slim index 0e0f280..4210c28 100644 --- a/src/views/layout.slim +++ b/src/views/layout.slim @@ -7,7 +7,7 @@ html lang="en" body header div - a#logo_container href="/" target="_self" + a.inlbutton#logo_container href="/" target="_self" h1 = "The Auction House" h2 = get_random_subtitle nav diff --git a/src/views/stylesheets/style.sass b/src/views/stylesheets/style.sass index 0afa632..aa770a0 100644 --- a/src/views/stylesheets/style.sass +++ b/src/views/stylesheets/style.sass @@ -12,6 +12,8 @@ $fg_alt_clr: #eee $fg_error: #f77 $shadow_clr: #4b5263 +$green_clr: #5cb85c +$red_clr: #de2a1d $special_clr: #4776C1 @@ -98,6 +100,11 @@ body color: $fg_alt_clr background-color: $special_clr +.inlbutton + transition: opacity .2s +.inlbutton:hover + opacity: .6 + a.button display: inline-block text-decoration: none @@ -121,7 +128,25 @@ img.avatar border-radius: 50% border: 2px solid $shadow_clr -// Forms +ul.button-container + display: flex + flex-direction: row + justify-content: center + padding: 0 + margin: 0 + list-style-type: none + height: auto + flex-wrap: wrap + li + display: flex + margin: .5rem + padding: .025rem .4rem + flex-direction: column + color: $fg_alt_clr + background: $bg_alt_clr + border: $border_size solid $shadow_clr + border-radius: $border_radius + .form-container display: flex justify-content: center @@ -148,7 +173,7 @@ img.avatar font-size: 2.2rem input - border-radius: $border_radius + border-radius: 2rem background: $bg_alt_clr border: 3px solid $shadow_clr color: $fg_alt_clr @@ -167,18 +192,20 @@ img.avatar input:not(:last-child) margin-bottom: 1rem +.green + color: $green_clr +.red + color: $red_clr + // Profiles #profile-container - display: grid + display: flex + flex-direction: row-reverse width: 100% height: 100% max-width: 70rem - gap: 2rem padding: 2rem padding-bottom: 0 - grid-template-columns: 2fr 20rem - grid-template-rows: 1fr 10rem 14rem - grid-template-areas: "mb ui" "mb ro" "mb re" .card-container padding: 0 1rem @@ -187,57 +214,65 @@ img.avatar background-color: $bg_dark_clr border: $border_size solid $shadow_clr border-radius: $border_radius - h2 - text-align: center + text-align: left + padding-left: .8rem margin: 0 border-bottom: $border_size solid $shadow_clr - - aside#userinfo - grid-area: ui - text-align: center - h2 - margin: 1rem 0 0 0 - font-weight: bold - border-bottom: none - h3 - margin: 0 0 1rem 0 - font-weight: normal + font-size: 1rem color: $fg_alt_clr - opacity: .5 - - .avatar-container - display: flex - justify-content: center - img.avatar - width: 70% - height: auto - border: 2px solid $special_clr - - aside#roles - grid-area: ro - ul - display: flex - flex-direction: row - padding: 0 - margin: 0 - list-style-type: none - height: auto - flex-wrap: wrap - li - display: flex - margin: .5rem - padding: .1rem - flex-direction: column + aside + margin-left: 2rem + #userinfo + margin-bottom: 1.75rem + text-align: center + h2 + margin: 1rem 0 0 0 + padding: 0 + text-align: center + font-size: 1.5rem + font-weight: bold + border-bottom: none + h3 + text-align: center + font-size: .8rem + margin: 0 0 1rem 0 + font-weight: normal color: $fg_alt_clr - background: $bg_alt_clr - border: $border_size solid $shadow_clr - border-radius: $border_radius + opacity: .5 + ul + margin: 1rem 0 + flex-wrap: nowrap + a.button + padding: 0 + p + text-align: center + color: $fg_alt_clr + max-width: 20rem + .avatar-container + display: flex + justify-content: center + img.avatar + width: 70% + height: auto + border: 2px solid $special_clr - aside#reputation - grid-area: re + #roles + margin-bottom: 1.75rem + + #reputation + text-align: center + h3 + margin: 0 + font-size: 1.6rem + h4 + margin: 0 + font-weight: normal + color: $shadow_clr + opacity: .8 #bio - grid-area: mb + min-height: 14rem + width: 100% diff --git a/src/views/user/profile.slim b/src/views/user/profile.slim index 9597b4a..d1842ce 100644 --- a/src/views/user/profile.slim +++ b/src/views/user/profile.slim @@ -1,32 +1,48 @@ #profile-container - aside#userinfo.card.card-container - h2 = user.name - h3 = user.role - .avatar-container - img.avatar src="#{user.avatar}" alt="#{user.name}'s avatar" + aside + #userinfo.card.card-container + h2 = user.name + h3 = user.role - p = user.bio_text + .avatar-container + img.avatar src="#{user.avatar}" alt="#{user.name}'s avatar" - aside#roles.card - h2 Roles - .card-container - ul.roles-container - li - label role - li - label role2 - li - label role2 - li - label role2 - li - label role2 + ul.button-container + a.button href="mailto:#{user.email}" + li Message + a.button href="/profile/#{user.id}/reputation" + li Rep + a.button href="/profile/#{user.id}/posts" + li Posts + + #roles.card + h2 Roles + .card-container + ul.button-container + // insert roles here + li + label role + li + label role2 + li + label role2 + li + label role2 + li + label role2 - aside#reputation.card - p 100 rep + #reputation.card + h2 Reputation + - unless user.has_bad_rep? + h3.green = user.reputation_text + - else + h3.red = user.reputation_text + h4 Based on user reviews #bio.card - p markdown stuff here... + h2 User biography + .card-container + == user.bio_html