Bookmarks 2.8

- vertical scrollbar;
- button to hide/show "x" buttons;
- bookmarks full-width in mobile (no margin-right);
- minor UI and UX fix;

plugins/bookmarks-by-zaso.user.js

@@ -2,7 +2,7 @@
 // @id             iitc-plugin-bookmarks@ZasoGD
 // @name           IITC plugin: Bookmarks for maps and portals
 // @category       Controls
-// @version        0.2.7.@@DATETIMEVERSION@@
+// @version        0.2.8.@@DATETIMEVERSION@@
 // @namespace      https://github.com/jonatkins/ingress-intel-total-conversion
 // @updateURL      @@UPDATEURL@@
 // @downloadURL    @@DOWNLOADURL@@
@@ -433,6 +433,11 @@
     }
   }
 
+  window.plugin.bookmarks.deleteMode = function() {
+    $('#bookmarksBox').toggleClass('deleteMode');
+  }
+
+
 /***************************************************************************************************************************************************************/
 
   // Saved the new sort of the folders (in the localStorage)
@@ -489,6 +494,7 @@
       items:"li.bookmarkFolder:not(.othersBookmarks)",
       handle:".bookmarksAnchor",
       placeholder:"sortable-placeholder",
+      helper:'clone', // fix accidental click in firefox
       forcePlaceholderSize:true,
       update:function(event, ui) {
         var typeList = $('#'+ui.item.context.id).parent().parent('.bookmarkList').attr('id');
@@ -501,6 +507,7 @@
       connectWith:".bookmarkList ul ul",
       handle:".bookmarksLink",
       placeholder:"sortable-placeholder",
+      helper:'clone', // fix accidental click in firefox
       forcePlaceholderSize:true,
       update:function(event, ui) {
         var typeList = $('#'+ui.item.context.id).parent().parent().parent().parent('.bookmarkList').attr('id');
@@ -885,6 +892,7 @@
                           +'<div id="topBar">'
                             +'<a id="bookmarksMin" class="btn" onclick="window.plugin.bookmarks.switchStatusBkmrksBox(0);return false;" title="Minimize">-</a>'
                             +'<div class="handle">...</div>'
+                            +'<a id="bookmarksDel" class="btn" onclick="window.plugin.bookmarks.deleteMode();return false;" title="Show/Hide \'X\' button">Show/Hide "X" button</a>'
                           +'</div>'
                           +'<div id="bookmarksTypeBar">'
                             +'<h5 class="bkmrk_maps current" onclick="window.plugin.bookmarks.switchPageBkmrksBox(this, 0);return false">Maps</h5>'

plugins/bookmarks-css.css

@@ -9,13 +9,18 @@
 	line-height:22px;
 	text-indent:0;
 	text-decoration:none;
+	-webkit-box-sizing:border-box;
+	-moz-box-sizing:border-box;
+	box-sizing:border-box;
 }
+
 #bookmarksBox{
 	display:block;
 	position:absolute !important;
 	z-index:4001;
 	top:100px;
 	left:100px;
+	width:231px;
 }
 #bookmarksBox .addForm,
 #bookmarksBox #bookmarksTypeBar,
@@ -25,33 +30,41 @@
 	color:#fff;
 	font-size:14px;
 }
-#bookmarksBox #topBar,
+#bookmarksBox #topBar{
-#bookmarksBox #topBar *{
 	height:15px !important;
 }
+#bookmarksBox #topBar *{
+	height: 14px !important;
+}
 #bookmarksBox #topBar *{
 	float:left !important;
 }
 #bookmarksBox .handle{
-	text-indent:-20px;
+/*	text-indent:-20px;*/
-	width:209px;
+	width:80%;
 	text-align:center;
 	color:#fff;
-	line-height:8px;
+	line-height:6px;
 	cursor:move;
 }
 #bookmarksBox #topBar .btn{
 	display:block;
-	width:19px;
+	width:10%;
 	cursor:pointer;
 	color:#20a8b1;
-}
+
-#bookmarksBox #topBar #bookmarksMin{
 	font-weight:bold;
 	text-align:center;
-	line-height:14px;
+	line-height:13px;
 	font-size:18px;
 }
