Skip to content
GitLab
Menu
Projects
Groups
Snippets
Help
Help
Support
Community forum
Keyboard shortcuts
?
Submit feedback
Contribute to GitLab
Sign in
Toggle navigation
Menu
Open sidebar
EXSYS2021
da6
Hold Afstand
Commits
97ba83af
Commit
97ba83af
authored
May 06, 2021
by
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
Changes
4
Pipelines
1
Hide whitespace changes
Inline
Side-by-side
website/studerende-dk/src/App.vue
View file @
97ba83af
...
...
@@ -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%
;
}
...
...
website/studerende-dk/src/components/Header.vue
View file @
97ba83af
...
...
@@ -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
website/studerende-dk/src/scss/_variables.scss
View file @
97ba83af
...
...
@@ -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
website/studerende-dk/src/views/Home.vue
View file @
97ba83af
...
...
@@ -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
>
Write
Preview
Supports
Markdown
0%
Try again
or
attach a new file
.
Attach a file
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Cancel
Please
register
or
sign in
to comment