elal
/
the_auctionhouse
mirror of https://github.com/E-Almqvist/the_auctionhouse
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Profile: Styling & layout

Browse Source
master
E. Almqvist 3 years ago
parent a2851668a9
commit 9881fcec47
4 changed files with 139 additions and 75 deletions
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Show Stats Download Patch File Download Diff File
  1. 13
      src/db_models.rb
  2. 2
      src/views/layout.slim
  3. 137
      src/views/stylesheets/style.sass
  4. 64
      src/views/user/profile.slim

13
src/db_models.rb
Unescape View File

@ -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

2
src/views/layout.slim
Unescape View File

@ -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

137
src/views/stylesheets/style.sass
Unescape View File

@ -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%

64
src/views/user/profile.slim
Unescape View File

@ -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
aside#reputation.card
p 100 rep
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
#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

Write Preview
Loading…
Cancel
Save