Finished implementing Storage.

[cydia.git] / Cydia.app / storage.html

diff --git a/Cydia.app/storage.html b/Cydia.app/storage.html
index 21a87adc99d87af1e9cb1a6917d30cf96eb8d37f..bd208f9c2090e2bfa3908d20d16e69ad94ad9791 100644 (file)
--- a/Cydia.app/storage.html
+++ b/Cydia.app/storage.html
@@ -96,53 +96,81 @@
         }
 
         piechart > div {
         }
 
         piechart > div {

+            -webkit-border-radius: 50px;

             height: 100px;
             height: 100px;

-            padding: 1px;
+            overflow: hidden;

             position: relative;
             position: relative;

-            width: 103px;
+            width: 100px;

         }
 
         }
 

-        piechart > div > div.lslice,
-        piechart > div > div.rslice {
-            background-color: #4d4d70;
+        piechart > div > div:first-child {

             height: 100px;
             height: 100px;

+            overflow: hidden;

             position: absolute;
             position: absolute;

+            z-index: 102;
+            width: 51px;

         }
 
         }
 

-        piechart > div > div.lslice {
-            -webkit-border-bottom-left-radius: 50px;
-            -webkit-border-top-left-radius: 50px;
-            width: 50px;
-            z-index: 2;
+        piechart > div > div:last-child {
+            height: 100px;
+            overflow: hidden;
+            position: absolute;
+            width: 100px;
+            z-index: 0;

         }
 
         }
 

-        piechart > div > div.rslice {
-            -webkit-border-bottom-right-radius: 50px;
-            -webkit-border-top-right-radius: 50px;
-            left: 49px;
-            width: 53px;
-            z-index: 0;
+        piechart > div div.lslice,
+        piechart > div div.rslice,
+        piechart > div div.tslice,
+        piechart > div div.bslice {
+            background-color: #4d4d70;

         }
 
         }
 

-        piechart > div > div.xslice {
+        piechart > div div.lslice,
+        piechart > div div.rslice,
+        piechart > div div.tslice,
+        piechart > div div.bslice,
+        piechart > div div.xslice {
+            /* XXX: technically, these aren't needed */

             -webkit-border-bottom-left-radius: 50px;
             -webkit-border-top-left-radius: 50px;
             height: 100px;
             -webkit-border-bottom-left-radius: 50px;
             -webkit-border-top-left-radius: 50px;
             height: 100px;

-            left: 2px;

             position: absolute;
             position: absolute;

-            -webkit-transform-origin: 50px 50%;
+            -webkit-transform-origin: 100% 50%;

             width: 50px;
         }
 
             width: 50px;
         }
 

-        piechart > div > div.tslice {
+        piechart > div div.lslice {
+            z-index: 100;
+        }
+
+        piechart > div div.rslice,
+        piechart > div div.tslice,
+        piechart > div div.bslice {
+            z-index: 0;
+        }
+
+        piechart > div div.rslice {
+            -webkit-transform: rotate(180deg);
+        }
+
+        piechart > div div.tslice {
+            -webkit-transform: rotate(90deg);
+        }
+
+        piechart > div div.bslice {
+            -webkit-transform: rotate(270deg);
+        }
+
+        piechart > div > div.nslice {

             position: absolute;
             text-align: center;
             top: 42px;
             width: 100px;
             position: absolute;
             text-align: center;
             top: 42px;
             width: 100px;

-            z-index: 3;
+            z-index: 103;

         }
 
         }
 

-        piechart > div > div.tslice > div {
+        piechart > div > div.nslice > div {

             background-color: rgba(255, 255, 255, 0.7);
             -webkit-border-radius: 7px;
             display: inline;
             background-color: rgba(255, 255, 255, 0.7);
             -webkit-border-radius: 7px;
             display: inline;


@@ -181,13 +209,15 @@
 
 <a class="giant-button">
     <div class="contents">
 
 <a class="giant-button">
     <div class="contents">

-        <piechart id="system-chart"><div>
-            <div class="lslice"></div>
-            <div class="rslice"></div>
-            <div class="tslice"><div id="system-size"></div></div>
-            <div class="xslice" id="system-slice" style="
-                background-color: #7d7da0; -webkit-transform: rotate(10deg); z-index: 1;
-            "></div>
+        <piechart><div>
+            <div id="system-left"></div>
+            <div id="system-right">
+                <div class="lslice"></div>
+                <div class="rslice"></div>
+                <div class="tslice"></div>
+                <div class="bslice"></div>
+            </div>
+            <div class="nslice"><div id="system-size"></div></div>

         </div></piechart>
 
         <label>System</label>
         </div></piechart>
 
         <label>System</label>


@@ -201,25 +231,15 @@
 
 <a class="giant-button">
     <div class="contents">
 
 <a class="giant-button">
     <div class="contents">

-        <piechart id="private-chart"><div>
-            <div class="lslice"></div>
-            <div class="rslice"></div>
-            <div class="tslice"><div id="private-size"></div></div>
-            <div class="xslice" id="private-slice" style="
-                background-color: #9090e0; -webkit-transform: rotate(150deg); z-index: 1;
-            "></div>
-            <div class="xslice" id="private-slice" style="
-                background-color: #7070e0; -webkit-transform: rotate(120deg); z-index: 1;
-            "></div>
-            <div class="xslice" id="private-slice" style="
-                background-color: #d0d0f0; -webkit-transform: rotate(90deg); z-index: 1;
-            "></div>
-            <div class="xslice" id="private-slice" style="
-                background-color: #7da0e0; -webkit-transform: rotate(60deg); z-index: 1;
-            "></div>
-            <div class="xslice" id="private-slice" style="
-                background-color: #7d7da0; -webkit-transform: rotate(30deg); z-index: 1;
-            "></div>
+        <piechart><div>
+            <div id="private-left"></div>
+            <div id="private-right">
+                <div class="lslice"></div>
+                <div class="rslice"></div>
+                <div class="tslice"></div>
+                <div class="bslice"></div>
+            </div>
+            <div class="nslice"><div id="private-size"></div></div>

         </div></piechart>
 
         <label>Private</label>
         </div></piechart>
 
         <label>Private</label>