UI layout adjustments

diff --git a/admin.js b/admin.js
index 67118908659e9e3cd28b5c58bf8f3fc3a85e05dd..0c9e0d44660a6ecc8191f41aadf1e1182b52a13b 100644 (file)
--- a/admin.js
+++ b/admin.js
@@ -71,7 +71,7 @@ var userListsCallback = function(lists) {
                        li.insertAdjacentHTML("beforeend", "<a href="+siteurl+"> <img src="+img.src+" alt="+extractDomain(siteurl,1)+"/> "+name+"</a>");
                        // ronmurphy end
                        //li.insertAdjacentHTML("beforeend", "<a href="+siteurl+">"+name+"</a>");
                        li.insertAdjacentHTML("beforeend", "<a href="+siteurl+"> <img src="+img.src+" alt="+extractDomain(siteurl,1)+"/> "+name+"</a>");
                        // ronmurphy end
                        //li.insertAdjacentHTML("beforeend", "<a href="+siteurl+">"+name+"</a>");

-                       li.insertAdjacentHTML("beforeend", "<span id='delete-"+j+"-"+mainlist[i]+"'>-</span>");
+                       li.insertAdjacentHTML("beforeend", "<span id='delete-"+j+"-"+mainlist[i]+"'>&#10799;</span>");

                        ul.appendChild(li);
                }
 
                        ul.appendChild(li);
                }
 


