update material style, add text to dropdown buttons

scss/darkroom-colors/_dropdown.scss

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

scss/material-darkroom.scss

@@ -32,9 +32,14 @@ $bmd-navbar-link-font-size: 1rem !default;
   @media (max-width: 767px) {
     display: none;
   }
+  .dropdown-item {
+    max-width: 100%;
+  }
 }
 
 .radio label,
-.checkbox label {
+.checkbox label,
+select.form-control,
+input[type=text].form-control {
   color: inherit;
 }

template/index.tpl

@@ -36,7 +36,7 @@ $(document).ready(function() {
 {if !empty($image_orders)}
                     <li class="nav-item dropdown">
                         <a href="#" class="nav-link dropdown-toggle" data-toggle="dropdown" title="{'Sort order'|@translate}">
-                            <i class="fa fa-sort" aria-hidden="true"></i><span class="caret"></span>
+                            <i class="fa fa-sort" aria-hidden="true"></i><span class="d-xl-none d-lg-none ml-4">{'Sort order'|@translate}</span><span class="caret"></span>
                         </a>
                         <div class="dropdown-menu" role="menu">
 {foreach from=$image_orders item=image_order name=loop}
@@ -48,7 +48,7 @@ $(document).ready(function() {
 {if !empty($image_derivatives)}
                     <li class="nav-item dropdown">
                         <a href="#" class="nav-link dropdown-toggle" data-toggle="dropdown" title="{'Photo sizes'|@translate}">
-                            <i class="fa fa-picture-o" aria-hidden="true"></i><span class="caret"></span>
+                            <i class="fa fa-picture-o" aria-hidden="true"></i><span class="d-xl-none d-lg-none ml-4">{'Photo sizes'|@translate}</span><span class="caret"></span>
                         </a>
                         <div class="dropdown-menu" role="menu">
 {foreach from=$image_derivatives item=image_derivative name=loop}
@@ -60,57 +60,57 @@ $(document).ready(function() {
 {if isset($favorite)}
                     <li class="nav-item">
                         <a class="nav-link" href="{$favorite.U_FAVORITE}" title="{'Delete all photos from your favorites'|@translate}" rel="nofollow">
-                            <i class="fa fa-heartbeat" aria-hidden="true"></i>
+                            <i class="fa fa-heartbeat" aria-hidden="true"></i><span class="d-xl-none d-lg-none ml-4">{'Delete all photos from your favorites'|@translate}</span>
                         </a>
                     </li>
 {/if}
 {if isset($U_EDIT)}
                     <li class="nav-item">
                         <a class="nav-link" href="{$U_EDIT}" title="{'Edit album'|@translate}">
-                            <i class="fa fa-pencil" aria-hidden="true"></i>
+                            <i class="fa fa-pencil" aria-hidden="true"></i><span class="d-xl-none d-lg-none ml-4">{'Edit album'|@translate}</span>
                         </a>
                     </li>
 {/if}
 {if isset($U_CADDIE)}
                     <li class="nav-item">
                         <a class="nav-link" href="{$U_CADDIE}" title="{'Add to caddie'|@translate}">
-                            <i class="fa fa-shopping-basket" aria-hidden="true"></i>
+                            <i class="fa fa-shopping-basket" aria-hidden="true"></i><span class="d-xl-none d-lg-none ml-4">{'Add to caddie'|@translate}</span>
                         </a>
                     </li>
 {/if}
 {if isset($U_SEARCH_RULES)}
 {combine_script id='core.scripts' load='async' path='themes/default/js/scripts.js'}
                     <li class="nav-item">
                         <a class="nav-link" href="{$U_SEARCH_RULES}" onclick="bd_popup(this.href); return false;" title="{'Search rules'|@translate}" rel="nofollow">
-                            <i class="fa fa-search" aria-hidden="true"></i>
+                            <i class="fa fa-search" aria-hidden="true"></i><span class="d-xl-none d-lg-none ml-4">{'Search rules'|@translate}</span>
                         </a>
                     </li>
 {/if}
 {if isset($U_SLIDESHOW)}
                     <li class="nav-item">
                         <a class="nav-link" href="{if $theme_config->photoswipe}javascript:;{else}{$U_SLIDESHOW}{/if}" id="startSlideshow" title="{'slideshow'|@translate}" rel="nofollow">
-                            <i class="fa fa-play" aria-hidden="true"></i>
+                            <i class="fa fa-play" aria-hidden="true"></i><span class="d-xl-none d-lg-none ml-4 text-capitalize">{'slideshow'|@translate}</span>
                         </a>
                     </li>
 {/if}
 {if isset($U_MODE_FLAT)}
                     <li class="nav-item">
                         {strip}<a class="nav-link" href="{$U_MODE_FLAT}" title="{'display all photos in all sub-albums'|@translate}" rel="nofollow">
-                            <i class="fa fa-th-large" aria-hidden="true"></i>
+                            <i class="fa fa-th-large" aria-hidden="true"></i><span class="d-xl-none d-lg-none ml-4">{'display all photos in all sub-albums'|@translate}</span>
                         </a>{/strip}
                     </li>
 {/if}
 {if isset($U_MODE_NORMAL)}
                     <li class="nav-item">
                         {strip}<a class="nav-link" href="{$U_MODE_NORMAL}" title="{'return to normal view mode'|@translate}">
-                            <i class="fa fa-home" aria-hidden="true"></i>
+                            <i class="fa fa-home" aria-hidden="true"></i><span class="d-xl-none d-lg-none ml-4">{'return to normal view mode'|@translate}</span>
                         </a>{/strip}
                     </li>
 {/if}
 {if isset($U_MODE_POSTED) || isset($U_MODE_CREATED)}
                     <li class="nav-item dropdown">
                         <a href="#" class="nav-link dropdown-toggle" data-toggle="dropdown" title="{'Calendar'|@translate}">
-                            <i class="fa fa-calendar" aria-hidden="true"></i>
+                            <i class="fa fa-calendar" aria-hidden="true"></i><span class="d-xl-none d-lg-none ml-4">{'Calendar'|@translate}</span>
                         </a>
                         <div class="dropdown-menu dropdown-menu-right">
 {if isset($U_MODE_POSTED)}

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}

template/search.tpl

@@ -97,7 +97,7 @@
             </h4>
             <div class="card-body">
                 <div class="form-group mb-3">
-                    <select id="tags" placeholder="{'Type in a search term'|@translate}" name="tags[]" multiple>
+                    <select class="form-control" id="tags" placeholder="{'Type in a search term'|@translate}" name="tags[]" multiple>
 {foreach from=$TAGS item=tag}
                         <option value="{$tag.id}">{$tag.name} ({$tag.counter|translate_dec:'%d photo':'%d photos'})</option>
 {/foreach}
@@ -135,35 +135,35 @@
                 <label>{'Date'|@translate}</label>
                 <div class="form-group">
                   <div class="form-inline">
-                    <select id="start_day" name="start_day" class="form-control">
+                    <select id="start_day" name="start_day" class="form-control mr-3">
                         <option value="0">--</option>
 {section name=day start=1 loop=32}
                         <option value="{$smarty.section.day.index}" {if $smarty.section.day.index==$START_DAY_SELECTED}selected="selected"{/if}>{$smarty.section.day.index}</option>
 {/section}
                     </select>
-                    <select id="start_month" name="start_month" class="form-control">
+                    <select id="start_month" name="start_month" class="form-control mr-3">
 {html_options options=$month_list selected=$START_MONTH_SELECTED}
                     </select>
-                    <input id="start_year" name="start_year" type="text" size="4" maxlength="4" class="form-control">
+                    <input id="start_year" name="start_year" type="text" size="4" maxlength="4" class="form-control" placeholder="{'Year'|@translate}">
                     <input id="start_linked_date" name="start_linked_date" type="hidden" size="10" disabled="disabled">
-                    <a class="date_today ml-2" href="#" onClick="document.getElementById('start_day').value={$smarty.now|date_format:"%d"};document.getElementById('start_month').value={$smarty.now|date_format:"%m"};document.getElementById('start_year').value={$smarty.now|date_format:"%Y"};return false;">{'today'|@translate}</a>
+                    <a class="date_today ml-3 btn btn-sm btn-info" href="#" onClick="document.getElementById('start_day').value={$smarty.now|date_format:"%d"};document.getElementById('start_month').value={$smarty.now|date_format:"%m"};document.getElementById('start_year').value={$smarty.now|date_format:"%Y"};return false;">{'today'|@translate}</a>
                   </div>
                 </div>
                 <label>{'End-Date'|@translate}</label>
                 <div class="form-group">
                   <div class="form-inline">
-                    <select id="end_day" name="end_day" class="form-control">
+                    <select id="end_day" name="end_day" class="form-control mr-3">
                         <option value="0">--</option>
 {section name=day start=1 loop=32}
                         <option value="{$smarty.section.day.index}" {if $smarty.section.day.index==$END_DAY_SELECTED}selected="selected"{/if}>{$smarty.section.day.index}</option>
 {/section}
                     </select>
-                    <select id="end_month" name="end_month" class="form-control">
+                    <select id="end_month" name="end_month" class="form-control mr-3">
 {html_options options=$month_list selected=$END_MONTH_SELECTED}
                     </select>
-                    <input id="end_year" name="end_year" type="text" size="4" maxlength="4" class="form-control">
+                    <input id="end_year" name="end_year" type="text" size="4" maxlength="4" class="form-control" placeholder="{'Year'|@translate}">
                     <input id="end_linked_date" name="end_linked_date" type="hidden" size="10" disabled="disabled">
-                    <a class="date_today ml-2" href="#" onClick="document.getElementById('end_day').value={$smarty.now|date_format:"%d"};document.getElementById('end_month').value={$smarty.now|date_format:"%m"};document.getElementById('end_year').value={$smarty.now|date_format:"%Y"};return false;">{'today'|@translate}</a>
+                    <a class="date_today ml-3 btn btn-sm btn-info" href="#" onClick="document.getElementById('end_day').value={$smarty.now|date_format:"%d"};document.getElementById('end_month').value={$smarty.now|date_format:"%m"};document.getElementById('end_year').value={$smarty.now|date_format:"%Y"};return false;">{'today'|@translate}</a>
                  </div>
               </div>
             </div>
@@ -175,7 +175,7 @@
             <div class="card-body">
                 <div class="row mb-3">
                     <div class="col-lg-7 col-md-9 col-sm-12 col-xs-12">
-                        <select id="categories" name="cat[]" multiple>
+                        <select class="form-control" id="categories" name="cat[]" multiple>
 {html_options options=$category_options selected=$category_options_selected}
                         </select>
                     </div>
@@ -190,7 +190,7 @@
             </div>
         </div>
         <input type="submit" name="submit" value="{'Submit'|@translate}" class="btn btn-primary btn-raised">
-        <input type="reset" value="{'Reset'|@translate}" class="btn btn-warning btn-raised">
+        <input type="reset" value="{'Reset'|@translate}" class="btn btn-info btn-raised">
     </form>
 </div>
 

template/thumbnails.tpl

@@ -3,11 +3,15 @@
   var error_icon = "{$ROOT_URL}{$themeconf.icon_dir}/errors_small.png", max_requests = {$maxRequests};
 {/footer_script}
 {if $derivative_params->type == "thumb"}
-{assign var=width value=260}
-{assign var=height value=180}
+{assign var=width value=520}
+{assign var=height value=360}
+{assign var=rwidth value=260}
+{assign var=rheight value=180}
 {else}
 {assign var=width value=$derivative_params->sizing->ideal_size[0]}
 {assign var=height value=$derivative_params->sizing->ideal_size[1]}
+{assign var=rwidth value=$width}
+{assign var=rheight value=$height}
 {/if}
 {define_derivative name='derivative_params' width=$width height=$height crop=true}
 {assign var=idx value=0+$START_ID}
@@ -17,7 +21,7 @@
 {combine_script id='jquery.ajaxmanager' path='themes/default/js/plugins/jquery.ajaxmanager.js' load='footer'}
 {combine_script id='thumbnails.loader' path='themes/default/js/thumbnails.loader.js' require='jquery.ajaxmanager' load='footer'}
 {/if}
-{include file="grid_classes.tpl" width=$width height=$height}
+{include file="grid_classes.tpl" width=$rwidth height=$rheight}
 <div class="col-outer {if $smarty.cookies.view == 'list'}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="{$thumbnail.URL}" data-index="{$idx}"{if $theme_config->bootstrap_theme == 'material'} class="ripple"{/if}>