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

- drupal - modal poyabljeno geslo, modal potrditev registracije, modal fb in google login, dodatni gumbi nazaj in funkcionalnosti, responsive vsega (postavitve dvojnih gumbov)

Browse Source
This commit is contained in:
urospodkriznik 2022-10-26 17:06:04 +02:00
parent e85b290e1e
commit fd116bbc9d
11 changed files with 194 additions and 133 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
frontend/drupal9/web/modules/custom/prijava_1ka/templates/prijava-obnovitev-gesla-block.html.twig
View File

@ -5,9 +5,9 @@
<div class="row">
<div class="col">
<h3>
<h4>
{{ lang['cms_reset_password'] }}
</h3>
</h4>
</div>
</div>
@ -29,11 +29,9 @@
</div>
</div>
<div>
<a href="#" class="button main-button w-inline-block" id="submit-lost-password">
<div class="button-label">{{ lang['srv_potrdi'] }}</div>
<div class="button-flyin button-flyin-secondary" style="transform: translate3d(-100%, 0px, 0px) scale3d(1, 1, 1) rotateX(0deg) rotateY(0deg) rotateZ(0deg) skew(0deg, 0deg); transform-style: preserve-3d; display: block;"></div>
</a>
<div class="col buttons w-clearfix">
<a href="#" class="submit-btn buttong w-button secondary-button" id="lost-password-back">{{ lang['back'] }}</a>
<a href="#" class="submit-btn buttong w-button main-button" id="submit-lost-password">{{ lang['srv_potrdi_email'] }}</a>
</div>
</div>
</div>

26
frontend/drupal9/web/modules/custom/prijava_1ka/templates/prijava-z-racuni-modal-block.html.twig
View File

