Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Mirage: Template uploader styling improvements. #430

Merged
merged 1 commit into from Mar 24, 2012
Merged

Mirage: Template uploader styling improvements. #430

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
4 changes: 4 additions & 0 deletions components/com_kunena/template/mirage/css/effect.css
View file
Open in desktop
Expand Up @@ -12,4 +12,8 @@

#kunena.layout .boxcolor-hover:hover {
-moz-transition: all 0.3s ease 0s;
}

#kunena.layout .bar {
animation: 2s linear 0s normal none infinite progress-bar-stripes;
}
4 changes: 2 additions & 2 deletions components/com_kunena/template/mirage/css/global.css
View file
Open in desktop
Expand Up @@ -54,14 +54,14 @@
border-collapse:separate;
border-spacing:0;
}
#kunena.layout caption,
/*#kunena.layout caption,
#kunena.layout th,
#kunena.layout td {
border: 0 solid;
text-align:left;
font-weight:normal;
float:none !important;
}
}*/
#kunena.layout table,
#kunena.layout th,
#kunena.layout td {
Expand Down
12 changes: 10 additions & 2 deletions components/com_kunena/template/mirage/css/position.css
View file
Open in desktop
Expand Up @@ -98,6 +98,14 @@
* START COMMON POSITIONING *
****************************/

#kunena.layout div.progress {
border-radius: 4px 4px 4px 4px;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1) inset;
height: 18px;
margin-bottom: 18px;
overflow: hidden;
}

#kunena.layout li.dropdown a {
position: relative;
}
Expand Down Expand Up @@ -276,13 +284,13 @@
#kunena.layout .form-label {
float: left;
padding: 10px;
width: 20%;
width: 15%;
}

#kunena.layout .form-field {
float: left;
padding: 10px;
width: 75%;
width: 80%;
}

#kunena.layout .form-field_simple {
Expand Down
4 changes: 2 additions & 2 deletions components/com_kunena/template/mirage/css/reset.css
View file
Open in desktop
Expand Up @@ -21,8 +21,8 @@
/* NOTE: If third-party wrapper template is optimized correctly we can take out this section.*/
/* Box Element Reset */
#kunena.layout div, #kunena.layout h1, #kunena.layout h2, #kunena.layout h3, #kunena.layout h4, #kunena.layout h5, #kunena.layout h6, #kunena.layout ul, #kunena.layout li, #kunena.layout ol, #kunena.layout dl, #kunena.layout dt, #kunena.layout dd, #kunena.layout pre, #kunena.layout form, #kunena.layout fieldset, #kunena.layout input, #kunena.layout textarea, #kunena.layout p, #kunena.layout blockquote, #kunena.layout th, #kunena.layout tr, #kunena.layout td {
margin: 0px;
padding: 0px;
/*margin: 0px;
padding: 0px;*/
/*line-height: normal !important;*/
text-decoration: none;
background: none;
Expand Down
12 changes: 12 additions & 0 deletions components/com_kunena/template/mirage/css/style.css
View file
Open in desktop
Expand Up @@ -359,6 +359,18 @@
border-right: 1px solid #333333;
}*/

#kunena.layout div.progress {
background-color: #F7F7F7;
background-image: -moz-linear-gradient(center top , #F5F5F5, #F9F9F9);
background-repeat: repeat-x;
}

#kunena.layout div .progress-striped .bar {
background-color: #149BDF;
background-image: -moz-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
background-size: 40px 40px;
}

#kunena.layout li.dropdown .dropdown-menu {
opacity: 0.0;
background-clip: padding-box;
Expand Down
68 changes: 41 additions & 27 deletions components/com_kunena/template/mirage/css/uploader.css
View file
Open in desktop
Expand Up @@ -10,59 +10,73 @@
/* Uploader styles */
#kuploader {
position: relative;
width:500px;
}

#kuploader .upload-filelist {
border-radius:5px 5px 0 0;
border: 1px solid #D4D4D4;
border-radius: 5px 5px 0 0;
border:1px solid #D4D4D4;
}

#kuploader .upload-filelist-bottom {
border-radius:0 0 5px 5px;
border-radius: 0 0 5px 5px;
border: 1px solid #D4D4D4;
}

#kuploader table {
width:97%;
border-collapse:collapse;
width: 100%;
border-collapse: collapse;
}
#kuploader table th{

#kuploader table th {
width:20px;
padding: 5px 0 5px 5px;
padding: 5px 5px 5px 5px;
color: #333333;
background: #F4F4F4 repeat scroll 0 0 transparent;
font-size:13px;
font-size: 13px;
}

#kuploader table td {
width:30px;
padding:5px;
background:transperant;
background:transparent;
text-align:center;
}

#kuploader table .upload-done td {
color:#007236;
background:#e4fddf;
background:#E4FDDF;
}

