Skip to content
This repository has been archived by the owner on Jan 19, 2021. It is now read-only.

Commit

Permalink
[Fix bug 1206684] Minor UI profile edit fixes
Browse files Browse the repository at this point in the history 
* Username now has a privacy selector fixed to Public
* Registration: Photo controls beneath the photo
* Location texts closer to their labels and aligned with them
* Constraint textareas to max-width
* Fix style mismatches on alternate emails
  • Loading branch information
@comzeradd
comzeradd committed Nov 19, 2015
1 parent 785cfb7 commit 10b2f57
Show file tree
Hide file tree
Showing 5 changed files with 97 additions and 51 deletions.
53 changes: 35 additions & 18 deletions mozillians/static/mozillians/css/main.less
View file
Expand Up @@ -220,6 +220,7 @@ body {

input[type="checkbox"] {
margin-right: 5px;
vertical-align: text-bottom;
}
.checkbox {
input[type="checkbox"] {
Expand All @@ -231,6 +232,7 @@ body {

.error-message {
color: #CD0000;
display: block;
}

.required:after {
Expand Down Expand Up @@ -1495,8 +1497,10 @@ form {
}
}
textarea {
max-width: 390px;
@media (max-width: @breakMobileLandscape) {
width: 200px;
max-width: 250px;
}
}
legend {
Expand All @@ -1523,10 +1527,7 @@ form {
}
&> div#photo {
position: relative;
height: 150px;
@media (max-width: @breakMobileLandscape) {
height: 200px;
}
height: 130px;
.profile-photo {
.rounded-image;
width: 100px;
Expand Down Expand Up @@ -1731,8 +1732,8 @@ form {
}
}
.under-input-field {
padding-left: 130px;
@media (max-width: @breakMobileLandscape) {
padding-left: 35px;
@media (max-width: @breakDesktop) {
padding-left: 0px;
}
}
Expand Down Expand Up @@ -1925,19 +1926,31 @@ body#edit-profile {
}
}

.registration {
.registration-photo {
.privacy-controls {
float: left;
}
}

.registration {
fieldset {
margin-top: 5px;
margin-bottom: 10px;
padding-bottom: 0px;

@media (max-width: @breakDesktop) {
margin-top: 30px;
margin-bottom: 20px;
margin-bottom: 0px;
padding-bottom: 0px;
}
}

.geodisplay {
min-width: 250px;
margin-top: 3px;

@media (max-width: @breakDesktop) {
float: none;
min-width: 300px;
}
@media (max-width: @breakMobileLandscape){
min-width: 50%;
}
}
}
Expand All @@ -1950,6 +1963,10 @@ body#edit-profile {
}
}

.input-file {
margin-bottom: 15px;
}

/* Generic Groups, Functional Areas and Search Results
====================================================== */
body.search-page {
Expand Down Expand Up @@ -2307,22 +2324,22 @@ body#betasearch {
}

fieldset {
.email-label {
float: none;
}
.email-controls {
display: inline-block;
}
&#alternate-email {
.alternate-email-fieldrow {
margin-bottom: 20px;
.email {
min-width: 300px;
display: inline-block;

@media (max-width: 700px) {
margin-bottom: 20px;
}
}
}
.privacy-controls {
position: relative;
float: right;

@media (max-width: 700px) {
float: none;
}
Expand Down
14 changes: 11 additions & 3 deletions mozillians/templates/phonebook/includes/photo_form.html
View file
@@ -1,12 +1,16 @@
<fieldset>
<div id="photo" class="row">
<div class="{% if profile.is_complete %}col-md-3{% else %}col-md-4{% endif %}">
<div class="{% if profile.is_complete %}col-md-3{% else %}col-md-12{% endif %}">
<label for="id_photo">{{ _('Profile Photo') }}</label>
<div class="profile-photo">
<img src="{{ profile.get_photo_url('100x100') }}" alt="{{ _('Profile photo') }}">
</div>
</div>
<div class="{% if profile.is_complete %}col-md-6 col-sm-6{% else %}col-md-8{% endif %}">
{% if not profile.is_complete %}
</div>
<div class="row">
{% endif %}
<div class="{% if profile.is_complete %}col-md-6 col-sm-6{% else %}col-md-12{% endif %}">
<input class="input-file photo" id="id_photo" type="file" name="photo">
{% if profile.photo %}
<div id="id_photo_delete">
Expand All @@ -17,7 +21,11 @@
</div>
{% endif %}
</div>
<div class="{% if profile.is_complete %}col-md-3 text-right{% else %}col-md-8 registration{% endif %}">
{% if not profile.is_complete %}
</div>
<div class="row">
{% endif %}
<div class="{% if profile.is_complete %}col-md-3 text-right{% else %}col-md-12 registration-photo{% endif %}">
{% if profile.is_complete %}
{{ privacy_field(basic_information_form.privacy_photo) }}
{% else %}
Expand Down
47 changes: 31 additions & 16 deletions mozillians/templates/phonebook/includes/profile_edit_basic.html
View file
Expand Up @@ -37,9 +37,17 @@

<fieldset>
<div class="row">
<div class="col-md-12">
<div class="col-md-8 col-sm-6">
{{ mozillians_field(user_form.username) }}
</div>
<div class="col-md-4 text-right">
<div class="privacy-controls">
<span class="info glyphicon glyphicon-eye-open" aria-hidden="true" title="{{ _('Choose visibility group for this field') }}"></span>
<div class="btn-group btn-group-xs" role="group">
<button type="button" class="btn btn-default active">{{ _('Public') }}</button>
</div>
</div>
</div>
</div>
</fieldset>

Expand Down Expand Up @@ -83,32 +91,39 @@
<div class="panel-heading">{{ _('Emails') }}</div>
<div class="panel-body">
<fieldset>
<p>{{ _('Primary e-mail address') }}</p>
<label class="email-label">{{ _('Primary e-mail address') }}</label>
<div class="row">
<div class="col-md-9">
<label class="email">{{ email_privacy_form.instance.email }}</label>
<div class="col-md-8 col-sm-6">
<span class="email">{{ email_privacy_form.instance.email }}</span>
</div>
<div class="col-md-3 text-right">
<div class="col-md-4 col-sm-6 text-right">
{{ privacy_field(email_privacy_form.privacy_email) }}
</div>
</div>
</fieldset>

<fieldset id="alternate-email">
<p>{{ _('Secondary e-mail addresses') }}</p>
<label class="email-label">{{ _('Secondary e-mail addresses') }}</label>
{{ alternate_email_formset.management_form }}

{% for form in alternate_email_formset %}
<div class="alternate-email-fieldrow">
<label class="email">{{ form.instance.identifier }}</label>
<a class="delete" href="{{ url('phonebook:delete_email', form.instance.pk) }}">
Delete
</a>
<a class="button" href="{{ url('phonebook:change_primary_email', form.instance.pk) }}">
Make Primary
</a>
{{ form.id }}
{{ privacy_field(form.privacy) }}
<div class="row alternate-email-fieldrow">
<div class="col-sm-8">
<span class="email">{{ form.instance.identifier }}</span>
{{ form.id }}
<div class="email-controls">
<a class="delete" href="{{ url('phonebook:delete_email', form.instance.pk) }}">
Delete
</a>
<a class="button" href="{{ url('phonebook:change_primary_email', form.instance.pk) }}">
Make Primary
</a>
</div>
</div>
<div class="col-sm-4">
{{ privacy_field(form.privacy) }}
</div>

</div>
{% endfor %}

Expand Down
6 changes: 3 additions & 3 deletions mozillians/templates/phonebook/includes/profile_edit_location.html
View file
Expand Up @@ -56,8 +56,8 @@
</div>
<div class="col-md-3 col-sm-3">
<div class="geocheckbox {% if location_form.savecountry.errors %} error {% endif %}">
{{ location_form.savecountry }}
{{ location_form.savecountry.label_tag() }}
{{ location_form.savecountry }}
{% for error in location_form.savecountry.errors %}
<span class="error-message">{{ error }}</span>
{% endfor %}
Expand All @@ -79,8 +79,8 @@
</div>
<div class="col-md-3 col-sm-3">
<div class="geocheckbox {% if location_form.saveregion.errors %} error {% endif %}">
{{ location_form.saveregion }}
{{ location_form.saveregion.label_tag() }}
{{ location_form.saveregion }}
{% for error in location_form.saveregion.errors %}
<span class="error-message">{{ error }}</span>
{% endfor %}
Expand All @@ -101,8 +101,8 @@
</div>
<div class="col-md-3 col-sm-3">
<div class="geocheckbox {% if location_form.savecity.errors %} error {% endif %}">
{{ location_form.savecity }}
{{ location_form.savecity.label_tag() }}
{{ location_form.savecity }}
{% for error in location_form.savecity.errors %}
<span class="error-message">{{ error }}</span>
{% endfor %}
Expand Down
28 changes: 17 additions & 11 deletions mozillians/templates/phonebook/includes/profile_edit_registration.html
View file
Expand Up @@ -16,27 +16,33 @@
<div class="panel-heading">{{ _('Basic Information') }}</div>
<div class="panel-body">
<div class="row">
<div class="col-md-6">
<div class="col-md-4">
{% include 'phonebook/includes/photo_form.html' %}
</div>

<div class="col-md-6 registration">
<div class="col-md-8 registration">
<fieldset>
<div class="row">
<div class="col-md-12">
<div class="col-md-8 col-sm-8">
{{ mozillians_field(user_form.username) }}
</div>
<div class="col-md-4 col-sm-4 text-right">
<div class="privacy-controls">
<span class="info glyphicon glyphicon-eye-open" aria-hidden="true" title="{{ _('Choose visibility group for this field') }}"></span>
<div class="btn-group btn-group-xs" role="group">
<button type="button" class="btn btn-default active">{{ _('Public') }}</button>
</div>
</div>
</div>
</div>
</fieldset>

<fieldset>
<div class="row">
<div class="col-md-12 col-sm-6">
<div class="col-md-8 col-sm-8">
{{ mozillians_field(registration_form.full_name) }}
</div>
</div>
<div class="row">
<div class="col-md-12 registration">
<div class="col-md-4 col-sm-4 text-right">
{{ privacy_field(registration_form.privacy_full_name) }}
</div>
</div>
Expand Down Expand Up @@ -88,16 +94,16 @@

<fieldset>
<div class="row">
<div class="col-md-5 col-sm-6">
<div class="col-md-5 col-sm-6 registration">
<label class="required">{{ _('Country') }}</label>
<span id="display_country" class="geodisplay"
data-mapbox="{{ profile.geo_country.name if profile.geo_country else ''}}">
</span>
</div>
<div class="col-md-4 col-sm-3">
<div class="geocheckbox {% if registration_form.savecountry.errors %} error {% endif %}">
{{ registration_form.savecountry }}
{{ registration_form.savecountry.label_tag() }}
{{ registration_form.savecountry }}
{% for error in registration_form.savecountry.errors %}
<span class="error-message">{{ error }}</span>
{% endfor %}
Expand All @@ -119,8 +125,8 @@
</div>
<div class="col-md-4 col-sm-3">
<div class="geocheckbox {% if registration_form.saveregion.errors %} error {% endif %}">
{{ registration_form.saveregion }}
{{ registration_form.saveregion.label_tag() }}
{{ registration_form.saveregion }}
{% for error in registration_form.saveregion.errors %}
<span class="error-message">{{ error }}</span>
{% endfor %}
Expand All @@ -141,8 +147,8 @@
</div>
<div class="col-md-4 col-sm-3">
<div class="geocheckbox {% if registration_form.savecity.errors %} error {% endif %}">
{{ registration_form.savecity }}
{{ registration_form.savecity.label_tag() }}
{{ registration_form.savecity }}
{% for error in registration_form.savecity.errors %}
<span class="error-message">{{ error }}</span>
{% endfor %}
Expand Down

0 comments on commit 10b2f57

Please sign in to comment.