views/userProfile.pug
doctype html
html(lang='en')
head
title _title_
meta(charset='utf-8')
meta(name='description', content='')
meta(name='keywords', content='')
meta(name='viewport' content='width=device-width, initial-scale=1.0')
link(rel='icon', type='image/x-icon', href='./assets/public/_favicon_')
link(rel='stylesheet', href='https://code.getmdl.io/1.3.0/material.min.css')
link(rel='stylesheet', href='https://fonts.googleapis.com/icon?family=Material+Icons')
link(rel='stylesheet', href='./assets/public/css/userProfile.css', type='text/css')
link(rel='stylesheet', href='http://fonts.googleapis.com/css?family=Roboto:300,400,500,700', type='text/css')
script(src='//ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js')
script(src='https://code.getmdl.io/1.3.0/material.min.js')
style.
.mdl-textfield__input {
border-bottom: 1px solid _textColor_ !important;
font-size: 13px !important;
}
body(style='background: _bgColor_;color:_textColor_;')
.mdl-layout.mdl-js-layout.mdl-layout--fixed-header
header.mdl-layout__header.mdl-shadow--8dp(style= 'background: _navColor_; height: auto; min-width: 100%; padding-bottom: 5px; width: 100%;')
.mdl-layout__header-row
a(href='./#/' style='color: _textColor_; text-decoration:none; margin-left: -50px;')
i(class='material-icons', style='display: block;margin-bottom: auto;margin-top: auto; margin-right: 10px;') arrow_back
a(href='./#/' style='color: _textColor_; text-decoration:none;')
span(style='margin-right: 20px;')
| Back
// Logo
a(href='./#/')
img(src='assets/public/images/_logo_', style='max-height: 60px; width: auto;', alt='_title_ Logo')
// Title
a(href='./#/' style='color: _textColor_; text-decoration:none;')
span.mdl-layout-title(style='font: 500 20px/32px Roboto,"Helvetica Neue",sans-serif;')
| _title_
main.mdl-layout__content(style=' display: block; margin-left: auto; margin-right:auto;')
section.section--center.mdl-grid.mdl-grid--no-spacing
.mdl-card#card.mdl-cell.mdl-cell--12-col.mdl-shadow--8dp(style='height: auto; min-width: 300px; width: 40%; display: block; margin-left: auto; margin-right:auto; background: _primLight_; margin-bottom: 50px; margin-top: 110px;')
.mdl-card__supporting-text.mdl-grid.mdl-grid--no-spacing
h1.mdl-cell.mdl-cell--12-col(style='color: _textColor_; font-size: 24px; line-height: 32px; margin-top: 16px; margin-bottom: 16px; font-weight: 400;') User Profile
.mdl-cell.mdl-cell--6-col-desktop.mdl-cell--12-col-tablet.mdl-cell--12-col-phone
img.img-rounded(src=profileImage, alt='profile picture', width='90%', height='236', style='margin-right: 5%; margin-left: 5%;')
p(style='margin-top:8%; color: _textColor_; text-align: center;') _username_
form(action='./profile/image/file' , style='margin-top:10%; width: 90%; margin-right: auto; margin-left: auto;', method='post', enctype='multipart/form-data')
.form-group
label(for='picture', style='color: _textColor_; font-size: 12px;') File Upload:
input#picture(type='file', accept='image/*', name='file', size='150', style='color: _textColor_; margin-top: 4px;', aria-label='Input for selecting the profile picture')
.mdl-tooltip(for='picture', style='width: 150px; text-align: left;')
| • Maximum file size 150Kb
br
| • All image formats are accepted
button.mdl-button.mdl-js-button.mdl-button--raised.mdl-js-ripple-effect(type='submit', style='background-color:_navColor_; color: _textColor_; margin-top: 3%; text-transform: capitalize;', aria-label='Button to upload the profile picture') Upload Picture
.breakLine(style='margin-top: 3%; margin-bottom: 3%; width: 90%; margin-right: auto; margin-left: auto;')
.line
div
.textOnLine(style='color: _textColor_;') or
.line
div
form(action='./profile/image/url' , style='margin-top:5%; width: 90%; margin-right: auto; margin-left: auto;', method='post')
.form-group
.mdl-textfield.mdl-js-textfield.mdl-textfield--floating-label(style='width: 100%;')
input#url.form-control.mdl-textfield__input(type='text', name='imageUrl', style='color: _textColor_;', placeholder='e.g. https://www.gravatar.com/avatar/_emailHash_', aria-label='Text field for the image link')
label.mdl-textfield__label(for='url', style='color: _textColor_;') Image URL:
button(id='submitUrl', type='submit', style='background-color:_navColor_; color: _textColor_; margin-top: -10px; text-transform: capitalize;', aria-label='Button to include image from link').mdl-button.mdl-js-button.mdl-button--raised.mdl-js-ripple-effect Link Image
p(style='margin-bottom:10%;')
.mdl-cell.mdl-cell--6-col-desktop.mdl-cell--12-col-tablet.mdl-cell--12-col-phone
form(action='./profile', method='post', style='width: 90%; margin-right: auto; margin-left: auto;')
.form-group
.mdl-textfield.mdl-js-textfield.mdl-textfield--floating-label(style='width: 100%; opacity: 0.7')
input#email.form-control.mdl-textfield__input(type='email', name='email', value=email, disabled=true, style='color: _textColor_;', aria-label='Disabled - Text field for the email')
label.mdl-textfield__label(for='email', style='color: _textColor_;') Email:
.form-group
.mdl-textfield.mdl-js-textfield.mdl-textfield--floating-label(style='width: 100%;')
input#username.form-control.mdl-textfield__input(type='text', name='username', value=username ,style='color: _textColor_;', placeholder='e.g. SuperUser', aria-label='Text field for the username')
label.mdl-textfield__label(for='username', style='color: _textColor_;') Username:
button(id='submit', type='submit', style='background-color:_navColor_; color: _textColor_; margin-top: -10px; text-transform: capitalize;', aria-label='Button to save/set the username').mdl-button.mdl-js-button.mdl-button--raised.mdl-js-ripple-effect Set Username
p(style='margin-bottom:10%;')