volt-awesome 0.1.0 → 0.1.1

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA1:
-  metadata.gz: f457e7d60c5072d8096a5e4e0e30ff3b4b504b2e
-  data.tar.gz: 76997a145aeaa971d135bbb528283dcfaca40fd9
+  metadata.gz: eb02d028bd409d0af3d12adb88a8332bd64941c9
+  data.tar.gz: 405011e2146f52c4f36e4abedab2ae84558aa7e4
 SHA512:
-  metadata.gz: d74a58885d45e123e11675569c335f9b8eca05e27058410c372dc7bb5f189db572c2c78d54702413c3fd3cf71cbe5198a9e29bf1b8a485e21e37ed3dd0f5c852
-  data.tar.gz: 21443066a9e3dff5bebb1f3ad6dbfaf9fc96c940b26a8fc04b1e01c9c0718f5dd24eb464e100ee75193bdf459a4116a62758098b7dccfc7379cb3fc3cb3af4bb
+  metadata.gz: 22630e3b042dac680f16014dece0b84ae595933dc11201e642046fd8e6a7b0b2869077e20e3e34f98794ff7a2c22d2447aa3c8ca2ef29c3e7c368307690a82ae
+  data.tar.gz: 060349e12a3db019b022d7e20b9bb717b765d7f577192608ee0e17b55807c3803e5b49f2bb9e3d7e1838bc1a080e6e3f30e3012f1d65e42034770c49b5bb2123

data/README.md

@@ -4,9 +4,9 @@ Awesome UI for @VoltFramework applications, based on Bootstrap 3.3.0 and Font Aw
 
 Blocks of ui can be created with a few simple lines, such as `<:awesome:panel:image title="My headline" image_url="src.png" />`
 
-example from an app done at a hackathon:
+This component is still in alpha but has been used successfully in deployed apps. Example from an app done at a hackathon:
 
