From d97c729dae83eb29c158308d0ba1685278d62fde Mon Sep 17 00:00:00 2001
From: markusfluer <fluer.markus@googlemail.com>
Date: Mon, 3 Jul 2017 19:29:16 +0200
Subject: [PATCH] Dev: further recreating lost commits

---
 .../views/admin/survey/surveySummary_view.php | 413 ++++++++++--------
 .../packages/adminpanel/build/lsadminpanel.js |   2 +-
 assets/packages/adminpanel/scss/lsflex.scss   |   2 +-
 3 files changed, 225 insertions(+), 192 deletions(-)

diff --git a/application/views/admin/survey/surveySummary_view.php b/application/views/admin/survey/surveySummary_view.php
index 739a7250378..9be76983f05 100644
--- a/application/views/admin/survey/surveySummary_view.php
+++ b/application/views/admin/survey/surveySummary_view.php
@@ -328,176 +328,190 @@
             </div>
         </div>
 
-
-    <!-- Survey summary -->
-    <h3><?php eT('Survey summary'); ?></h3>
-        <div class="row">
-            <div class="col-sm-12 content-right">
-
-                <!-- for very small screens -->
-                <div class="hidden-sm  hidden-md hidden-lg ">
-                    <p>
-                        <?php echo flattenText($surveyinfo['surveyls_title'])." (".gT("ID")." ".$surveyinfo['sid'].")";?>
-                    </p>
-
-                    <p>
-                        <strong><?php neT("Survey URL:|Survey URLs:",count($aAdditionalLanguages)+1);?></strong><br/>
-                        <small><em><?php echo getLanguageNameFromCode($surveyinfo['language'],false); ?></em></small><br/>
-                            <?php $tmp_url = $this->createAbsoluteUrl("survey/index",array("sid"=>$surveyinfo['sid'],"lang"=>$surveyinfo['language'])); ?>
-                            <?php
-                                // TODO : move to controller
-                                $textLink = substr ( $tmp_url, 0 , 56 );
-                                if ( strlen($textLink) < strlen($tmp_url) )
-                                    $textLink .= '...';
-                            ?>
-                            <small><a href='<?php echo $tmp_url?>' target='_blank'><?php echo $textLink;?></a>
-                        </small>
-
-                    </p>
+    <div class="row">
+        <!-- Survey summary -->
+        <h3 class="col-sm-12"><?php eT('Survey summary'); ?></h3>
+
+        <h4 class="col-sm-12"><?php echo flattenText($surveyinfo['surveyls_title'])." (".gT("ID")." ".$surveyinfo['sid'].")";?></h4>
+        <div class="col-sm-12 col-md-6">
+            <div class="panel panel-default">
+                <!-- Default panel contents -->
+                <div class="panel-heading">
+                    <strong> <?php neT("Survey URL:|Survey URLs:",count($aAdditionalLanguages)+1);?></strong>
                 </div>
-                    <h4><?php echo flattenText($surveyinfo['surveyls_title'])." (".gT("ID")." ".$surveyinfo['sid'].")";?></h4>
-               <!-- Table for big screens -->
-                <table class="items table hidden-xs" id='surveydetails'>
-
-
-                    <!-- Survey URL -->
-                    <tr>
-                        <td class='col-sm-2'>
-                            <strong> <?php neT("Survey URL:|Survey URLs:",count($aAdditionalLanguages)+1);?></strong>
-                        </td>
-                        <td>
-                        </td>
-                    </tr>
-
+                <!-- List group -->
+                <ul class="list-group">
                     <!-- Base language -->
