From 70b7de39a751934056ca5744ae4327d94b4a80f9 Mon Sep 17 00:00:00 2001
From: Fabrixxm <fabrix.xm@gmail.com>
Date: Tue, 28 Jul 2015 17:20:40 +0200
Subject: [PATCH] Upload/Browse popup for files and images

Jot buttons to upload images and files show a popup, where the
user can select a previously uploaded item o upload a new one
---
 mod/fbrowser.php                     | 37 ++++++++----
 view/global.css                      | 18 +++++-
 view/templates/filebrowser.tpl       |  7 ++-
 view/templates/filebrowser_plain.tpl | 86 ++++++++++++++++++++++++++++
 view/templates/jot-header.tpl        | 77 +++++++++++++++++--------
 view/theme/duepuntozero/style.css    |  3 +
 view/theme/quattro/dark/style.css    | 67 ++++++++++++++++++++++
 view/theme/quattro/green/style.css   | 67 ++++++++++++++++++++++
 view/theme/quattro/lilac/style.css   | 67 ++++++++++++++++++++++
 view/theme/quattro/quattro.less      | 25 ++++++++
 view/theme/vier/style.css            |  6 ++
 11 files changed, 422 insertions(+), 38 deletions(-)
 create mode 100644 view/templates/filebrowser_plain.tpl

