Merge branch 'bootstrap4' of https://github.com/tkuther/piwigo-bootst…

…rap-darkroom into bootstrap4

scss/darkroom-colors/_dropdown.scss

@@ -3,4 +3,7 @@
   a {
     color: $dropdown-link-color;
   }
+  &.active a {
+    color: #fff;
+  }
 }

scss/darkroom-core/_navs.scss

@@ -44,8 +44,13 @@
     }
 
     &.collapsing .navbar-form,
-    &.collapse.in .navbar-form {
+    &.collapse.show .navbar-form {
       margin: 10px 0 10px;
+
+      .form-group,
+      .form-group input {
+        width: 100%;
+      }
     }
   }
 

scss/material-darkroom.scss

@@ -21,6 +21,9 @@ $bmd-navbar-link-font-size: 1rem !default;
 .nav-link {
   text-transform: none;
 }
+.navbar-contextual.sticky-top {
+  z-index: 1020;
+}
 
 .dropdown-menu {
   min-width: 15rem;
@@ -29,4 +32,14 @@ $bmd-navbar-link-font-size: 1rem !default;
   @media (max-width: 767px) {
     display: none;
   }
+  .dropdown-item {
+    max-width: 100%;
+  }
+}
+
+.radio label,
+.checkbox label,
+select.form-control,
+input[type=text].form-control {
+  color: inherit;
 }

template/_plugin_fixes_js.tpl

@@ -48,7 +48,7 @@ $(form).find('fieldset').changeElementType('div');
 $(form).find('div').addClass('form-group');
 $(form).find('div>input[type="password"]').addClass('form-control');
 $(form).find('div>input[type="submit"]').changeElementType('button');
-$(form).find('button').addClass('btn btn-primary').text('Login');
+$(form).find('button').addClass('btn btn-primary btn-raised').text('Login');
 $(form).find('label').remove();
 {/strip}{/footer_script}
 {/if}

template/comment_list.tpl

@@ -77,7 +77,7 @@
                 <input type="hidden" name="key" value="{$comment.KEY}">
                 <input type="hidden" name="pwg_token" value="{$comment.PWG_TOKEN}">
                 <input type="hidden" name="image_id" value="{$comment.IMAGE_ID|@default:$current.id}">
-                <button type="submit" class="btn btn-default">{'Submit'|@translate}</button>
+                <button type="submit" class="btn btn-primary btn-raised">{'Submit'|@translate}</button>
             </form>
             {else}
             <blockquote><div>{$comment.CONTENT}</div></blockquote>

template/comments.tpl

@@ -78,7 +78,7 @@
                 </div>
             </div>
         </div>
-        <input type="submit" value="{'Filter and display'|@translate}" class="btn btn-default">
+        <input type="submit" value="{'Filter and display'|@translate}" class="btn btn-primary btn-raised">
     </form>
 </div>
 

template/grid_classes.tpl

@@ -4,7 +4,7 @@ size menu is enabled in child theme *}
 {assign var=width_lg value=970}
 {assign var=width_md value=750}
 {assign var=width_sm value=540}
-{assign var=col_padding value={$col_padding|default:'15'}}
+{assign var=col_padding value={$col_padding|default:'5'}}
 
 {assign var=col_class value=""}
 

template/identification.tpl

@@ -42,7 +42,7 @@
                 <div class="form-group">
                     <div class="col-sm-offset-2 col-sm-10">
                         <input type="hidden" name="redirect" value="{$U_REDIRECT|@urlencode}">
-                        <input tabindex="4" type="submit" name="login" value="{'Submit'|@translate}" class="btn btn-default btn-primary">
+                        <input tabindex="4" type="submit" name="login" value="{'Submit'|@translate}" class="btn btn-primary btn-raised">
                     </div>
                 </div>
                 <div class="form-group">

template/index.tpl

