Pripravljena osnova za redesign admin vmesnika (scss struktura, mockup - v delu)

This commit is contained in:
pero1203 2021-11-03 11:53:26 +01:00
parent df381d6761
commit aac5c61ce1
45 changed files with 2057 additions and 108 deletions

View File

@ -320,18 +320,18 @@ class SurveyAdmin
else{
echo '<div id="anketa">';
// breadcrumbs
echo '<div class="breadcrumbs">';
// breadcrumbs
echo '<div class="breadcrumbs">';
if ((isset($_GET['a']) && $this->first_action == 'NAVI_STATUS')? $breadcrumbs_a = '_' . $_GET['a'] : $breadcrumbs_a = '');
if ((isset($_GET['m']) && $this->first_action == 'NAVI_ANALYSIS' && $_GET['m'] == 'charts')? $breadcrumbs_m = '_' . $_GET['m'] : $breadcrumbs_m = '');
echo $lang['navigation_'.$this->first_action] . ' > ' . $lang['navigation_'.$this->second_action.$breadcrumbs_a.$breadcrumbs_m];
if (isset($this->third_action)) {
echo ' > '.$lang['navigation_'.$this->third_action];
}
//echo '<br>'.$this->first_action .' > '.$this->second_action. ' > '.$this->third_action;
echo '</div>';
if ((isset($_GET['a']) && $this->first_action == 'NAVI_STATUS')? $breadcrumbs_a = '_' . $_GET['a'] : $breadcrumbs_a = '');
if ((isset($_GET['m']) && $this->first_action == 'NAVI_ANALYSIS' && $_GET['m'] == 'charts')? $breadcrumbs_m = '_' . $_GET['m'] : $breadcrumbs_m = '');
echo $lang['navigation_'.$this->first_action] . ' > ' . $lang['navigation_'.$this->second_action.$breadcrumbs_a.$breadcrumbs_m];
if (isset($this->third_action)) {
echo ' > '.$lang['navigation_'.$this->third_action];
}
//echo '<br>'.$this->first_action .' > '.$this->second_action. ' > '.$this->third_action;
echo '</div>';
echo '<div id="anketa_edit" class="page_'.$_GET['a'].' subpage_'.$_GET['m'].' '.($this->survey_type == '1' ? 'forma' : '').' '.($this->survey_type == '0' ? 'glasovanje' : '').'">';

View File

@ -1,102 +1,172 @@
<fieldset class="NavigationBarSide">
<div class="NavigationBarSide MenuTitle">
Naslov menija
</div>
<?php
<div class="NavigationBarSide MenuItem">
Posamezna stran
</div>
?>
<div class="NavigationBarSide MenuItem">
Posamezna stran
</div>
<div class="NavigationBarSide MenuItem">
Posamezna stran
</div>
<div class="NavigationBarSide MenuItem">
Posamezna stran
</div>
<div class="NavigationBarSide MenuTitle">
Naslov menija
</div>
<div class="NavigationBarSide MenuItem">
Posamezna stran
</div>
<div class="NavigationBarSide MenuItem">
Posamezna stran
</div>
<div class="NavigationBarSide MenuItem">
Posamezna stran
</div>
<div class="NavigationBarSide MenuItem">
Posamezna stran
</div>
</fieldset>
<div class="ContentMain">
<fieldset class="ContentFieldset">
<legend>Box z vsebino</legend>
<div class="ContentDiv">
<label class="InputLabel">Vnos teksta:</label>
<form>
<input class="Text" type="text">
</form>
</div>
<div class="ContentDiv">
<label class="InputLabel">Dropdown meni:</label>
<form>
<select class="Dropdown">
<option>Option 1</option>
<option>Option 2</option>
</select>
</form>
</div>
<div class="ContentDiv">
<label class="InputLabel">Radio gumbi:</label>
<form>
<input class="Radio" type="radio" id="1" name="radio"></input>
<label>Option 1</label>
<input class="Radio" type="radio" id="2" name="radio"></input>
<label>Option 2</label>
</form>
</div>
<div class="ContentDiv">
<label class="InputLabel">Checkbox:</label>
<form>
<input class="Radio" type="checkbox" id="1" name="checkbox"></input>
<label>Option 1</label>
<input class="Radio" type="checkbox" id="2" name="checkbox"></input>
<label>Option 2</label>
</form>
</div>
<div class="ContentDiv">
<label class="InputLabel">Button:</label>
<button> Gumb </button>
</div>
<div class="ContentDiv">
Povezava: <a class="ContentLink" href="https://www.1ka.si/">www.1ka.si</a>
</div>
</fieldset>
<html>
<head>
<title>1KA | Spletne ankete</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta content="width=device-width; initial-scale=1.0;" name="viewport">
<!-- stari css-ji -->
<!--
<link type="text/css" href="minify/g=css?v=22.09.30" media="screen" rel="stylesheet">
<link type="text/css" href="minify/g=cssPrint?v=22.09.30" media="print" rel="stylesheet">
<link type="text/css" href="https://fonts.googleapis.com/css?family=Montserrat:400,400i,500,500i,600,600i,700,700i&amp;subset=latin-ext" rel="stylesheet">
-->
<!-- novi css -->
<link type="text/css" href="../../public/css/admin_new.css" media="screen" rel="stylesheet">
<link rel="shortcut icon" type="image/ico" href="http://localhost//favicon.ico">
</head>
<body class="mainBody body_anketa">
<div id="main_holder">
<header>
Header
</header>
<div id="main">
<div id="anketa">
<div id="anketa_edit" class="menu_left wide">
<div class="left">
<span class="menu_left-title">
Naslov menija
</span>
<ul class="menu_left-list">
<li>
Posamezna stran
</li>
<li>
Posamezna stran
</li>
<li>
Posamezna stran
</li>
<li>
Posamezna stran
</li>
</ul>
<span class="menu_left-title">
Naslov menija
</span>
<ul class="menu_left-list">
<li>
Posamezna stran
</li>
<li>
Posamezna stran
</li>
<li>
Posamezna stran
</li>
<li>
Posamezna stran
</li>
</ul>
</div>
<div class="right">
<fieldset class="ContentFieldset">
<legend>Box z vsebino</legend>
<div class="ContentDiv">
<label class="InputLabel">Vnos teksta:</label>
<form>
<input class="Text" type="text">
</form>
</div>
<div class="ContentDiv">
<label class="InputLabel">Dropdown meni:</label>
<form>
<select class="Dropdown">
<option>Option 1</option>
<option>Option 2</option>
</select>
</form>
</div>
<div class="ContentDiv">
<label class="InputLabel">Radio gumbi:</label>
<form>
<input class="Radio" type="radio" id="1" name="radio"></input>
<label>Option 1</label>
<input class="Radio" type="radio" id="2" name="radio"></input>
<label>Option 2</label>
</form>
</div>
<div class="ContentDiv">
<label class="InputLabel">Checkbox:</label>
<form>
<input class="Radio" type="checkbox" id="1" name="checkbox"></input>
<label>Option 1</label>
<input class="Radio" type="checkbox" id="2" name="checkbox"></input>
<label>Option 2</label>
</form>
</div>
<div class="ContentDiv">
<label class="InputLabel">Button:</label>
<button class="small red">Gumb - majhen rdeč</button>
<button class="large blue">Gumb - velik moder</button>
</div>
<div class="ContentDiv">
Povezava: <a class="ContentLink" href="https://www.1ka.si/">www.1ka.si</a>
</div>
</fieldset>
</div>
</div>
</div>
</div>
<footer id="srv_footer">
Footer
</footer>
</div>
</body>
</html>
<?php
?>

128
public/css/admin_new.css Normal file
View File

@ -0,0 +1,128 @@
/*
Main scss with includes
*/
/*
Basic scss - variables, layout, colors, font...
*/
/*
All colors
*/
/*
Only layout styles - position, display, max-width...
*/
body {
padding: 0;
margin: 0;
}
body #main_holder {
display: flex;
flex-direction: column;
}
body #main_holder #main {
padding: 64px 0;
}
body #main_holder #main .fullwidth {
max-width: 100%;
}
body #main_holder #main .narrow {
margin: 0 auto;
max-width: 1060px;
}
body #main_holder #main .wide {
margin: 0 auto;
max-width: 1360px;
}
body #main_holder #main .menu_left {
display: flex;
flex-direction: row;
justify-content: center;
}
body #main_holder #main .menu_left .left {
box-sizing: border-box;
width: 300px;
padding-right: 64px;
}
body #main_holder #main .menu_left .right {
flex-grow: 1;
}
/*
Components scss
*/
header {
height: 170px;
background-color: #eee;
}
footer {
height: 120px;
background-color: #eee;
}
/*
Form scss - input fields, buttons...
*/
button,
submit {
box-sizing: border-box;
font-weight: 600;
box-shadow: none;
border: 0;
}
button.small,
submit.small {
padding: 5px 32px;
font-size: 14px;
}
button.medium,
submit.medium {
padding: 10px 32px;
font-size: 16px;
}
button.large,
submit.large {
padding: 12px 32px;
font-size: 20px;
}
button.blue,
submit.blue {
color: #FFFFFF;
background-color: #1E88E5;
}
button.white-blue,
submit.white-blue {
color: #1E88E5;
background-color: #FFFFFF;
border: 1px #1E88E5 solid;
}
button.white-black,
submit.white-black {
color: #333333;
background-color: #FFFFFF;
border: 1px #333333 solid;
}
button.gray,
submit.gray {
color: #333333;
background-color: #E5E5E5;
border: 1px #333333 solid;
}
button.yellow,
submit.yellow {
color: #333333;
background-color: #FFC700;
}
button.red,
submit.red {
color: #FFFFFF;
background-color: #FF0000;
}
fieldset {
padding: 32px;
}
/*
Specific pages scss
*/
/*# sourceMappingURL=admin_new.css.map */

