collapse jot tools to submenu on small and extra small screens

2 files changed, 65 insertions, 8 deletions

diff --git a/view/tpl/jot-header.tpl b/view/tpl/jot-header.tpl
index 8daf2ddb7..c7bb7506e 100755
--- a/view/tpl/jot-header.tpl
+++ b/view/tpl/jot-header.tpl
@@ -127,6 +127,20 @@ function enableOnUser(){
 				}				 
 			}
 		);
+		var uploader_sub = new window.AjaxUpload(
+			'wall-image-upload-sub',
+			{ action: '{{$baseurl}}/wall_upload/{{$nickname}}',
+				name: 'userfile',
+				title: upload_title,
+				onSubmit: function(file,ext) { $('#profile-rotator').spin('tiny'); },
+				onComplete: function(file,response) {
+					addeditortext(response);
+					$('#jot-media').val($('#jot-media').val() + response);
+					$('#profile-rotator').spin(false);
+				}				 
+			}
+		);
+
 		var file_uploader = new window.AjaxUpload(
 			'wall-file-upload',
 			{ action: '{{$baseurl}}/wall_attach/{{$nickname}}',
@@ -137,7 +151,20 @@ function enableOnUser(){
 					addeditortext(response);
 					$('#jot-media').val($('#jot-media').val() + response);
 					$('#profile-rotator').spin(false);
-				}				 
+				}
+			}
+		);
+		var file_uploader_sub = new window.AjaxUpload(
+			'wall-file-upload-sub',
+			{ action: '{{$baseurl}}/wall_attach/{{$nickname}}',
+				name: 'userfile',
+				title: attach_title,
+				onSubmit: function(file,ext) { $('#profile-rotator').spin('tiny'); },
+				onComplete: function(file,response) {
+					addeditortext(response);
+					$('#jot-media').val($('#jot-media').val() + response);
+					$('#profile-rotator').spin(false);
+				}
 			}
 		);
 
