cziermann
/
ziermach-blog
Watch 1
Star 0
Fork 0
Code Issues 0 Pull Requests 0 Releases 0 Wiki Activity
Browse Source

more mobile optimization

master
Christian Ziermann 4 years ago
parent
862258d4a8
commit
c7180f079f
3 changed files with 230 additions and 201 deletions
Unified View Show Diff Stats
  1. +1
    -2
      src/app/pages/resume/resume.component.html
  2. +3
    -0
      src/app/shared/navbar/navbar.component.scss
  3. +226
    -199
      src/assets/sass/paper-kit/_responsive.scss

+ 1
- 2
src/app/pages/resume/resume.component.html View File

<a href="https://www.plusserver.com/">PlusServer</a> <a href="https://www.plusserver.com/">PlusServer</a>
</td> </td>
<td class="job-postion description"> <td class="job-postion description">
Auszubildender Fachinformatiker Anwendungsentwicklung Trainee application development
(Trainee for application development)
</td> </td>
</tr> </tr>
</table> </table>

+ 3
- 0
src/app/shared/navbar/navbar.component.scss View File

svg {
padding-right: 1%;
}

+ 226
- 199
src/assets/sass/paper-kit/_responsive.scss View File

/* Changes for small display */ /* Changes for small display */


@media (max-width: 767px){ @media (max-width: 767px){
.navbar-toggler-bar {
display: none !important;
}
.navbar-transparent{ .navbar-transparent{
// padding-top: 15px; // padding-top: 15px;
background-color: rgba(0, 0, 0, 0.45); background-color: rgba(0, 0, 0, 0.45);
} }
body { body {
position: relative; position: relative;
font-size: $font-size-small; font-size: $font-size-small;
} }
h6{ h6 {
font-size: 1em; font-size: 1em;
} }
.navbar .container{ .navbar .container {
left: 0; left: 0;
width: 100%; width: 100%;
@include transition (0.33s, cubic-bezier(0.685, 0.0473, 0.346, 1)); @include transition(0.33s, cubic-bezier(0.685, 0.0473, 0.346, 1));
position: relative; position: relative;
} }
.navbar .navbar-nav .dropdown-menu{ .navbar .navbar-nav .dropdown-menu {
height: 400px; height: 400px;
overflow-y: scroll; overflow-y: scroll;
} }
.navbar .navbar-collapse.collapse, .navbar .navbar-collapse.collapse,
.navbar .navbar-collapse.collapse.in, .navbar .navbar-collapse.collapse.in,
.navbar .navbar-collapse.collapsing{ .navbar .navbar-collapse.collapsing {
// display: none !important; // display: none !important;
} }
.demo-header .motto{ .demo-header .motto {
padding-top: 30% !important; padding-top: 30% !important;
} }
.navbar-toggle .icon-bar { .navbar-toggle .icon-bar {
display: block; display: block;
position: relative; position: relative;
background: #fff; background: #fff;
width: 24px; width: 24px;
height: 2px; height: 2px;
border-radius: 1px; border-radius: 1px;
margin: 0 auto; margin: 0 auto;
} }


.fog-low{ .fog-low {
margin-bottom: -35px; margin-bottom: -35px;
} }
.presentation-title{ .presentation-title {
font-size: 5em; font-size: 5em;
} }
.presentation-subtitle{ .presentation-subtitle {
margin-top: 40px; margin-top: 40px;
} }
.title-brand{ .title-brand {
max-width: 450px; max-width: 450px;
.type{ .type {
font-size: 16px; font-size: 16px;
} }
} }
.bar1, .bar1,
.bar2, .bar2,
.bar3 { .bar3 {
outline: 1px solid transparent; outline: 1px solid transparent;
} }
.bar1 { .bar1 {
top: 0px; top: 0px;
@include bar-animation($topbar-back); @include bar-animation($topbar-back);
} }
.bar2 { .bar2 {
opacity: 1; opacity: 1;
} }
.bar3 { .bar3 {
bottom: 0px; bottom: 0px;
@include bar-animation($bottombar-back); @include bar-animation($bottombar-back);
} }
.toggled .bar1 { .toggled .bar1 {
top: 6px; top: 6px;
@include bar-animation($topbar-x); @include bar-animation($topbar-x);
} }
.toggled .bar2 { .toggled .bar2 {
opacity: 0; opacity: 0;
} }
.toggled .bar3 { .toggled .bar3 {
bottom: 6px; bottom: 6px;
@include bar-animation($bottombar-x); @include bar-animation($bottombar-x);
} }


@include topbar-x-rotation(); @include topbar-x-rotation();
@include bottombar-back-rotation(); @include bottombar-back-rotation();


@-webkit-keyframes fadeIn { @-webkit-keyframes fadeIn {
0% {opacity: 0;} 0% {
100% {opacity: 1;} opacity: 0;
}
100% {
opacity: 1;
}
} }
@-moz-keyframes fadeIn { @-moz-keyframes fadeIn {
0% {opacity: 0;} 0% {
100% {opacity: 1;} opacity: 0;
}
100% {
opacity: 1;
}
} }
@keyframes fadeIn { @keyframes fadeIn {
0% {opacity: 0;} 0% {
100% {opacity: 1;} opacity: 0;
}
100% {
opacity: 1;
}
} }


.navbar-nav { .navbar-nav {
margin: 1px -15px; margin: 1px -15px;


.open .dropdown-menu > li { .open .dropdown-menu > li {
& > a{ & > a {
padding: 15px 15px 5px 50px; padding: 15px 15px 5px 50px;
} }


&:first-child > a{ &:first-child > a {
padding: 5px 15px 5px 50px; padding: 5px 15px 5px 50px;
} }


} }


[class*="navbar-"] .navbar-nav { [class*="navbar-"] .navbar-nav {
& > li > a, > li > a:hover, > li > a:focus, .active > a, .active > a:hover, .active > a:focus, .open .dropdown-menu > li > a, .open .dropdown-menu > li > a:hover, .open .dropdown-menu > li > a:focus, .navbar-nav .open .dropdown-menu > li > a:active { & > li > a,
> li > a:hover,
> li > a:focus,
.active > a,
.active > a:hover,
.active > a:focus,
.open .dropdown-menu > li > a,
.open .dropdown-menu > li > a:hover,
.open .dropdown-menu > li > a:focus,
.navbar-nav .open .dropdown-menu > li > a:active {
color: white; color: white;

} }


& > li > a:not(.btn), & > li > a:not(.btn),
> li > a:focus, > li > a:focus,
.open .dropdown-menu > li > a:not(.btn), .open .dropdown-menu > li > a:not(.btn),
.open .dropdown-menu > li > a:hover, .open .dropdown-menu > li > a:hover,
.open .dropdown-menu > li > a:focus{ .open .dropdown-menu > li > a:focus {
opacity: .7; opacity: 0.7;
background: transparent; background: transparent;
} }


opacity: 1; opacity: 1;
} }


& .dropdown > a{ & .dropdown > a {
&:hover .caret { &:hover .caret {
border-bottom-color: #777; border-bottom-color: #777;
border-top-color: #777; border-top-color: #777;
border-top-color: white; border-top-color: white;
} }
} }

} }


.bootstrap-datetimepicker-widget{ .bootstrap-datetimepicker-widget {
visibility: visible; visibility: visible;
} }


-webkit-backface-visibility: hidden; -webkit-backface-visibility: hidden;
} }