View File

@ -0,0 +1,10 @@
/*
Basic scss - variables, layout, colors, font...
*/
@import "font";
@import "colors";
@import "variables";
@import "layout";
@import "animations";

View File

@ -0,0 +1,15 @@
/*
All colors
*/
$blue: #1E88E5;
$black: #333333;
$white: #FFFFFF;
$gray: #E5E5E5;
$yellow: #FFC700;
$red: #FF0000;

View File

View File

@ -0,0 +1,56 @@
/*
Only layout styles - position, display, max-width...
*/
body{
padding: 0;
margin: 0;
#main_holder{
display: flex;
flex-direction: column;
header{
}
#main{
padding: 64px 0;
.fullwidth{
max-width: 100%;
}
.narrow{
margin: 0 auto;
max-width: 1060px;
}
.wide{
margin: 0 auto;
max-width: 1360px;
}
.menu_left{
display: flex;
flex-direction: row;
justify-content: center;
.left{
box-sizing: border-box;
width: 300px;
padding-right: 64px;
}
.right{
flex-grow: 1;
}
}
}
footer{
}
}
}

View File

@ -0,0 +1,14 @@
/*
Components scss
*/
// Layout components
@import "header/header";
@import "footer/footer";
@import "main/main";
// Functional components
@import "form/form";
@import "table/table";
@import "popup/popup";

