Redesign - responsive popravki

This commit is contained in:
pero1203 2022-06-07 10:34:01 +02:00
parent c033765584
commit bb295302f5
9 changed files with 385 additions and 148 deletions

View File

@ -169,11 +169,11 @@ class SurveyDiagnostics
echo '<p class="bottom16">'.$lang['srv_diagnostika_testiranje_notea'].'<a href="index.php?anketa=' . $this->sid . '&a=testiranje&m=testnipodatki">'.$lang['srv_diagnostika_testiranje_noteb'].'</a>'.$lang['srv_diagnostika_testiranje_notec'].'</p>';
echo '<div class="button_holder">';
echo '<div class="input_box">';
echo '<span class="faicon link-chain link-right blue"></span><span class="italic"></span>';
echo '<input type="text" onClick="this.select();" value="'.SurveyInfo::getSurveyLink().'&preview=on&testdata=on'.$preview_options.'" readonly/>';
echo '</div>';
echo '<button type="button" class="medium blue" onclick="CopyToClipboard(\''.SurveyInfo::getSurveyLink().'&preview=on&testdata=on'.$preview_options.'\'); actionNotePopup(\'link_copied\', \'success\');">'.$lang['srv_diagnostika_testiranje_copy'].'</button>';
echo ' <div class="input_box">';
echo ' <span class="faicon link-chain link-right blue"></span>';
echo ' <input type="text" onClick="this.select();" value="'.SurveyInfo::getSurveyLink().'&preview=on&testdata=on'.$preview_options.'" readonly/>';
echo ' </div>';
echo ' <button type="button" class="medium blue" onclick="CopyToClipboard(\''.SurveyInfo::getSurveyLink().'&preview=on&testdata=on'.$preview_options.'\'); actionNotePopup(\'link_copied\', \'success\');">'.$lang['srv_diagnostika_testiranje_copy'].'</button>';
echo '</div>';
//Nastavitve testnega vnosa - popup

View File

