Merge pull request #2 from btzr-io/master

Get theme color palette
butterthemes · Apr 7, 2017 · d947ad8 · d947ad8
2 parents 33f4fdf + 764de9d
commit d947ad8
Show file tree

Hide file tree

Showing 2 changed files with 111 additions and 25 deletions.
diff --git a/static/css/main.css b/static/css/main.css
@@ -2,7 +2,7 @@
 
 body {
     font-family: 'Arial', 'Helvetica', sans-serif;
-    background: #EFEFEF;
+    background: #EEE;
     text-align: center;
     color: #555;
 }
@@ -14,22 +14,25 @@ body {
 .item {
     display: block;
     padding: 25px;
-    border: 1px solid #DDD;
-    border-radius: 5px;
-    max-width: 420px;
+    max-width: 500px;
+    min-width: 380px;
     margin: 25px auto;
-    box-shadow: 0px 3px 10px rgba(0, 0, 0, 0.15);
+    box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.15);
     text-align: left;
     line-height: 1em;
     background: #FFF;
-
 }
 
 .item .header {
     display: block;
     padding:20px 0;
 }
 
+.item .description {
+    font-size: 1em;
+    margin-top:25px 0;
+}
+
 .item .footer {
     text-align: right;
     display: block;
@@ -50,9 +53,37 @@ body {
 .button {
     background: #DDD;
     border-radius: 5px;
-    padding: 10px;
+    padding: 10px 25px;
     display: inline-block;
     text-decoration: none;
     color: #252525;
     text-align:  right;
 }
+
+.palette {
+    list-style: none;
+    display: inline-block;
+    padding: 0;
+    margin-top: 25px;
+}
+
+.palette .color{
+    display: inline-block;
+    width: 75px;
+    height: 15px;
+    margin: 0;
+    background: #EEE;
+    border-bottom: 3px solid rgba(0, 0, 0, 0.25);
+}
+
+.palette .color:nth-child(1){
+    background: var(--Main-color);
+}
+
+.palette .color:nth-child(2){
+    background: var(--Button-active);
+}
+
+.palette .color:nth-child(3){
+    background: var(--Bg-color);
+}
diff --git a/static/js/main.js b/static/js/main.js
@@ -3,31 +3,88 @@
 $(function(){
 
     var items = [],
-        username = "butterthemes",
+        username = "butterthemes/",
         api = "https://api.github.com/",
-        raw = "https://raw.githubusercontent.com/";
+        raw = "https://rawgit.com/"
+        raw2 = "https://raw.githack.com/";
 
-    function getPackageJson(user, repo, url, fn){
-        $.getJSON(raw + user + "/" + repo + "/master/package.json", function(json, status) {
-            if(status==="success"){
-                fn(json, url)
-            }
+        //Load css file....
+        function LoadCss(url){
+            var link = document.createElement("link");
+            link.rel = "stylesheet";
+            link.type = "text/css";
+            link.href = url;
+            document.getElementsByTagName("head")[0].appendChild(link);
+        }
+
+        function getColors(theme, element){
+            element.classList.add(theme);
+            LoadCss(raw + username + theme + "/master/index.css");
+        }
+
+        function getPackageJson(user, repo, url, fn){
+            $.getJSON(raw + username + repo + "/master/package.json", function(json, status) {
+                if(status==="success") fn(json, url)
+            });
+        }
+
+        function CreateElement(opts){
+            var element = document.createElement(opts.type || 'div');
+                element.className = opts.class || '';
+                element.innerHTML = opts.content || '';
+                if(element.href) element.href = opts.href || '';
+                return element;
+        }
+
+        function Item(i, url) {
+
+        var element = CreateElement({
+            type: 'li',
+            class: 'item'
         });
-    }
 
-    function Item(i, url){
+        var header = CreateElement({
+            type: 'div',
+            class: 'header',
+            content: '<h3 class="title">'+ i.name +'</h3> <span class="version">'+i.version+'</span>',
+        });
 
-            var element = '<li class="item">' +
-                '<div class="header"><h3 class="title">'+ i.name +'</h3> <span class="version">'+i.version+'</span></div>' +
-                '<div class="description">'+i.description+ '</div>'+
-                '<div class="footer"><a class="button" href="'+url+'">Install</a></div>' +
-                '</li>';
+        element.appendChild(header);
 
-            $("#root .items").append(element);
+        var description = CreateElement({
+            type: 'div',
+            class: 'description',
+            content:  i.description
+        });
+
+        element.appendChild(description);
+
+        var color = '<li class="color"></li>';
+
+        var palette = CreateElement({
+            type: 'ul',
+            class: 'palette',
+            content: color + color + color
+        });
+
+        element.appendChild(palette);
+
+        var footer = CreateElement({
+            type: 'div',
+            class: 'footer',
+            content: '<a class="button" href="'+ url +'">Install</a>',
+            href: url
+        });
+
+        element.appendChild(footer);
+
+        getColors(i.name, palette);
+
+        $("#root .items").append(element);
     }
 
     //Load data
-    $.get(api + "orgs/" + username + "/repos", function(data, status){
+    $.get(api + "orgs/" + username + "repos", function(data, status){
         if(status==="success"){
             data.forEach( function (item, index) {
                 //Check for themes...
@@ -36,8 +93,6 @@ $(function(){
                     getPackageJson(item.owner.login, item.name, item.html_url, Item);
                 }
             });
-
         }
     });
-
 });