View File

@ -0,0 +1,5 @@
footer{
height: 120px;
background-color: #eee;
}

View File

@ -0,0 +1,62 @@
button,
submit{
box-sizing: border-box;
font-weight: 600;
box-shadow: none;
border: 0;
// Button sizes
&.small{
padding: 5px 32px;
font-size: 14px;
}
&.medium{
padding: 10px 32px;
font-size: 16px;
}
&.large{
padding: 12px 32px;
font-size: 20px;
}
// Button colors
&.blue{
color: $white;
background-color: $blue;
}
&.white-blue{
color: $blue;
background-color: $white;
border: 1px $blue solid;
}
&.white-black{
color: $black;
background-color: $white;
border: 1px $black solid;
}
&.gray{
color: $black;
background-color: $gray;
border: 1px $black solid;
}
&.yellow{
color: $black;
background-color: $yellow;
}
&.red{
color: $white;
background-color: $red;
}
}

View File

@ -0,0 +1,4 @@
fieldset{
padding: 32px;
}

View File

@ -0,0 +1,8 @@
/*
Form scss - input fields, buttons...
*/
@import "button";
@import "input";
@import "fieldset";

View File

@ -0,0 +1,5 @@
header{
height: 170px;
background-color: #eee;
}

View File

@ -0,0 +1 @@
@import "menu_left";

View File

@ -0,0 +1,66 @@
#main{
margin-top: 70px;
padding-bottom: 30px;
/*overflow-x: scroll;*/
#anketa_edit{
box-sizing: border-box !important;
padding: 15px !important;
}
#placeholder{
width: auto;
}
}
fieldset {
width: 100% !important;
box-sizing: border-box !important;
margin-left: 0 !important;
margin-right: 0 !important;
.nastavitveSpan1,
.nastavitveSpan2,
.nastavitveSpan3,
.nastavitveSpan4,
.nastavitveSpan5,
.nastavitveSpan6{
width: auto !important;
display: block !important;
float: none !important;
text-align: left !important;
padding: 15px 0 5px 0 !important;
}
select,
.select2-container,
input[type="text"],
textarea{
width: 100% !important;
box-sizing: border-box;
}
.setting{
height: auto !important;
}
}
#vnosi_paginacija {
div {
select {
display: inline-block;
width: fit-content;
margin: 0 5px;
text-align: center;
}
}
}
div.breadcrumbs {
display: block;
padding: 15px;
color: $strong_blue;
font-weight: 600;
}

View File

@ -0,0 +1,10 @@
#srv_footer{
display: flex;
flex-direction: column;
margin-top: 0;
.footer_left{
margin-bottom: 10px;
}
}

View File