.social-line .btn{ .social-line .btn {
margin: $margin-bottom; margin: $margin-bottom;
} }
.subscribe-line .form-control{ .subscribe-line .form-control {
margin: $margin-bottom; margin: $margin-bottom;
} }
.social-line.pull-right{ .social-line.pull-right {
float: none; float: none;
} }
.footer nav.pull-left{ .footer nav.pull-left {
float: none !important; float: none !important;
} }
.footer:not(.footer-big) nav > ul li{ .footer:not(.footer-big) nav > ul li {
float: none; float: none;
} }
.footer{ .footer {
.footer-nav, .footer-nav,
.credits{ .credits {
margin: 0 auto; margin: 0 auto;
} }
} }
.section-buttons{ .section-buttons {
.input-group{ .input-group {
margin-top: 15px; margin-top: 15px;
} }
.form-group.has-danger{ .form-group.has-danger {
.form-control-feedback{ .form-control-feedback {
margin-top: 5px; margin-top: 5px;
} }
} }
} }
.social-area.pull-right{ .social-area.pull-right {
float: none !important; float: none !important;
} }
.form-control + .form-control-feedback{ .form-control + .form-control-feedback {
margin-top: -8px; margin-top: -8px;
} }
.navbar-toggle:hover,.navbar-toggle:focus { .navbar-toggle:hover,
.navbar-toggle:focus {
background-color: transparent !important; background-color: transparent !important;
} }
.btn.dropdown-toggle{ .btn.dropdown-toggle {
margin-bottom: 0; margin-bottom: 0;
} }
.media-post .author{ .media-post .author {
width: 20%; width: 20%;
float: none !important; float: none !important;
display: block; display: block;
margin: 0 auto 10px; margin: 0 auto 10px;
} }
.media-post .media-body{ .media-post .media-body {
width: 100%; width: 100%;
} }
.modal-footer .btn-simple { .modal-footer .btn-simple {
-ms-overflow-style: -ms-autohiding-scrollbar; -ms-overflow-style: -ms-autohiding-scrollbar;
-webkit-overflow-scrolling: touch; -webkit-overflow-scrolling: touch;
} }
.typography-line{ .typography-line {
padding-left: 100px !important; padding-left: 100px !important;
} }


