Permalink
Browse files

Refactoring CSS and utils creation

  • Loading branch information...
1 parent 042a7b8 commit fa95414ac2596d767372bee88ce3c92488eb6dcd @senthilp committed Aug 23, 2011
Showing with 299 additions and 332 deletions.
  1. +1 −2 README
  2. +2 −184 arena.php
  3. +183 −0 picman.css
  4. +24 −58 picmanager.js
  5. +33 −88 picuploader.js
  6. +56 −0 utils.js
View
3 README
@@ -1,4 +1,3 @@
TODO
1. refactor imagewrapper
-2. Documentation
-6. create Utils & CSS file
+2. Documentation
View
186 arena.php
@@ -8,190 +8,7 @@
<META http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<TITLE>Picture Uploader</TITLE>
<link rel="shortcut icon" href="favicon.ico" />
- <style type="text/css">
- body {
- font-family: Arial,Helvetica,sans-serif;
- font-size: 12px;
- margin: 0 auto;
- width: 960px;
- }
- h1 {
- margin: 10px 0;
- color: gray;
- text-align: center;
- }
- .border {
- background-color: #F1F1F1;
- border: 1px solid gainsboro;
- }
- .piccontainer {
- width: 200px;
- margin-right: 10px;
- float: left;
- }
- .primary {
- border: 3px solid brown;
- }
- .picman {
- font-weight: bold;
- }
- .dropbox {
- border-radius: 2px 2px 2px 2px;
- height: 360px;
- margin-top: 20px;
- padding: 20px 0 0 60px;
- }
- .droptext {
- display: none;
- color: #CCCCCC
- }
- .activate {
- border: 4px dashed #DDDDDD;
- }
- .dragenter {
- border-color: #3964C2;
- }
- .picman a {
- text-decoration: none;
- }
- .picholder {
- height: 131px;
- position: relative;
- }
- .add {
- text-align: center;
- position: relative;
- }
- .add span.extra {
- font-size: 16px;
- }
- div.browse {
- overflow: hidden;
- width: 155px;
- height: 20px;
- position: absolute;
- left: 375px;
- top: 0;
- }
- .browse {
- opacity: 0;
- filter:alpha(opacity=0);
- font-size: 20px;
- height: 20px;
- position: absolute;
- right: 0px;
- top: 0px;
- }
- .filename {
- text-align: center;
- color: gray;
- font-size: 12px;
- padding: 7px 0;
- visibility: hidden;
- }
- .error {
- color: red;
- text-align: center;
- margin-top: 55px;
- }
- .picbottom {
- text-align: center;
- margin: 5px 0;
- }
- .controls {
- margin: 0 69px 1px;
- visibility: hidden;
- }
- .controls div {
- float: left;
- }
- .controls div.icon-hover {
- border: 1px solid white;
- padding: 2px 0;
- }
- .controls div.icon-hover:hover {
- border-color: #A1BADF;
- }
- .icons {
- background-image: url("image_edit_icons-v2.gif");
- height: 16px;
- width: 16px;
- margin: 0 2px;
- }
- .rleft {
- background-position: -16px 0;
- }
- .rright {
- background-position: -32px 0;
- }
- .delete {
- background-position: -64px 0;
- }
- .primcontol {
- font-family: cursive,Helvetica,sans-serif;
- font-size: 14px;
- height: 16px;
- width: 16px;
- }
- .progressmeter {
- padding-top: 70px;
- color: gray;
- visibility: hidden;
- }
- .progressmeter div{
- display: inline-block;
- }
- .progressmeter .progress {
- width: 0%;
- height: 8px;
- background-color: gray;
- }
- .progressmeter .meter {
- height: 7px;
- width: 148px;
- border: 1px solid gray;
- margin: 0 1px 0 10px;
- }
- .overlay {
- position: absolute;
- display: none;
- z-index: 2000;
- left: 25%;
- top: 25%;
- }
- .bigimage {
- border: 20px solid black;
- position: relative;
- }
- .close {
- position: absolute;
- left: 97%;
- top: -3%;
- }
- .close a {
- color: wheat;
- text-decoration: none;
- font-size: 16px;
- }
- .mask {
- opacity: 0;
- filter:alpha(opacity=0);
- background-color: #FFFFFF;
- left: 0;
- top: 0;
- width: 100%;
- height: 100%;
- z-index: 1000;
- position: absolute;
- display: none;
- }
- .clear {
- clear: both;
- }
- .videodemo {
- margin-top: 20px;
- }
- </style>
+ <link type="text/css" rel="stylesheet" href="picman.css" />
</HEAD>
<BODY>
<h1>Picture Uploader</h1>
@@ -224,6 +41,7 @@
<div id="videoDemo" class="clear videodemo">
<a target="_blank" href="http://www.youtube.com/watch?v=68rNuzYnxOI">Quick Demo</a>
</div>
+ <script src="utils.js"></script>
<script src="progressmeter.js"></script>
<script src="picuploader.js"></script>
<script src="picmanager.js"></script>
View
@@ -0,0 +1,183 @@
+@CHARSET "UTF-8";
+body {
+ font-family: Arial,Helvetica,sans-serif;
+ font-size: 12px;
+ margin: 0 auto;
+ width: 960px;
+}
+h1 {
+ margin: 10px 0;
+ color: gray;
+ text-align: center;
+}
+.border {
+ background-color: #F1F1F1;
+ border: 1px solid gainsboro;
+}
+.piccontainer {
+ width: 200px;
+ margin-right: 10px;
+ float: left;
+}
+.primary {
+ border: 3px solid brown;
+}
+.picman {
+ font-weight: bold;
+}
+.dropbox {
+ border-radius: 2px 2px 2px 2px;
+ height: 360px;
+ margin-top: 20px;
+ padding: 20px 0 0 60px;
+}
+.droptext {
+ display: none;
+ color: #CCCCCC
+}
+.activate {
+ border: 4px dashed #DDDDDD;
+}
+.dragenter {
+ border-color: #3964C2;
+}
+.picman a {
+ text-decoration: none;
+}
+.picholder {
+ height: 131px;
+ position: relative;
+}
+.add {
+ text-align: center;
+ position: relative;
+}
+.add span.extra {
+ font-size: 16px;
+}
+div.browse {
+ overflow: hidden;
+ width: 155px;
+ height: 20px;
+ position: absolute;
+ left: 375px;
+ top: 0;
+}
+.browse {
+ opacity: 0;
+ filter:alpha(opacity=0);
+ font-size: 20px;
+ height: 20px;
+ position: absolute;
+ right: 0px;
+ top: 0px;
+}
+.filename {
+ text-align: center;
+ color: gray;
+ font-size: 12px;
+ padding: 7px 0;
+ visibility: hidden;
+}
+.error {
+ color: red;
+ text-align: center;
+ margin-top: 55px;
+}
+.picbottom {
+ text-align: center;
+ margin: 5px 0;
+}
+.controls {
+ margin: 0 69px 1px;
+ visibility: hidden;
+}
+.controls div {
+ float: left;
+}
+.controls div.icon-hover {
+ border: 1px solid white;
+ padding: 2px 0;
+}
+.controls div.icon-hover:hover {
+ border-color: #A1BADF;
+}
+.icons {
+ background-image: url("image_edit_icons-v2.gif");
+ height: 16px;
+ width: 16px;
+ margin: 0 2px;
+}
+.rleft {
+ background-position: -16px 0;
+}
+.rright {
+ background-position: -32px 0;
+}
+.delete {
+ background-position: -64px 0;
+}
+.primcontol {
+ font-family: cursive,Helvetica,sans-serif;
+ font-size: 14px;
+ height: 16px;
+ width: 16px;
+}
+.progressmeter {
+ padding-top: 70px;
+ color: gray;
+ visibility: hidden;
+}
+.progressmeter div{
+ display: inline-block;
+}
+.progressmeter .progress {
+ width: 0%;
+ height: 8px;
+ background-color: gray;
+}
+.progressmeter .meter {
+ height: 7px;
+ width: 148px;
+ border: 1px solid gray;
+ margin: 0 1px 0 10px;
+}
+.overlay {
+ position: absolute;
+ display: none;
+ z-index: 2000;
+ left: 25%;
+ top: 25%;
+}
+.bigimage {
+ border: 20px solid black;
+ position: relative;
+}
+.close {
+ position: absolute;
+ left: 97%;
+ top: -3%;
+}
+.close a {
+ color: wheat;
+ text-decoration: none;
+ font-size: 16px;
+}
+.mask {
+ opacity: 0;
+ filter:alpha(opacity=0);
+ background-color: #FFFFFF;
+ left: 0;
+ top: 0;
+ width: 100%;
+ height: 100%;
+ z-index: 1000;
+ position: absolute;
+ display: none;
+}
+.clear {
+ clear: both;
+}
+.videodemo {
+ margin-top: 20px;
+}
Oops, something went wrong.

0 comments on commit fa95414

Please sign in to comment.