@ -0,0 +1,330 @@
.desktop_header{
display: none;
}
.mobile_header{
position: fixed;
z-index: 9990;
display: flex;
align-items: center;
width: 100vw;
height: 70px;
border-bottom: 1px solid $grey_super_light;
// Znotraj ankete
&.survey_edit{
color: white;
background-color: $strong_blue;
}
// Seznam anket
&.survey_list{
color: $strong_blue;
background-color: white;
}
.mobile_menu_icon{
width: 60px;
text-align: center;
&.mobile_menu_close{
display: none;
span{
font-size: 30px;
font-weight: 600;
line-height: 25px;
}
}
span{
cursor: pointer;
}
}
.mobile_settings_icon{
width: 60px;
text-align: center;
&.mobile_settings_close{
display: none;
span{
font-size: 30px;
font-weight: 600;
line-height: 25px;
}
}
span{
cursor: pointer;
&::before{
font-size: 24px;
}
}
}
.mobile_survey_title{
width: calc(100% - 120px);
text-align: center;
font-size: 14px;
font-weight: 500;
}
.mobile_logo{
width: calc(100% - 120px);
#enka_logo{
margin: 0 auto;
}
}
}
/* Mobile meni */
.mobile_menu{
position: fixed;
z-index: 9995;
display: flex;
flex-direction: column;
top: 71px;
bottom: 0;
width: 85vw;
color: $main_text;
background-color: #ffffff;
overflow: hidden;
-webkit-overflow-scrolling: touch;
overflow-y: auto;
pointer-events: none;
transform: translateX(-100%);
&:not(.no-transition),
.submenu:not(.no-transition){
transition: all 250ms;
}
&.opened{
pointer-events: auto;
transform: translateX(0px);
}
&.submenu-opened{
overflow: hidden;
}
ul {
list-style-type: none;
padding: 0;
padding-left: 0px;
margin: 0;
-webkit-overflow-scrolling: touch;
> li {
display: block;
> a {
position: relative;
display: block;
padding: 18px 20px;
font-size: 14px;
font-weight: 500;
text-decoration: none;
transition: all 150ms;
&:hover {
background-color: $soft_blue;
border-radius: 3px;
}
.arrow_back{
display: block;
position: absolute;
right: 20px;
top: 18px;
transform: rotate(180deg);
}
}
a.active {
color: $orange;
background-color: inherit;
}
&:not(:last-child) > a {
border-bottom: 1px solid $grey_super_light;
}
}
}
.submenu{
overflow: hidden;
-webkit-overflow-scrolling: touch;
overflow-y: auto;
pointer-events: none;
z-index: 9998;
position: fixed;
bottom: 0;
top: 0;
left: 100%;
width:100%;
min-height: 100%;
background-color: #ffffff;
&.opened{
left:0;
pointer-events:auto;
}
&.opened:not(.current){
overflow:hidden;
}
}
.submenu-header {
cursor: pointer;
position: relative;
display: flex;
border-bottom: solid 1px $grey_super_light;
> a {
display: block;
font-size: 14px;
font-weight: 500;
padding: 18px 20px;
padding-left: 20px;
text-decoration: none;
}
> label {
display: block;
width: calc(100% - 110px);
margin-bottom: 8px;
margin-top: 20px;
padding-left: 0px;
font-size: 15px;
font-weight: 500;
text-align: center;
opacity: .5;
}
}
.mobile_menu_user{
li.has-submenu{
.arrow_back{
line-height: 30px;
}
a{
font-size: 13px;
color: $main_text;
.email{
font-size: 12px;
}
}
}
.submenu_user_content{
display: flex;
flex-direction: column;
padding: 20px;
> div{
padding: 5px 0 10px 0;
font-size: 14px;
font-weight: 500;
.faicon{
padding-right: 10px;
vertical-align: -1px;
}
}
}
}
}
/* Mobile meni - NASTAVITVE V UREJANJU ANKETE*/
.mobile_settings{
position: fixed;
right: 0;
z-index: 9994;
top: 71px;
bottom: 0;
width: 85vw;
color: $main_text;
background-color: #ffffff;
overflow: hidden;
-webkit-overflow-scrolling: touch;
overflow-y: auto;
/*pointer-events: none;*/
margin-right: -85vw;
.mobile_settings_content {
display: flex;
flex-direction: column;
padding: 20px;
a{
display: flex;
align-items: center;
padding: 0 0 15px 0;
font-size: 13px;
&.anketa_img_nav{
padding-bottom: 20px;
margin-bottom: 20px;
border-bottom: 1px $soft_blue solid;
}
.faicon::before{
padding-right: 10px;
font-size: 20px;
}
.setting_icon{
width: 60px;
min-width: 60px;
&.bottom{
width: 30px;
min-width: 30px;
}
}
.setting_text{
width: auto;
}
}
}
}

View File

