Skip to content

Loading…

Mirage: Template uploader styling improvements. #430

Merged
merged 1 commit into from

2 participants

@coder4life
Kunena member

No description provided.

@mahagr mahagr merged commit d375f29 into Kunena:master
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Commits on Mar 24, 2012
  1. @coder4life
View
4 components/com_kunena/template/mirage/css/effect.css
@@ -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;
}
View
4 components/com_kunena/template/mirage/css/global.css
@@ -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 {
View
12 components/com_kunena/template/mirage/css/position.css
@@ -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;
}
@@ -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 {
View
4 components/com_kunena/template/mirage/css/reset.css
@@ -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;
View
12 components/com_kunena/template/mirage/css/style.css
@@ -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;
View
68 components/com_kunena/template/mirage/css/uploader.css
@@ -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,
@@ -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;
@@ -95,7 +109,7 @@
background: #FEF1EC;
border: 1px solid #CD0A0A;
color: #CD0A0A;
- width:97%;
+ width: 100%;
}
#kuploader .upload-icon {
cursor: pointer;
@@ -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;
@@ -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;
}
View
38 components/com_kunena/template/mirage/js/uploader.js
@@ -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>');
},
@@ -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>'
}
Something went wrong with that request. Please try again.