diff --git a/mod/fbrowser.php b/mod/fbrowser.php
index 075846e50..bf6842faf 100644
--- a/mod/fbrowser.php
+++ b/mod/fbrowser.php
@@ -18,11 +18,18 @@ function fbrowser_content($a){
 	if ($a->argc==1)
 		killme();
 	
+	$template_file = "filebrowser.tpl";
+	$mode = "";
+	if (x($_GET,'mode')) {
+		$template_file = "filebrowser_plain.tpl";
+		$mode  = "?mode=".$_GET['mode'];
+	}
+	
 	//echo "<pre>"; var_dump($a->argv); killme();	
 	
 	switch($a->argv[1]){
 		case "image":
-			$path = array( array($a->get_baseurl()."/fbrowser/image/", t("Photos")));
+			$path = array( array($a->get_baseurl()."/fbrowser/image/".$mode, t("Photos")));
 			$albums = false;
 			$sql_extra = "";
 			$sql_extra2 = " ORDER BY created DESC LIMIT 0, 10";
@@ -32,8 +39,8 @@ function fbrowser_content($a){
 					intval(local_user())
 				);
 				// anon functions only from 5.3.0... meglio tardi che mai..
-				function folder1($el){return array(bin2hex($el['album']),$el['album']);}	
-				$albums = array_map( "folder1" , $albums);
+				$folder1 = function($el) use ($mode) {return array(bin2hex($el['album']).$mode,$el['album']);};
+				$albums = array_map( $folder1 , $albums);
 				
 			}
 			
@@ -42,7 +49,7 @@ function fbrowser_content($a){
 				$album = hex2bin($a->argv[2]);
 				$sql_extra = sprintf("AND `album` = '%s' ",dbesc($album));
 				$sql_extra2 = "";
-				$path[]=array($a->get_baseurl()."/fbrowser/image/".$a->argv[2]."/", $album);
+				$path[]=array($a->get_baseurl()."/fbrowser/image/".$a->argv[2]."/".$mode, $album);
 			}
 				
 			$r = q("SELECT `resource-id`, `id`, `filename`, type, min(`scale`) AS `hiq`,max(`scale`) AS `loq`, `desc`  
@@ -71,14 +78,16 @@ function fbrowser_content($a){
 			}
 			$files = array_map("files1", $r);
 			
-			$tpl = get_markup_template("filebrowser.tpl");
-			echo replace_macros($tpl, array(
+			$tpl = get_markup_template($template_file);
+			
+			$o =  replace_macros($tpl, array(
 				'$type' => 'image',
 				'$baseurl' => $a->get_baseurl(),
 				'$path' => $path,
 				'$folders' => $albums,
 				'$files' =>$files,
 				'$cancel' => t('Cancel'),
+				'$nickname' => $a->user['nickname'],
 			));
 				
 				
@@ -106,14 +115,15 @@ function fbrowser_content($a){
 				//echo "<pre>"; var_dump($files); killme();
 			
 							
-				$tpl = get_markup_template("filebrowser.tpl");
-				echo replace_macros($tpl, array(
+				$tpl = get_markup_template($template_file);
+				$o = replace_macros($tpl, array(
 					'$type' => 'file',
 					'$baseurl' => $a->get_baseurl(),
-					'$path' => array( array($a->get_baseurl()."/fbrowser/image/", t("Files")) ),
+					'$path' => array( array($a->get_baseurl()."/fbrowser/file/", t("Files")) ),
 					'$folders' => false,
 					'$files' =>$files,
 					'$cancel' => t('Cancel'),
+					'$nickname' => $a->user['nickname'],
 				));
 				
 			}
@@ -121,7 +131,12 @@ function fbrowser_content($a){
 			break;
 	}
 	
-
-	killme();
+	if (x($_GET,'mode')) {
+		return $o;
+	} else {
+		echo $o;
+		killme();
+	}
+	
 	
 }
diff --git a/view/global.css b/view/global.css
index 9bcd30229..dd41b9935 100644
--- a/view/global.css
+++ b/view/global.css
@@ -176,4 +176,20 @@ span.oembed, h4 {
 }
 
 /* notifications unseen */
-.notify-unseen { background-color: #cceeFF; }
\ No newline at end of file
+.notify-unseen { background-color: #cceeFF; }
+
+
+/* plain text editor upload/select popup */
+
+.fbrowser .path a { padding: 5px; }
+.fbrowser .path a:before { content: "/"; padding-right: 5px;}
+.fbrowser .folders ul { list-style-type: none; padding-left: 10px;}
+.fbrowser .list { height: auto; overflow-y: hidden; margin: 10px 0px; }
+.fbrowser.image .photo-album-image-wrapper { float: left; }
+.fbrowser.image a img { height: 48px; }
+.fbrowser.image a p { display: none;}
+.fbrowser.file .photo-album-image-wrapper { float:none;  white-space: nowrap; }
+.fbrowser.file img { display: inline; }
+.fbrowser.file p  { display: inline; white-space: nowrap; }
+
+.fbrowser .upload { clear: both; padding-top: 1em;}
\ No newline at end of file
diff --git a/view/templates/filebrowser.tpl b/view/templates/filebrowser.tpl
index b207277a7..2122e27fc 100644
--- a/view/templates/filebrowser.tpl
+++ b/view/templates/filebrowser.tpl
@@ -1,6 +1,9 @@
-
 <!DOCTYPE html>
 <html>
+	<!--
+		This is the template used by mod/fbrowser.php when is called from TinyMCE rich editor.
+		See also 'filebrowser_plain.tpl'
+	-->
 	<head>
 	<script type="text/javascript" src="{{$baseurl}}/library/tinymce/jscripts/tiny_mce/tiny_mce_popup.js"></script>
 	<style>
@@ -65,7 +68,7 @@
 			</div>
 			<div class="filebrowser folders">
 				<ul>
-					{{foreach $folders as $f}}<li><a href="{{$f.0}}/">{{$f.1}}</a></li>{{/foreach}}
+					{{foreach $folders as $f}}<li><a href="{{$baseurl}}/fbrowser/{{$type}}/{{$f.0}}/">{{$f.1}}</a></li>{{/foreach}}
 				</ul>
 			</div>
 			<div class="filebrowser files {{$type}}">
diff --git a/view/templates/filebrowser_plain.tpl b/view/templates/filebrowser_plain.tpl
new file mode 100644
index 000000000..4d29f60b8
--- /dev/null
+++ b/view/templates/filebrowser_plain.tpl
@@ -0,0 +1,86 @@
+	<!--
+		This is the template used by mod/fbrowser.php when is called from plain text editor.
+		See also 'filebrowser.tpl'
+	-->
+
+<script type="text/javascript" src="{{$baseurl}}/js/ajaxupload.js" ></script>
+
+<div class="fbrowser {{$type}}">
+
+	<div class="path">
+		{{foreach $path as $p}}<a href="{{$p.0}}">{{$p.1}}</a>{{/foreach}}
+	</div>
+	
+	<div class="folders">
+		<ul>
+			{{foreach $folders as $f}}<li><a href="{{$baseurl}}/fbrowser/{{$type}}/{{$f.0}}">{{$f.1}}</a></li>{{/foreach}}
+		</ul>
+	</div>
+		
+	{{foreach $files as $f}}
+	<div class="photo-album-image-wrapper">
+		<a href="#" class="photo-album-photo-link" data-link="{{$f.0}}" data-filename="{{$f.1}}" data-img="{{$f.2}}">
+			<img src="{{$f.2}}">
+			<p>{{$f.1}}</p>
+		</a>
+	</div>
+	<div class="photo-album-image-wrapper-end"></div>
+	{{/foreach}}
+
+	<div class="upload">
+		<button id="upload-{{$type}}"><img id="profile-rotator" src="images/rotator.gif" alt="{{$wait}}" title="{{$wait|escape:'html'}}" style="display: none;" /> {{"Upload"|t}}</button> 
+	</dksiv>
+</div>
+
+
+
+	<script>
+		$(".photo-album-photo-link").on('click', function(e){
+			e.preventDefault();
+			
+			{{if $type == "image"}}
+			var embed = "[url="+this.dataset.link+"][img]"+this.dataset.img+"[/img][/url]";
+			{{/if}}
+			{{if $type == "file"}}
+			var embed = "[url="+this.dataset.link+"][img]"+this.dataset.img+"[/img] "+this.dataset.filename+"[/url]";
+			{{/if}}
+			console.log(this.dataset.filename, embed, parent.$("body"));
+			parent.$("body").trigger("fbrowser.{{$type}}", [
+				this.dataset.filename,
+				embed,
+			]);
+			
+		});
+		
+		if ($("#upload-image").length)
+			var image_uploader = new window.AjaxUpload(
+				'upload-image',
+				{ action: 'wall_upload/{{$nickname}}',
+					name: 'userfile',
+					onSubmit: function(file,ext) { $('#profile-rotator').show(); },
+					onComplete: function(file,response) {
+						location = baseurl + "/fbrowser/image/?mode=minimal";
+						location.reload(true);
+					}				 
+				}
+			);
+
+		if ($("#upload-file").length)
+			var file_uploader = new window.AjaxUpload(
+				'upload-file',
+				{ action: 'wall_attach/{{$nickname}}',
+					name: 'userfile',
+					onSubmit: function(file,ext) { $('#profile-rotator').show(); },
+					onComplete: function(file,response) {
+						location = baseurl + "/fbrowser/file/?mode=minimal";
+						location.reload(true);				}				 
+				}
+			);
+		
+		
+
+	</script>
+
+	</body>
+	
+</html>
diff --git a/view/templates/jot-header.tpl b/view/templates/jot-header.tpl
index 3a67e8bcc..5f498e706 100644
--- a/view/templates/jot-header.tpl
+++ b/view/templates/jot-header.tpl
@@ -127,38 +127,67 @@ function enableOnUser(){
 <script>
 	var ispublic = '{{$ispublic}}';
 
+	
 	$(document).ready(function() {
 		
 		/* enable tinymce on focus and click */
 		$("#profile-jot-text").focus(enableOnUser);
 		$("#profile-jot-text").click(enableOnUser);
 
-		var uploader = new window.AjaxUpload(
-			'wall-image-upload',
-			{ action: 'wall_upload/{{$nickname}}',
-				name: 'userfile',
-				onSubmit: function(file,ext) { $('#profile-rotator').show(); },
-				onComplete: function(file,response) {
-					addeditortext(response);
-					$('#profile-rotator').hide();
-				}				 
-			}
-		);
-		var file_uploader = new window.AjaxUpload(
-			'wall-file-upload',
-			{ action: 'wall_attach/{{$nickname}}',
-				name: 'userfile',
-				onSubmit: function(file,ext) { $('#profile-rotator').show(); },
-				onComplete: function(file,response) {
-					addeditortext(response);
-					$('#profile-rotator').hide();
-				}				 
-			}
-		);
-
-
+		
+		
+		
+		/* show images / file browser window
+		 * 
+		 **/
+	
+		/* callback */
+		$('body').on('fbrowser.image', function(e, filename, embedcode) {
+			$.colorbox.close();
+			addeditortext(embedcode);
+		});
+		$('body').on('fbrowser.file', function(e, filename, embedcode) {
+			$.colorbox.close();
+			addeditortext(embedcode);
+		});
+	
+		$('#wall-image-upload').on('click', function(){
+			$.colorbox({href: baseurl + "/fbrowser/image/?mode=minimal", iframe:true,innerWidth:'500px',innerHeight:'400px'})
+		});
+		
+		$('#wall-file-upload').on('click', function(){
+			$.colorbox({href: baseurl + "/fbrowser/file/?mode=minimal", iframe:true,innerWidth:'500px',innerHeight:'400px'})
+		});
+		
+		/**	
+			var uploader = new window.AjaxUpload(
+				'wall-image-upload',
+				{ action: 'wall_upload/{{$nickname}}',
+					name: 'userfile',
+					onSubmit: function(file,ext) { $('#profile-rotator').show(); },
+					onComplete: function(file,response) {
+						addeditortext(response);
+						$('#profile-rotator').hide();
+					}				 
+				}
+			);
+			var file_uploader = new window.AjaxUpload(
+				'wall-file-upload',
+				{ action: 'wall_attach/{{$nickname}}',
+					name: 'userfile',
+					onSubmit: function(file,ext) { $('#profile-rotator').show(); },
+					onComplete: function(file,response) {
+						addeditortext(response);
+						$('#profile-rotator').hide();
+					}				 
+				}
+			);
+		
+		}
+		**/
 	});
 
+
 	function deleteCheckedItems() {
 		if(confirm('{{$delitems}}')) {
 			var checkedstr = '';
diff --git a/view/theme/duepuntozero/style.css b/view/theme/duepuntozero/style.css
index 5b1e8392d..ff108a863 100644
--- a/view/theme/duepuntozero/style.css
+++ b/view/theme/duepuntozero/style.css
@@ -1469,6 +1469,7 @@ blockquote.shared_content {
   padding: 10px;
   text-align: center;
   font-size: 1.0em;
+  clear:left;
 }
 
 
@@ -3468,3 +3469,5 @@ ul.menu-popup {
 .videos .video-top-wrapper:hover .video-delete {
   opacity: 1;
 }
+
+
diff --git a/view/theme/quattro/dark/style.css b/view/theme/quattro/dark/style.css
index fe3864c38..89f3649ab 100644
--- a/view/theme/quattro/dark/style.css
+++ b/view/theme/quattro/dark/style.css
@@ -544,6 +544,7 @@ header {
   margin: 0px;
   padding: 0px;
   /*width: 100%; height: 12px; */
+
   z-index: 110;
   color: #ffffff;
 }
@@ -876,6 +877,7 @@ aside .posted-date-selector-months {
   overflow: auto;
   height: auto;
   /*.contact-block-div { width:60px; height: 60px; }*/
+
 }
 #contact-block .contact-block-h4 {
   float: left;
@@ -957,6 +959,7 @@ aside .posted-date-selector-months {
   margin-bottom: 2em;
   /*.action .s10 { width: 10px; overflow: hidden; padding: 0px;}
 	.action .s16 { width: 16px; overflow: hidden; padding: 0px;}*/
+
 }
 .widget h3 {
   padding: 0px;
@@ -1238,6 +1241,7 @@ section {
   height: 32px;
   margin-left: 16px;
   /*background: url(../../../images/icons/22/user.png) no-repeat center center;*/
+
 }
 .comment-edit-preview .contact-photo-menu-button {
   top: 15px !important;
@@ -2107,6 +2111,7 @@ ul.tabs li .active {
   min-height: 22px;
   padding-top: 6px;
   /* a { display: block;}*/
+
 }
 #photo-caption {
   display: block;
@@ -2480,3 +2485,65 @@ footer {
   float: left;
   margin-left: 2px;
 }
+/* upload/select popup */
+.fbrowser {
+  overflow: auto;
+  position: absolute;
+  top: 0px;
+  width: 100%;
+  height: 100%;
+}
+.fbrowser .path {
+  background-color: #0e232e;
+}
+.fbrowser .path a {
+  padding: 5px;
+  margin: 0px 2px;
+  display: inline-block;
+}
+.fbrowser .path a,
+.fbrowser .path a:active,
+.fbrowser .path a:visited,
+.fbrowser .path a:link,
+.fbrowser .path a:hover {
+  color: #ffffff;
+  text-decoration: none;
+  outline: none;
+}
+.fbrowser .folders ul {
+  list-style: url("icons/folder.png");
+  padding-left: 22px;
+}
+.fbrowser .list {
+  padding: 10px;
+}
+.fbrowser.image .photo-album-image-wrapper {
+  width: 48px;
+  height: 48px;
+}
+.fbrowser.image a img {
+  width: auto;
+  height: 48px;
+}
+.fbrowser.image a p {
+  display: none;
+}
+.fbrowser.file .photo-album-image-wrapper {
+  float: none;
+  white-space: nowrap;
+  width: 100%;
+  height: auto;
+}
+.fbrowser.file img {
+  display: inline;
+  width: 16px;
+  height: 16px;
+}
+.fbrowser.file p {
+  display: inline;
+  white-space: nowrap;
+}
+.fbrowser .upload {
+  clear: both;
+  padding-top: 1em;
+}
diff --git a/view/theme/quattro/green/style.css b/view/theme/quattro/green/style.css
index b0822f9b7..e49a0b16c 100644
--- a/view/theme/quattro/green/style.css
+++ b/view/theme/quattro/green/style.css
@@ -544,6 +544,7 @@ header {
   margin: 0px;
   padding: 0px;
   /*width: 100%; height: 12px; */
+
   z-index: 110;
   color: #ffffff;
 }
@@ -876,6 +877,7 @@ aside .posted-date-selector-months {
   overflow: auto;
   height: auto;
   /*.contact-block-div { width:60px; height: 60px; }*/
+
 }
 #contact-block .contact-block-h4 {
   float: left;
@@ -957,6 +959,7 @@ aside .posted-date-selector-months {
   margin-bottom: 2em;
   /*.action .s10 { width: 10px; overflow: hidden; padding: 0px;}
 	.action .s16 { width: 16px; overflow: hidden; padding: 0px;}*/
+
 }
 .widget h3 {
   padding: 0px;
@@ -1238,6 +1241,7 @@ section {
   height: 32px;
   margin-left: 16px;
   /*background: url(../../../images/icons/22/user.png) no-repeat center center;*/
+
 }
 .comment-edit-preview .contact-photo-menu-button {
   top: 15px !important;
@@ -2107,6 +2111,7 @@ ul.tabs li .active {
   min-height: 22px;
   padding-top: 6px;
   /* a { display: block;}*/
+
 }
 #photo-caption {
   display: block;
@@ -2480,3 +2485,65 @@ footer {
   float: left;
   margin-left: 2px;
 }
+/* upload/select popup */
+.fbrowser {
+  overflow: auto;
+  position: absolute;
+  top: 0px;
+  width: 100%;
+  height: 100%;
+}
+.fbrowser .path {
+  background-color: #009100;
+}
+.fbrowser .path a {
+  padding: 5px;
+  margin: 0px 2px;
+  display: inline-block;
+}
+.fbrowser .path a,
+.fbrowser .path a:active,
+.fbrowser .path a:visited,
+.fbrowser .path a:link,
+.fbrowser .path a:hover {
+  color: #ffffff;
+  text-decoration: none;
+  outline: none;
+}
+.fbrowser .folders ul {
+  list-style: url("icons/folder.png");
+  padding-left: 22px;
+}
+.fbrowser .list {
+  padding: 10px;
+}
+.fbrowser.image .photo-album-image-wrapper {
+  width: 48px;
+  height: 48px;
+}
+.fbrowser.image a img {
+  width: auto;
+  height: 48px;
+}
+.fbrowser.image a p {
+  display: none;
+}
+.fbrowser.file .photo-album-image-wrapper {
+  float: none;
+  white-space: nowrap;
+  width: 100%;
+  height: auto;
+}
+.fbrowser.file img {
+  display: inline;
+  width: 16px;
+  height: 16px;
+}
+.fbrowser.file p {
+  display: inline;
+  white-space: nowrap;
+}
+.fbrowser .upload {
+  clear: both;
+  padding-top: 1em;
+}
diff --git a/view/theme/quattro/lilac/style.css b/view/theme/quattro/lilac/style.css
index 3bfbcd002..5ea6b40c3 100644
--- a/view/theme/quattro/lilac/style.css
+++ b/view/theme/quattro/lilac/style.css
@@ -544,6 +544,7 @@ header {
   margin: 0px;
   padding: 0px;
   /*width: 100%; height: 12px; */
+
   z-index: 110;
   color: #ffffff;
 }
@@ -876,6 +877,7 @@ aside .posted-date-selector-months {
   overflow: auto;
   height: auto;
   /*.contact-block-div { width:60px; height: 60px; }*/
+
 }
 #contact-block .contact-block-h4 {
   float: left;
@@ -957,6 +959,7 @@ aside .posted-date-selector-months {
   margin-bottom: 2em;
   /*.action .s10 { width: 10px; overflow: hidden; padding: 0px;}
 	.action .s16 { width: 16px; overflow: hidden; padding: 0px;}*/
+
 }
 .widget h3 {
   padding: 0px;
@@ -1238,6 +1241,7 @@ section {
   height: 32px;
   margin-left: 16px;
   /*background: url(../../../images/icons/22/user.png) no-repeat center center;*/
+
 }
 .comment-edit-preview .contact-photo-menu-button {
   top: 15px !important;
@@ -2107,6 +2111,7 @@ ul.tabs li .active {
   min-height: 22px;
   padding-top: 6px;
   /* a { display: block;}*/
+
 }
 #photo-caption {
   display: block;
@@ -2480,3 +2485,65 @@ footer {
   float: left;
   margin-left: 2px;
 }
+/* upload/select popup */
+.fbrowser {
+  overflow: auto;
+  position: absolute;
+  top: 0px;
+  width: 100%;
+  height: 100%;
+}
+.fbrowser .path {
+  background-color: #521f5c;
+}
+.fbrowser .path a {
+  padding: 5px;
+  margin: 0px 2px;
+  display: inline-block;
+}
+.fbrowser .path a,
+.fbrowser .path a:active,
+.fbrowser .path a:visited,
+.fbrowser .path a:link,
+.fbrowser .path a:hover {
+  color: #ffffff;
+  text-decoration: none;
+  outline: none;
+}
+.fbrowser .folders ul {
+  list-style: url("icons/folder.png");
+  padding-left: 22px;
+}
+.fbrowser .list {
+  padding: 10px;
+}
+.fbrowser.image .photo-album-image-wrapper {
+  width: 48px;
+  height: 48px;
+}
+.fbrowser.image a img {
+  width: auto;
+  height: 48px;
+}
+.fbrowser.image a p {
+  display: none;
+}
+.fbrowser.file .photo-album-image-wrapper {
+  float: none;
+  white-space: nowrap;
+  width: 100%;
+  height: auto;
+}
+.fbrowser.file img {
+  display: inline;
+  width: 16px;
+  height: 16px;
+}
+.fbrowser.file p {
+  display: inline;
+  white-space: nowrap;
+}
+.fbrowser .upload {
+  clear: both;
+  padding-top: 1em;
+}
diff --git a/view/theme/quattro/quattro.less b/view/theme/quattro/quattro.less
index f876ac1c6..368e26c3a 100644
--- a/view/theme/quattro/quattro.less
+++ b/view/theme/quattro/quattro.less
@@ -1705,3 +1705,28 @@ footer { height: 100px; display: table-row; }
 	float: left;
 	margin-left: 2px;
 }
+
+/* upload/select popup */
+.fbrowser {
+	overflow: auto;
+	position: absolute;
+	top: 0px;
+	width: 100%;
+	height: 100%;
+}
+.fbrowser .path {
+	background-color: @NavbarBackground;
+	a {	padding: 5px; margin: 0px 2px; display: inline-block; }
+	a, a:active, a:visited, a:link, a:hover { color: @Banner; text-decoration: none; outline: none;  }
+}
+.fbrowser .folders ul { list-style: url("icons/folder.png"); padding-left: 22px;}
+.fbrowser .list { padding: 10px; }
+.fbrowser.image .photo-album-image-wrapper { width: 48px; height: 48px; }
+.fbrowser.image a img { width: auto; height: 48px; }
+.fbrowser.image a p { display: none;}
+.fbrowser.file .photo-album-image-wrapper { float:none;  white-space: nowrap; width: 100%; height: auto; }
+.fbrowser.file img { display: inline; width: 16px; height: 16px}
+.fbrowser.file p  { display: inline; white-space: nowrap; }
+
+.fbrowser .upload { clear: both; padding-top: 1em;}
+
diff --git a/view/theme/vier/style.css b/view/theme/vier/style.css
index 79309e338..848a2a419 100644
--- a/view/theme/vier/style.css
+++ b/view/theme/vier/style.css
@@ -1109,6 +1109,9 @@ section {
 section.minimal {
   top: 0px;
   left: 0px;
+  position: absolute;
+  width: 100%;
+  height: 100%;
 }
 
 /* wall item */
@@ -2929,3 +2932,6 @@ a.mail-list-link {
 .videos .video-top-wrapper:hover .video-delete {
   opacity: 1;
 }
+
+/* upload/select popup */
+.fbrowser.image .photo-album-image-wrapper { margin-left: 10px; }