Some work on the login, register and default home page. Mostly neatly centering things on different viewport widths. Bluegrid schema updated.

6 files changed, 62 insertions, 21 deletions

diff --git a/mod/home.php b/mod/home.php
index bf2463bbc..bfac17eab 100644
--- a/mod/home.php
+++ b/mod/home.php
@@ -72,7 +72,7 @@ function home_content(&$a, $update = 0, $load = false) {
 
 	$sitename = get_config('system','sitename');
 	if($sitename) 
-		$o .= '<h1>' . sprintf( t("Welcome to %s") ,$sitename) . '</h1>';
+		$o .= '<h1 class="home-welcome">' . sprintf( t("Welcome to %s") ,$sitename) . '</h1>';
 
 	$loginbox = get_config('system','login_on_homepage');
 	if(intval($loginbox) || $loginbox === false)
diff --git a/view/css/mod_home.css b/view/css/mod_home.css
new file mode 100644
index 000000000..d4cf37253
--- /dev/null
+++ b/view/css/mod_home.css
@@ -0,0 +1,15 @@
+.home-welcome {
+	text-align: center;
+}
+
+.generic-content-wrapper-styled {
+	margin-left: auto;
+	margin-right: auto;
+	max-width: 420px;
+	font-size: 1.1em;
+}
+
+#login-main {
+	max-width: 400px;
+	margin-top: 50px;
+}
diff --git a/view/css/mod_login.css b/view/css/mod_login.css
new file mode 100644
index 000000000..a086c50df
--- /dev/null
+++ b/view/css/mod_login.css
@@ -0,0 +1,23 @@
+.generic-content-wrapper-styled {
+	margin-left: auto;
+	margin-right: auto;
+	max-width: 420px;
+	font-size: 1.1em;
+}
+
+#login-main {
+	max-width: 400px;
+	margin-top: 50px;
+}
+
+@media (min-width: 768px) and (max-width: 991px) {
+	#region_1 {
+		display: none !important;
+	}
+}
+
+@media (min-width: 992px) and (max-width: 1199px) {
+	#region_3 {
+		display: table-cell !important;
+	}
+}
diff --git a/view/css/mod_register.css b/view/css/mod_register.css
index b662610ae..618b7ce95 100644
--- a/view/css/mod_register.css
+++ b/view/css/mod_register.css
@@ -1,31 +1,35 @@
 
 h2 {
-	margin-left: 5%;
-	margin-top: 5%;
+	margin: 20px 0 20px 5%;
 }
 
-#register-form {
-	font-size: 1.4em;	
-	margin-left: 10%;
-	margin-top: 5%;
+.generic-content-wrapper-styled {
+	margin-left: auto;
+	margin-right: auto;
+	max-width: 820px;
+	font-size: 1.1em;
 }
 
-#register-desc, #register-text, #register-sites {
+
+#register-desc, #register-invite-desc, #register-text, #register-sites {
 	font-weight: bold;
 	margin-bottom: 15px;
 	padding: 8px;
 	border: 1px solid #ccc;
 }
 