-![screenshot volt awesome ui](https://github.com/heri/volt-awesome/blob/master/screenshot.png?raw=true "screenshot volt::awesome")
+![screenshot volt awesome ui](https://github.com/heri/volt-awesome/blob/master/screenshot.png?raw=true =250x)
 
 
 ## Installation
@@ -25,14 +25,81 @@ Or install it yourself as:
 
 ## Usage
 
-View the app/awesome/views folder to view all possible UI blocks.
+### User card
+```
+<:awesome:panel>
+  <:awesome:panel:image href="{{ '/people/' + id }}" image_url="{{ lion_king.png }}" />
+
+  <:awesome:panel:profile name={{John Smith}} image_url="heri.png">Lorem ipsum dolor sit amet, consectetur adipiscing elit</:awesome:panel:profile>
+
+  <:awesome:panel:navfooter>
+    <:awesome:link icon="eye" href="{{ '/people/' + id }}" title="172"/>
+    <:awesome:link icon="comment" href="{{ '/people/' + id }}" title="34"/>
+    <:awesome:link icon="heart-o" href="{{ like(id) }}" title="210"/>
+  </:awesome:panel:navfooter>
+
+</:awesome:panel>
+```
+![screenshot 1](https://github.com/heri/volt-awesome/blob/master/screenshot1.png?raw=true =250x)
+
+### Forms
+```
+<:awesome:panel title="LOGIN TO YOUR ACCOUNT">
+  <h3>Email</h3>
+  <:awesome:field placeholder="{{ email }}" icon="user"/>
+  <h3>Password</h3>
+  <:awesome:field placeholder="{{ password }}" icon="lock"/>
+
+  ...(TODO)
+
+</:awesome:panel>
+```
+![screenshot 2](https://github.com/heri/volt-awesome/blob/master/screenshot2.png?raw=true =250x)
+
+### Dashboard
+```
+<:awesome:panel title="DATA TRANSFER">
+  <:awesome:panel:image image_url="{{ graph_image_url }}" />
+
+  <:awesome:panel:info>
+    <:awesome:panel:infoicon title="video" number="62%" />
+    <:awesome:panel:infoicon title="photo" number="21%" />
+    <:awesome:panel:infoicon title="audio" number="10%" />
+  </:awesome:panel:info>
+
+
+  <:awesome:panel:navfooter>
+    <:awesome:link icon="cloud-upload" href="{{ '/projects/' + id }}" title="Upload files"/>
+    <:awesome:link icon="share-alt" href="{{ '/pledges/' + id }}" title="share link"/>
+    <:awesome:link icon="history" href="{{ '/pledges/' + id }}" title="back up"/>
+  </:awesome:panel:navfooter>
+
+</:awesome:panel>
+```
+![screenshot 3](https://github.com/heri/volt-awesome/blob/master/screenshot3.png?raw=true =250x)
+
+### Real-life Volt app
+```
+<:awesome:panel>
+  <:awesome:panel:image href="{{ '/projects/' + id }}" image_url="{{ picture }}" />
+
+  <:awesome:panel:text title={{objective}}>{{ description }}</:awesome:panel:text>
+
+  <:awesome:panel:info>
+    <:awesome:panel:infoicon title="Required" number="{{monthly_amount}}" />
+    <:awesome:panel:infoicon title="Duration" number="{{total_duration}}" />
+    <:awesome:panel:infoicon title="Category" number="{{category}}" />
+  </:awesome:panel:info>
+
+</:awesome:panel>
+```
+We get:
+![screenshot volt awesome ui](https://github.com/heri/volt-awesome/blob/master/screenshot.png?raw=true =250x)
+
 
 ## TODO
 
-* better neutral example
 * graphs (pie chart, line chart, bar chart)
-* social media icons
-* re-do login UI for volt apps
 
 
 ## Contributing

data/app/awesome/assets/css/awesome.css

@@ -1,13 +1,5 @@
-// Place your apps css here
-
-.footer, .header {
-  border-top:none;
-}
-
-.weather {
-  margin:0 -30px;
-}
-
+.footer, .header {  border-top:none;}
+.weather {  margin:0 -30px;}
 @font-face{font-family:weather;src:url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/93/artill_clean_icons-webfont.eot);src:url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/93/artill_clean_icons-webfont.eot?#iefix) format('embedded-opentype'),url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/93/artill_clean_icons-webfont.woff) format('woff'),url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/93/artill_clean_icons-webfont.ttf) format('truetype'),url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/93/artill_clean_icons-webfont.svg#artill_clean_weather_iconsRg) format('svg');font-weight:400;font-style:normal}html{width:100%;height:100%}body{font:14px 'Open Sans',"Helvetica Neue",Helvetica,Arial,"Lucida Grande",sans-serif;color:#8F7F70;background:url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2RlYzhiYiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjMxJSIgc3RvcC1jb2xvcj0iI2FjOGU3NCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjY2JSIgc3RvcC1jb2xvcj0iI2JkYTI4NSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiM4NzZkNTIiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+) fixed;background:-moz-linear-gradient(top,#dec8bb 0,#ac8e74 31%,#bda285 66%,#876d52 100%) fixed;background:-webkit-gradient(linear,left top,left bottom,color-stop(0,#dec8bb),color-stop(31%,#ac8e74),color-stop(66%,#bda285),color-stop(100%,#876d52)) fixed;background:-webkit-linear-gradient(top,#dec8bb 0,#ac8e74 31%,#bda285 66%,#876d52 100%) fixed;background:-o-linear-gradient(top,#dec8bb 0,#ac8e74 31%,#bda285 66%,#876d52 100%) fixed;background:-ms-linear-gradient(top,#dec8bb 0,#ac8e74 31%,#bda285 66%,#876d52 100%) fixed;background:linear-gradient(to bottom,#dec8bb 0,#ac8e74 31%,#bda285 66%,#876d52 100%) fixed;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#dec8bb', endColorstr='#876d52', GradientType=0)}
 .panel{border:none;font-shadow:0 1px 1px rgba(0,0,0,.25);border-radius:5px}
 .panel-body{padding:20px}.panel-heading{border-top-left-radius:5px;border-top-right-radius:5px}.panel-footer{border-bottom-right-radius:5px;border-bottom-left-radius:5px;font-size:.9em;text-align:center}
@@ -56,94 +48,36 @@ img { width: 100%;}
 @media (min-width: 1200px) { .container {max-width:500px;} } @media (min-width: 768px) and (max-width: 979px){ .container {width:auto;} }
 @media (min-width: 1200px) { .movie-panel .flickr-photo, .yelp-photo, .movie-photo {width:530px;} } @media (min-width: 768px) and (max-width: 979px){ .movie-panel .flickr-photo, .yelp-photo, .movie-photo {max-width:100%;} } #tagline { font-size: 14px;}
 h5.comments {margin-top:0}
-.gmap {
-  padding:0;
-  margin-bottom:-3px;
-}
+.gmap {  padding:0;  margin-bottom:-3px;}
 #weather-widget h5 { font-size: 1.25em;}
 @media (min-width: 650px) {.container {  width: 500px; }}
 @media (max-width: 649px) {.container {  width: auto; }}
 @media screen and (max-device-width:640px) and (-webkit-device-pixel-ratio: 3) {.container {  width: auto; } }
 .gMapsiFrame {     position: relative; padding-bottom: 75%; height: 0; overflow: hidden;}
 .gMapsiFrame iframe {  position: absolute;top: 0;left: 0;width: 100% !important;height: 100% !important;}
-
 a.dropdown-toggle {color:#55BC75;font:1.25em;}
 ul.user-menu {list-style-type: none;padding:0}
-.dropdown-menu {
-  left: 35%;
-}
-
+.dropdown-menu {  left: 35%;}
 #searchForm .panel-body { padding:0 0 20px 0 }
-
 #loading_status {text-align: center}
 #loading_status img{width: 50px}
-
 h1#site-logo{margin:5px 0}
 h1#site-logo img{width: 156px;height: 75px}
-#nav-widget a button.highlight {
-  color: #E56E4C;
-}
-
-.panel-image {
-  padding:0;
-  background-size: cover;
-}
-.panel-heading.panel-image {
-  border-top-left-radius: 5px;
-  border-top-right-radius: 5px;
-}
+#nav-widget a button.highlight {  color: #E56E4C;}
+.panel-image {  padding:0;background-size: cover;}
+.panel-heading.panel-image {  border-top-left-radius: 5px;  border-top-right-radius: 5px;}
 .panel .description { padding:0 20px 20px 20px; }
-.panel {
-
-          box-shadow: 0 2px 2px rgba(0, 0, 0, .2) }
-
+.panel {  box-shadow: 0 2px 2px rgba(0, 0, 0, .2) }
 .profile .img-circle { width:110px}
 .profile .media-heading {   color: #5B5147;}
-
-
-.panel-footer.info {
-  padding:0;
-  background-color: #fff;
-  margin-top:3px;
-}
-.panel-footer.info li {
-  background-color: #F5F0EC;
-  padding: 20px 0;
-  border-top: 4px solid #E25331;
-}
-.panel-footer.info li:not(:first-child) {
-  border-left: 1px solid #fff;
-}
-.panel-footer.info li:first-child{
-  margin-right: 1px;
-  border-top: 4px solid #4DAF7C
-}
-.panel-footer.info li:last-child{
-  margin-left: 1px;
-  border-top: 4px solid #EAC85D;
-}
-.panel-footer.info li h3 {
-  margin: 3px 0 0 0;
-  font-size: 30px;
-}
-
-.panel-text {
-  padding:0 20px 20px 20px;
-}
-
-.actions.panel-footer.navfooter .btn-group .btn {
-  background-color: #776B5F;
-  border-top: 3px solid #6d6257;
-  color:white;
-  padding:20px 0;
-}
-.actions.panel-footer.navfooter a small {
-  text-transform: uppercase;
-}
-.actions.panel-footer.navfooter .btn-group > .btn:not(:first-child) {
-  border-left: 0px solid #776B5F;
-}
-
-.media > .pull-left {
-  padding: 0 30px;
-}
+.panel-footer.info {  padding:0;  background-color: #fff;  margin-top:3px;}
+.panel-footer.info li {  background-color: #F5F0EC;padding: 20px 0;  border-top: 4px solid #E25331;}
+.panel-footer.info li:not(:first-child) {  border-left: 1px solid #fff;}
+.panel-footer.info li:first-child{  margin-right: 1px;border-top: 4px solid #4DAF7C;}
+.panel-footer.info li:last-child{  margin-left: 1px;border-top: 4px solid #EAC85D;}
+.panel-footer.info li h3 {  margin: 3px 0 0 0;  font-size: 30px;}
+.panel-text {  padding:0 20px 20px 20px;}
+.actions.panel-footer.navfooter .btn-group .btn {  background-color: #776B5F;  border-top: 3px solid #6d6257;color:white;padding:20px 0;}
+.actions.panel-footer.navfooter a small {  text-transform: uppercase;}
+.actions.panel-footer.navfooter .btn-group > .btn:not(:first-child) {  border-left: 0px solid #776B5F;}
+.media > .pull-left {  padding: 0 30px;}

data/lib/volt/awesome/version.rb

@@ -1,5 +1,5 @@
 module Volt
   module Awesome
-    VERSION = "0.1.0"
+    VERSION = "0.1.1"
   end
 end

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: volt-awesome
 version: !ruby/object:Gem::Version
-  version: 0.1.0
+  version: 0.1.1
 platform: ruby
 authors:
 - heri
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2015-09-29 00:00:00.000000000 Z
+date: 2015-10-01 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: volt
@@ -243,6 +243,9 @@ files:
 - lib/volt/awesome.rb
 - lib/volt/awesome/version.rb
 - screenshot.png
+- screenshot1.png
+- screenshot2.png
+- screenshot3.png
 - spec/dummy/.gitignore
 - spec/dummy/README.md
 - spec/dummy/app/main/assets/css/app.css.scss