.projects-1{ .projects-1 {
& .project-pills{ & .project-pills {
& .nav.nav-pills{ & .nav.nav-pills {
display: block !important; display: block !important;
.nav-item{ .nav-item {
&:first-child .nav-link{ &:first-child .nav-link {
border-radius: 12px 12px 0 0 !important; border-radius: 12px 12px 0 0 !important;
margin-left: -1px; margin-left: -1px;
} }
&.active:first-child .nav-link{ &.active:first-child .nav-link {
border-radius: 12px 12px 0 0 !important; border-radius: 12px 12px 0 0 !important;
margin-left: -1px; margin-left: -1px;
} }


&:last-child .nav-link{ &:last-child .nav-link {
border-radius: 0 0 12px 12px !important; border-radius: 0 0 12px 12px !important;
margin-left: -1px; margin-left: -1px;
} }
} }
} }
.testimonials-2, .testimonials-2,
.section-testimonials{ .section-testimonials {
.testimonials-people{ .testimonials-people {
img{ img {
display: none !important; display: none !important;
} }
} }
} }
.presentation-page{ .presentation-page {
.section-cards, .section-cards,
.section-components{ .section-components {
overflow: hidden; overflow: hidden;
.first-card{ .first-card {
top: 750px !important; top: 750px !important;
.grid__link{ .grid__link {
width: 200px !important; width: 200px !important;
} }
} }
.fourth-card{ .fourth-card {
top: 940px !important; top: 940px !important;
.grid__link{ .grid__link {
width: 200px !important; width: 200px !important;
} }
} }
.fifth-card{ .fifth-card {
top: 950px !important; top: 950px !important;
left: 220px !important; left: 220px !important;
.grid__link{ .grid__link {
width: 200px !important; width: 200px !important;
} }
} }
.sixth-card{ .sixth-card {
top: 1335px !important; top: 1335px !important;
left: 220px !important; left: 220px !important;
.grid__link{ .grid__link {
width: 200px !important; width: 200px !important;
} }
} }
.seventh-card { .seventh-card {
top: 1155px !important; top: 1155px !important;
.grid__link{ .grid__link {
width: 200px !important; width: 200px !important;
} }
} }
} }
.section-content{ .section-content {
.image-container{ .image-container {
.add-animation{ .add-animation {
height: 250px !important; height: 250px !important;
width: 180px !important; width: 180px !important;
} }
} }
} }


.section-components{ .section-components {
.image-container{ .image-container {
.components-macbook{ .components-macbook {
width: 580px !important; width: 580px !important;
height: 400px !important; height: 400px !important;
} }
.social-img, .social-img,
.share-btn-img{ .share-btn-img {
display: none; display: none;
} }
} }
.title{ .title {
margin-top: -100px !important; margin-top: -100px !important;
} }
} }


.section-examples{ .section-examples {
padding-top: 0 !important; padding-top: 0 !important;
margin-top: 10px !important; margin-top: 10px !important;
} }


.section-icons{ .section-icons {
.icons-nucleo{ .icons-nucleo {
.nc-icon:not(.ninth-left-icon):not(.seventh-left-icon):not(.third-left-icon){ .nc-icon:not(.ninth-left-icon):not(.seventh-left-icon):not(.third-left-icon) {
display: none !important; display: none !important;
} }
} }
} }
} }
#typography{ #typography {
.typography-line{ .typography-line {
.note{ .note {
margin-left: 7px !important; margin-left: 7px !important;
} }
} }
} }
.section-nucleo-icons{ .section-nucleo-icons {
[class*='col-lg']{ [class*="col-lg"] {
text-align: center!important; text-align: center !important;
margin-bottom: 2em; margin-bottom: 2em;
} }
} }
} }
@media screen and (max-width: 991px){ @media screen and (max-width: 991px) {
.navbar-collapse { .navbar-collapse {
display: block; display: block;
position: fixed; position: fixed;
overflow-y: visible; overflow-y: visible;
border-top: none; border-top: none;
text-align: left; text-align: left;
border-left: 1px solid #CCC5B9; border-left: 1px solid #ccc5b9;
padding-right: 0px; padding-right: 0px;
padding-left: 40px; padding-left: 40px;
padding-top: 15px; padding-top: 15px;


@include transform-translate-x(230px); @include transform-translate-x(230px);
@include transition (0.33s, cubic-bezier(0.685, 0.0473, 0.346, 1)); @include transition(0.33s, cubic-bezier(0.685, 0.0473, 0.346, 1));
ul { ul {
position: relative; position: relative;
z-index: 3; z-index: 3;
// overflow-y:scroll; // overflow-y:scroll;
height: 95%; height: 95%;
} }
.navbar-nav > .nav-item{ .navbar-nav > .nav-item {
// border-bottom: 1px solid; // border-bottom: 1px solid;
&:last-child { &:last-child {
border-bottom: 0; border-bottom: 0;
} }
& > .nav-link{ & > .nav-link {
margin: 0px 0px; margin: 0px 0px;
color: $dark-gray !important; color: $dark-gray !important;
text-transform: uppercase; text-transform: uppercase;
line-height: $line-height-general; line-height: $line-height-general;
padding: 15px 0; padding: 15px 0;
&:hover, &:hover,
&:active{ &:active {
color: $default-states-color !important; color: $default-states-color !important;
} }
} }
} }
&::after{ &::after {
top: 0; top: 0;
left: 0; left: 0;
height: 100%; height: 100%;
width: 100%; width: 100%;
position: absolute; position: absolute;
background-color: $bg-nude; background-color: $bg-nude;
background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(112, 112, 112, 0) 60%, rgba(186, 186, 186, 0.15) 100%); background-image: linear-gradient(
to bottom,
rgba(0, 0, 0, 0) 0%,
rgba(112, 112, 112, 0) 60%,
rgba(186, 186, 186, 0.15) 100%
);
display: block; display: block;
content: ""; content: "";
z-index: 1; z-index: 1;
} }
&.has-image::after{ &.has-image::after {
@include black-filter(.8); @include black-filter(0.8);
} }
} }
.nav-open{ .nav-open {
& .navbar-collapse{ & .navbar-collapse {
@include transform-translate-x(0px); @include transform-translate-x(0px);
display: block; display: block;
} }
& .wrapper{ & .wrapper {
left: 0; left: 0;
@include transform-translate-x(-230px); @include transform-translate-x(-230px);
} }
& .navbar-translate{ & .navbar-translate {
@include transform-translate-x(-230px); @include transform-translate-x(-230px);
} }

} }
.wrapper .navbar-collapse{ .wrapper .navbar-collapse {
display: none; display: none;
} }


.fixed-top .navbar-collapse{ .fixed-top .navbar-collapse {
background-color: #FF8F5E; background-color: #ff8f5e;
// width: 100%; // width: 100%;
float: left; float: left;
} }


.dropdown.show .dropdown-menu, .dropdown.show .dropdown-menu,
.dropdown .dropdown-menu{ .dropdown .dropdown-menu {
background-color: transparent; background-color: transparent;
border: 0; border: 0;
transition: none; transition: none;
width: auto; width: auto;
border-radius: 0; border-radius: 0;



.dropdown-item:hover, .dropdown-item:hover,
.dropdown-item:focus{ .dropdown-item:focus {
background-color: transparent; background-color: transparent;
border-radius:0; border-radius: 0;
} }


.dropdown-item a{ .dropdown-item a {

&:hover, &:hover,
&:focus{ &:focus {
color: $default-states-color; color: $default-states-color;
} }
} }


&:before, &:before,
&:after{ &:after {
display: none; display: none;
} }
} }


.dropdown{ .dropdown {
.dropdown-menu{ .dropdown-menu {
display: none; display: none;
} }


&.show .dropdown-menu{ &.show .dropdown-menu {
display: block; display: block;
} }
} }


.navbar-translate{ .navbar-translate {
justify-content: space-between; justify-content: space-between;
display: flex; display: flex;
align-items: center; align-items: center;
width: 100%; width: 100%;
position: relative; position: relative;
@include transform-translate-x(0); @include transform-translate-x(0);
@include transition (0.33s, cubic-bezier(0.685, 0.0473, 0.346, 1)); @include transition(0.33s, cubic-bezier(0.685, 0.0473, 0.346, 1));
} }
.wrapper{ .wrapper {
// @include transform-translate-x(0px); // @include transform-translate-x(0px);
@include transition (0.33s, cubic-bezier(0.685, 0.0473, 0.346, 1)); @include transition(0.33s, cubic-bezier(0.685, 0.0473, 0.346, 1));
left: 0; left: 0;
background-color: white; background-color: white;
} }
} }


