Profile page header

master
Bob Mottram 2019-07-21 19:18:58 +01:00
parent 99828da5ec
commit e2a0e347c8
4 changed files with 150 additions and 11 deletions

View File

@ -59,3 +59,63 @@ body {
margin-top: 0px;
color: #999;
}
.card {
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
max-width: 300px;
margin: auto;
text-align: center;
}
.title {
color: grey;
font-size: 18px;
}
button {
border: none;
outline: 0;
display: inline-block;
padding: 8px;
color: white;
background-color: #000;
text-align: center;
cursor: pointer;
width: 100%;
font-size: 18px;
}
a {
text-decoration: none;
font-size: 22px;
color: black;
}
button:hover, a:hover {
opacity: 0.7;
}
/* The hero image */
.hero-image {
/* Use "linear-gradient" to add a darken background effect to the image (photographer.jpg). This will make the text easier to read */
/*background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("photographer.jpg");*/
/* Set a specific height */
height: 50%;
/* Position and center the image to scale nicely on all screens */
background-position: center;
background-repeat: no-repeat;
background-size: cover;
position: relative;
}
/* Place text in the middle of the image */
.hero-text {
text-align: center;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: white;
}

BIN
img/image.png 100644

Binary file not shown.

After

Width:  |  Height:  |  Size: 133 KiB

View File

@ -147,7 +147,7 @@ def createPersonBase(baseDir: str,nickname: str,domain: str,port: int, \
'availability': None,
'icon': {'mediaType': 'image/png',
'type': 'Image',
'url': httpPrefix+'://'+domain+'/users/'+nickname+'/icon.png'},
'url': httpPrefix+'://'+domain+'/users/'+nickname+'/avatar.png'},
'id': httpPrefix+'://'+domain+'/users/'+nickname,
'image': {'mediaType': 'image/png',
'type': 'Image',
@ -234,6 +234,8 @@ def createPerson(baseDir: str,nickname: str,domain: str,port: int, \
setRole(baseDir,nickname,domain,'instance','delegator')
if os.path.isfile(baseDir+'/img/default-avatar.png'):
copyfile(baseDir+'/img/default-avatar.png',baseDir+'/accounts/'+nickname+'@'+domain+'/avatar.png')
if os.path.isfile(baseDir+'/img/image.png'):
copyfile(baseDir+'/img/image.png',baseDir+'/accounts/'+nickname+'@'+domain+'/image.png')
return privateKeyPem,publicKeyPem,newPerson,webfingerEndpoint
def createSharedInbox(baseDir: str,nickname: str,domain: str,port: int, \

View File

@ -10,15 +10,23 @@ import json
from utils import getNicknameFromActor
from utils import getDomainFromActor
def htmlHeader(lang='en') -> str:
htmlStr= \
'<!DOCTYPE html>\n' \
'<html lang="'+lang+'">\n' \
' <meta charset="utf-8">\n' \
' <style>\n' \
' @import url("epicyon.css");\n' \
' </style>\n' \
' <body>\n'
def htmlHeader(css=None,lang='en') -> str:
if not css:
htmlStr= \
'<!DOCTYPE html>\n' \
'<html lang="'+lang+'">\n' \
' <meta charset="utf-8">\n' \
' <style>\n' \
' @import url("epicyon.css");\n'+ \
' </style>\n' \
' <body>\n'
else:
htmlStr= \
'<!DOCTYPE html>\n' \
'<html lang="'+lang+'">\n' \
' <meta charset="utf-8">\n' \
' <style>\n'+css+'</style>\n' \
' <body>\n'
return htmlStr
def htmlFooter() -> str:
@ -30,7 +38,76 @@ def htmlFooter() -> str:
def htmlProfile(profileJson: {}) -> str:
"""Show the profile page as html
"""
return htmlHeader()+"<h1>Profile page</h1>"+htmlFooter()
nickname=profileJson['name']
if not nickname:
return ""
preferredName=profileJson['preferredUsername']
domain,port=getDomainFromActor(profileJson['id'])
if not domain:
return ""
domainFull=domain
if port:
domainFull=domain+':'+str(port)
profileStr= \
'<div class="card">' \
'<img src="'+profileJson['icon']['url']+'" alt="John" style="width:100%">' \
'<h1>'+preferredName+'</h1>' \
'<p>@'+nickname+'@'+domainFull+'</p>' \
'<p class="title"><i>'+profileJson['publicKey']['summary']+'</i></p>' \
'<p><button>Contact</button></p>' \
'</div>'
profileStr= \
' <div class="hero-image">' \
' <div class="hero-text">' \
' <img src="'+profileJson['icon']['url']+'" alt="'+nickname+'@'+domainFull+'" style="width:100%">' \
' <h1>'+preferredName+'</h1>' \
' <p><b>@'+nickname+'@'+domainFull+'</b></p>' \
' <p>'+profileJson['publicKey']['summary']+'</p>' \
' </div>' \
'</div>'
profileStyle= \
'body, html {' \
' height: 100%;' \
' margin: 0;' \
' font-family: Arial, Helvetica, sans-serif;' \
'}' \
'' \
'.hero-image {' \
' background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("'+profileJson['id']+'/image.png");' \
' height: 50%;' \
' background-position: center;' \
' background-repeat: no-repeat;' \
' background-size: cover;' \
' position: relative;' \
'}' \
'' \
'.hero-text {' \
' text-align: center;' \
' position: absolute;' \
' top: 50%;' \
' left: 50%;' \
' transform: translate(-50%, -50%);' \
' color: white;' \
'}' \
'' \
'.hero-text button {' \
' border: none;' \
' outline: 0;' \
' display: inline-block;' \
' padding: 10px 25px;' \
' color: black;' \
' background-color: #ddd;' \
' text-align: center;' \
' cursor: pointer;' \
'}' \
'' \
'.hero-text button:hover {' \
' background-color: #555;' \
' color: white;' \
'}'
profileStr=htmlHeader(profileStyle)+profileStr+htmlFooter()
return profileStr
def htmlFollowing(followingJson: {}) -> str:
"""Show the following collection as html