Commit f8670ca5 authored by Johan Tanderup Degn's avatar Johan Tanderup Degn
Browse files

Merge branch 'feature/homepage-layout' into 'develop'

Feature/homepage layout

See merge request !13
parents 81a7d94b 3af53468
Pipeline #51287 passed with stages
in 1 minute and 57 seconds
This diff is collapsed.
<template>
<div class="home">
<div id="grid">
<div v-for="side in ['left', 'right']" :key="side" :id="side + '-col'">
<div class="row" v-for="(row, rowIndex) in $data[side]" :key="rowIndex" :style="{ height: row.height + 'px' }">
<div class="block-container" v-for="(block, colIndex) in row.blocks" :key="colIndex" :style="{ flexBasis: block.width + '%' }">
<component :is="block.type"></component>
<button class="remove-block" @click="removeBlock(side, rowIndex, colIndex)">
<img v-svg-inline class="icon" src="@/assets/cross.svg"/>
</button>
</div>
<div class="row" v-for="(rowBlock, rowIndex) in layout" :key="rowIndex" :style="{ height: rowBlock.height + 'px' }">
<div class="col" v-for="(colBlock, colIndex) in rowBlock.blocks" :key="colIndex" :style="{ 'flex-grow': colBlock.width }">
<component :is="colBlock.type"></component>
</div>
<button class="add-block" @click="addBlock(side)">
<img v-svg-inline class="icon" src="@/assets/collapse-plus.svg"/>
</button>
</div>
<button class="add-block" @click="addBlock()">
<img v-svg-inline class="icon" src="@/assets/collapse-plus.svg"/>
</button>
</div>
</div>
</template>
......@@ -30,41 +25,29 @@ export default {
data() {
return {
left: [
{
height: 200,
blocks: [{ type: "ActiveCourses", width: 100 }],
},
{
height: 300,
blocks: [{ type: "Deadlines", width: 100 }],
}
],
right: [
layout: [
{
height: 400,
blocks: [{ type: "Calendar", width: 100 }],
blocks: [{type: "Calendar", width: 75}, {type: "ActiveCourses", width: 25}]
},
{
height: 330,
blocks: [{ type: "Feed", width: 50 }, { type: "Mail", width: 50 }],
height: 250,
blocks: [{type: "Deadlines", width: 100}]
},
{
height: 300,
blocks: [{type: "Feed", width: 50}, {type: "Mail", width: 25}, {type: "Mail", width: 25}]
}
]
}
};
},
methods: {
addBlock(side) {
this[side].push({
height: 200,
blocks: [{ type: "Feed", width: 100 }]
addBlock() {
this.layout.push({
height: 300,
blocks: [{ type: "ActiveCourses", width: 30 },{ type: "Feed", width: 70 }]
});
},
removeBlock(side, row, col) {
this[side][row].blocks.splice(col, 1);
if (this[side][row].blocks.length === 0)
this[side].splice(row, 1);
}
},
......@@ -82,96 +65,36 @@ export default {
$gap: $default-margin;
#grid {
display: flex;
align-items: flex-start;
width: 100%;
padding: $gap;
}
#left-col, #right-col {
flex-basis: 0;
min-width: 300px;
> *:not(:last-of-type) {
margin-bottom: $gap;
}
}
#left-col {
margin-right: $gap / 2;
flex-grow: 1;
}
#right-col {
margin-left: $gap / 2;
flex-grow: 3;
}
.row {
display: flex;
> div {
min-width: 200px;
&:not(:last-child) {
margin-right: $gap / 2;
}
&:not(:first-child) {
margin-left: $gap / 2;
}
}
margin-bottom: $gap;
}
.block-container {
position: relative;
.col {
flex-basis: 0; // a basis of 0px. very important!
background-color: $light-green-theme-color;
border-radius: 5px;
border-radius: 4px;
overflow: hidden;
border: 2px solid $theme-color;
&:hover {
.remove-block {
display: block;
}
}
}
.remove-block {
display: none;
width: 30px;
height: 30px;
border: none;
background: none;
padding: 0;
position: absolute;
top: (47px - 30px) / 2;
right: (47px - 30px) / 2;
svg {
fill: $lighter-theme-color;
&:not(:first-child) {
margin-left: $gap / 2;
}
&:hover, &:focus {
cursor: pointer;
top: (47px - 35px) / 2;
right: (47px - 35px) / 2;
width: 35px;
height: 35px;
svg {
fill: $lightest-theme-color;
}
&:not(:last-child) {
margin-right: $gap / 2;
}
}
.add-block {
width: 50px;
height: 50px;
border: none;
background: none;
padding: 0;
margin-top: $gap / 2;
svg {
fill: #777f80;
......
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