+
+#bookmarksBox #topBar #bookmarksDel{
+	overflow:hidden;
+	text-indent:-999px;
+	background:#B42E2E;
+}
+
 #bookmarksBox #topBar #bookmarksMin:hover{
 	color:#ffce00;
 }
@@ -59,8 +72,9 @@
 	clear:both;
 }
 #bookmarksBox h5{
-	padding:4px 0;
+	padding:4px 0 23px;
-	width:114px;
+	width:50%;
+	height:93px !important;
 	text-align:center;
 	color:#788;
 }
@@ -73,9 +87,8 @@
 	color:#ffce00;
 	background:rgba(0,0,0,0);
 }
-#bookmarksBox #topBar .btn,
+#bookmarksBox #topBar,
 #bookmarksBox .addForm,
-#bookmarksBox .handle,
 #bookmarksBox #bookmarksTypeBar,
 #bookmarksBox .bookmarkList li.bookmarksEmpty,
 #bookmarksBox .bookmarkList li.bkmrk a,
@@ -90,16 +103,16 @@
 #bookmarksBox .addForm *{
 	display:block;
 	float:left;
-	padding:4px 8px 3px;
+	height:28px !important;
 }
 #bookmarksBox .addForm a{
 	cursor:pointer;
 	color:#20a8b1;
 	font-size:12px;
-	width:65px;
+	width:35%;
 	text-align:center;
 	line-height:20px;
-	padding:4px 0 3px;
+	padding:4px 0 23px;
 }
 #bookmarksBox .addForm a:hover{
 	background:#ffce00;
@@ -109,15 +122,19 @@
 #bookmarksBox .addForm input{
 	font-size:11px !important;
 	color:#ffce00;
-	width:81px;
+	height:28px;
-	line-height:11px;
+	padding:4px 8px 1px;
+	line-height:12px;
 	font-size:12px;
-	-webkit-box-sizing:content-box;
-	-moz-box-sizing:content-box;
-	box-sizing:content-box;
 }
 #bookmarksBox #bkmrk_portals .addForm input{
-	width:147px;
+	width:65%;
+}
+#bookmarksBox #bkmrk_maps .addForm input{
+	width:42%;
+}
+#bookmarksBox #bkmrk_maps .addForm a{
+	width:29%;
 }
 #bookmarksBox .addForm input:hover,
 #bookmarksBox .addForm input:focus{
@@ -125,11 +142,12 @@
 	background:rgba(0,0,0,.6);
 }
 #bookmarksBox .bookmarkList > ul{
-	width:231px;
 	clear:both;
 	list-style-type:none;
 	color:#fff;
 	overflow:hidden;
+	overflow-y:auto;
+	max-height:580px;
 }
 #bookmarksBox .sortable-placeholder{
 	background:rgba(8,48,78,.55);
@@ -161,12 +179,12 @@
 	color:#eee;
 }
 #bookmarksBox ul .bookmarksRemoveFrom{
-	width:19px;
+	width:10%;
 	text-align:center;
 	color:#fff;
 }
 #bookmarksBox ul .bookmarksLink{
-	width:171px;
+	width:90%;
 	padding:0 10px 0 8px;
 	color:#ffce00;
 }
@@ -174,7 +192,7 @@
 	color:#03fe03;
 }
 #bookmarksBox ul .othersBookmarks .bookmarksLink{
-	width:190px;
+	width:90%;
 }
 #bookmarksBox ul .bookmarksLink:hover{
 	color:#03fe03;
@@ -183,6 +201,8 @@
 	color:#fff;
 	background:#e22 !important;
 }
+
+/*---- UI border -----*/
 #bookmarksBox,
 #bookmarksBox *{
 	border-color:#20a8b1;
@@ -193,29 +213,31 @@
 #bookmarksBox ul .bookmarkFolder{
 	border-top-width:1px;
 }
+#bookmarksBox,
 #bookmarksBox #topBar,
 #bookmarksBox #bookmarksTypeBar,
 #bookmarksBox .addForm,
 #bookmarksBox ul .bookmarkFolder .folderLabel,
-#bookmarksBox ul li.bkmrk{
+#bookmarksBox ul li.bkmrk a {
 	border-bottom-width:1px;
 }
-#bookmarksBox ul .bookmarkFolder,
+#bookmarksBox ul .bookmarkFolder{
-#bookmarksBox ul .bookmarksRemoveFrom{
 	border-right-width:1px;
 	border-left-width:1px;
 }
 #bookmarksBox #topBar *,
 #bookmarksBox #bookmarksTypeBar *,
