Skip to content

GitLab

Commit bb84c10a authored by Lasse Overgaard Møldrup's avatar Lasse Overgaard Møldrup
Browse files

Merge and cumulative updates

parents b7374b2f ff8d8fee
Pipeline #52388 passed with stages
in 2 minutes and 43 seconds
Hide whitespace changes
Inline Side-by-side
website/studerende-dk/src/assets/draw-cross.svg 0 → 100644
View file @ bb84c10a
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
"http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<svg xmlns="http://www.w3.org/2000/svg"
width="2.35556in" height="1.72222in"
viewBox="0 0 212 155">
<path id="Imported Path"
fill="currentColor" stroke="none" stroke-width="0"
d="M 43.49,132.51
C 44.58,131.09 45.59,129.60 46.76,128.24
51.75,122.43 57.04,116.90 62.21,111.24
66.13,106.96 69.86,102.47 74.04,98.43
84.34,88.46 97.45,78.30 108.53,69.35
125.47,56.59 142.97,44.60 161.03,33.48
165.70,30.60 179.97,22.38 175.17,25.04
168.64,28.65 149.41,40.09 155.86,36.34
169.65,28.32 183.43,20.26 197.21,12.23
199.79,10.51 202.36,8.80 204.93,7.08
204.93,7.08 169.66,20.89 169.66,20.89
169.66,20.89 169.66,20.89 169.66,20.89
167.25,22.48 164.83,24.08 162.42,25.67
169.75,21.51 191.65,8.91 184.40,13.20
170.18,21.63 155.75,29.68 141.50,38.06
118.99,51.29 97.60,66.38 76.78,82.13
64.29,92.24 52.81,101.13 41.13,112.18
29.21,123.48 18.52,136.14 7.07,147.92
7.07,147.92 43.49,132.51 43.49,132.51
43.49,132.51 43.49,132.51 43.49,132.51 Z
M 54.11,17.91
C 76.39,46.94 97.28,77.00 116.78,107.97
125.20,121.83 133.24,135.91 141.37,149.93
141.37,149.93 173.22,131.38 173.22,131.38
173.22,131.38 173.22,131.38 173.22,131.38
164.26,117.83 155.42,104.20 146.72,90.48
126.69,59.66 105.30,29.60 87.69,-2.70
87.69,-2.70 54.11,17.91 54.11,17.91
54.11,17.91 54.11,17.91 54.11,17.91 Z" />
</svg>
website/studerende-dk/src/assets/draw-tick.svg 0 → 100644
View file @ bb84c10a
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
"http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<svg xmlns="http://www.w3.org/2000/svg"
width="2.51111in" height="1.75556in"
viewBox="0 0 226 158">
<path id="path867"
fill="currentColor" stroke="none" stroke-width="0"
d="M 7.09,103.51
C 20.55,116.87 34.35,129.87 48.16,142.87
50.02,144.54 55.31,149.90 58.40,150.57
60.39,151.00 62.68,151.01 64.50,150.08
74.83,144.77 84.97,138.95 94.35,132.09
97.80,129.57 99.88,125.56 102.57,122.22
106.50,117.35 110.32,112.39 114.20,107.47
142.71,74.31 175.09,44.71 208.20,16.26
211.77,13.21 215.34,10.16 218.91,7.10
218.91,7.10 195.73,16.54 195.73,16.54
195.73,16.54 195.73,16.54 195.73,16.54
192.43,19.48 189.12,22.43 185.82,25.37
153.30,54.31 121.31,84.04 92.49,116.73
88.13,121.81 83.89,127.01 79.40,131.98
76.35,135.36 65.47,140.65 69.87,141.79
75.69,143.30 80.73,136.59 86.00,133.69
87.56,132.83 82.81,135.68 81.02,135.67
77.70,135.63 72.31,130.55 70.41,129.05
56.34,116.72 42.38,104.08 30.74,89.34
30.74,89.34 7.09,103.51 7.09,103.51
7.09,103.51 7.09,103.51 7.09,103.51 Z" />
</svg>
website/studerende-dk/src/assets/pencil.svg 0 → 100644
View file @ bb84c10a
<?xml version="1.0" encoding="utf-8"?><svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 122.88 122.88" style="enable-background:new 0 0 122.88 122.88" xml:space="preserve"><style type="text/css">.st0{fill-rule:evenodd;clip-rule:evenodd;}</style><g><path class="st0" d="M14.1,0h94.67c7.76,0,14.1,6.35,14.1,14.1v94.67c0,7.75-6.35,14.1-14.1,14.1H14.1c-7.75,0-14.1-6.34-14.1-14.1 V14.1C0,6.34,6.34,0,14.1,0L14.1,0z M81.35,28.38L94.1,41.14c1.68,1.68,1.68,4.44,0,6.11l-7.06,7.06L68.17,35.44l7.06-7.06 C76.91,26.7,79.66,26.7,81.35,28.38L81.35,28.38z M52.34,88.98c-5.1,1.58-10.21,3.15-15.32,4.74c-12.01,3.71-11.95,6.18-8.68-5.37 l5.16-18.2l0,0l-0.02-0.02L64.6,39.01l18.87,18.87l-31.1,31.11L52.34,88.98L52.34,88.98z M36.73,73.36l12.39,12.39 c-3.35,1.03-6.71,2.06-10.07,3.11c-7.88,2.42-7.84,4.05-5.7-3.54L36.73,73.36L36.73,73.36z"/></g></svg>
\ No newline at end of file
website/studerende-dk/src/assets/trashcan.svg 0 → 100644
View file @ bb84c10a
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
"http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<svg xmlns="http://www.w3.org/2000/svg"
width="3.93333in" height="3.93333in"
viewBox="0 0 354 354">
<path id="Imported Path"
fill="none" stroke="currentColor" stroke-width="10"
d="M 177.00,125.25
C 177.00,321.69 177.00,321.69 177.00,321.69M 231.46,125.25
C 231.46,321.69 231.46,321.69 231.46,321.69M 122.54,125.25
C 122.54,321.69 122.54,321.69 122.54,321.69M 177.00,125.25
C 177.00,321.69 177.00,321.69 177.00,321.69M 296.23,341.69 296.23,341.69 296.23,341.69 296.23,341.69
M 177.00,12.31
C 156.43,12.31 139.31,27.06 135.64,46.56
135.64,46.56 218.36,46.60 218.36,46.60
214.71,27.08 197.58,12.31 177.00,12.31
177.00,12.31 177.00,12.31 177.00,12.31 Z
M 313.37,48.73
C 313.37,48.73 313.37,91.83 313.37,91.83
313.37,91.83 40.63,91.83 40.63,91.83
40.63,91.83 40.63,48.73 40.63,48.73
40.63,48.73 313.37,48.73 313.37,48.73 Z
M 57.77,92.85
C 57.77,92.85 296.23,92.85 296.23,92.85
296.23,92.85 296.23,341.69 296.23,341.69
296.23,341.69 57.77,341.69 57.77,341.69
57.77,341.69 57.77,92.85 57.77,92.85 Z" />
</svg>
website/studerende-dk/src/components/blocks/Calendar.vue
View file @ bb84c10a
......@@ -9,7 +9,7 @@
<div>
<button id="leftButton" @click="prevWeek()"> &larr; </button>
</div>
<div>
<div v-if="schedule.length == 5">
Uge: {{getWeek(today)}} - {{getMonthName(today.getMonth())}}
</div>
<div>
......@@ -23,14 +23,14 @@
<th></th>
<!-- Generating weekday names and month number-->
<template v-if="schedule.length == 1">
<th v-bind:colspan="colSpanValue" v-for="(n,i) in schedule" :key="i">
{{weekDays[today.getDay()-1]}} - {{today.getDate()}}
<th :colspan="colSpanValue" v-for="(n,i) in schedule" :key="i">
{{getMonthName(today.getMonth())}} uge {{getWeek(today)}} - {{weekDays[today.getDay()-1]}} {{today.getDate()}}.
</th>
</template>
<!-- Generate a single day, if size is too small -->
<template v-else>
<th v-bind:colspan="colSpanValue" v-for="(n,i) in schedule" :key="i">
{{weekDays[i]}} - {{getDateOfISOWeek(getWeek(today), today.getFullYear(), i).getDate()}}
<th :colspan="colSpanValue" v-for="(n,i) in schedule" :key="i">
{{weekDays[i]}} - {{getDateOfISOWeek(getWeek(today), today.getFullYear(), i).getDate()}}
</th>
</template>
</tr>
......@@ -229,13 +229,14 @@ export default {
// Update the amount of days in the display
// Therefor changes form week to day view
updateDaysInDisplay(){
if(parseInt(document.getElementById("calendar").clientWidth) < this.calendarDayWidth){
const calendar = document.getElementById("calendar");
if(parseInt(calendar.clientWidth) < this.calendarDayWidth){
if(this.schedule.length == 5){
this.colSpanValue = 5;
const day = this.schedule[this.today.getDay() - 1];
this.scheduleDay[0] = day;
this.schedule = this.scheduleDay;
const buttons = document.getElementsByTagName("button");
const buttons = calendar.getElementsByTagName("button");
for (let i = 0; i < buttons.length; i++) {
const element = buttons[i];
element.style.width = 40 + "px";
......@@ -245,7 +246,7 @@ export default {
this.colSpanValue = 1;
this.schedule = this.scheduleWeek12;
this.changeSchedule();
const buttons = document.getElementsByTagName("button");
const buttons = calendar.getElementsByTagName("button");
for (let i = 0; i < buttons.length; i++) {
const element = buttons[i];
element.style.width = 60 + "px";
......@@ -405,12 +406,12 @@ export default {
#rightButton{
float: right;
margin-right: $default-margin;
margin-right: 55px;
}
#leftButton{
float: left;
margin-left: $default-margin;
margin-left: 55px;
}
#headerDiv{
......
website/studerende-dk/src/scss/_variables.scss
View file @ bb84c10a
......@@ -9,6 +9,9 @@ $light-green-theme-color: #cbdccf;
$lighter-green-theme-color: #dde8e1;
$lightest-green-theme-color: #e7ede8;
$red-theme-color: #A82D1E;
$green-theme-color: #035C2E;
$text-color: #272b30;
$bg-color: #e7ede8;
$white-bg-color: #fbfbfb;
......
website/studerende-dk/src/views/Home.vue
View file @ bb84c10a
......@@ -2,7 +2,7 @@
<div class="home">
<div id="grid">
<div @mousedown="resizeVertical($event, rowIndex)" :id="rowIndex" class="row" :class="{ drag: draggedBlock !== null }"
v-for="(rowBlock, rowIndex) in layout" :key="rowIndex" :style="{ height: rowBlock.height + 'px' }"
v-for="(rowBlock, rowIndex) in layout" :key="rowIndex" :style="{ height: rowBlock.height + 'px' }" @mouseleave="cancelRemoveRow(rowIndex)"
@dragover="dragHover($event, rowIndex)" @dragleave="hidePreview()" @drop="drop($event, rowIndex)">
<span class="col-preview">
<component :is="previewType"></component>
......@@ -10,7 +10,19 @@
<div @mousedown="resizeHorizontal($event, rowIndex, colIndex)" :id="rowIndex+','+colIndex" class="col" v-show="!isDragged(rowIndex, colIndex)"
v-for="(colBlock, colIndex) in rowBlock.blocks" :key="colIndex" :style="{ 'flex-grow': colBlock.width, 'order': colIndex }">
<component :is="colBlock.type" :row="rowIndex" :col="colIndex"></component>
<button class="hidden-row-item pencil">
<img v-svg-inline class="icon" src="@/assets/pencil.svg"/>
</button>
</div>
<button class="hidden-row-item remove-block" @mouseover="slightlyBlurRow(rowIndex)" @mouseleave="unblurRow(rowIndex)" @click="mightRemoveRow(rowIndex)">
<img v-svg-inline class="icon" src="@/assets/trashcan.svg"/>
</button>
<button class="hidden-row-item cancel-remove" @click="cancelRemoveRow(rowIndex)">
<img v-svg-inline class="icon" src="@/assets/draw-cross.svg"/>
</button>
<button class="hidden-row-item confirm-remove" @click="removeRow(rowIndex)">
<img v-svg-inline class="icon" src="@/assets/draw-tick.svg"/>
</button>
</div>
<button class="add-block" @click="addBlock()">
<img v-svg-inline class="icon" src="@/assets/collapse-plus.svg"/>
......@@ -42,6 +54,7 @@ const maxBlocks = 3;
export default {
name: 'Home',
deleting: false,
data() {
return {
......@@ -77,6 +90,77 @@ export default {
});
},
blurRow(rowIndex) {
const cols = document.getElementById(rowIndex).getElementsByClassName("col");
for (const col of cols) {
col.className = "col animate-blur-grey-out-zoom";
}
},
slightlyBlurRow(rowIndex) {
if(!this.deleting) {
const cols = document.getElementById(rowIndex).getElementsByClassName("col");
for (const col of cols) {
col.className = "col animate-slight-blur-grey-out";
}
}
},
unblurRow(rowIndex) {
if(!this.deleting) {
const cols = document.getElementById(rowIndex).getElementsByClassName("col");
for (const col of cols) {
col.className = "col";
}
}
},
mightRemoveRow(rowIndex) {
if(this.deleting) {
this.cancelRemoveRow(rowIndex);
return;
}
this.deleting = true;
this.blurRow(rowIndex);
const row = document.getElementById(rowIndex);
const cross = row.getElementsByClassName("cancel-remove")[0];
const tick = row.getElementsByClassName("confirm-remove")[0];
cross.className = "visible-row-item cancel-remove";
tick.className = "visible-row-item confirm-remove";
// toggle off pencil on hover for cols
const pens = row.getElementsByClassName("pencil")
for (const pen of pens) {
pen.style.display = "none";
}
},
removeRow(rowIndex) {
this.cancelRemoveRow(rowIndex);
this.layout.splice(rowIndex, 1);
},
cancelRemoveRow(rowIndex) {
this.deleting = false;
this.unblurRow(rowIndex);
const row = document.getElementById(rowIndex);
const cross = row.getElementsByClassName("cancel-remove")[0];
const tick = row.getElementsByClassName("confirm-remove")[0];
cross.className = "hidden-row-item cancel-remove";
tick.className = "hidden-row-item confirm-remove";
// toggle on pencil on hover for cols
const pens = row.getElementsByClassName("pencil")
for (const pen of pens) {
pen.style.display = "block";
}
},
resizeHorizontalMouseMove(event) {
const deltaX = this.mouseDragPos.x - event.x;
this.mouseDragPos.x = event.x;
......@@ -133,15 +217,26 @@ export default {
}
},
resizeVertical(event, index) {
if(event.offsetY > this.layout[index].height) {
this.mouseDragPos.y = event.y;
this.verticalResizeObject.index = index;
document.addEventListener("mousemove", this.resizeVerticalMouseMove, false);
document.addEventListener("mouseup", this.eventRemover, false);
document.getElementsByTagName("html")[0].classList.add("no-select");
this.dragEnabled = false;
resizeVertical(event, index){
if(index == 0 || this.deleting){
return;
}
const clickTarget = event.target;
if(clickTarget.className != "row"){
return;
}
if(event.offsetY > this.layout[index].height){
console.log(":After event")
} else {
index--;
}
this.mouseDragPos.y = event.y;
this.verticalResizeObject.index = index;
document.addEventListener("mousemove", this.resizeVerticalMouseMove, false);
document.addEventListener("mouseup", this.eventRemover, false);
document.getElementsByTagName("html")[0].classList.add("no-select");
this.dragEnabled = false;
},
eventRemover() {
......@@ -182,12 +277,6 @@ export default {
this.prevWinWidth = winWidth;
},
removeBlock(side, row, col) {
this[side][row].blocks.splice(col, 1);
if (this[side][row].blocks.length === 0)
this[side].splice(row, 1);
},
startDrag(event, row, col) {
event.dataTransfer.effectAllowed = 'move';
......@@ -408,37 +497,51 @@ export default {
}
</script>
<style scoped lang="scss">
<style lang="scss">
$gap: $default-margin;
#grid {
width: 100%;
padding: $gap $gap / 2;
padding: 0 $gap / 2 $gap;
}
.row {
display: flex;
margin-bottom: $gap / 2;
padding-top: $gap / 2;
flex-direction: column;
position: relative;
min-height: 150px;
&.drag * {
pointer-events: none;
}
}
// Must be outside ".row" or else after affect children
.row::after{
content: " ";
background-color: rgba(0, 0, 0, 0);
position: absolute;
bottom: - $gap;
width: 100%;
height: $gap;
cursor: n-resize;
.row:not(:first-of-type){
&::before{
content: " ";
background-color: rgba(0, 0, 0, 0);
position: absolute;
top: 0;
width: 100%;
height: $gap;
cursor: n-resize;
}
}
.row:last-of-type{
&::after{
content: " ";
background-color: rgba(0, 0, 0, 0);
position: absolute;
bottom: -$gap;
width: 100%;
height: $gap;
cursor: n-resize;
}
}
.col, .col-preview {
flex-basis: 0; // a basis of 0px. very important!
background-color: $light-green-theme-color;
......@@ -450,7 +553,7 @@ export default {
.col {
position: relative;
&:not(:last-child) {
&:not(:last-of-type) {
margin-bottom: $gap / 2;
}
......@@ -477,6 +580,7 @@ export default {
background: none;
padding: 0;
display: none;
margin-top: $gap;
svg {
fill: #777f80;
......@@ -491,20 +595,171 @@ export default {
}
}
@media only screen and (min-width: $mobile-width-cutoff) {
#grid{
padding: $gap $gap / 2;
.remove-block {
right: $gap - 5px + $gap / 2;
order: 1000;
}
.cancel-remove {
right: 2 * $gap - 5px + $gap / 2;
order: 1000;
svg {
color: $red-theme-color;
}
}
.confirm-remove {
right: 3 * $gap - 10px + $gap / 2;
order: 1000;
svg {
color: $green-theme-color;
}
}
.hidden-row-item {
display: none;
height: 30px;
top: -$gap + 5px;
border: none;
background: none;
padding: 0;
svg {
width: 0px;
height: 0px;
}
}
.visible-row-item {
display: flex;
position: relative;
flex-direction: column;
width: 0px;
height: 30px;
top: -$gap + 5px;
border: none;
background: none;
padding: 0;
animation: slide-from-bot 0.4s;
svg {
width: 28px;
height: 28px;
}
&:hover, &:focus {
cursor: pointer;
svg {
color: $darker-theme-color;
}
}
}
.animate-blur-grey-out-zoom {
animation: blur-grey-out-zoom 0.6s;
filter: blur(2px) grayscale(0.5);
transform: scale(0.97);
opacity: 0.3;
pointer-events: none !important;
@include no-select;
* {
pointer-events: none !important;
}
}
.animate-slight-blur-grey-out {
animation: slight-blur-grey-out 0.6s;
filter: blur(1px) grayscale(0.5);
opacity: 0.7;
}
@keyframes slide-from-bot {
0% {
top: 10.5px;
z-index: -1;
}
99% {
top: -$gap + 5px;
z-index: -1;
}
100% { z-index: inherit; }
}
@keyframes blur-grey-out-zoom {
from {
filter: blur(1px) grayscale(0.5);
transform: scale(1.0);
opacity: 0.7;
}
to {
filter: blur(2px) grayscale(0.5);
transform: scale(0.97);
opacity: 0.3;
}
}
@keyframes slight-blur-grey-out {
from {
filter: blur(0px) grayscale(0);
transform: scale(1.0);
opacity: 1;
}
to {
filter: blur(1px) grayscale(0.5);
opacity: 0.7;
}
}
@media only screen and (min-width: $mobile-width-cutoff) {
.row{
flex-direction: row;
margin-bottom: $gap;
padding-top: $gap;
&:hover {
.remove-block {
width: 0;
display: block;
position: relative;
animation: slide-from-bot 0.4s;
svg {
color: $theme-color;
width: 28px;
height: 28px;
}
&:hover, &:focus {
cursor: pointer;
svg {
color: $darker-theme-color;
}
}
}
}
}
.col{
flex-grow: 0;
&:not(:first-child) {
&:not(:first-of-type) {
margin-left: $gap / 2;