may/1KA_F2F
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

mobile nav menu, login/register form css popravki

Browse Source
This commit is contained in:
Nejc Kovač 2022-06-26 17:53:41 +02:00
parent 64c84a4044
commit 24431c997e
4 changed files with 268 additions and 37 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
frontend/simple/classes/DisplayController.php
View File

@ -138,7 +138,7 @@ class DisplayController{
echo '</div>';
if(isAAI()){
// moblie nav ----------------------
echo '<div class="mobile">';
@ -179,17 +179,20 @@ class DisplayController{
}
echo '</span>';
// AAI PRIJAVA
echo '<span class="menu_item ">';
if(isAAI()){
// AAI PRIJAVA
echo '<span class="menu_item ">';
echo '<a id="header-btn" href="'.$site_url.'/aai">'.$lang['AAI_prijava'].' </a> ';
echo '</span>';
echo '</span>';
}
echo '</div>';
echo '</div>';
echo '<script type="text/javascript" src="frontend/simple/script/nav-mobile.js"></script> ';
}
//---------------------------------------------------
// Navigacija
echo '<nav class=nav-desktop>';

122
frontend/simple/css/style.css
View File

@ -719,23 +719,107 @@ body.reset_password_activate div.label {
/******************************/
/* Mobile prilagoditve */
.mobile {
display: none;
}
@media screen and (max-width: 700px) {
header nav {
flex-direction: column-reverse;
align-self: auto;
justify-content: space-evenly;
height: 100%;
text-align: right;
font-size: 14px;
/* --------------HAMBURGER---------------------------------- */
.nav-desktop {
display: none;
}
header nav span.menu_item {
line-height: 18px;
.mobile {
display: block;
}
header nav span.menu_item.active {
border-bottom: 2px #1e88e5 solid;
#nav-icon3 {
width: 38px;
height: 20px;
position: relative;
bottom: 15px;
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
-webkit-transition: 0.5s ease-in-out;
-moz-transition: 0.5s ease-in-out;
-o-transition: 0.5s ease-in-out;
transition: 0.5s ease-in-out;
cursor: pointer;
}
header nav span.menu_item a {
line-height: 18px;
#nav-icon3 span {
display: block;
position: absolute;
height: 5px;
width: 100%;
background: #1E88E5;
border-radius: 9px;
opacity: 1;
left: 0;
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
-webkit-transition: 0.25s ease-in-out;
-moz-transition: 0.25s ease-in-out;
-o-transition: 0.25s ease-in-out;
transition: 0.25s ease-in-out;
}
#nav-icon3 span:nth-child(1) {
top: 0px;
}
#nav-icon3 span:nth-child(2),
#nav-icon3 span:nth-child(3) {
top: 9px;
}
#nav-icon3 span:nth-child(4) {
top: 18px;
}
#nav-icon3.open span:nth-child(1) {
top: 9px;
width: 0%;
left: 50%;
}
#nav-icon3.open span:nth-child(2) {
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
}
#nav-icon3.open span:nth-child(3) {
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
}
#nav-icon3.open span:nth-child(4) {
top: 9px;
width: 0%;
left: 50%;
}
#links {
display: none;
}
/* */
.aai a {
color: #333333;
}
#links.open {
position: absolute;
top: 100px;
left: 0px;
display: flex;
flex-direction: column;
align-items: center;
width: 100%;
height: 100vh;
background-color: rgb(255, 255, 255);
}
#links .menu_item {
font-size: 30px;
margin-top: 30px;
}
#links .menu_item a {
font-size: 16px;
}
body #main .main_content {
padding: 10px 20px 40px 20px;
@ -833,6 +917,7 @@ body.register #main .main_content .landing_page_window input[type=button],
body.login_noEmail #main .main_content .landing_page_window input[type=submit],
body.login_noEmail #main .main_content .landing_page_window input[type=button] {
margin: 30px auto !important;
width: 100%;
}
body.landing_page #main .main_content .app_subtitle,
body.login #main .main_content .app_subtitle,
@ -916,6 +1001,11 @@ header {
max-width: 1160px;
width: 95%;
margin: auto;
font-family: "Source Sans Pro";
}
header nav {
font-weight: 400;
}
header .logo a img {
@ -992,12 +1082,14 @@ body.landing_page #main .landing_page_window label {
.landing_page_window input[type=text] {
padding: 0px;
padding-left: 8px;
height: 38px;
max-width: 354px;
}
.landing_page_window input[type=password] {
padding: 0px;
padding-left: 8px;
height: 38px;
max-width: 354px;
}
@ -1041,6 +1133,10 @@ body.landing_page #main .landing_page_window .register_window a {
line-height: 20px;
}
body.landing_page #main .landing_page_window .register_window .checkbox_text_holder {
font-weight: 400;
}
body.landing_page #main .landing_page_window .register_window .lostpass {
position: unset;
text-align: left;

