Luke's work

This commit is contained in:
Alexandre Bourlier 2018-03-12 00:42:46 +01:00
commit 386938389f
20 changed files with 3447 additions and 0 deletions

7
.gitignore vendored Normal file
View File

@ -0,0 +1,7 @@
# Folders
.git
node_modules
dist/css/*
!dist/css/.gitkeep
dist/html/*
!dist/html/.gitkeep

52
Gruntfile.js Normal file
View File

@ -0,0 +1,52 @@
/*global module:false*/
module.exports = function(grunt) {
// Project configuration.
grunt.initConfig({
// Metadata.
pkg: grunt.file.readJSON('package.json'),
// Task configuration.
sass: {
options: {
sourceMap: true
},
dist: {
files: {
'dist/css/<%= pkg.name %>.css': 'src/scss/*.scss'
}
}
},
concat: {
options: {
stripBanners: true
},
dist: {
src: ['src/html/header.html', 'src/html/*.html', '!src/html/footer.html', 'src/html/footer.html'],
dest: 'dist/html/index.html'
}
},
//uglify: {
//options: {},
//dist: {
//src: '<%= concat.dist.dest %>',
//dest: 'dist/<%= pkg.name %>.min.js'
//}
//},
watch: {
}
});
// These plugins provide necessary tasks.
grunt.loadNpmTasks('grunt-contrib-concat');
grunt.loadNpmTasks('grunt-sass');
//grunt.loadNpmTasks('grunt-contrib-uglify');
grunt.loadNpmTasks('grunt-contrib-watch');
// Default task.
grunt.registerTask('default', ['concat', 'sass']);
};

2
README.md Normal file
View File

@ -0,0 +1,2 @@
**Requires**
- Grunt CLI

0
dist/css/.gitkeep vendored Normal file
View File

0
dist/html/.gitkeep vendored Normal file
View File

BIN
img/Logo_Happy_Dev.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 9.9 KiB

BIN
img/chat_image.PNG Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 79 KiB

BIN
img/default_avatar.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.8 KiB

2799
package-lock.json generated Normal file

File diff suppressed because it is too large Load Diff

15
package.json Normal file
View File

@ -0,0 +1,15 @@
{
"name": "hd-app",
"version": "0.1.0",
"engines": {
"node": ">= 0.10.0"
},
"devDependencies": {
"grunt": "~0.4.5",
"grunt-contrib-concat": "~0.4.0",
"grunt-contrib-jshint": "~0.10.0",
"grunt-contrib-uglify": "~0.5.0",
"grunt-contrib-watch": "~0.6.1",
"grunt-sass": "^2.1.0"
}
}

2
src/html/footer.html Normal file
View File

@ -0,0 +1,2 @@
</body>
</html>

26
src/html/header.html Normal file
View File

@ -0,0 +1,26 @@
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Happy Dev App</title>
<!-- Font -->
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Righteous">
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<!-- Stylesheets -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" />
<link rel="stylesheet" href="../css/hd-app.css" />
<!-- Javascript -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/webcomponentsjs/1.0.20/webcomponents-loader.js"></script>
<link rel="import" href="https://cdn.happy-dev.fr/ldp-display/ldp-display.html" />
<link rel="import" href="https://cdn.happy-dev.fr/ldp-display/ldp-router.html" />
<link rel="import" href="https://cdn.happy-dev.fr/ldp-display/ldp-calendar.html" />
</head>
<body>

147
src/html/index.html Normal file
View File