-                    <tr>
-                        <td style="border-top: none; padding-left: 2em">
-                           <?php echo getLanguageNameFromCode($surveyinfo['language'],false); ?>  <?php eT('(Base language)');?>:
-                        </td>
-                        <td style="border-top: none;" >
-                            <?php $tmp_url = $this->createAbsoluteUrl("survey/index",array("sid"=>$surveyinfo['sid'],"lang"=>$surveyinfo['language'])); ?>
-                            <a href='<?php echo $tmp_url?>' target='_blank'><?php echo $tmp_url; ?></a>
-                        </td>
-                    </tr>
-
+                    <li class="list-group-item">
+                        <div class="ls-flex-row col-12">
+                            <div class="col-4">
+                                <?php echo getLanguageNameFromCode($surveyinfo['language'],false); ?>  <?php eT('(Base language)');?>:
+                            </div>
+                            <div class="col-8">
+                                <?php $tmp_url = $this->createAbsoluteUrl("survey/index",array("sid"=>$surveyinfo['sid'],"lang"=>$surveyinfo['language'])); ?>
+                                <a href='<?php echo $tmp_url?>' target='_blank'><?php echo $tmp_url; ?></a>
+                            </div>
+                        </div>
+                    </li>
                     <!-- Additional languages  -->
                     <?php foreach ($aAdditionalLanguages as $langname): ?>
-                        <tr>
-                            <td  style="border-top: none; padding-left: 2em">
+                    <li class="list-group-item">
+                        <div class="ls-flex-row col-12">
+                            <div class="col-4">
                                 <?php echo getLanguageNameFromCode($langname,false).":";?>
-                            </td>
-                            <td  style="border-top: none;" >
+                            </div>
+                            <div class="col-8">
                                 <?php $tmp_url = $this->createAbsoluteUrl("/survey/index",array("sid"=>$surveyinfo['sid'],"lang"=>$langname)); ?>
                                 <a href='<?php echo $tmp_url?>' target='_blank'><?php echo $tmp_url; ?></a>
-                            </td>
-                        </tr>
+                            </div>
+                        </div>
+                    </li>
                     <?php endforeach; ?>
-
                     <!-- End URL -->
-                    <tr>
-                        <td   style="border-top: none; padding-left: 2em">
-                            <?php eT("End URL:");?>
-                        </td>
-                        <td style="border-top: none">
-                            <?php echo $endurl;?>
-                        </td>
-                    </tr>
-
-                    <!-- Survey's texts -->
-                    <tr>
-                        <td><strong><?php eT("Survey texts");?>:</strong></td>
-                        <td></td>
-                    </tr>
-
-                    <!-- Description -->
-                    <tr>
-                        <td style="border-top: none; padding-left: 2em">
-                            <?php eT("Description:");?>
-                        </td>
-                        <td style="border-top: none;" >
-                            <?php
-                                if (trim($surveyinfo['surveyls_description']) != '')
-                                {
-                                    templatereplace(flattenText($surveyinfo['surveyls_description']));
-                                    echo LimeExpressionManager::GetLastPrettyPrintExpression();
-                                }
-                            ?>
-                        </td>
-                    </tr>
-
+                    <li class="list-group-item">
+                        <div class="ls-flex-row col-12">
+                            <div class="col-4">
+                                <?php eT("End URL:");?>
+                            </div>
+                            <div class="col-8">
+                                    <?php echo $endurl;?>
+                            </div>
+                        </div>
+                    </li>
+                </ul>
+            </div>
+        </div>
+        <div class="col-sm-12 col-md-6">
+            <!-- Survey's texts -->
+            <div class="panel panel-default">
+                <!-- Default panel contents -->
+                <div class="panel-heading">
+                    <strong><?php eT("Survey texts");?>:</strong>
+                </div>
+                <!-- List group -->
+                <ul class="list-group">
+                        <!-- Description -->
+                    <li class="list-group-item">
+                        <div class="ls-flex-row col-12">
+                            <div class="col-4">
+                                <?php eT("Description:");?>
+                            </div>
+                            <div class="col-8">
+                                <?php
+                                    if (trim($surveyinfo['surveyls_description']) != '')
+                                    {
+                                        templatereplace(flattenText($surveyinfo['surveyls_description']));
+                                        echo LimeExpressionManager::GetLastPrettyPrintExpression();
+                                    }
+                                ?>
+                            </div>
+                        </div>
+                    </li>
                     <!-- Welcome -->
