From d3a3d9af75e52eb5526947c425e760da664f865c Mon Sep 17 00:00:00 2001 From: deck Date: Sun, 15 Jun 2014 16:30:12 +0300 Subject: [PATCH 01/19] hello ionic books --- SPA/ang.js | 90 ++++++++++++++++++++++++++++++++++ SPA/index.html | 129 ++++++++++++++++++++++++++++++++----------------- 2 files changed, 174 insertions(+), 45 deletions(-) create mode 100644 SPA/ang.js diff --git a/SPA/ang.js b/SPA/ang.js new file mode 100644 index 0000000..20da218 --- /dev/null +++ b/SPA/ang.js @@ -0,0 +1,90 @@ +var booksApp = angular.module('ionicApp', ['ionic']) + +booksApp.config(function($stateProvider, $urlRouterProvider) { + + $stateProvider + .state('tabs', { + url: "/tab", + abstract: true, + templateUrl: "tabs.html" + }) + .state('tabs.home', { + url: "/home", + views: { + 'home-tab': { + templateUrl: "home.html", + controller: 'HomeTabCtrl' + } + } + }) + .state('tabs.facts', { + url: "/facts/:restId", + views: { + 'home-tab': { + templateUrl: "facts.html", + controller: 'AboutController' + } + } + }) + .state('tabs.facts2', { + url: "/facts2", + views: { + 'home-tab': { + templateUrl: "facts2.html" + } + } + }) + .state('tabs.about', { + url: "/about", + views: { + 'about-tab': { + templateUrl: "about.html", + } + } + }) + .state('tabs.navstack', { + url: "/navstack", + views: { + 'about-tab': { + templateUrl: "nav-stack.html" + } + } + }) + .state('tabs.contact', { + url: "/contact", + views: { + 'contact-tab': { + templateUrl: "contact.html" + } + } + }); + + + $urlRouterProvider.otherwise("/tab/home"); + +}) + +/*controller('HomeTabCtrl', function($scope) { + console.log('HomeTabCtrl'); +});*/ + + // create the controller and inject Angular's $scope +booksApp.controller('HomeTabCtrl', function($scope, $http) { + // create a message to display in our view + $http({method: 'GET', url: 'http://localhost:3412/rest'}). + success(function(data, status, headers, config) { + $scope.messages = data; + }). + error(function(data, status, headers, config) { + }); +}); + +booksApp.controller('AboutController', function($scope,$http,$stateParams) { + $http({method: 'GET', url: 'http://localhost:3412/rest/'+$stateParams.restId}). + success(function(data, status, headers, config) { + $scope.message = data; + console.log(data); + }). + error(function(data, status, headers, config) { + }); +}); \ No newline at end of file diff --git a/SPA/index.html b/SPA/index.html index 97ca4cf..0705e73 100644 --- a/SPA/index.html +++ b/SPA/index.html @@ -1,48 +1,87 @@ - - - - - - - - - - - - - - - - - - - - - -
- - - -
+ + + + -
- - - - + + + - + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file From e39ae9632fdf4d683c8ecd1df07a5437ba210b5b Mon Sep 17 00:00:00 2001 From: deck Date: Sun, 15 Jun 2014 19:27:26 +0300 Subject: [PATCH 02/19] mobile-first --- SPA/index.html | 54 +++++++++++++++++++++++++++++++++++++------------ restaurant.json | 6 +++--- 2 files changed, 44 insertions(+), 16 deletions(-) diff --git a/SPA/index.html b/SPA/index.html index 0705e73..87b7ffc 100644 --- a/SPA/index.html +++ b/SPA/index.html @@ -7,11 +7,12 @@ + - + @@ -20,9 +21,9 @@ diff --git a/restaurant.json b/restaurant.json index cd2d652..4900113 100644 --- a/restaurant.json +++ b/restaurant.json @@ -3,7 +3,7 @@ "id": 0, "name": "Book 1", "author": "Stanislav Grof", - "city": "Port of spain", + "cover": "http://www.bethsteffel.com/images/SteffelPrintDesign_f06.gif", "phone": "+40 743 105 932", "best": [{ "name":"pizza 1", @@ -30,7 +30,7 @@ "id": 1, "name": "Second Book", "author": "Jean Clemente", - "city": "Port of spain", + "cover": "http://37.media.tumblr.com/tumblr_lupfgj9s1j1qbycdbo1_500.jpg", "phone": "+40 743 105 932", "best": [{ "name":"pizza 1", @@ -52,7 +52,7 @@ "id": 2, "name": "Third Book", "author": "X Dorsay", - "city": "Port of spain", + "cover": "http://img2.wikia.nocookie.net/__cb20140118054532/disney/images/1/16/More_Jungle_Book_Record_Cover.jpg", "phone": "+40 743 105 932", "best": [{ "name":"pizza 1", From 9d11c8ca877512dd13e9bc892d8f5d0d50a8bf80 Mon Sep 17 00:00:00 2001 From: deck Date: Sun, 15 Jun 2014 20:31:15 +0300 Subject: [PATCH 03/19] split design --- SPA/index.html | 20 +---- app.js | 35 ++++++++- npm-debug.log | 204 +++++++++++++++++++++++++++++++++++++++++++++++++ package.json | 3 +- 4 files changed, 242 insertions(+), 20 deletions(-) create mode 100644 npm-debug.log diff --git a/SPA/index.html b/SPA/index.html index 87b7ffc..73a81fa 100644 --- a/SPA/index.html +++ b/SPA/index.html @@ -56,11 +56,6 @@

{{ message.name }}

-
- -

{{ message.author }}

-

{{ message.phone }}

-

@@ -68,18 +63,11 @@

{{ message.author }}

the content is from a card-body consisting of an image and paragraph text. The footer consists of tabs, icons aligned left, within the card-footer.

-

- 1 Like - 5 Comments -

-
- - - - - - +
+ +

{{ message.author }}

+

{{ message.phone }}

diff --git a/app.js b/app.js index fbc544c..a4c40fd 100644 --- a/app.js +++ b/app.js @@ -17,8 +17,10 @@ function handleFile(err, data) { app.use("/SPA", express.static(__dirname + '/SPA')); app.use(express.bodyParser()); -app.get('/', function(req,res) { - res.sendfile('SPA/index.html'); + +app.get('/', checkForMobile, function(req,res) { + res.send('desktop edition'); + console.log(':)'); }); app.get('/rest', function(req, res) { @@ -41,4 +43,31 @@ app.get('/rest/:id', function(req, res) { res.json(q); }); -app.listen(process.env.PORT || 3412); \ No newline at end of file +app.listen(process.env.PORT || 3412); + + +// returns true if the caller is a mobile phone (not tablet) +// compares the user agent of the caller against a regex +// This regex comes from http://detectmobilebrowsers.com/ +function isCallerMobile(req) { + var ua = req.headers['user-agent'].toLowerCase(), + isMobile = /(android|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|mobile.+firefox|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows (ce|phone)|xda|xiino/i.test(ua) || /1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas\-|your|zeto|zte\-/i.test(ua.substr(0, 4)); + + return !!isMobile; +} + + +// note: the next method param is passed as well +function checkForMobile(req, res, next) { + // check to see if the caller is a mobile device + var isMobile = isCallerMobile(req); + + if (isMobile) { + console.log("Going mobile"); + res.sendfile('SPA/index.html'); +// res.redirect('/mobile'); + } else { + // if we didn't detect mobile, call the next method, which will eventually call the desktop route + return next(); + } +} \ No newline at end of file diff --git a/npm-debug.log b/npm-debug.log new file mode 100644 index 0000000..e33066c --- /dev/null +++ b/npm-debug.log @@ -0,0 +1,204 @@ +0 info it worked if it ends with ok +1 verbose cli [ '/usr/local/bin/node', +1 verbose cli '/usr/local/bin/npm', +1 verbose cli 'install', +1 verbose cli 'detectmobilebrowsers', +1 verbose cli '-g' ] +2 info using npm@1.3.25 +3 info using node@v0.11.11 +4 verbose cache add [ 'detectmobilebrowsers', null ] +5 verbose cache add name=undefined spec="detectmobilebrowsers" args=["detectmobilebrowsers",null] +6 verbose parsed url { protocol: null, +6 verbose parsed url slashes: null, +6 verbose parsed url auth: null, +6 verbose parsed url host: null, +6 verbose parsed url port: null, +6 verbose parsed url hostname: null, +6 verbose parsed url hash: null, +6 verbose parsed url search: null, +6 verbose parsed url query: null, +6 verbose parsed url pathname: 'detectmobilebrowsers', +6 verbose parsed url path: 'detectmobilebrowsers', +6 verbose parsed url href: 'detectmobilebrowsers' } +7 silly lockFile 1df206bf-detectmobilebrowsers detectmobilebrowsers +8 verbose lock detectmobilebrowsers /root/.npm/1df206bf-detectmobilebrowsers.lock +9 silly lockFile 1df206bf-detectmobilebrowsers detectmobilebrowsers +10 silly lockFile 1df206bf-detectmobilebrowsers detectmobilebrowsers +11 verbose addNamed [ 'detectmobilebrowsers', '' ] +12 verbose addNamed [ null, '*' ] +13 silly lockFile 295a1601-detectmobilebrowsers detectmobilebrowsers@ +14 verbose lock detectmobilebrowsers@ /root/.npm/295a1601-detectmobilebrowsers.lock +15 silly addNameRange { name: 'detectmobilebrowsers', range: '*', hasData: false } +16 verbose url raw detectmobilebrowsers +17 verbose url resolving [ 'https://registry.npmjs.org/', './detectmobilebrowsers' ] +18 verbose url resolved https://registry.npmjs.org/detectmobilebrowsers +19 info trying registry request attempt 1 at 20:05:51 +20 http GET https://registry.npmjs.org/detectmobilebrowsers +21 http 200 https://registry.npmjs.org/detectmobilebrowsers +22 silly registry.get cb [ 200, +22 silly registry.get { date: 'Sun, 15 Jun 2014 17:05:51 GMT', +22 silly registry.get server: 'CouchDB/1.5.0 (Erlang OTP/R16B03)', +22 silly registry.get etag: '"7N7NHFMHAX1BFAEDGRWOJ01LJ"', +22 silly registry.get 'content-type': 'application/json', +22 silly registry.get 'cache-control': 'max-age=30', +22 silly registry.get 'content-length': '8547', +22 silly registry.get 'accept-ranges': 'bytes', +22 silly registry.get via: '1.1 varnish', +22 silly registry.get age: '109', +22 silly registry.get 'x-served-by': 'cache-fra1234-FRA', +22 silly registry.get 'x-cache': 'MISS', +22 silly registry.get 'x-cache-hits': '0', +22 silly registry.get 'x-timer': 'S1402851951.648936,VS0,VE172', +22 silly registry.get vary: 'Accept', +22 silly registry.get connection: 'close' } ] +23 silly addNameRange number 2 { name: 'detectmobilebrowsers', range: '*', hasData: true } +24 silly addNameRange versions [ 'detectmobilebrowsers', [ '0.1.0', '0.1.1' ] ] +25 verbose addNamed [ 'detectmobilebrowsers', '0.1.1' ] +26 verbose addNamed [ '0.1.1', '0.1.1' ] +27 silly lockFile 8870ec6b-detectmobilebrowsers-0-1-1 detectmobilebrowsers@0.1.1 +28 verbose lock detectmobilebrowsers@0.1.1 /root/.npm/8870ec6b-detectmobilebrowsers-0-1-1.lock +29 silly lockFile 48e7314d-s-detectmobilebrowsers-0-1-1-tgz https://registry.npmjs.org/detectmobilebrowsers/-/detectmobilebrowsers-0.1.1.tgz +30 verbose lock https://registry.npmjs.org/detectmobilebrowsers/-/detectmobilebrowsers-0.1.1.tgz /root/.npm/48e7314d-s-detectmobilebrowsers-0-1-1-tgz.lock +31 verbose addRemoteTarball [ 'https://registry.npmjs.org/detectmobilebrowsers/-/detectmobilebrowsers-0.1.1.tgz', +31 verbose addRemoteTarball '05b87eed17145a54c83a4299ce8ebbadc5e761de' ] +32 info retry fetch attempt 1 at 20:05:51 +33 verbose fetch to= /root/tmp/npm-3238-NjZdA0XU/1402851951862-0.34984527714550495/tmp.tgz +34 http GET https://registry.npmjs.org/detectmobilebrowsers/-/detectmobilebrowsers-0.1.1.tgz +35 http 200 https://registry.npmjs.org/detectmobilebrowsers/-/detectmobilebrowsers-0.1.1.tgz +36 verbose tar unpack /root/tmp/npm-3238-NjZdA0XU/1402851951862-0.34984527714550495/tmp.tgz +37 silly lockFile 8055d271-1862-0-34984527714550495-package tar:///root/tmp/npm-3238-NjZdA0XU/1402851951862-0.34984527714550495/package +38 verbose lock tar:///root/tmp/npm-3238-NjZdA0XU/1402851951862-0.34984527714550495/package /root/.npm/8055d271-1862-0-34984527714550495-package.lock +39 silly lockFile cf6b2b04-1862-0-34984527714550495-tmp-tgz tar:///root/tmp/npm-3238-NjZdA0XU/1402851951862-0.34984527714550495/tmp.tgz +40 verbose lock tar:///root/tmp/npm-3238-NjZdA0XU/1402851951862-0.34984527714550495/tmp.tgz /root/.npm/cf6b2b04-1862-0-34984527714550495-tmp-tgz.lock +41 silly gunzTarPerm modes [ '755', '644' ] +42 silly gunzTarPerm extractEntry package.json +43 silly gunzTarPerm extractEntry .npmignore +44 silly gunzTarPerm extractEntry README.md +45 silly gunzTarPerm extractEntry src/detectmobilebrowsers.coffee +46 silly gunzTarPerm extractEntry test/detect.coffee +47 silly gunzTarPerm extractEntry lib/detectmobilebrowsers.js +48 silly gunzTarPerm extractEntry Cakefile +49 silly lockFile 8055d271-1862-0-34984527714550495-package tar:///root/tmp/npm-3238-NjZdA0XU/1402851951862-0.34984527714550495/package +50 silly lockFile 8055d271-1862-0-34984527714550495-package tar:///root/tmp/npm-3238-NjZdA0XU/1402851951862-0.34984527714550495/package +51 silly lockFile cf6b2b04-1862-0-34984527714550495-tmp-tgz tar:///root/tmp/npm-3238-NjZdA0XU/1402851951862-0.34984527714550495/tmp.tgz +52 silly lockFile cf6b2b04-1862-0-34984527714550495-tmp-tgz tar:///root/tmp/npm-3238-NjZdA0XU/1402851951862-0.34984527714550495/tmp.tgz +53 verbose tar pack [ '/root/.npm/detectmobilebrowsers/0.1.1/package.tgz', +53 verbose tar pack '/root/tmp/npm-3238-NjZdA0XU/1402851951862-0.34984527714550495/package' ] +54 verbose tarball /root/.npm/detectmobilebrowsers/0.1.1/package.tgz +55 verbose folder /root/tmp/npm-3238-NjZdA0XU/1402851951862-0.34984527714550495/package +56 silly lockFile 8055d271-1862-0-34984527714550495-package tar:///root/tmp/npm-3238-NjZdA0XU/1402851951862-0.34984527714550495/package +57 verbose lock tar:///root/tmp/npm-3238-NjZdA0XU/1402851951862-0.34984527714550495/package /root/.npm/8055d271-1862-0-34984527714550495-package.lock +58 silly lockFile d7ee75a8-mobilebrowsers-0-1-1-package-tgz tar:///root/.npm/detectmobilebrowsers/0.1.1/package.tgz +59 verbose lock tar:///root/.npm/detectmobilebrowsers/0.1.1/package.tgz /root/.npm/d7ee75a8-mobilebrowsers-0-1-1-package-tgz.lock +60 silly lockFile 8055d271-1862-0-34984527714550495-package tar:///root/tmp/npm-3238-NjZdA0XU/1402851951862-0.34984527714550495/package +61 silly lockFile 8055d271-1862-0-34984527714550495-package tar:///root/tmp/npm-3238-NjZdA0XU/1402851951862-0.34984527714550495/package +62 silly lockFile d7ee75a8-mobilebrowsers-0-1-1-package-tgz tar:///root/.npm/detectmobilebrowsers/0.1.1/package.tgz +63 silly lockFile d7ee75a8-mobilebrowsers-0-1-1-package-tgz tar:///root/.npm/detectmobilebrowsers/0.1.1/package.tgz +64 silly lockFile 00a3f2a9-tectmobilebrowsers-0-1-1-package /root/.npm/detectmobilebrowsers/0.1.1/package +65 verbose lock /root/.npm/detectmobilebrowsers/0.1.1/package /root/.npm/00a3f2a9-tectmobilebrowsers-0-1-1-package.lock +66 silly lockFile 00a3f2a9-tectmobilebrowsers-0-1-1-package /root/.npm/detectmobilebrowsers/0.1.1/package +67 silly lockFile 00a3f2a9-tectmobilebrowsers-0-1-1-package /root/.npm/detectmobilebrowsers/0.1.1/package +68 verbose tar unpack /root/.npm/detectmobilebrowsers/0.1.1/package.tgz +69 silly lockFile e272bcf0-tectmobilebrowsers-0-1-1-package tar:///root/.npm/detectmobilebrowsers/0.1.1/package +70 verbose lock tar:///root/.npm/detectmobilebrowsers/0.1.1/package /root/.npm/e272bcf0-tectmobilebrowsers-0-1-1-package.lock +71 silly lockFile d7ee75a8-mobilebrowsers-0-1-1-package-tgz tar:///root/.npm/detectmobilebrowsers/0.1.1/package.tgz +72 verbose lock tar:///root/.npm/detectmobilebrowsers/0.1.1/package.tgz /root/.npm/d7ee75a8-mobilebrowsers-0-1-1-package-tgz.lock +73 silly gunzTarPerm modes [ '755', '644' ] +74 silly gunzTarPerm extractEntry package.json +75 silly gunzTarPerm extractEntry .npmignore +76 silly gunzTarPerm extractEntry README.md +77 silly gunzTarPerm extractEntry Cakefile +78 silly gunzTarPerm extractEntry lib/detectmobilebrowsers.js +79 silly gunzTarPerm extractEntry src/detectmobilebrowsers.coffee +80 silly gunzTarPerm extractEntry test/detect.coffee +81 silly lockFile e272bcf0-tectmobilebrowsers-0-1-1-package tar:///root/.npm/detectmobilebrowsers/0.1.1/package +82 silly lockFile e272bcf0-tectmobilebrowsers-0-1-1-package tar:///root/.npm/detectmobilebrowsers/0.1.1/package +83 silly lockFile d7ee75a8-mobilebrowsers-0-1-1-package-tgz tar:///root/.npm/detectmobilebrowsers/0.1.1/package.tgz +84 silly lockFile d7ee75a8-mobilebrowsers-0-1-1-package-tgz tar:///root/.npm/detectmobilebrowsers/0.1.1/package.tgz +85 verbose chmod /root/.npm/detectmobilebrowsers/0.1.1/package.tgz 644 +86 verbose chown /root/.npm/detectmobilebrowsers/0.1.1/package.tgz [ 1000, 1000 ] +87 silly lockFile 48e7314d-s-detectmobilebrowsers-0-1-1-tgz https://registry.npmjs.org/detectmobilebrowsers/-/detectmobilebrowsers-0.1.1.tgz +88 silly lockFile 48e7314d-s-detectmobilebrowsers-0-1-1-tgz https://registry.npmjs.org/detectmobilebrowsers/-/detectmobilebrowsers-0.1.1.tgz +89 silly lockFile 8870ec6b-detectmobilebrowsers-0-1-1 detectmobilebrowsers@0.1.1 +90 silly lockFile 8870ec6b-detectmobilebrowsers-0-1-1 detectmobilebrowsers@0.1.1 +91 silly lockFile 295a1601-detectmobilebrowsers detectmobilebrowsers@ +92 silly lockFile 295a1601-detectmobilebrowsers detectmobilebrowsers@ +93 silly resolved [ { name: 'detectmobilebrowsers', +93 silly resolved version: '0.1.1', +93 silly resolved description: 'Mobile browser detection based on user-agent', +93 silly resolved author: { name: 'Bryant Williams', email: 'b.n.williams@gmail.com' }, +93 silly resolved keywords: +93 silly resolved [ 'browser', +93 silly resolved 'detectmobilebrowsers', +93 silly resolved 'detection', +93 silly resolved 'mobile', +93 silly resolved 'node', +93 silly resolved 'user-agent' ], +93 silly resolved scripts: +93 silly resolved { postinstall: 'cake build', +93 silly resolved preinstall: 'cake clean', +93 silly resolved pretest: 'npm install --dev', +93 silly resolved test: 'cake test' }, +93 silly resolved homepage: 'http://github.com/scien/detectmobilebrowsers-node.git', +93 silly resolved repository: +93 silly resolved { type: 'git', +93 silly resolved url: 'http://github.com/scien/detectmobilebrowsers-node.git' }, +93 silly resolved devDependencies: +93 silly resolved { 'coffee-script': '1.3.x', +93 silly resolved express: '3.0.x', +93 silly resolved mocha: '1.3.x', +93 silly resolved request: '2.10.x', +93 silly resolved should: '1.1.x' }, +93 silly resolved main: './lib/detectmobilebrowsers.js', +93 silly resolved readme: '# Mobile Redirection for Node.js and Express\n\nDetects if the request came from a mobile browser\n\n## Usage\n```\nexpress = require \'express\'\nmobile = require \'detectmobilebrowsers\'\n\napp = express()\napp.configure () ->\n app.use mobile.redirect \'http://m.domain.com\'\n app.use mobile.is_mobile()\napp.get \'/\', (req, res) ->\n res.json {is_mobile: req.is_mobile}\napp.listen 3000\n```\n\n## Credit\n\nRegex was put together by [Chad Smith](http://twitter.com/chadsmith) of http://detectmobilebrowsers.com\n\n\n## LICENSE\n```\nThis is free and unencumbered software released into the public domain.\n\nAnyone is free to copy, modify, publish, use, compile, sell, or\ndistribute this software, either in source code form or as a compiled\nbinary, for any purpose, commercial or non-commercial, and by any\nmeans.\n\nIn jurisdictions that recognize copyright laws, the author or authors\nof this software dedicate any and all copyright interest in the\nsoftware to the public domain. We make this dedication for the benefit\nof the public at large and to the detriment of our heirs and\nsuccessors. We intend this dedication to be an overt act of\nrelinquishment in perpetuity of all present and future rights to this\nsoftware under copyright law.\n\nTHE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,\nEXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF\nMERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT.\nIN NO EVENT SHALL THE AUTHORS BE LIABLE FOR ANY CLAIM, DAMAGES OR\nOTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE,\nARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR\nOTHER DEALINGS IN THE SOFTWARE.\n\nFor more information, please refer to \n```\n\n', +93 silly resolved readmeFilename: 'README.md', +93 silly resolved bugs: { url: 'https://github.com/scien/detectmobilebrowsers-node/issues' }, +93 silly resolved _id: 'detectmobilebrowsers@0.1.1', +93 silly resolved dist: { shasum: '16dbaceec779cab62e15af9aa7c3cad4e266d896' }, +93 silly resolved _from: 'detectmobilebrowsers@', +93 silly resolved _resolved: 'https://registry.npmjs.org/detectmobilebrowsers/-/detectmobilebrowsers-0.1.1.tgz' } ] +94 info install detectmobilebrowsers@0.1.1 into /usr/local/lib +95 info installOne detectmobilebrowsers@0.1.1 +96 info /usr/local/lib/node_modules/detectmobilebrowsers unbuild +97 verbose tar unpack /root/.npm/detectmobilebrowsers/0.1.1/package.tgz +98 silly lockFile c2dc477c-ode-modules-detectmobilebrowsers tar:///usr/local/lib/node_modules/detectmobilebrowsers +99 verbose lock tar:///usr/local/lib/node_modules/detectmobilebrowsers /root/.npm/c2dc477c-ode-modules-detectmobilebrowsers.lock +100 silly lockFile d7ee75a8-mobilebrowsers-0-1-1-package-tgz tar:///root/.npm/detectmobilebrowsers/0.1.1/package.tgz +101 verbose lock tar:///root/.npm/detectmobilebrowsers/0.1.1/package.tgz /root/.npm/d7ee75a8-mobilebrowsers-0-1-1-package-tgz.lock +102 silly gunzTarPerm modes [ '755', '644' ] +103 silly gunzTarPerm extractEntry package.json +104 silly gunzTarPerm extractEntry .npmignore +105 silly gunzTarPerm extractEntry README.md +106 silly gunzTarPerm extractEntry Cakefile +107 silly gunzTarPerm extractEntry lib/detectmobilebrowsers.js +108 silly gunzTarPerm extractEntry src/detectmobilebrowsers.coffee +109 silly gunzTarPerm extractEntry test/detect.coffee +110 silly lockFile c2dc477c-ode-modules-detectmobilebrowsers tar:///usr/local/lib/node_modules/detectmobilebrowsers +111 silly lockFile c2dc477c-ode-modules-detectmobilebrowsers tar:///usr/local/lib/node_modules/detectmobilebrowsers +112 silly lockFile d7ee75a8-mobilebrowsers-0-1-1-package-tgz tar:///root/.npm/detectmobilebrowsers/0.1.1/package.tgz +113 silly lockFile d7ee75a8-mobilebrowsers-0-1-1-package-tgz tar:///root/.npm/detectmobilebrowsers/0.1.1/package.tgz +114 info preinstall detectmobilebrowsers@0.1.1 +115 verbose unsafe-perm in lifecycle false +116 info detectmobilebrowsers@0.1.1 Failed to exec preinstall script +117 info /usr/local/lib/node_modules/detectmobilebrowsers unbuild +118 info preuninstall detectmobilebrowsers@0.1.1 +119 info uninstall detectmobilebrowsers@0.1.1 +120 verbose true,/usr/local/lib/node_modules,/usr/local/lib/node_modules unbuild detectmobilebrowsers@0.1.1 +121 info postuninstall detectmobilebrowsers@0.1.1 +122 error detectmobilebrowsers@0.1.1 preinstall: `cake clean` +122 error Exit status 127 +123 error Failed at the detectmobilebrowsers@0.1.1 preinstall script. +123 error This is most likely a problem with the detectmobilebrowsers package, +123 error not with npm itself. +123 error Tell the author that this fails on your system: +123 error cake clean +123 error You can get their info via: +123 error npm owner ls detectmobilebrowsers +123 error There is likely additional logging output above. +124 error System Linux 3.2.0-4-686-pae +125 error command "/usr/local/bin/node" "/usr/local/bin/npm" "install" "detectmobilebrowsers" "-g" +126 error cwd /home/deck/dinx60/home/github/full_stack +127 error node -v v0.11.11 +128 error npm -v 1.3.25 +129 error code ELIFECYCLE +130 verbose exit [ 1, true ] diff --git a/package.json b/package.json index e64af87..d7b9f00 100644 --- a/package.json +++ b/package.json @@ -4,7 +4,8 @@ "private" : true, "version": "0.0.1", "dependencies": { - "express": "3.x" + "express": "3.x", + "detectmobilebrowsers":"*" }, "main" : "app" } \ No newline at end of file From 288be86d975147e4842f31303725494cea0cfceb Mon Sep 17 00:00:00 2001 From: deck Date: Sun, 15 Jun 2014 22:12:21 +0300 Subject: [PATCH 04/19] up --- SPA/desktop.html | 46 ++++ SPA/flat-ui.css | 573 +++++++++++++++++++++++++++++++++++++++++++++++ SPA/script.js | 6 +- app.js | 4 +- package.json | 3 +- 5 files changed, 625 insertions(+), 7 deletions(-) create mode 100644 SPA/desktop.html create mode 100644 SPA/flat-ui.css diff --git a/SPA/desktop.html b/SPA/desktop.html new file mode 100644 index 0000000..147d6a7 --- /dev/null +++ b/SPA/desktop.html @@ -0,0 +1,46 @@ + + + + + + + + + + + + + + + + + + + + + +
+ + + +
+ +
+
+
+ + + + \ No newline at end of file diff --git a/SPA/flat-ui.css b/SPA/flat-ui.css new file mode 100644 index 0000000..59e524c --- /dev/null +++ b/SPA/flat-ui.css @@ -0,0 +1,573 @@ +* { + box-sizing: border-box; +} + +img { + max-width: 100%; + height: auto; + vertical-align: sub; +} + +a { + text-decoration: none; + color: rgba(105, 105, 105, 0.88); + transition: color .3s ease; +} +a:hover { + color: #fc6e51; +} + +body { + font-family: 'Open Sans', sans-serif; + background: #f9f9f9; +} + +.flexslider { + border: none; + box-shadow: none; +} + +.flex-direction-nav a { + background: url(http://flexslider.woothemes.com/images/bg_direction_nav.png) no-repeat 0 0; + width: 30px; + height: 30px; + margin: -20px 0 0; + display: block; + position: absolute; + top: 50%; + cursor: pointer; + text-indent: -9999px; + opacity: 0; + -webkit-transition: all .3s ease; +} +.flex-direction-nav a:before { + content: ''; +} + +.flex-direction-nav .flex-next { + background-position: 100% 0; + right: -36px; + text-align: left; +} +.flex-direction-nav .flex-next:before { + content: ''; +} + +.heading h3 { + font-weight: 300; + color: #888888; +} + +.nav ul { + margin: 0; + padding: 0; +} +.nav li { + list-style: none; + margin: 0; +} + +.btn-navbar { + margin-top: 10px; + margin-bottom: 10px; +} +.btn-navbar li { + float: left; + margin: 0 5px; +} +.btn-navbar li:first-child { + margin-left: 0; +} + +.btn { + display: inline-block; + padding: 6px 14px; + background: #f2f2f2; + border-radius: 3px; + font-size: 0.8125em; + color: #b9bcbc; + transition: background .3s ease, color .3s ease; +} +.btn:hover { + background: #e5e5e5; + color: #929797; +} +.btn.btn-primary { + background: #a1d36e; + color: #fff; +} +.btn.btn-primary:hover, .btn.btn-primary.active { + background: #94cd5a; +} +.btn.btn-secondary { + background: #6ad1dd; + color: #fff; +} +.btn.btn-secondary:hover, .btn.btn-secondary.active { + background: #55cbd8; +} +.btn.btn-tertiary { + background: #fc6e51; + color: #fff; +} +.btn.btn-tertiary:hover, .btn.btn-tertiary.active { + background: #fc5938; +} +.btn.btn-quaternary { + background: #48cfad; + color: #fff; +} +.btn.btn-quaternary:hover, .btn.btn-quaternary.active { + background: #35c9a4; +} +.btn.btn-white { + background: #fff; +} +.btn.btn-white:hover { + background: #fafafa; +} +.btn.btn-grey { + background: #dddddd; +} +.btn.btn-grey:hover { + background: #cccccc; +} +.btn.btn-large { + padding: 12px 28px; +} +.btn.btn-caps { + text-transform: uppercase; +} +.btn.btn-block { + display: block; + width: 100%; + text-align: center; +} + +.btn-group { + position: relative; + display: inline-block; + margin: 10px 0; +} +.btn-group:before { + content: attr(data-grouptype); + color: #999; + display: block; + font-size: 0.8125em; + width: 19px; + height: 19px; + padding: 5px; + border-radius: 50%; + background: #fff; + position: absolute; + left: 50%; + top: 6px; + margin-left: -18px; +} +.btn-group a + a { + margin-left: 5px; +} + +.btn-navbar .btn { + font-size: 0.6875em; +} +.btn-navbar .active { + background: #6ad1dd; + color: #fff; +} +.btn-navbar .active:hover { + background: #55cbd8; +} + +.post { + font-family: 'Source Sans Pro', sans-serif; + box-shadow: 0 2px 0 rgba(204, 204, 204, 0.15); + margin-bottom: 20px; +} +.post .post-image { + display: block; +} +.post .icon-attachment { + color: #fff; +} +.post .details { + position: relative; + background: #fff; + text-align: center; + padding: 0 10px 10px; +} +.post .details h2 { + font-size: 0.90625em; + font-weight: 600; + color: #696969; + margin: 0; + padding: 5px 0; +} +.post .details p { + font-size: 0.8125em; + color: #aaaaaa; + margin: 0 0 5px; + padding: 0; +} +.post .details .intents { + text-align: right; + position: absolute; + top: 10px; + right: 10px; + font-size: 0.6875em; + color: #aaaaaa; + line-height: 14px; +} +.post .details .intents [class*="icon-"] { + font-size: 14px; +} +.post .details .intents .count { + line-height: 14px; + display: inline-block; + position: relative; + top: -3px; + margin: 0 5px; +} +.post .details .intents .icon-star { + color: #fc6e51; +} +.post .actions { + height: 20px; +} +.post .actions [class*="icon-"] { + font-size: 18px; + font-weight: normal; +} +.post .actions .btn-round { + position: relative; + border-radius: 50%; + padding: 10px 0; + width: 38px; + height: 38px; + top: -19px; + text-align: center; +} +.post.post-blog .details { + font-family: 'Open Sans', sans-serif; + padding: 10px 20px; + text-align: left; +} +.post.post-blog .details h2 { + font-size: 1.375em; + font-weight: 300; +} +.post.post-blog .details strong { + color: #888888; +} +.post.post-product .details { + text-align: left; + padding: 0 20px 20px; +} +.post.post-product .product-actions { + margin: 20px 0 0; +} +.post.post-product .download-count { + margin: 0 20px; +} + +.slider img { + border-radius: 3px; +} + +.widget { + font-family: 'Source Sans Pro', sans-serif; + box-shadow: 0 2px 0 rgba(204, 204, 204, 0.15); + margin-bottom: 20px; + border-radius: 0 0 3px 3px; + background: #fff; + position: relative; +} +.widget .header { + height: 100px; + border-radius: 3px 3px 0 0; + font-size: 1.25em; + font-weight: 600; + color: #fff; + line-height: 100px; + padding: 0 20px; + overflow: hidden; + position: relative; +} +.widget .header h2 { + margin: 0; +} +.widget .header h3 { + font-size: 0.6875em; + text-transform: uppercase; + margin: 0; + line-height: 100px; + text-align: center; + font-weight: 300; +} +.widget .header.header-tertiary { + background: #fc6e51; +} +.widget .header.header-quaternary { + background: #48cfad; +} +.widget .header.header-twitter { + background: #55acee; +} +.widget .header .background-icon [class*="icon-"] { + color: rgba(0, 0, 0, 0.05); + position: absolute; + top: -20px; + left: -40px; + font-size: 7.5em; +} +.widget .actions { + height: 20px; + text-align: center; +} +.widget .actions [class*="icon-"] { + font-size: 18px; + font-weight: normal; +} +.widget .actions .btn-round { + position: relative; + border-radius: 50%; + padding: 10px 0; + width: 38px; + height: 38px; + top: -19px; + text-align: center; +} +.widget .actions .btn-twitter { + background: #55acee; + color: #fff; +} +.widget .actions .btn-twitter:hover { + background: #3ea1ec; +} + +.weather .weather-icon { + position: absolute; + right: 20px; + top: 35px; + font-size: 1.25em; + line-height: 1em; +} +.weather .weather-icon-shadow { + position: absolute; + color: rgba(0, 0, 0, 0.05); + font-size: 6.25em; + top: -20px; + right: -20px; + -webkit-transform: rotate(-20deg); +} +.weather ul { + margin: 0; + padding: 0; + list-style: none; +} +.weather .day { + padding: 20px 30px; + border-bottom: 1px solid #f2f2f2; + color: #888; + font-family: 'Source Sans Pro', sans-serif; +} +.weather .day:last-child { + border-bottom: none; +} +.weather .image { + display: block; + float: left; + margin-right: 10px; +} +.weather .day-title { + text-transform: uppercase; + color: #555; + font-weight: 600; +} +.weather .day-icon { + line-height: 50px; + color: #aaaaaa; + font-size: 1.25em; +} + +.twitter ul { + margin: 0; + padding: 0; + list-style: none; +} +.twitter li { + border-bottom: 1px solid #f2f2f2; + padding: 20px 30px; +} +.twitter li:last-child { + border-bottom: none; +} +.twitter .avatar { + margin-right: 10px; +} +.twitter .avatar img { + border-radius: 50%; +} +.twitter .message { + display: inline-block; + margin-top: 12px; + font-size: 0.8125em; + color: #999999; +} +.twitter .message strong { + color: #555555; +} + +.storage .meta { + text-align: right; + text-transform: uppercase; + font-size: 0.875em; + font-weight: 300; + color: #888888; + padding: 10px 20px 20px; +} +.storage ul { + list-style: none; + margin: 0; + padding: 0; +} +.storage li { + padding: 20px 30px 20px 20px; + border-bottom: 1px solid #f2f2f2; + color: #999999; +} +.storage li:last-child { + border-bottom: none; +} +.storage li:before { + content: ''; + width: 20px; + height: 20px; + background: #f2f2f2; + border-radius: 50%; + display: inline-block; + position: relative; + top: 5px; + margin-right: 10px; +} +.storage li.active { + color: #555555; +} +.storage li.active:before { + content: '\e60c'; + font-family: icomoon; + background: #48cfad; + color: #fff; + box-sizing: border-box; + padding: 2px; +} + +.tags { + margin: 10px 0; +} + +.social { + margin-bottom: 10px; +} +.social [class*="icon-"] { + margin-left: 10px; + display: inline-block; +} +.social .btn { + color: #fff; +} +.social .btn-facebook { + background: #3b5998; + color: #fff; +} +.social .btn-facebook:hover, .social .btn-facebook.active { + background: #344e86; +} +.social .btn-twitter { + background: #55acee; + color: #fff; +} +.social .btn-twitter:hover, .social .btn-twitter.active { + background: #3ea1ec; +} +.social .btn-dribbble { + background: #ea4c89; + color: #fff; +} +.social .btn-dribbble:hover, .social .btn-dribbble.active { + background: #e7357a; +} + +.feedback .details { + padding: 20px; + text-align: left; +} +.feedback .details p { + font-size: 0.875em; +} +.feedback .details .image { + float: left; + margin-right: 10px; +} +.feedback .details .meta { + text-align: right; + color: #cccccc; + font-size: 1.25em; +} +.feedback .details .meta .icon-star { + color: #fecd5f; +} + +.alert { + background: #FCF8E3; + padding: 15px 0 15px 15px; + margin-bottom: 10px; + font-size: 0.8125em; + color: #888; + border-radius: 3px; + position: relative; +} +.alert .icon-checkmark, .alert .icon-exclamation { + display: inline-block; + margin-right: 10px; +} +.alert .close { + background: rgba(0, 0, 0, 0.1); + display: block; + position: absolute; + right: 0; + top: 0; + bottom: 0; + border-radius: 0 3px 3px 0; + padding: 10px 30px; +} +.alert .close [class*="icon-"] { + font-size: 1.875em; + color: #fff; +} +.alert.alert-success { + background: #a1d36e; + color: #fff; +} +.alert.alert-info { + background: #6ad1dd; + color: #fff; +} + +.verified:before { + content: '\e60c'; + font-family: icomoon; + width: 20px; + height: 20px; + border-radius: 50%; + display: inline-block; + margin-left: 10px; + background: #a1d36e; + color: #fff; + box-sizing: border-box; + padding: 3px; +} + +footer { + height: 100px; +} diff --git a/SPA/script.js b/SPA/script.js index 9a06ff1..e88ea1c 100644 --- a/SPA/script.js +++ b/SPA/script.js @@ -27,7 +27,7 @@ // create the controller and inject Angular's $scope booksApp.controller('mainController', function($scope, $http) { // create a message to display in our view - $http({method: 'GET', url: 'http://localhost:3412/rest'}). + $http({method: 'GET', url: 'http://188.27.191.168:8003/rest'}). success(function(data, status, headers, config) { $scope.messages = data; @@ -39,7 +39,7 @@ }); booksApp.controller('aboutController', function($scope,$http,$routeParams) { - $http({method: 'GET', url: 'http://localhost:3412/rest/'+$routeParams.restId}). + $http({method: 'GET', url: 'http://188.27.191.168:8003/rest/'+$routeParams.restId}). success(function(data, status, headers, config) { $scope.message = data; @@ -51,7 +51,7 @@ }); booksApp.controller('contactController', function($scope,$http) { - $http({method: 'GET', url: 'http://localhost:3412/rest/1'}). + $http({method: 'GET', url: 'http://188.27.191.168:8003/rest/1'}). success(function(data, status, headers, config) { $scope.messages = data; diff --git a/app.js b/app.js index a4c40fd..0c0286a 100644 --- a/app.js +++ b/app.js @@ -19,7 +19,7 @@ app.use(express.bodyParser()); app.get('/', checkForMobile, function(req,res) { - res.send('desktop edition'); + res.sendfile('SPA/desktop.html'); console.log(':)'); }); @@ -43,7 +43,7 @@ app.get('/rest/:id', function(req, res) { res.json(q); }); -app.listen(process.env.PORT || 3412); +app.listen(process.env.PORT || 8003); // returns true if the caller is a mobile phone (not tablet) diff --git a/package.json b/package.json index d7b9f00..e64af87 100644 --- a/package.json +++ b/package.json @@ -4,8 +4,7 @@ "private" : true, "version": "0.0.1", "dependencies": { - "express": "3.x", - "detectmobilebrowsers":"*" + "express": "3.x" }, "main" : "app" } \ No newline at end of file From f15dda5555a0a39a88468129c7e7a84ff3ba6f3f Mon Sep 17 00:00:00 2001 From: deck Date: Sun, 15 Jun 2014 22:15:41 +0300 Subject: [PATCH 05/19] up --- SPA/script.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/SPA/script.js b/SPA/script.js index e88ea1c..afb5cca 100644 --- a/SPA/script.js +++ b/SPA/script.js @@ -27,7 +27,7 @@ // create the controller and inject Angular's $scope booksApp.controller('mainController', function($scope, $http) { // create a message to display in our view - $http({method: 'GET', url: 'http://188.27.191.168:8003/rest'}). + $http({method: 'GET', url: 'http://organicorange.ro:8003/rest'}). success(function(data, status, headers, config) { $scope.messages = data; @@ -39,7 +39,7 @@ }); booksApp.controller('aboutController', function($scope,$http,$routeParams) { - $http({method: 'GET', url: 'http://188.27.191.168:8003/rest/'+$routeParams.restId}). + $http({method: 'GET', url: 'http://organicorange.ro:8003/rest/'+$routeParams.restId}). success(function(data, status, headers, config) { $scope.message = data; @@ -51,7 +51,7 @@ }); booksApp.controller('contactController', function($scope,$http) { - $http({method: 'GET', url: 'http://188.27.191.168:8003/rest/1'}). + $http({method: 'GET', url: 'http://organicorange.ro:8003/rest/1'}). success(function(data, status, headers, config) { $scope.messages = data; From 5af417a37fa2d9eee881a0615f6a26dec7816176 Mon Sep 17 00:00:00 2001 From: deck Date: Tue, 17 Jun 2014 11:15:04 +0300 Subject: [PATCH 06/19] some style --- SPA/desktop.html | 1 + SPA/flat-ui.css | 584 ++++---------------------------------------- SPA/pages/home.html | 16 +- SPA/script.js | 6 +- 4 files changed, 59 insertions(+), 548 deletions(-) diff --git a/SPA/desktop.html b/SPA/desktop.html index 147d6a7..f51fb74 100644 --- a/SPA/desktop.html +++ b/SPA/desktop.html @@ -7,6 +7,7 @@ + diff --git a/SPA/flat-ui.css b/SPA/flat-ui.css index 59e524c..0220fd5 100644 --- a/SPA/flat-ui.css +++ b/SPA/flat-ui.css @@ -1,573 +1,75 @@ -* { - box-sizing: border-box; -} - -img { - max-width: 100%; - height: auto; - vertical-align: sub; -} - -a { - text-decoration: none; - color: rgba(105, 105, 105, 0.88); - transition: color .3s ease; -} -a:hover { - color: #fc6e51; -} - -body { - font-family: 'Open Sans', sans-serif; - background: #f9f9f9; -} - -.flexslider { - border: none; - box-shadow: none; -} - -.flex-direction-nav a { - background: url(http://flexslider.woothemes.com/images/bg_direction_nav.png) no-repeat 0 0; - width: 30px; - height: 30px; - margin: -20px 0 0; - display: block; - position: absolute; - top: 50%; - cursor: pointer; - text-indent: -9999px; - opacity: 0; - -webkit-transition: all .3s ease; -} -.flex-direction-nav a:before { - content: ''; -} - -.flex-direction-nav .flex-next { - background-position: 100% 0; - right: -36px; - text-align: left; -} -.flex-direction-nav .flex-next:before { - content: ''; -} - -.heading h3 { - font-weight: 300; - color: #888888; -} +/* app css stylesheet */ -.nav ul { - margin: 0; - padding: 0; -} -.nav li { +.phones { list-style: none; - margin: 0; + padding:0; } -.btn-navbar { - margin-top: 10px; - margin-bottom: 10px; -} -.btn-navbar li { +.thumb { float: left; - margin: 0 5px; -} -.btn-navbar li:first-child { - margin-left: 0; + margin: -0.5em 1em 1.5em 0; +/* padding-bottom: 1em;*/ + width: 100px; } -.btn { - display: inline-block; - padding: 6px 14px; - background: #f2f2f2; - border-radius: 3px; - font-size: 0.8125em; - color: #b9bcbc; - transition: background .3s ease, color .3s ease; -} -.btn:hover { - background: #e5e5e5; - color: #929797; -} -.btn.btn-primary { - background: #a1d36e; - color: #fff; -} -.btn.btn-primary:hover, .btn.btn-primary.active { - background: #94cd5a; -} -.btn.btn-secondary { - background: #6ad1dd; - color: #fff; -} -.btn.btn-secondary:hover, .btn.btn-secondary.active { - background: #55cbd8; -} -.btn.btn-tertiary { - background: #fc6e51; - color: #fff; -} -.btn.btn-tertiary:hover, .btn.btn-tertiary.active { - background: #fc5938; -} -.btn.btn-quaternary { - background: #48cfad; - color: #fff; -} -.btn.btn-quaternary:hover, .btn.btn-quaternary.active { - background: #35c9a4; -} -.btn.btn-white { - background: #fff; -} -.btn.btn-white:hover { - background: #fafafa; -} -.btn.btn-grey { - background: #dddddd; -} -.btn.btn-grey:hover { - background: #cccccc; -} -.btn.btn-large { - padding: 12px 28px; -} -.btn.btn-caps { - text-transform: uppercase; -} -.btn.btn-block { - display: block; - width: 100%; - text-align: center; -} - -.btn-group { - position: relative; - display: inline-block; - margin: 10px 0; -} -.btn-group:before { - content: attr(data-grouptype); - color: #999; - display: block; - font-size: 0.8125em; - width: 19px; - height: 19px; - padding: 5px; - border-radius: 50%; - background: #fff; - position: absolute; - left: 50%; - top: 6px; - margin-left: -18px; -} -.btn-group a + a { - margin-left: 5px; +.phones li { + clear: both; + height: 115px; + padding-top: 15px; } -.btn-navbar .btn { - font-size: 0.6875em; -} -.btn-navbar .active { - background: #6ad1dd; - color: #fff; -} -.btn-navbar .active:hover { - background: #55cbd8; +/** Detail View **/ +img.phone { + float: left; + border: 1px solid black; + margin-right: 3em; + margin-bottom: 2em; + background-color: white; + padding: 2em; + height: 400px; + width: 400px; } -.post { - font-family: 'Source Sans Pro', sans-serif; - box-shadow: 0 2px 0 rgba(204, 204, 204, 0.15); - margin-bottom: 20px; -} -.post .post-image { - display: block; -} -.post .icon-attachment { - color: #fff; -} -.post .details { - position: relative; - background: #fff; - text-align: center; - padding: 0 10px 10px; -} -.post .details h2 { - font-size: 0.90625em; - font-weight: 600; - color: #696969; +ul.phone-thumbs { margin: 0; - padding: 5px 0; -} -.post .details p { - font-size: 0.8125em; - color: #aaaaaa; - margin: 0 0 5px; - padding: 0; -} -.post .details .intents { - text-align: right; - position: absolute; - top: 10px; - right: 10px; - font-size: 0.6875em; - color: #aaaaaa; - line-height: 14px; -} -.post .details .intents [class*="icon-"] { - font-size: 14px; -} -.post .details .intents .count { - line-height: 14px; - display: inline-block; - position: relative; - top: -3px; - margin: 0 5px; -} -.post .details .intents .icon-star { - color: #fc6e51; -} -.post .actions { - height: 20px; -} -.post .actions [class*="icon-"] { - font-size: 18px; - font-weight: normal; -} -.post .actions .btn-round { - position: relative; - border-radius: 50%; - padding: 10px 0; - width: 38px; - height: 38px; - top: -19px; - text-align: center; -} -.post.post-blog .details { - font-family: 'Open Sans', sans-serif; - padding: 10px 20px; - text-align: left; -} -.post.post-blog .details h2 { - font-size: 1.375em; - font-weight: 300; -} -.post.post-blog .details strong { - color: #888888; -} -.post.post-product .details { - text-align: left; - padding: 0 20px 20px; -} -.post.post-product .product-actions { - margin: 20px 0 0; -} -.post.post-product .download-count { - margin: 0 20px; + list-style: none; } -.slider img { - border-radius: 3px; +ul.phone-thumbs li { + border: 1px solid black; + display: inline-block; + margin: 1em; + background-color: white; } -.widget { - font-family: 'Source Sans Pro', sans-serif; - box-shadow: 0 2px 0 rgba(204, 204, 204, 0.15); - margin-bottom: 20px; - border-radius: 0 0 3px 3px; - background: #fff; - position: relative; -} -.widget .header { +ul.phone-thumbs img { height: 100px; - border-radius: 3px 3px 0 0; - font-size: 1.25em; - font-weight: 600; - color: #fff; - line-height: 100px; - padding: 0 20px; - overflow: hidden; - position: relative; -} -.widget .header h2 { - margin: 0; -} -.widget .header h3 { - font-size: 0.6875em; - text-transform: uppercase; - margin: 0; - line-height: 100px; - text-align: center; - font-weight: 300; -} -.widget .header.header-tertiary { - background: #fc6e51; -} -.widget .header.header-quaternary { - background: #48cfad; -} -.widget .header.header-twitter { - background: #55acee; -} -.widget .header .background-icon [class*="icon-"] { - color: rgba(0, 0, 0, 0.05); - position: absolute; - top: -20px; - left: -40px; - font-size: 7.5em; -} -.widget .actions { - height: 20px; - text-align: center; -} -.widget .actions [class*="icon-"] { - font-size: 18px; - font-weight: normal; -} -.widget .actions .btn-round { - position: relative; - border-radius: 50%; - padding: 10px 0; - width: 38px; - height: 38px; - top: -19px; - text-align: center; -} -.widget .actions .btn-twitter { - background: #55acee; - color: #fff; -} -.widget .actions .btn-twitter:hover { - background: #3ea1ec; + width: 100px; + padding: 1em; } -.weather .weather-icon { - position: absolute; - right: 20px; - top: 35px; - font-size: 1.25em; - line-height: 1em; -} -.weather .weather-icon-shadow { - position: absolute; - color: rgba(0, 0, 0, 0.05); - font-size: 6.25em; - top: -20px; - right: -20px; - -webkit-transform: rotate(-20deg); -} -.weather ul { +ul.specs { + clear: both; margin: 0; padding: 0; list-style: none; } -.weather .day { - padding: 20px 30px; - border-bottom: 1px solid #f2f2f2; - color: #888; - font-family: 'Source Sans Pro', sans-serif; -} -.weather .day:last-child { - border-bottom: none; -} -.weather .image { - display: block; - float: left; - margin-right: 10px; -} -.weather .day-title { - text-transform: uppercase; - color: #555; - font-weight: 600; -} -.weather .day-icon { - line-height: 50px; - color: #aaaaaa; - font-size: 1.25em; -} -.twitter ul { - margin: 0; - padding: 0; - list-style: none; -} -.twitter li { - border-bottom: 1px solid #f2f2f2; - padding: 20px 30px; -} -.twitter li:last-child { - border-bottom: none; -} -.twitter .avatar { - margin-right: 10px; -} -.twitter .avatar img { - border-radius: 50%; -} -.twitter .message { +ul.specs > li{ display: inline-block; - margin-top: 12px; - font-size: 0.8125em; - color: #999999; -} -.twitter .message strong { - color: #555555; + width: 200px; + vertical-align: top; } -.storage .meta { - text-align: right; - text-transform: uppercase; - font-size: 0.875em; - font-weight: 300; - color: #888888; - padding: 10px 20px 20px; -} -.storage ul { - list-style: none; - margin: 0; - padding: 0; -} -.storage li { - padding: 20px 30px 20px 20px; - border-bottom: 1px solid #f2f2f2; - color: #999999; -} -.storage li:last-child { - border-bottom: none; -} -.storage li:before { - content: ''; - width: 20px; - height: 20px; - background: #f2f2f2; - border-radius: 50%; - display: inline-block; - position: relative; - top: 5px; - margin-right: 10px; -} -.storage li.active { - color: #555555; -} -.storage li.active:before { - content: '\e60c'; - font-family: icomoon; - background: #48cfad; - color: #fff; - box-sizing: border-box; - padding: 2px; +ul.specs > li > span{ + font-weight: bold; + font-size: 1.2em; } -.tags { - margin: 10px 0; -} - -.social { - margin-bottom: 10px; -} -.social [class*="icon-"] { - margin-left: 10px; - display: inline-block; -} -.social .btn { - color: #fff; -} -.social .btn-facebook { - background: #3b5998; - color: #fff; -} -.social .btn-facebook:hover, .social .btn-facebook.active { - background: #344e86; -} -.social .btn-twitter { - background: #55acee; - color: #fff; -} -.social .btn-twitter:hover, .social .btn-twitter.active { - background: #3ea1ec; -} -.social .btn-dribbble { - background: #ea4c89; - color: #fff; -} -.social .btn-dribbble:hover, .social .btn-dribbble.active { - background: #e7357a; +ul.specs dt { + font-weight: bold; } -.feedback .details { - padding: 20px; - text-align: left; -} -.feedback .details p { - font-size: 0.875em; -} -.feedback .details .image { - float: left; - margin-right: 10px; -} -.feedback .details .meta { - text-align: right; - color: #cccccc; - font-size: 1.25em; -} -.feedback .details .meta .icon-star { - color: #fecd5f; -} - -.alert { - background: #FCF8E3; - padding: 15px 0 15px 15px; - margin-bottom: 10px; - font-size: 0.8125em; - color: #888; - border-radius: 3px; - position: relative; -} -.alert .icon-checkmark, .alert .icon-exclamation { - display: inline-block; - margin-right: 10px; -} -.alert .close { - background: rgba(0, 0, 0, 0.1); - display: block; - position: absolute; - right: 0; - top: 0; - bottom: 0; - border-radius: 0 3px 3px 0; - padding: 10px 30px; -} -.alert .close [class*="icon-"] { - font-size: 1.875em; - color: #fff; -} -.alert.alert-success { - background: #a1d36e; - color: #fff; -} -.alert.alert-info { - background: #6ad1dd; - color: #fff; -} - -.verified:before { - content: '\e60c'; - font-family: icomoon; - width: 20px; - height: 20px; - border-radius: 50%; - display: inline-block; - margin-left: 10px; - background: #a1d36e; - color: #fff; - box-sizing: border-box; - padding: 3px; -} - -footer { - height: 100px; +h1 { + border-bottom: 1px solid gray; } diff --git a/SPA/pages/home.html b/SPA/pages/home.html index 806ac3c..cd3046c 100644 --- a/SPA/pages/home.html +++ b/SPA/pages/home.html @@ -1,4 +1,12 @@ -
- Home -
  • {{ message.name }}
    {{ message.author }},{{ message.city }}
    {{ message.phone }}
    • -
    \ No newline at end of file +
    + + + + +
    \ No newline at end of file diff --git a/SPA/script.js b/SPA/script.js index afb5cca..c718a64 100644 --- a/SPA/script.js +++ b/SPA/script.js @@ -27,7 +27,7 @@ // create the controller and inject Angular's $scope booksApp.controller('mainController', function($scope, $http) { // create a message to display in our view - $http({method: 'GET', url: 'http://organicorange.ro:8003/rest'}). + $http({method: 'GET', url: 'http://localhost:8003/rest'}). success(function(data, status, headers, config) { $scope.messages = data; @@ -39,7 +39,7 @@ }); booksApp.controller('aboutController', function($scope,$http,$routeParams) { - $http({method: 'GET', url: 'http://organicorange.ro:8003/rest/'+$routeParams.restId}). + $http({method: 'GET', url: 'http://localhost:8003/rest/'+$routeParams.restId}). success(function(data, status, headers, config) { $scope.message = data; @@ -51,7 +51,7 @@ }); booksApp.controller('contactController', function($scope,$http) { - $http({method: 'GET', url: 'http://organicorange.ro:8003/rest/1'}). + $http({method: 'GET', url: 'http://localhost:8003/rest/1'}). success(function(data, status, headers, config) { $scope.messages = data; From a424eb37bc1c37fc9687869200b1d889688b7d02 Mon Sep 17 00:00:00 2001 From: deck Date: Tue, 17 Jun 2014 15:08:51 +0300 Subject: [PATCH 07/19] styled --- SPA/desktop.html | 2 +- SPA/flat-ui.css | 8 +++-- SPA/pages/about.html | 2 ++ SPA/pages/home.html | 18 ++++++++--- app.js | 2 +- books.json | 74 ++++++++++++++++++++++++++++++++++++++++++++ 6 files changed, 97 insertions(+), 9 deletions(-) create mode 100644 books.json diff --git a/SPA/desktop.html b/SPA/desktop.html index f51fb74..9e3eaed 100644 --- a/SPA/desktop.html +++ b/SPA/desktop.html @@ -18,7 +18,7 @@ -
    @@ -65,9 +65,9 @@

    {{ message.name }}

    - -

    {{ message.author }}

    -

    {{ message.phone }}

    + +

    {{ message.auth_name }}

    +

    {{ message.auth_description }}

    diff --git a/app.js b/app.js index f062bea..0cda2ba 100644 --- a/app.js +++ b/app.js @@ -59,11 +59,13 @@ app.get('/rest/:id', function(req, res) { } var initial = obj[req.params.id]; - var q = obj[req.params.id].author; - var z = auth[q].description; - var c = auth[q].author; - initial.description = z; - initial.auth_name = c; + var int = obj[req.params.id].author; + var descr = auth[int].description; + var name = auth[int].author; + var img = auth[int].image; + initial.auth_description = descr; + initial.auth_name = name; + initial.auth_image = img; json = JSON.stringify(initial); res.send(json); }); diff --git a/authors.json b/authors.json index 30d64e5..a78e6cd 100644 --- a/authors.json +++ b/authors.json @@ -2,16 +2,19 @@ { "id": 0, "description": "description of author here. The Praga guy lived in the 19th century and so on", - "author": "Stanislav Grof" + "author": "Stanislav Grof", + "image": "http://news.nationalgeographic.com/news/2007/04/images/070412-square-nebula.jpg" }, { "id": 1, "description": "Jean Clemente is recognized by his books", - "author": "Jean Clemente" + "author": "Jean Clemente", + "image": "http://upload.wikimedia.org/wikipedia/commons/f/f7/Missing_square.gif" }, { "id": 2, "decription": "X Dorsay, despite the fact there are no translated books he is looking for translators", - "author": "X Dorsay" + "author": "X Dorsay", + "image": "http://mathworld.wolfram.com/images/eps-gif/MagicSquareDoublyEven_1000.gif" } ] \ No newline at end of file From e91327c67c3e6722d7e61e43d3fd441f64ddb09f Mon Sep 17 00:00:00 2001 From: deck Date: Sat, 19 Jul 2014 13:11:29 +0300 Subject: [PATCH 13/19] added some real books with --- SPA/flat-ui.css | 3 +-- SPA/pages/home.html | 2 +- app.js | 7 +++---- authors.json | 8 ++++---- books.json | 18 +++++++++--------- 5 files changed, 18 insertions(+), 20 deletions(-) diff --git a/SPA/flat-ui.css b/SPA/flat-ui.css index e6fe201..b9b79b1 100644 --- a/SPA/flat-ui.css +++ b/SPA/flat-ui.css @@ -12,8 +12,7 @@ .books li { clear: both; - height: 115px; - padding-top: 15px; + padding:10px; } .breadcrumb { diff --git a/SPA/pages/home.html b/SPA/pages/home.html index 3cf2db9..1bae79d 100644 --- a/SPA/pages/home.html +++ b/SPA/pages/home.html @@ -7,7 +7,7 @@
      -
    • +

    • {{ message.name }}

      By: {{ message.auth_name }} diff --git a/app.js b/app.js index 0cda2ba..7b7adcc 100644 --- a/app.js +++ b/app.js @@ -6,10 +6,6 @@ var fs = require('fs'), obj, auth -// Read the file and send to the callback -fs.readFile(__dirname + '/books.json', handleFile) -fs.readFile(__dirname + '/authors.json', authFile) - // Write the callback function function handleFile(err, data) { if (err) throw err @@ -29,6 +25,9 @@ app.use(express.bodyParser()); app.get('/', checkForMobile, function(req,res) { res.sendfile('SPA/desktop.html'); console.log(':)'); + // Read the file and send to the callback + fs.readFile(__dirname + '/books.json', handleFile) + fs.readFile(__dirname + '/authors.json', authFile) }); app.get('/rest', function(req, res) { diff --git a/authors.json b/authors.json index a78e6cd..3e711bc 100644 --- a/authors.json +++ b/authors.json @@ -1,14 +1,14 @@ [ { "id": 0, - "description": "description of author here. The Praga guy lived in the 19th century and so on", - "author": "Stanislav Grof", + "description": "Edward Morgan Forster OM, CH (1 January 1879 – 7 June 1970) was an English novelist, short story writer, essayist and librettist. He is known best for his ironic and well-plotted novels examining class difference and hypocrisy in early 20th-century British society. Forster's humanistic impulse toward understanding and sympathy may be aptly summed up in the epigraph to his 1910 novel Howards End: \"Only connect ... \". His 1908 novel, A Room with a View, is his most optimistic work, while A Passage to India (1924) brought him his greatest success.", + "author": "E.M.Forster", "image": "http://news.nationalgeographic.com/news/2007/04/images/070412-square-nebula.jpg" }, { "id": 1, - "description": "Jean Clemente is recognized by his books", - "author": "Jean Clemente", + "description": "Nicolas Bouvier (March 6, 1929, Lancy - February 17, 1998) was a 20th-century Swiss traveller, writer, icon painter and photographer.", + "author": "Nicolas Bouvier", "image": "http://upload.wikimedia.org/wikipedia/commons/f/f7/Missing_square.gif" }, { diff --git a/books.json b/books.json index 204c3a6..0e78f02 100644 --- a/books.json +++ b/books.json @@ -1,23 +1,23 @@ [ { "id": 0, - "name": "Book 1", + "name": "A passage to India", "author": 0, - "cover": "http://www.bethsteffel.com/images/SteffelPrintDesign_f06.gif", - "book_description": "The book description" + "cover": "http://www.sonlight.com/images/products/530-49-l.jpg", + "book_description": "A Passage to India (1924) is a novel by English author E. M. Forster set against the backdrop of the British Raj and the Indian independence movement in the 1920s. It was selected as one of the 100 great works of English literature by the Modern Library and won the 1924 James Tait Black Memorial Prize for fiction. Time magazine included the novel in its \"100 Best English-language Novels from 1923 to 2005\".[1] The novel is based on Forster's experiences in India. E.M. Forster borrowed the book's title from Walt Whitman's poem of the same name in Leaves of Grass." }, { "id": 1, - "name": "Book 2", + "name": "The Japanese Chronicles", "author": 1, - "cover": "http://www.bethsteffel.com/images/SteffelPrintDesign_f06.gif", - "book_description": "Second book description" + "cover": "http://d.gr-assets.com/books/1387732740l/971901.jpg", + "book_description": "Based on three decades of travel throughout Japan, collects the author's recollections and views on life in the Land of the Rising Sun." }, { "id": 2, - "name": "Book 3", + "name": "The Way of the World", "author": 1, - "cover": "http://www.bethsteffel.com/images/SteffelPrintDesign_f06.gif", - "book_description": "Third book description" + "cover": "http://assets.nybooks.com/media/img/books/9781590173220_jpg_200x450_q85.jpg", + "book_description": "it’s about a journey in the 1950s from Belgrade to India. They try to go to India in a tiny battered Fiat and it takes them several years, these friends, and it probably describes the attraction of travel better than any book I’ve ever read." } ] \ No newline at end of file From 4547b2ff0178dd7914f9196d219726b27a4052fa Mon Sep 17 00:00:00 2001 From: deck Date: Sat, 19 Jul 2014 13:39:51 +0300 Subject: [PATCH 14/19] added readme --- readme.md | 12 ++++++++++++ 1 file changed, 12 insertions(+) create mode 100644 readme.md diff --git a/readme.md b/readme.md new file mode 100644 index 0000000..4246d5a --- /dev/null +++ b/readme.md @@ -0,0 +1,12 @@ +A small mobile detector book list with search + +Angular + NodeJS + Ionic using REST + +### Installation + +`git clone` the repo +`cd` into the cloned repo and `npm install` +`npm install nodemon -g` +`nodemon app.js` + +In the `app.js` you will also find the mobile detector using HTTP header information, then routing to the specified file to ebgin with. \ No newline at end of file From 31b2239e7cdc36de61d6ff3310a5f1156563de45 Mon Sep 17 00:00:00 2001 From: deck Date: Sat, 19 Jul 2014 13:40:48 +0300 Subject: [PATCH 15/19] added readme --- readme.md | 3 +++ 1 file changed, 3 insertions(+) diff --git a/readme.md b/readme.md index 4246d5a..99ee31f 100644 --- a/readme.md +++ b/readme.md @@ -5,8 +5,11 @@ Angular + NodeJS + Ionic using REST ### Installation `git clone` the repo + `cd` into the cloned repo and `npm install` + `npm install nodemon -g` + `nodemon app.js` In the `app.js` you will also find the mobile detector using HTTP header information, then routing to the specified file to ebgin with. \ No newline at end of file From 22a73eb686ccc0858ea75fedcc16c142f3043637 Mon Sep 17 00:00:00 2001 From: deck Date: Sat, 19 Jul 2014 13:45:06 +0300 Subject: [PATCH 16/19] added readme --- readme.md | 2 ++ 1 file changed, 2 insertions(+) diff --git a/readme.md b/readme.md index 99ee31f..625c924 100644 --- a/readme.md +++ b/readme.md @@ -12,4 +12,6 @@ Angular + NodeJS + Ionic using REST `nodemon app.js` +now browse to [](http://localhost:8003 "localhost") and you should see the listing. + In the `app.js` you will also find the mobile detector using HTTP header information, then routing to the specified file to ebgin with. \ No newline at end of file From 4ee3798eb17fa8ed08d6c4ea6ebf1f288158b484 Mon Sep 17 00:00:00 2001 From: deck Date: Sat, 19 Jul 2014 13:46:17 +0300 Subject: [PATCH 17/19] added readme --- readme.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/readme.md b/readme.md index 625c924..9ea0242 100644 --- a/readme.md +++ b/readme.md @@ -12,6 +12,6 @@ Angular + NodeJS + Ionic using REST `nodemon app.js` -now browse to [](http://localhost:8003 "localhost") and you should see the listing. +now browse to [localhost:8003](http://localhost:8003 "localhost") and you should see the listing. In the `app.js` you will also find the mobile detector using HTTP header information, then routing to the specified file to ebgin with. \ No newline at end of file From f4af77164fa182c118bdabf5dee5193a8007446f Mon Sep 17 00:00:00 2001 From: deck Date: Sat, 19 Jul 2014 15:03:17 +0300 Subject: [PATCH 18/19] display deco --- SPA/pages/home.html | 2 +- app.js | 12 ++++++++++++ 2 files changed, 13 insertions(+), 1 deletion(-) diff --git a/SPA/pages/home.html b/SPA/pages/home.html index 1bae79d..dea167a 100644 --- a/SPA/pages/home.html +++ b/SPA/pages/home.html @@ -10,7 +10,7 @@

    • {{ message.name }}

      - By: {{ message.auth_name }} + By: {{ message.auth_name }} {{ message.books.length }} - {{ books }}

      Description: {{ message.book_description }}

    diff --git a/app.js b/app.js index 7b7adcc..48bf98d 100644 --- a/app.js +++ b/app.js @@ -32,6 +32,7 @@ app.get('/', checkForMobile, function(req,res) { app.get('/rest', function(req, res) { var scope = []; + var books = []; for(var i = 0; i < obj.length; i++) { var initial = obj[i]; var q = obj[i].author; @@ -39,6 +40,7 @@ for(var i = 0; i < obj.length; i++) { var c = auth[q].author; initial.auth_description = z; initial.auth_name = c; + initial.books = getCount(q); // json = JSON.stringify(initial); scope.push(initial); } @@ -96,4 +98,14 @@ function checkForMobile(req, res, next) { // if we didn't detect mobile, call the next method, which will eventually call the desktop route return next(); } +} + +function getCount(x) { + var count = []; + for (var i = 0; i < obj.length; i++) { + if (obj[i].author === x) { + count.push(obj[i].name); + } + } + return count; } \ No newline at end of file From a0ac720f5a16798dad53d757423eab9f700df300 Mon Sep 17 00:00:00 2001 From: deck Date: Mon, 21 Jul 2014 09:37:10 +0300 Subject: [PATCH 19/19] flat --- SPA/flat-ui.css | 50 +++++++++++++++++++++++++++++++++++++++++++++ SPA/pages/home.html | 1 + 2 files changed, 51 insertions(+) diff --git a/SPA/flat-ui.css b/SPA/flat-ui.css index b9b79b1..4b273fb 100644 --- a/SPA/flat-ui.css +++ b/SPA/flat-ui.css @@ -33,4 +33,54 @@ h3 { a:hover { text-decoration: none; +} + +.tooltip { + display: inline; + position: relative; +} + +.tooltip:hover { + color: #c00; + text-decoration: none; +} + +.tooltip:hover:after { + background: #111; + background: rgba(0,0,0,.8); + border-radius: .5em; + bottom: 1.35em; + color: #fff; + content: attr(title); + display: block; + left: 1em; + padding: .3em 1em; + position: absolute; + text-shadow: 0 1px 0 #000; + white-space: nowrap; + max-width:80%; + z-index: 98; +} + +.tooltip:hover:before { + border: solid; + border-color: #111 transparent; + border-color: rgba(0,0,0,.8) transparent; + border-width: .4em .4em 0 .4em; + bottom: 1em; + content: ""; + display: block; + left: 2em; + max-width:80%; + position: absolute; + z-index: 99; +} + +/* this part styles only a paragraph */ + +p { + color: #333; + font: normal .875em "Lucida Grande",Arial,sans-serif; + margin: 1em auto; + width: 75%; } \ No newline at end of file diff --git a/SPA/pages/home.html b/SPA/pages/home.html index dea167a..a88779f 100644 --- a/SPA/pages/home.html +++ b/SPA/pages/home.html @@ -12,6 +12,7 @@

    {{ message.name }}

    By: {{ message.auth_name }} {{ message.books.length }} - {{ books }}

    Description: {{ message.book_description }}

    + pellentesque