Skip to content
This repository was archived by the owner on Feb 22, 2024. It is now read-only.

amam/change_window_to_card_ui_view #1371

Merged
merged 11 commits into from
Feb 14, 2019
Merged

amam/change_window_to_card_ui_view #1371

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
11 commits
Select commit Hold shift + click to select a range
afefd75
change window to card ui view
cakasuma Jan 18, 2019
055fffd
remove phone unsupported
cakasuma Jan 23, 2019
3314eeb
fix dropdown icon image
cakasuma Jan 30, 2019
2a7b71c
add font weight bold
cakasuma Feb 1, 2019
8b9d75e
add left and top validation for dialog
cakasuma Feb 8, 2019
a528209
Merge branch 'development' of https://github.com/binary-com/webtrader…
cakasuma Feb 8, 2019
704b8e5
add nav element for navigation
cakasuma Feb 13, 2019
7c4b14f
fix overflow logout
cakasuma Feb 13, 2019
b848c54
fix font size too big
cakasuma Feb 13, 2019
c2aa024
fix padding too big
cakasuma Feb 13, 2019
b9bc6fc
relative to navhead
cakasuma Feb 14, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
25 changes: 16 additions & 9 deletions src/main.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down Expand Up @@ -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;
Expand Down Expand Up @@ -585,21 +589,24 @@ label.checkbox input:checked ~ span.check {
transform: scale(1) rotate(45deg);
}

.logo-parent {
padding: 6px 8px !important;
}