@@ -97,7 +97,7 @@ function listen(li) {
                        save();
                } else {
                        var ul = document.getElementById(r[1]);
                        save();
                } else {
                        var ul = document.getElementById(r[1]);

-                       ul.insertAdjacentHTML("beforeend", "<div class='inp' id='div-"+listToArray(ul).length.toString()+"'><input style='width:35%' type='text' class='name' value='' placeholder='name'><input style='width:47%' type='text' class='url' value='' placeholder='url' id='form-"+listToArray(ul).length.toString()+"'><span id='input-"+listToArray(ul).length.toString()+"'>s</span></div>");
+                       ul.insertAdjacentHTML("beforeend", "<div class='inp' id='div-"+listToArray(ul).length.toString()+"'><input style='width:35%' type='text' class='name' value='' placeholder='name'><input style='width:47%' type='text' class='url' value='' placeholder='url' id='form-"+listToArray(ul).length.toString()+"'><a id='input-"+listToArray(ul).length.toString()+"'>&#x2714;</a></div>");

                        var inp = document.getElementById("div-"+listToArray(ul).length.toString());
                        var span = document.getElementById("input-"+listToArray(ul).length.toString());
                        var form = document.getElementById("form-"+listToArray(ul).length.toString());
                        var inp = document.getElementById("div-"+listToArray(ul).length.toString());
                        var span = document.getElementById("input-"+listToArray(ul).length.toString());
                        var form = document.getElementById("form-"+listToArray(ul).length.toString());

diff --git a/bg.js b/bg.js
deleted file mode 100644 (file)
index 73ee509..0000000
--- a/bg.js
+++ /dev/null
@@ -1,8 +0,0 @@
-document.addEventListener("DOMContentLoaded", function() {
-       chrome.storage.sync.get({"bgvalue": "#2E3440"}, bgCallback);
-});
-var bgCallback = function(list) {
-var color = list["bgvalue"];
-console.log(color);
-document.body.style.background = color;
-};

diff --git a/colours.js b/colours.js
new file mode 100644 (file)
index 0000000..714faa0
--- /dev/null
+++ b/colours.js
@@ -0,0 +1,16 @@
+document.addEventListener("DOMContentLoaded", function() {
+       chrome.storage.sync.get({"bgvalue": "#2E3440"}, bgCallback);
+});
+var bgCallback = function(list) {
+var color = list["bgvalue"];
+console.log(color);
+document.body.style.background = color;
+};
+document.addEventListener("DOMContentLoaded", function() {
+       chrome.storage.sync.get({"fgvalue": "#ECEFF4"}, fgCallback);
+});
+var fgCallback = function(list) {
+var color = list["fgvalue"];
+console.log(color);
+document.body.style.color = color;
+};

diff --git a/fg.js b/fg.js
deleted file mode 100644 (file)
index 2d2cd06..0000000
--- a/fg.js
+++ /dev/null
@@ -1,8 +0,0 @@
-document.addEventListener("DOMContentLoaded", function() {
-       chrome.storage.sync.get({"fgvalue": "#ECEFF4"}, fgCallback);
-});
-var fgCallback = function(list) {
-var color = list["fgvalue"];
-console.log(color);
-document.body.style.color = color;
-};

diff --git a/newtab.html b/newtab.html
index f7268cb77cc33a9b82a751dd269574603bf2c901..743ce02650f58a62884cc53824606c5705a670ba 100644 (file)
--- a/newtab.html
+++ b/newtab.html
@@ -7,8 +7,7 @@
 
     <script type="text/javascript" src="sites.js" ></script>
     <script type="text/javascript" src="admin.js" ></script>
 
     <script type="text/javascript" src="sites.js" ></script>
     <script type="text/javascript" src="admin.js" ></script>

-    <script type="text/javascript" src="bg.js" ></script>
-    <script type="text/javascript" src="fg.js" ></script>
+    <script type="text/javascript" src="colours.js" ></script>

     <script src="Sortable.min.js"></script>
 
   <link rel="stylesheet" href="style.css">
     <script src="Sortable.min.js"></script>
 
   <link rel="stylesheet" href="style.css">

diff --git a/options.html b/options.html
index 958c951356f4253d897a646af69bc2dd876c7ce3..42f1117b06516d07884130896ded1d21fae64294 100644 (file)
--- a/options.html
+++ b/options.html
@@ -9,15 +9,16 @@
     <body style="padding: 10px; padding-left: 65px; padding-right: 65px;">
         <table>
             <tr>
     <body style="padding: 10px; padding-left: 65px; padding-right: 65px;">
         <table>
             <tr>

-                <td>1</td>
+                <td>Column 1</td>

                 <td><input type="text" id="l1"></td>
                 <td><input type="text" id="l1"></td>

+                <input type="checkbox" id="l1show" value="Bike"> I have a bike<br>

             </tr>
             <tr>
             </tr>
             <tr>

-                <td>2</td>
-                <td><input type="text" id="l2"></td>
+                <td>Column 2</td>
+                <td><input type="text" id="l2show"></td>

             </tr>
             <tr>
             </tr>
             <tr>

-                <td>3</td>
+                <td>Column 3</td>

                 <td><input type="text" id="l3"></td>
             </tr>
             <tr>
                 <td><input type="text" id="l3"></td>
             </tr>
             <tr>


@@ -31,12 +32,10 @@
         <table>
             <tr>
                 <td style="width: 135px;"><button id="save" style="width: 65px;">Save</button><div id="status"></div></td>
         <table>
             <tr>
                 <td style="width: 135px;"><button id="save" style="width: 65px;">Save</button><div id="status"></div></td>

-                <td style="width: 65px;"><div style="text-align: right;">alorimer<br /><a href="https://github.com/startclean/Chrome-Extension">original</a></div></td>
+                <td style="width: 65px;"><div style="text-align: right;">Made by <a href="https://git.lorimer.id.au/newtab.git">Andrew Lorimer</a></div></td>

             </td>
         </table>
         
             </td>
         </table>
         

-        
-        

         <script src="options.js"></script>
 </body>
 </html>
         <script src="options.js"></script>
 </body>
 </html>

diff --git a/style.css b/style.css
index 659b04a76b43fa6b95a7ef2a1ec474c52472b07d..2f484f1a797bac96fbfa1c099f514c14bf3c8fac 100644 (file)
--- a/style.css
+++ b/style.css
@@ -1,3 +1,9 @@
+img {
+  float: left;
+  margin-top: 1px;
+  padding-right: 3px;
+}
+

 #search-form > input#search-box:-webkit-autofill {
   -webkit-box-shadow: 0 0 0 1000px #222 inset !important;
   -webkit-text-fill-color: #b5b5a4 !important;
 #search-form > input#search-box:-webkit-autofill {
   -webkit-box-shadow: 0 0 0 1000px #222 inset !important;
   -webkit-text-fill-color: #b5b5a4 !important;


@@ -48,11 +54,16 @@
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;

-  max-width: 120px;
+  width: 63px;
+}
+
+.url {
+  width: 100px;

 }
 
 .inp {
   width: 200px;
 }
 
 .inp {
   width: 200px;

+  padding: 10px 0;

 }
 
 .inp > input {
 }
 
 .inp > input {


@@ -60,31 +71,33 @@
 }
 
 .users-list > ul > li > span {
 }
 
 .users-list > ul > li > span {

-  font-weight: normal;
-  color: black;

   width: 10px;
   width: 10px;

-  height: 32px;
+  height: 25px;

   padding: 4px 5px 0 10px;
   background: #434C5E;
   float: right;
   display: none;
   cursor: pointer;
   padding: 4px 5px 0 10px;
   background: #434C5E;
   float: right;
   display: none;
   cursor: pointer;

+  padding-top: 10px;

 }
 
 .users-list > ul > li > span:hover {
   background: #BF616A;
 }
 
 }
 
 .users-list > ul > li > span:hover {
   background: #BF616A;
 }
 

-.users-list > ul > .inp > span {
-  margin-top: 4px;
-  font-weight: normal;
-  color: black;
+.users-list > ul > .inp > a {

   width: 10px;
   width: 10px;

-  padding: 2px 5px 3px 6px;
-  background: white;
+  height: 18px;
+  display: inline-block;
+  background: #434C5E;
+  padding: 3px 6px 3px 3px;

   cursor: pointer;
 }
 
   cursor: pointer;
 }
 

+.users-list > ul > .inp > a:hover, .users-list > ul > .inp > a:focus {
+  background: #A3BE8C;
+}
+

 .users-list > ul > li:hover > span {
   display: inline-block;
 }
 .users-list > ul > li:hover > span {
   display: inline-block;
 }


@@ -112,7 +125,11 @@
 }
 
 .users-list > ul > .title > span {
 }
 
 .users-list > ul > .title > span {

-  background: #A3BE8C;
+  background-color: #434C5E;
+}
+
+.users-list > ul > .title > span:hover {
+  background-color: #A3BE8C !important;

 }
 
 .users-list > ul > li > a, .users-list > ul > .title > p {
 }
 
 .users-list > ul > li > a, .users-list > ul > .title > p {