diff --git a/.github/FUNDING.yml b/.github/FUNDING.yml new file mode 100644 index 0000000..f744573 --- /dev/null +++ b/.github/FUNDING.yml @@ -0,0 +1 @@ +custom: https://gumroad.com/l/hGYGh diff --git a/README.md b/README.md index 3b0e347..73dd9b8 100644 --- a/README.md +++ b/README.md @@ -1,56 +1,2 @@ -![](https://muut.com/riotjs/demo/img/riotjslogo@2x.png) - -## Riot.js demo application - -This is a demo single-page demo application made with Riot.js. It's a generic skeleton for an administration panel that shows the core concepts of modular client side development. - -### Features -- actually something useful, just fork it and extend it to your needs -- plain and minimal UI -- authentication and session management -- small: ~10kb minified, including Riot (4kb gzipped) -- optional caching of server side requests - - -### Modular architecture -- one global variable `admin` to build modules -- modules can be included in no specific order (*.js) -- modules can be renamed/removed/modified on without breaking the app -- backend agnostic -- easy to maintain and extend, good for multiple developers - - -### Extendable -- Real API: try for example `admin().load("customers")` on console -- Promise based server calls for more fluent error handling -- Use app name to extend instead of a framework name: `admin(callback)` - - -### Planned -- real backend (firebase, hosted server, to be decided...) -- realtime channel -- tests for both UI and API layer -- documented API, including events - - -## Installation - -Hit following commands to run the administration panel on the console - -``` sh -bower install -npm install -./make.js gen -open index.html -./make.js watch -``` - -You should be able to modify JS and Stylus files and the concatenation and pre-compilation is automatically taken care of. Check make.js for more other targets than `watch`. - - -[Live version](https://muut.com/riotjs/demo/) • -[Riot website](https://muut.com/riotjs/) • -[Building modular applications with Riot.js](https://muut.com/riotjs/docs/) • -[Original Riot blog post](https://muut.com/blog/technology/riotjs-the-1kb-mvp-framework.html) - +for a complete RIOT 2.0 admin go to [riot-admin](https://github.com/coderofsalvation/riot-admin) diff --git a/bower.json b/bower.json deleted file mode 100644 index a2a19bb..0000000 --- a/bower.json +++ /dev/null @@ -1,19 +0,0 @@ -{ - "name": "riotjs-admin", - "version": "0.0.2", - "homepage": "https://muut.com/riotjs/demo/", - "authors": [ "Tero Piirainen" ], - "description": "Administration panel – A Riot.js demo (The 1kb MVP library)", - "main": "index.html", - "keywords": [ "administration", "panel", "MVP", "MVC", "control panel"], - "license": "MIT", - "ignore": [ - "**/.*", - "node_modules", - "bower_components" - ], - "dependencies": { - "jquery": "~1.11.0", - "riotjs": "latest" - } -} diff --git a/img/by-moot.png b/img/by-moot.png deleted file mode 100644 index 50241dc..0000000 Binary files a/img/by-moot.png and /dev/null differ diff --git a/img/company.png b/img/company.png deleted file mode 100644 index c1f6689..0000000 Binary files a/img/company.png and /dev/null differ diff --git a/img/riotjslogo.png b/img/riotjslogo.png deleted file mode 100644 index 1681129..0000000 Binary files a/img/riotjslogo.png and /dev/null differ diff --git a/img/riotjslogo@2x.png b/img/riotjslogo@2x.png deleted file mode 100644 index 277ad1e..0000000 Binary files a/img/riotjslogo@2x.png and /dev/null differ diff --git a/img/tipiirai.jpg b/img/tipiirai.jpg deleted file mode 100644 index 5c3279a..0000000 Binary files a/img/tipiirai.jpg and /dev/null differ diff --git a/img/wallpaper.jpg b/img/wallpaper.jpg deleted file mode 100644 index e218d6b..0000000 Binary files a/img/wallpaper.jpg and /dev/null differ diff --git a/index.html b/index.html deleted file mode 100644 index 70c0fac..0000000 --- a/index.html +++ /dev/null @@ -1,172 +0,0 @@ - - - - - - - Admin Demo | Riot.js – The 1kb MVP library - - - - - - - - - -
-
- - - - - Logout - -
-
- -
- - -
-

