Commit c01f2cc6 authored by Kent Nielsen's avatar Kent Nielsen
Browse files

Fixing css on home page after rebase

parents b6238b63 6a98360b
Pipeline #51357 passed with stage
in 41 seconds
<template>
<div class="home">
<div class="home" >
<div id="grid">
<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 }">
......@@ -38,8 +38,10 @@ export default {
height: 300,
blocks: [{type: "Feed", width: 50}, {type: "Mail", width: 25}, {type: "Mail", width: 25}]
}
]
};
],
mouseDragPos: {x: 0, y: 0},
verticalResizeObject: {side: "", index: 0}
}
},
methods: {
......@@ -48,6 +50,72 @@ export default {
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);
},
resizeHorizontalMouseMove(event){
// Mouse movement
const deltaX = this.mouseDragPos.x - event.x;
this.mouseDragPos.x = event.x;
// Left and Right box to be resized
let leftCol = document.getElementById("left-col");
let rightCol = document.getElementById("right-col");
const contentWidth = leftCol.clientWidth + rightCol.clientWidth + 40;
var newRightWidth = rightCol.clientWidth + deltaX
var newLeftWidth = leftCol.clientWidth - deltaX
var flexright = contentWidth/newRightWidth;
var flexLeft = (newLeftWidth * parseFloat(flexright))/newRightWidth;
rightCol.style.flexGrow = parseFloat(flexright);
leftCol.style.flexGrow = parseFloat(flexLeft);
},
resizeVerticalMouseMove(event){
//console.log(event + " " + this.verticalResizeObject.side + " " + this.verticalResizeObject.index)
const deltaY = this.mouseDragPos.y - event.y;
this.mouseDragPos.y = event.y;
this[this.verticalResizeObject.side][this.verticalResizeObject.index].height -= deltaY
//console.log(this.mouseDragPos.y - event.y)
},
eventRemover(){
document.removeEventListener("mousemove", this.resizeHorizontalMouseMove, false);
document.removeEventListener("mousemove", this.resizeVerticalMouseMove, false)
document.removeEventListener("mouseup", this.eventRemover, false)
document.getElementsByTagName("html")[0].classList.remove("noselect");
},
resizeHorizontal(event, side){
if(event.offsetX < 0){
console.log(side)
this.mouseDragPos.x = event.x;
document.addEventListener("mousemove", this.resizeHorizontalMouseMove, false);
document.addEventListener("mouseup", this.eventRemover, false);
document.getElementsByTagName("html")[0].classList.add("noselect");
}
},
resizeRowHorizontal(event, side, rowIndex, colIndex){
console.log(event + " " + side + " " + rowIndex + " " + colIndex);
},
resizeVertical(event, side, index){
if(event.offsetY > this[side][index].height){
console.log("Resize now pls");
this.mouseDragPos.y = event.y
this.verticalResizeObject.side = side;
this.verticalResizeObject.index = index;
document.addEventListener("mousemove", this.resizeVerticalMouseMove, false)
document.addEventListener("mouseup", this.eventRemover, false)
document.getElementsByTagName("html")[0].classList.add("noselect");
}
}
},
......
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