@@ -312,11 +339,11 @@ function enableOnUser(){
 	function toggleVoting() {
 		if($('#jot-consensus').val() > 0) {
 			$('#jot-consensus').val(0);
-			$('#profile-voting').removeClass('icon-check').addClass('icon-check-empty');
+			$('#profile-voting, #profile-voting-sub').removeClass('icon-check').addClass('icon-check-empty');
 		}
 		else {
 			$('#jot-consensus').val(1);
-			$('#profile-voting').removeClass('icon-check-empty').addClass('icon-check');
+			$('#profile-voting, #profile-voting-sub').removeClass('icon-check-empty').addClass('icon-check');
 		}
 	}
 
diff --git a/view/tpl/jot.tpl b/view/tpl/jot.tpl
index 4d9207c3b..229ef0277 100755
--- a/view/tpl/jot.tpl
+++ b/view/tpl/jot.tpl
@@ -38,7 +38,7 @@
 		</div>
 		<div id="profile-jot-submit-wrapper" class="jothidden">
 			<div id="profile-jot-submit-left" class="btn-toolbar pull-left">
-				<div class='btn-group'>
+				<div class="btn-group">
 					<button id="main-editor-bold" class="btn btn-default btn-sm" title="{{$bold}}" onclick="inserteditortag('b'); return false;">
 						<i class="icon-bold jot-icons"></i>
 					</button>
@@ -56,7 +56,7 @@
 					</button>
 				</div>
 				{{if $visitor}}
-				<div class='btn-group'>
+				<div class="btn-group hidden-xs">
 					<button id="wall-image-upload" class="btn btn-default btn-sm" title="{{$upload}}" >
 						<i class="icon-camera jot-icons"></i>
 					</button>
@@ -73,7 +73,7 @@
 						<i id="profile-audio" class="icon-volume-up jot-icons"></i>
 					</button>
 				</div>
-				<div class='btn-group'>
+				<div class="btn-group hidden-xs hidden-sm">
 					<button id="profile-location-wrapper" class="btn btn-default btn-sm" title="{{$setloc}}" onclick="jotGetLocation();return false;">
 						<i id="profile-location" class="icon-globe jot-icons"></i>
 					</button>
@@ -83,7 +83,7 @@
 					</button>
 					{{/if}}
 				{{else}}
-				<div class='btn-group'>
+				<div class="btn-group hidden-xs">
 				{{/if}}
 				{{if $feature_expire}}
 					<button id="profile-expire-wrapper" class="btn btn-default btn-sm" title="{{$expires}}" onclick="jotGetExpiry();return false;">
@@ -101,6 +101,36 @@
 					</button>
 				{{/if}}
 				</div>
+				<div class="btn-group visible-xs visible-sm">
+					<button type="button" id="more-tools" class="btn btn-default btn-sm dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
+						<i id="more-tools-icon" class="icon-caret-down jot-icons"></i>
+					</button>
+					<ul class="dropdown-menu dropdown-menu-right" role="menu">
+						<li class="visible-xs"><a href="#" onclick="preview_post();return false;"><i class="icon-eye-open"></i>&nbsp;{{$preview}}</a></li>
+						{{if $visitor}}
+						<li class="divider visible-xs"></li>
+						<li class="visible-xs"><a id="wall-image-upload-sub" href="#" ><i class="icon-camera"></i>&nbsp;{{$upload}}</a></li>
+						<li class="visible-xs"><a id="wall-file-upload-sub" href="#" ><i class="icon-paper-clip"></i>&nbsp;{{$attach}}</a></li>
+						<li class="visible-xs"><a href="#" onclick="jotGetLink(); return false;"><i class="icon-link"></i>&nbsp;{{$weblink}}</a></li>
+						<li class="visible-xs"><a href="#" onclick="jotVideoURL(); return false;"><i class="icon-facetime-video"></i>&nbsp;{{$video}}</a></li>
+						<li class="visible-xs"><a href="#" onclick="jotAudioURL(); return false;"><i class="icon-volume-up"></i>&nbsp;{{$audio}}</a></li>
+						{{/if}}
+						<li class="divider visible-xs"></li>
+						<li class="visible-xs visible-sm"><a href="#" onclick="jotGetLocation(); return false;"><i class="icon-globe"></i>&nbsp;{{$setloc}}</a></li>
+						{{if $noloc}}
+						<li class="visible-xs visible-sm"><a href="#" onclick="jotClearLocation(); return false;"><i class="icon-circle-blank"></i>&nbsp;{{$noloc}}</a></li>
+						{{/if}}
+						{{if $feature_expire}}
+						<li class="visible-xs visible-sm"><a href="#" onclick="jotGetExpiry(); return false;"><i class="icon-eraser"></i>&nbsp;{{$expires}}</a></li>
+						{{/if}}
+						{{if $feature_encrypt}}
+						<li class="visible-xs visible-sm"><a href="#" onclick="red_encrypt('{{$cipher}}','#profile-jot-text',$('#profile-jot-text').val());return false;"><i class="icon-key"></i>&nbsp;{{$encrypt}}</a></li>
+						{{/if}}
+						{{if $feature_voting}}
+						<li class="visible-xs visible-sm"><a href="#" onclick="toggleVoting(); return false;"><i id="profile-voting-sub" class="icon-check-empty"></i>&nbsp;{{$voting}}</a></li>
+						{{/if}}
+					</ul>
+				</div>
 			</div>
 			<div id="profile-rotator-wrapper">
 				<div id="profile-rotator"></div>
@@ -112,7 +142,7 @@
 				</button>
 				{{/if}}
 				{{if $preview}}
-				<button class="btn btn-default btn-sm" onclick="preview_post();return false;" title="{{$preview}}">
+				<button class="btn btn-default btn-sm hidden-xs" onclick="preview_post();return false;" title="{{$preview}}">
 					<i class="icon-eye-open jot-icons" ></i>
 				</button>
 				{{/if}}