Luke's work
This commit is contained in:
Alexandre Bourlier
commit
386938389f
7
.gitignore
vendored
Normal file
7
.gitignore
vendored
Normal file
@ -0,0 +1,7 @@
|
|||||||
|
# Folders
|
||||||
|
.git
|
||||||
|
node_modules
|
||||||
|
dist/css/*
|
||||||
|
!dist/css/.gitkeep
|
||||||
|
dist/html/*
|
||||||
|
!dist/html/.gitkeep
|
||||||
52
Gruntfile.js
Normal file
52
Gruntfile.js
Normal 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']);
|
||||||
|
|
||||||
|
};
|
||||||
0
dist/css/.gitkeep
vendored
Normal file
0
dist/css/.gitkeep
vendored
Normal file
0
dist/html/.gitkeep
vendored
Normal file
0
dist/html/.gitkeep
vendored
Normal file
BIN
img/Logo_Happy_Dev.png
Normal 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
BIN
img/chat_image.PNG
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 79 KiB |
BIN
img/default_avatar.png
Normal file
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
2799
package-lock.json
generated
Normal file
File diff suppressed because it is too large
Load Diff
15
package.json
Normal file
15
package.json
Normal 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
2
src/html/footer.html
Normal file
@ -0,0 +1,2 @@
|
|||||||
|
</body>
|
||||||
|
</html>
|
||||||
26
src/html/header.html
Normal file
26
src/html/header.html
Normal 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
147
src/html/index.html
Normal 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">N°</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=" €"></ldp-display>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- project view -->
|
||||||
|
<ldp-display id="projectTitle" data-fields="title, space, number" value-space=" - "></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=" €"></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
30
src/scss/groupsList.css
Normal 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
19
src/scss/home.css
Normal 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
77
src/scss/members.css
Normal 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
100
src/scss/menu.css
Normal 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
68
src/scss/project.css
Normal 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
83
src/scss/projectsList.css
Normal 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
20
src/scss/styles.scss
Normal 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;
|
||||||
|
}
|
||||||
Loading…
Reference in New Issue
Block a user