Merge pull request #4232 from fabrixxm/frio-login

[WIP] Frio: restyle login page

view/theme/frio/config.php

@@ -39,6 +39,7 @@ function theme_admin_post(App $a) {
 		Config::set('frio', 'contentbg_transp', $_POST["frio_contentbg_transp"]);
 		Config::set('frio', 'background_image', $_POST["frio_background_image"]);
 		Config::set('frio', 'bg_image_option',  $_POST["frio_bg_image_option"]);
+		Config::set('frio', 'login_bg_image',   $_POST["frio_login_bg_image"]);
 		Config::set('frio', 'css_modified',     time());
 	}
 }
@@ -75,6 +76,7 @@ function theme_admin(App $a) {
 	$arr["contentbg_transp"] = Config::get('frio', 'contentbg_transp');
 	$arr["background_image"] = Config::get('frio', 'background_image');
 	$arr["bg_image_option"]  = Config::get('frio', 'bg_image_option');
+	$arr["login_bg_image"]   = Config::get('frio', 'login_bg_image');
 
 	return frio_form($arr);
 }
@@ -104,7 +106,7 @@ function frio_form($arr) {
 	$background_image_help = "<strong>" . t("Note"). ": </strong>".t("Check image permissions if all users are allowed to visit the image");
 
 	$t = get_markup_template('theme_settings.tpl');
-	$o .= replace_macros($t, array(
+	$ctx = array(
 		'$submit'           => t('Submit'),
 		'$baseurl'          => System::baseUrl(),
 		'$title'            => t("Theme settings"),
@@ -116,7 +118,13 @@ function frio_form($arr) {
 		'$contentbg_transp' => array_key_exists("contentbg_transp", $disable) ? "" : array('frio_contentbg_transp', t("Content background transparency"), ((isset($arr["contentbg_transp"]) && $arr["contentbg_transp"] != "") ? $arr["contentbg_transp"] : 100)),
 		'$background_image' => array_key_exists("background_image", $disable ) ? "" : array('frio_background_image', t('Set the background image'), $arr['background_image'], $background_image_help),
 		'$bg_image_options' => Image::get_options($arr),
-	));
+	);
+
+	if ( array_key_exists("login_bg_image", $arr ) &&  !array_key_exists("login_bg_image", $disable ) ) { 
+		$ctx['$login_bg_image']  = array('frio_login_bg_image', t('Login page background image'), $arr['login_bg_image'], $background_image_help);
+	}
+
+	$o .= replace_macros($t, $ctx);
 
 	return $o;
 }

view/theme/frio/css/style.css

@@ -3005,3 +3005,68 @@ section .profile-match-wrapper {
     float: left;
 }
 
+/** 
+ * Login page
+ */
+.mod-home.is-not-singleuser,
+.mod-login {
+    background-image: linear-gradient(to right, rgba(0,0,0, 0.7) , rgba(0,0,0, 0.4)), url($login_bg_image);
+    background-size: cover;
+    background-attachment: fixed;
+    background-position: center;
+    padding-top: 0;
+}
+.mod-home.is-not-singleuser nav.navbar,
+.mod-login nav.navbar { background-color: transparent }
+.mod-home.is-not-singleuser #topbar-second,
+.mod-login #topbar-second { 
+    background-color: transparent;
+    box-shadow: unset;
+    border: 0
+}
+.mod-home.is-not-singleuser #content > h1,
+.mod-login #content > h1 {
+    color: #eee;
+}
+
+@media screen and (min-width: 700px) {
+    .mod-home.is-not-singleuser #content > #login-form,
+    .mod-login #content > #login-form {    
+        width: 50%;
+        background-color: #fff;
+        color: #444;
+        padding: 1em;
+        float: right;
+        position: relative;
+        margin-top: 4em;
+    }
+
+    .mod-home.is-not-singleuser #content > #login-form:before,
+    .mod-login #content > #login-form:before {
+        display: block;
+        position: absolute;
+        content: " ";
+        background-color: rgba(255,255,255,0.1);
+        width:90%;
+        height: 110%;
+        top: -5%;
+        left: 5%;
+        z-index: -1;
+    }
+
+    .mod-home.is-not-singleuser #content > #login-form:after,
+    .mod-login #content > #login-form:after {
+        display: block;
+        position: absolute;
+        content: " ";
+        background-color: rgba(255,255,255,0.2);
+        width:80%;
+        height: 120%;
+        top: -10%;
+        left: 10%;
+        z-index: -1;
+    }
+}
+
+
+