-                    <tr>
-                        <td style="border-top: none; padding-left: 2em">
-                            <?php eT("Welcome:");?>
-                        </td>
-                        <td style="border-top: none;" >
-                            <?php
-                                templatereplace(flattenText($surveyinfo['surveyls_welcometext']));
-                                echo LimeExpressionManager::GetLastPrettyPrintExpression();
-                            ?>
-                        </td>
-                    </tr>
-
+                    <li class="list-group-item">
+                        <div class="ls-flex-row col-12">
+                            <div class="col-4">
+                                <?php eT("Welcome:");?>
+                            </div>
+                            <div class="col-8">
+                                <?php
+                                    templatereplace(flattenText($surveyinfo['surveyls_welcometext']));
+                                    echo LimeExpressionManager::GetLastPrettyPrintExpression();
+                                ?>
+                            </div>
+                        </div>
+                    </li>
+                    
                     <!-- End message -->
-                    <tr>
-                        <td style="border-top: none; padding-left: 2em">
-                            <?php eT("End message:");?>
-                        </td>
-                        <td style="border-top: none;" >
-                            <?php
-                                templatereplace(flattenText($surveyinfo['surveyls_endtext']));
-                                echo LimeExpressionManager::GetLastPrettyPrintExpression();
-                            ?>
-                        </td>
-                    </tr>
+                    <li class="list-group-item">
+                        <div class="ls-flex-row col-12">
+                            <div class="col-4">
+                                <?php eT("End message:");?>
+                            </div>
+                            <div class="col-8">
+                                    <?php
+                                    templatereplace(flattenText($surveyinfo['surveyls_endtext']));
+                                    echo LimeExpressionManager::GetLastPrettyPrintExpression();
+                                ?>
+                            </div>
+                        </div>
+                    </li>
+                </ul>
+            </div>
+        </div>
+    </div>
+    <div class="row">    
+        <div class="col-sm-12 col-md-6">
+            <ul class="list-group">
                     <!-- Administrator -->
-                    <tr>
-                        <td>
+                <li class="list-group-item">
+                    <div class="ls-flex-row col-12">
+                        <div class="col-4">
                             <strong><?php eT("Administrator:");?></strong>
-                        </td>
-                        <td>
-                            <?php echo flattenText("{$surveyinfo['admin']} ({$surveyinfo['adminemail']})");?>
-                        </td>
-                    </tr>
-
-                    <!-- Fax to -->
-                    <?php if (trim($surveyinfo['faxto'])!=''): ?>
-                        <tr>
-                            <td>
-                                <strong><?php eT("Fax to:");?></strong>
-                            </td>
-                            <td>
-                                <?php echo flattenText($surveyinfo['faxto']);?>
-                            </td>
-                        </tr>
-                    <?php endif; ?>
-
-                    <!-- Start date/time -->
-                    <tr>
-                        <td>
+                        </div>
+                        <div class="col-8">
+                                <?php echo flattenText("{$surveyinfo['admin']} ({$surveyinfo['adminemail']})");?>
+                        </div>
+                    </div>
+                </li>
+                <!-- Fax to -->
+                <li class="list-group-item">
+                    <div class="ls-flex-row col-12">
+                        <div class="col-4">
+                            <strong><?php eT("Fax to:");?></strong>
+                        </div>
+                        <div class="col-8">
+                            <?php echo flattenText($surveyinfo['faxto']);?>
+                        </div>
+                    </div>
+                </li>
+                
+                <!-- Number of questions/groups -->
+                <li class="list-group-item">
+                    <div class="ls-flex-row col-12">
+                        <div class="col-4">
+                            <strong><?php eT("Number of questions/groups:");?></strong>
+                        </div>
+                        <div class="col-8">
+                            <?php echo $sumcount3."/".$sumcount2;?>
+                        </div>
+                    </div>
+                </li>
+            </ul>
+        </div>
+
+        <div class="col-sm-12 col-md-6">
+            <ul class="list-group">
+                <!-- Start date/time -->
+                <li class="list-group-item">
+                    <div class="ls-flex-row col-12">
+                        <div class="col-4">
                             <strong><?php eT("Start date/time:");?></strong>