.chosen-disable {
width: 100%;
height: 29px;
position: absolute;
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 {
Expand Down
322 changes: 162 additions & 160 deletions src/navigation/navigation.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,168 +1,170 @@
<div id="msg-notification" class="notice-msg center-text"></div>
<div id="topbar" class="topbar primary-bg-color-dark">
<div class="languages">
<ul id="display_language" rv-on-click="toggleVisibility | bind true">
<li class="lang.value">
<span class="world world-white"></span>
<div class="language-wrapper">
<span class="language">{lang.name}</span>
</div>
<span class="nav-caret"></span>
</li>
</ul>
<ul id="select_language" rv-class-visible="confirm.visible" rv-on-mouseleave="toggleVisibility | bind false">
<li class="lang.value" rv-on-click="toggleVisibility | bind false">
<span class="world world-black"></span>
<div class="language-wrapper">
<span class="language">{lang.name}</span>
</div>
<span class="nav-caret"></span>
</li>
<li rv-each-ele='languages' class="ele.value" rv-class-invisible="lang.value | eq ele.value" rv-on-click='onclick | bind ele.value'>{ele.name}</li>
</ul>
</div>
<span class="contact-us" ><a href="#" id="contact-us" target="_blank">Contact Us</a></span>
<span class="time"></span>
</div>
<div id="nav-menu" class="dark-blue header">
<div class="container">
<div class="logo-wrapper">
<a href="#" id="logo-container" class="logo-parent">
<div class="logo">
<div></div>
</div>
<div class="binary-logo-text">
<div></div>
</div>
</a>
</div>
<ul class="top-nav-menu">
<li class="trade ltr-direction">
<a href="javascript:;" class="nav-dropdown-toggle">
Trade
<span class="nav-caret"></span>
</a>
</li>
<li class="instruments ltr-direction">
<a href="#" class="nav-dropdown-toggle">Chart <span class="nav-caret"></span></a>
</li>
<li class="resources ltr-direction">
<a href="#" class="nav-dropdown-toggle">Resources <span class="nav-caret"></span></a>
<ul>
<li class="resourceIndex"><a href="#" class="assetIndex"><span class="ui-icon ui-icon-list"></span>Asset Index</a></li>
<li class="resourceIndex"><a href="#" class="tradingTimes"><span class="ui-icon ui-icon-clock-b"></span>Trading Times</a></li>

<li><a href="#historical-data" class="historical-data"><span class="ui-icon ui-icon-databases"></span>Historical Data</a></li>
<li><a href="#selfexclusion" class="selfexclusion disabled"><span class="ui-icon ui-icon-gears"></span>Self-Exclusion</a></li>
<li><a href="#"><span class="ui-icon ui-icon-image"></span>Chart Themes</a>
<ul>
<li> <a href="#">Pre-Defined</a>
<ul>
<li> <a href="#theme_dark_blue" theme-name="dark-blue" class="theme_dark_blue">Dark Blue</a> </li>
<li> <a href="#theme_dark_green" theme-name="dark-green" class="theme_dark_green">Dark Green</a> </li>
<li> <a href="#theme_dark_unica" theme-name="dark-unica" class="theme_dark_unica">Dark Unica</a> </li>
<li> <a href="#theme_gray" theme-name="gray" class="theme_gray">Gray</a> </li>
<li> <a href="#theme_grid" theme-name="grid" class="theme_grid">Grid</a> </li>
<li> <a href="#theme_grid_light" theme-name="grid-light" class="theme_grid_light">Grid Light</a> </li>
<li> <a href="#theme_sand_signika" theme-name="sand-signika" class="theme_sand_signika">Sand Signika</a> </li>
</ul>
</li>
<li> <a href="#theme_custom" theme-name="custom" class="theme_custom">Custom Theme</a> </li>
<li> <a href="#theme_default" theme-name="default" class="theme_default">Default</a> </li>
</ul>
</li>
</ul>
</li>
<li class="workspace ltr-direction">
<a href="#" class="nav-dropdown-toggle">Workspace <span class="nav-caret"></span></a>
</li>
<nav>
<div id="msg-notification" class="notice-msg center-text"></div>
<div id="topbar" class="topbar primary-bg-color-dark">
<div class="languages">
<ul id="display_language" rv-on-click="toggleVisibility | bind true">
<li class="lang.value">
<span class="world world-white"></span>
<div class="language-wrapper">
<span class="language">{lang.name}</span>
</div>
<span class="nav-caret"></span>
</li>
</ul>
<div id="main-logout" class="account-menu">
<ul id="main-account" class="nav-menu main-nav">
<li class="account" rv-show="account.show" rv-on-click="toggleVisibility | bind true">
<a href="javascript:;">
<div class="main-account">
<div class="account-type">{account.type}</div>
<div class="account-id">{account.id}</div>
<div rv-if="currency | not-eq ''" class="topMenuBalance" rv-html="account.balance"></div>
</div>
<div class="nav-caret"></div>
</a>
</li>
<li class="login ltr-direction" rv-show="show_login" rv-on-click="showLoginWin">
<button>Login</button>
</li>
</ul>
<ul id="all-accounts-top" class="nav-menu main-nav" rv-class-visible="show_submenu" rv-on-click="toggleVisibility | bind false" rv-on-mouseleave="toggleVisibility | bind false">
<li class="account">
<a href="javascript:;">
<div class="main-account">
<div class="account-type">{account.type}</div>
<div class="account-id">{account.id}</div>
<div rv-if="currency | not-eq ''" class="topMenuBalance" rv-html="account.balance"></div>
</div>
<div class="nav-caret"></div>
<ul id="select_language" rv-class-visible="confirm.visible" rv-on-mouseleave="toggleVisibility | bind false">
<li class="lang.value" rv-on-click="toggleVisibility | bind false">
<span class="world world-black"></span>
<div class="language-wrapper">
<span class="language">{lang.name}</span>
</div>
<span class="nav-caret"></span>
</li>
<li rv-each-ele='languages' class="ele.value" rv-class-invisible="lang.value | eq ele.value" rv-on-click='onclick | bind ele.value'>{ele.name}</li>
</ul>
</div>
<span class="contact-us" ><a href="#" id="contact-us" target="_blank">Contact Us</a></span>
<span class="time"></span>
</div>
<div id="nav-menu" class="dark-blue header">
<div class="container">
<div class="logo-wrapper">
<a href="#" id="logo-container" class="logo-parent">
<div class="logo">
<div></div>
</div>
<div class="binary-logo-text">
<div></div>
</div>
</a>
</div>
<ul class="top-nav-menu">
<li class="trade ltr-direction">
<a href="javascript:;" class="nav-dropdown-toggle">
Trade
<span class="nav-caret"></span>
</a>
<ul>
<a class="link real-account" href="javascript:;" rv-show="show_financial_link | or show_realaccount_link | or show_new_account_link">
<li
rv-on-click="openRealAccount"
rv-show="show_financial_link | negate | and show_realaccount_link"
rv-hide="has_real_account"
>
Upgrade to a Real Account
</li>
<li
rv-on-click="openFinancialAccountMF"
rv-show="show_financial_link">
Open a Financial Account
</li>
<li rv-show="show_new_account_link">Create Account</li>
</li>
<li class="instruments ltr-direction">
<a href="#" class="nav-dropdown-toggle">Chart <span class="nav-caret"></span></a>
</li>
<li class="resources ltr-direction">
<a href="#" class="nav-dropdown-toggle">Resources <span class="nav-caret"></span></a>
<ul>
<li class="resourceIndex"><a href="#" class="assetIndex"><span class="ui-icon ui-icon-list"></span>Asset Index</a></li>
<li class="resourceIndex"><a href="#" class="tradingTimes"><span class="ui-icon ui-icon-clock-b"></span>Trading Times</a></li>

<li><a href="#historical-data" class="historical-data"><span class="ui-icon ui-icon-databases"></span>Historical Data</a></li>
<li><a href="#selfexclusion" class="selfexclusion disabled"><span class="ui-icon ui-icon-gears"></span>Self-Exclusion</a></li>
<li><a href="#"><span class="ui-icon ui-icon-image"></span>Chart Themes</a>
<ul>
<li> <a href="#">Pre-Defined</a>
<ul>
<li> <a href="#theme_dark_blue" theme-name="dark-blue" class="theme_dark_blue">Dark Blue</a> </li>
<li> <a href="#theme_dark_green" theme-name="dark-green" class="theme_dark_green">Dark Green</a> </li>
<li> <a href="#theme_dark_unica" theme-name="dark-unica" class="theme_dark_unica">Dark Unica</a> </li>
<li> <a href="#theme_gray" theme-name="gray" class="theme_gray">Gray</a> </li>
<li> <a href="#theme_grid" theme-name="grid" class="theme_grid">Grid</a> </li>
<li> <a href="#theme_grid_light" theme-name="grid-light" class="theme_grid_light">Grid Light</a> </li>
<li> <a href="#theme_sand_signika" theme-name="sand-signika" class="theme_sand_signika">Sand Signika</a> </li>
</ul>
</li>
<li> <a href="#theme_custom" theme-name="custom" class="theme_custom">Custom Theme</a> </li>
<li> <a href="#theme_default" theme-name="default" class="theme_default">Default</a> </li>
</ul>
</li>
</ul>
</li>
<li class="workspace ltr-direction">
<a href="#" class="nav-dropdown-toggle">Workspace <span class="nav-caret"></span></a>
</li>
</ul>
<div id="main-logout" class="account-menu">
<ul id="main-account" class="nav-menu main-nav">
<li class="account" rv-show="account.show" rv-on-click="toggleVisibility | bind true">
<a href="javascript:;">
<div class="main-account">
<div class="account-type">{account.type}</div>
<div class="account-id">{account.id}</div>
<div rv-if="currency | not-eq ''" class="topMenuBalance" rv-html="account.balance"></div>
</div>
<div class="nav-caret"></div>
</a>
</li>
<li class="login ltr-direction" rv-show="show_login" rv-on-click="showLoginWin">
<button>Login</button>
</li>
</ul>
<ul id="all-accounts-top" class="nav-menu main-nav" rv-class-visible="show_submenu" rv-on-click="toggleVisibility | bind false" rv-on-mouseleave="toggleVisibility | bind false">
<li class="account">
<a href="javascript:;">
<div class="main-account">
<div class="account-type">{account.type}</div>
<div class="account-id">{account.id}</div>
<div rv-if="currency | not-eq ''" class="topMenuBalance" rv-html="account.balance"></div>
</div>
<div class="nav-caret"></div>
</a>
<div rv-show="show_financial_link | or show_realaccount_link | or show_new_account_link" class="separator-line-thin-gray"></div>
<div class="login-id-list">
<a href="javascript:;" rv-each-ele="oauth" rv-show="ele.id | not-eq account.id" rv-on-click="switchAccount | bind ele.id">
<li>
<div>{ele.type}</div>
<div>{ele.id}</div>
<ul>
<a class="link real-account" href="javascript:;" rv-show="show_financial_link | or show_realaccount_link | or show_new_account_link">
<li
rv-on-click="openRealAccount"
rv-show="show_financial_link | negate | and show_realaccount_link"
rv-hide="has_real_account"
>
Upgrade to a Real Account
</li>
<li
rv-on-click="openFinancialAccountMF"
rv-show="show_financial_link">
Open a Financial Account
</li>
<li rv-show="show_new_account_link">Create Account</li>
</a>
</div>
<div class="separator-line-thin-gray"></div>
<a class="link portfolio" href="javascript:;">
<li>Portfolio</li>
</a>
<a class="link statement" href="javascript:;">
<li>Statement</li>
</a>
<a class="link profitTable" href="javascript:;">
<li>Profit table</li>
</a>
<a class="link deposit" rv-show="account.is_virtual | eq 0" href="javascript:;">
<li>Deposit funds</li>
</a>
<a class="link withdraw" href="javascript:;" rv-show="account.is_virtual | eq 0">
<li>Withdraw funds</li>
</a>
<a class="link token-management" href="javascript:;">
<li>Token management</li>
</a>
<a class="link copytrade" href="javascript:;">
<li>Copy Trading</li>
</a>
<a class="link change-password" href="javascript:;">
<li>Change password</li>
</a>
<div class="separator-line-thin-gray"></div>
<a href="javascript:;" rv-on-click="logout">
<li>Logout</li>
</a>
</ul>
</li>
</ul>
</div>
</div>
</div>
<div rv-show="show_financial_link | or show_realaccount_link | or show_new_account_link" class="separator-line-thin-gray"></div>
<div class="login-id-list">
<a href="javascript:;" rv-each-ele="oauth" rv-show="ele.id | not-eq account.id" rv-on-click="switchAccount | bind ele.id">
<li>
<div>{ele.type}</div>
<div>{ele.id}</div>
</li>
</a>
</div>
<div class="separator-line-thin-gray"></div>
<a class="link portfolio" href="javascript:;">
<li>Portfolio</li>
</a>
<a class="link statement" href="javascript:;">
<li>Statement</li>
</a>
<a class="link profitTable" href="javascript:;">
<li>Profit table</li>
</a>
<a class="link deposit" rv-show="account.is_virtual | eq 0" href="javascript:;">
<li>Deposit funds</li>
</a>
<a class="link withdraw" href="javascript:;" rv-show="account.is_virtual | eq 0">
<li>Withdraw funds</li>
</a>
<a class="link token-management" href="javascript:;">
<li>Token management</li>
</a>
<a class="link copytrade" href="javascript:;">
<li>Copy Trading</li>
</a>
<a class="link change-password" href="javascript:;">
<li>Change password</li>
</a>
<div class="separator-line-thin-gray"></div>
<a href="javascript:;" rv-on-click="logout">
<li>Logout</li>
</a>
</ul>
</li>
</ul>
</div>
</div>
</div>
</nav>

<!-- TODO - Build a better help nativation system for the following menu item -->
<!-- <li class="resourceIndex"><a href="#">Trading Guide</a></li> -->
Expand Down
Loading