Profile: Styling & layout

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
+		"<h1>Yes</h1>"
+	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

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

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
-
+      font-size: 1rem
-  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
       color: $fg_alt_clr
-      opacity: .5
-
 
-    .avatar-container
+  aside
-      display: flex
+    margin-left: 2rem
-      justify-content: center
+    #userinfo
-      img.avatar
+      margin-bottom: 1.75rem
-        width: 70%
+      text-align: center
-        height: auto
+      h2
-        border: 2px solid $special_clr
+        margin: 1rem 0 0 0
-
+        padding: 0
-  aside#roles
+        text-align: center
-    grid-area: ro
+        font-size: 1.5rem
-    ul
+        font-weight: bold
-      display: flex
+        border-bottom: none
-      flex-direction: row
+      h3
-      padding: 0
+        text-align: center
-      margin: 0
+        font-size: .8rem
-      list-style-type: none
+        margin: 0 0 1rem 0
-      height: auto
+        font-weight: normal
-      flex-wrap: wrap
-      li
-        display: flex
-        margin: .5rem
-        padding: .1rem
-        flex-direction: column
         color: $fg_alt_clr
-        background: $bg_alt_clr
+        opacity: .5
-        border: $border_size solid $shadow_clr
+      ul
-        border-radius: $border_radius
+        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
+    #roles
-    grid-area: re
+      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%
 

src/views/user/profile.slim

@@ -1,32 +1,48 @@
 #profile-container
-  aside#userinfo.card.card-container
-    h2 = user.name
-    h3 = user.role
 
-    .avatar-container
+  aside
-      img.avatar src="#{user.avatar}" alt="#{user.name}'s avatar"
+    #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
+      ul.button-container
-    h2 Roles
+        a.button href="mailto:#{user.email}"
-    .card-container
+          li Message
-      ul.roles-container
+        a.button href="/profile/#{user.id}/reputation"
-        li
+          li Rep
-          label role
+        a.button href="/profile/#{user.id}/posts"
-        li
+          li Posts 
-          label role2
+
-        li
+    #roles.card
-          label role2
+      h2 Roles
-        li
+      .card-container
-          label role2
+        ul.button-container
-        li
+          // insert roles here
-          label role2
+          li
-
+            label role
-  aside#reputation.card
+          li
-    p 100 rep
+            label role2
+          li
+            label role2
+          li
+            label role2
+          li
+            label role2
+
+    #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