-                        </td>
-                        <td>
+                        </div>
+                        <div class="col-8">
                             <?php echo $startdate;?>
-                        </td>
-                    </tr>
-
-                    <!-- Expiry date/time -->
-                    <tr>
-                        <td>
+                        </div>
+                    </div>
+                </li>
+                <!-- Expiration date/time -->
+                <li class="list-group-item">
+                    <div class="ls-flex-row col-12">
+                        <div class="col-4">
                             <strong><?php eT("Expiration date/time:");?></strong>
-                        </td>
-                        <td>
+                        </div>
+                        <div class="col-8">
                             <?php echo $expdate;?>
-                        </td>
-                    </tr>
-
-                    <!-- Template -->
-                    <tr>
-                        <td>
+                        </div>
+                    </div>
+                </li>
+                
+                <!-- Template -->
+                <li class="list-group-item">
+                    <div class="ls-flex-row col-12">
+                        <div class="col-4">
                             <strong><?php eT("Template:");?></strong>
-                        </td>
-                        <td>
+                        </div>
+                        <div class="col-8">
                             <?php $templatename = $surveyinfo['template'];
                             if (Permission::model()->hasGlobalPermission('templates','read'))
                             {
@@ -510,43 +524,62 @@
                                 echo $templatename;
                             }
                             ?>
-                        </td>
-
-                    </tr>
-
-                    <!-- Number of questions/groups -->
-                    <tr>
-                        <td>
-                            <strong><?php eT("Number of questions/groups:");?></strong>
-                        </td>
-                        <td>
-                            <?php echo $sumcount3."/".$sumcount2;?>
-                        </td>
-                    </tr>
-
-                    <!-- Hints  -->
-                    <tr>
-                        <td>
-                            <strong><?php eT("Survey settings:");?></strong>
-                        </td>
-                        <td>
-                            <?php echo $warnings.$hints;?>
-                        </td>
-                    </tr>
-
-                    <!-- usage -->
-                    <?php if ($tableusage != false){
-                            if ($tableusage['dbtype']=='mysql' || $tableusage['dbtype']=='mysqli'){
-                                $column_usage = round($tableusage['column'][0]/$tableusage['column'][1] * 100,2);
-                                $size_usage =  round($tableusage['size'][0]/$tableusage['size'][1] * 100,2); ?>
-                                <tr><td><strong><?php eT("Table column usage");?>: </strong></td><td><div class='progressbar' style='width:20%; height:15px;' name='<?php echo $column_usage;?>'></div> </td></tr>
-                                <tr><td><strong><?php eT("Table size usage");?>: </strong></td><td><div class='progressbar' style='width:20%; height:15px;' name='<?php echo $size_usage;?>'></div></td></tr>
-                            <?php }
-                            elseif (($arrCols['dbtype'] == 'mssql')||($arrCols['dbtype'] == 'postgre')||($arrCols['dbtype'] == 'dblib')){
-                                $column_usage = round($tableusage['column'][0]/$tableusage['column'][1] * 100,2); ?>
-                                <tr><td><strong><?php eT("Table column usage");?>: </strong></td><td><strong><?php echo $column_usage;?>%</strong><div class='progressbar' style='width:20%; height:15px;' name='<?php echo $column_usage;?>'></div> </td></tr>
-                            <?php }
-                        } ?>
-                </table>
+                        </div>
+                    </div>
+                </li>
+            </ul>
+        </div>
+    </div>
+    <div class="row">
+        <div class="col-sm-12 col-md-6">
+            <!-- Hints  -->
+            <div class="ls-flex-row col-12">
+                <div class="col-4">
+                    <strong><?php eT("Survey settings:");?></strong>
+                </div>
+                <div class="col-8">
+                    <?php echo $warnings.$hints;?>
+                </div>
             </div>
         </div>
