Adjusting register page responsive

Zambom
1 parent 492b3748
Showing 3 changed files with 44 additions and 35 deletions Show diff stats
amadeus/static/css/base/amadeus.css
users/templates/users/login.html
users/templates/users/register.html
@@ -729,17 +729,30 @@ ul, li {
 /* core/index.html classes*/
+.outside-title {
+    color: #43a251;
+}
 .logo-login{
     margin-top: 15px;
     margin-bottom: 15px;
     width: 20%;
 }
+
+.logo-register {
+    width: 10%;
+}
+
 .forgotPassword{
-  padding-bottom: 10px;
+    padding-bottom: 10px;
 }
 .form-group{
-  margin-top: 5px;
+    margin-top: 5px;
+}
+
+.form-group.form-group-sm label.control-label {
+    font-size: 10px;
+    margin: 0px;
 }
 /* core/register_user.html classes*/
@@ -36,7 +36,7 @@
                 <div class="card-block">
                     <div class="row">
                         <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 text-center">
-                            <h2 style="color:#43a251"><strong> {% trans 'Sign in with your account to continue' %} </strong></h2>
+                            <h2 class="outside-title"><strong> {% trans 'Sign in with your account to continue' %} </strong></h2>
                         </div>
                     </div>
                     <form id="form-login" method="post" action="">
@@ -13,49 +13,45 @@
 {% endblock sidebar %}
 {% block content %}
-	{% if messages %}
-		{% for message in messages %}
-			<div class="alert alert-{{ message.tags }} alert-dismissible" role="alert">
-				<button type="button" class="close" data-dismiss="alert" aria-label="Close">
-					<span aria-hidden="true">&times;</span>
-				</button>
-				<p>{{ message }}</p>
-			</div>
-		{% endfor %}
-	{% endif %}
-	
 	<div class="row">
-		<div class="col-sm-7 col-sm-offset-4 col-md-6 col-md-offset-4 col-xs-8 col-xs-offset-3 col-lg-6 col-lg-offset-4  col-xl-6 col-xl-offset-4 ">
-			<div class="col-sm-9 col-sm-offset-2 col-md-8 col-md-offset-2 col-xs-9 col-xs-offset-2  col-lg-8 col-lg-offset-2  col-xl-8 col-xl-offset-2">
-				<img src="{% static 'img/amadeus.png' %}" class="img-responsive center-block logo-login " alt="logo amadeus">
-			</div>
-		</div>
+		<div class="col-lg-offset-1 col-md-offset-1">
+            <img src="{% static 'img/amadeus.png' %}" class="img-responsive center-block logo-login logo-register" alt="logo amadeus">
+        </div>
 	</div>
 	<div class="row">
-		<div class="col-lg-8 col-lg-offset-3 col-md-8 col-md-offset-3 col-sm-9 col-sm-offset-3 col-xs-10 col-xs-offset-2">
+		<div class="col-lg-offset-2 col-md-offset-2 col-sm-offset-1 col-lg-9 col-md-9 col-sm-10">
+			{% if messages %}
+				{% for message in messages %}
+					<div class="alert alert-{{ message.tags }} alert-dismissible" role="alert">
+						<button type="button" class="close" data-dismiss="alert" aria-label="Close">
+							<span aria-hidden="true">&times;</span>
+						</button>
+						<p>{{ message }}</p>
+					</div>
+				{% endfor %}
+			{% endif %}
+			
 			<div class="card">
 				<div class="card-body">
 					<div class="row">
-						<div class="col-md-12 text-center">
-							
-							<h2 style="color:#43a251"><strong>{% trans "User Register" %}</strong></h2>
+						<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 text-center">
+							<h2 class="outside-title"><strong>{% trans "User Register" %}</strong></h2>
 						</div>
 					</div>
-					<form class="{% if form.has_error %} has-error {% endif %} is-fileinput" method="post" enctype="multipart/form-data">
+					<form class="{% if form.has_error %} has-error {% endif %} form-horizontal is-fileinput" method="post" enctype="multipart/form-data">
 						{% csrf_token %}
 						{% for field in form %}
-							<div class="col-md-10 col-md-offset-1 col-sm-12 col-xs-12 col-lg-10 col-lg-offset-1">
-								<div class="row form-group">
-									<div class="col-md-3 col-sm-3 col-xs-5 col-lg-3 text-right">
-										{% if field.field.required %}
-											<label for="{{ field.auto_id }}" class="control-label">{{ field.label }}<span>*</span></label>
-										{% else %}
-											<label for="{{ field.auto_id }}" class="control-label">{{ field.label }}</label>
-										{% endif %}
-									</div>
-									<div class="col-md-9 col-sm-9 col-xs-7 col-lg-9">
+							<div class="col-lg-12 col-md-12 col-sm-12">
+								<div class="form-group form-group-sm">
+									{% if field.field.required %}
+										<label for="{{ field.auto_id }}" class="col-md-2 col-sm-2 col-xs-3 col-lg-2 control-label">{{ field.label }}<span>*</span></label>
+									{% else %}
+										<label for="{{ field.auto_id }}" class="col-md-2 col-sm-2 col-xs-3 col-lg-2 control-label">{{ field.label }}</label>
+									{% endif %}
+
+									<div class="col-md-10 col-sm-10 col-xs-9 col-lg-10">
 										{% if field.auto_id == 'id_image' %}
 											{% render_field field class='form-control' %}
 											<div class="input-group">
@@ -89,7 +85,7 @@
 							</div>
 						{% endfor %}
 						<div class="row">
-							<div class="col-md-10 col-md-offset-1 col-sm-12 col-xs-12 col-lg-10 col-lg-offset-1">
+							<div class="col-lg-12 col-md-12 col-sm-12">
 								<div class="pull-left">
 									<input type="submit" value="{% trans 'Register' %}" class="btn btn-raised btn-primary" />
 								</div>
	@@ -36,7 +36,7 @@		@@ -36,7 +36,7 @@
36	<div class="card-block">	36	<div class="card-block">
37	<div class="row">	37	<div class="row">
38	<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 text-center">	38	<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 text-center">
39	- <h2 style="color:#43a251"><strong> {% trans 'Sign in with your account to continue' %} </strong></h2>	39	+ <h2 class="outside-title"><strong> {% trans 'Sign in with your account to continue' %} </strong></h2>
40	</div>	40	</div>
41	</div>	41	</div>
42	<form id="form-login" method="post" action="">	42	<form id="form-login" method="post" action="">