@@ -153,7 +153,7 @@ $(document).ready(function() {
 
 {if isset($chronology_views)}
 <div id="calendar-select" class="btn-group">
-    <button id="calendar-view" type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+    <button id="calendar-view" type="button" class="btn btn-primary btn-raised dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
         {foreach from=$chronology_views item=view}{if $view.SELECTED}{$view.CONTENT}{/if}{/foreach}
         <span class="caret"></span>
     </button>
@@ -187,18 +187,14 @@ $(document).ready(function() {
 {footer_script}{strip}
 $(document).ready(function() {
   $(window).load(function(){
-    $('#content .col-outer .card').equalHeights()
+    $('#content .col-outer .card').equalHeights();
   })
 });
 var resizeTimer;
 $(window).on('resize', function() {
   clearTimeout(resizeTimer);
   resizeTimer = setTimeout(function() {
-    if ($(window).innerWidth() < 768) {
-      $('.col-outer .card').removeAttr('style');
-    } else {
-      $('.col-outer .card').equalHeights();
-    }
+    $('.col-outer .card').removeAttr('style').equalHeights();
   }, 250);
 });
 {/strip}{/footer_script}

template/infos_errors.tpl

@@ -1,5 +1,5 @@
 {if isset($errors) }
-<div class="container-fluid">
+<div class="container">
 {foreach from=$errors item=error}
     <div class="alert alert-danger alert-dismissible" role="alert">
         <button type="button" class="close" data-dismiss="alert"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
@@ -10,7 +10,7 @@
 {/if}
 
 {if not empty($infos)}
-<div class="container-fluid">
+<div class="container">
 {foreach from=$infos item=info}
     <div class="alert alert-info alert-dismissible" role="alert">
         <button type="button" class="close" data-dismiss="alert"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>

template/mainpage_categories.tpl

@@ -2,13 +2,8 @@
     var error_icon = "{$ROOT_URL}{$themeconf.icon_dir}/errors_small.png", max_requests = {$maxRequests};
 {/footer_script}
 {* this might sound ridiculous, but we want to fit the thumbnails to 90% of col-xs-12 without them being too blurry *}
-{if get_device() !== 'desktop'}
 {assign var=width value=520}
 {assign var=height value=360}
-{else}
-{assign var=width value=260}
-{assign var=height value=180}
-{/if}
 {define_derivative name='derivative_params' width=$width height=$height crop=true}
 {define_derivative name='derivative_params_square' type=IMG_SQUARE}
 {foreach from=$category_thumbnails item=cat name=cat_loop}
@@ -20,7 +15,7 @@
 {/if}
 {* this needs a fixed size else it messes up the grid on tablets *}
 {include file="grid_classes.tpl" width=260 height=180}
-<div class="col-outer {if $smarty.cookies.view == 'list'}col-xl-12 col-lg-12 col-md-12 col-sm-12 col-12{else}{$col_class}{/if}" data-grid-classes="{$col_class}">
+<div class="col-outer mt-5 {if $smarty.cookies.view == 'list'}col-xl-12 col-lg-12 col-md-12 col-sm-12 col-12{else}{$col_class}{/if}" data-grid-classes="{$col_class}">
   <div class="card card-thumbnail">
     <a href="{$cat.URL}"{if $theme_config->bootstrap_theme == 'material'} class="ripple"{/if}>
       <img class="card-img-top" {if $derivative->is_cached()}src="{$derivative->get_url()}"{else}src="{$ROOT_URL}themes/bootstrap_darkroom/img/transparent.png" data-src="{$derivative->get_url()}"{/if} alt="{$cat.TN_ALT}" title="{$cat.NAME|@replace:'"':' '|@strip_tags:false} - {'display this album'|@translate}">

template/menubar_identification.tpl

@@ -21,7 +21,7 @@
                 </div>
                 {/if}
                 <input type="hidden" name="redirect" value="{$smarty.server.REQUEST_URI|@urlencode}">
-                <button type="submit" class="btn btn-primary" name="login">{'Login'|@translate}</button>
+                <button type="submit" class="btn btn-primary btn-raised" name="login">{'Login'|@translate}</button>
             </form>
          </div>
          <div class="dropdown-divider"></div>

template/password.tpl

@@ -32,7 +32,7 @@
                 </div>
                 <div class="form-group">
                     <div class="col-sm-offset-2 col-sm-10">
-                        <input type="submit" name="submit" value="{'Change my password'|@translate}" class="btn btn-default btn-primary">
+                        <input type="submit" name="submit" value="{'Change my password'|@translate}" class="btn btn-primary btn-raised">
                     </div>
                 </div>
 {elseif $action eq 'reset'}
@@ -52,7 +52,7 @@
                 </div>
                 <div class="form-group">
                     <div class="col-sm-offset-2 col-sm-10">
-                        <input type="submit" name="submit" value="{'Submit'|@translate}" class="btn btn-default btn-primary">
+                        <input type="submit" name="submit" value="{'Submit'|@translate}" class="btn btn-primary btn-raised">
                     </div>
                 </div>
 {/if}

template/picture.tpl

@@ -302,7 +302,7 @@ $('#theImage img').bind('swipeleft swiperight', function (event) {
                 <td>
                   <div id="Privacy" class="imageInfo">
                     <div class="dropdown">
-                        <button class="btn btn-default dropdown-toggle ellipsis" type="button" id="dropdownPermissions" data-toggle="dropdown" aria-expanded="true">
+                        <button class="btn btn-secondary btn-raised dropdown-toggle ellipsis" type="button" id="dropdownPermissions" data-toggle="dropdown" aria-expanded="true">
                             {$available_permission_levels[$current.level]}
                             <span class="caret"></span>
                         </button>
@@ -403,7 +403,7 @@ dsq.src = '//' + disqus_shortname + '.disqus.com/embed.js';
                                 <textarea class="form-control" name="content" id="contentid" rows="5" cols="50">{$comment_add.CONTENT}</textarea>
                             </div>
                             <input type="hidden" name="key" value="{$comment_add.KEY}">
-                            <button type="submit" class="btn btn-default">{'Submit'|@translate}</button>
+                            <button type="submit" class="btn btn-primary btn-raised">{'Submit'|@translate}</button>
                         </form>
                     </div>
 {/if}

template/profile_content.tpl

@@ -45,8 +45,8 @@
 {if !$ALLOW_USER_CUSTOMIZATION}
                 <div class="form-group row">
                     <div class="col-sm-offset-2 col-sm-10">
-                        <input class="btn btn-default" type="submit" name="validate" value="{'Submit'|@translate}">
-                        <input class="btn btn-default" type="reset" name="reset" value="{'Reset'|@translate}">
+                        <input class="btn btn-primary btn-raised" type="submit" name="validate" value="{'Submit'|@translate}">
+                        <input class="btn btn-primary btn-raised" type="reset" name="reset" value="{'Reset'|@translate}">
                     </div>
                 </div>
 {/if}
@@ -110,9 +110,9 @@
             </div>
         </div>
 
-        <input class="btn btn-default btn-primary" type="submit" name="validate" value="{'Submit'|@translate}">
-        <input class="btn btn-default" type="reset" name="reset" value="{'Reset'|@translate}">
-        <input class="btn btn-default" type="submit" name="reset_to_default" value="{'Reset to default values'|@translate}">
+        <input class="btn btn-primary btn-raised" type="submit" name="validate" value="{'Submit'|@translate}">
+        <input class="btn btn-info btn-raised" type="reset" name="reset" value="{'Reset'|@translate}">
+        <input class="btn btn-warning btn-raised" type="submit" name="reset_to_default" value="{'Reset to default values'|@translate}">
 {/if}
         <input type="hidden" name="redirect" value="{$REDIRECT}">
         <input type="hidden" name="pwg_token" value="{$PWG_TOKEN}">

template/register.tpl

@@ -57,8 +57,8 @@
                 <div class="form-group">
                     <div class="col-sm-offset-2 col-sm-10">
                         <input type="hidden" name="key" value="{$F_KEY}" >
-                        <input type="submit" name="submit" value="{'Register'|@translate}" class="btn btn-default btn-primary">
-                        <input type="reset" value="{'Reset'|@translate}" class="btn btn-default">
+                        <input type="submit" name="submit" value="{'Register'|@translate}" class="btn btn-primary btn-raised">
+                        <input type="reset" value="{'Reset'|@translate}" class="btn btn-primary btn-raised">
                     </div>
                 </div>
             </div>