From 9f2b982784e180c06106d22138fecad2e147d44d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?J=C3=B6rg=20Thalheim?= Date: Wed, 20 Feb 2013 23:18:23 +0100 Subject: [PATCH] integrate inbox, qrcode into home --- Gemfile | 1 + Gemfile.lock | 13 + Rakefile | 2 +- config.rb | 1 + source/_footer.slim | 6 +- source/albert/index.html | 7 +- source/images/spritemap.png | Bin 0 -> 16954 bytes source/images/spritemap@2x.png | Bin 0 -> 41065 bytes source/inbox/DropboxUploader.php | 164 ++++ source/inbox/index.html.slim | 6 + source/inbox/upload.php | 62 ++ source/index.html.slim | 12 +- source/jabber/index.html.slim | 25 + source/javascripts/dropzone.js | 892 +++++++++++++++++++++ source/{qr => javascripts}/html5-qrcode.js | 0 source/javascripts/jquery-1.9.1.min.js | 5 + source/{qr => javascripts}/qrcode.js | 0 source/joerg/index.slim | 2 +- source/qr/index.html | 45 -- source/qr/index.html.slim | 24 + source/stylesheets/dropzone.css | 351 ++++++++ source/stylesheets/site.css.scss | 17 + 22 files changed, 1576 insertions(+), 59 deletions(-) create mode 100644 source/images/spritemap.png create mode 100644 source/images/spritemap@2x.png create mode 100644 source/inbox/DropboxUploader.php create mode 100644 source/inbox/index.html.slim create mode 100644 source/inbox/upload.php create mode 100644 source/jabber/index.html.slim create mode 100644 source/javascripts/dropzone.js rename source/{qr => javascripts}/html5-qrcode.js (100%) create mode 100644 source/javascripts/jquery-1.9.1.min.js rename source/{qr => javascripts}/qrcode.js (100%) delete mode 100644 source/qr/index.html create mode 100644 source/qr/index.html.slim create mode 100644 source/stylesheets/dropzone.css diff --git a/Gemfile b/Gemfile index f0cf27d..1b48475 100644 --- a/Gemfile +++ b/Gemfile @@ -3,6 +3,7 @@ source "http://rubygems.org" gem "compass" gem "middleman" gem "middleman-smusher" +gem "middleman-livereload" gem "compass-holmes" gem 'oily_png' diff --git a/Gemfile.lock b/Gemfile.lock index 359bb1e..9040e7c 100644 --- a/Gemfile.lock +++ b/Gemfile.lock @@ -15,12 +15,17 @@ GEM sass (~> 3.1) compass-holmes (0.1.1) compass (>= 0.11) + em-websocket (0.4.0) + eventmachine (>= 0.12.9) + http_parser.rb (~> 0.5.3) + eventmachine (1.0.0) execjs (1.4.0) multi_json (~> 1.0) ffi (1.3.1) fssm (0.2.10) haml (3.1.7) hike (1.2.1) + http_parser.rb (0.5.3) http_router (0.10.2) rack (>= 1.0.0) url_mount (~> 0.2.1) @@ -44,6 +49,11 @@ GEM rb-inotify (~> 0.8.8) thor (~> 0.15.4) tilt (~> 1.3.1) + middleman-livereload (3.0.1) + em-websocket (>= 0.2.0) + middleman-core (~> 3.0.2) + multi_json (~> 1.0) + rack-livereload middleman-more (3.0.11) coffee-script (~> 2.2.0) coffee-script-source (~> 1.3.3) @@ -76,6 +86,8 @@ GEM i18n (~> 0.6) padrino-core (= 0.10.7) rack (1.4.5) + rack-livereload (0.3.11) + rack rack-protection (1.3.2) rack rack-test (0.6.2) @@ -124,6 +136,7 @@ DEPENDENCIES compass compass-holmes middleman + middleman-livereload middleman-smusher oily_png rake diff --git a/Rakefile b/Rakefile index 61c3325..cd960cf 100644 --- a/Rakefile +++ b/Rakefile @@ -18,7 +18,7 @@ task :deploy do exclude = "--exclude-from '#{File.expand_path('./rsync-exclude')}'" end puts "## Deploying website via Rsync" - ok_failed system("rsync -avze 'ssh -p #{ssh_port}' #{exclude} #{"--delete" unless rsync_delete == false} \"#{public_dir}/\" \"#{ssh_user}:#{document_root}\"") + system("rsync -avze 'ssh -p #{ssh_port}' #{exclude} #{"--delete" unless rsync_delete == false} \"#{public_dir}/\" \"#{ssh_user}:#{document_root}\"") end desc "Generate website and deploy" diff --git a/config.rb b/config.rb index 0826c18..4f05a55 100644 --- a/config.rb +++ b/config.rb @@ -96,6 +96,7 @@ configure :build do activate :gzip + activate :livereload # Or use a different image path # set :http_path, "/Content/images/" end diff --git a/source/_footer.slim b/source/_footer.slim index 062dd7d..3a3ff6a 100644 --- a/source/_footer.slim +++ b/source/_footer.slim @@ -1,11 +1,11 @@ a name="about" p ' © Copyright 2013 | - ==link_to "Albert Schulz", "/albert", :title => "About Albert" + == link_to "Albert Schulz", "/albert", title: "About Albert" ' , - ==link_to "Jörg Thalheim", "/joerg", :title => "About Jörg" + == link_to "Jörg Thalheim", "/joerg", title: "About Jörg" p ' using a href="http://ethanschoonover.com/solarized" title="color palette used on our website" target="_blank" solarized ', more infos - ==link_to "here", "/humans.txt", :title => "About this website" + == link_to "here", "/humans.txt", :title => "About this website" diff --git a/source/albert/index.html b/source/albert/index.html index 7c86f06..b238254 100644 --- a/source/albert/index.html +++ b/source/albert/index.html @@ -17,6 +17,7 @@ + @@ -84,11 +85,7 @@ Bullet Icons by FatCow - - - - - // Piwik + - - - QRCode Generator Example - - - - -

