Add popover on quota. Resolves #5

diff --git a/app/components/userMenu/userMenu.html b/app/components/userMenu/userMenu.html
index 1f63957..89f54e3 100644 (file)
--- a/app/components/userMenu/userMenu.html
+++ b/app/components/userMenu/userMenu.html
@@ -30,7 +30,7 @@
             <li>All Members</li>
         </ul>-->
         <h1>My Quota</h1>
-        {{quotaRemaining}} of {{quota}} remaining
+        {{quotaRemaining}} of {{quota}} remaining <a class="de-link" popover="Quota is used when downloaing files directly from DivinElegy. It resets at 00:00 UTC+0 daily." popover-trigger="mouseenter" popover-placement="right">[?]</a>
     </div>
 </div>
 <div ng-if="!menuReady" style="text-align:center; padding-top: 10px; padding-bottom: 10px;">

diff --git a/app/css/divinelegy.css b/app/css/divinelegy.css
index b74bb06..db58345 100644 (file)
--- a/app/css/divinelegy.css
+++ b/app/css/divinelegy.css
@@ -173,6 +173,11 @@ h2 {
        padding-bottom: 18px;
 }
 
+#controlPanel .popover {
+    width: 170px;
+    margin-top: 10px;
+}
+
 #post {
     margin-top: 16px;
        min-height: 598px;

diff --git a/app/css/popover.css b/app/css/popover.css
new file mode 100644 (file)
index 0000000..65914cb
--- /dev/null
+++ b/app/css/popover.css
@@ -0,0 +1,130 @@
+.popover {
+    position:absolute;
+    top:0;
+    left:0;
+    z-index:1060;
+    display:none;
+    max-width:276px;
+    text-align:left;
+    white-space:normal;
+    background-color:#1C2C3C;
+    -webkit-background-clip:padding-box;
+    background-clip:padding-box;
+    border:3px solid #000;
+    border-radius:10px;
+    -moz-border-radius: 10px;
+    -webkit-border-radius: 10px;
+    -webkit-box-shadow:0 5px 10px rgba(0,0,0,.2);
+    box-shadow:0 5px 10px rgba(0,0,0,.2)
+}
+
+.popover.top {
+    margin-top:-10px
+}
+
+.popover.right {
+    margin-left:10px
+}
+
+.popover.bottom {
+    margin-top:10px
+}
+
+.popover.left {
+    margin-left:-10px
+}
+
+.popover-title {
+    padding:8px 14px;
+    margin:0;
+    font-size:14px;
+    background-color:#f7f7f7;
+    border-bottom:1px solid #ebebeb;
+    border-radius:5px 5px 0 0
+}
+
+.popover-content {
+    padding: 7px;
+}
+
+.popover>.arrow,.popover>.arrow:after {
+    position:absolute;
+    display:block;
+    width:0;
+    height:0;
+    border-color:transparent;
+    border-style:solid
+}
+
+.popover>.arrow {
+    border-width:11px
+}
+
+.popover>.arrow:after {
+    content:"";
+    border-width:10px
+}
+
+.popover.top>.arrow {
+    bottom:-11px;
+    left:50%;
+    margin-left:-11px;
+    border-top-color:#000;
+    border-top-color:rgba(0,0,0,.25);
+    border-bottom-width:0
+}
+
+.popover.top>.arrow:after {
+    bottom:1px;
+    margin-left:-10px;
+    content:" ";
+    border-top-color:#1C2C3C;
+    border-bottom-width:0
+}
+
+.popover.right>.arrow {
+    top:50%;
+    left:-11px;
+    margin-top:-11px;
+    border-right-color:#000;
+    border-left-width:0
+}
+
+.popover.right>.arrow:after{
+    bottom:-10px;
+    left:1px;
+    content:" ";
+    border-right-color:#1C2C3C;
+    border-left-width:3px;    
+}
+
+.popover.bottom>.arrow {
+    top:-11px;
+    left:50%;
+    margin-left:-11px;
+    border-top-width:0;
+    border-bottom-color:#000;
+    border-bottom-color:rgba(0,0,0,.25)
+}
+
+.popover.bottom>.arrow:after {
+    top:1px;
+    margin-left:-10px;content:" ";
+    border-top-width:0;
+    border-bottom-color:#1C2C3C
+}
+
+.popover.left>.arrow {
+    top:50%;
+    right:-11px;
+    margin-top:-11px;
+    border-right-width:0;
+    border-left-color:#000;
+    border-left-color:rgba(0,0,0,.25)
+}
+
+.popover.left>.arrow:after {
+    right:1px;bottom:-10px;
+    content:" ";
+    border-right-width:0;border-left-color:#1C2C3C
+}
\ No newline at end of file

diff --git a/app/index.html b/app/index.html
index 5ce2f85..a8f92fa 100644 (file)
--- a/app/index.html
+++ b/app/index.html
@@ -13,6 +13,7 @@
         <link rel="stylesheet" href="css/animations.css"/>
         <link rel="stylesheet" href="css/pager.css"/>
         <link rel="stylesheet" href="css/modal.css"/>
+        <link rel="stylesheet" href="css/popover.css"/>
         <link rel="stylesheet" href="css/buttons.css"/>
         <link rel="stylesheet" href="css/font-awesome/css/font-awesome.min.css"/>
         <link rel="stylesheet" href="css/divinelegy.css"/>