Skip to content

Comparing changes

Choose two branches to see what’s changed or to start a new pull request. If you need to, you can also compare across forks.

Open a pull request

Create a new pull request by comparing changes across two branches. If you need to, you can also compare across forks.
...
  • 3 commits
  • 24 files changed
  • 0 commit comments
  • 2 contributors
View
BIN css/ios-codebykevin/bluebg.png
Deleted file not rendered
View
BIN css/ios-codebykevin/bluebg_selected.png
Deleted file not rendered
View
BIN css/ios-codebykevin/ios_expando.png
Deleted file not rendered
View
889 css/ios-codebykevin/ios_orig.css
@@ -1,889 +0,0 @@
-/*
- ipad4joB.css
-*/
-
-.no-copy{-webkit-user-select:none;}
-
-body {
- margin: 0;
- padding: 0;
- background: #EEE;
- word-wrap: break-word;
- overflow: hidden;
- font-family: helvetica;
-}
-jobutton,
-joview,
-jolist,
-jolistitem,
-jomenu,
-jomenuitem,
-joexpando,
-joexpandotitle,
-jogroup,
-jocard,
-jostack,
-jotitle,
-jocaption,
-jolabel,
-jodivider,
-joinput,
-input,
-textarea,
-jotextarea,
-jooption,
-jooptionitem,
-jonavbar,
-jocontainer,
-jotoggle {
- display: block;
- margin: 0;
- padding: 0;
- -webkit-user-select: none;
-}
-
-.noflex {
- -webkit-box-flex: 0;
-}
-.flexible {
- -webkit-box-flex: 1;
-}
-.flex {
- display: block;
- display: -webkit-box;
- margin: 0;
-}
-.listitem {
- border-top: 1px solid rgba(0, 0, 0, 0.4);
- margin: 0;
- padding: 10px;
- cursor: pointer;
-}
-.widgety {
- color: rgba(255, 255, 255, 0.9);
- background-color: #7e82a1;
- font-weight: normal;
- cursor: pointer;
- outline: none;
- outline-color: transparent;
- padding: 10px 0;
-}
-
-.stretch-full {
- display: block;
- position: absolute;
- top: 0;
- left: 0;
- right: 0;
- bottom: 0;
-}
-.widget {
- margin: 0px 10px 10px 10px;
-}
-
-.selected {
- background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#7abcff), color-stop(44%,#60abf8), color-stop(100%,#4096ee));
- color: white;
- font-size:medium;
- font-weight: bold;
-}
-.focus {
- background-color: #fff;
-}
-jooptionitem:last-child {
- -webkit-border-radius: 0;
- -webkit-border-top-right-radius: 5px;
- -webkit-border-bottom-right-radius: 5px;
- border-right-width: 1px;
-}
-jobutton {
- display: block;
- text-align: center;
- font-size: 18px;/*x-large ? medium ?*/
- color: black;
- -webkit-appearance: none;
-
- padding: 0.5em;
- line-height: 1.7em;
-
- border:solid 1px #555;
-
- -webkit-box-shadow: 1px 1px 1px #fff;
-
- width: auto;
- padding: 0.25em 1em;
-
- /*rounded*/
- border-radius: 2em;
- /*gray*/
- background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#ccc));
-}
-
-jobutton:hover {
- opacity: 0.6;
- outline: none;
- border: 2px solid #058cf5;
-}
-
-jobutton.focus {
- opacity: 0.6;
- outline: none;
- border: 2px solid #058cf5;
-}
-
-
-jooption {
- display: block;
- display: -webkit-box;
- margin: 0;
- box-align: stretch;
- margin: 0px 10px 10px 10px;
- -webkit-box-shadow: 1px 1px 1px #fff;
-}
-jooptionitem {
- background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#ccc));
- border:solid 1px #555;
-
- font-weight: normal;
- cursor: pointer;
- padding: 10px 0;
- -webkit-box-flex: 1;
- text-align: center;
- border-right-width: 0;
- margin: 0;
-}
-jooptionitem:first-child {
- -webkit-border-radius: 0;
- -webkit-border-top-left-radius: 5px;
- -webkit-border-bottom-left-radius: 5px;
-}
-jooptionitem:last-child {
- -webkit-border-radius: 0;
- -webkit-border-top-right-radius: 5px;
- -webkit-border-bottom-right-radius: 5px;
-}
-
-/*
-jooptionitem:hover{
- opacity: 0.6;
- outline: none;
- border: 2px solid #058cf5;
-}
-
-joexpandotitle:hover{
- opacity: 0.6;
- outline: none;
- border: 2px solid #058cf5;
-}
-*/
-
-jobutton,
-input,
-jolabel,
-textarea,
-joexpando {
- margin: 0px 10px 10px 10px;
-}
-jotitle {
-
- font-weight: normal;
- cursor: pointer;
- outline: none;
- outline-color: transparent;
- padding: 10px 0;
-
- background-image: none;
- text-align: center;
- color: rgba(255, 255, 255, 0.8);
- padding: 10px;
-
- font-size: 18px;
- margin: 0;
- border-top: none;
- border-left: none;
- border-right: none;
-}
-*:focus {
- outline: none;
-}
-jolistitem, jomenuitem {
- border-top: 1px solid rgba(0, 0, 0, 0.4);
- margin: 0;
- padding: 10px;
- cursor: pointer;
-}
-
-
-
-
-jomenuitem:first-child {
- border-top: none;
-}
-
-jomenuitem:last-child {
- border-bottom: 1px solid rgba(0, 0, 0, 0.4);
-}
-
-jomenuitem:hover {
- background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#7abcff), color-stop(44%,#60abf8), color-stop(100%,#4096ee));
- color: white;
- font-size:medium;
- font-weight: bold;
-}
-
-jolistitem:hover {
- background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#7abcff), color-stop(44%,#60abf8), color-stop(100%,#4096ee));
- color: white;
- font-size:medium;
- font-weight: bold;
-}
-
-joselect.focus {
- background-color: transparent;
-
-}
-jolist {
- margin: 0;
-}
-joselectlist, joexpandocontent {
- display: block;
- border: 1px solid rgba(0, 0, 0, 0.6);
- border-top: none;
- -webkit-border-radius: 0;
- -webkit-border-bottom-right-radius: 0.4em;
- -webkit-border-bottom-left-radius: 0.4em;
-}
-
-joselectlist > :first-child
-{
- border-top: none;
-}
-
-joexpando {
- display: block;
- padding-bottom: 0px;
- margin-bottom: 0;
-}
-joexpando.open {
- margin-bottom: 10px;
-}
-joexpandocontent {
- padding-top: 10px;
-}
-joselectlist > *:last-child {
- border-bottom: none;
- -webkit-border-radius: 0;
- -webkit-border-bottom-right-radius: 0.4em;
- -webkit-border-bottom-left-radius: 0.4em;
-}
-joselectlist > *:last-child.select {
- border-bottom: none;
- -webkit-border-radius: 0;
- -webkit-border-bottom-right-radius: 0.4em;
- -webkit-border-bottom-left-radius: 0.4em;
-}
-
-jocard > jolist, jocard > jomenu {
- margin: 0;
-}
-
-joinput.password, input.password {
- -webkit-text-security: disc;
-}
-joinput,
-jotextarea,
-input,
-textarea {
-
- cursor: text;
- display: block;
-
- margin: 0 10px 10px 10px;
-
- white-space: nowrap;
- overflow: hidden;
- outline: none;
-
- -webkit-user-select: text;
-
- padding: 0.5em;
- font-size: large;
- line-height: 1.2em;
-
- -webkit-appearance: none;
- -webkit-box-shadow: 1px 1px 1px #fff;
- -webkit-border-radius: 0.4em;
-
- border: 1px solid #DDD;
- border-bottom-left-radius: 0.4em 0.4em;
- border-bottom-right-radius: 0.4em 0.4em;
- border-top-left-radius: 0.4em 0.4em;
- border-top-right-radius: 0.4em 0.4em;
-
-}
-
-joinput.focus,
-jotextarea.focus,
-input.focus,
-textarea.focus{
- outline: none;
- border: 2px solid #058cf5;
- background: white;
-}
-
-
-jolist, jomenu {
- font-size: 18px;
- background: white;
-}
-jotextarea, textarea {
- white-space: normal;
-}
-joinput.disabled,
-jotextarea.disabled,
-input.disabled,
-textarea.disabled {
- color: #666;
- cursor: text;
-}
-joexpandotitle joicon {
- position: absolute;
- border: none;
- display: block;
- height: 32px;
- width: 32px;
- right: 4px;
- top: 10%;
- background: url(ios_expando.png) no-repeat;
- -webkit-transform-origin: 16px 16px 0;
- -webkit-transform: rotatez(0);
- -webkit-transition: -webkit-transform 0.2s ease-out;
-
-}
-joexpando.open > joexpandotitle joicon {
- -webkit-transform: rotatez(90deg);
-}
-joexpando > *:last-child {
- height: 0;
- overflow: hidden;
- opacity: 0;
- margin-top: 0;
- margin-bottom: 0;
- -webkit-transform-style: preserve- 3 d;
- /*-webkit-transform: rotatex(-45deg);*/
- -webkit-transform-origin: 0 0 0;
- -webkit-transition: -webkit-transform 0.2s ease-out, opacity 0.2s ease-out, height 0.2s ease-out, overflow 0.2s ease-out;
-}
-joexpando.open > *:last-child {
- height: 100%;
- overflow: visible;
- opacity: 1;
- -webkit-transform: rotatex(0);
-}
-joexpando > *:first-child {
- -webkit-transform: none;
- opacity: 1;
- overflow: visible;
- height: auto;
-}
-joexpandotitle {
- color: #000000;
- position: relative;
-
- background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#ccc));
- -webkit-box-shadow: 1px 1px 1px #fff;
- font-weight: normal;
- cursor: pointer;
- outline: none;
- outline-color: transparent;
- padding: 10px 0;
-
- border:solid 1px #555;
-
- -webkit-border-radius: 0.4em;
-
- padding: 10px;
- cursor: pointer;
- text-align: left;
-}
-joexpando.open > *:first-child {
-
- -webkit-border-radius: 0;
- -webkit-border-top-right-radius: 0.4em;
- -webkit-border-top-left-radius: 0.4em;
-
- background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#7abcff), color-stop(44%,#60abf8), color-stop(100%,#4096ee));
- color: white;
- font-size:medium;
- font-weight: bold;
-}
-jolabel, label {
- margin-bottom: 5px;
-
- font-weight: bold;
- font-size: medium;
- color: #333;
-
-}
-jocaption {
- margin: 10px;
-}
-johtml {
- display: block;
- margin: 0 10px 10px 10px;
- padding: 0;
-}
-jodivider {
- border-top: 1px solid rgba(0, 0, 0, 0.5);
- border-bottom: 1px solid rgba(255, 255, 255, 0.2);
- margin: 0 0 10px 0;
- text-align: center;
- height: 0;
- display: block;
-}
-joflexrow > jotoggle {
- -webkit-box-flex: 0;
-}
-jotoggle {
- cursor: pointer;
- display: block;
- margin: 10px 10px 0 10px;
- -webkit-border-radius: 2em;
-
- -webkit-box-shadow: 1px 1px 1px #fff;
- background: white;
-
- border: 1px solid #DDD;
-
- position: relative;
- overflow: hidden;
- width: 90px;
-}
-jotoggle > * {
- margin: 0px 10px 10px 10px;
- color: #000000;
- background-color: #7e82a1;
- font-weight: normal;
- cursor: pointer;
- outline: none;
- outline-color: transparent;
- padding: 10px 0;
-
- border:solid 1px #555;
-
- background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#ccc));
-
- margin: 0;
- text-align: center;
-
- -webkit-border-radius: 2em;
-
- padding: 10px 0;
- width: 60px;
-
- -webkit-transition: -webkit-transform 0.1s ease, background-color 0.1s ease;
-
-}
-
-/*
-jotoggle:hover{
- border: 2px solid #058cf5;
- opacity: 0.6;
- outline: none;
-}
-*/
-jotoggle.on {
-
-}
-jotoggle.on > * {
- color: white;
- font-size:medium;
- font-weight: bold;
- background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#7abcff), color-stop(44%,#60abf8), color-stop(100%,#4096ee));
- -webkit-transform: translatex(28px);
-}
-jotable {
- display: block;
- margin: 0 10px;
-}
-tr {
- margin: 0;
-}
-th {
- text-align: left;
- padding: 5px;
-}
-td {
- padding: 5px;
-}
-jolabel.left {
- margin-top: 10px;
- padding: 9px 0;
-}
-.disabled {
- opacity: .2;
-}
-jotoolbar {
- padding: 10px;
-}
-joflexrow {
- display: block;
- display: -webkit-box;
- margin: 0;
- width: 100%;
-}
-joflexrow > * {
- -webkit-box-flex: 1;
- margin-right: 0;
- position: relative;
-}
-joflexrow > *:last-child {
- margin-right: 10px;
-}
-joflexcol {
- display: block;
- display: -webkit-box;
- margin: 0;
-
- height: 100%;
- width: 100%;
- -webkit-box-orient: vertical;
- -webkit-box-align: stretch;
-
- margin: 0;
-}
-joflexcol > * {
- -webkit-box-flex: 1;
-
-}
-jotitle + joflexcol, jotitle + joflexrow {
- margin-top: 10px;
-}
-jostack {
- height: 100%;
- -webkit-perspective: 400px;
-}
-jostack {
- -webkit-transition: opacity 0.3s ease-out;
-}
-jostack > * {
-
- -webkit-transform-origin: 50% 100% 0;
- -webkit-transform: rotatez(0) translatez(0);
- -webkit-transition: -webkit-transform 0.3s ease-out, z-index 0.3s ease-out, height 0s ease, overflow 0s ease;
-
-
-}
-jostack > .next {
- z-index: -1;
- -webkit-transform: translatex(100%);
- height: 100%;
- overflow: hidden;
-}
-jostack > .prev {
- z-index: 1;
- /*-webkit-transform: translatex(-100%);*/
- -webkit-transform: translatex(100%);
- height: 100%;
- overflow: hidden;
-}
-* {
- -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
-}
-
-
-jocard {
- width: 100%;
- min-height: 100%;
-
- padding: 0;
- margin: 0;
- -webkit-box-orient: vertical;
- -webkit-box-align: stretch;
-
- background: #EEE;
-}
-jocard > * {
- /* display: block; */
-
-}
-jocard > *:last-child {
- margin-bottom: 10px;
-}
-joscroller {
- position: absolute;
- display: block;
- height: 100%;
- width: 100%;
- overflow: hidden;
- padding: 0;
- margin: 0;
- -webkit-transform: translate3d(0, 0, 0);
-}
-joscroller > * {
- position: absolute;
- top: 0;
- -webkit-animation-fill-mode: forwards;
- -webkit-transition: -webkit-transform 0s ease;
-}
-.flick {
- -webkit-transition: -webkit-transform 1.8s cubic-bezier(0, 0.2, 0, 1);
-}
-.flickback {
- -webkit-transition: -webkit-transform 0.2s cubic-bezier(0, 0, 0.4, 1);
-}
-.flickfast {
- -webkit-transition: -webkit-transform 0.5s cubic-bezier(0, 0.2, 0, 1);
-}
-jocontainer {
- margin: 0;
- display: block;
- position: relative;
-}
-jogroup {
-
- -webkit-box-shadow: rgba(255, 255, 255, 0.699219) 0px 1px 0px;
- background-color: #F7F7F7;
- padding-top:15px; padding-right:10px;padding-left:10px; padding-bottom: 15px;
- /*text-align:right; */
- margin-left:10px; margin-top:10px; margin-right:10px; margin-bottom:10px;
- border: 1px solid #DDD;
- border-bottom-left-radius: 0.4em 0.4em;
- border-bottom-right-radius: 0.4em 0.4em;
- border-top-left-radius: 0.4em 0.4em;
- border-top-right-radius: 0.4em 0.4em;
-}
-jogroup > *.last-child {
- margin-bottom: 0;
-}
-jofooter {
- display: block;
- display: -webkit-box;
-
- width: 100%;
- -webkit-box-flex: 1;
- -webkit-box-orient: vertical;
- -webkit-box-align: stretch;
- -webkit-box-pack: end;
- margin: 0;
-}
-jofooter > * {
- -webkit-box-align: end;
-}
-joshim {
- opacity: 0;
- overflow: hidden;
- position: absolute;
- z-index: 100;
- top: 0;
- left: 0;
- right: 0;
- bottom: 0;
- display: none;
- background: rgba(0, 0, 0, 0.6);
- opacity: 0;
- -webkit-transition: opacity .2s ease;
-}
-joshim.show {
- display: block;
- opacity: 1;
-}
-jotoolbar {
- border-top: 1px solid #777;
- /*background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#eeeeee), color-stop(100%,#eeeeee));*/
- background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#eeeeee), color-stop(100%,#cccccc));
- padding: 10px 0;
-
- text-align: center;
- font-size: 20px;
- color: #777;
- text-shadow: #fff 0 1px 0;
-
- /*font-weight: normal;*/
- cursor: pointer;
- outline: none;
- /*outline-color: transparent;*/
- padding: 10px 0;
-
- z-index: 1;
- position: absolute;
- bottom: 0;
- left: 0;
- right: 0;
- text-align: center;
-}
-
-jotoolbar {
- -webkit-border-radius: 0;
-}
-
-jopopup {
- -webkit-border-top-left-radius: 0.5em;
- -webkit-border-top-right-radius: 0.5em;
- background-color: #FFFFFF;
- /*border: 1px solid #777;*/
- border: 1px solid #555;
- color: #222222;
-
- -webkit-box-shadow: 5px 5px 5px rgba(0, 0, 0, .6);
- /*-webkit-box-shadow: 0 0 20px rgba(0, 0, 0, 0.6);*/
-
- -webkit-box-flex: 0;
-
- font-size: 15px;
- display: block;
- overflow: hidden;
- margin: 0 auto;
-
- -webkit-transition: -webkit-transform 0.4s ease-in, opacity 0.4s ease-in;
-
- -webkit-transform: scale(0.5);
-
- max-height: 480px;
- max-width: 640px;
- margin: 0 auto;
- opacity: 0;
-}
-jopopup > jolist > *.select:first-childjopopup > jomenu > *.select:first-child {
- border-top: none;
- -webkit-border-radius: 0;
- -webkit-border-top-right-radius: 20px;
- -webkit-border-top-left-radius: 20px;
-
- border-radius: 20px 20px 0 0;
-}
-jopopup > jolist > *:last-child.selectjopopup > jomenu > *:first-child.select {
- border-bottom: none;
- -webkit-border-radius: 0;
- -webkit-border-bottom-right-radius: 20px;
- -webkit-border-bottom-left-radius: 20px;
-
- border-radius: 0 0 20px 20px;
-}
-jopopup.show {
- -webkit-transform: scale(1);
- opacity: 1;
-}
-jopopup > joscroller {
- width: 100%;
-}
-jonavbar {
-
- background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#eeeeee), color-stop(100%,#cccccc));
- border-bottom: 1px solid #777;
- display: block;
- position: relative;
- margin: 0;
- padding: 0;
-
- border-top: none;
- border-right: none;
- border-left: none;
- text-align: center;
-
- -webkit-box-flex: 0;
-
- font-size: x-large;
- font-weight: bold;
- color: #777;
- text-shadow: #fff 0 1px 0;
-
- cursor: default;
-}
-jonavbar > joview {
- display: block;
- text-align: center;
- padding: 10px 0;
-}
-jonavbar > joflexrow {
- position: absolute;
- top: 0;
- left: 0;
- right: 0;
- bottom: 0;
-}
-jobackbutton {
-
- padding-top :5px;
- padding-bottom :5px;
- padding-left : 10px;
- padding-right : 10px;
-
- margin: 7px 7px;
-
- display: none;
- text-align: center;
- font-size: large;
-
- -webkit-appearance: none;
-
- line-height: 1.2em;
-
- border:solid 1px #555;
-
- -webkit-box-shadow: 1px 1px 1px #fff;
-
- width: auto;
-
- /*half rounded*/
- -webkit-border-radius: 0.4em;
- /*gray*/
- background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#ccc));
-
-}
-jobackbutton.focus, jobackbutton.selected {
- opacity: 0.6;
- outline: none;
- border: 2px solid #058cf5;
-
-}
-jobackbutton.active {
- display: block;
-}
-
-jobackbutton:hover {
- opacity: 0.6;
- outline: none;
- border: 2px solid #058cf5;
-}
-
-
-jonavbar > joflexrow > * {
- -webkit-box-flex: 1;
-}
-jonavbar > joflexrow > jobackbutton {
- -webkit-box-flex: 0;
- max-width: 4em;
-}
-
-
-jopopup > jotitle {
- background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#eeeeee), color-stop(100%,#cccccc));
-
- -webkit-border-top-left-radius: 0.5em;
- -webkit-border-top-right-radius: 0.5em;
-
- text-align: center;
- font-size: 20px;
- color: #777;
- text-shadow: #fff 0 1px 0;
-
- border-bottom: 1px solid #777;
-
- margin-bottom:10px;
-
-}
-
-jopopup > jobutton {
- background-color: rgba(255, 255, 255, 0.4);
-}
-joflexcol {
- height: 100%;
- width: 100%;
-}
-html {
- -webkit-text-size-adjust: none;
-}
-body {
- -webkit-backface-visibility: hidden;
-}
View
BIN css/ios-codebykevin/navbar.png
Deleted file not rendered
View
BIN css/ios-codebykevin/shade-top-split.png
Deleted file not rendered
View
BIN samples/jo-badge-sheet/css/.DS_Store
Binary file not shown.
View
22 samples/jo-badge-sheet/css/badge.css
@@ -1,22 +0,0 @@
-nav > ul > li {position:relative;}
-.badges {background: position: relative}
-.badge
-{ position:absolute;
- top:1px;
- right:1px;
- background: red;
- width: 16px;
- height: 16px;
- z-index: 20000;
- border: 0.15em solid #ffffff;
- -webkit-border-radius: 9px;
- line-height: 16px;
- color: #ffffff;
- font-size: 90%;
- text-shadow: none;
- font-weight: bold;
- font-family: helvetica;
- text-align: center;
- min-width: 16px;
- width: auto;
-}
View
41 samples/jo-badge-sheet/css/badge.js
@@ -1,41 +0,0 @@
-(function ($) {
- $.fn.badge = function (action, options) {
- // these are the default options
- var defaults = {
- top: '-8px',
- left: '-8px',
- cssClass: 'badge'
- };
- return this.each(function () {
- var obj = $(this);
- var eleId = this.id + "-badge";
- // these are the 2 additional options
- switch (action) {
- case 'toggle':
- $('#' + eleId).toggle();
- return;
- case 'hide':
- $('#' + eleId).hide();
- return;
- }
- // this merges the passed in settings with the default settings
- var opts = $.extend({}, defaults, options);
- if (!$("#" + eleId).length) {
- var badge_html = "<div style='position:relative;float:left;'><div id='" + eleId + "' />8</div>";
- obj.prepend(badge_html);
- }
- var badgeEle = $('#' + eleId);
- badgeEle.addClass(opts.cssClass);
- badgeEle.show().css({
- position: 'absolute',
- left: opts.left,
- top: opts.top
- });
- return;
- });
- };
-})(jQuery);
-
-$(function () {
- $('.badges').badge();
-});
View
BIN samples/jo-badge-sheet/css/bluebg.png
Deleted file not rendered
View
BIN samples/jo-badge-sheet/css/bluebg_selected.png
Deleted file not rendered
View
BIN samples/jo-badge-sheet/css/book_32x24.png
Deleted file not rendered
View
BIN samples/jo-badge-sheet/css/book_alt2.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
BIN samples/jo-badge-sheet/css/compass_32x32.png
Deleted file not rendered
View
BIN samples/jo-badge-sheet/css/document_alt_stroke.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
BIN samples/jo-badge-sheet/css/document_alt_stroke_24x32.png
Deleted file not rendered
View
129 samples/jo-badge-sheet/css/ios.css 100755 → 100644
@@ -1,5 +1,5 @@
/*
-ios theme for joApp. Developed by Philippe Charrière, http://k33g.org/. Modified by Kevin Walzer, http://www.codebykevin.com. Card transitions based on code at http://www.joapp.com/forums/index.php?p=/discussion/233/adjust-transitionss-. Incorporates graphics from the jQTouch project, http://jqtouch.com. (c) 2010, 2011, contributors.
+ios theme for joApp. Developed by Philippe Charrière, http://k33g.org/. Modified by Kevin Walzer, http://www.codebykevin.com. Card transitions based on code at http://www.joapp.com/forums/index.php?p=/discussion/233/adjust-transitionss-. Incorportes CSS gradients and images from http://forrst.com/posts/iPhone_style_button_CSS-ea4, http://www.noupe.com/design/the-mobile-web-css-image-replacement-for-retina-display-devices.html, and https://github.com/cheeaun/hnmobile. (c) 2010, 2011, 2012 contributors.
*/
.no-copy{-webkit-user-select:none;}
@@ -120,16 +120,25 @@ jobutton {
-webkit-background-size: 100% 100%;
-webkit-border-radius: 3px;
border-radius: 3px;
- background-image: url(bluebg.png);
- background-repeat: repeat-x;
- background-position: top left;
- background-size: 100% 100%;
- -webkit-background-size: 100% 100%;
- color: #FFFFFF
+ color: #fff;
+ background: none;
+ background-image: -webkit-gradient(linear, left top, left bottom,
+ color-stop(0, #8ea4c1),
+ color-stop(0.5, #5877a2),
+ color-stop(0.5, #476999),
+ color-stop(1, #4a6c9b));
+ -webkit-border-radius: 6px;
+ border: 1px solid #45505d;
+ -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .25),
+ 0 1px 0 rgba(255, 255, 255, 0.25);
}
jobackbutton.focus, jobackbutton.selected {
- background-image: url(bluebg_selected.png);
+ background-image: -webkit-gradient(linear, left top, left bottom,
+ color-stop(0, #7d88a5),
+ color-stop(0.5, #3a4e78),
+ color-stop(0.5, #273f6d),
+ color-stop(1, #273f6d));
}
@@ -146,7 +155,13 @@ jobackbutton.active {
}
jobutton.focus, jobutton.selected {
- background-image: url(bluebg_selected.png);
+ color: #fff;
+ background: none;
+ background-image: -webkit-gradient(linear, left top, left bottom,
+ color-stop(0, #7d88a5),
+ color-stop(0.5, #3a4e78),
+ color-stop(0.5, #273f6d),
+ color-stop(1, #273f6d));
}
jobackbutton.active {
@@ -202,16 +217,20 @@ jotitle {
outline: none;
outline-color: transparent;
padding: 10px 0;
- background-image: url(navbar.png);
+ background-image: none;
text-align: center;
+ color: rgba(255, 255, 255, 0.8);
padding: 10px;
+ font-size: 100%;
margin: 0;
border-top: none;
border-left: none;
border-right: none;
- font-size: 100%
- font-weight: normal;
- color: #fff;
+ color: #FFF;
+ background-image: -webkit-gradient(linear,
+ 0% 0%, 0% 50%,
+ from(rgba(176, 188, 205, 1)),
+ to(rgba(129, 149, 175, 1)));
text-shadow: rgba(0, 0, 0, 0.5) 0px -1px 0;
}
@@ -257,8 +276,7 @@ joselectlist, joexpandocontent {
-webkit-border-bottom-left-radius: 0.4em;
}
-joselectlist > :first-child
-{
+joselectlist > :first-child {
border-top: none;
}
@@ -344,14 +362,16 @@ joexpandotitle joicon {
position: absolute;
border: none;
display: block;
- height: 32px;
- width: 32px;
+ height: 27px;
+ width: 31px;
right: 4px;
top: 10%;
- background: url(ios_expando.png) no-repeat;
+/*Put in high-resolution image, scale down via webkit-background-size: works in both retina and standard displays.*/
+ background: url(ios_expando_retina.png) no-repeat;
-webkit-transform-origin: 16px 16px 0;
-webkit-transform: rotatez(0);
-webkit-transition: -webkit-transform 0.2s ease-out;
+ -webkit-background-size: 27px 31px;
}
@@ -394,7 +414,13 @@ joexpandotitle {
outline-color: transparent;
padding: 10px 0;
border: 1px solid rgba(0, 0, 0, 0.8);
- background-image: url(navbar.png);
+/* background-image: url(navbar.png);*/
+ background-image: -webkit-gradient(linear,
+ 0% 0%, 0% 50%,
+ from(rgba(176, 188, 205, 1)),
+ to(rgba(129, 149, 175, 1)));
+ background: -webkit-linear-gradient(top, #c2cbd7 0%,#8fa0b6 2%,#8b9cb2 19%,#728399 79%,#6c7d93 100%); /* Chrome10+,Safari5.1+ */
+
background-repeat: repeat-x;
background-position: top left;
background-size: 100% 100%;
@@ -459,7 +485,7 @@ jotoggle {
-moz-border-radius: 4px;
border-radius: 4px;
background-color: inherit;
- background-image: url(shade-top-split.png);
+ background-image: -webkit-linear-gradient(top, #ffffff 0%,#e5e5e5 100%); /* Chrome10+,Safari5.1+ */
background-repeat: repeat-x;
background-position: top left;
background-size: 100% 100%;
@@ -535,7 +561,7 @@ joslider {
height: 40px;
-webkit-border-radius: 4px;
border-radius: 4px;
- background-image: url(shade-top-split.png);
+ background-image: -webkit-linear-gradient(top, #ffffff 0%,#e5e5e5 100%); /* Chrome10+,Safari5.1+ */
background-repeat: repeat-x;
background-position: top left;
background-size: 100% 100%;
@@ -625,7 +651,6 @@ jostack > * {
-webkit-transition: -webkit-transform 0.3s ease-out, z-index 0.3s ease-out, height 0s ease, overflow 0s ease;
}
-
jostack > .next {
z-index: -1;
-webkit-transform: translatex(100%) translatez(0);
@@ -634,12 +659,11 @@ jostack > .next {
}
jostack > .prev {
z-index: 1;
- -webkit-transform: translatex(-100%) translatez(0);
+ -webkit-transform: translatex(-100%) translatez(0);;
height: 100%;
overflow: hidden;
}
-
* {
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
@@ -764,7 +788,6 @@ joshim.show {
jotoolbar {
border-top: 1px solid rgba(0, 0, 0, 0.8);
- background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#eeeeee), color-stop(100%,#cccccc));
padding: 10px 0;
text-align: center;
font-size: 100%;
@@ -777,7 +800,7 @@ jotoolbar {
left: 0;
right: 0;
text-align: center;
- background-image: url(navbar.png);
+ background: -webkit-linear-gradient(top, #c2cbd7 0%,#8fa0b6 2%,#8b9cb2 19%,#728399 79%,#6c7d93 100%); /* Chrome10+,Safari5.1+ */
border-bottom: 1px solid #777;
background-repeat: repeat-x;
background-position: top left;
@@ -814,9 +837,13 @@ jopopup {
-webkit-box-shadow: 0 0 20px rgba(0, 0, 0, 0.6);
-webkit-border-radius: 5px;
border-radius: 5px;
- *background-color: #c5c5c5;
+ background-color: #c5c5c5;
color: #FFF;
- background-image: url(bluebg_selected.png);
+ background-image: -webkit-gradient(linear, left top, left bottom,
+ color-stop(0, #7d88a5),
+ color-stop(0.5, #3a4e78),
+ color-stop(0.5, #273f6d),
+ color-stop(1, #273f6d));
background-repeat: repeat-x;
background-position: top left;
background-size: 100% 100%;
@@ -836,8 +863,11 @@ jopopup > jotitle {
-webkit-border-top-right-radius: 2px;
-webkit-border-top-left-radius: 2px;
border-radius: 2px 2px 0 0;
- background-image: url(bluebg_selected.png);
- background-color: #c5c5c5;
+ background-image: -webkit-gradient(linear, left top, left bottom,
+ color-stop(0, #7d88a5),
+ color-stop(0.5, #3a4e78),
+ color-stop(0.5, #273f6d),
+ color-stop(1, #273f6d));
background-color: #FFFFFF;
}
@@ -867,11 +897,19 @@ jopopup > joscroller {
}
jopopup > jobutton {
- background-image: url(bluebg.png)
+ /* background-image: url(bluebg.png)*/
+ background-image: -webkit-gradient(linear, left top, left bottom,
+ color-stop(0, #8ea4c1),
+ color-stop(0.5, #5877a2),
+ color-stop(0.5, #476999),
+ color-stop(1, #4a6c9b));
}
jonavbar {
- background-image: url(navbar.png);
+ background-image: -webkit-gradient(linear,
+ 0% 0%, 0% 50%,
+ from(rgba(176, 188, 205, 1)),
+ to(rgba(129, 149, 175, 1)));
border-bottom: 1px solid #777;
background-repeat: repeat-x;
background-position: top left;
@@ -908,23 +946,34 @@ jonavbar > joflexrow {
}
jobackbutton {
border: 1px solid rgba(0, 0, 0, 0.3);
- padding: 6px 10px 4px 10px;
+ padding: 4px 10px 4px 10px;
margin: 5px 10px;
-webkit-border-radius: 3px;
border-radius: 3px;
-webkit-box-shadow: inset 0 0 1px rgba(255, 255, 255, 0.6);
display: none;
color: #ddd;
- background-image: url(bluebg.png);
- background-repeat: repeat-x;
- background-position: top left;
- background-size: 100% 100%;
- -webkit-background-size: 100% 100%;
- text-shadow: rgba(0, 0, 0, 0.5) 0px -1px 0;
+ color: #fff;
+ background: none;
+ background-image: -webkit-gradient(linear, left top, left bottom,
+ color-stop(0, #8ea4c1),
+ color-stop(0.5, #5877a2),
+ color-stop(0.5, #476999),
+ color-stop(1, #4a6c9b));
+ -webkit-border-radius: 6px;
+ border: 1px solid #45505d;
+ -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .25),
+ 0 1px 0 rgba(255, 255, 255, 0.25);
}
jobackbutton.focus, jobackbutton.selected {
- background-color: rgba(0, 0, 0, 0.3);
+ color: #fff;
+ background: none;
+ background-image: -webkit-gradient(linear, left top, left bottom,
+ color-stop(0, #7d88a5),
+ color-stop(0.5, #3a4e78),
+ color-stop(0.5, #273f6d),
+ color-stop(1, #273f6d));
}
jobackbutton.active {
View
BIN samples/jo-badge-sheet/css/ios_expando.png
Deleted file not rendered
View
BIN samples/jo-badge-sheet/css/ios_expando_retina.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
BIN samples/jo-badge-sheet/css/navbar.png
Deleted file not rendered
View
BIN samples/jo-badge-sheet/css/shade-top-split.png
Deleted file not rendered
View
14 samples/jo-badge-sheet/css/slideup.css
@@ -1,14 +0,0 @@
-.slideup
-{
- position:fixed;
- top:-45px;
- left:0px;
- right:0px;
- bottom:0px;
- background-color:#fff;
- z-index:2;
- display:none;
- -webkit-transition: all ease 300ms;
-
-
-}
View
33 samples/jo-badge-sheet/css/tabbar.css
@@ -26,6 +26,7 @@ jotabbar > jotab {
outline-color: transparent;
padding: 10px 30px;
width: auto;
+ width: 30px;
background-position:center;
background-size: auto;
-webkit-background-size: auto;
@@ -33,6 +34,8 @@ jotabbar > jotab {
opacity: 0.9;
color: white;
position: relative;
+ posiiton: absolute;
+ -webkit-background-size: 32px 32px;
}
jotab:first-child {
@@ -51,52 +54,44 @@ jotab.selected {
background-position: center;
background-size: auto;
-webkit-background-size:auto;
+ -webkit-background-size: 32px 32px;
opacity: 0.9;
}
.doc {
- background-image: url("document_alt_stroke_24x32.png");
+ background-image: url("document_alt_stroke.png");
}
.about {
- background-image : url("book_32x24.png");
+ background-image: url("book_alt2.png");
}
/* Badge CSS based on code at http://stackoverflow.com/questions/7885160/jquerymobile-custom-navigation.*/
.badge {
position:relative;
- top: -9px;
+ top: -15px;
right: -15px;
background: red;
width: 16px;
height: 16px;
z-index: 20000;
- border: 0.15em solid #ffffff;
+ border: 0.20em solid #ffffff;
-webkit-border-radius: 9px;
line-height: 16px;
color: #ffffff;
- font-size: 90%;
+ font-size: 80%;
text-shadow: none;
font-weight: bold;
font-family: helvetica;
text-align: center;
min-width: 16px;
+ max-width: 45px;
width: auto;
- display: inline-block;
+ display: inline-block;
+ white-space: nowrap;
+ overflow: hidden;
+ text-overflow: ellipsis;
}
-/*These are the CSS classes for the action-sheet animation.*/
-jostack > .up {
- z-index: -1;
- -webkit-transform: translatey(100%) translatez(0);
- height: 100%;
- overflow: hidden;
-}
-jostack > .down {
- z-index: 1;
- -webkit-transform: translatey(-100%) translatez(0);
- height: 100%;
- overflow: hidden;
-}
View
181 samples/jo-badge-sheet/jo-badge-sheet.js
@@ -1,4 +1,4 @@
-/*Jo badge/sheet demo: this is designed to show how Jo can be customized via scripts and CSS to to fit in with iOS UI conventions. This demo makes use of a tab bar for navigation, includes a notification badge on the tab button, and includes a slideup/slidedown "action sheet" dialog. (c) 2012, Kevin Walzer/WordTech Communications LLC.*/
+/*Jo badge/sheet demo: this is designed to show how Jo can be customized via scripts and CSS to to fit in with iOS UI conventions. This demo makes use of a tab bar for navigation, and includes a notification badge on the tab button. (c) 2012, Kevin Walzer/WordTech Communications LLC.*/
/*Start app.*/
@@ -19,7 +19,7 @@ joTabBar.extend(joList, {
o.className = data.type;
if (data.badge)
- o.innerHTML = "<div class='badge'>" + data.badge + "</div>";
+ o.innerHTML = "<span class='badge'>" + data.badge + "</span>";
o.setAttribute("index", index);
@@ -28,146 +28,7 @@ joTabBar.extend(joList, {
});
-/*Implement "action sheet" to slide up/down instead of right/left. To do this, we have to implement the sheet as a subclass of joStackScroller to handle scrolling correctly, and also implement some modified methods from joStack. The implementation replaces hard-coded "next" and "prev" CSS classes with "up/down." This solution is effective for this use-case. It would be nice to have a more general mechanism for specifying animations but Jo does not currently support this. */
-
-var joSheetStack = function() {
- // call to the superclass constructor
- joStackScroller.apply(this, arguments);
-};
-
-joSheetStack.extend(joStackScroller, {
-
- drawsheet: function() {
- if (!this.container)
- this.createContainer();
-
- if (!this.data || !this.data.length)
- return;
-
- // short term hack for webos
- // not happy with it but works for now
- jo.flag.stopback = this.index ? true : false;
-
- var container = this.container;
- var oldchild = this.lastNode;
- var newnode = getnode(this.data[this.index]);
- var newchild = this.getChildStyleContainer(newnode);
-
- function getnode(o) {
- return (o instanceof joView) ? o.container : o;
- }
-
- if (!newchild)
- return;
-
- var oldclass, newclass;
-
- if (this.index > this.lastIndex) {
-
- oldclass = "down";
- newclass = "up";
- joDOM.addCSSClass(newchild, newclass);
- }
- else if (this.index < this.lastIndex) {
- oldclass = "up";
- newclass = "down";
- joDOM.addCSSClass(newchild, newclass);
- }
-
- this.appendChild(newnode);
-
- var self = this;
- var transitionevent = null;
-
- joDefer(animatesheet, this, 1);
-
- function animatesheet() {
- // FIXME: AHHH must have some sort of transition for this to work,
- // need to check computed style for transition to make this
- // better
- if (typeof window.onwebkittransitionend !== 'undefined')
- transitionevent = joEvent.on(newchild, "webkitTransitionEnd", cleanupsheet, self);
- else
- joDefer(cleanupsheet, this, 200);
-
- if (newclass && newchild)
- joDOM.removeCSSClass(newchild, newclass);
-
- if (oldclass && oldchild)
- joDOM.addCSSClass(oldchild, oldclass);
- }
-
-
- function cleanupsheet() {
- if (oldchild) {
- joDOM.removeCSSClass(oldchild,"up");
- joDOM.removeCSSClass(oldchild, "down");
- self.removeChild(oldchild);
- }
-
- if (newchild) {
- if (transitionevent)
- joEvent.remove(newchild, "webkitTransitionEnd", transitionevent);
-
- joDOM.removeCSSClass(newchild, "up");
- joDOM.removeCSSClass(newchild, "down");
- }
- }
-
- if (typeof this.data[this.index].activate !== "undefined")
- this.data[this.index].activate.call(this.data[this.index]);
-
- this.lastIndex = this.index;
- this.lastNode = newchild;
-
- return this;
- },
-
-
- pushsheet: function(o) {
-
- // don't push the same view we already have
- if (this.data && this.data.length && this.data[this.data.length - 1] === o)
- return this;
-
- this.switchScroller();
- joDOM.removeCSSClass(o, 'flick');
- joDOM.removeCSSClass(o, 'flickback');
-
- this.scroller.setData(o);
- this.scroller.scrollTo(0, true);
-
- this.data.push(o);
- this.index = this.data.length - 1;
- this.drawsheet();
- this.pushEvent.fire(o);
-
- return this;
-
- },
-
- popsheet: function(o) {
- if (this.data.length > this.locked) {
- this.switchScroller();
- var o = this.data.pop();
- this.index = this.data.length - 1;
-
- this.drawsheet();
-
- if (typeof o.deactivate === "function")
- o.deactivate.call(o);
-
- if (!this.data.length)
- this.hide();
- }
-
- if (this.data.length > 0)
- this.popEvent.fire();
-
- return this;
- }
-});
/*Now we get to the demo itself.*/
@@ -210,29 +71,32 @@ var App = (function () {
new joTitle("Badge/Sheet Demo"),
new joGroup([
new joLabel("<strong>Notification</strong>"),
- new joFlexrow(badgetext = new joInput("Enter badge text here")),
+ new joFlexrow(badgetext = new joInput()),
badgebutton = new joButton('Enter'),
-] ),
+]),
new joDivider(),
slidebutton = new joButton('Display Action Sheet'),
- ])
- );
+ ])
+ );
+
+
+ badgetext.container.placeholder='Enter badge text here';
- /*Action sheet that slides up.*/
- slideCard = new joCard([
+ /*Action alert that slides up.*/
+ slideCard = [
+ new joTitle('Action Sheet'),
new joHTML('E-mail a friend about Jo.'),
new joDivider(),
mailbutton = new joButton('E-mail'),
- new joDivider(),
-
+ new joDivider(),
closebutton = new joButton('Close Sheet'),
- ]);
+ ];
/*About Jo.*/
aboutCard = new joCard([
new joTitle('About Jo'),
- datastring = new joHTML('This is a demonstration of some of the customization you can do with the Jo JavaScript framework. This demo is displays some iOS-style touches such as a tab bar for navigation, a notification badge on the tab icon, and an action-sheet dialog.'),
+ datastring = new joHTML('This is a demonstration of some of the customization you can do with the Jo JavaScript framework. This demo displays some iOS-style touches such as a tab bar for navigation, a notification badge on the tab icon, and an action-sheet dialog.'),
]);
@@ -253,21 +117,12 @@ var App = (function () {
/*Show action sheet.*/
slidebutton.selectEvent.subscribe(function() {
- menu.setStyle({display:"none"});
- stack.pushsheet(slideCard);
+ scn.showPopup(slideCard);
})
/*Hide action sheet.*/
closebutton.selectEvent.subscribe(function() {
- stack.popsheet(slideCard);
-
- menu.setData([{type : "doc", badge: badgetext.getData(),},
- {type : "about"}
- ]);
- menu.setStyle({
- display:"-webkit-box",
-
- });
+ scn.hidePopup(slideCard);
menu.refresh();
})
@@ -275,7 +130,7 @@ var App = (function () {
// Set up the page elements
scn = new joScreen(
new joContainer([
- stack = new joSheetStack(),
+ stack = new joStackScroller(),
menu = new joTabBar([
{type : "doc", badge: "Badge"},

No commit comments for this range

Something went wrong with that request. Please try again.