@ -0,0 +1,147 @@
<div id="mainContainer" class="container-fluid">
<div class="row pt-3">
<!-- Menu -->
<div class="col-md-2 menu">
<div id="menu-title">HAPPY APP</div>
<ldp-router root="ldp-root" default-route="home">
<ldp-route name="members">Membres</ldp-route>
<ldp-route name="projects">Projets</ldp-route>
<ldp-route name="groups">Groupes</ldp-route>
<ldp-route name="calendar">Agenda</ldp-route>
<ldp-route name="drive">Drive</ldp-route>
<!-- <ldp-route name="home">Home</ldp-route> -->
</ldp-router>
<div id="menu-placeholder" ><img src="https://dummyimage.com/220x300/666666/cccccc&text=Placeholder/20" alt="placeholder"></div>
</div>
<main id="ldp-root" class="col-md-10">
<!-- HOME -->
<div id="home" style="display: none">
<div id="logoContainer">
<img src="./img/Logo_Happy_Dev.png" alt="Logo Happy Dev">
</div>
</div>
<!-- MEMBERS -->
<div id="members" style="display: none">
<h1 class="page-title">Membres</h1>
<ldp-display id="profilesList" data-src="http://lucky.alwaysdata.net/api/users/" data-fields="miniature" set-miniature="picture, name" widget-picture="ldp-display-img"></ldp-display>
<!-- <ldp-display id="profilesList" data-src="https://djangoldp.happy-dev.fr/skippers/" data-fields="miniature, name" set-miniature="picture" widget-picture="ldp-display-img"
set-name="name, testmdr" value-testmdr="C'est trés amusant"></ldp-display> -->
<!-- test direct dans data-fields -->
<!-- <ldp-display id="profilesList" data-src="https://djangoldp.happy-dev.fr/skippers/" data-fields="picture, name" widget-picture="ldp-display-img"></ldp-display> -->
<script type="text/javascript">
document.addEventListener("DOMContentLoaded", function (event) {
var profilesListElt = document.querySelector('#profilesList');
var profileDivElt = document.querySelector('#profileDiv');
var profileDetailElt = document.querySelector('#profileDetail');
profilesListElt.addEventListener('select', function (event) {
profileDivElt.style.display = 'flex';
profileDetailElt.setAttribute("data-src", event.detail.resource['@id']);
});
profileDivElt.addEventListener('click', function (event) {
if (event.target.id == "profileDiv") {
profileDivElt.style.display = 'none';
}
});
});
</script>
</div>
<!-- PROJECTS -->
<div id="projects" style="display: none">
<h1 class="page-title" id="projectsListTitle">Projets</h1>
<div id="projectsTable">
<ol>
<li id="categorieNumber">Numéro</li>
<li id="categorieNumberAlt"></li>
<li id="categorieTitle">Titre</li>
<li id="categorieAssociate">Associé</li>
<li id="categorieIncome">CA</li>
<li id="categorieState">Etat</li>
</ol>
<ldp-display id="projectsList" data-src="http://lucky.alwaysdata.net/api/projects/" data-fields="number, title, associate, income-div, state" set-income-div="income, euro" value-euro="&#160€"></ldp-display>
</div>
<!-- project view -->
<ldp-display id="projectTitle" data-fields="title, space, number" value-space="&#160-&#160"></ldp-display>
<div id="projectDiv" style="display: none;">
<div class="container-fluid" id="projectContainer">
<div class="row">
<div class="col-md-9" id="projectLeftCol">
<div class="chat-box">
<img src=".\img\chat_image.PNG" alt="Chat box">
</div>
</div>
<div class="col-md-3" id="projectRightCol">
<ldp-display id="projectDetail" data-fields="right-panel" set-right-panel="quotation-div, income-div, nextBill" set-quotation-div="quotation, euro" set-income-div="income, euro" value-euro="&#160€"></ldp-display>
<button id="projectDivBackButton" type="button" class="btn btn-primary">Back</button>
</div>
<!-- <button id="projectDivBackButton" type="button" class="btn btn-primary"><i class="material-icons">reply</i></button> -->
</div>
</div>
</div>
<script type="text/javascript">
document.addEventListener("DOMContentLoaded", function (event) {
var projectsListElt = document.querySelector('#projectsList');
var projectsTableElt = document.querySelector('#projectsTable');
var projectDivElt = document.querySelector('#projectDiv');
var projectDetailElt = document.querySelector('#projectDetail');
var projectTitleElt = document.querySelector('#projectTitle');
var projectsListTitleElt = document.querySelector('#projectsListTitle');
projectsListElt.addEventListener('select', function (event) {
projectsTableElt.style.display = 'none';
projectsListTitleElt.style.display = 'none';
projectDivElt.style.display = 'block';
projectTitleElt.style.display ='block';
projectDetailElt.setAttribute("data-src", event.detail.resource['@id']);
projectTitleElt.setAttribute("data-src", event.detail.resource['@id']);
});
projectDivElt.addEventListener('click', function (event) {
if (event.target.id == "projectDivBackButton") {
projectDivElt.style.display = 'none';
projectTitleElt.style.display = 'none';
projectsTableElt.style.display = 'block';
projectsListTitleElt.style.display = 'block';
}
});
});
</script>
</div>
<!-- GROUPS -->
<div id="groups" style="display: none">
<h1 class="page-title">Groupes</h1>
<!-- <ldp-display data-src="http://lucky.alwaysdata.net/api/groups/" data-fields="title, membersTest" widget-membersTest="ldp-list" value-membersTest="Benoit"></ldp-display> -->
<ldp-display id="groupsList" data-src="http://lucky.alwaysdata.net/api/groups/" data-fields="title, members" widget-members="ldp-list"></ldp-display>
<!-- <ldp-display data-src="http://lucky.alwaysdata.net/api/groups/" data-fields="title, membersTest" widget-membersTest="ldp-list" value-membersTest="["Luke", "Bruno"]"></ldp-display> -->
</div>
<!-- CALENDAR -->
<div id="calendar" style="display: none">
<h1 class="page-title">Agenda</h1>
<ldp-calendar data-src="http://lucky.alwaysdata.net/api/events/" style="display: block; height: 300px; width: 500px;"></ldp-calendar>
</div>
<!-- DRIVE -->
<div id="drive" style="display: none">
<h1 class="page-title">Drive</h1>
</div>
</main>
</div>
</div>
<!--Profil Modal-->
<div id="profileDiv" style="display: none;">
<ldp-display id="profileDetail" data-fields="profil-modal" set-profil-modal="picture, profil-content" widget-picture="ldp-display-img" set-profil-content="name, languages, country"></ldp-display>
</div>