154
resources/sass/frontend_simple/basic/mobile.scss
View File

@ -1,31 +1,150 @@
/* Mobile prilagoditve */
.mobile{
display: none;
}
@media screen and (max-width: 700px) {
header{
nav{
flex-direction: column-reverse;
align-self: auto;
justify-content: space-evenly;
// header{
// nav{
// flex-direction: column-reverse;
// align-self: auto;
// justify-content: space-evenly;
height: 100%;
// height: 100%;
text-align: right;
font-size: 14px;
// text-align: right;
// font-size: 14px;
span.menu_item{
line-height: 18px;
// span.menu_item{
// line-height: 18px;
&.active{
border-bottom: 2px $color_blue solid;
}
// &.active{
// border-bottom: 2px $color_blue solid;
// }
a{
line-height: 18px;
}
// a{
// line-height: 18px;
// }
// }
// }
// }
/* --------------HAMBURGER---------------------------------- */
.nav-desktop {
display: none;
}
.mobile {
display: block;
}
#nav-icon3 {
width: 38px;
height: 20px;
position: relative;
bottom: 15px;
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
-webkit-transition: .5s ease-in-out;
-moz-transition: .5s ease-in-out;
-o-transition: .5s ease-in-out;
transition: .5s ease-in-out;
cursor: pointer;
span {
display: block;
position: absolute;
height: 5px;
width: 100%;
background: #1E88E5;
border-radius: 9px;
opacity: 1;
left: 0;
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
-webkit-transition: .25s ease-in-out;
-moz-transition: .25s ease-in-out;
-o-transition: .25s ease-in-out;
transition: .25s ease-in-out;
}
span:nth-child(1) {
top: 0px;
}
span:nth-child(2),
span:nth-child(3) {
top: 9px;
}
span:nth-child(4) {
top: 18px;
}
}
}
#nav-icon3.open span:nth-child(1) {
top: 9px;
width: 0%;
left: 50%;
}
#nav-icon3.open span:nth-child(2) {
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
}
#nav-icon3.open span:nth-child(3) {
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
}
#nav-icon3.open span:nth-child(4) {
top: 9px;
width: 0%;
left: 50%;
}
#links {
display: none;
}
/* */
.aai a {
color: #333333;
}
#links.open {
position: absolute;
top: 100px;
left: 0px;
display: flex;
flex-direction: column;
align-items: center;
width: 100%;
height: 100vh;
background-color: rgb(255, 255, 255);
}
#links .menu_item {
font-size: 30px;
margin-top: 30px;
a {
font-size: 16px;
}
}
//-------------------------------------------------------------------
body{
#main{
@ -116,6 +235,7 @@
input[type="submit"],
input[type="button"]{
margin: 30px auto !important;
width: 100%;
}
}

14
resources/sass/frontend_simple/basic/popravki.scss
View File

@ -29,6 +29,11 @@ header {
max-width: 1160px;
width: 95%;
margin: auto;
font-family: $SansPro_font;
}
header nav{
font-weight: 400;
}
header .logo a img {
@ -110,11 +115,13 @@ body.landing_page #main .landing_page_window label {
.landing_page_window input[type="text"] {
padding: 0px;
padding-left: 8px;
height: 38px;
max-width: 354px;
}
.landing_page_window input[type="password"] {
padding: 0px;
padding-left: 8px;
height: 38px;
max-width: 354px;
}
@ -162,6 +169,11 @@ body.landing_page #main .landing_page_window .register_window a {
font-size: 16px;
line-height: 20px;
}
body.landing_page #main .landing_page_window .register_window .checkbox_text_holder{
font-weight: 400;
}
body.landing_page #main .landing_page_window .register_window .lostpass {
position: unset;
@ -222,4 +234,4 @@ footer .footer_content .col a {
footer .footer_content .col3 .social_logo_flex a:first-of-type{
margin-right: 20px;
}