@ -0,0 +1,35 @@
$breakpoint-tablet: 1100px;
$breakpoint-mobile: 850px;
// Samo responsive fixi za malo ozje ekrane, tablice
@media (max-width: $breakpoint-tablet) {
@import "responsive_fixes";
}
// Mobile popravki
@media (max-width: $breakpoint-mobile) {
// Osnova
@import "basic";
@import "header";
@import "footer";
@import "popup";
// Posamezne strani
@import "pages/my_surveys";
@import "pages/new_survey";
@import "pages/status";
@import "pages/branching";
@import "pages/survey_settings";
@import "pages/testing";
@import "pages/publish";
@import "pages/data";
@import "pages/analysis";
@import "pages/no_survey";
@import "pages/settings_profile";
@import "pages/archive";
}

View File

@ -0,0 +1,61 @@
// Tabele
.analysis_bottom_settings a:first-child{
display: block;
margin: 0 0 20px 0 !important;
}
// Grafi
.chart_holder{
width: 100%;
box-sizing: border-box;
.chart_img{
min-height: auto;
float: none;
pointer-events: none;
img {
width: 100%;
}
}
.chart_settings{
display: none;
}
.chart_bottom_settings{
&:first-child{
display: block;
clear: both;
}
}
}
// Porocila
table.analysis_reports{
border-spacing: 0px;
> tbody > tr,
> tbody > tr > td{
display: flex;
flex-direction: column;
width: 100%;
box-sizing: border-box;
}
> tbody > tr > td{
margin: 10px 0;
}
fieldset{
margin-bottom: 0 !important;
}
}

View File

@ -0,0 +1,19 @@
.page_arhivi,
.page_tracking,
.subpage_anal_arch,
.subpage_view_archive,
.subpage_anal_arch{
flex-direction: column !important;
.anketa_edit_left{
display: none !important;
}
.anketa_edit_main{
width: 100% !important;
box-sizing: border-box;
margin: 0 !important;
}
}

View File

@ -0,0 +1,266 @@
.page_branching #placeholder,
.page_ #placeholder{
margin-left: 0;
}
.locked .add-variable-mobile,
.spremenljivka_content:hover .add-variable {
display: none !important;
}
#branching{
width: 100%;
li{
margin: 0 10px 0 10px !important;
}
.spr_edit{
display: none !important;
}
.content_div_normalmode{
padding-bottom: 40px;
}
.add-variable-mobile {
display: block;
position: absolute;
left: 59px;
bottom: 20px;
}
.empty_vrivanje {
padding: 30px 0 !important;
margin: 20px 10px 20px 10px !important;
.empty_vrivanje_title{
display: none;
margin: 0 20px;
font-size: 14px;
}
.empty_vrivanje_subtitle{
display: none;
margin: 15px 20px 0 15px;
font-size: 13px;
}
.mobile_add_question{
position: relative;
bottom: auto;
}
}
#bottom_icons_holder{
display: flex;
flex-direction: column;
.forma_bottom{
display: flex;
flex-direction: column;
align-items: left;
width: 100%;
height: auto;
padding: 30px 10px 20px 20px;
.forma_bottom_inner{
display: flex;
flex-direction: row;
padding: 0 0 10px 0;
margin: 0;
a{
margin: 0 11px 0 2px;
padding: 0;
}
}
}
}
}
// Toolbox na levi
#toolbox_advanced_settings{
display: none !important;
top: 150px;
}
#toolbox_basic{
display: none !important;
top: 187px;
}
// Knjiznice ni nikoli
#toolbox_library{
display: none !important;
}
// Mobile gumb za dodajanje vprašanja na konec
.mobile_add_question{
display: block;
position: fixed;
bottom: 25px;
left: calc(50% - 95px);
width: 190px;
a{
display: flex !important;
justify-content: center;
padding: 10px 20px 10px !important;
font-size: 14px;
font-weight: 500;
}
.plus{
margin-right: 8px;
font-size: 28px;
line-height: 15px;
font-weight: 600;
}
}
// Mobile popup za dodajanje vprasanja
.mobile_add_question_popup{
z-index: 9999;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
box-sizing: border-box;
padding: 40px 20px 20px 20px;
background: white;
.mobile_add_question_item{
cursor: pointer;
position: relative;
box-sizing: border-box;
width: 300px;
height: 45px;
margin: 15px auto 5px auto;
font-size: 16px;
font-weight: 500;
text-align: center;
background-color: $soft_blue_very_lighten;
border: 1px $soft_blue_lighten solid;
&:hover{
background-color: $soft_blue_lighten;
border: 1px $soft_blue solid;
}
span.faicon{
position: absolute;
left: 20px;
line-height: 42px;
&.matrix_32{
line-height: 10px;
margin-top: 9px;
}
}
span.item_text{
line-height: 42px;
}
}
.mobile_add_question_button{
position: absolute;
bottom: 25px;
left: calc(50% - 95px);
box-sizing: border-box;
width: 190px;
text-align: center;
a{
padding: 10px 20px 10px !important;
font-size: 14px;
font-weight: 500;
}
}
}
// Urejanje vprasanja popup
#vprasanje_float_editing{
position: fixed;
z-index: 99999;
width: 100%;
height: 100%;
max-height: 100%;
overflow-y: auto;
overflow-x: hidden;
margin: 0 !important;
top: 0;
right: 0;
left: 0;
box-shadow: 0px 0px 100px 100px #333;
#vprasanje_edit{
top: 0;
margin-bottom: 55px;
}
#vprasanje_tabs{
position: absolute;
top: 42px;
a.tab_link{
height: auto;
padding: 10px 9px;
}
}
.tab{
padding-top: 100px;
h2{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 42px;
box-sizing: border-box;
padding: 10px;
margin: 0;
}
}
#vprasanje_buttons{
display: flex;
justify-content: space-evenly;
position: relative;
bottom: 30px;
padding: 0 15px;
span{
width: 40%;
margin-left: 0 !important;
text-align: center;
}
}
}

