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"> <div class="form-group">
<label><%- @T('Logo') %></label> <label><%- @T('Logo') %></label>
<div class="alert alert--danger hide" role="alert"></div> <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 class="btn btn--success fileUpload"><%- @T('Upload') %><input type="file" class="js-upload" name="logo" accept="image/*"></div>
</div> </div>
<div class="form-group"> <div class="form-group">

View file

@ -55,7 +55,8 @@
</div> </div>
<div class="form-group"> <div class="form-group">
<label>Logo</label> <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 class="btn btn--success fileUpload">Upload<input type="file" class="js-upload" accept="image/*"></div>
</div> </div>
<div class="form-group"> <div class="form-group">

View file

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