#kuploader table .upload-failed td {
color:#CD0A0A;
background:#FEF1EC;
color: #CD0A0A;
background: #FEF1EC;
}
#kuploader table .upload-uploading td {
color:#1b93be;
background:#cdf3ff;
font-weight:bold;
background: #CDF3FF;
font-weight: bold;
}
#kuploader table .upload-file-name {
width:150px;
text-align:left;
width: 45%;
text-align: left;
}
#kuploader table .upload-file-status {
width: 40%;
text-align: left;
}
#kuploader table .upload-file-size {
width: 10%;
text-align: left;
}
#kuploader table .upload-file-action {
width:20px;
width: 5%;
}
#kuploader .upload-buttons {
margin-top:8px;
margin-left:70px;
/*margin-top: 8px;
margin-left: 70px;*/
}
#kuploader .upload-droptext {
padding:25px;
padding: 15px;
font-size: 18px;
}
#kuploader p,
#kuploader td,
Expand All @@ -77,8 +91,8 @@
text-align:left;
}
#kuploader .upload-status table {
border-top:1px solid #D4D4D4;
border-bottom:1px solid #D4D4D4;
/*border-top:1px solid #D4D4D4;
border-bottom:1px solid #D4D4D4;*/
}
#kuploader .upload-upload-status {
font-weight:bold;
Expand All @@ -95,7 +109,7 @@
background: #FEF1EC;
border: 1px solid #CD0A0A;
color: #CD0A0A;
width:97%;
width: 100%;
}
#kuploader .upload-icon {
cursor: pointer;
Expand Down Expand Up @@ -135,7 +149,7 @@
border-left: 1px solid #D4D4D4;
border-right: 1px solid #D4D4D4;
}
#kuploader .button {
/*#kuploader .button {
display: inline-block;
zoom: 1;
vertical-align: baseline;
Expand Down Expand Up @@ -170,7 +184,7 @@
#kuploader .button:active {
color: #afafaf;
background-image: linear-gradient(left top, left bottom, #575757 0%, #888 100%);
}
}*/
#kuploader .upload-hidden {
display: none;
}
38 changes: 14 additions & 24 deletions components/com_kunena/template/mirage/js/uploader.js
View file
Open in desktop
Expand Up @@ -279,45 +279,35 @@ Kunena.Uploader = new Class({
_render: function(name) {
document.id(name).set('html',
'<div class="upload-container">' +

'<div class="upload-filelist-container">' +

'<table class="upload-filelist">' +
'<table class="upload-filelist kbox-full kbox-border kbox-border_radius kbox-border_radius-vchild kbox-shadow">' +
'<thead class="upload-filelist header kbox-hover_header-row">' +
'<tr class="upload-filelist-header">' +
'<th class="upload-file-name">'+'File Name'+'</th>' +
'<th class="upload-file-status">'+'Status'+'</th>' +
'<th class="upload-file-size">'+'Size'+'</th>' +
'<th class="upload-file-name"><span class="bold">'+'File Name'+'</span></th>' +
'<th class="upload-file-status"><span class="bold">'+'Status'+'</span></th>' +
'<th class="upload-file-size"><span class="bold">'+'Size'+'</span></th>' +
'<th class="upload-file-action"></th>' +
'</tr>' +
'</table>' +

'<div class="upload-scroll">' +

'<table class="upload-filelist-files"></table>' +

'</div>' +
'<div class="upload-status">' +

'<table class="upload-filelist-bottom">' +
'</thead>' +
'<tbody class="upload-filelist-files kbox-hover_list-row"></tbody>' +
'<tfoot class="upload-filelist-bottom">' +
'<tr class="upload-filelist-footer">' +
'<td class="upload-file-name">' +
'<div class="upload-upload-status"></div>' +
'</td>' +
'<td class="upload-file-status"><span class="upload-total-status">0%</span></td>' +
'<td class="upload-file-size"><span class="upload-total-file-size">'+'0kb'+'</span></td>' +
'<td class="upload-file-status"><span class="upload-total-status bold">'+'0%'+'</span></td>' +
'<td class="upload-file-size"><span class="upload-total-file-size bold">'+'0kb'+'</span></td>' +
'<td class="upload-file-action"></td>' +
'</tr>' +
'</tfoot>' +
'</table>' +

'</div>' +
'<div class="upload-buttons">' +
'<div class="upload-buttons innerspacer">' +
'<a class="kbutton button-type-standard upload-button-add"><span>'+'Add Files'+'</span></a>' +
'<a class="kbutton button-type-standard upload-button-start upload-hidden"><span>'+'Start Upload'+'</span></a>' +
'<a class="kbutton button-type-standard upload-button-stop upload-hidden"><span>'+'Stop Upload'+'</span></a>' +
'</div>' +
'</div>' +
'</div>' +
'<input class="upload-count" value="0" type="hidden">' +
'<input class="upload-count" value="0" type="hidden" />' +
'</div>');
},

Expand Down Expand Up @@ -418,7 +408,7 @@ Kunena.Uploader = new Class({
'class': 'upload_file',
'id': file.id,
'html': '<td class="upload-file-name"><span>' + file.name + '</span></td>' +
'<td class="upload-file-status">' + file.percent + '%</td>' +
'<td class="upload-file-status"><div class="progress progress-stripped active"><div class="bar" style="width: ' + file.percent + '">' + file.percent + '%</div></div></td>' +
'<td class="upload-file-size">' + plupload.formatSize(file.size) + '</td>' +
'<td class="upload-file-action"><div class="upload-icon" title="'+'Remove File'+'"></div>' + fields + '</td>'
}
Expand Down