- QRCode Generator Example -

-
- -
- - -
- - -

Project Homepage

-

TickleSpace

- - diff --git a/source/qr/index.html.slim b/source/qr/index.html.slim new file mode 100644 index 0000000..b889e11 --- /dev/null +++ b/source/qr/index.html.slim @@ -0,0 +1,24 @@ +== javascript_include_tag "qrcode.js" +== javascript_include_tag "html5-qrcode.js" +h1 + | QRCode Generator Example +form#QRform name="QRform" + textarea cols="50" name="textField" onclick="this.focus();this.select();" onkeyup="updateQRCode(this.value)" rows="8" I love QR Codes. Type in here and watch the QR code below update. +// This is where our QRCode will appear in. +#qrcode + + +javascript: + function updateQRCode(text) { + var element = document.getElementById("qrcode"); + + var bodyElement = document.body; + if(element.lastChild) + element.replaceChild(showQRCode(text), element.lastChild); + else + element.appendChild(showQRCode(text)); + } + + updateQRCode('I love QR Codes. Type in here and watch the QR code below update.'); +p + a href="https://github.com/amanuel/JS-HTML5-QRCode-Generator" onmouseover="updateQRCode(this.href)" Project Homepage diff --git a/source/stylesheets/dropzone.css b/source/stylesheets/dropzone.css new file mode 100644 index 0000000..454178c --- /dev/null +++ b/source/stylesheets/dropzone.css @@ -0,0 +1,351 @@ +.dropzone, +.dropzone * { + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + box-sizing: border-box; +} +.dropzone { + position: relative; + border: 1px solid rgba(0,0,0,0.08); + background: rgba(0,0,0,0.02); + padding: 1em; +} +.dropzone.clickable { + cursor: pointer; +} +.dropzone.clickable .message { + cursor: pointer; +} +.dropzone.clickable * { + cursor: default; +} +.dropzone .message { + opacity: 1; + -ms-filter: none; + filter: none; +} +.dropzone.drag-hover { + border-color: rgba(0,0,0,0.15); + background: rgba(0,0,0,0.04); +} +.dropzone.started .message { + display: none; +} +.dropzone .preview { + background: rgba(255,255,255,0.8); + position: relative; + display: inline-block; + margin: 17px; + vertical-align: top; + border: 1px solid #acacac; + padding: 6px 6px 28px 6px; +} +.dropzone .preview .details { + width: 100px; + height: 100px; + position: relative; + background: #ebebeb; + padding: 5px; +} +.dropzone .preview .details .filename { + overflow: hidden; + height: 100%; +} +.dropzone .preview .details img { + position: absolute; + top: 0; + left: 0; + width: 100px; + height: 100px; +} +.dropzone .preview .details .size { + position: absolute; + bottom: -28px; + left: 3px; + height: 28px; + line-height: 28px; +} +.dropzone .preview.error .error-mark { + display: block; +} +.dropzone .preview.success .success-mark { + display: block; +} +.dropzone .preview:hover .details img { + display: none; +} +.dropzone .preview:hover .success-mark, +.dropzone .preview:hover .error-mark { + display: none; +} +.dropzone .preview .success-mark, +.dropzone .preview .error-mark { + display: none; + position: absolute; + width: 40px; + height: 40px; + font-size: 30px; + text-align: center; + right: -10px; + top: -10px; +} +.dropzone .preview .success-mark { + color: #8cc657; +} +.dropzone .preview .error-mark { + color: #ee162d; +} +.dropzone .preview .progress { + position: absolute; + top: 100px; + left: 6px; + right: 6px; + height: 6px; + background: #d7d7d7; +} +.dropzone .preview .progress .upload { + position: absolute; + top: 0; + bottom: 0; + left: 0; + width: 0%; + background-color: #8cc657; +} +.dropzone .preview.success .progress { + display: none; +} +.dropzone .preview .error-message { + display: none; + position: absolute; + top: -5px; + left: -20px; + background: rgba(245,245,245,0.8); + padding: 8px 10px; + color: #800; + min-width: 140px; + max-width: 500px; + z-index: 500; +} +.dropzone .preview:hover.error .error-message { + display: block; +} +.dropzone { + border: 1px solid rgba(0,0,0,0.03); + min-height: 360px; + -webkit-border-radius: 3px; + border-radius: 3px; + background: rgba(0,0,0,0.03); + padding: 23px; +} +.dropzone .default.message { + opacity: 1; + -ms-filter: none; + filter: none; + -webkit-transition: opacity 0.3s ease-in-out; + -moz-transition: opacity 0.3s ease-in-out; + -o-transition: opacity 0.3s ease-in-out; + -ms-transition: opacity 0.3s ease-in-out; + transition: opacity 0.3s ease-in-out; + background-image: url("../images/spritemap.png"); + background-repeat: no-repeat; + background-position: 0 0; + position: absolute; + width: 428px; + height: 123px; + margin-left: -214px; + margin-top: -61.5px; + top: 50%; + left: 50%; +} +@media all and (-webkit-min-device-pixel-ratio: 1.5) { + .dropzone .default.message { + background-image: url("../images/spritemap@2x.png"); + -webkit-background-size: 428px 406px; + -moz-background-size: 428px 406px; + background-size: 428px 406px; + } +} +.dropzone .default.message span { + display: none; +} +.dropzone.square .default.message { + background-position: 0 -123px; + width: 268px; + margin-left: -134px; + height: 174px; + margin-top: -87px; +} +.dropzone.drag-hover .message { + opacity: 0.15; + filter: alpha(opacity=15); + -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=15)"; +} +.dropzone.started .message { + display: block; + opacity: 0; + filter: alpha(opacity=0); + -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; +} +.dropzone .preview { + -webkit-box-shadow: 1px 1px 4px rgba(0,0,0,0.16); + box-shadow: 1px 1px 4px rgba(0,0,0,0.16); + font-size: 14px; +} +.dropzone .preview .details img { + width: 100px; + height: 100px; +} +.dropzone .preview.image-preview:hover .details img { + display: block; + opacity: 0.1; + filter: alpha(opacity=10); + -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=10)"; +} +.dropzone .preview.success .success-mark { + opacity: 1; + -ms-filter: none; + filter: none; +} +.dropzone .preview.error .error-mark { + opacity: 1; + -ms-filter: none; + filter: none; +} +.dropzone .preview.error .progress .upload { + background: #ee1e2d; +} +.dropzone .preview .error-mark, +.dropzone .preview .success-mark { + display: block; + opacity: 0; + filter: alpha(opacity=0); + -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; + -webkit-transition: opacity 0.4s ease-in-out; + -moz-transition: opacity 0.4s ease-in-out; + -o-transition: opacity 0.4s ease-in-out; + -ms-transition: opacity 0.4s ease-in-out; + transition: opacity 0.4s ease-in-out; + background-image: url("../images/spritemap.png"); + background-repeat: no-repeat; +} +@media all and (-webkit-min-device-pixel-ratio: 1.5) { + .dropzone .preview .error-mark, + .dropzone .preview .success-mark { + background-image: url("../images/spritemap@2x.png"); + -webkit-background-size: 428px 406px; + -moz-background-size: 428px 406px; + background-size: 428px 406px; + } +} +.dropzone .preview .error-mark span, +.dropzone .preview .success-mark span { + display: none; +} +.dropzone .preview .error-mark { + background-position: -268px -123px; +} +.dropzone .preview .success-mark { + background-position: -268px -163px; +} +.dropzone .preview .progress .upload { + -webkit-animation: loading 0.4s linear infinite; + -moz-animation: loading 0.4s linear infinite; + -o-animation: loading 0.4s linear infinite; + -ms-animation: loading 0.4s linear infinite; + animation: loading 0.4s linear infinite; + -webkit-transition: width 0.3s ease-in-out; + -moz-transition: width 0.3s ease-in-out; + -o-transition: width 0.3s ease-in-out; + -ms-transition: width 0.3s ease-in-out; + transition: width 0.3s ease-in-out; + -webkit-border-radius: 2px; + border-radius: 2px; + position: absolute; + top: 0; + left: 0; + width: 0%; + height: 100%; + background-image: url("../images/spritemap.png"); + background-repeat: repeat-x; + background-position: 0px -400px; +} +@media all and (-webkit-min-device-pixel-ratio: 1.5) { + .dropzone .preview .progress .upload { + background-image: url("../images/spritemap@2x.png"); + -webkit-background-size: 428px 406px; + -moz-background-size: 428px 406px; + background-size: 428px 406px; + } +} +.dropzone .preview.success .progress { + display: block; + opacity: 0; + filter: alpha(opacity=0); + -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; + -webkit-transition: opacity 0.4s ease-in-out; + -moz-transition: opacity 0.4s ease-in-out; + -o-transition: opacity 0.4s ease-in-out; + -ms-transition: opacity 0.4s ease-in-out; + transition: opacity 0.4s ease-in-out; +} +.dropzone .preview .error-message { + display: block; + opacity: 0; + filter: alpha(opacity=0); + -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; + -webkit-transition: opacity 0.3s ease-in-out; + -moz-transition: opacity 0.3s ease-in-out; + -o-transition: opacity 0.3s ease-in-out; + -ms-transition: opacity 0.3s ease-in-out; + transition: opacity 0.3s ease-in-out; +} +.dropzone .preview:hover.error .error-message { + opacity: 1; + -ms-filter: none; + filter: none; +} +@-moz-keyframes loading { + 0% { + background-position: 0 -400px; + } + + 100% { + background-position: -7px -400px; + } +} +@-webkit-keyframes loading { + 0% { + background-position: 0 -400px; + } + + 100% { + background-position: -7px -400px; + } +} +@-o-keyframes loading { + 0% { + background-position: 0 -400px; + } + + 100% { + background-position: -7px -400px; + } +} +@-ms-keyframes loading { + 0% { + background-position: 0 -400px; + } + + 100% { + background-position: -7px -400px; + } +} +@keyframes loading { + 0% { + background-position: 0 -400px; + } + + 100% { + background-position: -7px -400px; + } +} diff --git a/source/stylesheets/site.css.scss b/source/stylesheets/site.css.scss index 47cf928..8066b3e 100644 --- a/source/stylesheets/site.css.scss +++ b/source/stylesheets/site.css.scss @@ -5,6 +5,7 @@ $fontAwesomePath: "../fonts"; @import "fontawesome"; //@import "compass-holmes"; // css-based debugging @import "susy"; +@import "dropzone"; // Setting up the Magic Grid $total-columns: 12; // 12 columns @@ -148,3 +149,19 @@ footer { .overview { span { font-size: 1.8em; }; } + +.bar { + width: 300px; +} + +#progress { + background: #eee; + /*background: rgb(238,232,213);*/ + border: 1px solid #222; + margin-top: 20px; +} +#progressbar { + width: 0px; + height: 24px; + background: #333; +}