glax/Tranga-Website
1
0
Fork 0
Code Issues Pull Requests Releases Activity

Add Task Window styling

Browse Source
This commit is contained in:
glax 2023-05-23 16:54:39 +02:00
parent b0ee888c82
commit 73d98b9c0f
2 changed files with 47 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
Website/index.html
View File

@ -45,13 +45,16 @@
<img id="closePopupImg" src="media/close-x.svg" alt="Close"> <img id="closePopupImg" src="media/close-x.svg" alt="Close">
</window-titlebar> </window-titlebar>
<window-content> <window-content>
<label for="taskTypes">TaskType</label><select id="taskTypes"></select> <addtask-settings>
<label for="selectReccurrence">Recurrence</label><input id="selectReccurrence" type="time" value="01:00" step="3600"> <addtask-setting><label for="taskTypes">TaskType</label><select id="taskTypes"></select></addtask-setting>
<label for="connectors">Connector</label> <addtask-setting><label for="selectReccurrence">Recurrence</label><input id="selectReccurrence" type="time" value="01:00" step="3600"></addtask-setting>
<select id="connectors"> <addtask-setting><label for="connectors">Connector</label>
<option value=""></option> <select id="connectors">
</select> <option value=""></option>
<label for="searchPublicationQuery">Search:</label><input id="searchPublicationQuery" type="text"> </select>
</addtask-setting>
<addtask-setting><label for="searchPublicationQuery">Search Title</label><input id="searchPublicationQuery" type="text"></addtask-setting>
</addtask-settings>
<div id="taskSelectOutput"></div> <div id="taskSelectOutput"></div>
</window-content> </window-content>
</addtask-window> </addtask-window>

50
Website/style.css
View File

@ -5,7 +5,7 @@
--secondary-color: #5bcefa; --secondary-color: #5bcefa;
--accent-color: #fff; --accent-color: #fff;
--topbar-height: 60px; --topbar-height: 60px;
box-sizing: content-box; box-sizing: border-box;
} }
body{ body{
@ -207,7 +207,7 @@ publication img {
addtask-popup{ addtask-popup{
display: none; display: none;
width: 100%; width: 100%;
height: 100%; min-height: 100%;
top: 0; top: 0;
left: 0; left: 0;
position: absolute; position: absolute;
@ -224,12 +224,15 @@ addtask-background {
} }
addtask-window { addtask-window {
display: block; display: flex;
flex-direction: column;
flex-wrap: nowrap;
position: absolute; position: absolute;
left: 25%; left: 12.5%;
top: 15%; top: 15%;
width: 50%; width: 75%;
height: 70%; min-height: 70%;
max-height: 80%;
padding: 0; padding: 0;
background-color: var(--accent-color); background-color: var(--accent-color);
z-index: 5; z-index: 5;
@ -240,9 +243,6 @@ window-titlebar {
width: 100%; width: 100%;
height: 60px; height: 60px;
background-color: var(--primary-color); background-color: var(--primary-color);
position: absolute;
left: 0;
top: 0;
border-radius: 5px 5px 0 0; border-radius: 5px 5px 0 0;
color: var(--accent-color); color: var(--accent-color);
display: flex block; display: flex block;
@ -261,16 +261,40 @@ window-titlebar p {
window-titlebar #closePopupImg { window-titlebar #closePopupImg {
height: 70%; height: 70%;
cursor: pointer; cursor: pointer;
margin-right: 20px;
filter: invert(100%) sepia(0%) saturate(100%) hue-rotate(115deg) brightness(116%) contrast(101%); filter: invert(100%) sepia(0%) saturate(100%) hue-rotate(115deg) brightness(116%) contrast(101%);
} }
window-content { window-content {
position: absolute;
width: 100%;
top: 60px;
left: 0;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
padding: 20px 5%;
overflow-x: scroll;
}
addtask-settings{
display: flex;
justify-content: center;
align-items: center;
}
addtask-settings select, addtask-settings input{
padding: 5px;
font-size: 10pt;
border: 1px solid rgba(0,0,0,0.2);
border-radius: 3px;
background-color: transparent;
margin: 10px 0;
width: 150px;
}
addtask-settings label {
font-weight: bolder;
margin: 0 5px;
}
addtask-settings addtask-setting{
margin: 0 15px;
} }
#taskSelectOutput{ #taskSelectOutput{