View File

@ -0,0 +1,98 @@
.page_data{
#vnosi_paginacija{
display: flex;
flex-direction: column;
float: none;
> div{
margin: 5px 0;
}
label{
margin: 0;
padding: 0;
}
}
#data_search_filter{
display: flex;
width: 100%;
box-sizing: border-box;
input{
box-sizing: border-box;
margin-left: 10px;
width: 100%;
}
}
.dataSettingsBasic{
width: 100%;
box-sizing: border-box;
margin: 0;
}
#toggleDataCheckboxes{
display: none;
}
#div_vnosi_data{
#dataTableScroller {
display: none;
}
#tableContainer{
overflow-y: hidden;
padding-bottom: 20px;
}
}
#bottom_data_legend{
display: block;
float: none;
width: 100%;
box-sizing: border-box;
margin: 5px 0 10px 0;
}
}
// Ostale podstrani
.subpage_append,
.subpage_merge,
.subpage_calculation,
.subpage_coding_auto,
.subpage_recoding,
.subpage_coding,
.page_export{
flex-direction: column !important;
.anketa_edit_main{
width: 100% !important;
box-sizing: border-box;
margin: 0 !important;
}
.anketa_edit_left{
display: none !important;
}
textarea{
width: 100% !important;
}
#inv_upload_recipients_nosbmt + span{
display: block;
clear: both;
margin: 40px 0 0 0 !important;
}
}

View File

@ -0,0 +1,103 @@
#main #moje_ankete_edit{
padding: 20px !important;
#anketa_edit{
padding: 0 !important;
}
#survey_list{
display: flex;
flex-direction: column;
> div{
margin: 15px 0 20px 0;
}
#anketa_new_float{
display: flex;
justify-content: left;
}
#pagination{
margin-left: auto;
margin-right: auto;
transform: none;
display: none;
&.bottom{
display: block;
}
}
#sortButton,
#filterButton,
#folderSwitch{
display: none;
}
#searchMySurveys{
padding: 0;
form{
display: flex;
justify-content: center;
input[type="text"]{
width: 100%;
padding: 5px 0 5px 7px;
}
}
}
.div_sl_new {
padding: 20px 0;
}
// Tabela z mojimi anketami
table#surveyList_new{
td{
display: none;
&:nth-child(3),
&:nth-child(6){
display: table-cell;
}
}
}
}
// Knjiznica
&.page_knjiznica{
.folder_left{
line-height: 20px;
}
.folder_right .library_item_setting_text{
display: none;
}
ul li.anketa{
margin: 5px 0;
}
}
// Nastavitve
fieldset{
div.data {
margin-top: 10px;
}
div.setting{
margin-bottom: 10px;
}
}
}

View File

