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

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

Feature/mobile layout

See merge request !21
parents 911662d5 f39069af
Pipeline #52376 passed with stages
in 2 minutes and 43 seconds
......@@ -32,6 +32,7 @@
text-align: center;
color: $darker-theme-color;
background-color: $lightest-green-theme-color;
min-width: 320px;
}
* {
......@@ -61,7 +62,6 @@
#site {
display: flex;
flex-direction: column;
height: 100%;
}
......
......@@ -57,14 +57,14 @@
#version-tag {
color: $light-theme-color;
font-weight: bold;
font-size: 0.8em;
float: right;
margin-top: -5px;
}
header {
width: 100%;
padding: 15px $default-margin;
padding: 15px 15px;
z-index: 1;
background-color: $theme-color;
......@@ -83,7 +83,7 @@
label {
cursor: pointer;
font-size: 50px;
font-size: 2em;
}
@include no-select;
......@@ -110,6 +110,7 @@
margin: 0;
line-height: 1em;
margin-bottom: 2px;
font-size: 1.3em;
}
}
......@@ -127,6 +128,28 @@
cursor: pointer;
}
@media only screen and (min-width: $small-mobile-width-cutoff) {
#logo{
h1{
font-size: 2em;
}
}
#version-tag {
font-size: 1em;
}
header{
padding: 15px $default-margin/2;
}
#hamburger-menu{
label{
font-size: 50px;
}
}
}
@media only screen and (min-width: $mobile-width-cutoff) {
#hamburger-menu {
display: none;
......@@ -139,5 +162,9 @@
#hamburger-content {
display: none;
}
header{
padding: 15px $default-margin;
}
}
</style>
\ No newline at end of file
......@@ -16,3 +16,4 @@ $white-bg-color: #fbfbfb;
$default-margin: 40px;
$mobile-width-cutoff: 992px;
$small-mobile-width-cutoff: 460px;
\ No newline at end of file
......@@ -62,6 +62,7 @@ export default {
mouseDragPos: {x: 0, y: 0},
verticalResizeObject: {index: 0},
horizontalResizeObject: {row: 0, col: 0},
prevWinWidth: 1000,
draggedBlock: null,
activePreview: null,
dragEnabled: true
......@@ -151,6 +152,36 @@ export default {
this.dragEnabled = true;
},
mobileLayoutResize(){
const winWidth = window.innerWidth;
if((this.prevWinWidth - 992) > 0 && (winWidth - 992) > 0){
return;
}
if((this.prevWinWidth - 992) < 0 && (winWidth - 992) < 0){
return;
}
const rows = document.getElementsByClassName("row");
for (let i = 0; i < rows.length; i++) {
const row = rows[i];
const cols = row.getElementsByClassName("col");
for (let j = 0; j < cols.length; j++) {
const col = cols[j];
if(winWidth < 992){
col.style.flexGrow = 0;
}else{
col.style.flexGrow = this.layout[i].blocks[j].width;
}
}
if(winWidth < 992){
row.style.height = 'auto';
}else{
row.style.height = this.layout[i].height + 'px';
}
}
this.prevWinWidth = winWidth;
},
removeBlock(side, row, col) {
this[side][row].blocks.splice(col, 1);
if (this[side][row].blocks.length === 0)
......@@ -336,6 +367,15 @@ export default {
}
},
},
mounted(){
this.mobileLayoutResize();
this.prevWinWidth = window.innerWidth;
window.addEventListener('resize', this.mobileLayoutResize);
},
updated(){
this.mobileLayoutResize();
},
computed: {
previewType() {
......@@ -377,7 +417,8 @@ export default {
.row {
display: flex;
margin-bottom: $gap;
margin-bottom: $gap/2;
flex-direction: column;
position: relative;
min-height: 150px;
......@@ -408,6 +449,10 @@ export default {
.col {
position: relative;
&:not(:last-child) {
margin-bottom: $gap / 2;
}
&:not(:first-of-type)::before{
content: " ";
background-color: rgba(0, 0, 0, 0);
......@@ -430,6 +475,7 @@ export default {
border: none;
background: none;
padding: 0;
display: none;
svg {
fill: #777f80;
......@@ -443,4 +489,52 @@ export default {
}
}
}
@media only screen and (min-width: $mobile-width-cutoff) {
#grid{
padding: $gap;
}
.row{
flex-direction: row;
margin-bottom: $gap;
}
.col{
flex-grow: 0;
&:not(:first-child) {
margin-left: $gap / 2;
&::before{
content: " ";
background-color: rgba(0, 0, 0, 0);
position: absolute;
left: - $gap - 2px;
width: $gap;
height: 100%;
cursor: w-resize;
}
}
&:not(:last-child) {
margin-right: $gap / 2;
margin-bottom: 0;
}
}
.add-block{
display: initial;
}
// 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;
}
}
</style>
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