refactor: planning
This commit is contained in:
mco-system
@@ -1,225 +0,0 @@
|
||||
@media screen and (min-width: 45em) {
|
||||
.slot {
|
||||
display: flex;
|
||||
flex: 1;
|
||||
justify-content: center;
|
||||
text-align: center;
|
||||
flex-direction: row;
|
||||
margin: 0.3em 0;
|
||||
width: 20em;
|
||||
}
|
||||
.slot_info .details {
|
||||
visibility: hidden;
|
||||
font-weight: bold;
|
||||
background-color: var(--main-color);
|
||||
color: var(--alt-main-color);
|
||||
text-align: left;
|
||||
padding: 1em;
|
||||
border-radius: 6px;
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
opacity: 0;
|
||||
transition: opacity 1s;
|
||||
transform: translateX(-2em) translateY(102%);
|
||||
width: 27.5em;
|
||||
overflow-y: auto;
|
||||
border-style: solid;
|
||||
border-color: var(--alt-main-color);
|
||||
border-width: 1px;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 44em) {
|
||||
.slot {
|
||||
display: flex;
|
||||
flex: 1;
|
||||
justify-content: center;
|
||||
text-align: center;
|
||||
flex-direction: row;
|
||||
margin: 0.3em 0;
|
||||
width: 21em;
|
||||
}
|
||||
.slot_info .details {
|
||||
visibility: hidden;
|
||||
font-weight: bold;
|
||||
background-color: var(--main-color);
|
||||
color: var(--alt-main-color);
|
||||
text-align: left;
|
||||
padding: 1em;
|
||||
border-radius: 6px;
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
opacity: 0;
|
||||
transition: opacity 1s;
|
||||
transform: translateX(-2em) translateY(102%);
|
||||
width: 28em;
|
||||
overflow-y: auto;
|
||||
border-style: solid;
|
||||
border-color: var(--alt-main-color);
|
||||
border-width: 1px;
|
||||
}
|
||||
}
|
||||
|
||||
.slot_info,
|
||||
.slot_info_buttons {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-content: flex-start;
|
||||
}
|
||||
|
||||
.metadata, .data {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: start;
|
||||
align-content: flex-start;
|
||||
padding: 0.5em;
|
||||
border-style: solid;
|
||||
}
|
||||
|
||||
.metadata {
|
||||
width: 7em;
|
||||
border-radius: 10px 0 0 10px;
|
||||
color: var(--main-color);
|
||||
font-family: pfdintextcompprothin;
|
||||
border-width: 1px 0 0px 1px;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.data {
|
||||
width: 14em;
|
||||
background-color: var(--main-color);
|
||||
color: var(--alt-main-color);
|
||||
border-color: var(--main-color);
|
||||
border-width: 1px 1px 1px 0;
|
||||
font-family: pfdintextcompprothin;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.metadata > .slot_info_buttons > .button,
|
||||
.metadata > .slot_info_buttons > .slot_info > .button {
|
||||
font-size: 1em;
|
||||
margin-right: 0.3em;
|
||||
}
|
||||
|
||||
.title {
|
||||
font-family: pfdintextcompprothin;
|
||||
font-weight: bold;
|
||||
margin-bottom: 0.5em;
|
||||
}
|
||||
|
||||
.speakers {
|
||||
font-family: pfdintextcompprothin;
|
||||
font-weight: bold;
|
||||
margin-bottom: 0.2em;
|
||||
}
|
||||
|
||||
.speaker {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.speaker_details:hover {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.speaker .details {
|
||||
visibility: hidden;
|
||||
background-color: var(--main-color);
|
||||
color: var(--alt-main-color);
|
||||
text-align: left;
|
||||
padding: 1em;
|
||||
border-radius: 6px;
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
opacity: 0;
|
||||
transition: opacity 1s;
|
||||
transform: translateY(102%);
|
||||
overflow-y: auto;
|
||||
border-style: solid;
|
||||
border-color: var(--alt-main-color);
|
||||
border-width: 1px;
|
||||
}
|
||||
|
||||
.speaker .details::after {
|
||||
content: "";
|
||||
position: relative;
|
||||
margin-left: -5px;
|
||||
border-width: 5px;
|
||||
}
|
||||
|
||||
.speaker:hover .details {
|
||||
visibility: visible;
|
||||
opacity: 1;
|
||||
font-size: 0.7em;
|
||||
padding: 0.2em;
|
||||
}
|
||||
|
||||
.speaker > .details > img,
|
||||
.abstract > img {
|
||||
max-width: 200px;
|
||||
max-height: 200px;
|
||||
float: left;
|
||||
margin: 0 0.5em 0.5em 0;
|
||||
}
|
||||
|
||||
.speaker > .details > p {
|
||||
text-align: justify;
|
||||
font-size: 0.5em;
|
||||
}
|
||||
|
||||
.slot_info {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.slot_info .details > .description {
|
||||
margin-top: 1em;
|
||||
}
|
||||
|
||||
.slot_info .details::after {
|
||||
content: "";
|
||||
position: relative;
|
||||
margin-left: -5px;
|
||||
border-width: 5px;
|
||||
}
|
||||
|
||||
.slot_info:hover .details {
|
||||
visibility: visible;
|
||||
opacity: 1;
|
||||
font-size: 0.7em;
|
||||
padding: 0.2em;
|
||||
}
|
||||
|
||||
.slot_info > .details > img,
|
||||
.abstract > img {
|
||||
max-width: 200px;
|
||||
max-height: 200px;
|
||||
float: left;
|
||||
margin: 0 0.5em 0.5em 0;
|
||||
}
|
||||
|
||||
.slot_info > .details > p {
|
||||
text-align: justify;
|
||||
font-size: 0.5em;
|
||||
}
|
||||
|
||||
.abstract > p {
|
||||
text-align: justify;
|
||||
font-size: 1em;
|
||||
}
|
||||
|
||||
.data > .details {
|
||||
font-family: pfdintextcompprothin;
|
||||
font-weight: bold;
|
||||
margin-bottom: 0.2em;
|
||||
font-size: 0.8em;
|
||||
}
|
||||
|
||||
.data > .resources > .resource > a {
|
||||
color: var(--main-bg-color);
|
||||
}
|
||||
66
src/thsf/static/css/slot.css
Normal file
66
src/thsf/static/css/slot.css
Normal file
@@ -0,0 +1,66 @@
|
||||
.slot {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
align-content: center;
|
||||
margin-bottom: 1em;
|
||||
width: 20em;
|
||||
}
|
||||
|
||||
.slot_header {
|
||||
margin: 0;
|
||||
width: 20em;
|
||||
font-family: pfdintextcompprothin;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.slot_title {
|
||||
border-radius: 1em 0 0 0;
|
||||
color: var(--main-color);
|
||||
padding: 0.5em;
|
||||
text-align: center;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: flex-start;
|
||||
align-content: flex-start;
|
||||
align-items: flex-start;
|
||||
width: 20em;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.slot_title .title{
|
||||
margin-left: 0.5em;
|
||||
}
|
||||
|
||||
.slot_info {
|
||||
background-color: var(--main-color);
|
||||
color: var(--alt-main-color);
|
||||
margin: 0;
|
||||
padding: 0.5em;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: flex-start;
|
||||
align-content: flex-start;
|
||||
align-items: flex-start;
|
||||
border-radius: 0 0 0 1em;
|
||||
}
|
||||
|
||||
.speaker {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.speakers > .speaker > .name > span {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.speaker_details,
|
||||
.slot_details {
|
||||
visibility: hidden;
|
||||
display: none;
|
||||
}
|
||||
|
||||
.speaker_img,
|
||||
.slot_img {
|
||||
width: 18em;
|
||||
}
|
||||
14
src/thsf/static/scripts/thsf23.js
Normal file
14
src/thsf/static/scripts/thsf23.js
Normal file
@@ -0,0 +1,14 @@
|
||||
function switch_visibility(item){
|
||||
console.log(item.style.visibility);
|
||||
console.log(item.style.display);
|
||||
if (item.style.visibility == "hidden" || item.style.display == "none") {
|
||||
item.style.visibility = "visible";
|
||||
item.style.display = "block";
|
||||
} else if (item.style.visibility == "" && item.style.display == "") {
|
||||
item.style.visibility = "visible";
|
||||
item.style.display = "block";
|
||||
} else {
|
||||
item.style.visibility = "hidden";
|
||||
item.style.display = "none";
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user