dario.genga/FE_Charts
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Update the display order of the elements of the UI

Browse Source 
The pages display the graph at the top instead at the bottom.

Also added some css to improve the look of the UI
This commit is contained in:
dario-cfpt
2020-03-07 15:23:54 +01:00
parent d2fa8edb74
commit 2fb4a2f13e
5 changed files with 60 additions and 61 deletions
Download Patch File Download Diff File Expand all files Collapse all files

15
mobile/www/css/index.css
View File

@ -1,4 +1,13 @@
.no-select {
-webkit-user-select: none; /* safari */
-ms-user-select: none; /* IE 10+ and Edge */
user-select: none; /* standard syntax */
}
.img-character { .img-character {
display: block;
margin-left: auto;
margin-right: auto;
width: 256px; width: 256px;
height: 256px; height: 256px;
} }
@ -6,5 +15,9 @@
#table-classes-content > tr > td { #table-classes-content > tr > td {
text-align: center; text-align: center;
display: block !important; display: block !important;
padding-top: 1%; padding-top: 3.7%;
}
.data-table-title {
text-align: center;
} }

4
mobile/www/index.html
View File

@ -18,12 +18,12 @@
<link rel="stylesheet" href="css/app.css"> <link rel="stylesheet" href="css/app.css">
<link rel="stylesheet" href="css/index.css"> <link rel="stylesheet" href="css/index.css">
</head> </head>
<body> <body class="no-select">
<div id="app"> <div id="app">
<!-- Status bar overlay for fullscreen mode--> <!-- Status bar overlay for fullscreen mode-->
<div class="statusbar"></div> <div class="statusbar"></div>
<!-- Left panel with cover effect--> <!-- Left panel with cover effect-->
<div class="panel panel-left panel-cover theme-dark"> <div class="panel panel-left panel-cover">
<div class="view"> <div class="view">
<div class="page"> <div class="page">
<div class="navbar"> <div class="navbar">

33
mobile/www/pages/comparator.html
View File

@ -11,6 +11,17 @@
</div> </div>
</div> </div>
<div class="page-content"> <div class="page-content">
<div class="list no-hairlines-md">
<figure class="highcharts-figure">
<div id="container-comparator"></div>
</figure>
<div class="block">
<p class="segmented segmented-raised segmented-round">
<button id="btn-graph-spider-web" class="button button-round button-active">Spider web</button>
<button id="btn-graph-column-chart" class="button button-round">Column chart</button>
</p>
</div>
</div>
<div class="card data-table data-table-collapsible data-table-init"> <div class="card data-table data-table-collapsible data-table-init">
<table id="table-comparator"> <table id="table-comparator">
<thead id="table-comparator-header"> <thead id="table-comparator-header">
@ -22,34 +33,16 @@
<tbody id="table-comparator-content"> <tbody id="table-comparator-content">
</tbody> </tbody>
</table> </table>
<button id="btn-compare" class="button button-fill">Compare</button> <button id="btn-compare" class="button button-fill">Select characters to compare</button>
<a class="item-link smart-select smart-select-init" data-open-in="popup" data-searchbar="true" data-searchbar-placeholder="Search a character..."> <a class="item-link smart-select smart-select-init" data-open-in="popup" data-searchbar="true" data-searchbar-placeholder="Search a character...">
<select id="select-compare" multiple maxlength="8"> <select id="select-compare" multiple maxlength="8">
</select> </select>
<div class="item-content" hidden> <div class="item-content" hidden>
<div class="item-inner"> <div class="item-inner">
<div class="item-title">Comparator</div> <div class="item-title">Select characters (8 max)</div>
</div> </div>
</div> </div>
</a> </a>
</div> </div>
<div class="list no-hairlines-md">
<ul>
<li class="item-content item-input">
<div class="item-media">
<i class="icon demo-list-icon"></i>
</div>
</li>
</ul>
<figure class="highcharts-figure">
<div id="container-comparator"></div>
</figure>
<div class="block">
<p class="segmented segmented-raised segmented-round">
<button id="btn-graph-spider-web" class="button button-round button-active">Spider web</button>
<button id="btn-graph-column-chart" class="button button-round">Column chart</button>
</p>
</div>
</div>
</div> </div>
</div> </div>

37
mobile/www/pages/feclass.html
View File

@ -11,8 +11,21 @@
</div> </div>
</div> </div>
<div class="page-content"> <div class="page-content">
<div class="card data-table data-table-collapsible data-table-init"> <div>
<div class="data-table-title">Growth rates :</div> <div class="list no-hairlines-md">
<figure class="highcharts-figure">
<div id="container-class-gr"></div>
</figure>
<div class="block">
<p class="segmented segmented-raised segmented-round">
<button id="btn-graph-spider-web" class="button button-round button-active">Spider web</button>
<button id="btn-graph-column-chart" class="button button-round">Column chart</button>
</p>
</div>
</div>
</div>
<div class="card data-table data-table-collapsible data-table-init">
<div class="data-table-title">Growth rates</div>
<table id="table-growth-rates"> <table id="table-growth-rates">
<thead> <thead>
<tr id="table-gr-header"> <tr id="table-gr-header">
@ -24,25 +37,5 @@
</tbody> </tbody>
</table> </table>
</div> </div>
<div>
<div class="list no-hairlines-md">
<ul>
<li class="item-content item-input">
<div class="item-media">
<i class="icon demo-list-icon"></i>
</div>
</li>
</ul>
<figure class="highcharts-figure">
<div id="container-class-gr"></div>
</figure>
<div class="block">
<p class="segmented segmented-raised segmented-round">
<button id="btn-graph-spider-web" class="button button-round button-active">Spider web</button>
<button id="btn-graph-column-chart" class="button button-round">Column chart</button>
</p>
</div>
</div>
</div>
</div> </div>
</div> </div>

32
mobile/www/pages/stat.html
View File

@ -12,21 +12,11 @@
</div> </div>
<div class="page-content"> <div class="page-content">
<img id="picture-char" class="img-character"> <img id="picture-char" class="img-character">
<div class="card data-table data-table-collapsible data-table-init">
<div class="data-table-title">Growth rates :</div>
<table id="table-growth-rates">
<thead>
<tr id="table-gr-header">
</tr>
</thead>
<tbody>
<tr id="table-gr-content">
</tr>
</tbody>
</table>
</div>
<div> <div>
<div class="list no-hairlines-md"> <div class="list no-hairlines-md">
<figure class="highcharts-figure">
<div id="container-char-gr"></div>
</figure>
<ul> <ul>
<li class="item-content item-input"> <li class="item-content item-input">
<div class="item-media"> <div class="item-media">
@ -41,9 +31,6 @@
</div> </div>
</li> </li>
</ul> </ul>
<figure class="highcharts-figure">
<div id="container-char-gr"></div>
</figure>
<div class="block"> <div class="block">
<p class="segmented segmented-raised segmented-round"> <p class="segmented segmented-raised segmented-round">
<button id="btn-graph-spider-web" class="button button-round button-active">Spider web</button> <button id="btn-graph-spider-web" class="button button-round button-active">Spider web</button>
@ -52,5 +39,18 @@
</div> </div>
</div> </div>
</div> </div>
<div class="card data-table data-table-collapsible data-table-init">
<div class="data-table-title">Growth rates</div>
<table id="table-growth-rates">
<thead>
<tr id="table-gr-header">
</tr>
</thead>
<tbody>
<tr id="table-gr-content">
</tr>
</tbody>
</table>
</div>
</div> </div>
</div> </div>