IT4Change/gradido
3
0
Fork 0
mirror of https://github.com/IT4Change/gradido.git synced 2025-12-13 07:45:54 +00:00
Code Issues Packages Projects Releases Wiki Activity

right, left, carousell content box position

Browse Source
This commit is contained in:
ogerly 2022-05-06 08:37:07 +02:00
parent cfcbcc96a7
commit 640fc2858c
3 changed files with 40 additions and 31 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
frontend/src/components/Auth/Carousel.vue
View File

@ -39,24 +39,23 @@ export default {
<style> <style>
.carousel { .carousel {
position: relative; position: relative;
height: 100%; height: 120%;
top: -138px;
bottom: -369px;
} }
.carousel-inner { .carousel-inner {
background-color: brown;
height: 100%; height: 100%;
border-radius: 0 94% 63% 0/0 78% 54% 0; border-radius: 0 94% 63% 0/0 78% 54% 0;
} }
@media screen and (max-width: 1398px) { @media screen and (max-width: 1398px) {
.carousel-item { .carousel-item {
width: 116%;
top: 101px;
} }
} }
@media screen and (max-width: 1200px) { @media screen and (max-width: 1200px) {
.carousel-item { .carousel-item {
width: 129%;
top: 118px;
left: -75px;
} }
} }
</style> </style>

20
frontend/src/components/Auth/MobileStart.vue
View File

@ -55,26 +55,28 @@ export default {
bottom: 65px; bottom: 65px;
width: 100%; width: 100%;
} }
/* logo */
.mobil-start-box #img0 { .mobil-start-box #img0 {
/* position: absolute;*/ position: absolute;
z-index: 1000; z-index: 1000;
/* width: 33%; */ min-width: 200px;
max-width: 280px;
} }
.mobil-start-box #img1 { .mobil-start-box #img1 {
/* position: absolute;*/ position: absolute;
overflow: hidden; overflow: hidden;
height: 100%; height: 100%;
/* width: 100%;*/ width: 100%;
z-index: 10; z-index: 10;
} }
.mobil-start-box #img2 { .mobil-start-box #img2 {
/*position: absolute;*/ position: absolute;
/*width: 49%;*/ min-width: 220px;
height: 14%; max-width: 300px;
z-index: 1; height: auto;
z-index: 100;
} }
.mobil-start-box #img3 { .mobil-start-box #img3 {
width: 115%; width: 115%;

40
frontend/src/layouts/AuthLayout_gdd.vue
View File

@ -4,9 +4,9 @@
<div> <div>
<auth-header class="auth-header" /> <auth-header class="auth-header" />
<div class="left-content-box"> <div class="left-content-box d-none d-lg-block">
<div class="bg-img-box d-none d-lg-block"> <div class="bg-img-box">
<carousel class="d-block w-100 h-100" /> <carousel class="carousel" />
</div> </div>
<div class="w-100 bg-txt-box d-none d-lg-block text-center align-self-center"> <div class="w-100 bg-txt-box d-none d-lg-block text-center align-self-center">
<div class="h0">{{ $t('auth.left.gratitude') }}</div> <div class="h0">{{ $t('auth.left.gratitude') }}</div>
@ -112,13 +112,32 @@ export default {
} }
</script> </script>
<style lang="scss"> <style lang="scss">
/* left */
.left-content-box { .left-content-box {
position: fixed; position: fixed;
max-width: 484px; width: 40%;
background-color: aquamarine; /* background-color: aquamarine; */
top: 0px; top: 0px;
bottom: 0px; bottom: 0px;
} }
.bg-img-box {
/* background-color: red; */
position: absolute;
top: 0px;
bottom: 0px;
/* margin-top: -308px;
margin-left: -118px;
position: absolute;
top: 33px;
bottom: -228px;
min-width: 86%;
max-width: 800px;
/* background-color: bisque; */
/* border-radius: 0% 48% 74% 0%/59% 70% 73% 47%; */
}
/* right */
.right-content-box { .right-content-box {
max-width: 640px; max-width: 640px;
} }
@ -136,17 +155,6 @@ export default {
z-index: 999; z-index: 999;
} }
.bg-img-box {
margin-top: -308px;
margin-left: -118px;
position: absolute;
top: 33px;
bottom: -228px;
min-width: 86%;
max-width: 800px;
/* background-color: bisque; */
/* border-radius: 0% 48% 74% 0%/59% 70% 73% 47%; */
}
.bg-txt-box { .bg-txt-box {
position: relative; position: relative;
margin-top: 317px; margin-top: 317px;