-.register-label {
+@media (min-width: 560px) {
+.register-label, .register-input {
 	float: left;
-	width: 275px;
+	width: 50%;
+}
 }
 
-.register-input {
+@media (max-width: 559px) {
+.register-label, .register-input {
 	float: left;
-	width: 275px;
-	padding: 5px;
+	max-width: 400px;
+}
 }
 
 .register-feedback {
diff --git a/view/theme/redbasic/css/style.css b/view/theme/redbasic/css/style.css
index 16f7845e2..5fcf901fb 100644
--- a/view/theme/redbasic/css/style.css
+++ b/view/theme/redbasic/css/style.css
@@ -249,11 +249,6 @@ footer {
 	color: $font_colour;
 }
 
-#login-main {
-	max-width: 300px;
-	margin-top: 50px;
-}
-
 #cropimage-wrapper, #cropimage-preview-wrapper {
 	float: left;
 	padding: 30px;
diff --git a/view/theme/redbasic/schema/bluegrid.css b/view/theme/redbasic/schema/bluegrid.css
index 0eb3dab1f..820e84baa 100644
--- a/view/theme/redbasic/schema/bluegrid.css
+++ b/view/theme/redbasic/schema/bluegrid.css
@@ -284,8 +284,12 @@ input {
 	border-radius: 0px;	
 }
 
+.home-welcome {
+	color: #FFF;
+	margin-bottom: 30px;
+} 
+
 #login-main {
-    max-width: 100%;
     margin-top: 0;
 }
 
@@ -341,7 +345,7 @@ input {
     background-color: #FFF;
 }
 
-.btn-primary, input#event-submit, input#rmagic-submit-button, input#lostpass-submit-button, input#side-follow-submit, .profile-edit-submit-wrapper > input.profile-edit-submit-button, input#profile-photo-submit, form#chat-form > input, div#adminpage > form > div.submit > input, input.sources-submit, input.contact-edit-submit, input#dbtn-submit, input#newchannel-submit-button, input#contacts-search-submit {
+.btn-primary, input#event-submit, input#rmagic-submit-button, input#lostpass-submit-button, input#side-follow-submit, .profile-edit-submit-wrapper > input.profile-edit-submit-button, input#profile-photo-submit, form#chat-form > input, div#adminpage > form > div.submit > input, input.sources-submit, input.contact-edit-submit, input#dbtn-submit, input#newchannel-submit-button, input#contacts-search-submit, input#register-submit-button {
     background-color: #FFF;
     color: #43488A;
 	border-radius: 0px;
@@ -350,7 +354,7 @@ input {
     transition: all .3s ease-in-out;
 }
 
-.btn-primary:hover, .btn-primary:focus, input#event-submit:hover, input#event-submit:focus, input#rmagic-submit-button:hover, input#rmagic-submit-button:focus, input#lostpass-submit-button:hover, input#lostpass-submit-button:focus, input#side-follow-submit:hover, input#side-follow-submit:focus, .profile-edit-submit-wrapper > input.profile-edit-submit-button:hover, .profile-edit-submit-wrapper > input.profile-edit-submit-button:focus, input#profile-photo-submit:hover, input#profile-photo-submit:focus, form#chat-form > input:hover, form#chat-form > input:focus, div#adminpage > form > div.submit > input:hover, div#adminpage > form > div.submit > input:focus, input.sources-submit:hover, input.sources-submit:focus, input.contact-edit-submit:focus, input.contact-edit-submit:hover, input#dbtn-submit:hover, input#dbtn-submit:focus, input#newchannel-submit-button:hover, input#newchannel-submit-button:focus, input#contacts-search-submit:hover, input#contacts-search-submit:focus {
+.btn-primary:hover, .btn-primary:focus, input#event-submit:hover, input#event-submit:focus, input#rmagic-submit-button:hover, input#rmagic-submit-button:focus, input#lostpass-submit-button:hover, input#lostpass-submit-button:focus, input#side-follow-submit:hover, input#side-follow-submit:focus, .profile-edit-submit-wrapper > input.profile-edit-submit-button:hover, .profile-edit-submit-wrapper > input.profile-edit-submit-button:focus, input#profile-photo-submit:hover, input#profile-photo-submit:focus, form#chat-form > input:hover, form#chat-form > input:focus, div#adminpage > form > div.submit > input:hover, div#adminpage > form > div.submit > input:focus, input.sources-submit:hover, input.sources-submit:focus, input.contact-edit-submit:focus, input.contact-edit-submit:hover, input#dbtn-submit:hover, input#dbtn-submit:focus, input#newchannel-submit-button:hover, input#newchannel-submit-button:focus, input#contacts-search-submit:hover, input#contacts-search-submit:focus, input#register-submit-button:hover, input#register-submit-button:focus {
     border-color: #FFF;
     background-color: #43488A;
     color: #FFF;