-#bookmarksBox .addForm *{
+#bookmarksBox .addForm *,
+#bookmarksBox ul li.bkmrk{
 	border-left-width:1px;
 }
 #bookmarksBox #topBar,
 #bookmarksBox #bookmarksTypeBar,
-#bookmarksBox .addForm{
+#bookmarksBox .addForm,
+#bookmarksBox ul .bookmarksRemoveFrom{
 	border-right-width:1px;
 }
-#bookmarksBox ul .othersBookmarks .bookmarksRemoveFrom,
+#bookmarksBox ul .bookmarkFolder.othersBookmarks li.bkmrk,
 #bookmarksBox ul .bookmarkFolder .folderLabel .bookmarksRemoveFrom{
 	border-left-width:0;
 }
@@ -272,17 +294,25 @@
 }
 #bookmarksBox .bookmarkList .bkmrk.ui-sortable-helper{
 	border-right-width:1px;
-	border-left-width:1px;
+	border-left-width:1px !important;
 }
 #bookmarksBox .bookmarkList ul li ul li.sortable-placeholder{
 	height:23px;
 	box-shadow:inset 0 -1px 0 #20a8b1,inset 1px 0 0 #20a8b1;
 }
+
 #bookmarksBox .bookmarkList ul li.bookmarkFolder.ui-sortable-helper,
-#bookmarksBox .bookmarkList ul li.othersBookmarks ul,
 #bookmarksBox .bookmarkList ul li.othersBookmarks ul li.sortable-placeholder{
 	box-shadow:inset 0 -1px 0 #20a8b1;
 }
+
+#bookmarksBox #topBar #bookmarksDel,
+#bookmarksBox .bookmarkList .bookmarkFolder .folderLabel:hover .bookmarksRemoveFrom,
+#bookmarksBox .bookmarkList .bookmarkFolder .folderLabel:hover .bookmarksAnchor{
+	border-bottom-width:1px;
+}
+
+/*---------*/
 #bookmarksBox .bookmarkList .bookmarkFolder .folderLabel .bookmarksAnchor span,
 #bookmarksBox .bookmarkList .bookmarkFolder .folderLabel > span,
 #bookmarksBox .bookmarkList .bookmarkFolder .folderLabel > span > span,
@@ -304,7 +334,7 @@
 #bookmarksBox .bookmarkList .bookmarkFolder .folderLabel .bookmarksAnchor{
 	line-height:25px;
 	color:#fff;
-	width:209px;
+	width:90%;
 }
 #bookmarksBox .bookmarkList .bookmarkFolder .folderLabel .bookmarksAnchor span{
 	float:left;
@@ -336,6 +366,7 @@
 #bookmarksBox .bookmarkList .bookmarkFolder.open .folderLabel > span,
 #bookmarksBox .bookmarkList .bookmarkFolder.open .folderLabel > span > span{
 	display:block;
+	display:none;
 }
 #bookmarksBox .bookmarkList .bookmarkFolder.open .folderLabel:hover > span > span{
 	border-color:transparent #036 transparent transparent;
@@ -345,7 +376,7 @@
 }
 #bookmarksBox .bookmarkList .bookmarkFolder ul{
 	display:none;
-	margin-left:19px;
+	margin-left:10%;
 }
 #bookmarksBox .bookmarkList .bookmarkFolder.open ul{
 	display:block;
@@ -355,6 +386,26 @@
 	margin-left:0;
 }
 
+/*---- Width for deleteMode -----*/
+#bookmarksBox .bookmarksRemoveFrom{
+	display:none !important;
+}
+#bookmarksBox.deleteMode .bookmarksRemoveFrom{
+	display:block !important;
+}
+
+#bookmarksBox .bookmarkList .bookmarkFolder .folderLabel .bookmarksAnchor,
+#bookmarksBox ul .bookmarksLink,
+#bookmarksBox ul .othersBookmarks .bookmarksLink{
+	width:100% !important;
+}
+
+#bookmarksBox.deleteMode .bookmarkList .bookmarkFolder .folderLabel .bookmarksAnchor,
+#bookmarksBox.deleteMode ul .bookmarksLink,
+#bookmarksBox.deleteMode ul .othersBookmarks .bookmarksLink{
+	width:90% !important;
+}
+
 /**********************************************
 	MOBILE
 **********************************************/