@ -277,7 +277,7 @@ class MobileSurveyAdmin{
// Odjava na nov nacin preko frontend/api
echo ' <div><form name="odjava" id="form_odjava" method="post" action="'.$site_url.'frontend/api/api.php?action=logout">';
echo ' <span class="as_link" onClick="$(\'#form_odjava\').submit();"><span class="faicon logout"></span>' . $lang['logout'] . '</span>';
echo ' <span class="as_link noline" onClick="$(\'#form_odjava\').submit();"><span class="faicon logout"></span>' . $lang['logout'] . '</span>';
echo ' </form></div>';
echo ' </div>';
@ -748,11 +748,6 @@ class MobileSurveyAdmin{
'url' => 'index.php?anketa=' . $this->surveyAdminClass->anketa . '&a=' . A_VABILA . '&m=settings',
'active' => ($_GET['a'] == A_VABILA && ($_GET['m'] == '' || $_GET['m'] == 'settings') ? 'active' : '')
),
array(
'title' => $lang['srv_publication_url'],
'url' => 'index.php?anketa=' . $this->surveyAdminClass->anketa . '&a=' . A_VABILA . '&m=url',
'active' => ($_GET['a'] == A_VABILA && $_GET['m'] == 'url' ? 'active' : '')
),
array(
'title' => $lang['srv_inv_nav_invitations'],
'url' => 'index.php?anketa=' . $this->surveyAdminClass->anketa . '&a=' . A_INVITATIONS . '&m=settings',

View File

@ -8720,56 +8720,6 @@ header #top_line #anketa_header_settings .anketa_header_activation .anketa_heade
padding: 0 16px;
font-size: 14px;
}
header #top_line #anketa_header_settings .anketa_header_activation .anketa_header_activate .switch_anketa {
position: relative;
display: block;
width: 46px;
height: 16px;
}
header #top_line #anketa_header_settings .anketa_header_activation .anketa_header_activate .switch_anketa .switch_anketa_content {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
padding-top: 1px;
color: white;
font-size: 12px;
font-weight: 400;
line-height: 12px;
background-color: #1E88E5;
border-radius: 16px;
}
header #top_line #anketa_header_settings .anketa_header_activation .anketa_header_activate .switch_anketa .switch_anketa_content:before {
position: absolute;
content: "";
height: 14px;
width: 14px;
bottom: 1px;
background-color: white;
border-radius: 50%;
}
header #top_line #anketa_header_settings .anketa_header_activation .anketa_header_activate .switch_anketa.anketa_on .switch_anketa_content {
padding-left: 20px;
background-color: #1E88E5;
}
header #top_line #anketa_header_settings .anketa_header_activation .anketa_header_activate .switch_anketa.anketa_on .switch_anketa_content:before {
left: 1px;
}
header #top_line #anketa_header_settings .anketa_header_activation .anketa_header_activate .switch_anketa.anketa_on:hover .switch_anketa_content {
background-color: #0059ab;
}
header #top_line #anketa_header_settings .anketa_header_activation .anketa_header_activate .switch_anketa.anketa_off .switch_anketa_content {
padding-left: 6px;
background-color: #C4C4C4;
}
header #top_line #anketa_header_settings .anketa_header_activation .anketa_header_activate .switch_anketa.anketa_off .switch_anketa_content:before {
right: 1px;
}
header #top_line #anketa_header_settings .anketa_header_activation .anketa_header_activate .switch_anketa.anketa_off:hover .switch_anketa_content {
background-color: #b7b7b7;
}
header #top_line #anketa_header_settings .anketa_header_quick_settings {
display: flex;
align-items: center;
@ -8885,6 +8835,59 @@ header #top_line #xtradiv #xtradivSettings a .faicon:before {
color: #1E88E5;
}
.switch_anketa {
position: relative;
display: block;
width: 46px;
height: 16px;
}
.switch_anketa .switch_anketa_content {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
padding-top: 1px;
color: white;
font-size: 12px;
font-weight: 400;
line-height: 12px;
background-color: #1E88E5;
border-radius: 16px;
}
.switch_anketa .switch_anketa_content:before {
position: absolute;
content: "";
height: 14px;
width: 14px;
bottom: 1px;
background-color: white;
border-radius: 50%;
}
.switch_anketa.anketa_on .switch_anketa_content {
padding-left: 20px;
background-color: #1E88E5;
}
.switch_anketa.anketa_on .switch_anketa_content:before {
left: 1px;
}
.switch_anketa.anketa_on:hover .switch_anketa_content {
background-color: #0059ab;
}
.switch_anketa.anketa_off .switch_anketa_content {
padding-left: 6px;
background-color: #C4C4C4;
}
.switch_anketa.anketa_off .switch_anketa_content:before {
right: 1px;
}
.switch_anketa.anketa_off:hover .switch_anketa_content {
background-color: #b7b7b7;
}
header #surveyNavigation {
height: 60px;
background-color: #1E88E5;
@ -23292,9 +23295,10 @@ div#srv_diagnostic div.lastnosti_wrapper div.lastnosti_right {
width: 50%;
}
div#srv_diagnostic div.input_box {
border: 1px solid #C4C4C4;
display: flex;
width: 300px;
padding: 10px 0 10px 8px;
border: 1px solid #C4C4C4;
}
div#srv_diagnostic div.input_box input {
border: none;
@ -31631,6 +31635,7 @@ body #main_holder #main .wide {
box-sizing: border-box !important;
margin-left: 0 !important;
margin-right: 0 !important;
padding: 12px 16px 16px;
}
fieldset .nastavitveSpan1,
fieldset .nastavitveSpan2,
@ -31748,7 +31753,7 @@ fieldset textarea {
header .mobile_header .mobile_survey_title {
width: calc(100% - 120px);
text-align: center;
font-size: 14px;
font-size: 17px;
font-weight: 500;
}
header .mobile_header .mobile_logo {
@ -31798,7 +31803,7 @@ header .mobile_menu .submenu:not(.no-transition) {
position: relative;
display: block;
padding: 18px 20px;
font-size: 14px;
font-size: 15px;
font-weight: 500;
text-decoration: none;
transition: all 150ms;
@ -31850,7 +31855,7 @@ header .mobile_menu .submenu:not(.no-transition) {
}
header .mobile_menu .submenu-header > a {
display: block;
font-size: 14px;
font-size: 15px;
font-weight: 500;
padding: 18px 20px;
padding-left: 20px;
@ -31871,7 +31876,7 @@ header .mobile_menu .submenu:not(.no-transition) {
line-height: 30px;
}
header .mobile_menu .mobile_menu_user li.has-submenu a {
font-size: 13px;
font-size: 15px;
color: #333;
}
header .mobile_menu .mobile_menu_user li.has-submenu a .email {
@ -31884,9 +31889,14 @@ header .mobile_menu .submenu:not(.no-transition) {
}
header .mobile_menu .mobile_menu_user .submenu_user_content > div {
padding: 5px 0 10px 0;
font-size: 14px;
font-size: 15px;
font-weight: 500;
}
header .mobile_menu .mobile_menu_user .submenu_user_content > div form span,
header .mobile_menu .mobile_menu_user .submenu_user_content > div a {
font-size: 15px;
text-decoration: none;
}
header .mobile_menu .mobile_menu_user .submenu_user_content > div .faicon {
padding-right: 10px;
vertical-align: -1px;
@ -31915,7 +31925,8 @@ header .mobile_menu .submenu:not(.no-transition) {
display: flex;
align-items: center;
padding: 0 0 15px 0;
font-size: 13px;
font-size: 15px;
text-decoration: none;
}
header .mobile_settings .mobile_settings_content a.anketa_img_nav {
padding-bottom: 20px;
@ -31972,11 +31983,15 @@ header .mobile_menu .submenu:not(.no-transition) {
}
.divPopUp {
width: 100%;
max-width: 100%;
width: calc(100% - 32px) !important;
max-width: calc(100% - 32px) !important;
box-sizing: border-box;
margin: 0 16px;
}
.divPopUp.PopUpNarrow {
width: calc(100% - 32px) !important;
max-width: calc(100% - 32px) !important;
}
#main #moje_ankete_edit #anketa_edit {
padding: 0 !important;
@ -32207,9 +32222,12 @@ header .mobile_menu .submenu:not(.no-transition) {
margin: 0;
}
#branching #bottom_icons_holder .forma_bottom .forma_bottom_inner a {
margin: 0 11px 0 2px;
margin: 0 8px 0 0;
padding: 0;
}
#branching #bottom_icons_holder .forma_bottom .forma_bottom_inner button {
margin: 0;
}
.toolbox_holder {
display: none;
@ -32435,6 +32453,91 @@ header .mobile_menu .submenu:not(.no-transition) {
vertical-align: bottom;
}
.page_vabila.subpage_settings #vabila .button_holder {
flex-wrap: wrap;
}
.page_vabila.subpage_settings #vabila .button_holder .input_box {
display: flex;
width: auto !important;
}
.page_vabila.subpage_settings #vabila .button_holder button {
margin: 0 0 0 8px;
}
.page_vabila.subpage_settings #vabila .button_holder button#nice_url_button {
margin: 16px 0 0 0;
}
.page_vabila.subpage_settings #vabila .more_block {
width: 100%;
}
.page_invitations #inv_top_navi {
flex-direction: column;
align-items: flex-start;
margin-bottom: 32px;
}
.page_invitations #inv_top_navi .inv_nav_settings {
flex-direction: column;
}
.page_invitations #inv_top_navi .inv_nav_settings .inv_step {
text-align: right;
}
.page_invitations #inv_top_navi .inv_step {
margin-bottom: 4px;
}
.page_invitations .invitations_holder.fullwidth {
padding-left: 0 !important;
padding-right: 0 !important;
}
.page_invitations .invitations_holder.half-half {
flex-direction: column;
}
.page_invitations .invitations_holder.half-half .left_holder,
.page_invitations .invitations_holder.half-half .right_holder {
width: 100%;
margin-left: 0;
margin-right: 0;
}
.page_invitations .invitations_holder.left-menu {
flex-direction: column;
}
.page_invitations .invitations_holder.three-part {
flex-direction: column;
}
.page_invitations .invitations_holder.three-part fieldset {
width: 100% !important;
min-width: 100% !important;
}
.page_invitations .invitations_holder #inv_recipients_profiles_holder,
.page_invitations .invitations_holder #inv_messages_profiles_holder {
min-height: auto !important;
}
.page_invitations .invitations_holder .setting_line.inv_sample {
word-break: break-all;
}
.page_invitations .invitations_holder #inv_field_container ul li {
width: 100%;
}
.page_invitations .setting_holder.half-half {
flex-direction: column;
}
.page_invitations .setting_holder.half-half .setting_item {
width: 100%;
margin: 0 0 8px 0 !important;
}
.page_invitations #inv_msg_preview .setting_row {
flex-direction: column;
}
.page_invitations #inv_msg_preview .setting_row .setting_item {
width: 100%;
margin: 0 0 8px 0 !important;
}
.page_invitations .button_holder {
flex-wrap: wrap;
}
.page_invitations .button_holder button {
margin-bottom: 8px;
}
#vabila > table,
table.invitations_settings,
#inv_msg_preview table,