@ -0,0 +1,107 @@
#new_anketa_div{
display: flex;
flex-direction: column;
min-height: auto;
width: 100%;
#left_menu,
#right_content{
width: 100%;
position: relative;
}
#right_content{
box-sizing: border-box;
margin: 20px 0 0 0;
padding: 0;
.setting{
width: 100% !important;
margin: 0 !important;
padding: 0 !important;
}
.survey_title_text_holder{
flex-direction: column !important;
}
select{
width: 100% !important;
margin: 0;
}
input{
width: 100% !important;
box-sizing: border-box;
}
.survey_type_holder{
flex-direction: column !important;
label{
margin-bottom: 15px;
> div{
box-sizing: border-box;
padding: 10px !important;
}
}
}
.fieldset{
line-height: 24px;
input[type="file"]{
margin-top: 20px;
}
}
}
#input_field_holder,
#preview_field_holder{
width: 100% !important;
float: none;
box-sizing: border-box;
margin: 0 !important;
padding: 10px 0 !important;
}
.from_text_instructions{
line-height: 20px !important;
}
.fieldset.noSurvey_template{
display: flex;
flex-direction: column;
.template{
align-self: center;
width: auto !important;
.template_preview {
margin-right: 10px !important;
}
}
}
#left_menu ul.template_type_menu{
display: none;
}
select.template_type_menu{
display: block !important;
height: 40px;
width: 100%;
padding: 2px 5px;
margin-bottom: 40px !important;
font-size: 15px !important;
border: 1px solid #c8e3f8 !important;
border-radius: 1px;
}
}

View File

@ -0,0 +1,31 @@
.noSurvey_sequence {
padding: 0;
.main_holder{
&.main{
flex-direction: column;
}
.left_holder{
width: 90% !important;
margin: auto;
}
.right_holder{
width: 90% !important;
margin: auto;
}
}
.buttons_holder {
flex-direction: column;
align-items: center;
a .button {
margin: 10px 30px;
}
}
}

View File

@ -0,0 +1,175 @@
#vabila > table,
table.invitations_settings,
#inv_msg_preview table,
#inv_send_mail table{
border-spacing: 0px;
width: 100%;
tbody{
display: flex;
flex-direction: column;
width: 100% !important;
}
> tbody > tr,
> tbody > tr > td{
display: flex;
flex-direction: column;
width: 100% !important;
box-sizing: border-box;
}
> tbody > tr > td{
height: auto !important;
margin: 0;
padding: 0 !important;
> br{
display: none;
}
> div,
> fieldset{
margin: 15px 0;
}
}
colgroup,
colgroup col{
width: 100% !important;
}
p label{
width: 100%;
input[type="text"],
input[type="number"],
input[type="password"]{
width: 100% !important;
box-sizing: border-box;
}
}
}
#surveyInvitationSetting,
#surveyInvitationSettingServer{
min-width: 100% !important;
width: 100% !important;
margin: 10px 0 !important;
box-sizing: border-box !important;
}
// Navigacija v vabilih
#inv_top_navi{
display: flex;
flex-direction: column;
width: 100%;
padding: 0;
margin: 0;
.inv_space{
display: none;
}
> #inv_step_nav{
width: 100%;
padding: 0;
margin: 0 0 15px 0;
.inv_step{
height: auto;
padding: 0;
margin: 0;
}
span.label{
padding: 0;
}
}
> #inv_step_nav.yellow{
display: flex;
justify-content: space-between;
.inv_step{
span.circle{
width: 18px;
height: 18px;
line-height: 18px;
}
span.label{
padding: 0 0 0 3px;
}
}
.inv_step_space{
display: none;
}
}
}
// VABILA podstrani
#inv_recipients_profiles_holder,
#inv_import_list_container,
#inv_messages_profiles_holder,
#inv_msg_preview_hld,
#invitation_profile_notes,
#inv_select_mail_to,
#inv_select_mail_preview{
width: 100%;
box-sizing: border-box;
margin: 15px 0 !important;
textarea{
width: 100%;
}
}
#inv_msg_preview table{
th{
height: auto !important;
width: 100% !important;
margin: 0;
padding: 20px 0 0 0 !important;
text-align: left;
}
input{
width: 100%;
box-sizing: border-box;
}
}
.addthis_toolbox{
line-height: 24px;
.at-icon-wrapper{
height: 24px !important;
width: 24px !important;
svg{
height: 24px !important;
width: 24px !important;
}
}
.addthis_separator{
font-size: 16px;
}
}
#inv_field_container ul li {
width: 45%;
}

View File

@ -0,0 +1,18 @@
// Zadnjih 25 sprememb tabela - horizontal scroll
#table-tracking-wrapper1 {
display: table;
table-layout: fixed;
width: 100%;
}
#table-tracking-wrapper2 {
display: table-cell;
overflow-x: auto;
width: 100%;
}
#table-tracking-wrapper2 table {
width: 100%;
border-collapse: collapse;
white-space: nowrap;
}

View File

@ -0,0 +1,16 @@
table.dashboard{
border-spacing: 0px;
> tbody > tr,
> tbody > tr > td{
display: flex;
flex-direction: column;
width: 100%;
box-sizing: border-box;
}
> tbody > tr > td{
margin: 15px 0;
}
}

View File

