simon/mw-ui
1
0
Fork 0
Code Issues Pull requests Actions Packages Projects Releases Wiki Activity

Sort of semi-working UI.

Browse source
This commit is contained in:
simon 2014-07-02 21:54:35 +01:00
parent 8a9aae56e0
commit ce2a04477a
12 changed files with 407 additions and 86 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

94
resources/public/css/form.css Normal file
View file

@ -0,0 +1,94 @@
.form-all{list-style:none;list-style-position:outside;margin:0px;font-family:Verdana;font-size:12px}.form-captcha{border:1px
solid #ccc;background:#f5f5f5;padding:6px;width:152px;-moz-border-radius:4px 4px 4px 4px;-webkit-border-radius:4px;border-radius:4px 4px 4px 4px}#payment_total{display:inline-block}#coupon-message{font-size:10px;font-weight:normal;white-space:normal}.form-captcha:hover{border:1px
solid #aaa}.form-captcha-image{border:1px
solid #aaa;-moz-border-radius:4px 4px 4px 4px;-webkit-border-radius:4px;border-radius:4px 4px 4px 4px}.form-collapse-table{height:58px;border:1px
solid #ccc;background:#f5f5f5 url(/images/soft-grad.png) repeat-x;position:relative}.form-list{padding:3px;border:1px
solid #CCC;-moz-box-shadow:0 1px 1px rgba(0, 0, 0, 0.2) inset;-webkit-box-shadow:0 1px 1px rgba(0, 0, 0, 0.2) inset;box-shadow:0 1px 1px rgba(0, 0, 0, 0.2) inset}.form-list
option{padding:2px}.form-list option:nth-child(2n+1){background:#f5f5f5}.form-textarea{font-family:"Lucida Grande",Verdana}.form-textarea-limit{}.form-textarea-limit>span{display:inline-block}.form-textarea-limit
textarea{overflow:auto}.form-textarea-limit textarea:focus{outline:none !important}.form-textarea-limit-indicator{color:#666;font-size:9px;margin-top: -1px;padding:2px;text-align:right}.form-textarea-limit-indicator-error{background:#FAA;color:#fff}.nicEdit-main{background-color:white}.form-datetime-validation-error{background:#FAA;color:#fff}.form-collapse-left{}.form-collapse-mid{text-shadow:0px 2px 0px #fff;float:left;font-size:18px;margin:16px
45px 16px 20px}.form-product-item{display:inline-block;padding:5px
5px 5px 10px;position:relative}.form-product-item
img{display:block;position:static;margin:0
12px 0 0;float:left;-moz-border-radius:3px 3px;-webkit-border-radius:3px 3px;border-radius:3px 3px}.hover-product-item:hover{background:#f5f5f5;color:#000}.form-product-item label, .form-product-item .form-radio, .form-product-item .form-checkbox{cursor:pointer}.form-special-subtotal{display:block;font-size:10px;margin-left:10px;margin-top:6px}.form-product-image,.form-product-image-with-options{margin:5px;margin-left:10px}.form-product-image-with-options{position:absolute;top:15px;-moz-border-radius:5px 5px;-webkit-border-radius:5px 5px;border-radius:5px 5px}.form-radio,.form-checkbox{vertical-align:middle;margin:0px;padding:0px}.form-radio-item,.form-checkbox-item{margin-top:5px;float:left}.form-multiple-column,.form-single-column{display:inline-block}.form-multiple-column .form-radio-item, .form-multiple-column .form-checkbox-item{width:150px}.form-radio-item label, .form-checkbox-item
label{margin-left:5px}.form-radio-item br, .form-checkbox-item
br{clear:left}.form-submit-button,.form-submit-reset,.form-submit-print,.form-screen-button{margin:0px;overflow:visible;padding:1px
6px;width:auto}.form-submit-button::-moz-focus-inner,.form-submit-reset::-moz-focus-inner{border:0px;padding:1px
6px}.form-button-red{border:1px
solid red}.form-button-magenta{border:1px
solid magenta}.form-screen-message{width:260px;height:100px}.form-screen-button
div{background-image:url("/images/photo.png");background-position:center;background-repeat:no-repeat;height:50px;width:50px}.form-screen-button{position:absolute;top:1px;margin:0px;margin-left:10px;padding:0px;background:#fdc000;background: -moz-linear-gradient(top, #fdc000 0%, #fe8900 100%);background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fdc000), color-stop(100%,#fe8900));background: -webkit-linear-gradient(top, #fdc000 0%,#fe8900 100%);background: -o-linear-gradient(top, #fdc000 0%,#fe8900 100%);background: -ms-linear-gradient(top, #fdc000 0%,#fe8900 100%);filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#fdc000', endColorstr='#fe8900',GradientType=0 );background:linear-gradient(top, #fdc000 0%,#fe8900 100%);-moz-box-shadow:0 1px 0 rgba(255, 255, 255, .6), 0 1px 0 rgba(255,255,255,.6) inset;-webkit-box-shadow:0 1px 0 rgba(255, 255, 255, .6), 0 1px 0 rgba(255,255,255,.6) inset;box-shadow:0 1px 0 rgba(255, 255, 255, .6), 0 1px 0 rgba(255,255,255,.6) inset;border:1px
solid #ae5d00;border-radius:5px}.form-screen-button:hover{background:#fcc932;background: -moz-linear-gradient(top, #fcc932 0%, #fc9e32 100%);background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fcc932), color-stop(100%,#fc9e32));background: -webkit-linear-gradient(top, #fcc932 0%,#fc9e32 100%);background: -o-linear-gradient(top, #fcc932 0%,#fc9e32 100%);background: -ms-linear-gradient(top, #fcc932 0%,#fc9e32 100%);filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#fcc932', endColorstr='#fc9e32',GradientType=0 );background:linear-gradient(top, #fcc932 0%,#fc9e32 100%);border:1px
solid #ae5d00}.form-screen-button:active{background:#fe8900;background: -moz-linear-gradient(top, #fe8900 0%, #fdc000 100%);background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fe8900), color-stop(100%,#fdc000));background: -webkit-linear-gradient(top, #fe8900 0%,#fdc000 100%);background: -o-linear-gradient(top, #fe8900 0%,#fdc000 100%);background: -ms-linear-gradient(top, #fe8900 0%,#fdc000 100%);filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#fe8900', endColorstr='#fdc000',GradientType=0 );background:linear-gradient(top, #fe8900 0%,#fdc000 100%);border:1px
solid #C56600;-moz-box-shadow:0 1px 0 rgba(255, 255, 255, .6), 0 -1px 0 rgba(255,255,255,.6) inset;-webkit-box-shadow:0 1px 0 rgba(255, 255, 255, .6), 0 -1px 0 rgba(255,255,255,.6) inset;box-shadow:0 1px 0 rgba(255, 255, 255, .6), 0 -1px 0 rgba(255,255,255,.6) inset}.form-screenshot-plate{background:url("/images/noises/defaultdesktop.png") repeat scroll 0 0 transparent;border:2px
solid #545454;border-radius:3px 3px 3px 3px;box-shadow:0 0 5px rgba(0, 0, 0, 0.7) inset;margin:10px
0;text-align:center}.form-screenshot-img{box-shadow:0 0 5px rgba(0, 0, 0, 0.7);margin:14px
0;display:inline-block}.form-screenshot-img
img{}.form-submit-print::-moz-focus-inner{padding:0px
6px}.form-submit-print{padding:1px
6px}.form-submit-print
img{margin-left: -14px;margin-right:3px;margin-top: -3px}.form-submit-print{margin-bottom: -4px;margin-top: -6px;margin-left: -6px;margin-right:5px}.form-submit-button-img{border:none !important;margin:0
!important;padding:0
!important;background:none !important;cursor:pointer !important}.form-collapse-right{position:absolute;right:0px;height:58px;width:40px}.form-collapse-right-show{background:url(/images/arrow-open.png) no-repeat center}.form-collapse-right-hide{background:url(/images/arrow-closed.png) no-repeat center}.form-collapse-hidden{display:none}.form-grading-item{margin-bottom:3px}.form-header{margin:0px}.form-footer{margin:0px;text-align:center;font-size:9px;color:#999;font-weight:300}.form-subHeader{border-top:1px solid #ccc;font-style:italic}.form-header-group{background:#f5f5f5;border-bottom:1px solid #ccc;padding:12px;clear:both}.form-footer-group{padding:12px;clear:both}.form-label{width:150px;margin-bottom:6px;display:inline-block;white-space:normal}.form-label-top{margin-bottom:6px;display:block;white-space:normal}.form-label-left{float:left;display:inline-block;text-align:left;padding:3px;white-space:normal}.form-label-right{float:left;display:inline-block;text-align:right;margin-bottom:6px;padding:3px;white-space:normal}.form-input-wide{}.form-section,.form-section-closed{list-style:none;list-style-position:outside;margin:0px;padding:0px;position:relative;zoom:1;clear:both}.form-section-closed{overflow:hidden;height:60px}.form-input{display:inline-block}.form-line{clear:both;padding:10px;margin:0px;display:block;width:97%;width:-moz-available;position:relative}.form-line-column{float:left;clear:none;width:auto;white-space:nowrap}.form-line.form-line-column{display:inline-block}.form-line-column-clear{clear:left;width:auto}.form-line-active{background-color:#FFFFE0;color:#333}.form-matrix-table{border-collapse:collapse;font-size:10px;margin-bottom:5px}.form-matrix-column-headers{border:1px
solid #ccc;background:#ddd;color:inherit;text-align:center}.form-matrix-row-headers{border:1px
solid #ccc;background:#ddd}.form-matrix-values{border:1px
solid #ccc;background:#f5f5f5}.form-pagebreak{border-top:1px solid #ccc;background:#f5f5f5;height:60px;clear:left}.form-pagebreak-back-container,.form-pagebreak-next-container{float:left;padding:10px;padding-top:14px}.form-pagebreak-next-container{padding-left:0px}.form-pagebreak-back,.form-pagebreak-next{-webkit-border-radius:5px 5px;-webkit-box-shadow:0px 1px 2px #aaa;-moz-border-radius:5px 5px;-moz-box-shadow:0px 1px 2px #aaa;border-radius:5px 5px;box-shadow:0px 1px 2px #aaa;border:1px
solid #999;background:#ddd;padding:5px;margin:0px;font-size:14px}.form-pagebreak-next{margin:0
0 0 20px}.button-hidden{display:none}.form-required{margin-left:5px;color:red}.form-scale-table{font-size:12px}.form-scale-table
th{border-bottom:1px solid #ccc;color:#999}.form-product-details{font-size:9px;color:#999;font-style:italic}.form-address-table{width:330px}.form-address-line{width:310px}.form-address-city,.form-address-state{width:144px}.form-address-table td, .form-address-table
th{padding-bottom:10px}.form-address-table
select{width:150px}.form-button-error{color:red;display:inline;text-align:center}.form-pagebreak>.form-button-error{padding:14px
10px 10px;display:block}.form-line-error{background:#FAA;color:#333}.form-line-error input:not(#coupon-input), .form-line-error textarea,.form-validation-error{border:1px
solid red;-moz-box-shadow:0 0 2px red;-webkit-box-shadow:0 0 2px red;box-shadow:0 0 2px red}.form-validation-error.form-input{border:none}.form-line-active .form-error-message{display:none}.form-error-message{z-index:900;position:absolute;max-width:130px;right:0px;top:0px;color:#333;padding:3px;font-size:10px;border:4px
solid #d88;-webkit-box-shadow:0px 2px 4px rgba(102, 102, 102, 0.5);-webkit-border-radius:6px 6px;-moz-box-shadow:0px 2px 4px rgba(102, 102, 102, 0.5);-moz-border-radius:6px 6px;box-shadow:0px 2px 4px rgba(102, 102, 102, 0.5);border-radius:6px 6px;background:#FCC}.form-error-arrow{position:absolute;top:-20px;left:10px;height:0px;width:0px;border:10px
solid transparent;border-bottom-color:#666;border-bottom:10px solid rgba(102,102,102,0.3)}.form-error-arrow-inner{position:absolute;top:1px;height:0px;width:0px;border:10px
solid transparent;border-bottom-color:#FCC;border-bottom-width:11px;left:-10px;top:-10px}.form-input .form-error-message, .form-input-wide .form-error-message{bottom:-5px;font-size:11px;position:relative;z-index:900;right:auto;top:auto;color:#333;padding:3px;max-width:100%;padding-bottom:3px;font-size:12px;border:none;-moz-box-shadow:0px 2px 4px rgba(102, 102, 102, 0.5);-webkit-box-shadow:0px 2px 4px rgba(102, 102, 102, 0.5);-moz-border-radius:6px 6px;-webkit-border-radius:6px 6px;box-shadow:0px 2px 4px rgba(102, 102, 102, 0.5);border-radius:6px 6px;background:#FCC}.form-description{z-index:1000;position:absolute;right:7px;max-width:150px;top:6px;border:4px
solid #ccc;-webkit-border-radius:6px 6px;-webkit-box-shadow:0px 2px 4px #666;-moz-border-radius:6px 6px;-moz-box-shadow:0px 2px 4px #666;border-radius:6px 6px;box-shadow:0px 2px 4px #666;background:#f5f5f5;white-space:normal}.form-description-content{padding:10px;font-size:10px;color:#333}.form-description-arrow{border-color:transparent #CCC transparent transparent;border-style:solid;border-width:10px;height:0;width:0;left:-24px;top:7px;position:absolute}.form-description-arrow-small{border-color:transparent #F5F5F5 transparent transparent;border-style:solid;border-width:7px;height:0;width:0;left:-14px;top:10px;position:absolute}.right{right:33px !important;float:none !important}.form-line:hover .form-description-indicator, .form-line-active .form-description-indicator{display:block}.form-description-indicator{display:none;height:100%;position:absolute;right:0;top:0;width:25px;background:url(/images/s-info.png) no-repeat center}.right .form-description-arrow{border-color:transparent transparent transparent #CCC;left:auto;right:-24px}.right .form-description-arrow-small{border-color:transparent transparent transparent #F5F5F5;left:auto;right:-14px}.form-autocomplete-list{font-family:Verdana,Geneva,Arial,Helvetica,sans-serif;font-size:12px;background:#333;background:rgba(26,58,81,0.8);border:1px
solid #eee;border-top:none;padding:5px
0;-moz-border-radius-bottomright:10px 10px;-moz-border-radius-bottomleft:10px 10px;-moz-box-shadow:0px 5px 10px rgba(0,0,0,0.6);-webkit-border-bottom-right-radius:10px 10px;-webkit-border-bottom-left-radius:10px 10px;-webkit-box-shadow:0px 5px 10px rgba(0,0,0,0.6);border-radius-bottom-right:10px 10px;border-radius-bottom-left:10px 10px;box-shadow:0px 5px 10px rgba(0,0,0,0.6)}.form-autocomplete-list-item{margin:0
5px;border:1px
solid transparent;color:#fff;padding:3px;-moz-border-radius:5px 5px;-webkit-border-radius:5px;border-radius:5px 5px;text-shadow:1px 1px 3px #000;cursor:pointer}.form-autocomplete-list-item-selected,.form-autocomplete-list-item:hover{-moz-box-shadow:0 0 4px #333;-webkit-box-shadow:0 0 4px #333;box-shadow:0 0 4px #333;border:1px
solid #1a3a51;background:#4295D1}.form-autocomplete-list-item:hover{border:1px
solid #ccc}.form-sub-label-container{display:inline-block;margin-right:5px;white-space:nowrap}.form-sub-label{color:#999;display:block;font-size:9px}.form-html{padding:3px;white-space:normal}.form-radio-other-input,.form.checkbox-other-input{margin-left:5px}.form-spinner-input-td{white-space:normal}.form-spinner-input-td input[type="number"]::-webkit-inner-spin-button,
.form-spinner-input-td input[type="number"]::-webkit-outer-spin-button{display:none}.edit-hover{display:none}.form-custom-hint{color:#aaa !important;overflow:hidden !important}.filePicker-button{border-style:solid;border-width:1px;border-color:rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);cursor:pointer;display:inline-block;vertical-align:middle;padding:9px
24px;margin-bottom:0;font-size:13px;line-height:18px;text-align:center;color:#FFF;text-shadow:0 -1px 0 rgba(0, 0, 0, 0.25);background:#0074CC;background: -moz-linear-gradient(top, #08c 0%, #05c 100%);background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#0088cc), color-stop(100%,#0055cc));background: -webkit-linear-gradient(top, #08c 0%,#05c 100%);background: -o-linear-gradient(top, #08c 0%,#05c 100%);background: -ms-linear-gradient(top, #08c 0%,#05c 100%);background:linear-gradient(to bottom, #08c 0%,#05c 100%);filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#0088cc', endColorstr='#0055cc',GradientType=0 );-moz-border-radius:4px;-webkit-border-radius:4px;border-radius:4px;-moz-box-shadow:0 1px 0 rgba(255, 255, 255, 0.2) inset, 0 1px 2px rgba(0, 0, 0, 0.05);-webkit-box-shadow:0 1px 0 rgba(255, 255, 255, 0.2) inset, 0 1px 2px rgba(0, 0, 0, 0.05);box-shadow:0 1px 0 rgba(255, 255, 255, 0.2) inset, 0 1px 2px rgba(0,0,0,0.05)}.filePicker-button:hover{background:#00a0f0;background: -moz-linear-gradient(top, #00a0f0 0%, #0064f0 100%);background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#00a0f0), color-stop(100%,#0064f0));background: -webkit-linear-gradient(top, #00a0f0 0%,#0064f0 100%);background: -o-linear-gradient(top, #00a0f0 0%,#0064f0 100%);background: -ms-linear-gradient(top, #00a0f0 0%,#0064f0 100%);background:linear-gradient(to bottom, #00a0f0 0%,#0064f0 100%);filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#00a0f0', endColorstr='#0064f0',GradientType=0 )}.filePicker-button:active{background:#0064f0;background: -moz-linear-gradient(top, #0064f0 0%, #00a0f0 100%);background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#0064f0), color-stop(100%,#00a0f0));background: -webkit-linear-gradient(top, #0064f0 0%,#00a0f0 100%);background: -o-linear-gradient(top, #0064f0 0%,#00a0f0 100%);background: -ms-linear-gradient(top, #0064f0 0%,#00a0f0 100%);background:linear-gradient(to bottom, #0064f0 0%,#00a0f0 100%);filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#0064f0', endColorstr='#00a0f0',GradientType=0 )}.qq-uploader{position:relative;width:224px}.qq-upload-button{background:#ffa84c;background: -moz-linear-gradient(top, #FBCB5D 0%, #EFA003 100%);background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#FBCB5D), color-stop(100%,#EFA003));filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#FBCB5D', endColorstr='#EFA003',GradientType=0 );color:#FFF;display:block;font-size:16px;padding:8px
0;text-align:center;text-shadow:0 -1px #C64F00;border:1px
solid #C64F00;-moz-border-radius:5px 5px;-webkit-border-radius:5px 5px;border-radius:5px 5px}.qq-upload-button-hover{background:#ff7b0d;background: -moz-linear-gradient(top, #ff7b0d 0%, #ffa84c 100%);background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ff7b0d), color-stop(100%,#ffa84c));filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff7b0d', endColorstr='#ffa84c',GradientType=0 )}.qq-upload-button-focus{outline:1px
dotted black}.qq-upload-delete{display:none;top:0px;position:absolute;background:#f85032;background: -moz-linear-gradient(top, #f85032 0%, #f16f5c 50%, #f6290c 51%, #f02f17 71%, #e73827 100%);background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f85032), color-stop(50%,#f16f5c), color-stop(51%,#f6290c), color-stop(71%,#f02f17), color-stop(100%,#e73827));filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#f85032', endColorstr='#e73827',GradientType=0 );width:20px;height:20px;right:0px;color:#fff;line-height:18px;text-align:center;text-shadow:0 -1px 0px #000;-moz-border-radius:0px 5px 5px 0px;-webkit-border-radius:0px 5px 5px 0px;border-radius:0px 5px 5px 0px;border-left:1px solid #aaa;cursor:pointer}.qq-upload-delete:hover{background:#ffb76b;background: -moz-linear-gradient(top, #ffb76b 0%, #ffa73d 50%, #ff7c00 51%, #ff7f04 100%);background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffb76b), color-stop(50%,#ffa73d), color-stop(51%,#ff7c00), color-stop(100%,#ff7f04));filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffb76b', endColorstr='#ff7f04',GradientType=0 )}.qq-upload-list li:hover{border:1px
solid #aaa}.qq-upload-list li:hover .qq-upload-delete{display:block}.qq-upload-drop-area{position:absolute;top:0;left:0;width:100%;height:100%;min-height:54px;z-index:2;background:#F5F5F5;background:rgba(240, 240, 240, 0.9);text-align:center;color:#B1B1B1;border:2px
dashed #c5c5c5;-moz-border-radius:5px 5px;-webkit-border-radius:5px 5px;border-radius:5px 5px}.qq-upload-drop-area
span{display:block;position:absolute;top:50%;width:100%;margin-top:-10px;font-size:16px}.qq-upload-drop-area-active{background:lightyellow;background:rgba(222,255,210,0.9)}.qq-upload-list{margin:10px
0;padding:0;list-style:none}.qq-upload-list
li{position:relative;font-size:11px;margin:8px
0;color:#5E5B5B;padding:2px
4px;background:#EEE;-moz-border-radius:5px 5px;-webkit-border-radius:5px 5px;border-radius:5px 5px;white-space:normal;border:1px
solid transparent}.qq-upload-file,.qq-upload-spinner,.qq-upload-size,.qq-upload-cancel,.qq-upload-failed-text{font-size:9px;line-height:16px}.qq-file-uploading{display:inline-block;overflow:hidden;white-space:nowrap;width:80px}.qq-upload-failed-text{float:right}.qq-upload-fail{background:#FF927D !important;color:#fff !important}.qq-upload-fail .qq-upload-size{display:none !important}.qq-upload-file{}.qq-upload-spinner{display:inline-block;background:url("/images/loading.gif");width:15px;height:15px;vertical-align:text-bottom;margin-bottom:3px;margin-left:2px}.qq-upload-size,.qq-upload-cancel{float:right;margin-left:4px}.qq-upload-failed-text{display:none}.qq-upload-fail .qq-upload-failed-text{display:inline}.fb-login-wrapper{}.fb-align-auto,.fb-align-center{}.fb-align-left{}.fb-align-right{}.fb-login-label{color:#888;font-size:11px;line-height:23px}.fb-login-button{}.paypalpro_img{width:40px;height:26px;padding-right:7px}.paypalpro_visa{background:url('/images/credit-card-logo.png') no-repeat 0 0}.paypalpro_mc{background:url('/images/credit-card-logo.png') no-repeat -47px 0}.paypalpro_amex{background:url('/images/credit-card-logo.png') no-repeat -94px 0}.paypalpro_dc{background:url('/images/credit-card-logo.png') no-repeat -141px 0}#recaptcha_logo{display:none}#recaptcha_tagline{display:none}#recaptcha_table{border:none !important}.recaptchatable .recaptcha_image_cell,#recaptcha_table{background-color:transparent !important}#recaptcha_table
td{padding-left:0px !important}.form-single-column
.clearfix{display:inline-block}.form-single-column
.clearfix{display:block}@media only screen and (max-device-width: 550px){body{font-size:18px}.form-all{width:auto !important}.form-label-left{float:none;display:block}.form-buttons-wrapper{margin:5px
!important;text-align:center}.form-submit-print{display:none}.form-textarea{width:94% !important}.form-textbox,.form-textarea,.form-dropdown,.form-list{border:1px
solid #555;padding:4px;-webkit-border-radius:5px 5px;-webkit-box-shadow:0 2px 4px rgba(0,0,0, 0.4) inset;-moz-border-radius:5px 5px;-moz-box-shadow:0 2px 4px rgba(0,0,0, 0.4) inset;border-radius:5px 5px;box-shadow:0 2px 4px rgba(0,0,0, 0.4) inset}.form-address-table{width:300px}.form-address-line{width:280px}.form-address-city,.form-address-state{width:130px}.form-address-table td, .form-address-table
th{padding-bottom:10px}.form-address-table
select{width:120px}.form-spinner{border-collapse:inherit !important;border:1px
solid #555 !important;-webkit-border-radius:5px 5px;-webkit-box-shadow:0 2px 4px rgba(0,0,0, 0.4) inset;-moz-border-radius:5px 5px;-moz-box-shadow:0 2px 4px rgba(0,0,0, 0.4) inset;border-radius:5px 5px;box-shadow:0 2px 4px rgba(0,0,0, 0.4) inset}.form-spinner-up,.form-spinner-down{padding:0
8px !important;border:none !important;border-left:1px solid #555 !important}.form-spinner-up{-moz-border-radius-topright:5px 5px;-webkit-border-top-right-radius:5px 5px;border-top-right-radius:5px 5px;border-bottom:1px solid #555 !important}.form-spinner-down{-moz-border-radius-bottomright:5px 5px;-webkit-border-bottom-right-radius:5px 5px;border-bottom-right-radius:5px 5px}.form-spinner-input-td{padding-right:6px !important}.form-spinner-input-td
input{padding:4px
!important;background:none}.form-sub-label-container img[id*="pick"]{width:25px}div.form-header-group{margin:0px
!important}div.form-pagebreak .form-label-left{display:inline-block !important;float:left}.form-submit-button,.form-submit-reset{font-size:18px;line-height:30px}.form-captcha{border:1px
solid #555}.form-captcha
input{width:120px !important}}.clearfix2:before,.clearfix2:after{content:" ";display:table}.clearfix2:after{clear:both}div.calendar{color:#000;font-family:Verdana,Geneva,Arial,Helvetica,sans-serif;-moz-box-shadow:0px 0px 8px rgba(0, 0, 0, 0.5);-webkit-box-shadow:0px 0px 8px rgba(0, 0, 0, 0.5);box-shadow:0px 0px 8px rgba(0,0,0,0.5)}div.calendar.popup{margin-left: -40px;margin-top: -100px;z-index:100000}div.calendar
td.weekend{background:#b5cfe9}div.calendar
.today{background:#f9621a !important}div.calendar .title, div.calendar
.button{color:#f9621a}div.calendar
table{background-color:#eee;border:1px
solid #aaa;border-collapse:collapse}div.calendar
thead{background-color:white}div.calendar td,
div.calendar
th{font-size:11px;padding:3px;text-align:center}div.calendar
td.title{font-weight:bold}div.calendar
th{background:#ddd;border-bottom:1px solid #ccc;border-top:1px solid #ccc;font-weight:bold;color:#555}div.calendar tr.days
td{width:2em;color:#555;text-align:center;cursor:pointer}div.calendar tr.days td:hover,
div.calendar td.button:hover{background-color:#34ABFA;cursor:pointer}div.calendar tr.days td:active
div.calendar td.button:active{background-color:#cde}div.calendar tr.days
td.selected{font-weight:bold;background-color:#fff;color:#000}div.calendar tr.days
td.today{font-weight:bold;color:#D50000}div.calendar tr.days
td.otherDay{color:#bbb}

50
resources/public/css/override.css Normal file
View file

@ -0,0 +1,50 @@
/**
* CSS rules added to override those in existing stylesheets in the interests of better look'n'feel
*/
/* this lot taken from an embedded style element within the jot form */
.form-label{
/* width:149px !important; */
}
.form-label-left{
/* width:149px !important; */
}
.form-line{
list-style: none;
margin: 0.5 0.5em;
/* padding-top:12px;
padding-bottom:12px; */
}
.form-label-right{
/* width:149px !important; */
}
body, html{
margin:0;
padding:0;
background:false;
}
.form-all{
margin:0px auto;
/* padding-top:20px;
width:390px; */
color:#555 !important;
font-family:'Arial';
/* font-size:12px; */
}
.form-radio-item label, .form-checkbox-item label, .form-grading-label, .form-header {
color:#555;
}
.form-required {
color: red;
}
/* end of group from the embedded style element within the jot form */

6
resources/public/css/screen.css
View file

@ -1,6 +0,0 @@
html,
body {
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
height: 100%;
padding-top: 40px;
}

144
resources/public/css/standard.css Normal file
View file

@ -0,0 +1,144 @@
body {
font-family: sans-serif;
}
/* ids generally in document order */
/* Overall container div, holds all content of page. Yes, I know it shouldn't have fixed width */
#main-container{
clear: both;
width:80%;
margin: 0 10%;
padding: 0;
padding-top: 8em;
padding-bottom: 2em;
}
/* footer of the document, within #main-container */
#footer {
clear: both;
padding: 0 2em;
text-align: center;
color:white;
background:rgba(196,196,196,0.95);
width: 100%;
margin: 0;
bottom:0;
position:fixed;
z-index:150;
_position:absolute;
_top:expression(eval(document.documentElement.scrollTop+
(document.documentElement.clientHeight-this.offsetHeight)));
}
#header {
width:100%;
margin: 0;
padding: 0.5em 10%;
position: fixed;
z-index: 149;
background-color: black;
color: white;
}
#header-logo {
float: left;
padding-right: 2.5em;
}
#nav{
float: left;
margin: 0;
min-height: 56px;
width: 60%;
}
#nav ul li {
padding: 0;
margin: 0;
display: inline;
}
.nav-item a { color: rgb(64, 64, 64);
text-decoration: none;
font-weight: normal;
padding: 0.25em 0.75em;
margin: 0;
}
#nav ul li.active a { background: silver;}
li.nav-item a:hover { background: rgb( 240, 240, 240) }
li.nav-item a:active { background: gray; color: white; }
.error {
background-color: #663399;;
color: white;
}
.widget {
margin: 0;
padding: 0.25em 1em;
border: thin solid white;
}
div.error {
width: 100%;
}
form {
width: 100%;
background-color: silver;
border: thin solid silver;
}
h1 {
font-size: 300%;
}
h1, h2, h3, h4, h5 {
background-color: black;
color: white;
padding-left: 20px;
}
input {
background-color: white;
}
input.submit {
background-color: green;
}
input.required:after {
content: " \*";
color: red;
}
label, input {
width: 45%;
padding: 0.25em 1em;
margin: 0 0.5em;
}
label {
border-right: thin solid gray;
}
table {
width 100%;
padding: 0;
border: 0.25em solid silver;
}
td, th {
margin: 0;
padding: 0.25em 1em;
}
th {
border: thin solid gray;
background-color: silver;
}
td {
border: thin solid silver;
background-color: white;
}

BIN
resources/public/img/clojure-icon.gif Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 2.1 KiB

41
resources/public/md/about.md
View file

@ -1,62 +1,63 @@
## What is MicroWorld ## What is MicroWorld
MicroWorld is a rule driven cellular automaton. MicroWorld is a rule driven cellular automaton.
### Representation of the world ### Representation of the world
A world is represented as a A world is represented as a
sequence of sequences (to represent a two dimensional array) of cells. A cell is sequence of sequences (to represent a two dimensional array) of cells. A cell is
represented as a map having at least the following properties: represented as a map having at least the following properties:
* :x The X offset of this cell within the array (should not be tampered with). * **x** The X offset of this cell within the array (should not be tampered with).
* :y The Y offset of this cell within the array (should not be tampered with). * **y** The Y offset of this cell within the array (should not be tampered with).
* :state The current state of this cell, represented as a clojure key; initially :waste. * **state** The current state of this cell, represented as a clojure key; initially :waste.
As currently initialised all cells have two additional properties: As currently initialised all cells have two additional properties:
* :altitude Altitude of this cell. Initially 1. Currently not used. * **altitude** Altitude of this cell. Initially 1. Currently not used.
* :fertility Soil fertility of this cell. Initially 1. Increases under climax * **fertility** Soil fertility of this cell. Initially 1. Increases under climax forest; later, will decrease under ploughland, may increase under pasture.
forest; later, will decrease under ploughland, may increase under pasture.
Rules can add any additional properties to cells that you like; the current Rules can add any additional properties to cells that you like; the current
'natural-rules' rule-set adds properties for the populations of deer and of 'natural-rules' rule-set adds properties for the populations of deer and of
wolves. wolves.
### Representation of rules ### Representation of rules
Rules are just ordinary Clojure functions (can be anonymous functions, and in the current Rules are just ordinary Clojure functions (can be anonymous functions, and in the current
rule-sets they are) which take two arguments, a cell and a world, and return rule-sets they are) which take two arguments, a cell and a world, and return
either nil (indicating the rule did not fire), or a new cell which should have either nil (indicating the rule did not fire), or a new cell which should have
the same :x and :y properties as the cell passed in. Any other properties can the same :x and :y properties as the cell passed in. Any other properties can
be different. be different.
## What is MicroWorld for ## What is MicroWorld for
The underlying intention is to crudely model the evolution of human settlement The underlying intention is to crudely model the evolution of human settlement
in a landscape, but also to act as a learning environment to teach ideas about in a landscape, but also to act as a learning environment to teach ideas about
software and about ecology. software and about ecology.
## User interface ## User interface
The MicroWorld user interface is currently just an auto-refreshing web page, The MicroWorld user interface is currently just an auto-refreshing web page,
containing an HTML table. Each cell in the world is represented by a cell in containing an HTML table. Each cell in the world is represented by a cell in
the table. Each HTML cell has a class whose name is derived from the state of the table. Each HTML cell has a class whose name is derived from the state of
the world cell, and contains an image whose filename is derived from the state the world cell, and contains an image whose filename is derived from the state
of the world cell. of the world cell.
The 'state' classes are defined in a CSS file 'states.css', which should be The 'state' classes are defined in a CSS file 'states.css', which should be
edited when you add additional states. Image files should be 32x32 pixels and edited when you add additional states. Image files should be 32x32 pixels and
should be stored in the directory 'img/tiles', but at this stage I haven't should be stored in the directory 'img/tiles', but at this stage I haven't
created any. created any.
## Future plans ## Future plans
### Run in the browser ### Run in the browser
Currently the simulation runs on the server and only the display is in the Currently the simulation runs on the server and only the display is in the
browser. browser. It would be much better converted to ClojureScript and run in the browser
- that would save both network traffic and server load, and would allow the
animation to run faster.
### Rule language ### Rule language
It would be good to have a near-English rule parser to make rules easier for It would be good to have a near-English rule parser to make rules easier for
children to add and modify. children to add and modify.

6
resources/templates/about.html
View file

@ -1,4 +1,8 @@
{% extends "templates/base.html" %} {% extends "templates/base.html" %}
{% block content %} {% block content %}
<p>this is the story of mw-ui... work in progress</p> <div>
<h1>{{title}}</h1>
{{content|safe}}
</div>
{% endblock %} {% endblock %}

52
resources/templates/base.html
View file

@ -1,41 +1,47 @@
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<head> <head>
<META http-equiv="Content-Type" content="text/html; charset=UTF-8"> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Welcome to mw-ui</title> <title>{{title}}</title>
<link href="{{servlet-context}}/css/phone.css" media="only screen and (max-device-width: 480px)" rel="stylesheet" type="text/css" />
<link href="{{servlet-context}}/css/tablet.css" media="only screen and (min-device-width: 481px) and (max-device-width: 1024px)" rel="stylesheet" type="text/css" />
<link href="{{servlet-context}}/css/standard.css" media="screen and (min-device-width: 1025px)" rel="stylesheet" type="text/css" />
<link href="{{servlet-context}}/css/print.css" media="print" rel="stylesheet" type="text/css" />
<link href="{{servlet-context}}/css/states.css" rel="stylesheet" type="text/css" />
{% script "/lib/jquery-1.9.0.js" %}
{% script "/lib/jquery.validate.min.js" %}
{% script "/lib/script.js" %}
<script type="text/javascript">
//<![CDATA[
var context = "{{servlet-context}}";
//]]>
</script>
<meta content="{{seconds}}" http-equiv="{{maybe-refresh}}" />
</head> </head>
<body> <body>
<!-- navbar --> <div id="header">
<div class="navbar navbar-inverse navbar-fixed-top"> <div id="nav">
<div class="container"> <a class="navbar-brand" href="{{servlet-context}}/">MicroWorld</a>
<div class="navbar-header"> <ul class="nav">
<a class="navbar-brand" href="{{servlet-context}}/">mw-ui</a>
</div>
<div class="navbar-collapse collapse ">
<ul class="nav navbar-nav">
<li class="{{home-selected}}"><a href="{{servlet-context}}/">Home</a></li> <li class="{{home-selected}}"><a href="{{servlet-context}}/">Home</a></li>
<li class="{{about-selected}}"><a href="{{servlet-context}}/about">About</a></li> <li class="{{about-selected}}"><a href="{{servlet-context}}/about">About</a></li>
<li class="{{world-selected}}"><a href="{{servlet-context}}/world">World</a></li> <li class="{{world-selected}}"><a href="{{servlet-context}}/world">World</a></li>
</ul> </ul>
</div> </div>
</div> </div>
</div>
<div class="container"> <div id="main-container" class="container">
{% block content %} {% block content %}
{% endblock %} {% endblock %}
</div> </div>
<!-- scripts and styles --> <div id="footer">
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css"> <div id="credits">
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css"> Built with <a href="http://www.luminusweb.net/">LuminusWeb</a> ||
{% style "/css/screen.css" %} <img height="16" width="16" align="top" src="img/clojure-icon.gif"> Powered by <a href="http://clojure.org">Clojure</a> ||
Engineering and hosting by <a href="http://www.journeyman.cc">Journeyman</a> ||
<script src="//code.jquery.com/jquery-2.0.3.min.js" type="text/javascript"></script> World generated using <a href="http://git.journeyman.cc/?p=mw-engine;a=summary">MicroWorld Engine</a>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script> </div>
</div>
<script type="text/javascript">
var context = "{{servlet-context}}";
</script>
</body> </body>
</html> </html>

26
resources/templates/home.html
View file

@ -1,14 +1,20 @@
{% extends "templates/base.html" %} {% extends "templates/base.html" %}
{% block content %} {% block content %}
<div class="jumbotron"> <div>
<h1>Welcome to mw-ui</h1> <h1>{{title}}</h1>
<p>Time to start building your site!</p> <form action="world">
<p><a class="btn btn-primary btn-lg" href="http://luminusweb.net">Learn more &raquo;</a></p> <p class="widget">
</div> <label for="y">Size of your world: rows</label>
<input name="y" type="range" min="5" max="100" value="{{y}}" required/>
<div class="row-fluid"> </p>
<div class="span8"> <p class="widget">
{{content|safe}} <label for="y">Size of your world: columns</label>
</div> <input name="x" type="range" min="5" max="100" value="{{x}}" required/>
</p>
<p class="widget">
<label for="submit">&nbsp;</label>
<input name="submit" id="submit" type="submit" value="Go!"/>
</p>
</form>
</div> </div>
{% endblock %} {% endblock %}

8
resources/templates/world.html Normal file
View file

@ -0,0 +1,8 @@
{% extends "templates/base.html" %}
{% block content %}
<div>
<h1>{{title}}</h1>
{{content|safe}}
</div>
{% endblock %}

51
src/mw_ui/render_world.clj
View file

@ -17,38 +17,47 @@
[statekey] [statekey]
(format "img/tiles/%s.png" (format-css-class statekey))) (format "img/tiles/%s.png" (format-css-class statekey)))
(defn render-cell (defn render-cell
"Render this world cell as a Hiccup table cell." "Render this world cell as a Hiccup table cell."
[cell] [cell]
(let [state (:state cell)] (let [state (:state cell)]
[:td {:class (format-css-class state)} [:td {:class (format-css-class state)}
[:img {:alt (world/format-cell cell) :img (format-image-path state)}]])) [:img {:alt (world/format-cell cell) :img (format-image-path state)}]]))
(defn render-world-row (defn render-world-row
"Render this world row as a Hiccup table row." "Render this world row as a Hiccup table row."
[row] [row]
(apply vector (cons :tr (map render-cell row)))) (apply vector (cons :tr (map render-cell row))))
(defn render-world (defn render-world-table
"Render this world as a complete HTML page." "Render the world implied by the session as a complete HTML page."
[] []
(let [world (or (session/get :world) (world/make-world 20 20)) (let [world (or (session/get :world) (world/make-world 20 20))
rules (or (session/get :rules) rules/natural-rules) rules (or (session/get :rules) rules/natural-rules)
generation (+ (or (session/get :generation) 0) 1)
w2 (engine/transform-world world rules)] w2 (engine/transform-world world rules)]
(session/put! :world w2) (session/put! :world w2)
(html (session/put! :generation generation)
[:html [:div {:class "world"}
[:head [:p (str "Generation " generation)]
[:title "MicroWorld demo"] (apply vector
[:link {:media "only screen and (max-device-width: 480px)" :href "css/phone.css" :type "text/css" :rel "stylesheet"}] (cons :table
[:link {:media "only screen and (min-device-width: 481px) and (max-device-width: 1024px)" :href "css/tablet.css" :type "text/css" :rel "stylesheet"}] (map render-world-row w2)))]))
[:link {:media "screen and (min-device-width: 1025px)" :href "css/standard.css" :type "text/css" :rel "stylesheet"}]
[:link {:media "print" :href "css/print.css" :type "text/css" :rel "stylesheet"}] (defn render-world
[:link {:href "css/states.css" :type "text/css" :rel "stylesheet"}] "Render the world implied by the session as a complete HTML page."
[:meta {:http-equiv "refresh" :content "5"}]] []
[:body (html
[:h1 "MicroWorld"] [:html
(apply vector [:head
(cons :table [:title "MicroWorld demo"]
(map render-world-row w2)))]]))) [:link {:media "only screen and (max-device-width: 480px)" :href "css/phone.css" :type "text/css" :rel "stylesheet"}]
[:link {:media "only screen and (min-device-width: 481px) and (max-device-width: 1024px)" :href "css/tablet.css" :type "text/css" :rel "stylesheet"}]
[:link {:media "screen and (min-device-width: 1025px)" :href "css/standard.css" :type "text/css" :rel "stylesheet"}]
[:link {:media "print" :href "css/print.css" :type "text/css" :rel "stylesheet"}]
[:link {:href "css/states.css" :type "text/css" :rel "stylesheet"}]
[:meta {:http-equiv "refresh" :content "5"}]]
[:body
[:h1 "MicroWorld"]
(render-world-table)
]]))

15
src/mw_ui/routes/home.clj
View file

@ -1,17 +1,22 @@
(ns mw-ui.routes.home (ns mw-ui.routes.home
(:use compojure.core) (:use compojure.core)
(:require [mw-ui.layout :as layout] (:require [hiccup.core :refer [html]]
[mw-ui.layout :as layout]
[mw-ui.util :as util] [mw-ui.util :as util]
[mw-ui.render-world :as world])) [mw-ui.render-world :as world]
[noir.session :as session]))
(defn home-page [] (defn home-page []
(layout/render (layout/render
"home.html" {:content (util/md->html "/md/docs.md")})) "home.html" {:title "Welcome to MicroWorld" :content (util/md->html "/md/docs.md")}))
(defn about-page [] (defn about-page []
(layout/render "about.html")) (layout/render "about.html" {:title "About MicroWorld" :content (util/md->html "/md/about.md")}))
(defn world-page []
(layout/render "world.html" {:title "Watch your world grow" :content (html (world/render-world-table)) :seconds (or (session/get :seconds) 5) :maybe-refresh "refresh"}))
(defroutes home-routes (defroutes home-routes
(GET "/" [] (home-page)) (GET "/" [] (home-page))
(GET "/about" [] (about-page)) (GET "/about" [] (about-page))
(GET "/world" [] (world/render-world))) (GET "/world" [] (world-page)))