diff --git a/src/main.css b/src/main.css index 5da2922951..28bca39065 100755 --- a/src/main.css +++ b/src/main.css @@ -96,6 +96,10 @@ div.ui-tooltip { /* override default jquery ui max tooltip width */ outline: 0; } +ul.ui-widget.ui-widget-content { + border: 1px solid #f2f2f2; +} + .ui-dialog .ui-dialog-content { padding: .5em .5em; padding-bottom: 0; @@ -378,7 +382,7 @@ a.ui-state-default.ui-state-hover { background: #dedede; } .ui-widget.ui-widget-content { - border: 1px solid #c5c5c5; + border: unset; } .ui-datepicker-close { display: none; @@ -585,6 +589,10 @@ label.checkbox input:checked ~ span.check { transform: scale(1) rotate(45deg); } +.logo-parent { + padding: 6px 8px !important; +} + .chosen-disable { width: 100%; height: 29px; @@ -592,14 +600,13 @@ label.checkbox input:checked ~ span.check { z-index: +1; } -.ui-icon-caret-1-e { - background-image: url('./images/single-angle-pointing-to-right.svg') !important; - background-size: 12px 10px !important; - background-position: 2px 5px !important; - margin: 0 !important; - top: calc(50% - 10px) !important; - right: 2px !important; - left: auto; +.ui-icon-caret-1-e:after { + content: "ยป"; + font-family: roboto, sans-serif !important; + font-size: 16px; + font-weight: bold; + left: 25% !important; + top: 50% !important; } .ui-dialog-titlebar { diff --git a/src/navigation/navigation.html b/src/navigation/navigation.html index 9fe92914b0..e97625d1f8 100644 --- a/src/navigation/navigation.html +++ b/src/navigation/navigation.html @@ -1,168 +1,170 @@ -
-
-
- - -
- Contact Us - -
- - +
+
+ +
  • +
    {ele.type}
    +
    {ele.id}
    +
    • +     +
    +
    + +
  • Portfolio
    • +     + +
  • Statement
    • +     + +
  • Profit table
    • +     + +
  • Deposit funds
    • +     + +
  • Withdraw funds
    • +     + +
  • Token management
    • +     + +
  • Copy Trading
    • +     + +
  • Change password
    • +     +
    + +
  • Logout
    • +     + + + + + + + diff --git a/src/navigation/navigation.scss b/src/navigation/navigation.scss index 3c81f97a6f..2d6bd22586 100644 --- a/src/navigation/navigation.scss +++ b/src/navigation/navigation.scss @@ -1,120 +1,130 @@ -#topbar { +nav { + position: fixed; width: 100%; - line-height: 1; - font-size: 100%; - text-align: right; - padding: 3px 0; - height: 23px; - min-width: 1150px; - span.time { - color: white; - float: right; - padding-right: 35px; - padding-top: 5px; - font-size: 12px; - } - span.contact-us { - color: white; - float: right; - padding-right: 25px; - padding-top: 5px; - font-weight: 900; - font-size: 12px; - } + z-index: 3000; - #select_language { - top:-3px; - z-index: 999999;/*should be at the top of other dialogs*/ - } -} + #topbar { + width: 100%; + line-height: 1; + font-size: 100%; + text-align: right; + padding: 3px 0; + height: 23px; -#nav-menu { - min-width: 1150px; - .trade, .instruments, .resources, .workspace { - > ul { - border: none; - visibility: hidden; - z-index: 999999; - opacity: 0; - transition: visibility 0.5s, opacity 0.1s linear 0.1s; + span.time { + color: white; + float: right; + padding-right: 35px; + padding-top: 5px; + font-size: 12px; } - &:hover > ul { - visibility: visible; - opacity: 1; - transition: visibility 0s 0.1s; + span.contact-us { + color: white; + float: right; + padding-right: 25px; + padding-top: 5px; + font-weight: 900; + font-size: 12px; + } + + #select_language { + top:-3px; + z-index: 999999;/*should be at the top of other dialogs*/ } } - .resources { - .ui-icon { left: 10px; } - } - .trade, .instruments, .resources { - .ui-menu .ui-menu-item { - list-style-image: none !important; - white-space: nowrap; - .ui-menu-item-wrapper { - padding: 7px 1em 7px .4em; + + #nav-menu { + width: 100%; + + .trade, .instruments, .resources, .workspace { + > ul { + border: none; + visibility: hidden; + z-index: 999999; + opacity: 0; + transition: visibility 0.5s, opacity 0.1s linear 0.1s; + } + &:hover > ul { + visibility: visible; + opacity: 1; + transition: visibility 0s 0.1s; } - div { - font-size: 1rem; - text-align: left; - } - } - .ui-widget.ui-widget-content { - border: none !important; } - li { - min-width: 130px; - background: #2A3052; - color: white; - a { - &:hover { opacity: 1; } + .resources { + .ui-icon { left: 10px; } + } + .trade, .instruments, .resources { + .ui-menu .ui-menu-item { + list-style-image: none !important; + white-space: nowrap; + .ui-menu-item-wrapper { + padding: 8px 30px; + font-size: 14px; + } + div { + font-size: 1rem; + text-align: left; + } + } + .ui-widget.ui-widget-content { + border: none !important; + font-size: 14px; + } + li { + min-width: 130px; + background: #2A3052; color: white; - padding-left: 30px !important; + a { + &:hover { opacity: 1; } + color: white; + padding-left: 30px !important; + } } - } - .ui-state-active { - margin: 0 !important; - background: #E98024; - } - } -} - -#nav-menu .container { - text-align: center; - display: flex; - - .account-menu { + .ui-state-active { + margin: 0 !important; + background: #E98024; + } + } + } + + #nav-menu .container { + text-align: center; + display: flex; + + .account-menu { + height: 70px; + } + } + .top-nav-menu { + margin: 0 auto 0 auto; + } + + #topbar #select_language.visible, #all-accounts-top.visible{ + display: block; + visibility: visible; + opacity: 1; + } + + .top-nav-menu > li > a { font-size: 18px; color: white; } + .nav-menu > li > ul { max-height: 80vh; overflow: auto; } + + .login button { + margin: 15px 0; + } + + #main-account { + top: -2px; + } + + .main-nav .nav-caret { + position: absolute; + top: 30px; + right: 15px; + } + + .logo-wrapper { + float: left; height: 70px; - } -} -.top-nav-menu { - margin: 0 auto 0 auto; -} - -#topbar #select_language.visible, #all-accounts-top.visible{ - display: block; - visibility: visible; - opacity: 1; -} - -.top-nav-menu > li > a { font-size: 18px; color: white; } - -.login button { - margin: 15px 0; -} - -#main-account { - top: -2px; -} - -.main-nav .nav-caret { - position: absolute; - top: 30px; - right: 15px; -} - -.logo-wrapper { - float: left; - height: 70px; - margin-left: 5px; + margin-left: 5px; + } } diff --git a/src/windows/windows.es6 b/src/windows/windows.es6 index da8bddaf9b..692d06356a 100644 --- a/src/windows/windows.es6 +++ b/src/windows/windows.es6 @@ -330,8 +330,13 @@ export const createBlankWindow = function($html,options) { } dialog.on('dragstop', () => { const top = dialog.offset().top; - if(top < 0) { - dialog.animate({ top: '0px' }, 300, dialog.trigger.bind(dialog, 'animated')); + const left = dialog.offset().left; + const nav_head = $('nav').height(); + if(top < nav_head) { + dialog.animate({ top: nav_head }, 300, dialog.trigger.bind(dialog, 'animated')); + } + if (left < 0) { + dialog.animate({ left: '0px' }, 300, dialog.trigger.bind(dialog, 'animated')); } }); diff --git a/src/windows/windows.scss b/src/windows/windows.scss index ece726fcd6..207024a8b8 100644 --- a/src/windows/windows.scss +++ b/src/windows/windows.scss @@ -6,6 +6,15 @@ $COLOR_DARK_BLUE: #2a3052; min-width: 225px !important; } + &.webtrader-dialog-widget { + box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2); + transition: box-shadow 0.3s; + + &:hover, &:active, &:focus { + box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2); + } + } + &.statement .span-in-dialog-header, &.profitTable .span-in-dialog-header { position: absolute;