view/theme/frio/php/default.php

@@ -54,9 +54,12 @@ if (!isset($minimal)) {
 	}
 	echo '
 		<meta name="theme-color" content="' . $nav_bg . '" />';
+
+	$is_singleuser = Config::get('system','singleuser');
+	$is_singleuser_class = $is_singleuser ? "is-singleuser" : "is-not-singleuser";
 ?>
 	</head>
-	<body id="top">
+	<body id="top" class="mod-<?php echo $a->module." ".$is_singleuser_class;?>">
 		<a href="#content" class="sr-only sr-only-focusable">Skip to main content</a>
 <?php
 	if (x($page, 'nav') && !$minimal) {

view/theme/frio/style.php

@@ -42,6 +42,7 @@ if ($a->module !== 'install') {
 		$contentbg_transp = Config::get("frio", "contentbg_transp");
 		$background_image = Config::get("frio", "background_image");
 		$bg_image_option  = Config::get("frio", "bg_image_option");
+		$login_bg_image   = Config::get("frio", "login_bg_image");
 		$modified         = Config::get("frio", "css_modified");
 
 		// There is maybe the case that the user did never modify the theme settings.
@@ -96,6 +97,7 @@ $link_color       = (empty($link_color)       ? "#6fdbe8"      : $link_color);
 $bgcolor          = (empty($bgcolor)          ? "#ededed"      : $bgcolor);
 // The background image can not be empty. So we use a dummy jpg if no image was set.
 $background_image = (empty($background_image) ? 'img/none.jpg' : $background_image);
+$login_bg_image   = (empty($login_bg_image)   ? 'img/login_bg.jpg' : $login_bg_image);
 $modified         = (empty($modified)         ? time()         :$modified);
 
 $contentbg_transp = ((isset($contentbg_transp) && $contentbg_transp != "") ? $contentbg_transp : 100);
@@ -175,6 +177,7 @@ $options = array (
 	'$contentbg_transp'            => $contentbg_transp,
 	'$background_image'            => $background_image,
 	'$background_size_img'         => $background_size_img,
+	'$login_bg_image'              => $login_bg_image,
 );
 
 $css_tpl = file_get_contents('view/theme/frio/css/style.css');

view/theme/frio/templates/login.tpl

@@ -20,7 +20,7 @@
 
 		<div id="login-extra-links" class="list-unstyled">
 			{{if $register}}<a href="register" title="{{$register.title|escape:'html'}}" id="register-link">{{$register.desc}}</a>{{/if}}
-			<a href="lostpass" title="{{$lostpass|escape:'html'}}" id="lost-password-link" class="pull-right">{{$lostlink}}</a>
+			<a href="lostpass" title="{{$lostpass|escape:'html'}}" id="lost-password-link">{{$lostlink}}</a>
 		</div>
 
 		<div id="login-submit-wrapper" class="pull-right" >

view/theme/frio/templates/theme_settings.tpl

@@ -30,6 +30,8 @@
 {{/foreach}}
 </div>
 
+{{if $login_bg_image}}{{include file="field_fileinput.tpl" field=$login_bg_image}}{{/if}}
+
 <script type="text/javascript">
 	$(document).ready(function() {
 		$("#frio_nav_bg, #frio_nav_icon_color, #frio_background_color, #frio_link_color").colorpicker({format: 'hex', align: 'left'});