Administration

- - -

-
- - -
-

Customers

- - -

Users

- - -

Posts

- -
- - -
-
-
- - -
- - -
- -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - diff --git a/make.js b/make.js deleted file mode 100755 index aba4a49..0000000 --- a/make.js +++ /dev/null @@ -1,98 +0,0 @@ -#!/usr/bin/env node - -// grunt is messy, shelljs is not (https://github.com/arturadib/shelljs) - -require('shelljs/make'); - -var gaze = require('gaze'), - stylus = require('stylus'), - header = ";(function(top) {", - footer = '})(typeof top == "object" ? window : exports);'; - - -// initialize repository -function init() { - mkdir("-p", "dist"); -} - -// Make a single file out of everything -function concat() { - - init(); - - // riot.js - // var js = cat("bower_components/riotjs/riot.js"); - var js = cat("../riotjs/riot.js"); - - // api - js += header + cat("src/api/*.js") + footer; - - // ui - js+= cat(["src/ext/*.js", "src/ui/*.js"]); - - // dist - js.to("dist/admin.js"); - -} - -// Test the API on server side (node.js) -target.test = function() { - - init(); - - // generate API files - (header + cat("src/api/*.js") + footer).to("dist/api.js"); - - // run tests - require("./test/index.js"); -} - - -target.lint = function() { - exec("jshint src"); -} - -// return target.test(); - -// Function to compile a single stylus file -function styl(source, target) { - var dir = source.split("/").slice(0, -1).join("/"); - - stylus(cat(source), { compress: true }).include(dir).render(function(err, css) { - if (err) throw err; - css.to(target); - }); - -} - -// concat target -target.concat = concat; - - -// generate application -target.gen = function() { - concat(); - styl("style/index.styl", "dist/style.css"); - cp("-f", "bower_components/jquery/dist/jquery.min.js", "dist"); -}; - -// watch for changes: ./make.js watch -target.watch = function() { - - // scripts - gaze("src/**/*.js", function() { - this.on('all', function(e, file) { - concat(); - }); - }); - - // styles - gaze("style/*.styl", function() { - this.on('changed', function(e, file) { - styl("style/index.styl", "dist/style.css"); - }); - }); - -}; - - diff --git a/package.json b/package.json deleted file mode 100644 index 1a5d9a3..0000000 --- a/package.json +++ /dev/null @@ -1,24 +0,0 @@ -{ - "name": "riot-admin", - "description": "Administration panel – A Riot.js demo (The 1kb MVP library)", - "version": "1.0.0", - "homepage": "https://muut.com/riotjs/demo/", - "repository": { - "type": "git", - "url": "https://github.com/muut/riotjs-admin.git" - }, - "licenses": [ - { - "type": "MIT", - "url": "http://opensource.org/licenses/mit-license.php" - } - ], - "devDependencies": { - "stylus": "latest", - "lodash": "latest", - "jshint": "latest", - "shelljs": "latest", - "gaze": "latest" - } - -} \ No newline at end of file diff --git a/src/api/admin.js b/src/api/admin.js deleted file mode 100644 index 7fe221f..0000000 --- a/src/api/admin.js +++ /dev/null @@ -1,56 +0,0 @@ - -// The admin API -function Admin(conf) { - - var self = riot.observable(this), - backend = new Backend(conf); - - $.extend(self, conf); - - // load a given page from the server - self.load = function(page, fn) { - - self.trigger("before:load", page); - - self.one("load", fn); - - backend.call("load", page, function(view) { - self.trigger("load", view); - }); - - }; - - // ... other API methods goes here - - // same as load("search") - self.search = function(query, fn) { - return backend.call("search", query, fn); - }; - - - // initialization - backend.call("init", conf.page).always(function(data) { - self.user = new User(self, data ? data.user : {}, backend); - self.trigger("ready"); - - }).done(function(data) { - self.trigger("load", data.view); - - }).fail(function() { - - // failed because - self.user.one("login", function(data) { - $.extend(self.user, data.user); - self.trigger("load", data.view); - - }); - - }); - - // on each "page" load - self.on("load", function(view) { - self.trigger("load:" + view.type, view.data, view.path); - self.page = view.type; - }); - -} diff --git a/src/api/backend.js b/src/api/backend.js deleted file mode 100644 index de65d46..0000000 --- a/src/api/backend.js +++ /dev/null @@ -1,46 +0,0 @@ - -// Fake backend to simulate a real thing -function Backend(conf) { - - var self = this, - cache = {}, - storage = top.localStorage || { sessionId: conf.sessionId }, - debug = conf.debug && typeof console != 'undefined'; - - - // underlying implementation for `call` can change - self.call = function(method, arg, fn) { - - var ret = test_data[method](arg, storage.sessionId), - promise = new Promise(fn); - - // debug message - if (debug) console.info("->", method, arg); - - // configurable caching for the "load" method - if (conf.cache && method == 'load') { - if (cache[arg]) return promise.done(cache[arg]); - cache[arg] = ret; - } - - // session management - if (ret.sessionId) storage.sessionId = ret.sessionId; - else if (method == 'logout') storage.removeItem("sessionId"); - - // fake delay for the call - setTimeout(function() { - if (debug) console.info("<-", ret); - - promise.always(ret); - promise[ret === false ? 'fail' : 'done'](ret); - - }, 400); - - // given callback - promise.done(fn); - - return promise; - - }; - -} diff --git a/src/api/promise.js b/src/api/promise.js deleted file mode 100644 index 7439af3..0000000 --- a/src/api/promise.js +++ /dev/null @@ -1,13 +0,0 @@ - -// A generic promiese interface by using riot.observable - -function Promise(fn) { - var self = riot.observable(this); - - $.map(['done', 'fail', 'always'], function(name) { - self[name] = function(arg) { - return self[$.isFunction(arg) ? 'on' : 'trigger'](name, arg); - }; - }); - -} diff --git a/src/api/spa.js b/src/api/spa.js deleted file mode 100644 index 0a136a7..0000000 --- a/src/api/spa.js +++ /dev/null @@ -1,27 +0,0 @@ - -// The ability to split your single-page application (SPA) into loosely-coupled modules - -var instance; - -top.admin = riot.observable(function(arg) { - - // admin() --> return instance - if (!arg) return instance; - - // admin(fn) --> add a new module - if ($.isFunction(arg)) { - top.admin.on("ready", arg); - - // admin(conf) --> initialize the application - } else { - - instance = new Admin(arg); - - instance.on("ready", function() { - top.admin.trigger("ready", instance); - }); - - } - -}); - diff --git a/src/api/test-data.js b/src/api/test-data.js deleted file mode 100644 index a064dca..0000000 --- a/src/api/test-data.js +++ /dev/null @@ -1,149 +0,0 @@ - -/*jshint multistr:true */ - -// Fake server responses (aka. "fixtures"), - -var customers = $.map([ - 'Acme, inc.', - 'Widget Corp', - '123 Warehousing', - 'Demo Company', - 'Smith and Co.', - 'Foo Bars', - 'ABC Telecom', - 'Fake Brothers', - 'QWERTY Logistics', - 'Demo, inc.', - 'Sample Company', - 'Sample, inc', - 'Acme Corp', - 'Allied Biscuit', - 'Ankh-Sto Associates', - 'Extensive Enterprise', - 'Galaxy Corp', - 'Globo-Chem', - 'Mr. Sparkle', - 'Globex Corporation', - 'LexCorp', - 'LuthorCorp', - 'Praxis Corporation', - 'Sombra Corporation', - 'Sto Plains Holdings' - -], function(name, i) { - return { name: name, id: i + 1, val: 100 - (i * 4) + (5 * Math.random()) }; - -}); - -function customer(id) { - return $.extend(customers[id - 1], { - - img: 'img/company.png', - joined: (+new Date() - 100000), - email: 'demo@company.it', - - desc: 'Elit hoodie pickled, literally church-key whatever High Life skateboard \ - tofu actually reprehenderit. Id slow-carb asymmetrical accusamus \ - Portland, flannel tempor proident odio esse quis.', - - invoices: $.map([200, 350, 150, 600], function(total, i) { - return { id: i + 1, total: total, time: (+new Date() - 1234567890 * i) }; - }), - - users: users - - }); - -} - -var users = $.map([ - 'Cheryll Egli', - 'Dominque Larocca', - 'Judie Flaugher', - 'Leonard Fason', - 'Lia Monteith', - 'Lindsy Woolard', - 'Rosanna Broadhead', - 'Sharyl Finlayson', - 'Spencer Zeller', - 'Zelda Fazenbaker' - -], function(name, i) { - return { name: name, id: i + 1, img: 'img/tipiirai.jpg' }; - -}); - -function user(id) { - - return $.extend(users[id - 1], { - username: 'dominique2', - email: 'demo.user@riotjs.com', - joined: (+new Date() - 100000), - - desc: 'Elit hoodie pickled, literally church-key whatever High Life skateboard \ - tofu actually reprehenderit. Id slow-carb asymmetrical accusamus \ - Portland, flannel tempor proident odio esse quis.' - }); - -} - -function graph(multiplier) { - var arr = []; - - for (var i = 0; i < 30; i++) { - arr[i] = Math.random() * multiplier * i; - } - - return arr; -} - - -var test_data = { - - // load new "page" - load: function(path) { - - var els = path.split("/"), - page = els[0]; - - return { - path: path, - type: page || "stats", - data: page == "stats" ? [ graph(100), graph(100), graph(200) ] : - page == "customers" ? customers : - page == "customer" ? customer(els[1]) : - page == "user" ? user(els[1]) : [] - }; - - }, - - // init - init: function(page, sessionId) { - - return !sessionId ? false : { - user: { - email: "joe@riotjs.com", - name: "Joe Rebellous", - username: "riot" - }, - sessionId: sessionId, - view: test_data.load(page || 'stats') - }; - - }, - - search: function(query) { - return users.filter( function(user){ - return user.name.toLowerCase().match(query.toLowerCase()); - }); - }, - - login: function(params) { - return test_data.init(params.page, params.username == 'riot'); - }, - - logout: function() { - return true; - } - -}; diff --git a/src/api/user.js b/src/api/user.js deleted file mode 100644 index e173f69..0000000 --- a/src/api/user.js +++ /dev/null @@ -1,29 +0,0 @@ - -// Current user (logged in or anonymous) -function User(app, data, backend) { - - var self = riot.observable(this); - - $.extend(self, data); - - self.login = function(params, fn) { - - self.one("login", fn); - - return backend.call("login", params, function(data) { - self.trigger("login", data); - }); - - }; - - self.logout = function(fn) { - - self.one("logout", fn); - - return backend.call("logout", {}, function(data) { - self.trigger("logout"); - }); - - }; - -} \ No newline at end of file diff --git a/src/ext/graph.html b/src/ext/graph.html deleted file mode 100644 index 903c418..0000000 --- a/src/ext/graph.html +++ /dev/null @@ -1,39 +0,0 @@ - - - - - - - Graph - - - - - - - -