@ -6,9 +6,9 @@
{# // Naslov#}
<div class="row">
<div class="col">
<h3 id="login-google-title">{{ lang['login_with_google'] }}</h3>
<h3 id="login-facebook-title">{{ lang['login_with_facebook'] }}</h3>
<h3 id="login-aai-title">{{ lang['login_with_aai_title'] }}</h3>
<h4 id="login-google-title">{{ lang['login_with_google'] }}</h4>
<h4 id="login-facebook-title">{{ lang['login_with_facebook'] }}</h4>
<h4 id="login-aai-title">{{ lang['login_with_aai_title'] }}</h4>
</div>
</div>
@ -21,21 +21,21 @@
<div class="w-clearfix">
<div class="col _4-4-12-12">
<div class="">
<p>{{ lang['srv_gdpr_frontend_external_login'] | raw }}</p>
</div>
</div>
<div class="w-clearfix">
<div class="col _4-4-12-12">
<div class="">
<p>{{ lang['srv_gdrp_frontend_cookie'] | raw }}</p>
</div>
</div>
<div>
<div class="col toppadding">
<div class="toppadding">
<div class="checkbox-field w-checkbox checkbox-agree" style="display: flex;">
<input type="checkbox" id="cutom-login-agree" name="agree" value="1" class="cb w-checkbox-input" required="required">
<input type="checkbox" id="cutom-login-agree" name="agree" value="1" class="cb" required="required">
&nbsp;
<span class="checkbox-display"></span>
<span id="agreelabel">
@ -47,9 +47,9 @@
{% if (rememberMe) %}
<div>
<div class="col">
<div class="">
<div class="checkbox-field w-checkbox checkbox-remember-me">
<input type="checkbox" id="custom-login-remember-me" name="remember" value="1" class="cb w-checkbox-input" required="required">
<input type="checkbox" id="custom-login-remember-me" name="remember" value="1" class="cb" required="required">
<span class="checkbox-display"></span>
<span id="custom-login-remember-me-label">
<label for="custom-login-remember-me" class="checkbox-label w-form-label">{{ lang['remember_me2'] }}</label>
@ -59,11 +59,9 @@
</div>
{% endif %}
<div>
<div class="col w-clearfix">
<button class="submit-btn w-button gumb prijava-ostale-nazaj" style="float: left;">{{ lang['back'] }}</button>
<input type="submit" value="{{ lang['srv_custom_report_alert_yes'] }}" class="submit-btn w-button gumb" id="submit-other-login" style="float:right;">
</div>
<div class="buttons w-clearfix">
<a href="#" class="submit-btn buttong w-button secondary-button prijava-ostale-nazaj">{{ lang['back'] }}</a>
<a href="#" class="submit-btn buttong w-button main-button" id="submit-other-login">{{ lang['srv_custom_report_alert_yes'] }}</a>
</div>
</div>

4
frontend/drupal9/web/modules/custom/registracija_1ka/templates/registracija-block.html.twig
View File

@ -192,8 +192,8 @@
<div class="row">
<div class="col buttons w-clearfix">
<a href="#" class="submit-btn button w-button secondary-button" id="reg-confirm-back">{{ lang['back'] }}</a>
<a href="#" class="submit-btn button w-button main-button" id="reg-confirm-next">{{ lang['next1'] }}</a>
<a href="#" class="submit-btn buttong w-button secondary-button" id="reg-confirm-back">{{ lang['back'] }}</a>
<a href="#" class="submit-btn buttong w-button main-button" id="reg-confirm-next">{{ lang['next1'] }}</a>
</div>
</div>

134
frontend/drupal9/web/themes/custom/pro1ka/css/style.css
View File

@ -356,6 +356,7 @@ td,
th {
padding: 0; }
.buttong,
.button {
position: relative;
display: -webkit-box;
@ -363,9 +364,7 @@ th {
display: -ms-flexbox;
display: flex;
overflow: hidden;
margin-right: 5px !important;
margin-bottom: 5px;
margin-left: 5px !important;
padding: 12px 7px 12px 17px;
-webkit-box-pack: justify;
-webkit-justify-content: space-between;
@ -382,9 +381,17 @@ th {
cursor: pointer;
border: 1px solid #1e88e5;
color: #1e88e5; }
.buttong.shrink,
.button.shrink {
max-width: 200px; }
.button {
margin-right: 5px !important;
margin-left: 5px !important; }
.buttong {
display: flex; }
img {
max-width: 100%;
vertical-align: middle;
@ -1117,6 +1124,18 @@ ul.seznam-tem {
width: 30px;
height: 30px;
cursor: pointer; }
.modal .modal-box .checkbox-field, .rexister-modal .modal-box .checkbox-field {
padding-left: 0;
margin-bottom: 16px; }
.modal .modal-box .checkbox-field input, .rexister-modal .modal-box .checkbox-field input {
width: 18px;
height: 18px;
min-width: 18px;
min-height: 18px;
margin-top: 4px;
margin-right: 5px; }
.modal .modal-box .checkbox-field label, .rexister-modal .modal-box .checkbox-field label {
font-weight: 400; }
.modal .modal-box h3, .rexister-modal .modal-box h3 {
margin-top: 0px;
margin-bottom: 16px;
@ -1126,6 +1145,8 @@ ul.seznam-tem {
.modal .modal-box h3.center, .rexister-modal .modal-box h3.center {
margin: auto;
padding-bottom: 25px; }
.modal .modal-box h4, .rexister-modal .modal-box h4 {
font-weight: 600; }
.modal .modal-box .w-input, .rexister-modal .modal-box .w-input {
border-style: solid;
border-width: 1px;
@ -1216,7 +1237,6 @@ ul.seznam-tem {
flex-direction: column;
margin: 20px 0; }
.modal .modal-box #register-form-confirm h4, .rexister-modal .modal-box #register-form-confirm h4 {
padding-bottom: 0px;
font-weight: 600; }
.modal .modal-box #register-form-confirm ul, .rexister-modal .modal-box #register-form-confirm ul {
margin-top: 0; }
@ -1231,33 +1251,50 @@ ul.seznam-tem {
text-align: end;
margin-right: 25px;
font-weight: 400; }
.modal .modal-box #register-form-confirm .buttons, .rexister-modal .modal-box #register-form-confirm .buttons {
margin-top: 10px;
.modal .modal-box .w-form .buttons,
.modal .modal-box #register-form-confirm .buttons, .rexister-modal .modal-box .w-form .buttons,
.rexister-modal .modal-box #register-form-confirm .buttons {
margin-top: 10px;
display: flex;
flex-direction: row; }
.modal .modal-box .w-form .buttons .buttong,
.modal .modal-box #register-form-confirm .buttons .buttong, .rexister-modal .modal-box .w-form .buttons .buttong,
.rexister-modal .modal-box #register-form-confirm .buttons .buttong {
display: flex;
flex-direction: row; }
.modal .modal-box #register-form-confirm .buttons .button, .rexister-modal .modal-box #register-form-confirm .buttons .button {
flex: 1;
text-transform: uppercase;
justify-content: center; }
.modal .modal-box #register-form-confirm .buttons .button.secondary-button, .rexister-modal .modal-box #register-form-confirm .buttons .button.secondary-button {
background: linear-gradient(to left, white 50%, #1e88e5 50%) right;
background-size: 200%;
transition: .2s ease-out;
color: #1e88e5;
border: 1px solid #1e88e5;
padding: 11px 7px 11px 17px; }
.modal .modal-box #register-form-confirm .buttons .button.secondary-button:hover, .rexister-modal .modal-box #register-form-confirm .buttons .button.secondary-button:hover {
background-position: left;
color: white; }
.modal .modal-box #register-form-confirm .buttons .button.main-button, .rexister-modal .modal-box #register-form-confirm .buttons .button.main-button {
background: linear-gradient(to left, #1e88e5 50%, #0040A9 50%) right;
background-size: 200%;
transition: .2s ease-out;
color: #fff;
border: 1px solid #1e88e5; }
.modal .modal-box #register-form-confirm .buttons .button.main-button:hover, .rexister-modal .modal-box #register-form-confirm .buttons .button.main-button:hover {
border: 1px solid #0040A9;
background-position: left; }
flex: 1;
text-transform: uppercase;
justify-content: center; }
.modal .modal-box .w-form .buttons .buttong.secondary-button,
.modal .modal-box #register-form-confirm .buttons .buttong.secondary-button, .rexister-modal .modal-box .w-form .buttons .buttong.secondary-button,
.rexister-modal .modal-box #register-form-confirm .buttons .buttong.secondary-button {
margin: 0 8px 0 0;
background: linear-gradient(to left, white 50%, #1e88e5 50%) right;
background-size: 200%;
transition: .2s ease-out;
color: #1e88e5;
border: 1px solid #1e88e5;
padding: 11px 7px 11px 17px; }
.modal .modal-box .w-form .buttons .buttong.secondary-button:hover,
.modal .modal-box #register-form-confirm .buttons .buttong.secondary-button:hover, .rexister-modal .modal-box .w-form .buttons .buttong.secondary-button:hover,
.rexister-modal .modal-box #register-form-confirm .buttons .buttong.secondary-button:hover {
background-position: left;
color: white; }
.modal .modal-box .w-form .buttons .buttong.main-button,
.modal .modal-box #register-form-confirm .buttons .buttong.main-button, .rexister-modal .modal-box .w-form .buttons .buttong.main-button,
.rexister-modal .modal-box #register-form-confirm .buttons .buttong.main-button {
margin: 0 0 0 8px;
background: linear-gradient(to left, #1e88e5 50%, #0040A9 50%) right;
background-size: 200%;
transition: .2s ease-out;
color: #fff;
border: 1px solid #1e88e5; }
.modal .modal-box .w-form .buttons .buttong.main-button:hover,
.modal .modal-box #register-form-confirm .buttons .buttong.main-button:hover, .rexister-modal .modal-box .w-form .buttons .buttong.main-button:hover,
.rexister-modal .modal-box #register-form-confirm .buttons .buttong.main-button:hover {
border: 1px solid #0040A9;
background-position: left; }
.modal .modal-box #obnovitev-gesla .buttons, .rexister-modal .modal-box #obnovitev-gesla .buttons {
padding: 0; }
.modal .modal-box #register-form-email-sent, .rexister-modal .modal-box #register-form-email-sent {
display: none;
flex-direction: column; }
@ -1266,14 +1303,6 @@ ul.seznam-tem {
.modal .modal-box #register-form-email-sent h4, .rexister-modal .modal-box #register-form-email-sent h4 {
padding-bottom: 0px;
font-weight: 600; }
.modal #submit-lost-password, .rexister-modal #submit-lost-password {
width: 250px;
margin-left: auto !important;
text-align: center;
text-transform: uppercase;
margin-right: 0 !important; }
.modal #submit-lost-password .button-label, .rexister-modal #submit-lost-password .button-label {
margin: auto; }
.modal .error, .modal .oznacen-rdec, .rexister-modal .error, .rexister-modal .oznacen-rdec {
color: red; }
.modal label, .rexister-modal label {
@ -1404,18 +1433,6 @@ ul.seznam-tem {
padding-left: 1rem;
color: #e35205 !important;
font-weight: bold; }
.dva-stolpca .checkbox-field {
padding-left: 0;
margin-bottom: 16px; }
.dva-stolpca .checkbox-field input {
width: 18px;
height: 18px;
min-width: 18px;
min-height: 18px;
margin-top: 4px;
margin-right: 5px; }
.dva-stolpca .checkbox-field label {
font-weight: 400; }
.naslov-url {
font-size: 21px;
@ -1466,10 +1483,10 @@ ul.seznam-tem {
height: 48px; }
@media (max-width: 991px) {
.dva-stolpca .preko-racunov .ostale-prijave .ikona .gumb {
.modal-box .dva-stolpca .preko-racunov .ostale-prijave .ikona .gumb {
max-width: 165px;
padding: 0.5rem; }
.dva-stolpca .preko-racunov .ostale-prijave .ikona .gumb img {
.modal-box .dva-stolpca .preko-racunov .ostale-prijave .ikona .gumb img {
height: 2.6rem;
width: 52px;
padding-right: 1rem;
@ -1489,7 +1506,8 @@ ul.seznam-tem {
padding-left: 0 !important;
padding-right: 0 !important; }
.modal-box .button {
margin-right: 0 !important; }
margin-right: 0 !important;
margin-left: 0 !important; }
.modal-box .naslov-url {
margin-bottom: 10px; }
.modal-box .naslov-url.plain {
@ -1501,8 +1519,15 @@ ul.seznam-tem {
.modal-box .registracija .w-form .input_row .left_col, .modal-box .registracija .w-form .input_row .right_col {
width: 100% !important;
padding: 0 !important; }
.modal-box .w-form .buttons,
.modal-box #register-form-confirm .buttons {
flex-direction: column !important; }
.modal-box .w-form .buttons .secondary-button,
.modal-box #register-form-confirm .buttons .secondary-button {
margin: 0 !important; }
.modal-box .w-form .buttons .main-button,
.modal-box #register-form-confirm .buttons .main-button {
margin: 10px 0 0 0 !important; }
.modal-box .row {
margin-left: 0 !important;
margin-right: 0 !important; }
@ -1511,6 +1536,9 @@ ul.seznam-tem {
.modal-box .dva-stolpca {
display: flex;
flex-direction: column; }
.modal-box .dva-stolpca .forma {
min-width: unset;
padding: 0; }
.modal-box .dva-stolpca h4 {
margin-left: 0; }
.modal-box .dva-stolpca .col p.besedilo {
@ -4722,12 +4750,14 @@ p {
-ms-flex: 1;
flex: 1; }
.buttong.main-button
.button.main-button {
background: linear-gradient(to left, #1e88e5 50%, #0040A9 50%) right;
background-size: 200%;
transition: .2s ease-out;
color: #fff;
border: 1px solid #1e88e5; }
.buttong.main-button
.button.main-button img {
opacity: 1;
transition: opacity 200ms; }

6
frontend/drupal9/web/themes/custom/pro1ka/js/login.js
View File

@ -270,6 +270,12 @@
jQuery('#register-form').css('display', 'flex');
});
// Pri potrditvi omogočimo gum nazaj
jQuery('#lost-password-back').on('click', function () {
jQuery('#modal-lost-password').hide();
jQuery('#modal-login').css('display', 'flex');
});
//Pošljemo potrditven email
jQuery('#reg-confirm-next').on('click', function (event) {
event.preventDefault();

8
frontend/drupal9/web/themes/custom/pro1ka/js/script.js
View File

@ -305,9 +305,9 @@
//Prijava z ostalimi računi
jQuery('#agreelabel, #cutom-login-agree, .checkbox-agree').on('click', function () {
if (jQuery('#cutom-login-agree').is(':checked')) {
jQuery('#submit-other-login').show();
jQuery('#submit-other-login').css('visibility', 'visible');
} else {
jQuery('#submit-other-login').hide();
jQuery('#submit-other-login').css('visibility', 'hidden');
}
});
@ -321,7 +321,7 @@
jQuery('.ikona-custom-login').on('click', function () {
var atribut = jQuery(this).attr('data-login');
jQuery('#submit-other-login').hide();
jQuery('#submit-other-login').css('visibility', 'hidden');
jQuery('.rexister-modal').hide();
jQuery('#modal-other-login h3').hide();
@ -331,7 +331,7 @@
// Če obstaja piškotek, potemgumb naprej prikažemo
if (document.cookie.indexOf('remember-me=') > 0) {
jQuery('#cutom-login-agree').attr('checked', true);
jQuery('#submit-other-login').show();
jQuery('#submit-other-login').css('visibility', 'visible');
}
if (atribut == 'aai') {

12
frontend/drupal9/web/themes/custom/pro1ka/sass/bacis/buttons.scss
View File

@ -1,3 +1,4 @@
.buttong,
.button{
position: relative;
display: -webkit-box;
@ -5,9 +6,7 @@
display: -ms-flexbox;
display: flex;
overflow: hidden;
margin-right: 5px !important;
margin-bottom: 5px;
margin-left: 5px !important;
padding: 12px 7px 12px 17px;
-webkit-box-pack: justify;
-webkit-justify-content: space-between;
@ -30,3 +29,12 @@
max-width: 200px;
}
}
.button{
margin-right: 5px !important;
margin-left: 5px !important;
}
.buttong{
display: flex;
}

1
frontend/drupal9/web/themes/custom/pro1ka/sass/bolaric/1ka.scss
View File

@ -485,6 +485,7 @@ p {
flex: 1;
}
.buttong.main-button
.button.main-button {
background: linear-gradient(to left, #1e88e5 50%, $temo-modra 50%) right;
background-size: 200%;

120
frontend/drupal9/web/themes/custom/pro1ka/sass/components/_popup.scss
View File

@ -61,6 +61,24 @@
cursor: pointer;
}
.checkbox-field{
padding-left: 0;
margin-bottom: 16px;
input{
width: 18px;
height: 18px;
min-width: 18px;
min-height: 18px;
margin-top: 4px;
margin-right: 5px;
}
label{
font-weight: 400;
}
}
h3{
margin-top: 0px;
margin-bottom: 16px;
@ -76,6 +94,10 @@
}
}
h4{
font-weight: 600;
}
.w-input{
border-style: solid;
border-width: 1px;
@ -222,7 +244,6 @@
}
h4{
padding-bottom: 0px;
font-weight: 600;
}
@ -246,18 +267,24 @@
}
}
}
}
.w-form,
#register-form-confirm{
.buttons{
margin-top: 10px;
display: flex;
flex-direction: row;
.button{
.buttong{
display: flex;
flex: 1;
text-transform: uppercase;
justify-content: center;
&.secondary-button{
margin: 0 8px 0 0;
background: linear-gradient(to left, white 50%, #1e88e5 50%) right;
background-size: 200%;
transition: .2s ease-out;
@ -273,6 +300,8 @@
}
&.main-button {
margin: 0 0 0 8px;
background: linear-gradient(to left, #1e88e5 50%, $temo-modra 50%) right;
background-size: 200%;
transition: .2s ease-out;
@ -288,6 +317,12 @@
}
}
#obnovitev-gesla{
.buttons{
padding: 0;
}
}
#register-form-email-sent {
display: none;
flex-direction: column;
@ -304,18 +339,6 @@
}
#submit-lost-password{
width: 250px;
margin-left: auto !important;
text-align: center;
text-transform: uppercase;
margin-right: 0 !important;
.button-label{
margin: auto;
}
}
.error, .oznacen-rdec{
color: red;
}
@ -522,25 +545,6 @@
}
}
.checkbox-field{
padding-left: 0;
margin-bottom: 16px;
input{
width: 18px;
height: 18px;
min-width: 18px;
min-height: 18px;
margin-top: 4px;
margin-right: 5px;
}
label{
font-weight: 400;
}
}
}
.naslov-url {
@ -609,25 +613,27 @@
}
@media (max-width: 991px) {
//Registracijska forma
.dva-stolpca {
.preko-racunov {
.ostale-prijave {
.modal-box{
//Registracijska forma
.dva-stolpca {
.preko-racunov {
.ostale-prijave {
.ikona {
.gumb {
max-width: 165px;
padding: 0.5rem;
.ikona {
.gumb {
max-width: 165px;
padding: 0.5rem;
img {
height: 2.6rem;
width: 52px;
padding-right: 1rem;
float: left;
img {
height: 2.6rem;
width: 52px;
padding-right: 1rem;
float: left;
}
}
}
}
}
}
@ -662,6 +668,7 @@
.button{
margin-right: 0 !important;
margin-left: 0 !important;
}
.naslov-url{
@ -685,9 +692,17 @@
}
}
.w-form,
#register-form-confirm{
.buttons{
flex-direction: column !important;
.secondary-button{
margin: 0 !important;
}
.main-button{
margin: 10px 0 0 0 !important;
}
}
}
@ -705,6 +720,11 @@
display: flex;
flex-direction: column;
.forma{
min-width: unset;
padding: 0;
}
h4{
margin-left: 0;
}
@ -782,6 +802,4 @@
@media screen and (max-width: 479px) {
}
}

1
lang/1.php
View File

@ -2367,6 +2367,7 @@ $lang = array (
"srv_statistics" => "Osnovni pregled",
"srv_statistics_edit" => "Uvodni tekst h rezultatom",
"srv_zapri" => "Zapri",
"srv_potrdi_email" => "Potrdi e-mail",
"srv_potrdi" => "Potrdi",
"srv_potrdi2" => "Potrdi",
"srv_potrdi_new" => "Ustvari novo anketo",

3
lang/2.php
View File

@ -2352,6 +2352,7 @@ $lang = array (
"srv_statistics" => "Statistics",
"srv_statistics_edit" => "Intro text for results",
"srv_zapri" => "Close",
"srv_potrdi_email" => "Confirm e-mail",
"srv_potrdi" => "Confirm",
"srv_potrdi2" => "Submit",
"srv_potrdi_new" => "Confirm",
@ -6828,7 +6829,7 @@ $lang = array (
'login_create_own' => 'Create own',
'login_create_right' => '<span class="strong">LOGIN</span><br /> and <br /><span class="strong">REGISTRATION</span>',
'login_with_account' => 'Login with account',
'login_with_google' => 'Gmail Sign In',
'login_with_google' => 'Google Sign In',
'login_with_facebook' => 'Facebook Sign In',
'login_with_aai' => 'ARNES AAI-account',
'login_with_aai_title' => '1KA.ARNES.SI',