Commit c054769b authored by Luzian Bieri's avatar Luzian Bieri
Browse files

pictures are finally square

parent 0ada8f36
#event-list {
.list-item {
border-bottom: 1px solid #000;
cursor: pointer;
display: flex;
flex-direction: row;
align-items: center;
height: 10em;
.list-item {
border-bottom: 1px solid #000;
cursor: pointer;
display: flex;
flex-direction: row;
align-items: center;
.event-title {
width: 75%;
padding: 1em .4em;
display: grid;
grid-gap: 0px;
grid-template-columns: auto auto;
grid-template-rows: 50% 25% 25%;
.grid-container {
width: 100%;
padding: 1em .4em;
display: grid;
grid-gap: 0px;
grid-template-columns: auto auto;
grid-template-rows: 50% 25% 25%;
.title {
margin: 0 0 0 0;
display: flex;
font-weight: 100;
font-size: 1.5em;
color: #004398;
grid-column: 1 / span 2;
grid-row: 1;
}
.price {
margin: .5em 0 0 0;
font-size: .8em;
font-weight: 100;
color: rgb(107, 108, 119);
grid-column: 1;
grid-row: 2 / 3;
}
.date-container {
margin: 0 0 0 auto;
font-size: 1.2em;
font-weight: 100;
display: grid;
grid-template-rows: auto auto;
color: rgb(107, 108, 119);
grid-column: 2;
grid-row: 2 / 3;
}
.title {
margin: 0 0 0 0;
display: flex;
font-weight: 100;
font-size: 5vmin;
color: #004398;
grid-column: 1 / span 2;
grid-row: 1;
}
.price {
margin: .5em 0 0 0;
font-size: 2vmin;
font-weight: 100;
color: rgb(107, 108, 119);
grid-column: 1;
grid-row: 2;
}
.date-container {
margin: 0 0 0 auto;
font-weight: 100;
display: grid;
grid-template-rows: auto auto;
color: rgb(107, 108, 119);
grid-column: 2;
grid-row: 2;
}
.weekday {
margin: 0 0 0 0;
font-size: 3vmin;
font-weight: 100;
width: 6em;
grid-row: 1;
color: rgb(107, 108, 119);
}
.date {
margin: 0 0 0 0;
font-size: 2vmin;
font-weight: 100;
width: 6em;
grid-row: 2;
color: rgb(107, 108, 119);
}
}
.weekday {
margin: 0 0 0 0;
font-size: 1.2em;
font-weight: 100;
width: 6em;
grid-row: 1;
color: rgb(107, 108, 119);
}
.date {
margin: 0 0 0 0;
font-size: .8em;
font-weight: 100;
width: 6em;
grid-row: 2;
color: rgb(107, 108, 119);
}
img{
width: 20vmin;
height: 20vmin;
}
div {
display: flex;
justify-content: space-between;
}
}
.img-container{
width: 20vmin;
height: 20vmin;
position: relative;
}
}
img {
width: 25%;
height: 100%;
}
}
.registration {
background-color: #fff;
}
.registration {
background-color: #fff;
}
.upcoming {
background-color: #ddd;
}
.upcoming {
background-color: #ddd;
}
.past {
background-color: #bbb;
}
.past {
background-color: #bbb;
}
}
......@@ -200,8 +200,9 @@ export default class EventList extends FilteredListPage {
},
},
[
m('img', { src: imageurl }),
m('div',{class: 'event-title ',},
m('div', {class: 'img-container', }, m('img', {src: imageurl })),
//m('img', {src: imageurl }),
m('div',{class: 'grid-container',},
[
m('div', {class: 'title ',}, event.getTitle()),
m('div', {class: 'price ',}, price),
......
Supports Markdown
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