@media screen and (min-width:767px){ @media screen and (min-width: 767px) {
.section-sections{ .section-sections {
.section-cols{ .section-cols {
position: relative; position: relative;
z-index: 1; z-index: 1;
.row{ .row {
&:first-of-type{ &:first-of-type {
margin-top: 50px; margin-top: 50px;
margin-right: -120px; margin-right: -120px;
margin-left: -15px; margin-left: -15px;
@include transform-translate-x(-80px); @include transform-translate-x(-80px);
} }
&:nth-of-type(2){ &:nth-of-type(2) {
margin-left: -100px; margin-left: -100px;
margin-right: -15px; margin-right: -15px;
transform: translateX(80px); transform: translateX(80px);
} }
&:nth-of-type(3){ &:nth-of-type(3) {
margin-right: -120px; margin-right: -120px;
margin-left: 0px; margin-left: 0px;
transform: translateX(-120px); transform: translateX(-120px);
} }
&:nth-of-type(4){ &:nth-of-type(4) {
margin-right: -100px; margin-right: -100px;
margin-left: -15px; margin-left: -15px;
transform: translateX(-50px); transform: translateX(-50px);
} }
} }

} }
} }
} }


@media screen and (min-width:991px){ @media screen and (min-width: 991px) {
.burger-menu{ .burger-menu {
.navbar-collapse { .navbar-collapse {
position: fixed; position: fixed;
display: block; display: block;
overflow-y: visible; overflow-y: visible;
border-top: none; border-top: none;
text-align: left; text-align: left;
border-left: 1px solid #CCC5B9; border-left: 1px solid #ccc5b9;
padding-right: 0px; padding-right: 0px;
padding-left: 40px; padding-left: 40px;
padding-top: 15px; padding-top: 15px;
@include transform-translate-x(230px); @include transform-translate-x(230px);
@include transition (0.33s, cubic-bezier(0.685, 0.0473, 0.346, 1)); @include transition(0.33s, cubic-bezier(0.685, 0.0473, 0.346, 1));


.navbar-nav .nav-item{ .navbar-nav .nav-item {
&:last-child { &:last-child {
border-bottom: 0; border-bottom: 0;
} }
} }
.navbar-nav{ .navbar-nav {
height: 100%; height: 100%;
z-index: 2; z-index: 2;
position: relative; position: relative;
flex-direction: column; flex-direction: column;
} }


&::after{ &::after {
top: 0; top: 0;
left: 0; left: 0;
height: 100%; height: 100%;
width: 100%; width: 100%;
position: absolute; position: absolute;
background-color: $bg-nude; background-color: $bg-nude;
background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(112, 112, 112, 0) 60%, rgba(186, 186, 186, 0.15) 100%); background-image: linear-gradient(
to bottom,
rgba(0, 0, 0, 0) 0%,
rgba(112, 112, 112, 0) 60%,
rgba(186, 186, 186, 0.15) 100%
);
display: block; display: block;
content: ""; content: "";
z-index: 1; z-index: 1;
} }
&.has-image::after{ &.has-image::after {
@include black-filter(.8); @include black-filter(0.8);
} }
} }
.navbar{ .navbar {
.container{ .container {
.navbar-toggler{ .navbar-toggler {
display: block; display: block;
margin-top: 20px; margin-top: 20px;
} }
} }
} }


.navbar-translate{ .navbar-translate {
width: 100%; width: 100%;
position: relative; position: relative;
@include transform-translate-x(0); @include transform-translate-x(0);
@include transition (0.33s, cubic-bezier(0.685, 0.0473, 0.346, 1)); @include transition(0.33s, cubic-bezier(0.685, 0.0473, 0.346, 1));
} }


.wrapper{ .wrapper {
// @include transform-translate-x(0px); // @include transform-translate-x(0px);
@include transition (0.33s, cubic-bezier(0.685, 0.0473, 0.346, 1)); @include transition(0.33s, cubic-bezier(0.685, 0.0473, 0.346, 1));
left: 0; left: 0;
background-color: white; background-color: white;
} }


.body{ .body {
.navbar-collapse.collapse{ .navbar-collapse.collapse {
height: 100vh !important; height: 100vh !important;
} }
} }
.navbar-collapse, .navbar-collapse,
.navbar-nav{ .navbar-nav {
&:before, &:before,
&:after{ &:after {
display: table; display: table;
content: " "; content: " ";
} }
} }


.nav-open &{ .nav-open & {
.navbar-collapse.collapse{ .navbar-collapse.collapse {
@include transform-translate-x(0px); @include transform-translate-x(0px);
} }
.wrapper{ .wrapper {
left: 0; left: 0;
@include transform-translate-x(-230px); @include transform-translate-x(-230px);
} }
.navbar-translate{ .navbar-translate {
@include transform-translate-x(-230px); @include transform-translate-x(-230px);
} }
} }


.dropdown.show .dropdown-menu, .dropdown.show .dropdown-menu,
.dropdown .dropdown-menu{ .dropdown .dropdown-menu {
background-color: transparent; background-color: transparent;
border: 0; border: 0;
transition: none; transition: none;
width: auto; width: auto;
border-radius: 0; border-radius: 0;



.dropdown-item:hover, .dropdown-item:hover,
.dropdown-item:focus{ .dropdown-item:focus {
background-color: transparent; background-color: transparent;
border-radius:0; border-radius: 0;
} }


.dropdown-item a{ .dropdown-item a {

&:hover, &:hover,
&:focus{ &:focus {
color: $default-states-color; color: $default-states-color;
} }
} }


&:before, &:before,
&:after{ &:after {
display: none; display: none;
} }
} }


.dropdown{ .dropdown {
.dropdown-menu{ .dropdown-menu {
display: none; display: none;
} }


&.show .dropdown-menu{ &.show .dropdown-menu {
display: block; display: block;
} }
} }
} }
} }
@media screen and (max-width: 1025px){ @media screen and (max-width: 1025px) {
.input-group{ .input-group {
.input-group-addon{ .input-group-addon {
padding-right: 10px; padding-right: 10px;
} }
} }

Write Preview
Loading…
Cancel
Save