+
+        <div class="col-sm-12 col-md-6">
+        <!-- usage -->
+        <?php if ($tableusage != false){
+                if ($tableusage['dbtype']=='mysql' || $tableusage['dbtype']=='mysqli'){
+                    $column_usage = round($tableusage['column'][0]/$tableusage['column'][1] * 100,2);
+                    $size_usage =  round($tableusage['size'][0]/$tableusage['size'][1] * 100,2); ?>
+                    <div class="ls-flex-row col-12">
+                        <div class="col-4">
+                                <strong><?php eT("Table column usage");?>: </strong>
+                        </div>
+                        <div class="col-8">
+                                <div class='progressbar' style='width:20%; height:15px;' name='<?php echo $column_usage;?>'></div> 
+                        </div>
+                    </div>
+                    <div class="ls-flex-row col-12">
+                        <div class="col-4">
+                            <strong><?php eT("Table size usage");?>: </strong>
+                        </div>
+                        <div class="col-8">
+                            <div class='progressbar' style='width:20%; height:15px;' name='<?php echo $size_usage;?>'></div>
+                        </div>
+                    </div>
+                <?php }
+                elseif (($arrCols['dbtype'] == 'mssql')||($arrCols['dbtype'] == 'postgre')||($arrCols['dbtype'] == 'dblib')){
+                    $column_usage = round($tableusage['column'][0]/$tableusage['column'][1] * 100,2); ?>
+                    <div class="ls-flex-row col-12">
+                        <div class="col-4">
+                            <strong><?php eT("Table column usage");?>: </strong>
+                        </div>
+                        <div class="col-8">
+                            <strong><?php echo $column_usage;?>%</strong>
+                            <div class='progressbar' style='width:20%; height:15px;' name='<?php echo $column_usage;?>'></div> 
+                        </div>
+                    </div>
+                <?php }
+            } ?>
+            </div>      
+        </div>
+    </div>
+</div>
diff --git a/assets/packages/adminpanel/build/lsadminpanel.js b/assets/packages/adminpanel/build/lsadminpanel.js
index 6976efaa6b1..e6734f9e400 100644
--- a/assets/packages/adminpanel/build/lsadminpanel.js
+++ b/assets/packages/adminpanel/build/lsadminpanel.js
@@ -30360,7 +30360,7 @@ exports = module.exports = __webpack_require__(3)(undefined);
 
 
 // module