30
src/scss/groupsList.css Normal file
View File

@ -0,0 +1,30 @@
#groupsList {
display: flex;
flex-direction: column;
}
#groupsList>ldp-display {
display: flex;
flex-direction: row;
}
#groupsList ul {
display: inline-flex;
}
#groupsList>ldp-display .title {
font-family:
}
/* TEST */
#groupsList>ldp-display {
border: 1px dashed royalblue;
}
#groupsList ul {
border: 3px solid green;
}
#groupsList .title {
border: 3px solid blueviolet;
}

19
src/scss/home.css Normal file
View File

@ -0,0 +1,19 @@
#home {
height: 100%;
}
#logoContainer {
height: 100%;
display: flex;
justify-content: center;
align-items: center;
}
#logoContainer>img {
transition: transform .4s;
}
#logoContainer>img:hover {
transform: scale(1.5);
}
/* MEDIA QUERY Pour centrer sur un petit écran */

77
src/scss/members.css Normal file
View File

@ -0,0 +1,77 @@
#profilesList {
display: flex;
flex-wrap: wrap;
justify-content: space-evenly;
max-width: fit-content;
}
.miniature {
padding: 10px;
display: flex;
flex-direction: column;
background-color: #eee;
margin: 10px;
border: 1px solid #ddd;
border-radius: 3px 3px 15px 15px;
/* border-radius: 15px 15px 3px 3px; */
transition: all .3s;
}
.miniature:hover {
box-shadow: 0 0 12px rgba(51, 51, 51, .2);
cursor: pointer;
}
.miniature .picture {
width: 150px;
display: block;
/* border-radius: 50%; */
}
.miniature .name {
padding-top: 15px;
text-align: center;
font-size: 20px;
}
/* Profil Modal */
#profileDiv {
position: fixed;
top: 0;
bottom: 0;
width: 100%;
background-color: rgba(51, 51, 51, 0.8);
display: none;
justify-content: center;
align-items: center;
z-index: 1100;
}
#profileDetail {
background-color: white;
padding: 10px;
border: 1px solid #ddd;
border-radius: 3px 3px 15px 15px;
}
.profile-content {
padding: 10px;
text-align: center;
}
.profile-content ldp-display-div {
display: flex;
flex-direction: column;
}
#profileDetail .picture {
width: 300px;
height: 300px;
border-radius: 50%;
}
#profileDetail .name {
font-size: 24px;
color: aqua;
}

100
src/scss/menu.css Normal file
View File

@ -0,0 +1,100 @@
.menu ldp-route {
display: block;
font-size: 1.2em;
text-decoration: none;
line-height: 2.5em;
color: #666;
padding: 0.5em;
margin: auto;
padding-left: 20px;
transition: background-color 0.3s;
position: relative;
}
/* Fait office de border-bottom */
.menu ldp-route::after {
content: "";
background: #f1f1f1;
position: absolute;
bottom: -1px;
left: 10px;
width: 80%;
height: 1px;
}
.menu ldp-route:hover {
cursor: pointer;
color: #000;
background-color: darkgrey;
}
.menu ldp-route[active] {
cursor: pointer;
/* color: #000; */
background-color: aliceblue;
}
.menu ldp-route:hover {
cursor: pointer;
color: #000;
background-color: darkgrey;
}
.menu {
border-right: 0.5px solid #ccc;
max-width: 275px;
min-width: 125px;
padding: 0;
}
.menu ldp-router {
padding: 10px 0;
}
#menu-title {
font-size: 2em;
/* margin-left: 10px; */
/* pas top centrer sur peite largeur, comment faire sans margin-left ? */
margin-right: 2px;
font-weight: bold;
font-family: 'Righteous', cursive;
display: flex;
justify-content: center;
}
#menu-placeholder {
display: flex;
justify-content: center;
overflow: hidden;
margin: 25px 10px 0 10px;
background-color: #666666;
}
@media only screen and (max-width: 767px) {
#menu-placeholder {
display: none;
}
.menu {
border-right: none;
max-width: none;
}
.menu ldp-router {
display: flex;
flex-wrap: wrap;
padding: 0;
}
.menu ldp-route {
padding-left: 0.5em;
}
ldp-route:hover,
.used {
background: transparent;
}
}
@media only screen and (max-height: 800px) and (min-width: 767px) {
.menu ldp-route {
padding: 0;
padding-left: 20px;
}
}