View File

@ -200,73 +200,6 @@ header #top_line{
.anketa_header_activate{
// Gumb za aktivacijo ankete
.switch_anketa {
position: relative;
display: block;
width: 46px;
height: 16px;
.switch_anketa_content {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
padding-top: 1px;
color: white;
font-size: 12px;
font-weight: 400;
line-height: 12px;
background-color: $blue;
border-radius: 16px;
}
.switch_anketa_content:before {
position: absolute;
content: "";
height: 14px;
width: 14px;
bottom: 1px;
background-color: white;
border-radius: 50%;
}
}
.switch_anketa.anketa_on{
.switch_anketa_content{
padding-left: 20px;
background-color: $blue;
}
.switch_anketa_content:before{
left: 1px;
}
&:hover{
.switch_anketa_content{
background-color: $dark-blue;
}
}
}
.switch_anketa.anketa_off{
.switch_anketa_content{
padding-left: 6px;
background-color: $dark-gray;
}
.switch_anketa_content:before{
right: 1px;
}
&:hover{
.switch_anketa_content{
background-color: darken($dark-gray, 5%);
}
}
}
}
.anketa_header_lock{
@ -389,4 +322,72 @@ header #top_line{
}
}
}
}
// Gumb za aktivacijo ankete
.switch_anketa {
position: relative;
display: block;
width: 46px;
height: 16px;
.switch_anketa_content {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
padding-top: 1px;
color: white;
font-size: 12px;
font-weight: 400;
line-height: 12px;
background-color: $blue;
border-radius: 16px;
}
.switch_anketa_content:before {
position: absolute;
content: "";
height: 14px;
width: 14px;
bottom: 1px;
background-color: white;
border-radius: 50%;
}
}
.switch_anketa.anketa_on{
.switch_anketa_content{
padding-left: 20px;
background-color: $blue;
}
.switch_anketa_content:before{
left: 1px;
}
&:hover{
.switch_anketa_content{
background-color: $dark-blue;
}
}
}
.switch_anketa.anketa_off{
.switch_anketa_content{
padding-left: 6px;
background-color: $dark-gray;
}
.switch_anketa_content:before{
right: 1px;
}
&:hover{
.switch_anketa_content{
background-color: darken($dark-gray, 5%);
}
}
}