Forums

- - -

Users

- - - - - diff --git a/src/ext/graph.js b/src/ext/graph.js deleted file mode 100644 index fa0f73d..0000000 --- a/src/ext/graph.js +++ /dev/null @@ -1,65 +0,0 @@ - -// A minimalistic line graph tool (use with extreme care, not tested) -$.fn.graph2 = function(data, color) { - - var graph = this.attr("width", this.parent().width() - 10), - padd = 35, - c = graph[0].getContext("2d"), - max = Math.max.apply(0, data), - width = graph.width(), - height = graph.height(), - len = data.length; - - // re-render? -> clear - c.clearRect (0, 0, width, height); - - function getX(val) { - return ((width - padd) / len) * val + (padd * 1.5); - } - - function getY(val) { - return height - (((height - padd) / max) * val) - padd; - } - - c.strokeStyle = "#999"; - c.font = "12px " + $("body").css("fontFamily"); - c.fillStyle = "#666"; - c.textAlign = "center"; - - // axises - c.lineWidth = 0.5; - c.beginPath(); - c.moveTo(padd, 0); - c.lineTo(padd, height - padd); - c.lineTo(width, height - padd); - c.stroke(); - - // x labels - for(var i = 0; i < len; i++) { - c.fillText(i, getX(i), height - padd + 20); - } - - // y labels - c.textAlign = "right"; - c.textBaseline = "middle"; - - var steps = Math.round(max / 6 / 100) * 100; - - for(i = 0; i < max; i += steps) { - c.fillText(i, padd - 10, getY(i)); - } - - // lines - c.lineWidth = 1; - c.beginPath(); - c.moveTo(getX(0), getY(data[0])); - - for(i = 1; i < len; i ++) { - c.lineTo(getX(i), getY(data[i])); - } - - c.strokeStyle = color; - c.stroke(); - -}; - diff --git a/src/ui/README.md b/src/ui/README.md deleted file mode 100644 index 2510d79..0000000 --- a/src/ui/README.md +++ /dev/null @@ -1,2 +0,0 @@ - -The UI is a list of loosely-coupled presenter modules. \ No newline at end of file diff --git a/src/ui/customer.js b/src/ui/customer.js deleted file mode 100644 index 46aa793..0000000 --- a/src/ui/customer.js +++ /dev/null @@ -1,32 +0,0 @@ - -// Presenter for single user -admin(function(app) { - - var root = $("#customer-page"), - tmpl = $("#customer-tmpl").html(), - user_tmpl = $("#user-link-tmpl").html(), - invoice_tmpl = $("#invoice-tmpl").html(); - - app.on("load:customer", function(data) { - - data.joined = util.timeformat(data.joined); - root.html(riot.render(tmpl, data)); - - // users - var list = $("#user-list", root); - - $.each(data.users, function(i, el) { - list.append(riot.render(user_tmpl, el)); - }); - - // invoices - list = $("#invoice-list ul", root); - - $.each(data.invoices, function(i, el) { - el.time = util.timeformat(el.time); - list.append(riot.render(invoice_tmpl, el)); - }); - - }); - -}); \ No newline at end of file diff --git a/src/ui/customers.js b/src/ui/customers.js deleted file mode 100644 index b18f040..0000000 --- a/src/ui/customers.js +++ /dev/null @@ -1,29 +0,0 @@ - -// Presenter for customer list -admin(function(app) { - - var root = $("#bars", app.root), - tmpl = $("#bars-tmpl").html(); - - app.on("load:customers", function(view) { - - var max; - - // clear existing data - root.empty(); - - // add new ones - $.each(view, function(i, entry) { - - // first one is the largest - if (!i) max = entry.val; - - entry.width = Math.round(entry.val / max * 100); - - root.append(riot.render(tmpl, entry)); - - }); - - }); - -}); \ No newline at end of file diff --git a/src/ui/login.js b/src/ui/login.js deleted file mode 100644 index a020d91..0000000 --- a/src/ui/login.js +++ /dev/null @@ -1,51 +0,0 @@ - -// Login and logout features - -admin(function(app) { - - var user = app.user, - loading = "is-loading"; - - // login - $("#login").submit(function(e) { - e.preventDefault(); - - var el = $(this).addClass("is-loading"); - - user.login({ - username: this.username.value, - password: this.password.value, - page: app.page - - }).fail(function() { - console.info("login failed"); - - }).done(function() { - el.removeClass("is-loading"); - - }); - - }); - - // logout - $("#logout").click(function(e) { - e.preventDefault(); - var el = $(this).addClass("is-loading"); - - user.logout(function() { - el.removeClass("is-loading"); - }); - - }); - - function toggle(is_logged) { - app.root.toggleClass("is-logged", is_logged).toggleClass("is-not-logged", !is_logged); - } - - user.on("login logout", function(type) { - toggle(type == 'login'); - }); - - toggle(!!user.username); - -}); \ No newline at end of file diff --git a/src/ui/search.js b/src/ui/search.js deleted file mode 100644 index 795e3e9..0000000 --- a/src/ui/search.js +++ /dev/null @@ -1,36 +0,0 @@ - -// Search dropdown -admin(function(app) { - - var form = $("#search"), - tmpl = $("#result-tmpl").html(), - results = $("#results"); - - form.on('keyup', function(e) { - - e.preventDefault(); - - var form = $(this), - val = $.trim(this.q.value); - - if (!val) return; - - form.addClass("is-loading"); - - app.search(val, function(arr) { - form.removeClass("is-loading"); - results.empty().show(); - - $.each(arr, function(i, res) { - results.append(riot.render(tmpl, res)); - }); - - }); - - $(document).one("click keypress", function() { - results.hide(); - }); - - }); - -}); diff --git a/src/ui/stats.js b/src/ui/stats.js deleted file mode 100644 index f18c7bc..0000000 --- a/src/ui/stats.js +++ /dev/null @@ -1,16 +0,0 @@ - -// Presenter for stats (the line graphs, see ext/graph.js) -admin(function(app) { - - var canvas = $("canvas", app.root), - colors = ['#be0000', '#4cbe00', '#1fadc5']; - - app.on("load:stats", function(stats) { - - $.each(stats, function(i, data) { - canvas.eq(i).graph2(data, colors[i]); - }); - - }); - -}); \ No newline at end of file diff --git a/src/ui/user.js b/src/ui/user.js deleted file mode 100644 index f6c77be..0000000 --- a/src/ui/user.js +++ /dev/null @@ -1,19 +0,0 @@ - -// Presenter for single user -admin(function(app) { - - var root = $("#user-page"), - tmpl = $("#user-tmpl").html(); - - app.on("load:user", function(data) { - data.joined = util.timeformat(data.joined); - root.html(riot.render(tmpl, data)); - - // not real banning feature on this demo - $("button", root).click(function() { - $(this).text("User is banned!"); - }); - - }); - -}); \ No newline at end of file diff --git a/src/ui/util.js b/src/ui/util.js deleted file mode 100644 index 79a3fcf..0000000 --- a/src/ui/util.js +++ /dev/null @@ -1,11 +0,0 @@ - -// List of utility functions for the UI -var util = { - - // date formatting goes to presenter layer, not inside model - timeformat: function(time) { - var d = new Date(time); - return d.getFullYear() + "/" + (d.getMonth() + 1) + "/" + d.getDate(); - } - -}; diff --git a/src/ui/view-switch.js b/src/ui/view-switch.js deleted file mode 100644 index 493ffbf..0000000 --- a/src/ui/view-switch.js +++ /dev/null @@ -1,55 +0,0 @@ - -/* - Handle view switching, aka. "routing" - The transition effect is done with CSS -*/ -admin(function(app) { - - var is_active = "is-active"; - - // 1. select elements from the page to call riot.route(path) - app.root.on("click", "[href^='#/']", function(e) { - - e.preventDefault(); - - var link = $(this); - - // no action - if (link.hasClass(is_active)) return; - - // loading indicator - link.addClass("is-loading"); - - // Riot changes the URL, notifies listeners and takes care of the back button - riot.route(link.attr("href")); - - }); - - - // 2. listen to route clicks and back button - riot.route(function(path) { - - // Call API method to load stuff from server - app.load(path.slice(2)); - - }); - - // 3. Set "is-active" class name for the active page and navi element - app.on("before:load", function() { - - // remove existing class - $("." + is_active).removeClass(is_active); - - - }).on("load", function(view) { - - // set a new class - $("#" + view.type + "-page").add("#" + view.type + "-nav").addClass(is_active); - - // remove loading indicator - $("nav .is-loading").removeClass("is-loading"); - - }); - -}); - diff --git a/style/css3.styl b/style/css3.styl deleted file mode 100644 index 178a669..0000000 --- a/style/css3.styl +++ /dev/null @@ -1,34 +0,0 @@ - -/* Avoid using vendor prefixes */ - -vendor-prefixes = webkit moz w3c - -vendor(prop, args, only = null, ignore = null) - for prefix in vendor-prefixes - unless (only and !(prefix in only)) or (ignore and prefix in ignore) - if prefix == w3c - {prop}: args - else - {'-' + prefix + '-' + prop}: args - -opacity(args...) - opacity: args - filter: 'progid:DXImageTransform.Microsoft.Alpha(Opacity=%s)' % round(args[0] * 100) - -background-size() - vendor('background-size', arguments) - -transform() - vendor('transform', arguments) - -border-image() - vendor('border-image', arguments) - -transition() - vendor('transition', arguments) - -box-sizing() - vendor('box-sizing', arguments) - -border-radius() - vendor('border-radius', arguments) diff --git a/style/global.styl b/style/global.styl deleted file mode 100644 index d4d1915..0000000 --- a/style/global.styl +++ /dev/null @@ -1,96 +0,0 @@ - -/* Global stuff: body, links, inputs, header, #main, footer */ - -// quick reset -* - border 0 - margin 0 - line-height 1 - box-sizing border-box - - -body - font-family "Myriad Pro", "Lucida Grande", "Lucida Sans Unicode" - min-width 400px - -template - display none - -a - color blue - text-decoration none - cursor pointer - - &:hover - text-decoration underline - -input - border 1px solid #c - padding u - border-radius 3px - font-size 100% - -button - padding uh u2 - background-color blue - color #f - font-size 100% - cursor pointer - border-radius 5em - outline 0 - - &:hover - background-color darken(blue, 5) - - &:active - background-color darken(blue, 15) - - -header - background-color #3 - padding u - margin-bottom u2 - color #e - text-transform uppercase - letter-spacing 2px - font-size 110% - display none - -header div, #main - max-width 800px - margin 0 auto - -header a - font-size 80% - margin-left 1em - color #e - transition color .1s - - &.is-loading - color #5 - - &.is-active - color #9 - text-decoration none - cursor default - -nav - margin-left 2em - display inline-block - width 54% - -footer - background-color rgba(#313f4c, .8) - width 100% - position fixed - bottom 0 - font-size 80% - color #9 - padding .6em 0 - letter-spacing 5px - text-align center - display none - - a - color #d - letter-spacing 0 diff --git a/style/index.styl b/style/index.styl deleted file mode 100644 index 84b3d74..0000000 --- a/style/index.styl +++ /dev/null @@ -1,8 +0,0 @@ - -@import "css3" -@import "vars" -@import "global" -@import "login" -@import "view" -@import "search" -@import "media" diff --git a/style/login.styl b/style/login.styl deleted file mode 100644 index d9b96ab..0000000 --- a/style/login.styl +++ /dev/null @@ -1,76 +0,0 @@ - -/* Initial login screen */ - -#logo - background-image url("../img/riotjslogo.png") - width 220px - height 83px - position absolute - top u2 - left u2 - display none - -#login - padding 2em - background-color rgba(#0, .5) - color #e - margin 150px auto 50px - border-radius 4px - display none - transition opacity .3s - - label - display block - margin-bottom u2 - font-weight 100 - color #c - text-align left - - span - display block - margin-bottom uh - - button - width 60% - font-size 110% - padding u 0 - - input - width 100% - border none - background-color rgba(#f, .5) - box-shadow 0 0 5px #4 inset - - &:focus - background-color #f - - h3 - font-family "avenir next", "helvetica neue", "verdana" - font-weight 100 - font-size 250% - margin-bottom u - - &.is-loading - opacity .5 - - -.is-not-logged - background #f url(../img/wallpaper.jpg) 0 0 no-repeat - text-align center - background-size cover - - #login - display inline-block - - #logo, footer - display block - - -.is-logged - background-image none - - header, .page - display block - - #login - display none diff --git a/style/media.styl b/style/media.styl deleted file mode 100644 index 40d385c..0000000 --- a/style/media.styl +++ /dev/null @@ -1,34 +0,0 @@ - -// logo -@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) - #logo - background-image url("../img/riotjslogo@2x.png") - -webkit-background-size 100% - -// login backgrond image -@media (max-width: 1150px) - body.is-not-logged - background-size 150% 1600px - -@media (max-width: 800px) - #search - display block - margin-bottom u2 - - navi - margin-left -(uh) - width 100% - - header a - font-size 12px - - #logout - position absolute - top 20px - right 15px - margin 0 - - #bars - em - display block - margin-bottom -(uh) \ No newline at end of file diff --git a/style/search.styl b/style/search.styl deleted file mode 100644 index 9033cc8..0000000 --- a/style/search.styl +++ /dev/null @@ -1,56 +0,0 @@ - -/* search dropdown */ - -#search - display inline-block - position relative - - input - padding .3em 1em - border-radius 3em - font-size 85% - background-color #6 - transition background-color .4s - border-color #6 - - &:focus - outline none - background-color #f - - &.is-loading - opacity .5 - transition opacity .2s - -#results - position absolute - top 110% - left 0 - background-color #f - width 100% - box-shadow 0 0 6px #c - border-radius 4px - display none - z-index 9 - - a - font-size 80% - color #3 - text-transform none - letter-spacing 0 - display block - margin .5em - text-decoration none - - &:hover - background-color blue - color #f - - > * - display inline-block - vertical-align middle - img - width 2.4em - margin-right uh - - span - margin-top uh diff --git a/style/vars.styl b/style/vars.styl deleted file mode 100644 index 108f201..0000000 --- a/style/vars.styl +++ /dev/null @@ -1,15 +0,0 @@ - -/* CSS variables for colors and sizing */ - -mootred = #ff003f -red = #be0000 -green = #4cbe00 -blue = #1fadc5 -blue2 = #6cb7c4 -pink = #ff57a8 - - -// size units -u = 0.6em -u2 = 1.2em -uh = 0.3em \ No newline at end of file diff --git a/style/view.styl b/style/view.styl deleted file mode 100644 index 9ecd7e9..0000000 --- a/style/view.styl +++ /dev/null @@ -1,123 +0,0 @@ - -/* - All the different views of this application. - Might make sense to separate into individual files when things start growing. -*/ - -// CSS based fading for view switch -#main - position relative - -// pages are absolutely positioned so that they can fade-in/out -.page - position absolute - top 0 - left 0 - opacity 0 - transition opacity .1s - width 100% - z-index -1 - padding 15px - display none - - &.is-active - opacity 1 - z-index 1 - - -// statistical bars -#bars - a - display block - padding uh - text-decoration none - - > * - display inline-block - vertical-align middle - - &:hover - background-color #f9 - color #3 - - em - width 20% - white-space nowrap - padding-right u - font-size 90% - font-style normal - - span - width 78% - - strong - height 4px - background-color #7 - display block - border-radius 4px - -#stats-page - h3 - font-weight normal - font-size 100% - margin 0 0 -1.1em 3em - - canvas - height 200px - margin-bottom 25px - -#user-page, #customer-page - margin-top u2 - - img - margin-right u2 - border-radius 4px - - .details - display inline-block - max-width 530px - vertical-align top - padding-top uh - - h1 - font-weight normal - - .meta - margin-bottom u - color #7 - margin uh 0 u - - span - margin 0 uh - color #c - - .desc - color #5 - font-size 120% - line-height 1.2 - margin-bottom u2 - -#customer-page - img - max-width 180px - -#user-list - margin-bottom u2 - - img - max-width 60px - margin 0 u uh 0 - -#invoice-list - max-width 200px - - ul - list-style-type none - padding 0 - - li - padding uh 0 - - strong - float right - diff --git a/test/index.js b/test/index.js deleted file mode 100644 index 8b3f54c..0000000 --- a/test/index.js +++ /dev/null @@ -1,30 +0,0 @@ - -/* - Shows you how to test your API (model) on the server. - This makes a seamless integration to the development workflow. -*/ - -// required stuff for tests -require("./test.js") - -// the admin interface -var admin = require("../dist/api.js").admin; - -// run the tests -admin(function(app) { - - it("Should have proper initial values", function() { - assert.equal(app.page, "stats"); - assert.equal(app.user.username, "riot"); - }); - - it("Should have an initial view", function() { - app.one("load", function(view) { - assert.equal(view.type, "stats"); - }) - }) - -}); - -// initialize -admin({ page: "stats", debug: false, cache: false, sessionId: 'abc' }) diff --git a/test/test.js b/test/test.js deleted file mode 100644 index 5a22b74..0000000 --- a/test/test.js +++ /dev/null @@ -1,13 +0,0 @@ - -// BDD style testing -require("../bower_components/riotjs/bdd.js"); - -// jQuery object with Riot functions -global.$ = global.riot = require("../bower_components/riotjs/riot.js"); - -// $ utility functions used by the API (from lodash) -var _ = require("lodash"); - -_.each(['map', 'isFunction', 'extend'], function(name) { - $[name] = _[name]; -});