@ -0,0 +1,104 @@
#main #anketa #globalSetingsList {
max-width: 100% !important;
width: 100% !important;
fieldset{
width: 100% !important;
}
}
/* NASTAVITVE in ARHIVI */
#main #anketa #anketa_edit.page_nastavitve,
#main #anketa #anketa_edit.page_osn_pod,
#main #anketa #anketa_edit.page_mobile_settings,
#main #anketa #anketa_edit.page_jezik,
#main #anketa #anketa_edit.page_dostop,
#main #anketa #anketa_edit.page_piskot,
#main #anketa #anketa_edit.page_alert,
#main #anketa #anketa_edit.page_trajanje,
#main #anketa #anketa_edit.page_skupine,
#main #anketa #anketa_edit.page_urejanje,
#main #anketa #anketa_edit.page_prikaz,
#main #anketa #anketa_edit.page_metadata,
#main #anketa #anketa_edit.page_missing,
#main #anketa #anketa_edit.page_export_settings,
#main #anketa #anketa_edit.page_gdpr_settings,
#main #anketa #anketa_edit.page_uporabnost,
#main #anketa #anketa_edit.page_kviz,
#main #anketa #anketa_edit.page_voting,
#main #anketa #anketa_edit.page_social_network,
#main #anketa #anketa_edit.page_slideshow,
#main #anketa #anketa_edit.page_telephone,
#main #anketa #anketa_edit.page_chat,
#main #anketa #anketa_edit.page_panel,
#main #anketa #anketa_edit.page_advanced_paradata,
#main #anketa #anketa_edit.page_json_survey_export,
#main #anketa #anketa_edit.page_fieldwork{
flex-direction: column-reverse;
> div{
width: 100%;
margin: 20px 0;
}
}
/* OBLIKA */
#main #anketa #anketa_edit.page_tema{
#div_theme_group_holder{
width: 100%;
#div_theme_group div.theme_label{
width: 100%;
box-sizing: border-box;
margin-left: 0;
margin-right: 0;
img{
width: 100%;
height: auto;
}
}
}
}
#theme-editor{
width: 100% !important;
float: none !important;
}
#theme-preview{
width: 100% !important;
float: none !important;
margin-top: 80px !important;
}
/* ARHIVI */
#main #anketa #anketa_edit.page_arhivi{
flex-direction: column-reverse;
> div{
width: 100% !important;
margin: 20px 0;
}
#div_archive_content fieldset {
width: 100% !important;
box-sizing: border-box !important;
margin-left: 0 !important;
margin-right: 0 !important;
input{
width: 100% !important;
}
}
}

View File

@ -0,0 +1,47 @@
#srv_diagnostic{
br{
display: none;
}
#srv_diagnostic_results,
#srv_diagnostic_results_right{
clear: both;
display: block !important;
width: 100% !important;
box-sizing: border-box;
margin: 20px 0 !important;
table{
width: 100%;
min-width: 100%;
td + td {
width: auto !important;
}
}
}
}
.subpage_testnipodatki{
line-height: 20px;
form{
input[type="submit"]{
margin: 10px 0 10px 15px;
padding: 3px;
}
label{
padding-top: 20px;
input{
vertical-align: bottom;
}
}
}
}

View File

@ -0,0 +1,13 @@
/* Popup za vprasajcke */
.qtip{
position: fixed !important;
z-index: 9999999 !important;
width: 80% !important;
box-sizing: border-box !important;
top: 20% !important;
left: 10% !important;
box-shadow: 0 0 15px 15px rgba(0,0,0,.34) !important;
}

View File

@ -0,0 +1,42 @@
#quick_comments_link.newCss {
display:none;
}
#firstNavigation {
ol.right-side {
display:none;
}
}
div.status_advanced {
flex-direction: column;
}
div.status_advanced_box {
width: 100%;
box-sizing: border-box;
}
a.status_advanced_link {
width: 95%;
}
.content_div_normalmode {
overflow-x: auto;
&::-webkit-scrollbar {
background-color: inherit;
height: 5px;
}
&::-webkit-scrollbar-thumb {
background: #c4c4c4;
border-radius: 5px;
}
}
@media (prefers-color-scheme: dark) {
.content_div_normalmode::-webkit-scrollbar-thumb{
background: #c4c4c4;
}
}

View File

@ -0,0 +1,12 @@
/*
Specific pages scss
*/
// My surveys
@import "my_surveys/my_surveys";
// Survey pages
@import "survey_edit/survey_edit";
@import "survey_data/survey_data";
@import "survey_analysis/survey_analysis";

View File

@ -0,0 +1,18 @@
/*
Main scss with includes
*/
// Basic styles (variables, colors, fonts, layouts)
@import "basic/basic";
// Components (inputs, popups...)
@import "components/components";
// Page specific styles (survey editing, analysis...)
@import "pages/pages";
// Mobile styles
//@import "mobile/mobile";