68
src/scss/project.css Normal file
View File

@ -0,0 +1,68 @@
#projectLeftCol, #projectRightCol {
display: flex;
}
#projectLeftCol {
/* float: left; */
padding-left: 0;
}
#projectRightCol {
/* float: right; */
/* padding: 0; */
border: 1px solid;
}
#projectTitle {
display: block;
max-width: fit-content;
/* pourquoi de la marge à droite ? */
}
#projectTitle>ldp-display-div {
font-size: 2.5rem;
line-height: 1.1;
font-weight: 400;
margin-bottom: 20px;
font-family: 'Righteous', cursive;
display: inline-block;
position: relative
}
/* Fait office de "text-decoration-line: underline" */
/* #projectTitle>.title::after { */
#projectTitle>ldp-display-div::after {
content: "";
background: #292A2B;
position: absolute;
bottom: 2px;
width: 100%;
height: 4px;
}
#projectDetail .income-div, #projectDetail .quotation-div {
display: flex;
}
.chat-box {
border: 1px solid #FCC721;
width: inherit;
/* max-width: 1000px; */
display: flex;
overflow: hidden;
}
#projectDivBackButton {
height: fit-content;
}
/* TEST */
/* #projectDetail .project-title {
background-color: plum;
}
#projectDetail .right-panel {
background-color: chartreuse;
} */

83
src/scss/projectsList.css Normal file
View File

@ -0,0 +1,83 @@
/* For smaller overall projects list */
#projectsTable {
max-width: 1222px;
}
#projectsTable ol, #projectsList>ldp-display {
display: flex;
justify-content: space-around;
border-width: 0px 2px 2px 2px; /* no border-top, except for "ol" */
border-style: solid;
border-color: black;
}
#projectsTable ol {
border-width: 2px;
background-color: darkgrey;
margin-bottom: 0 !important;
}
#projectsTable ol li , #projectsList>ldp-display>ldp-display-div {
display: flex;
border-right: 2px solid black;
/* border-left: 1px solid red; */
}
#projectsList .income-div {
border-right: 2px solid black;
}
#projectsList ldp-display>.income-div>ldp-display-div {
display: inline-block;
}
/* Acceptable, mais j'aimerais écrire autrement les sélecteurs. écrire en une fois les 2 "projectList..." */
#projectsTable ol li, #projectsList ldp-display>ldp-display-div, #projectsList ldp-display>.income-div {
padding-left: 0.5vw;
}
#projectsTable #categorieNumber, #projectsTable #categorieNumberAlt, #projectsList .number {
width: 10%;
}
#projectsTable #categorieTitle, #projectsList .title {
width: 40%;
}
#projectsTable #categorieAssociate, #projectsList .associate {
width: 20%;
}
#projectsTable #categorieIncome, #projectsList .income-div {
width: 15%;
}
#projectsTable #categorieState, #projectsList .state {
width: 15%;
border-right: none;
}
/* Interaction et tout */
#projectsList>ldp-display:nth-child(odd) {
background-color: aliceblue;
}
#projectsList>ldp-display:hover {
cursor: pointer;
/* background-color: #0080FF; */
background-color: #FFF700;
}
#projectsList>ldp-display {
transition: background-color 0.3s;
}
#projectsTable [id*="Alt"] {
display: none;
}
@media only screen and (max-width: 767px) {
#projectsTable #categorieNumber {
display: none;
}
#projectsTable #categorieNumberAlt {
display: flex;
}
}

20
src/scss/styles.scss Normal file
View File

@ -0,0 +1,20 @@
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html, body, #mainContainer {
height: 100%;
}
.page-title {
font-size: 2.5rem;
margin-bottom: 20px;
font-family: 'Righteous', cursive;
text-decoration-line: underline;
}
#ldp-root {
padding-right: 0;
}