fix logo preview cross browser

This commit is contained in:
Felix Niklas 2014-11-17 10:29:50 +01:00
parent 4557979d6f
commit a737b2454a
3 changed files with 17 additions and 16 deletions

View file

@ -13,7 +13,8 @@
<div class="form-group">
<label><%- @T('Logo') %></label>
<div class="alert alert--danger hide" role="alert"></div>
<img class="logo-preview" src="" data-placeholder="<%- @T('Your Logo') %>">
<img class="logo-preview" src="">
<div class="logo-preview-placeholder"><%- @T('Your Logo') %></div>
<div class="btn btn--success fileUpload"><%- @T('Upload') %><input type="file" class="js-upload" name="logo" accept="image/*"></div>
</div>
<div class="form-group">

View file

@ -55,7 +55,8 @@
</div>
<div class="form-group">
<label>Logo</label>
<img class="logo-preview" src="" data-placeholder="Your Logo">
<img class="logo-preview" src="">
<div class="logo-preview-placeholder"><%- @T('Your Logo') %></div>
<div class="btn btn--success fileUpload">Upload<input type="file" class="js-upload" accept="image/*"></div>
</div>
<div class="form-group">

View file

@ -4241,27 +4241,26 @@ label + .wizard-buttonList {
.setup.wizard .logo-preview {
display: block;
background: hsl(0,0%,95%);
width: 100%;
height: 60px;
margin-bottom: 10px;
content: "";
color: hsl(0,0%,60%);
@extend .centered;
height: 0;
max-width: 200px;
max-height: 100px;
&:after {
content: attr(data-placeholder);
+ .logo-preview-placeholder {
height: 100px;
color: hsl(0,0%,60%);
background: hsl(0,0%,95%);
margin-bottom: 10px;
@extend .centered;
}
}
.setup.wizard .logo-preview:not([src=""]) {
content: initial;
max-width: 240px;
max-height: 60px;
margin: 0 auto 15px;
background: none;
width: auto;
height: auto;
+ .logo-preview-placeholder {
display: none;
}
}
.import.wizard .wizard-slide {