X-Git-Url: https://git.saurik.com/cydia.git/blobdiff_plain/65fe894c774e2ed25ce990ac97ca3da3c7ebf0cc..6932575e81f088c95b2fd98a0bf80a43638ec828:/Cydia.app/storage.html

diff --git a/Cydia.app/storage.html b/Cydia.app/storage.html
index 21a87adc..033ff4fc 100644
--- a/Cydia.app/storage.html
+++ b/Cydia.app/storage.html
@@ -1,10 +1,11 @@
 <?xml version="1.0" encoding="UTF-16"?>
 <html><head>
-    <title>Storage</title>
+    <title localize="STORAGE"></title>
     <meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0"/>
     <link rel="stylesheet" type="text/css" href="menes/style.css"/>
     <script type="text/javascript" src="menes/menes.js"></script>
     <script type="text/javascript" src="storage.js"></script>
+    <script type="text/javascript" src="localize.js"></script>
     <base target="_blank"/>
 
     <style>
@@ -27,27 +28,23 @@
         }
 
         a.giant-button {
+            background-color: rgba(0, 0, 0, 0.15);
+            -webkit-border-radius: 10px;
             color: #193250;
             display: block;
             margin: 8px 10px;
+            position: relative;
             text-decoration: none;
-        }
-
-        a.giant-button > div.contents {
-            position: absolute;
-            text-align: left;
             width: 300px;
-            -webkit-background-size: 75px auto;
-            z-index: 2;
         }
 
-        a.giant-button > div.contents > piechart {
+        a.giant-button > piechart {
             float: left;
             margin: 10px;
             vertical-align: middle;
         }
 
-        a.giant-button > div.contents > label {
+        a.giant-button > label {
             display: block;
             float: left;
             font-size: 25px;
@@ -57,7 +54,7 @@
             width: 155px;
         }
 
-        a.giant-button > div.contents > div.text {
+        a.giant-button > div.text {
             display: block;
             float: left;
             font-size: 14px;
@@ -71,7 +68,7 @@
             width: 50%;
         }
 
-        a.giant-button > div.contents > div.legend {
+        a.giant-button > div.legend {
             float: left;
             font-size: 14px;
             left: 15px;
@@ -80,12 +77,6 @@
             width: 290px;
         }
 
-        a.giant-button > div.background {
-            background-color: #000000;
-            opacity: 0.15;
-            -webkit-border-radius: 10px;
-        }
-
         div.key {
             margin-bottom: 4px;
         }
@@ -96,53 +87,81 @@
         }
 
         piechart > div {
+            -webkit-border-radius: 50px;
             height: 100px;
-            padding: 1px;
+            overflow: hidden;
             position: relative;
-            width: 103px;
+            width: 100px;
         }
 
-        piechart > div > div.lslice,
-        piechart > div > div.rslice {
-            background-color: #4d4d70;
+        piechart > div > div:first-child {
             height: 100px;
+            overflow: hidden;
             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;
-            left: 2px;
             position: absolute;
-            -webkit-transform-origin: 50px 50%;
+            -webkit-transform-origin: 100% 50%;
             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;
-            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;
@@ -179,56 +198,40 @@
 <dialog>
     <panel>
 
-<a class="giant-button">
-    <div class="contents">
-        <piechart id="system-chart"><div>
+<a class="giant-button" style="height: 149px">
+    <piechart><div>
+        <div id="system-left"></div>
+        <div id="system-right">
             <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>
-        </div></piechart>
-
-        <label>System</label>
-        <div class="text">A small partition used to store iPhone OS. Cydia adds a few important programs and libraries.</div>
+            <div class="tslice"></div>
+            <div class="bslice"></div>
+        </div>
+        <div class="nslice"><div id="system-size"></div></div>
+    </div></piechart>
 
-        <div class="legend" id="system-legend"></div>
-    </div>
+    <label>System</label>
+    <div class="text">A small partition used to store iPhone OS. Cydia adds a few important programs and libraries.</div>
 
-    <div class="background" style="height: 149px"></div>
+    <div class="legend" id="system-legend"></div>
 </a>
 
-<a class="giant-button">
-    <div class="contents">
-        <piechart id="private-chart"><div>
+<a class="giant-button" style="height: 189px">
+    <piechart><div>
+        <div id="private-left"></div>
+        <div id="private-right">
             <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>
-        </div></piechart>
-
-        <label>Private</label>
-        <div class="text">Most content is stored on this partition: from applications (Cydia and Apple) to multimedia.</div>
-
-        <div class="legend" id="private-legend"></div>
-    </div>
-
-    <div class="background" style="height: 189px"></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 class="text">Most content is stored on this partition: from applications (Cydia and Apple) to multimedia.</div>
+
+    <div class="legend" id="private-legend"></div>
 </a>
 
     </panel>
