Commit a4138431 authored by Liing Pang Ryan's avatar Liing Pang Ryan
Browse files

CSS edit/read column done

parent 9f0d2892
......@@ -180,7 +180,7 @@ function switchMode(stop){
for (const element of document.getElementsByClassName("edit")) {
element.style.display = "block";
}
document.getElementById("switch_mode").innerHTML = "<button>read_mode</button>";
document.getElementById("switch_mode").innerHTML = "<button>Read Mode</button>";
}else{
mod="read";
if(stop) {
......@@ -189,7 +189,7 @@ function switchMode(stop){
for (const element of document.getElementsByClassName("edit")) {
element.style.display = "None";
}
document.getElementById("switch_mode").innerHTML = "<button>edit_mode</button>";
document.getElementById("switch_mode").innerHTML = "<button>Edit Mode</button>";
}
}
......
......@@ -19,20 +19,22 @@
<div class="story_title">${empty story? "no title" :story.titre}</div>
<div class="column edit_sideBar">
<c:if test="${edit}" var="maVariable" scope="request">
<div id="switch_mode" class="${published?"edit_mode":"edit_mode_block"}" onclick="switchMode()"><button>edit_mode</button></div>
<div id="switch_mode" class="${published?"edit_mode":"edit_mode_block"}" onclick="switchMode()"><button>Edit Mode</button></div>
</c:if>
<c:if test="${owner}" var="maVariable" scope="request">
<div class="edit_mode" id="publish" onclick="publish(${story.id})"><button>publish</button></div>
<div class="edit_mode" id="publish" onclick="publish(${story.id})"><button>Publish Story</button></div>
<c:if test="${!publicStory}" var="maVariable" scope="request">
<div class="edit_mode edit_mode_authors">
<div>Invite An Author</div>
<input type="text" placeholder="Username of author" id="user_to_invite">
<div class="edit_mode_invite_author">
<div class="invite_an_author">Invite An Author</div>
<div>
<input type="text" placeholder="Username" id="user_to_invite" required>
</div>
<div id="invite" onclick="inviteAuthor(${story.id})">
<button type="button">Invite</button>
</div>
</div>
<div class="edit_mode_authors" id="invited">Invited Authors
<div class="edit_mode_authors" id="invited"><div class="invited_authors_title">Invited Authors</div>
<c:forEach items="${invitedList}" var="invited">
<div>${invited}</div>
</c:forEach>
......
......@@ -205,12 +205,6 @@
.connex_ins input:focus{
outline:none;
}
.story_title{
background-color: red;
text-align: center;
padding: 20px;
margin-top: 20px;
}
.paragraph_contents{
border: 2px solid #5267fa;
......@@ -288,6 +282,15 @@
/*for story.jsp
edit and read mode layout*/
.story_title{
text-align: center;
padding: 20px;
margin-top: 20px;
font-family: 'Roboto Slab', cursive;
font-size: xx-large;
font-weight: bold;
}
.column{
float:left;
padding: 15px;
......@@ -296,24 +299,120 @@
/*Edit/Read side bar*/
.column.edit_sideBar{
width:20%;
background-color: #5267fa;
background-color: #2a2a4c;
margin-top:10px;
height:600px;
display: flex;
flex-direction: column;
min-height:600px;
border-radius: 0 30px 30px 0;
}
.edit_mode{
background-color: red;
height:70px;
margin-top: 15px;
margin-bottom:auto;
margin-top: 5px;
margin-bottom:5px;
display:flex;
justify-content: center;
align-items: center;
}
.edit_mode button{
background-color: #323361;
border: none;
border-radius: 10px;
color: #76afea;
padding: 15px 32px;
font-size: 20px;
font-family: 'Roboto Slab', cursive;
cursor:pointer;
transition: 120ms;
}
.edit_mode button:hover{
filter: brightness(1.5);
}
.edit_mode button:focus{
outline:none;
}
/**For authors**/
/**Invite an author**/
.edit_mode_invite_author{
background-color: #6572df;
height:160px;
margin-top: 5px;
margin-bottom:5px;
border-radius: 10px;
color:white;
}
.edit_mode_invite_author *{
display: flex;
justify-content: center;
padding-top: 10px;
font-family: 'Roboto Slab', cursive;
}
.edit_mode_invite_author .invite_an_author{
font-size: x-large;
}
.edit_mode_invite_author input{
width: 80%;
padding: 12px 20px;
margin: 8px 0;
display: inline-block;
border: 0;
box-shadow:0 0 3px rgba(0,0,0,0.3);
border-radius: 4px;
box-sizing: border-box;
transition: .3s box-shadow;
}
.edit_mode_invite_author input:hover{
box-shadow:0 0 5px rgba(94, 199, 228, 1);
}
.edit_mode_invite_author input:focus{
outline:none;
}
.edit_mode_invite_author button{
background-color: #323361;
border: none;
border-radius: 10px;
color: #76afea;
padding: 5px 20px;
font-size: 17px;
cursor:pointer;
transition: 200ms;
}
.edit_mode_invite_author button:hover{
filter: brightness(1.5);
}
.edit_mode_invite_author button:focus{
outline:none;
}
/**Invited authors**/
.edit_mode_authors{
background-color: blue;
height: 100px;
background-color: #6572df;
border-radius: 10px;
margin-top: 5px;
margin-bottom:5px;
display:flex;
flex-direction: column;
min-height:240px;
text-align: center;
}
.edit_mode_authors *{
font-family: 'Roboto Slab', cursive;
font-size:large;
padding-top: 5px;
}
.edit_mode_authors .invited_authors_title{
font-size:x-large;
color: white;
}
/*To hide it*/
.edit_mode_block{
display:none;
}
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment