Mirror
/
zulip
mirror of https://github.com/zulip/zulip.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

portico-pages: Fix flex height issues with content. 

This fixes the existing issue where the titles of content is chopped
off when the screen height is too small.
This commit is contained in:
Brock Whittaker 2017-05-01 12:33:41 -07:00 committed by Tim Abbott
parent 6b1c53059b
commit 58d00af6c3
8 changed files with 264 additions and 246 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
static/styles/landing-page.css
View File

@ -868,7 +868,7 @@ a:not(.no-style):hover:before {
}
.features-app .main {
margin: 0px auto 20px;
margin: 0px auto;
width: calc(100% - 40px);
}

27
static/styles/portico-signin.css
View File

@ -126,7 +126,6 @@ html {
.forgot-password-container {
width: 503px;
margin-top: calc(50vh - 150px);
}
.forgot-password-container form {
@ -348,7 +347,20 @@ html {
color: #444;
}
.new-style .input-box .text-error {
.new-style .input-box p.text-error {
display: block;
padding: 0px;
color: #d26666;
font-size: 0.7em;
font-weight: 600;
height: 0;
position: relative;
top: -4px;
}
.new-style .input-box label.text-error {
display: block;
top: 66px;
@ -360,14 +372,9 @@ html {
}
.new-style .get-started {
height: 0px;
margin: 0px;
font-size: 2.5rem;
text-align: center;
color: #666;
transform: translateY(-90px);
}
.new-style button {
@ -654,6 +661,8 @@ button.login-google-button {
.split-view .left-side {
width: 500px;
border-right: 1px solid #eee;
position: relative;
left: -1px;
}
.split-view .left-side + .right-side {
@ -742,10 +751,6 @@ button.login-google-button {
.split-view .right-side {
width: 324px;
}
.new-style .get-started {
transform: translateY(-70px);
}
}
@media (max-width: 500px) {

5
static/styles/portico.css
View File

@ -276,8 +276,7 @@ img.screenshot {
#registration #pw_strength {
width: 325px;
height: 8px;
margin: -5px 0 0 0;
margin-top: 20px;
}
.def:before {
@ -1233,7 +1232,7 @@ input.new-organization-button {
.markdown {
max-width: 800px;
margin: 20px auto;
margin: 20px auto 0px auto;
padding: 20px;
font-weight: 400;

111
templates/zerver/accounts_home.html
View File

@ -11,70 +11,71 @@ $(function () {
</script>
<div class="bg-image"></div>
<div class="app register-page split-view flex full-page">
<div class="app-main register-page-container">
<div class="register-form new-style">
<div class="lead">
<h1 class="get-started">{{ _("Sign up for Zulip") }}</h1>
</div>
{% if realm_name %}
<div class="left-side">
<div class="org-header">
<div class="avatar" style="background-image: url('{{ realm_icon }}')"></div>
<div class="info-box">
<div class="organization-name">{{ realm_name }}</div>
<div class="organization-path">{{ realm_uri }}</div>
<div class="app register-page split-view flex full-page new-style">
<div class="inline-block">
<div class="lead">
<h1 class="get-started">{{ _("Sign up for Zulip") }}</h1>
</div>
<div class="app-main register-page-container">
<div class="register-form new-style">
{% if realm_name %}
<div class="left-side">
<div class="org-header">
<div class="avatar" style="background-image: url('{{ realm_icon }}')"></div>
<div class="info-box">
<div class="organization-name">{{ realm_name }}</div>
<div class="organization-path">{{ realm_uri }}</div>
</div>
</div>
<div class="description">
{{ realm_description }}
</div>
</div>
<div class="description">
{{ realm_description }}
</div>
</div>
{% endif %}
<div class="right-side">
{% if no_auth_enabled %}
<div class="alert">
<p>No authentication backends are enabled on this
server yet, so it is impossible to register!</p>
{% endif %}
<div class="right-side">
{% if no_auth_enabled %}
<div class="alert">
<p>No authentication backends are enabled on this
server yet, so it is impossible to register!</p>
<p>See
the <a href="http://zulip.readthedocs.io/en/latest/prod-install.html#step-3-configure-zulip">Zulip
authentication documentation</a> to learn how to
configure authentication backends.</p>
</div>
{% else %}
<form class="form-inline" id="send_confirm" name="email_form"
action="{{ current_url() }}" method="post">
{{ csrf_input }}
<div class="input-box no-validate">
<input type="email" id="email" class="email" name="email" value="" required />
<label>Email</label>
<div class="required"></div>
<img class="valid" src="/static/images/checkbox-valid.svg" />
<p>See
the <a href="http://zulip.readthedocs.io/en/latest/prod-install.html#step-3-configure-zulip">Zulip
authentication documentation</a> to learn how to
configure authentication backends.</p>
</div>
{% else %}
<form class="form-inline" id="send_confirm" name="email_form"
action="{{ current_url() }}" method="post">
{{ csrf_input }}
<button class="full-width" type="submit" name="">{{ _('Sign up') }}</button>
</form>
<div class="input-box no-validate">
<input type="email" id="email" class="email" name="email" value="" required />
<label>Email</label>
<div class="required"></div>
<img class="valid" src="/static/images/checkbox-valid.svg" />
</div>
<div id="errors"></div>
{% if form.email.errors %}
{% for error in form.email.errors %}
<div class="alert alert-error">{{ error }}</div>
{% endfor %}
{% endif %}
<button class="full-width" type="submit" name="">{{ _('Sign up') }}</button>
</form>
{% if google_auth_enabled %}
<div class="or">or</div>
<div id="errors"></div>
{% if form.email.errors %}
{% for error in form.email.errors %}
<div class="alert alert-error">{{ error }}</div>
{% endfor %}
{% endif %}
<div class="register-google">
<a href="{{ url('zerver.views.auth.start_google_oauth2') }}">
<button class="login-google-button full-width">{{ _('Sign up with Google') }}</button>
</a>
{% if google_auth_enabled %}
<div class="or">or</div>
<div class="register-google">
<a href="{{ url('zerver.views.auth.start_google_oauth2') }}">
<button class="login-google-button full-width">{{ _('Sign up with Google') }}</button>
</a>
</div>
{% endif %}
{% endif %}
</div>
{% endif %}
{% endif %}
</div>
</div>
</div>

97
templates/zerver/find_my_team.html
View File

@ -4,57 +4,62 @@
<div class="bg-image"></div>
<div class="app find-team-page flex full-page">
<div class="app-main find-team-page-container new-style">
<h3 class="get-started">{{ _("Find your team") }}…</h3>
{% if emails %}
<div id="results">
<p>
Emails sent! You will only receive emails at addresses associated
with Zulip organizations. The addresses entered on the previous page
are listed below:
</p>
<div class="inline-block new-style">
<div class="lead">
<h1 class="get-started">{{ _("Find your team") }}…</h1>
</div>
<ul>
{% for email in emails %}
<li>{{ email }}</li>
{% endfor %}
</ul>
<div class="app-main find-team-page-container">
{% if emails %}
<div id="results">
<p>
Emails sent! You will only receive emails at addresses associated
with Zulip organizations. The addresses entered on the previous page
are listed below:
</p>
{% if development_environment %}
<div class="alert alert-info" style="display:inline-block;">
{{ _("In the Zulip development environment, outgoing emails are printed to the run-dev.py console") }}
<ul>
{% for email in emails %}
<li>{{ email }}</li>
{% endfor %}
</ul>
{% if development_environment %}
<div class="alert alert-info" style="display:inline-block;">
{{ _("In the Zulip development environment, outgoing emails are printed to the run-dev.py console") }}
</div>
{% endif %}
</div>
{% else %}
<div class="find-team-form">
<p>
We will send you an email with the sign-in information for
any Zulip organization(s) associated with the addresses you enter below.
</p>
<form class="form-inline" id="find_my_team" name="email_form"
action="{{ current_url() }}" method="post">
{{ csrf_input }}
<div class="input-box moving-label horizontal">
<div class="inline-block relative">
<input type="text" autofocus id="emails" name="emails" required />
<label for="id_username">{{ _('Email addresses') }}</label>
<div class="required"></div>
<img class="valid" src="/static/images/checkbox-valid.svg" />
</div>
<button type="submit">{{ _('Find team') }}</button>
</div>
<div><i>{{ form.emails.help_text }}</i></div>
</form>
<div id="errors"></div>
{% if form.emails.errors %}
{% for error in form.emails.errors %}
<div class="alert alert-error">{{ error }}</div>
{% endfor %}
{% endif %}
</div>
{% endif %}
</div>
{% else %}
<div class="find-team-form">
<p>
We will send you an email with the sign-in information for
any Zulip organization(s) associated with the addresses you enter below.
</p>
<form class="form-inline" id="find_my_team" name="email_form"
action="{{ current_url() }}" method="post">
{{ csrf_input }}
<div class="input-box moving-label horizontal">
<div class="inline-block relative">
<input type="text" autofocus id="emails" name="emails" required />
<label for="id_username">{{ _('Email addresses') }}</label>
<div class="required"></div>
<img class="valid" src="/static/images/checkbox-valid.svg" />
</div>
<button type="submit">{{ _('Find team') }}</button>
</div>
<div><i>{{ form.emails.help_text }}</i></div>
</form>
<div id="errors"></div>
{% if form.emails.errors %}
{% for error in form.emails.errors %}
<div class="alert alert-error">{{ error }}</div>
{% endfor %}
{% endif %}
</div>
{% endif %}
</div>
</div>
{% endblock %}

203
templates/zerver/login.html
View File

@ -41,125 +41,128 @@ autofocus('#id_username');
<div class="app login-page split-view new-style flex full-page">
<div class="app-main login-page-container inline-block">
<div class="inline-block">
<div class="lead">
<h1 class="get-started">{{ _("Sign in to Zulip") }}</h1>
</div>
{% if only_sso %}
{# SSO users don't have a password. #}
<div class="login-sso">
<a href="/accounts/login/sso" class="btn btn-large btn-primary">{{ _('Sign in with SSO') }}</a>
</div>
<div class="app-main login-page-container inline-block">
{% if only_sso %}
{# SSO users don't have a password. #}
{% else %}
{# Non-SSO users. #}
{% if realm_name %}
<div class="left-side">
<div class="org-header">
<div class="avatar" style="background-image: url('{{ realm_icon }}')"></div>
<div class="info-box">
<div class="organization-name">{{ realm_name }}</div>
<div class="organization-path">{{ realm_uri }}</div>
</div>
<div class="login-sso">
<a href="/accounts/login/sso" class="btn btn-large btn-primary">{{ _('Sign in with SSO') }}</a>
</div>
<div class="description">
{{ realm_description }}
</div>
</div>
{% endif %}
<div class="right-side">
{% if no_auth_enabled %}
<div class="alert">
<p>No authentication backends are enabled on this
server yet, so it is impossible to login!</p>
<p>See
the <a href="http://zulip.readthedocs.io/en/latest/prod-install.html#step-3-configure-zulip">Zulip
authentication documentation</a> to learn how to
configure authentication backends.</p>
</div>
{% else %}
{% if password_auth_enabled %}
<form name="login_form" id="login_form" method="post" class="login-form"
action="{{ url('django.contrib.auth.views.login') }}?next={{ next }}">
{# Non-SSO users. #}
{{ csrf_input }}
<!-- .no-validation is for removing the red star in CSS -->
<div class="input-box no-validation">
<input id="id_username" type="email" name="username" class="email required"
{% if email %} value="{{ email }}" {% else %} value="" {% endif %}
maxlength="72" required />
<label for="id_username">{{ _('Email') }}</label>
<div class="required"></div>
<img class="valid" src="/static/images/checkbox-valid.svg" />
{% if realm_name %}
<div class="left-side">
<div class="org-header">
<div class="avatar" style="background-image: url('{{ realm_icon }}')"></div>
<div class="info-box">
<div class="organization-name">{{ realm_name }}</div>
<div class="organization-path">{{ realm_uri }}</div>
</div>
</div>
<div class="input-box no-validation">
<input id="id_password" name="password" class="required" type="password" required />
<label for="id_password" class="control-label">{{ _('Password') }}</label>
<div class="required"></div>
<img class="valid" src="/static/images/checkbox-valid.svg" />
<div class="description">
{{ realm_description }}
</div>
{% if form.errors %}
<div class="alert alert-error">
{% for error in form.errors.values() %}
<div>{{ error | striptags }}</div>
{% endfor %}
</div>
{% endif %}
{% if email %}
<div class="alert">
{{ _("You've already registered with this email address. Please sign in below.") }}
</div>
{% endif %}
{% if subdomain %}
<div class="alert">
{{ wrong_subdomain_error }}
</div>
{% endif %}
<button type="submit" name="button" class="full-width">{{ _("Sign in") }}</button>
</form>
{% endif %}
{% if any_oauth_backend_enabled %}
<div class="or">or</div>
{% endif %}
{% if google_auth_enabled %}
<div class="login-google">
<a href="{{ url('zerver.views.auth.start_google_oauth2') }}">
<button class="login-google-button">{{ _('Sign in with Google') }}</button>
</a>
</div>
{% endif %}
{% if github_auth_enabled %}
<div class="login-github">
<a href="{{ url('login-social', args=('github',)) }}" class="github-wrapper">
<button class="login-github-button github">
<span>{{ _('Sign in with GitHub') }}</span>
</button>
</a>
</div>
{% endif %}
<div class="right-side">
{% if no_auth_enabled %}
<div class="alert">
<p>No authentication backends are enabled on this
server yet, so it is impossible to login!</p>
<div class="actions">
<a class="forgot-password" href="/accounts/password/reset/">Forgot your password?</a>
{% if not register_link_disabled %}
<a class="register-link float-right" href="/register/">Register</a>
<p>See
the <a href="http://zulip.readthedocs.io/en/latest/prod-install.html#step-3-configure-zulip">Zulip
authentication documentation</a> to learn how to
configure authentication backends.</p>
</div>
{% else %}
{% if password_auth_enabled %}
<form name="login_form" id="login_form" method="post" class="login-form"
action="{{ url('django.contrib.auth.views.login') }}?next={{ next }}">
{{ csrf_input }}
<!-- .no-validation is for removing the red star in CSS -->
<div class="input-box no-validation">
<input id="id_username" type="email" name="username" class="email required"
{% if email %} value="{{ email }}" {% else %} value="" {% endif %}
maxlength="72" required />
<label for="id_username">{{ _('Email') }}</label>
<div class="required"></div>
<img class="valid" src="/static/images/checkbox-valid.svg" />
</div>
<div class="input-box no-validation">
<input id="id_password" name="password" class="required" type="password" required />
<label for="id_password" class="control-label">{{ _('Password') }}</label>
<div class="required"></div>
<img class="valid" src="/static/images/checkbox-valid.svg" />
</div>
{% if form.errors %}
<div class="alert alert-error">
{% for error in form.errors.values() %}
<div>{{ error | striptags }}</div>
{% endfor %}
</div>
{% endif %}
{% if email %}
<div class="alert">
{{ _("You've already registered with this email address. Please sign in below.") }}
</div>
{% endif %}
{% if subdomain %}
<div class="alert">
{{ wrong_subdomain_error }}
</div>
{% endif %}
<button type="submit" name="button" class="full-width">{{ _("Sign in") }}</button>
</form>
{% endif %}
{% if any_oauth_backend_enabled %}
<div class="or">or</div>
{% endif %}
{% if google_auth_enabled %}
<div class="login-google">
<a href="{{ url('zerver.views.auth.start_google_oauth2') }}">
<button class="login-google-button">{{ _('Sign in with Google') }}</button>
</a>
</div>
{% endif %}
{% if github_auth_enabled %}
<div class="login-github">
<a href="{{ url('login-social', args=('github',)) }}" class="github-wrapper">
<button class="login-github-button github">
<span>{{ _('Sign in with GitHub') }}</span>
</button>
</a>
</div>
{% endif %}
<div class="actions">
<a class="forgot-password" href="/accounts/password/reset/">Forgot your password?</a>
{% if not register_link_disabled %}
<a class="register-link float-right" href="/register/">Register</a>
{% endif %}
</div>
{% endif %}
</div>
{% endif %}
</div>
{% endif %}
</div>
<div class="footer-padder"></div>
</div>

2
templates/zerver/register.html
View File

@ -78,7 +78,7 @@ Form is validated both client-side using jquery-validate (see signup.js) and ser
<div class="help-inline text-error">{{ error }}</div>
{% endfor %}
{% endif %}
<br />
<div class="progress" id="pw_strength" title="{{ _('Password strength') }}">
<div class="bar bar-danger" style="width: 10%;"></div>
</div>

63
templates/zerver/reset.html
View File

@ -2,37 +2,42 @@
{% block portico_content %}
<div class="bg-image"></div>
<div class="app-main forgot-password-container new-style">
<div class="bg-image"></div>
<div class="lead">
<h3 class="get-started">{{ _('Reset your password') }}</h3>
</div>
<p>Forgot your password? No problem, we'll send a link to reset your password to the email you signed up with.</p>
<form method="post" class="form-horizontal" action="{{ url('django.contrib.auth.views.password_reset') }}">
{{ csrf_input }}
<div class="new-style">
<div class="input-box horizontal moving-label">
<div class="inline-block relative">
<input id="id_email" class="required" type="text" name="email"
value="{% if form.email.value() %}{{ form.email.value() }}{% endif %}"
maxlength="100" required />
<label for="id_email" class="">{{ _('Email') }}</label>
<div class="required"></div>
<img class="valid" src="/static/images/checkbox-valid.svg" />
{% if form.email.errors %}
{% for error in form.email.errors %}
<div class="alert alert-error">{{ error }}</div>
{% endfor %}
{% endif %}
</div>
<button type="submit">{{ _('Reset password') }}</button>
</div>
<div class="flex new-style app portico-page">
<div class="inline-block">
<div class="lead">
<h1 class="get-started">{{ _('Reset your password') }}</h1>
</div>
</form>
<div class="app-main forgot-password-container new-style">
<div class="bg-image"></div>
<p>Forgot your password? No problem, we'll send a link to reset your password to the email you signed up with.</p>
<form method="post" class="form-horizontal" action="{{ url('django.contrib.auth.views.password_reset') }}">
{{ csrf_input }}
<div class="new-style">
<div class="input-box horizontal moving-label">
<div class="inline-block relative">
<input id="id_email" class="required" type="text" name="email"
value="{% if form.email.value() %}{{ form.email.value() }}{% endif %}"
maxlength="100" required />
<label for="id_email" class="">{{ _('Email') }}</label>
<div class="required"></div>
<img class="valid" src="/static/images/checkbox-valid.svg" />
{% if form.email.errors %}
{% for error in form.email.errors %}
<div class="alert alert-error">{{ error }}</div>
{% endfor %}
{% endif %}
</div>
<button type="submit">{{ _('Reset password') }}</button>
</div>
</div>
</form>
</div>
</div>
</div>
<script type="text/javascript">