@@ -380,14 +431,27 @@
 	box-shadow:none !important;
 	border-width:0 !important;
 }
-#bookmarksBox.mobile #topBar{
+#bookmarksBox.mobile #topBar #bookmarksMin,
+#bookmarksBox.mobile #topBar .handle{
 	display:none !important;
 }
+
+#bookmarksBox.mobile #topBar #bookmarksDel{
+	width:100%;
+	height:34px !important;
+	font-size:13px;
+	color:#fff;
+	font-weight:normal;
+	padding-top:11px;
+	text-indent:0;
+}
+
 #bookmarksBox.mobile #bookmarksTypeBar h5{
 	cursor:pointer;
 	text-align:center;
 	float:left;
 	width:50%;
+	height:auto !important;
 	padding:7px 0;
 }
 #bookmarksBox.mobile #bookmarksTypeBar h5.current{
@@ -413,14 +477,15 @@
 #bookmarksBox.mobile .bookmarkList li.bookmarkFolder a.bookmarksRemoveFrom,
 #bookmarksBox.mobile .bookmarkList li.bkmrk a.bookmarksRemoveFrom{
 	box-shadow:inset 0 1px 0 #20a8b1,inset -1px 0 0 #20a8b1 !important;
-	width:15%;
+	width:10%;
 	background:none !important;
 }
 #bookmarksBox.mobile .bookmarkList li.bookmarkFolder a.bookmarksAnchor,
 #bookmarksBox.mobile .bookmarkList li.bkmrk a.bookmarksLink{
 	text-indent:10px;
-	width:85%;
+/*	width:85%;*/
-	height:21px;
+	height:36px;
+	line-height:24px;
 	overflow:hidden;
 }
 #bookmarksBox.mobile .bookmarkList ul li.bookmarkFolder ul{
@@ -428,7 +493,7 @@
 }
 #bookmarksBox.mobile .bookmarkList > ul{
 	border-bottom:1px solid #20a8b1 !important;
-	border-right:1px solid #20a8b1 !important;
+/*	border-right:1px solid #20a8b1 !important;*/
 }
 
 #bookmarksBox.mobile .bookmarkList .bookmarkFolder.othersBookmarks  ul{
@@ -440,14 +505,14 @@
 }
 #bookmarksBox.mobile .bookmarkList > ul{
 	max-height:none;
-	width:85% !important;
+/*	width:85% !important;*/
 }
 #bookmarksBox.mobile .bookmarkList li.bookmarkFolder .folderLabel{
 	box-shadow:0 1px 0 #20a8b1 !important;
 }
 #bookmarksBox.mobile .bookmarkList ul li.bookmarkFolder ul{
-	width:85% !important;
+	width:90% !important;
-	margin-left:15% !important;
+	margin-left:10% !important;
 }
 #bookmarksBox.mobile .bookmarkList ul li.bookmarkFolder.othersBookmarks ul{
 	width:100% !important;
@@ -461,7 +526,7 @@
 }
 #bookmarksBox.mobile .addForm,
 #bookmarksBox.mobile .addForm *{
-	height:35px;
+	height:35px !important;
 	padding:0;
 }
 #bookmarksBox.mobile .addForm a{
@@ -469,14 +534,14 @@
 }
 
 #bookmarksBox.mobile .addForm a{
-	width:25% !important;
+/*	width:25% !important;*/
 }
 #bookmarksBox.mobile .addForm input{
-	width:50% !important;
+/*	width:50% !important;*/
 	text-indent:10px;
 }
 #bookmarksBox.mobile #bkmrk_portals .addForm input{
-	width:75% !important;
+/*	width:75% !important;*/
 }
 #bookmarksBox.mobile #bookmarksTypeBar h5,
 #bookmarksBox.mobile .bookmarkList .addForm a{
@@ -530,10 +595,10 @@
 #bookmarksBox.mobile .bookmarkList .bookmarkFolder.open .folderLabel > span > span{
 	display:block !important;
 }
+
 /**********************************************
 	DIALOG BOX
 **********************************************/
-
 /*---- Auto Drawer -----*/
 #bkmrksAutoDrawer,
 #bkmrksAutoDrawer p,