Comunic/ComunicWeb
1
0
Fork 0
mirror of https://github.com/pierre42100/ComunicWeb synced 2024-11-22 20:19:21 +00:00
Code Issues Projects Releases Wiki Activity

Work progress on project UI

Browse Source
This commit is contained in:
Pierre HUBERT 2019-01-14 13:17:05 +01:00
parent 497b8f1274
commit f2ab71cf3f
3 changed files with 110 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

54
assets/zip/personnal-data-export-navigator/Export.html
View File

@ -12,8 +12,12 @@
</head> </head>
<body> <body>
<ul class="sidenav sidenav-fixed"> <header>
<li class="bold"><a href="#" class="waves-effect waves-teal">Comunic data export</a></li>
<div class="container"><a href="#" data-target="nav-mobile" class="top-nav sidenav-trigger waves-effect waves-light circle hide-on-large-only"><i class="material-icons">menu</i></a></div>
<ul id="nav-mobile" class="sidenav sidenav-fixed">
<li class="bold"><a href="#home" class="waves-effect waves-teal">Comunic data export</a></li>
<li class="bold"><a href="#user-info" class="waves-effect waves-teal">User Information</a></li> <li class="bold"><a href="#user-info" class="waves-effect waves-teal">User Information</a></li>
<li class="bold"><a href="#friends-list" class="waves-effect waves-teal">Friends List</a></li> <li class="bold"><a href="#friends-list" class="waves-effect waves-teal">Friends List</a></li>
<li class="bold"><a href="#posts" class="waves-effect waves-teal">Posts</a></li> <li class="bold"><a href="#posts" class="waves-effect waves-teal">Posts</a></li>
@ -25,9 +29,55 @@
<li class="bold"><a href="#conversations" class="waves-effect waves-teal">Conversations</a></li> <li class="bold"><a href="#conversations" class="waves-effect waves-teal">Conversations</a></li>
</ul> </ul>
</header>
<main>
<div id="home" class="category container">
Please use the navigation bar located at the left of this page to access to the different categories of content.
</div>
<div id="user-info" class="category container">
Loading user information
</div>
<div id="friends-list" class="category container">
Loading friends list
</div>
<div id="posts" class="category container">
Loading posts
</div>
<div id="comments" class="category container">
Loading comments
</div>
<div id="likes" class="category container">
Loading likes
</div>
<div id="survey-responses" class="category container">
Loading survey responses
</div>
<div id="movies" class="category container">
Loading movies
</div>
<div id="all-conversations-message" class="category container">
Loading all conversation messages
</div>
<div id="conversations" class="category container">
Loading conversations
</div>
</main>
<!--JavaScript at end of body for optimized loading--> <!--JavaScript at end of body for optimized loading-->
<script type="text/javascript" src="assets/materialize/js/materialize.min.js"></script> <script type="text/javascript" src="assets/materialize/js/materialize.min.js"></script>
<script src="assets/js/main.js"></script>
</body> </body>
</html> </html>

14
assets/zip/personnal-data-export-navigator/assets/css/main.css
View File

@ -1,5 +1,19 @@
/**
* Data export result stylesheet
*
* @author Pierre HUBERT
*/
.sidenav.sidenav-fixed { .sidenav.sidenav-fixed {
/*transform: unset;*/ /*transform: unset;*/
/*margin-top: 80px;*/ /*margin-top: 80px;*/
} }
main {
margin-left: 300px;
}
main .container {
display: none;
}

34
assets/zip/personnal-data-export-navigator/assets/js/main.js Normal file
View File

@ -0,0 +1,34 @@
/**
* Data export visualization navigator
*
* @author Pierre HUBERT
*/
/**
* Refresh tabs visibility accordingly to the hash of
* the current URL
*/
function RefreshTabsVisibility(){
var hash = location.href.toString().split("#")[1];
if(!hash)
return;
document.querySelectorAll(".category").forEach(el => {
el.style.display = el.id === hash ? "block" : "none";
});
}
/**
* Automatically switch the tab when it
* is required by the user
*/
window.addEventListener("hashchange", RefreshTabsVisibility);
//Page initialization
RefreshTabsVisibility();