From d3221f1cf1f11b44688b8f7eb8b38ce2f2c2a067 Mon Sep 17 00:00:00 2001 From: James Allen Date: Mon, 9 Jun 2014 10:19:02 +0100 Subject: [PATCH] Style login and register forms --- .../ServerAdmin/AdminController.coffee | 8 --- .../StaticPages/HomeController.coffee | 1 - services/web/app/coffee/models/Quote.coffee | 13 ---- services/web/app/coffee/router.coffee | 2 +- .../web/app/views/external/style_guide.jade | 62 +++++++++++++++++++ services/web/app/views/user/login.jade | 14 ++--- services/web/app/views/user/register.jade | 60 +++++++++--------- services/web/public/coffee/forms.coffee | 4 +- .../public/stylesheets/components/alerts.less | 4 +- .../public/stylesheets/components/card.less | 3 + .../public/stylesheets/core/variables.less | 34 +++++----- 11 files changed, 121 insertions(+), 84 deletions(-) delete mode 100644 services/web/app/coffee/models/Quote.coffee create mode 100644 services/web/app/views/external/style_guide.jade diff --git a/services/web/app/coffee/Features/ServerAdmin/AdminController.coffee b/services/web/app/coffee/Features/ServerAdmin/AdminController.coffee index 01949ad3a5..d43a87e8ef 100755 --- a/services/web/app/coffee/Features/ServerAdmin/AdminController.coffee +++ b/services/web/app/coffee/Features/ServerAdmin/AdminController.coffee @@ -2,7 +2,6 @@ metrics = require("metrics-sharelatex") logger = require('logger-sharelatex') _ = require('underscore') User = require('../../models/User').User -Quote = require('../../models/Quote').Quote Project = require('../../models/Project').Project DocumentUpdaterHandler = require('../DocumentUpdater/DocumentUpdaterHandler') Settings = require('settings-sharelatex') @@ -108,13 +107,6 @@ module.exports = AdminController = logger.log "all docs have been saved to mongo" res.send() - addQuote : (req, res)-> - quote = new Quote - author: req.body.author - quote: req.body.quote - quote.save (err)-> - res.send 200 - syncUserToSubscription: (req, res)-> {user_id, subscription_id} = req.body RecurlyWrapper.getSubscription subscription_id, {}, (err, subscription)-> diff --git a/services/web/app/coffee/Features/StaticPages/HomeController.coffee b/services/web/app/coffee/Features/StaticPages/HomeController.coffee index c079c407cd..04d28741a1 100755 --- a/services/web/app/coffee/Features/StaticPages/HomeController.coffee +++ b/services/web/app/coffee/Features/StaticPages/HomeController.coffee @@ -1,6 +1,5 @@ logger = require('logger-sharelatex') _ = require('underscore') -Quotes = require('../../models/Quote').Quote Path = require "path" fs = require "fs" diff --git a/services/web/app/coffee/models/Quote.coffee b/services/web/app/coffee/models/Quote.coffee deleted file mode 100644 index 9d44d97ab3..0000000000 --- a/services/web/app/coffee/models/Quote.coffee +++ /dev/null @@ -1,13 +0,0 @@ -mongoose = require 'mongoose' -Settings = require 'settings-sharelatex' - -Schema = mongoose.Schema -ObjectId = Schema.ObjectId - -QuoteSchema = new Schema - author : {type:String, default:'new quote'} - quote : {type:String} - -mongoose.model 'Quote', QuoteSchema -exports.Quote = mongoose.model 'Quote' -exports.QuoteSchema = QuoteSchema diff --git a/services/web/app/coffee/router.coffee b/services/web/app/coffee/router.coffee index aa7d19c1c7..8b593b2305 100644 --- a/services/web/app/coffee/router.coffee +++ b/services/web/app/coffee/router.coffee @@ -62,6 +62,7 @@ module.exports = class Router app.get '/security', HomeController.externalPage("security", "Security") app.get '/privacy_policy', HomeController.externalPage("privacy", "Privacy Policy") app.get '/planned_maintenance', HomeController.externalPage("planned_mainteance", "Planned Maintenance") + app.get '/style', HomeController.externalPage("style_guide", "Style Guide") app.get '/themes', InfoController.themes app.get '/advisor', InfoController.advisor @@ -160,7 +161,6 @@ module.exports = class Router app.post '/admin/closeEditor', SecurityManager.requestIsAdmin, AdminController.closeEditor app.post '/admin/dissconectAllUsers', SecurityManager.requestIsAdmin, AdminController.dissconectAllUsers app.post '/admin/writeAllDocsToMongo', SecurityManager.requestIsAdmin, AdminController.writeAllToMongo - app.post '/admin/addquote', SecurityManager.requestIsAdmin, AdminController.addQuote app.post '/admin/syncUserToSubscription', SecurityManager.requestIsAdmin, AdminController.syncUserToSubscription app.post '/admin/flushProjectToTpds', SecurityManager.requestIsAdmin, AdminController.flushProjectToTpds app.post '/admin/pollUsersWithDropbox', SecurityManager.requestIsAdmin, AdminController.pollUsersWithDropbox diff --git a/services/web/app/views/external/style_guide.jade b/services/web/app/views/external/style_guide.jade new file mode 100644 index 0000000000..dce787040e --- /dev/null +++ b/services/web/app/views/external/style_guide.jade @@ -0,0 +1,62 @@ +extends ../layout + +block content + .content + .container + .row + .col-md-8.col-md-offset-2 + h1 ShareLaTeX CSS Style Guide + + h2 Headings + + p Here are our heading styles: + + h1 Heading level 1 + p Lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum + + h2 Heading level 2 + p Lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum + + h3 Heading level 3 + p Lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum + + h4 Heading level 4 + p Lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum + + h2 Buttons + + p Our primary button is red: + p + a.btn.btn-primary(href="#") Primary Button + p Our secondary button is blue: + p + a.btn.btn-info(href="#") Secondary Button + p All button styles + p + .btn-toolbar + a.btn.btn-primary(href="#") Primary + a.btn.btn-info(href="#") Info (secondary) + a.btn.btn-default(href="#") Default + a.btn.btn-success(href="#") Success + a.btn.btn-warning(href="#") Warning + a.btn.btn-danger(href="#") Danger + + h2 Hyperlinks + + p Hyperlinks are highlighted + a(href="#") as shown + |. + + h2 Alerts + + .alert.alert-danger An .alert-danger alert + .alert.alert-success An .alert-success alert + .alert.alert-info An .alert-info alert + .alert.alert-warning An .alert-warning alert + + .content.content-alt + .container + .row + .col-md-8.col-md-offset-2 + .card + p Cards look best on a .content.content-alt background diff --git a/services/web/app/views/user/login.jade b/services/web/app/views/user/login.jade index bcff5f25aa..926c6305ce 100644 --- a/services/web/app/views/user/login.jade +++ b/services/web/app/views/user/login.jade @@ -12,12 +12,10 @@ block content form.validate#loginForm(enctype='multipart/form-data', method='post') input(name='_csrf', type='hidden', value=csrfToken) input(name='redir', type='hidden', value=redir) - .clearfix - .input - input.span4#email.email.required(type='email', autofocus="autofocus", name='email', placeholder='your@email.com') - .clearfix - .input - input.span4#password.required(type='password', name='password', placeholder='********') + .form-group + input#email.email.required.form-control(type='email', autofocus="autofocus", name='email', placeholder='your@email.com') + .form-group + input#password.required.form-control(type='password', name='password', placeholder='********') .actions - button.btn-primary.btn.btn-large#login(type='submit') Login - a#passwordReset(href='/user/passwordreset') Forgot your password? + button.btn-primary.btn#login(type='submit') Login + a#passwordReset.pull-right(href='/user/passwordreset') Forgot your password? diff --git a/services/web/app/views/user/register.jade b/services/web/app/views/user/register.jade index 0078c461fa..84c5eb1d24 100644 --- a/services/web/app/views/user/register.jade +++ b/services/web/app/views/user/register.jade @@ -1,37 +1,33 @@ extends ../layout block content - .container - .row - .registration_message - if sharedProjectData.user_first_name !== undefined - h1 #{sharedProjectData.user_first_name} would like you to view '#{sharedProjectData.project_name}' - div Join ShareLaTeX to view this project - else if newTemplateData.templateName !== undefined - h1 Please register to edit the '#{newTemplateData.templateName}' template - div Already have a ShareLaTeX account? - a(href="/login") Login here + .content.content-alt + .container + .row + .registration_message + if sharedProjectData.user_first_name !== undefined + h1 #{sharedProjectData.user_first_name} would like you to view '#{sharedProjectData.project_name}' + div Join ShareLaTeX to view this project + else if newTemplateData.templateName !== undefined + h1 Please register to edit the '#{newTemplateData.templateName}' template + div Already have a ShareLaTeX account? + a(href="/login") Login here - .row - .span-box.span4.offset4 - .page-header - h1 Register - .messageArea - form#registerFormShort(method="post") - input(name='_csrf', type='hidden', value=csrfToken) - input(name='redir', type='hidden', value=redir) - .clearfix - label(for='xlInput') Email - .input - input#email.span4.email.required(type='email', name='email', value='#{new_email}') - .clearfix - label(for='xlInput') Password - .input - input#password.span4.required(type='password', name='password') - .actions - button#registerButton.btn-primary.btn.btn-xlarge(type='submit') Register + .row + .col-md-6.col-md-offset-3.col-lg-4.col-lg-offset-4 + .card + .page-header + h1 Register + .messageArea + form#registerFormShort(method="post") + input(name='_csrf', type='hidden', value=csrfToken) + input(name='redir', type='hidden', value=redir) + .form-group + label(for='email') Email + input#email.email.required.form-control(type='email', name='email', value='#{new_email}') + .form-group + label(for='password') Password + input#password.required.form-control(type='password', name='password') + .actions + button#registerButton.btn-primary.btn(type='submit') Register - - - include ../general/small-footer - diff --git a/services/web/public/coffee/forms.coffee b/services/web/public/coffee/forms.coffee index c90fca3a66..b20795b5ef 100644 --- a/services/web/public/coffee/forms.coffee +++ b/services/web/public/coffee/forms.coffee @@ -200,7 +200,7 @@ require [ class Message constructor: (message)-> - aClose = $('').addClass('close').attr('href','#').text('x') + aClose = $('').addClass('close').attr('href','#').html('×') pTitle = $('').text(message.title) pText = $('').html(' '+message.text) div = $('
') @@ -209,7 +209,7 @@ require [ .append(pTitle) .append(pText) if message.type == "error" - div.addClass("alert-error") + div.addClass("alert-danger") else div.addClass("alert-info") diff --git a/services/web/public/stylesheets/components/alerts.less b/services/web/public/stylesheets/components/alerts.less index 3eab066294..527c97b151 100755 --- a/services/web/public/stylesheets/components/alerts.less +++ b/services/web/public/stylesheets/components/alerts.less @@ -9,8 +9,8 @@ .alert { padding: @alert-padding; margin-bottom: @line-height-computed; - border: 1px solid transparent; - border-radius: @alert-border-radius; + border-left: 3px solid transparent; + // border-radius: @alert-border-radius; // Headings for larger alerts h4 { diff --git a/services/web/public/stylesheets/components/card.less b/services/web/public/stylesheets/components/card.less index 335c3963c4..877d502bef 100644 --- a/services/web/public/stylesheets/components/card.less +++ b/services/web/public/stylesheets/components/card.less @@ -6,6 +6,9 @@ padding: @line-height-computed; .page-header { margin: 0 0 1.5625rem; + h1 { + margin-top: 0; + } } } diff --git a/services/web/public/stylesheets/core/variables.less b/services/web/public/stylesheets/core/variables.less index b0463c0354..6ef9cec53f 100755 --- a/services/web/public/stylesheets/core/variables.less +++ b/services/web/public/stylesheets/core/variables.less @@ -28,7 +28,7 @@ @brand-success: @green; @brand-info: @blue; @brand-warning: @orange; -@brand-danger: #d9534f; +@brand-danger: #E03A06; //== Scaffolding // @@ -37,7 +37,7 @@ //** Background color for ``. @body-bg: #fff; //** Global text color on ``. -@text-color: @gray-dark; +@text-color: @gray-darker; //** Global textual link color. @link-color: @brand-primary; @@ -59,9 +59,9 @@ @font-size-large: ceil((@font-size-base * 1.25)); // ~18px @font-size-small: ceil((@font-size-base * 0.85)); // ~12px -@font-size-h1: floor((@font-size-base * 2.6)); // ~36px -@font-size-h2: floor((@font-size-base * 2.15)); // ~30px -@font-size-h3: ceil((@font-size-base * 1.7)); // ~24px +@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-h5: @font-size-base; @font-size-h6: ceil((@font-size-base * 0.85)); // ~12px @@ -448,21 +448,21 @@ // //## Define colors for form feedback states and, by default, alerts. -@state-success-text: #3c763d; -@state-success-bg: #dff0d8; -@state-success-border: darken(spin(@state-success-bg, -10), 5%); +@state-success-text: darken(@brand-success, 20%); +@state-success-bg: lighten(@brand-success, 50%); +@state-success-border: darken(@brand-success, 5%); -@state-info-text: #31708f; -@state-info-bg: #d9edf7; -@state-info-border: darken(spin(@state-info-bg, -10), 7%); +@state-info-text: darken(@brand-info, 20%); +@state-info-bg: lighten(@brand-info, 47%); +@state-info-border: darken(@brand-info, 7%); -@state-warning-text: #8a6d3b; -@state-warning-bg: #fcf8e3; -@state-warning-border: darken(spin(@state-warning-bg, -10), 5%); +@state-warning-text: darken(@brand-warning, 10%); +@state-warning-bg: lighten(@brand-warning, 45%); +@state-warning-border: @brand-warning; -@state-danger-text: #a94442; -@state-danger-bg: #f2dede; -@state-danger-border: darken(spin(@state-danger-bg, -10), 5%); +@state-danger-text: darken(@brand-danger, 10%); +@state-danger-bg: lighten(@brand-danger, 50%); +@state-danger-border: darken(@brand-danger, 5%); //== Tooltips