-exports.push([module.i, ".ls-flex, .ls-flex-row, .ls-flex-column {\n  display: -moz-flex;\n  display: -webkit-flex;\n  display: flex; }\n  .ls-flex.align-item-center, .align-item-center.ls-flex-row, .align-item-center.ls-flex-column {\n    -ms-align-items: center;\n    -webkit-align-items: center;\n    -moz-align-items: center;\n    align-items: center; }\n  .ls-flex.align-item-flex-start, .align-item-flex-start.ls-flex-row, .align-item-flex-start.ls-flex-column {\n    -ms-align-items: flex-start;\n    -webkit-align-items: flex-start;\n    -moz-align-items: flex-start;\n    align-items: flex-start; }\n  .ls-flex.align-item-flex-end, .align-item-flex-end.ls-flex-row, .align-item-flex-end.ls-flex-column {\n    -ms-align-items: flex-end;\n    -webkit-align-items: flex-end;\n    -moz-align-items: flex-end;\n    align-items: flex-end; }\n  .ls-flex.align-item-baseline, .align-item-baseline.ls-flex-row, .align-item-baseline.ls-flex-column {\n    -ms-align-items: baseline;\n    -webkit-align-items: baseline;\n    -moz-align-items: baseline;\n    align-items: baseline; }\n  .ls-flex.align-item-stretch, .align-item-stretch.ls-flex-row, .align-item-stretch.ls-flex-column {\n    -ms-align-items: stretch;\n    -webkit-align-items: stretch;\n    -moz-align-items: stretch;\n    align-items: stretch; }\n  .ls-flex.align-content-center, .align-content-center.ls-flex-row, .align-content-center.ls-flex-column {\n    -ms-justify-content: center;\n    -webkit-justify-content: center;\n    -moz-justify-content: center;\n    justify-content: center; }\n  .ls-flex.align-content-flex-start, .align-content-flex-start.ls-flex-row, .align-content-flex-start.ls-flex-column {\n    -ms-justify-content: flex-start;\n    -webkit-justify-content: flex-start;\n    -moz-justify-content: flex-start;\n    justify-content: flex-start; }\n  .ls-flex.align-content-flex-end, .align-content-flex-end.ls-flex-row, .align-content-flex-end.ls-flex-column {\n    -ms-justify-content: flex-end;\n    -webkit-justify-content: flex-end;\n    -moz-justify-content: flex-end;\n    justify-content: flex-end; }\n  .ls-flex.align-content-space-between, .align-content-space-between.ls-flex-row, .align-content-space-between.ls-flex-column {\n    -ms-justify-content: space-between;\n    -webkit-justify-content: space-between;\n    -moz-justify-content: space-between;\n    justify-content: space-between; }\n  .ls-flex.align-content-space-around, .align-content-space-around.ls-flex-row, .align-content-space-around.ls-flex-column {\n    -ms-justify-content: space-around;\n    -webkit-justify-content: space-around;\n    -moz-justify-content: space-around;\n    justify-content: space-around; }\n  .ls-flex.wrap, .wrap.ls-flex-row, .wrap.ls-flex-column {\n    -ms-flex-wrap: wrap;\n    -webkit-flex-wrap: wrap;\n    -moz-flex-wrap: wrap;\n    flex-wrap: wrap; }\n  .ls-flex .col-1, .ls-flex-row .col-1, .ls-flex-column .col-1 {\n    width: 8.33333; }\n  .ls-flex .col-2, .ls-flex-row .col-2, .ls-flex-column .col-2 {\n    width: 16.66667; }\n  .ls-flex .col-3, .ls-flex-row .col-3, .ls-flex-column .col-3 {\n    width: 25; }\n  .ls-flex .col-4, .ls-flex-row .col-4, .ls-flex-column .col-4 {\n    width: 33.33333; }\n  .ls-flex .col-5, .ls-flex-row .col-5, .ls-flex-column .col-5 {\n    width: 41.66667; }\n  .ls-flex .col-6, .ls-flex-row .col-6, .ls-flex-column .col-6 {\n    width: 50; }\n  .ls-flex .col-7, .ls-flex-row .col-7, .ls-flex-column .col-7 {\n    width: 58.33333; }\n  .ls-flex .col-8, .ls-flex-row .col-8, .ls-flex-column .col-8 {\n    width: 66.66667; }\n  .ls-flex .col-9, .ls-flex-row .col-9, .ls-flex-column .col-9 {\n    width: 75; }\n  .ls-flex .col-10, .ls-flex-row .col-10, .ls-flex-column .col-10 {\n    width: 83.33333; }\n  .ls-flex .col-11, .ls-flex-row .col-11, .ls-flex-column .col-11 {\n    width: 91.66667; }\n  .ls-flex .col-12, .ls-flex-row .col-12, .ls-flex-column .col-12 {\n    width: 100; }\n\n.ls-flex-row {\n  -ms-flex-direction: row;\n  -webkit-flex-direction: row;\n  -moz-flex-direction: row;\n  flex-direction: row;\n  width: 100%; }\n\n.ls-flex-column {\n  -ms-flex-direction: column;\n  -webkit-flex-direction: column;\n  -moz-flex-direction: column;\n  flex-direction: column; }\n\n.background-muted {\n  background: #cdcdcd; }\n  .background-muted > li {\n    background: #cdcdcd; }\n\n.ls-ba .list-group > .list-group-item {\n  padding: 10px 0;\n  border: 0;\n  border-radius: 0;\n  border-bottom: 1px solid #323232;\n  margin-bottom: 1px; }\n  .ls-ba .list-group > .list-group-item .list-group {\n    margin-bottom: 0; }\n    .ls-ba .list-group > .list-group-item .list-group .list-group-item {\n      padding-left: 15px; }\n      .ls-ba .list-group > .list-group-item .list-group .list-group-item:last-of-type {\n        border-bottom: 0; }\n    .ls-ba .list-group > .list-group-item .list-group:first-of-type {\n      border-top: 1px solid #323232; }\n\n#sidebar {\n  padding-top: 15px; }\n\n.menubar.surveybar {\n  position: absolute;\n  top: 105px;\n  left: 305px;\n  width: 85%; }\n\n#in_survey_common {\n  padding-top: 65px; }\n", ""]);
+exports.push([module.i, ".ls-flex, .ls-flex-row, .ls-flex-column {\n  display: -moz-flex;\n  display: -webkit-flex;\n  display: flex; }\n  .ls-flex.align-item-center, .align-item-center.ls-flex-row, .align-item-center.ls-flex-column {\n    -ms-align-items: center;\n    -webkit-align-items: center;\n    -moz-align-items: center;\n    align-items: center; }\n  .ls-flex.align-item-flex-start, .align-item-flex-start.ls-flex-row, .align-item-flex-start.ls-flex-column {\n    -ms-align-items: flex-start;\n    -webkit-align-items: flex-start;\n    -moz-align-items: flex-start;\n    align-items: flex-start; }\n  .ls-flex.align-item-flex-end, .align-item-flex-end.ls-flex-row, .align-item-flex-end.ls-flex-column {\n    -ms-align-items: flex-end;\n    -webkit-align-items: flex-end;\n    -moz-align-items: flex-end;\n    align-items: flex-end; }\n  .ls-flex.align-item-baseline, .align-item-baseline.ls-flex-row, .align-item-baseline.ls-flex-column {\n    -ms-align-items: baseline;\n    -webkit-align-items: baseline;\n    -moz-align-items: baseline;\n    align-items: baseline; }\n  .ls-flex.align-item-stretch, .align-item-stretch.ls-flex-row, .align-item-stretch.ls-flex-column {\n    -ms-align-items: stretch;\n    -webkit-align-items: stretch;\n    -moz-align-items: stretch;\n    align-items: stretch; }\n  .ls-flex.align-content-center, .align-content-center.ls-flex-row, .align-content-center.ls-flex-column {\n    -ms-justify-content: center;\n    -webkit-justify-content: center;\n    -moz-justify-content: center;\n    justify-content: center; }\n  .ls-flex.align-content-flex-start, .align-content-flex-start.ls-flex-row, .align-content-flex-start.ls-flex-column {\n    -ms-justify-content: flex-start;\n    -webkit-justify-content: flex-start;\n    -moz-justify-content: flex-start;\n    justify-content: flex-start; }\n  .ls-flex.align-content-flex-end, .align-content-flex-end.ls-flex-row, .align-content-flex-end.ls-flex-column {\n    -ms-justify-content: flex-end;\n    -webkit-justify-content: flex-end;\n    -moz-justify-content: flex-end;\n    justify-content: flex-end; }\n  .ls-flex.align-content-space-between, .align-content-space-between.ls-flex-row, .align-content-space-between.ls-flex-column {\n    -ms-justify-content: space-between;\n    -webkit-justify-content: space-between;\n    -moz-justify-content: space-between;\n    justify-content: space-between; }\n  .ls-flex.align-content-space-around, .align-content-space-around.ls-flex-row, .align-content-space-around.ls-flex-column {\n    -ms-justify-content: space-around;\n    -webkit-justify-content: space-around;\n    -moz-justify-content: space-around;\n    justify-content: space-around; }\n  .ls-flex.wrap, .wrap.ls-flex-row, .wrap.ls-flex-column {\n    -ms-flex-wrap: wrap;\n    -webkit-flex-wrap: wrap;\n    -moz-flex-wrap: wrap;\n    flex-wrap: wrap; }\n  .ls-flex .col-1, .ls-flex-row .col-1, .ls-flex-column .col-1 {\n    width: 8.33333%; }\n  .ls-flex .col-2, .ls-flex-row .col-2, .ls-flex-column .col-2 {\n    width: 16.66667%; }\n  .ls-flex .col-3, .ls-flex-row .col-3, .ls-flex-column .col-3 {\n    width: 25%; }\n  .ls-flex .col-4, .ls-flex-row .col-4, .ls-flex-column .col-4 {\n    width: 33.33333%; }\n  .ls-flex .col-5, .ls-flex-row .col-5, .ls-flex-column .col-5 {\n    width: 41.66667%; }\n  .ls-flex .col-6, .ls-flex-row .col-6, .ls-flex-column .col-6 {\n    width: 50%; }\n  .ls-flex .col-7, .ls-flex-row .col-7, .ls-flex-column .col-7 {\n    width: 58.33333%; }\n  .ls-flex .col-8, .ls-flex-row .col-8, .ls-flex-column .col-8 {\n    width: 66.66667%; }\n  .ls-flex .col-9, .ls-flex-row .col-9, .ls-flex-column .col-9 {\n    width: 75%; }\n  .ls-flex .col-10, .ls-flex-row .col-10, .ls-flex-column .col-10 {\n    width: 83.33333%; }\n  .ls-flex .col-11, .ls-flex-row .col-11, .ls-flex-column .col-11 {\n    width: 91.66667%; }\n  .ls-flex .col-12, .ls-flex-row .col-12, .ls-flex-column .col-12 {\n    width: 100%; }\n\n.ls-flex-row {\n  -ms-flex-direction: row;\n  -webkit-flex-direction: row;\n  -moz-flex-direction: row;\n  flex-direction: row;\n  width: 100%; }\n\n.ls-flex-column {\n  -ms-flex-direction: column;\n  -webkit-flex-direction: column;\n  -moz-flex-direction: column;\n  flex-direction: column; }\n\n.background-muted {\n  background: #cdcdcd; }\n  .background-muted > li {\n    background: #cdcdcd; }\n\n.ls-ba .list-group > .list-group-item {\n  padding: 10px 0;\n  border: 0;\n  border-radius: 0;\n  border-bottom: 1px solid #323232;\n  margin-bottom: 1px; }\n  .ls-ba .list-group > .list-group-item .list-group {\n    margin-bottom: 0; }\n    .ls-ba .list-group > .list-group-item .list-group .list-group-item {\n      padding-left: 15px; }\n      .ls-ba .list-group > .list-group-item .list-group .list-group-item:last-of-type {\n        border-bottom: 0; }\n    .ls-ba .list-group > .list-group-item .list-group:first-of-type {\n      border-top: 1px solid #323232; }\n\n#sidebar {\n  padding-top: 15px; }\n\n.menubar.surveybar {\n  position: absolute;\n  top: 105px;\n  left: 305px;\n  width: 85%; }\n\n#in_survey_common {\n  padding-top: 65px; }\n", ""]);
 
 // exports
 
diff --git a/assets/packages/adminpanel/scss/lsflex.scss b/assets/packages/adminpanel/scss/lsflex.scss
index f27adc3429f..d6595ef51d9 100644
--- a/assets/packages/adminpanel/scss/lsflex.scss
+++ b/assets/packages/adminpanel/scss/lsflex.scss
@@ -43,7 +43,7 @@ $x-directions: center flex-start flex-end space-between space-around;
     }
 
     @for $i from 1 through 12 {
-        .col-#{$i} { width: 100*( $i/12); }
+        .col-#{$i} { width: 100*( $i/12)*1%; }
     }
 
 }