Style account settings page (doesn't actually work yet)

This commit is contained in:
James Allen 2014-06-09 10:56:26 +01:00
parent 05b8bc36ec
commit 2c73ca509b
4 changed files with 62 additions and 170 deletions

View file

@ -1,53 +1,54 @@
extends ../layout
block content
include ../general/sidebar
.content.content-alt
.container
.row
.col-md-10.col-md-offset-1.col-lg-8.col-lg-offset-2
.card
.page-header
h1 Account Settings
.messageArea
.container-fluid
.row
.col-md-5
h3 Update Account Info
form#userSettings
input(type="hidden", name="_csrf", value=csrfToken)
.form-group
label(for='email') Email
input#emailAddress.form-control(type='email', name='email', value=user.email)
.form-group
label(for='firstName').control-label First Name
input#firstName.form-control(type='text', name='first_name', value=user.first_name)
.form-group
label(for='lastName').control-label Last Name
input#lastName.form-control(type='text', name='last_name', value=user.last_name)
.actions
button.btn.btn-primary(type='submit') Update
.content-with-navigation-sidebar
.box
.row-fluid
.span12
.page-header
h1 Settings
.messageArea
.tabbable
ul.nav.nav-tabs
li.active
a(href='#personalSettings', data-toggle="tab") Personal
li
a(href='#editorSettings', data-toggle="tab") Editor
li
a(href='#passwordReset', data-toggle="tab") Password
li
a(href='#newsletter', data-toggle="tab") Newsletter
li
a(href='#dropboxSettings', data-toggle="tab") Dropbox
span.label.label-warning beta
li
a(href='#deleteAccount', data-toggle="tab") Delete Account
form#userSettings.tab-content.form-horizontal
input(type="hidden", name="_csrf", value=csrfToken)
.tab-pane#personalSettings.active
.control-group
label(for='firstName').control-label Email
.controls
input#emailAddress(type='email', name='email', value=user.email)
.control-group
label(for='firstName').control-label First Name
.controls
input#firstName(type='text', name='first_name', value=user.first_name)
.control-group
label(for='lastName').control-label Last Name
.controls
input#lastName(type='text', name='last_name', value=user.last_name)
.form-actions
button.btn.btn-primary.large(type='submit') Update
.col-md-5.col-md-offset-1
h3 Change Password
form#changePasswordForm(method="post", action="/user/password/update")
input(type="hidden", name="_csrf", value=csrfToken)
.form-group
label(for='currentPassword') Current Password
input#currentPassword.form-control(type='password', name='currentPassword', placeholder='*********')
.form-group
label(for='newPassword1') New Password
input#newPassword1.form-control(type='password', name='newPassword1', placeholder='************')
.form-group
label(for='newPassword2') Confirm New Password
input#newPassword2.form-control(type='password', name='newPassword2', placeholder='************')
.actions
button.btn.btn-primary(type='submit') Change
.tab-pane#dropboxSettings
.alert.alert-info
a(href='/help/kb/dropbox-2') Read how dropbox works
- if(!userHasDropboxFeature)
hr.soften
h3 Dropbox Integration
span.small
a(href='/help/kb/dropbox-2') (Learn more)
- if(!userHasDropboxFeature)
.alert.alert-info Dropbox sync is a premium feature    
a.btn.btn-info(href='/user/subscription/plans') Upgrade
- else if(userIsRegisteredWithDropbox)
@ -57,125 +58,13 @@ block content
- else
a.btn.btn-info(href='/dropbox/beginAuth') Link to dropbox
hr.soften
.tab-pane#editorSettings
.control-group
label(for='theme').control-label Theme  
a(href='/themes') (preview)
.controls
select(name='theme')#theme
each theme in themes
if(theme.name == user.ace.theme)
option(value=theme.name, selected='selected')= theme.name
else
option(value=theme.name)= theme.name
.control-group
label(for='mode').control-label Key Binding
.controls
select(name='mode')#mode
each mode in editors
if(mode == user.ace.mode)
option(value=mode, selected='selected')= mode
else
option(value=mode)= mode
.control-group
label(for='fontSize').control-label Font Size
.controls
select(name='fontSize')#fontSize
each fontSize in fontSizes
if(fontSize == user.ace.fontSize)
option(value=fontSize, selected='selected')= fontSize
else
option(value=fontSize)= fontSize
p
small
| Every few months we send a news letter out summarizing the new features available.<br>
| If you would prefer to not receive this email then you are free to unsubscribe below at any time.&nbsp;
a#unsubscribeFromNewsletter(data-csrf=csrfToken) Click here to Unsubscribe
.control-group
label(for='autoComplete').control-label
| Auto complete
.controls
if (user.ace.autoComplete)
label.radio.inline
input(type='radio', name='autoComplete', value='true', checked)
| On
label.radio.inline
input(type='radio', name='autoComplete', value='false')
| Off
else
label.radio.inline
input(type='radio', name='autoComplete', value='true')
| On
label.radio.inline
input(type='radio', name='autoComplete', value='false', checked)
| Off
.control-group
label(for='spellCheck').control-label
| Default Spell check language
.controls
select(name="spellCheckLanguage")
option(value="",selected=(user.ace.spellCheckLanguage == "")) Off
optgroup(label="Language")
for language in languages
option(
value=language.code,
selected=(language.code == user.ace.spellCheckLanguage)
)= language.name
.control-group
label(for="pdfViewer").control-label
| PDF Viewer
.controls
if (user.ace.pdfViewer == "native")
label.radio.inline
input(type='radio', name='pdfViewer', value='native', checked)
| Native (Best image quality)
br
label.radio.inline
input(type='radio', name='pdfViewer', value='pdfjs')
| Built in (Pdf page stays the same after recompile)
else
label.radio.inline
input(type='radio', name='pdfViewer', value='native')
| Native (Best image quality)
br
label.radio.inline
input(type='radio', name='pdfViewer', value='pdfjs', checked)
| Built in (Pdf page stays the same after recompile)
.form-actions
button.btn.btn-primary.large(type='submit') Update
.tab-pane#passwordReset
a#changePassword.btn Change Password
.tab-pane#deleteAccount
a#deleteUserAccount.btn.btn-danger(data-csrf=csrfToken) Delete your account
.tab-pane#newsletter
p Every few months we send a news letter out summarizing the new features available, if you would prefer to not receive this email then you are free to unsubscribe below at any time
a#unsubscribeFromNewsletter.btn.btn-danger(data-csrf=csrfToken) Unsubscribe
include ../general/small-footer
#changePasswordModal(style='display: none')
.modal
form#changePasswordForm(method="post", action="/user/password/update")
.modal-header
h3 Change Password
.modal-body
input(type="hidden", name="_csrf", value=csrfToken)
.clearfix
label(for='xlinput.inputmodal') Current Password
.input.inputmodal
input.inputmodal.span5#currentPassword(type='password', name='currentPassword', placeholder='*********')
.clearfix
label(for='xlinput.inputmodal') New Password
.input.inputmodal
input.inputmodal.span5#newPassword1(type='password', name='newPassword1', placeholder='************')
.clearfix
label(for='xlinput.inputmodal') New Password
.input.inputmodal
input.inputmodal.span5#newPassword2(type='password', name='newPassword2', placeholder='************')
.modal-footer
button(type="submit").btn.btn-primary#confirmPasswordChange Change
button.btn.cancel Cancel
p Need to leave?
a#deleteUserAccount(data-csrf=csrfToken) Delete your account

View file

@ -10,6 +10,9 @@
margin-top: 0;
}
}
> .container-fluid {
padding: 0;
}
}
.card-thin {

View file

@ -32,7 +32,7 @@ h3, .h3 {
small,
.small {
font-size: 65%;
font-size: 70%;
}
}
h4, .h4,
@ -79,7 +79,7 @@ p {
// Ex: 14px base font * 85% = about 12px
small,
.small { font-size: 85%; }
.small { font-size: 90%; color: @gray }
// Undo browser default styling
cite { font-style: normal; }

View file

@ -60,9 +60,9 @@
@font-size-small: ceil((@font-size-base * 0.85)); // ~12px
@font-size-h1: floor((@font-size-base * 2)); // ~36px
@font-size-h2: floor((@font-size-base * 1.8)); // ~30px
@font-size-h3: ceil((@font-size-base * 1.6)); // ~24px
@font-size-h4: ceil((@font-size-base * 1.25)); // ~18px
@font-size-h2: floor((@font-size-base * 1.6)); // ~30px
@font-size-h3: ceil((@font-size-base * 1.25)); // ~24px
@font-size-h4: ceil((@font-size-base * 1.1)); // ~18px
@font-size-h5: @font-size-base;
@font-size-h6: ceil((@font-size-base * 0.85)); // ~12px