View File

@ -42,6 +42,8 @@ fieldset {
margin-left: 0 !important;
margin-right: 0 !important;
padding: 12px 16px 16px;
.nastavitveSpan1,
.nastavitveSpan2,
.nastavitveSpan3,

View File

@ -75,7 +75,7 @@ header{
width: calc(100% - 120px);
text-align: center;
font-size: 14px;
font-size: 17px;
font-weight: 500;
}
.mobile_logo{
@ -142,7 +142,7 @@ header{
padding: 18px 20px;
font-size: 14px;
font-size: 15px;
font-weight: 500;
text-decoration: none;
@ -209,7 +209,7 @@ header{
> a {
display: block;
font-size: 14px;
font-size: 15px;
font-weight: 500;
padding: 18px 20px;
padding-left: 20px;
@ -241,7 +241,7 @@ header{
}
a{
font-size: 13px;
font-size: 15px;
color: $main_text;
.email{
@ -258,9 +258,15 @@ header{
> div{
padding: 5px 0 10px 0;
font-size: 14px;
font-size: 15px;
font-weight: 500;
form span,
a{
font-size: 15px;
text-decoration: none;
}
.faicon{
padding-right: 10px;
vertical-align: -1px;
@ -302,7 +308,8 @@ header{
padding: 0 0 15px 0;
font-size: 13px;
font-size: 15px;
text-decoration: none;
&.anketa_img_nav{
padding-bottom: 20px;

View File

@ -1,4 +1,125 @@
.page_vabila.subpage_settings #vabila{
.button_holder{
flex-wrap: wrap;
.input_box{
display: flex;
width: auto !important;
}
button{
margin: 0 0 0 8px;
&#nice_url_button{
margin: 16px 0 0 0;
}
}
}
.more_block{
width: 100%;
}
}
.page_invitations{
#inv_top_navi{
flex-direction: column;
align-items: flex-start;
margin-bottom: 32px;
.inv_nav_settings{
flex-direction: column;
.inv_step{
text-align: right;
}
}
.inv_step{
margin-bottom: 4px;
}
}
.invitations_holder{
&.fullwidth{
padding-left: 0 !important;
padding-right: 0 !important;
}
&.half-half{
flex-direction: column;
.left_holder,
.right_holder{
width: 100%;
margin-left: 0;
margin-right: 0;
}
}
&.left-menu{
flex-direction: column;
}
&.three-part{
flex-direction: column;
fieldset{
width: 100% !important;
min-width: 100% !important;
}
}
#inv_recipients_profiles_holder,
#inv_messages_profiles_holder{
min-height: auto !important;
}
.setting_line.inv_sample{
word-break: break-all;
}
#inv_field_container ul li{
width: 100%;
}
}
.setting_holder.half-half{
flex-direction: column;
.setting_item{
width: 100%;
margin: 0 0 8px 0 !important;
}
}
#inv_msg_preview .setting_row{
flex-direction: column;
.setting_item{
width: 100%;
margin: 0 0 8px 0 !important;
}
}
.button_holder{
flex-wrap: wrap;
button{
margin-bottom: 8px;
}
}
}
#vabila > table,
table.invitations_settings,
#inv_msg_preview table,

View File

@ -15,9 +15,14 @@
// Klasicen popup
.divPopUp{
width: 100%;
max-width: 100%;
width: calc(100% - 32px) !important;
max-width: calc(100% - 32px) !important;
box-sizing: border-box;
margin: 0 16px;
&.PopUpNarrow{
width: calc(100% - 32px) !important;
max-width: calc(100% - 32px) !important;
}
}

View File

@ -72,9 +72,12 @@ div#srv_diagnostic {
}
div.input_box {
border: 1px solid $dark-gray;
display: flex;
width: 300px;
padding: 10px 0 10px 8px;
border: 1px solid $dark-gray;
input {
border: none;