Created project view
This commit is contained in:
Alexandre Bourlier
parent
4fd629a21b
commit
44fe4b91f9
@ -3,7 +3,7 @@
|
||||
<ldp-route name="member-chat">
|
||||
<i class="fa fa-comment-o" aria-hidden="true"></i>
|
||||
</ldp-route>
|
||||
<ldp-route name="member-profile">
|
||||
<ldp-route name="member-detail">
|
||||
<i class="fa fa-user" aria-hidden="true"></i>
|
||||
</ldp-route>
|
||||
</ldp-router>
|
||||
@ -19,22 +19,24 @@
|
||||
data-room-jid="anonymous@conference.nomnom.im">
|
||||
</hd-chat-window>
|
||||
|
||||
<ldp-display
|
||||
id="member-profile"
|
||||
set-name="firstname, name-separator, lastname"
|
||||
value-name-separator=" "
|
||||
set-location="city, city-separator, country"
|
||||
value-city-separator=", "
|
||||
data-fields="avatar, name, location, email, number"
|
||||
widget-avatar="ldp-display-img"
|
||||
widget-email="ldp-display-mailto"
|
||||
widget-number="ldp-display-tel"
|
||||
bind-resources
|
||||
></ldp-display>
|
||||
<div id="member-detail" style="display: none">
|
||||
<ldp-display
|
||||
set-name="firstname, name-separator, lastname"
|
||||
value-name-separator=" "
|
||||
set-location="city, city-separator, country"
|
||||
value-city-separator=", "
|
||||
data-fields="avatar, name, location, email, number"
|
||||
widget-avatar="ldp-display-img"
|
||||
widget-email="ldp-display-mailto"
|
||||
widget-number="ldp-display-tel"
|
||||
bind-resources
|
||||
></ldp-display>
|
||||
|
||||
<span>Skills here</span>
|
||||
<!--<ldp-display -->
|
||||
<!--id="member-skills" -->
|
||||
<!--id-suffix="skills"-->
|
||||
<!--bind-resources-->
|
||||
<!--></ldp-display>-->
|
||||
<!-- ></ldp-display>-->
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -16,6 +16,7 @@
|
||||
<ldp-route class="nav-item d-none" name="member" id-prefix="http://localhost:8000/members/">
|
||||
Membre
|
||||
</ldp-route>
|
||||
|
||||
<ldp-route class="nav-item pl-4 pr-4 pb-2 align-self-stretch text-center text-md-left" name="projects">
|
||||
<i class="fa fa-tasks" aria-hidden="true"></i>
|
||||
<span class="d-none d-md-inline"> Projets</span>
|
||||
@ -23,6 +24,7 @@
|
||||
<ldp-route class="nav-item d-none" name="project" id-prefix="http://localhost:8000/projects/">
|
||||
Projet
|
||||
</ldp-route>
|
||||
|
||||
<ldp-route class="nav-item pl-4 pr-4 pb-2 align-self-stretch text-center text-md-left" name="groups">
|
||||
<i class="fa fa-comments" aria-hidden="true"></i>
|
||||
<span class="d-none d-md-inline"> Groupes</span>
|
||||
|
||||
@ -1,33 +1,35 @@
|
||||
<div id="project" style="display: none">
|
||||
<div class="page-header">
|
||||
<h1>Project</h1>
|
||||
</div>
|
||||
<div id="project" class="view-with-vertical-menu" style="display: none">
|
||||
<ldp-router id="project-page-router" class="vertical-menu border-left" default-route="profile-chat">
|
||||
<ldp-route name="project-chat">
|
||||
<i class="fa fa-comment-o" aria-hidden="true"></i>
|
||||
</ldp-route>
|
||||
<ldp-route name="project-detail">
|
||||
<i class="fa fa-user" aria-hidden="true"></i>
|
||||
</ldp-route>
|
||||
</ldp-router>
|
||||
|
||||
<ldp-display
|
||||
id="projectTitle"
|
||||
set-label="number, label-separator, name"
|
||||
value-label-separator=" - "
|
||||
data-fields="label"
|
||||
bind-resource
|
||||
></ldp-display>
|
||||
<hd-chat-window
|
||||
id="project-chat"
|
||||
data-authentication="anonymous"
|
||||
data-auto-login="true"
|
||||
data-bosh-service-url="https://conversejs.org/http-bind/"
|
||||
data-debug="false"
|
||||
data-jid="nomnom.im"
|
||||
data-locales-url="http://hd-app.local/dist/lib/xmpp-chat-component/node_modules/converse.js/locale/{{{locale}}}/LC_MESSAGES/converse.json",
|
||||
data-room-jid="anonymous@conference.nomnom.im">
|
||||
</hd-chat-window>
|
||||
|
||||
<div id="projectDiv" style="display: none;">
|
||||
<div class="container-fluid" id="projectContainer">
|
||||
<div class="row">
|
||||
<div id="project-detail" style="display: none">
|
||||
<ldp-display
|
||||
id="project-detail"
|
||||
set-label="project, number, label-separator, name"
|
||||
value-project="Projet n°"
|
||||
value-label-separator=" : "
|
||||
data-fields="label"
|
||||
bind-resources
|
||||
></ldp-display>
|
||||
|
||||
<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>Client description here</div>
|
||||
<div>Team here</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -18,74 +18,3 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
|
||||
@ -1,68 +1,9 @@
|
||||
#projectLeftCol, #projectRightCol {
|
||||
display: flex;
|
||||
#project-detail {
|
||||
display: block;
|
||||
padding-top: 10px;
|
||||
|
||||
div[name="label"] {
|
||||
display: flex;
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
|
||||
#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;
|
||||
} */
|
||||
|
||||
@ -12,5 +12,5 @@
|
||||
@import "member";
|
||||
@import "groupsList";
|
||||
@import "project";
|
||||
@import "projects-list";
|
||||
@import "projects";
|
||||
@import "dashboard";
|
||||
|
||||
Loading…
Reference in New Issue
Block a user