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